/* s2x.css — s2 자리 「한 줄 리본, 지구 한 바퀴」(갈래 s2 Build · 10-24). 기본 = 크림 '낮 지구본'(data-tone="paper", 판 없음 · 먹 큰 면 0).
   ?tone=ink = 리드 결정용 먹 대비책(같은 배치·움직임 · 판 #151414 반경 48/32/24 · 색 토큰만 다름).
   데스크톱(≥1000): 왼쪽 글 기둥 clamp(420px, 40vw, 560px) · 오른쪽 지구 무대(기둥 + 32 → 화면 오른쪽 끝 · 넓은 화면은 내용 오른쪽 + 40 까지).
   수리(10-24 반박 ①·⑧): 무대는 섹션 위 끝부터(위로 넘침 0 — 리본 호 꼭대기 ≥ 섹션 y 28 은 s2x-globe.js 가 지구 자리로 맞춤) · 멈춤 단추 섹션 y 28(머리줄 64 아래) · 1920 은 지평선 오른쪽 끝도 꽃 윤곽.
   태블릿(768~999)·폰: 눈썹·제목·이야기 → 지구 무대(화면 끝에서 끝까지) → 경로 → 판단 → 약속(CSS order 만 · DOM 차례 그대로).
   글자 단계(C2) 56·24·20·16·15·14(폰 36·18·16·15·14) · 굵기 400/600/720 · 반경 0<r<8 0 · 새 @keyframes 이름 0(bed-rise·au-sway 재사용 — 랩은 s2.css 를 부르지 않아 여기서 같은 몸으로 한 번 선언). */
.s2x { margin-top: 96px; }
.s2x-in { position: relative; box-sizing: border-box; width: calc(100% - 80px); max-width: 1360px; margin: 0 auto; padding-top: 40px; min-height: 860px;
  --colw: clamp(420px, 40vw, 560px); --padl: 0px; }
.s2x-col { position: relative; z-index: 2; width: var(--colw); }
.s2x .eb { margin: 0 0 22px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--sub); }
.s2x .big { margin: 0; font-size: 56px; line-height: 1.05; letter-spacing: -.035em; font-weight: 400; }
.s2x .big br:nth-of-type(2) { display: none; }   /* 데스크톱·태블릿 두 줄: '해외 플랫폼도 / 한국에서 접수합니다.'(글 바이트 그대로 — 줄바꿈만) */
.s2x .story { margin: 24px 0 0; font-size: 24px; line-height: 1.4; letter-spacing: -.02em; font-weight: 400; color: var(--ink2); }
.s2x-pick { margin-top: 40px; }
.s2x .s2x-pick .lab { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--sub); }
.s2x .routes { list-style: none; margin: 0; padding: 0; display: block; }
.s2x .routes li, .s2x .chan { margin: 0; border-top: 1px solid var(--line); }
.s2x .rt summary, .s2x .chan summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; border-radius: 12px; }
.s2x .rt summary::-webkit-details-marker, .s2x .chan summary::-webkit-details-marker { display: none; }
.s2x .routes h4 { position: relative; margin: 0; font-size: 20px; line-height: 1.3; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
/* 고른 줄 = h4 글 아래 3px 띠(그 절차 리본 색 · s1 배너 띠와 같은 색) */
.s2x .routes h4::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 999px; background: var(--rib, #c04c10); transform: scaleX(0); transform-origin: 0 50%; }
.s2x .rt[open] h4::after { transform: scaleX(1); }
.s2x .rt[data-route="rights"], .s2x .rt[data-route="search"] { --rib: #c04c10; }
.s2x .rt[data-route="temp"] { --rib: #11784a; }
.s2x .rt[data-route="copy"] { --rib: #b9302e; }
.s2x .rt summary i, .s2x .chan summary i { flex: none; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1; color: var(--sub); }
.s2x .rt[open] summary i, .s2x .chan[open] summary i { transform: rotate(45deg); }
.s2x .rt summary:hover i, .s2x .chan summary:hover i { color: var(--ink); }
.s2x .routes p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--sub); }
.s2x .chan summary b { font-size: 15px; font-weight: 600; color: var(--ink); }
.s2x .chan p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.s2x .judges { margin: 28px 0 0; }
.s2x .judge { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.s2x .pm { margin-top: 28px; }
.s2x .pm p { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.s2x .pm .pill { margin-top: 16px; min-height: 48px; padding: 0 24px; font-size: 16px; border-radius: 999px; -webkit-tap-highlight-color: transparent; }

/* ── 지구 무대(aria-hidden · 그림만) ── */
.s2x-scene { position: static; }
.s2x-stage { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--padl) + var(--colw) + 32px); right: max(calc((100% - 100vw) / 2), -40px);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.s2x-orb { position: absolute; inset: 0; pointer-events: none; --bed-from: 180px; --bed-to: 0px; }
.s2x-orb > canvas { position: absolute; }
.s2x-tags { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.s2x-tag { position: absolute; left: 0; top: 0; box-sizing: border-box; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1.45px solid #813108; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; visibility: hidden; will-change: transform; }
.s2x-hill { position: absolute; left: -20px; bottom: 0; height: var(--hill-h, 170px); pointer-events: none; z-index: 2; --bed-from: 60px; --bed-to: 0px; }
.s2x-hill > canvas { position: absolute; left: 0; top: 0; }
.s2x-live { position: absolute; transform-origin: var(--px, 50%) var(--py, 100%); }
.s2x-live > canvas { position: absolute; left: 0; top: 0; }
.s2x-stage img.still, .s2x-stage noscript img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.s2x-stage.is-fallback .s2x-orb, .s2x-stage.is-fallback .s2x-hill { display: none; }
/* 멈춤 단추(s0-motion 문법 복제 · 44 · 모래 원) — 데스크톱 = 무대 왼쪽 위(섹션 y 28 · 머리줄 아래 · 눈썹 줄 높이) · 폰 = 무대 오른쪽 위
   data-dock-yield 0(반박 ③ — 독과 겹치면 dock-ui 물러남 ② 가 이미 숨김) */
.s2x-motion { position: absolute; z-index: 3; top: 28px; left: auto; right: 0;   /* 수리(10-24 · desk #13): 글 칸과 지구 사이 → 쪽 칸 오른쪽 끝(머리줄 카톡 단추와 같은 세로줄 · 지구 위 빈 하늘) */ display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.s2x-motion[hidden] { display: none; }
.s2x-motion::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: var(--sand); }
.s2x-motion:hover::before, .s2x-motion:active::before { background: var(--line); }
.s2x-motion:focus-visible { outline: 2px solid var(--fl-text); outline-offset: 3px; }
.s2x-motion > span { position: relative; box-sizing: border-box; width: 10px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.s2x-motion[aria-pressed="true"] > span { width: 0; height: 0; margin-left: 3px; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ── 떠오름(M1): 지구 묶음 180px → 0 · 꽃 지평선 60px → 0(시차 3:1 — 지구가 꽃밭 뒤에서 해처럼 떠오름) ── */
@keyframes bed-rise { from { transform: translateY(var(--bed-from, 33%)); } to { transform: translateY(var(--bed-to, 12%)); } }
@keyframes au-sway { from { transform: rotate(calc(-1 * var(--sway, 2deg))); } to { transform: rotate(var(--sway, 2deg)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s2x { view-timeline: --s2x block; }
    .s2x-orb, .s2x-hill { animation: bed-rise linear both; animation-timeline: --s2x; animation-range: entry 0% entry 60%; }
    .is-still .s2x-orb, .is-still .s2x-hill { animation: none; }
  }
  .s2x-live.sway { animation: au-sway var(--sway-t, 6s) ease-in-out infinite alternate; animation-delay: var(--sway-d, 0s); }
  .s2x-live.paused { animation-play-state: paused; }
  .s2x .routes h4::after { transition: transform .45s var(--ease-ui); }
  .s2x .rt summary i, .s2x .chan summary i { transition: transform .3s var(--ease-ui), color .3s var(--ease-ui); }
  @media (hover: hover) and (pointer: fine) { .s2x .rt:not([open]) summary:hover h4::after { transform: scaleX(.3); } }
}

/* ── 1000~1279: 거터 32 · 글 기둥 420~512 에서 h2 가 세 줄일 수 있음(섹션 ≤ 960) ── */
@media (min-width: 1000px) and (max-width: 1279px) {
  .s2x-in { width: calc(100% - 64px); }
}

/* ── 태블릿(768~999): 폰 차례 · 무대 높이 = 0.56W + 40 · 글 크기는 데스크톱 단계 · 경로 1열 ── */
@media (min-width: 768px) and (max-width: 999px) {
  .s2x-in { width: auto; margin: 0; padding: 40px 40px 0; min-height: 0; display: flex; flex-direction: column; }
  .s2x-col { display: contents; }
  .s2x .eb { order: 1; } .s2x .big { order: 2; } .s2x .story { order: 3; max-width: 640px; }
  .s2x-scene { order: 4; position: relative; margin: 16px -40px 0; height: calc(56vw + 40px); }
  .s2x-stage { position: absolute; inset: 0; }
  .s2x-orb { --bed-from: 120px; } .s2x-hill { --bed-from: 48px; }
  .s2x-pick { order: 5; margin-top: 12px; } .s2x .judges { order: 6; } .s2x .pm { order: 7; padding-bottom: 8px; }
  .s2x-motion { top: 8px; left: auto; right: 8px; }
  @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
    .s2x-scene { view-timeline: --s2xs block; }
    .s2x-orb, .s2x-hill { animation-timeline: --s2xs; animation-range: entry 0% entry 100%; }
  } }
}

/* ── 폰(≤767 · 기준 갤럭시 360×656 · 아이폰 390×844): 무대 = 화면 끝에서 끝까지(폰 전용 배치 · 데스크톱 축소판 아님) ── */
@media (max-width: 767px) {
  .s2x { margin-top: 40px; }
  .s2x-in { width: auto; margin: 0; padding: 0 18px; min-height: 0; display: flex; flex-direction: column; }
  .s2x-col { display: contents; }
  .s2x .eb { order: 1; margin-bottom: 12px; }
  .s2x .big { order: 2; font-size: 36px; line-height: 1.12; }
  .s2x .big br:nth-of-type(2) { display: inline; }   /* 세 줄: 해외 플랫폼도 / 한국에서 / 접수합니다. */
  .s2x .story { order: 3; margin-top: 14px; font-size: 18px; line-height: 1.5; }
  .s2x-scene { order: 4; position: relative; margin: 16px -18px 0; height: calc(100vw + 20px); }
  .s2x-stage { position: absolute; inset: 0; }
  .s2x-orb { --bed-from: 90px; } .s2x-hill { --bed-from: 36px; }
  .s2x-pick { order: 5; margin-top: 8px; }
  .s2x .s2x-pick .lab { margin-bottom: 6px; }
  .s2x .rt summary, .s2x .chan summary { min-height: 48px; }
  .s2x .routes h4 { font-size: 18px; }
  .s2x .routes p { font-size: 16px; margin-bottom: 14px; }
  .s2x .judges { order: 6; margin-top: 20px; }
  .s2x .judge { font-size: 18px; }
  .s2x .pm { order: 7; margin-top: 20px; padding-bottom: 8px; }
  .s2x .pm p { font-size: 16px; line-height: 1.5; }
  .s2x .pm .pill { margin-top: 14px; padding: 0 20px; }
  .s2x-motion { top: 8px; left: auto; right: 8px; }
  @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
    .s2x-scene { view-timeline: --s2xs block; }
    .s2x-orb, .s2x-hill { animation-timeline: --s2xs; animation-range: entry 0% entry 100%; }
  } }
}

/* ── 먹 대비책(?tone=ink): 같은 배치 + 판 1360 #151414 · 반경 48(1280 미만 32 · 폰 24) · 글 크림 · 알약 크림 ── */
.s2x[data-tone="ink"] .s2x-in { background: var(--ink); color: var(--cream); border-radius: 48px; padding-left: 55px; overflow: hidden; overflow: clip; --padl: 55px; }
.s2x[data-tone="ink"] .s2x-stage { right: 0; }
.s2x[data-tone="ink"] .eb, .s2x[data-tone="ink"] .s2x-pick .lab, .s2x[data-tone="ink"] .rt summary i, .s2x[data-tone="ink"] .chan summary i { color: #c9c0b4; }
.s2x[data-tone="ink"] .big, .s2x[data-tone="ink"] .story, .s2x[data-tone="ink"] .routes h4, .s2x[data-tone="ink"] .judge, .s2x[data-tone="ink"] .pm p, .s2x[data-tone="ink"] .chan summary b { color: var(--cream); }
.s2x[data-tone="ink"] .routes p, .s2x[data-tone="ink"] .chan p { color: #d8d0c5; }
.s2x[data-tone="ink"] .routes li, .s2x[data-tone="ink"] .chan { border-top-color: #3a3532; }
.s2x[data-tone="ink"] .pm .pill { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.s2x[data-tone="ink"] .s2x-motion { color: var(--cream); }
.s2x[data-tone="ink"] .s2x-motion::before { background: #2a2623; }
@media (max-width: 1279px) { .s2x[data-tone="ink"] .s2x-in { border-radius: 32px; } }
@media (max-width: 767px) { .s2x[data-tone="ink"] .s2x-in { border-radius: 24px; padding: 32px 18px 28px; --padl: 0px; } }