:root{
  color-scheme: dark;

  /* 색 */
  --bg:            #0F1923;
  --surface:       #16212D;
  --surface-2:     #1C2836;
  --surface-3:     #243243;
  --image:         #111C27;
  --line:          rgba(172,185,200,.14);
  --line-strong:   rgba(172,185,200,.30);
  --text:          #F5F3EF;   /* surface 14.7:1 */
  --text-2:        #ACB9C8;   /* surface-2 7.5:1 */
  --text-3:        #8FA1B5;   /* surface-2 5.6:1, bg 6.7:1 */
  --accent:        #FF4454;   /* 면·선·아이콘·18px+ 굵은 글자만 */
  --accent-hover:  #FF5C6A;
  --accent-text:   #FF8A8D;   /* 작은 빨간 글자 7.19:1 */
  --accent-ink:    #0F1923;   /* 빨간 면 위 글자 5.24:1 — 흰 글자 금지 */
  --accent-soft:   rgba(255,68,84,.12);
  --accent-line:   rgba(255,68,84,.40);
  --gold:          #F1CD8A;   /* 월드컵 아이콘·칩 테두리만 */
  --gold-soft:     rgba(241,205,138,.12);
  --gold-line:     rgba(241,205,138,.36);
  --correct:       #5AD19A;   /* 해설 박스 왼쪽 줄·라벨, 다 푼 진행 막대 */
  --correct-soft:  rgba(90,209,154,.10);
  --focus:         #FFD166;

  /* 타입 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem;
  --fs-16: 1rem;   --fs-17: 1.0625rem; --fs-18: 1.125rem;
  --fs-h1:  clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);   /* 26 → 40 */
  --fs-h2:  clamp(1.25rem, 1.05rem + .9vw, 1.75rem);   /* 20 → 28 */
  --fs-q:   clamp(1.0625rem, 1rem + .3vw, 1.25rem);    /* 17 → 20 */
  --lh-title: 1.3;  --lh-q: 1.5;  --lh-body: 1.65;
  --ls-title: -0.02em;  --ls-body: -0.005em;
  --fw-regular: 450; --fw-medium: 550; --fw-semibold: 650; --fw-bold: 700; --fw-heavy: 800;

  /* 간격 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 16px;
  --container: 1040px;
  --measure: 720px;
  --section-gap: 48px;

  /* 반경 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* 모션 */
  --dur-fast: var(--ys-dur-micro); --dur: var(--ys-dur-short); --dur-slow: var(--ys-dur-short);
  --ease: var(--ys-ease-standard); --ease-out: var(--ys-ease-move);

  --tap: 44px; --tap-lg: 52px;

  /* base.css 스튜디오 줄 변수 */
  --ys-line: var(--line); --ys-muted: var(--text-3); --ys-ink: var(--text);
  --ys-container: 1040px; --ys-gutter: 16px;
  --ys-skip-bg: var(--text); --ys-skip-fg: var(--bg);
}
@media (min-width: 768px){ :root{ --gutter: 24px; --section-gap: 72px; --ys-gutter: 24px; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; } }

body{ background: var(--bg); color: var(--text);
      font: var(--fw-regular) var(--fs-16)/var(--lh-body) var(--font);
      letter-spacing: var(--ls-body); min-height: 100svh; display:flex; flex-direction:column;
      word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.container{ width: min(var(--container), 100% - 2*var(--gutter)); margin-inline: auto; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
::selection{ background: var(--accent); color: var(--accent-ink); }
button{appearance:none;cursor:pointer}a{text-decoration:none;color:inherit}ol,ul{padding:0;list-style:none}main{flex:1}main:focus{outline:none}.sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:20px;height:20px;flex:none}
.site-header{padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:var(--bg)}.header-in{display:flex;align-items:center;justify-content:space-between;height:56px}.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:17px;font-weight:800;letter-spacing:var(--ls-title);white-space:nowrap}.brand-icon{border:1px solid var(--line-strong);border-radius:7px}.lang-toggle{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap}.lang-toggle .icon{width:16px;height:16px}
.hero{padding-top:24px}.notice{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 14px;border-left:3px solid var(--text-3);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-2);color:var(--text-2);font-size:14px;line-height:1.55}.notice .icon{width:18px;height:18px;color:var(--text-3);margin-top:2px}.notice a{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.edition-label{font-size:13px;font-weight:600;line-height:20px;color:var(--text-2)}.edition-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-2)}.icon-btn[aria-disabled=true]{pointer-events:none}.icon-btn[aria-disabled=true] .icon{color:var(--text-3);opacity:.4}.edition-picker{position:relative}.period-chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px 0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--text);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}.period-chip .icon{width:16px;height:16px;color:var(--text-2);transition:transform var(--ys-dur-short) var(--ys-ease-move)}.period-chip[aria-expanded=true] .icon{transform:rotate(180deg)}.tag{display:inline-flex;align-items:center;height:26px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text-2);font-size:12px;font-weight:600;white-space:nowrap}
.edition-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:20;width:min(360px,calc(100vw - 2*var(--gutter)));max-width:calc(100vw - 2*var(--gutter) - 52px);max-height:min(60vh,440px);overflow:auto;overscroll-behavior:contain;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 16px 40px rgba(0,0,0,.45);padding:8px}.menu-title{padding:8px 12px 4px;font-size:13px;font-weight:700;color:var(--text-3)}.menu-item{display:block;min-height:56px;padding:10px 12px;border-radius:var(--r-md)}.mi-period{display:block;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}.tag--now{height:22px;border-color:var(--accent-line);color:var(--accent-text);margin-left:8px}.mi-line{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:1.45;color:var(--text-2);margin-top:3px}.mi-line .icon{align-self:center;width:14px;height:14px}.mi-line--wc .icon{color:var(--gold)}.mi-line--ch .icon{color:var(--accent)}.menu-item[aria-current=page]{box-shadow:inset 2px 0 0 var(--accent);background:var(--surface-3)}.menu-loading{padding:12px;font-size:13px;color:var(--text-3)}.menu-note{border-top:1px solid var(--line);margin-top:8px;padding:10px 12px 4px;font-size:12px;line-height:1.5;color:var(--text-3)}
h1{margin-top:16px;font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-title);letter-spacing:var(--ls-title)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:14px;font-weight:600;white-space:nowrap}.chip::after{content:"";position:absolute;inset:-4px 0}.chip .icon{width:16px;height:16px}.chip--gold{border-color:var(--gold-line)}.chip--gold .icon{color:var(--gold)}.chip--red{border-color:var(--accent-line)}.chip--red .icon{color:var(--accent)}.chip.is-done{border-color:var(--line-strong)}.chip.is-done .icon{color:var(--correct)}.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}.countdown{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}.countdown .icon{width:16px;height:16px}.next-ready{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:600}.text-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:700;white-space:nowrap}.text-btn .icon{width:16px;height:16px}.pill-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;font-size:14px;font-weight:600;white-space:nowrap;margin-left:auto}.pill-btn .icon{width:18px;height:18px}.share-fallback{margin-top:12px}.share-fallback label{color:var(--text-2);font-size:13px}.share-fallback input{display:block;width:100%;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);font-size:14px}
.sec{margin-top:var(--section-gap);padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:16px}.sec-head{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}.sec-head>.icon{align-self:center}.sec-head h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-title);letter-spacing:var(--ls-title)}#worldcup .sec-head>.icon{color:var(--gold)}#challenge .sec-head>.icon{color:var(--accent)}.sec-meta{margin-left:auto;font-size:13px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.matches{display:grid;grid-template-columns:1fr;gap:24px;margin-top:20px}.match{position:relative;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:8px;align-items:start}.tile{display:grid;gap:8px;min-width:0}.tile:last-child{grid-column:3}.tile-media{position:relative;aspect-ratio:1/1;background:var(--image);border-radius:var(--r-lg);overflow:hidden}.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;opacity:0;transition:opacity var(--dur) var(--ease)}.tile-media.is-loaded img{opacity:1}.tile-media.is-portrait img{padding:6% 6% 0;object-position:50% 100%}.tile-name{text-align:center;font-size:15px;font-weight:700;line-height:1.35}.initial{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:800;color:var(--text-3)}.vs{position:absolute;left:50%;top:calc((100cqw - 48px)/4);transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg);font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.02em}.matches.is-wide .match{grid-template-columns:1fr;gap:8px}.matches.is-wide .tile:last-child{grid-column:auto}.matches.is-wide .tile-media{aspect-ratio:4/1}.matches.is-wide .tile-media img{padding:10px 16px}.matches.is-wide .vs{position:static;transform:none;justify-self:center}.more{margin-top:16px}.more summary{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:14px;font-weight:600;list-style:none;cursor:pointer;white-space:nowrap}.more summary::-webkit-details-marker{display:none}.more summary .icon{width:16px;height:16px;transition:transform var(--ys-dur-short) var(--ys-ease-move)}.more[open] summary .icon{transform:rotate(180deg)}.match-table{margin-top:12px}.match-table li{display:grid;grid-template-columns:2.5em 1fr;align-items:center;min-height:44px;padding:8px 0;border-bottom:1px solid var(--line)}.mt-num{font-size:13px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}.mt-names{font-size:15px;font-weight:600}.mt-vs{margin:0 6px;font-size:13px;font-weight:600;color:var(--text-3)}.wc-cta{margin-top:20px}.wc-cta p{font-size:14px;line-height:1.55;color:var(--text-2)}.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-text);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-md);font-size:15px;font-weight:700;white-space:nowrap}.btn .icon{width:18px;height:18px}.btn--primary{background:var(--accent);color:var(--accent-ink);font-size:16px}.btn--line{border-color:var(--line-strong);background:transparent}.wc-cta .btn{width:100%;margin-top:12px}
.quiz{max-width:var(--measure)}#ch-desc{margin-top:12px;font-size:15px;line-height:1.65;color:var(--text-2)}#ch-hint{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-3)}.progress{display:flex;align-items:center;gap:12px;margin-top:16px}.segs{display:flex;flex:1;gap:4px}.seg{flex:1;height:4px;border-radius:2px;background:var(--line-strong);transition:none}.seg.is-on{background:var(--accent)}#progress-text{flex:none;font-size:13px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}.progress.is-done .seg{background:var(--correct)}.progress.is-done #progress-text{color:var(--correct)}#questions{margin-top:8px}.question{padding-top:24px;margin-top:24px;border-top:1px solid var(--line)}.question:first-child{margin-top:16px}.q-head{display:flex;align-items:baseline;gap:10px}.q-num{flex:none;font-size:15px;font-weight:800;color:var(--accent-text);font-variant-numeric:tabular-nums}.q-prompt{font-size:var(--fs-q);font-weight:700;line-height:var(--lh-q)}.options{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}.option{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);font-size:16px;font-weight:550;line-height:1.5;text-align:left;transition:none}.option-key{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--text-2)}.option-text{flex:1;min-width:0}.option-check{width:20px;height:20px;flex:none;color:var(--text-2);opacity:0}.option[aria-pressed=true]{border-color:var(--text-3);box-shadow:inset 0 0 0 1px var(--text-3);background:var(--surface-3)}.option[aria-pressed=true] .option-key{border-color:var(--line-strong);background:var(--surface-2);color:var(--text-2)}.option[aria-pressed=true] .option-check{opacity:1}.reveal{display:inline-flex;align-items:center;gap:6px;height:44px;margin-top:12px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--text-2);font-size:15px;font-weight:700;white-space:nowrap}.reveal .icon{width:16px;height:16px;transition:transform var(--ys-dur-short) var(--ys-ease-move)}.reveal[aria-expanded=true] .icon{transform:rotate(180deg)}.explain{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}.explain.is-open{grid-template-rows:1fr}.explain-inner{min-height:0;overflow:hidden}.explain-box{margin-top:12px;padding:14px 16px;background:var(--correct-soft);border-left:3px solid var(--correct);border-radius:0 var(--r-md) var(--r-md) 0}.explain-label{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--correct);font-size:13px;font-weight:700}.explain-label .icon{width:16px;height:16px}.explain-box>p:last-child{font-size:15px;line-height:1.65}
.app-head{display:flex;align-items:center;gap:14px}.app-icon{flex:none;border-radius:12px;border:1px solid var(--line-strong)}#cta-title{font-size:18px;font-weight:800;line-height:1.35}#cta-meta{margin-top:2px;font-size:13px;font-weight:500;color:var(--text-3)}#cta-text{margin-top:12px;font-size:15px;line-height:1.6;color:var(--text-2)}.store-btns{display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px}.app-shot{display:none;width:200px;aspect-ratio:720/1446;border-radius:24px;border:1px solid var(--line-strong);overflow:hidden;background:var(--image)}.app-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}.prev-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0}.prev-link .icon{color:var(--text-2)}.prev-text{display:flex;flex-direction:column}.prev-label{font-size:13px;font-weight:600;color:var(--text-3)}#prev-line{font-size:15px;font-weight:650}
.skeleton{margin-top:12px}.sk-chips{display:flex;gap:8px}.sk{position:relative;overflow:hidden;background:var(--surface-2)}.sk--chip-a{width:110px;height:36px;border-radius:var(--r-pill)}.sk--chip-b{width:96px;height:36px;border-radius:var(--r-pill)}.sk-grid{display:grid;grid-template-columns:1fr 32px 1fr;gap:8px;margin-top:48px}.sk--tile{aspect-ratio:1/1;border-radius:var(--r-lg)}.sk-options{display:grid;gap:8px;max-width:var(--measure);margin-top:32px}.sk--option{height:56px;border-radius:var(--r-md)}.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{from{background-position:150% 0}to{background-position:-50% 0}}.state{max-width:480px;padding:32px 0 8px;text-align:center}.state-icon{display:grid;place-items:center;width:48px;height:48px;margin-inline:auto;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}.state-icon .icon{width:24px;height:24px}#error-title{margin-top:16px;font-size:20px;font-weight:800}#error-text{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text-2)}.state-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.site-footer{margin-top:var(--section-gap);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.goval-foot{padding:24px 0 8px}.foot-legal{max-width:var(--measure);font-size:13px;line-height:1.6;color:var(--text-3)}.foot-links{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:8px}.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);font-size:13px;font-weight:600}.noscript{padding:16px 0;color:var(--text-2);font-size:14px}.ys-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);font:600 14px/1.4 var(--font);padding:12px 18px;border-radius:var(--r-pill);z-index:50;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.ys-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media(hover:hover){.lang-toggle:hover{color:var(--text);border-color:var(--text-3)}.icon-btn:hover,.period-chip:hover,.chip:hover,.pill-btn:hover,.reveal:hover{background:var(--surface-2);color:var(--text)}.menu-item:hover,.menu-item:focus-visible{background:var(--surface-3)}.text-btn:hover,.btn--primary:hover{background:var(--accent-hover)}.btn--line:hover{background:var(--surface-2);border-color:var(--text-3)}.option:hover{border-color:var(--text-3)}.foot-links a:hover,.prev-link:hover #prev-line{text-decoration:underline;text-underline-offset:3px}}
.lang-toggle:active,.icon-btn:active,.period-chip:active,.chip:active,.pill-btn:active,.btn--line:active,.option:active{background:var(--surface-3)}.btn--primary:active{filter:brightness(.92)}
@media(min-width:768px){.header-in{height:64px}.hero{padding-top:40px}.matches{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.options.is-two{grid-template-columns:1fr 1fr}.wc-cta .btn{width:auto;min-width:280px}.app-in{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:40px;align-items:center}.store-btns{display:flex;flex-wrap:wrap}.app-shot{display:block}}
@media(max-width:479px){.state-actions{flex-direction:column}.state-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* Short studio links retain the shared footer layout with a full touch target. */
.ys-studio a{min-width:44px}

/* Round 2: one ordered, user-operated bracket; the layout remains the round-1 grid. */
.wc-play{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:12px}
.wc-play__status{flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.wc-play[data-step="playing"] .wc-play__status{white-space:nowrap}
.wc-play .pill-btn{flex:none;padding-inline:12px}
.tile,.wc-slot,.mt-pick{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:inherit;width:100%;min-height:44px}
.tile{position:relative;border-radius:var(--r-lg)}
.tile-media{display:block}
#worldcup [data-current]{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r-lg)}
.tile[aria-pressed="true"] .tile-media,.wc-slot[aria-pressed="true"] .wc-slot__img{outline:2px solid var(--accent);outline-offset:-2px}
.tile-mark{position:absolute;right:8px;top:8px;color:var(--accent);opacity:0;scale:.6}
.tile[aria-pressed="true"] .tile-mark{opacity:1;scale:1}
#worldcup [data-out]{opacity:.4;scale:.96}
.mt-names{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.mt-pick{text-align:left;font-size:15px;font-weight:600;border-radius:var(--r-sm)}
.mt-pick[aria-pressed="true"]{color:var(--accent-text)}
.mt-vs{margin:0}
.wc-tree{display:grid;gap:24px}
.wc-tree:empty{display:none}
.wc-round,.wc-champ{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.wc-round__title{font-size:18px;font-weight:700;margin-bottom:16px}
.wc-round__list{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.wc-pair{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:8px;align-items:start}
.wc-slot{display:grid;justify-items:center;gap:8px;border-radius:var(--r-lg);min-width:0}
.wc-slot__img,.wc-champ__img{position:relative;display:block;width:64px;aspect-ratio:1;background:var(--image);border-radius:var(--r-lg);overflow:hidden}
.wc-slot__img img,.wc-champ__img img{display:block;width:100%;height:100%;object-fit:contain;padding:6%}
.wc-slot__name{text-align:center;font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.wc-slot--empty .wc-slot__img{border:1px dashed var(--line-strong)}
.wc-slot--empty .wc-slot__name{color:var(--text-3)}
.wc-pair__vs{display:grid;place-items:center;min-height:64px;font-size:12px;font-weight:700;color:var(--text-3)}
.wc-champ{display:grid;justify-items:start;gap:12px}
.wc-champ__label{font-size:14px;font-weight:700;color:var(--text-2)}
.wc-champ__img{width:120px}
.wc-champ__name{font-size:20px;font-weight:800}
.wc-champ__note{max-width:var(--measure);font-size:14px;color:var(--text-2);line-height:1.55}
.wc-tree.is-wide .wc-slot__img,.wc-tree.is-wide .wc-champ__img{width:160px;max-width:100%;aspect-ratio:4/1}
.wc-tree.is-wide .wc-pair{grid-template-columns:minmax(0,1fr);gap:8px}
.wc-tree.is-wide .wc-pair__vs{min-height:24px}
.option-check{scale:.6}
.option[aria-pressed="true"] .option-check{scale:1}
.gv-more h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:var(--ls-title)}
.gv-more__list{display:grid;gap:24px;margin-top:20px}
.gv-more__card{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-content:start;border-radius:var(--r-md)}
.gv-more__card img{grid-row:1/3;width:120px;height:63px;object-fit:cover;border-radius:var(--r-sm)}
.gv-more__card strong{font-size:16px;font-weight:700;line-height:1.4}
.gv-more__card>span{font-size:14px;line-height:1.5;color:var(--text-2);margin-top:4px}
.ys-web a{min-width:44px}
/* Shared goval specificity overrides its small-screen distance: keep the documented 8px. */
@media(max-width:600px){html[data-ys-family="goval"]{--ys-reveal-dist:var(--ys-dist-sm)}}
@media(min-width:768px){
  .wc-round__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .wc-slot__img{width:80px}.wc-pair__vs{min-height:80px}
  .gv-more__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gv-more__card{grid-template-columns:minmax(0,1fr);gap:0}
  .gv-more__card img{grid-row:auto;width:100%;height:auto;aspect-ratio:480/252;margin-bottom:12px}
}
@media(prefers-reduced-motion:no-preference){
  html[data-ys-motion="on"] #worldcup [data-out]{transition:opacity var(--ys-dur-short) var(--ys-ease-standard),scale var(--ys-dur-short) var(--ys-ease-standard)}
  html[data-ys-motion="on"] .tile-mark{transition:opacity var(--ys-dur-spring) var(--ys-ease-spring),scale var(--ys-dur-spring) var(--ys-ease-spring)}
  html[data-ys-motion="on"] .option-check{transition:opacity var(--ys-dur-micro) var(--ys-ease-standard),scale var(--ys-dur-spring) var(--ys-ease-spring)}
}
html:not([data-ys-motion="on"]) .tile-media img,html:not([data-ys-motion="on"]) .option-check,html:not([data-ys-motion="on"]) .tile-mark,html:not([data-ys-motion="on"]) .explain,html:not([data-ys-motion="on"]) .more summary .icon,html:not([data-ys-motion="on"]) .ys-acc::details-content{transition:none}
/* Only the chosen image moves; the rest of the page stays readable. */
::view-transition-old(root),::view-transition-new(root){animation:none}

/* Reserve the edition row while loading and keep the footer below the loading viewport. */
.hero[data-loading] .edition-nav[hidden]{display:flex!important;visibility:hidden}
.skeleton{min-height:100svh}