:root{
    --bg:#0a0e1a; --panel:#121829; --panel2:#0f1422; --line:#222b42;
    --txt:#e8edf7; --muted:#8a96b0; --accent:#16c98d; --accent2:#3b82f6;
    --amber:#f0b429; --red:#ef4444; --gold:#ffd24a;
  }
  *{box-sizing:border-box}
  body{margin:0;background:linear-gradient(180deg,#0a0e1a,#070a14);color:var(--txt);
    font-family:"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  .wrap{width:90%;max-width:none;margin:0 auto;padding:0 0 80px}

  /* header */
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:rgba(10,14,26,.82);border-bottom:1px solid var(--line)}
  .bar{width:90%;max-width:none;margin:0 auto;padding:14px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:.3px}
  .brand .cup{font-size:24px}
  .brand small{display:block;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.5px;margin-top:1px}
  .spacer{flex:1}
  #syncBtn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--accent),#0fae79);color:#05241a;font-weight:800;font-size:14px;
    padding:11px 18px;border-radius:10px;box-shadow:0 4px 14px rgba(22,201,141,.28);transition:.15s}
  #syncBtn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,201,141,.4)}
  #syncBtn:disabled{opacity:.6;cursor:wait;transform:none}
  #syncBtn .ico{font-size:16px;display:inline-block}
  #syncBtn.spin .ico{animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .sync-meta{font-size:12px;color:var(--muted);text-align:right;line-height:1.5}
  .sync-meta b{color:var(--txt)}
  #syncStatus.ok{color:var(--accent)} #syncStatus.err{color:var(--red)} #syncStatus.busy{color:var(--amber)}

  /* nav tabs */
  nav.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:22px 0 26px;flex-wrap:wrap}
  nav.tabs button{background:none;border:none;color:var(--muted);font-size:15px;font-weight:700;
    padding:11px 16px;cursor:pointer;border-bottom:2px solid transparent;border-radius:8px 8px 0 0}
  nav.tabs button:hover{color:var(--txt);background:rgba(255,255,255,.03)}
  nav.tabs button.active{color:var(--txt);border-bottom-color:var(--accent)}
  nav.tabs .tab-spacer{flex:1 1 40px;min-width:24px}                /* 여백: 토너먼트 ↔ 대륙 탭 분리 */
  nav.tabs .tab-spacer+button{border-left:1px solid var(--line);margin-left:4px}

  section{display:none} section.show{display:block;animation:fade .25s}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
  h2.sec{font-size:15px;color:var(--muted);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 0 16px}

  /* group grid */
  .groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
  .gcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .gcard .gh{padding:11px 15px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#1a2238,#141a2c);border-bottom:1px solid var(--line)}
  .gcard .gh .badge{background:var(--accent2);color:#fff;font-size:11px;padding:2px 8px;border-radius:6px;font-weight:800}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{color:var(--muted);font-weight:600;font-size:11px;text-align:center;padding:8px 4px;border-bottom:1px solid var(--line)}
  th.l,td.l{text-align:left}
  td{padding:8px 4px;text-align:center;border-bottom:1px solid rgba(34,43,66,.5)}
  tr:last-child td{border-bottom:none}
  .team{display:flex;align-items:center;gap:9px;padding-left:8px}
  .team img{width:26px;height:18px;object-fit:cover;border-radius:3px;background:#222;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  .team .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .flagfb{width:26px;height:18px;border-radius:3px;background:#2a3550;display:inline-flex;align-items:center;
    justify-content:center;font-size:9px;font-weight:800;color:#9fb0d0;flex:none}
  .pos{width:26px;font-weight:800}
  .pts{font-weight:800;color:var(--txt)}
  td.pts{font-size:14px}
  tr.q1 .pos{color:var(--accent)} tr.q1{background:linear-gradient(90deg,rgba(22,201,141,.12),transparent)}
  tr.q2 .pos{color:#5fd0a8} tr.q2{background:linear-gradient(90deg,rgba(22,201,141,.06),transparent)}
  tr.q3 .pos{color:var(--amber)} tr.q3{background:linear-gradient(90deg,rgba(240,180,41,.08),transparent)}
  .qtag{font-size:9px;padding:1px 6px;border-radius:5px;font-weight:800;margin-left:6px;vertical-align:middle}
  .qtag.adv{background:rgba(22,201,141,.2);color:var(--accent)}
  .qtag.tp{background:rgba(240,180,41,.18);color:var(--amber)}
  .qtag.out{background:rgba(239,68,68,.16);color:#f87171}

  .asia-summary{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}
  .asia-summary .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 18px;min-width:120px}
  .asia-summary .stat .n{font-size:24px;font-weight:800;line-height:1.1}
  .asia-summary .stat .lbl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
  .asia-summary .stat.g .n{color:var(--accent)} .asia-summary .stat.a .n{color:var(--amber)} .asia-summary .stat.r .n{color:#f87171}
  .flagcell{display:flex;align-items:center;gap:9px;padding-left:8px}
  .flagcell img{width:26px;height:18px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.08);flex:none}

  .legend{display:flex;gap:18px;flex-wrap:wrap;margin:18px 2px 0;font-size:12px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .dot{width:11px;height:11px;border-radius:3px;display:inline-block}

  /* third place table */
  .third-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .third-wrap table{font-size:13.5px}
  .third-wrap th{padding:12px 8px}
  .third-wrap td{padding:11px 8px}
  tr.qualified{background:linear-gradient(90deg,rgba(22,201,141,.1),transparent)}
  tr.qualified .pos{color:var(--accent)}
  tr.cut td{opacity:.55}
  .cutline td{padding:0;border:none}
  .cutline div{height:0;border-top:2px dashed var(--amber);position:relative}
  .cutline span{position:absolute;right:10px;top:-9px;background:var(--bg);color:var(--amber);font-size:10px;font-weight:800;padding:0 8px}
  .crit{margin:16px 2px 0;font-size:12.5px;color:var(--muted);line-height:1.7}
  .crit b{color:var(--txt)}
  .crit ol{margin:8px 0 0;padding-left:22px} .crit li{margin:2px 0}

  /* confederation color legend (bracket) */
  .conf-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px;font-size:12px;color:var(--muted)}
  .conf-legend .lgl{font-weight:700;color:var(--txt)}
  .conf-legend .lg{display:inline-flex;align-items:center;gap:6px}
  .conf-legend .lg i{width:14px;height:14px;border-radius:3px;display:inline-block}

  /* bracket — two-sided full tournament, fits viewport width (no horizontal scroll) */
  .bracket{display:flex;align-items:stretch;gap:8px;padding:6px 0 24px;width:100%}
  .half{display:flex;flex:1 1 0;min-width:0;gap:6px}
  .half.right{flex-direction:row-reverse}
  .rcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
  .rcol h3{font-size:10px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin:0 0 8px;
    text-align:center;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rcol .matches{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:6px}
  .center{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
    width:172px;max-width:24vw}
  .center .clabel{font-size:10px;color:var(--gold);letter-spacing:1px;font-weight:800;text-transform:uppercase}
  .center .clabel.bronze{color:var(--amber)}
  .center .mt{width:100%}
  .mt{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:11px;width:100%}
  .mt .mrow{display:flex;align-items:center;gap:6px;padding:5px 6px;min-height:26px}
  .mt .mrow+.mrow{border-top:1px solid rgba(34,43,66,.6)}
  .mt .mrow img{width:18px;height:12px;object-fit:cover;border-radius:2px;flex:none}
  .mt .mrow .flagfb{width:18px;height:12px;font-size:7px}
  .mt .mrow .nm{flex:1;min-width:0;white-space:normal;word-break:keep-all;line-height:1.2}
  .mt .mrow .sc{font-weight:800;min-width:13px;text-align:right;flex:none}
  .mt .mrow.win{color:var(--accent)}
  .mt .mrow.win .nm{font-weight:800}
  .mt .ph{color:var(--muted);font-style:italic}
  .mt .mhead{display:flex;justify-content:space-between;font-size:8.5px;color:var(--muted);padding:3px 6px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
  .mt.tp{border-color:rgba(240,180,41,.4)}
  .mt.final{border-color:var(--gold);box-shadow:0 0 24px rgba(255,210,74,.15)}
  .mt.final .mhead{color:var(--gold)}
  @media(max-width:760px){
    .bracket{flex-direction:column;gap:18px}
    .half{flex-direction:column}.half.right{flex-direction:column}
    .center{width:100%;max-width:none}
    .rcol .matches{gap:8px}
  }
  .pen{font-size:10px;color:var(--muted);font-weight:600}
  .note{font-size:12px;color:var(--amber);background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.25);
    border-radius:10px;padding:10px 14px;margin:0 0 18px}
  .note.ok{color:var(--accent);background:rgba(22,201,141,.08);border-color:rgba(22,201,141,.3)}
  .err-banner{display:none;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#fca5a5;
    padding:10px 14px;border-radius:10px;margin:14px 0;font-size:13px}
  footer{color:var(--muted);font-size:11.5px;text-align:center;margin-top:30px;line-height:1.7}