/* ==========================================================================
   스테이지 상세 · 구간 공략이 있는 스테이지 (templates/stages/scenes.html, 본문은 resources/stage-pages/{번호}.html)
   - 오락실 짜임: 오락기 화면 히어로 → 왼쪽 SCENE SELECT(▶ 커서, ↑↓) → 고른 장면 하나씩 (js/stage-scenes.js)
   - 색은 dnd2.css :root (--stage-*, --msg-frame*, --crt-*, --p1~4). 스테이지 색은 body 의 stage-지역 클래스가 --cc 로 정함
   - 제목 · 카드 · 그림 확대 버튼은 보스 상세(boss-tabs.css 의 bxt-*)를 같이 씀
   ========================================================================== */
.stage-ground { --cc: var(--stage-broken); --cc-rgb: var(--stage-broken-rgb); }
.stage-village { --cc: var(--stage-village); --cc-rgb: var(--stage-village-rgb); }
.stage-juggernaut { --cc: var(--stage-juggernaut); --cc-rgb: var(--stage-juggernaut-rgb); }
.stage-vesuvia { --cc: var(--stage-vesuvia); --cc-rgb: var(--stage-vesuvia-rgb); }
.stage-aengmore { --cc: var(--stage-aengmore); --cc-rgb: var(--stage-aengmore-rgb); }
.stage-despair { --cc: var(--stage-despair); --cc-rgb: var(--stage-despair-rgb); }
.stage-aensun { --cc: var(--stage-aensun); --cc-rgb: var(--stage-aensun-rgb); }
.stage-bridge { --cc: var(--stage-bridge); --cc-rgb: var(--stage-bridge-rgb); }
.stage-oak { --cc: var(--stage-oak); --cc-rgb: var(--stage-oak-rgb); }
.stage-destruction { --cc: var(--stage-destruction); --cc-rgb: var(--stage-destruction-rgb); }
.stage-labyrinth { --cc: var(--stage-labyrinth); --cc-rgb: var(--stage-labyrinth-rgb); }
.stage-rescue { --cc: var(--stage-rescue); --cc-rgb: var(--stage-rescue-rgb); }
.stage-rafael { --cc: var(--stage-rafael); --cc-rgb: var(--stage-rafael-rgb); }
.stage-fire { --cc: var(--stage-fire); --cc-rgb: var(--stage-fire-rgb); }
.stage-lost { --cc: var(--stage-lost); --cc-rgb: var(--stage-lost-rgb); }
.stage-underworld { --cc: var(--stage-underworld); --cc-rgb: var(--stage-underworld-rgb); }
.stage-gateway { --cc: var(--stage-gateway); --cc-rgb: var(--stage-gateway-rgb); }
.stage-overtures { --cc: var(--stage-overtures); --cc-rgb: var(--stage-overtures-rgb); }
.stage-arena { --cc: var(--stage-arena); --cc-rgb: var(--stage-arena-rgb); }
.stage-battleroyal { --cc: var(--stage-battleroyal); --cc-rgb: var(--stage-battleroyal-rgb); }
.stage-showdown { --cc: var(--stage-showdown); --cc-rgb: var(--stage-showdown-rgb); }
.stage-final { --cc: var(--stage-final); --cc-rgb: var(--stage-final-rgb); }
.stage-end { --cc: var(--stage-end); --cc-rgb: var(--stage-end-rgb); }

/* 장면 끝 '다음 ›' 버튼 (캐릭터 상세 .cx-next 와 같은 모양) */
.sh-next { display: flex; justify-content: flex-end; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.sh-next button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-5); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.sh-next button:hover { border-color: var(--accent-line); background: var(--surface-2); }
.sh-next button span { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--muted); }
.sh-pager { margin-top: var(--sp-10); }

/* ---------- 화면 짜임 (sh-): 오락기 화면 히어로 + 왼쪽 SCENE SELECT 커서 메뉴 + 장면 ---------- */

.sh-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding: var(--sp-8) 0 var(--sp-10); }
/* 오락기 화면: 두꺼운 베젤 + 둥근 화면 + 주사선 */
.sh-crt { position: relative; padding: var(--sp-5); background: linear-gradient(180deg, var(--crt-bezel-edge), var(--crt-bezel)); border-radius: 28px; box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.9); }
.sh-crt__screen { position: relative; overflow: hidden; aspect-ratio: 384 / 224; border-radius: 22px / 26px; background: var(--art-bg-deep); box-shadow: inset 0 0 60px rgba(0,0,0,.85); }
.sh-crt__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: saturate(1.15) contrast(1.05); }
.sh-crt__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55)); }
.sh-crt__hud { position: absolute; z-index: 1; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: var(--sp-3) var(--sp-4); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; }
.sh-crt__hud .is-p1 { color: var(--p1); } .sh-crt__hud .is-p2 { color: var(--p2); } .sh-crt__hud .is-p3 { color: var(--p3); } .sh-crt__hud .is-p4 { color: var(--p4); }
.sh-crt__press { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: .2em; color: var(--msg-frame-light); text-shadow: 0 0 10px rgba(var(--cc-rgb), .9); }
@media (prefers-reduced-motion: no-preference) { .sh-crt__press { animation: shBlink 1.2s steps(1) infinite; } @keyframes shBlink { 50% { opacity: 0; } } }
.sh-crt__led { position: absolute; right: 26px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-success); box-shadow: 0 0 8px var(--ui-success); }

.sh-info .sf-eyebrow { margin-bottom: var(--sp-3); }
.sh-info .sf-title__no { display: block; }
.sh-info h1 { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: var(--fw-bold); line-height: var(--lh-display); color: var(--text-strong); }
.sh-info .sf-lore { margin-bottom: var(--sp-5); }
.sh-info .sf-foes { margin-top: var(--sp-5); }

/* 본문: 왼쪽 SCENE SELECT(커서 메뉴) + 오른쪽 장면 */
.sh-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; padding: var(--sp-10) 0 var(--sp-16); border-top: 1px solid var(--line); }
.sh-menu { position: sticky; top: calc(var(--header-h) + var(--sp-6)); padding: var(--sp-4); background: var(--art-bg-deep); border: 3px double var(--msg-frame); border-radius: var(--radius-sm); }
.sh-menu__t { display: block; margin-bottom: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); color: var(--cc); }
.sh-menu ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-pick { position: relative; width: 100%; display: grid; grid-template-columns: 18px 26px minmax(0, 1fr); align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-2); text-align: left; color: var(--muted); background: none; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-md); cursor: pointer; }
.sh-pick::before { content: ""; } /* 커서 자리 */
.sh-pick .no { font-family: var(--font-display); font-size: var(--fs-sm); }
.sh-pick:hover { color: var(--text-strong); background: var(--hover); }
.sh-pick[aria-selected="true"] { color: var(--script); font-weight: var(--fw-bold); }
.sh-pick[aria-selected="true"]::before { content: ""; width: 14px; height: 14px; background: var(--cc); -webkit-mask: url(/img/icons-svg/lucide/chevron-right.svg) center / contain no-repeat; mask: url(/img/icons-svg/lucide/chevron-right.svg) center / contain no-repeat; } /* 커서 = Lucide chevron-right */
@media (prefers-reduced-motion: no-preference) { .sh-pick[aria-selected="true"]::before { animation: shBlink 1s steps(1) infinite; } }
.sh-menu__help { margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--muted); }
.sh-menu__help kbd { padding: 0 var(--sp-1); font-family: var(--font-display); color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 3px; }

.sh-scene > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 2px dashed var(--line-strong); }
.sh-scene > header .en { font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: var(--ls-caps); color: var(--cc); }
.sh-scene > header h2 { font-size: var(--fs-section-title); font-weight: var(--fw-black); letter-spacing: var(--ls-tighter); color: var(--text-strong); }
.sh-scene > header p { flex-basis: 100%; font-size: var(--fs-sm); color: var(--muted); }

/* 좁은 화면용 장면 넘기기: ‹ 이전 · 지금 장면(번호 · 이름 · 점) · 다음 › (js/stage-scenes.js 가 만듦) */
.sh-step { display: none; }
@media (max-width: 1024px) {
  .sh-hero { grid-template-columns: minmax(0, 1fr); }
  .sh-body { grid-template-columns: minmax(0, 1fr); }
  .sh-menu { position: sticky; top: var(--header-h); z-index: 20; padding: var(--sp-1); }
  .sh-menu ol, .sh-menu__t, .sh-menu__help { display: none; }
  .sh-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: var(--sp-1); }
  .sh-step__btn { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: var(--text-strong); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, border-color .15s; }
  .sh-step__btn svg { width: 22px; height: 22px; }
  .sh-step__btn:hover { border-color: var(--msg-frame); background: var(--surface-2); }
  .sh-step__btn:active { transform: scale(.96); }
  .sh-step__btn:disabled { opacity: .3; cursor: default; transform: none; border-color: var(--line); background: transparent; }
  .sh-step__now { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
  .sh-step__no { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); color: var(--cc); }
  .sh-step__now b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); color: var(--script); }
  .sh-step__dots { display: flex; gap: 5px; }
  .sh-step__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
  .sh-step__dots i.is-on { width: 16px; border-radius: 3px; background: var(--cc); }
}
/* 확대 버튼 안 그림은 원래 그림 모양(.sw-shot img) 그대로, 누를 수 있다는 표시만 */
.sh-scene .bxt-zoom { position: relative; border-radius: var(--radius); }
/* 작은 그림은 원본 2배까지만 키움 (js/stage-scenes.js 가 칸 최대 폭을 넣음), 칸 가운데 */
.sw-shot > .bxt-zoom, .sw-shot > img { align-self: center; width: 100%; }
.sw-shot.is-narrow figcaption { text-align: center; }
.sh-scene .bxt-zoom::after { content: "⤢"; position: absolute; right: var(--sp-2); bottom: var(--sp-2); width: 28px; height: 28px; display: grid; place-items: center; font-size: var(--fs-md); color: var(--text-strong); background: rgba(var(--scrim-rgb), .7); border-radius: var(--radius-sm); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sh-scene .bxt-zoom:hover::after, .sh-scene .bxt-zoom:focus-visible::after { opacity: 1; }

/* ---------- 스테이지 특색 부품 (sf-): 게임 대사창 · 스테이지 머리 정보 · 등장하는 적 · 구간 지도 ---------- */
/* 게임 대사창: 검은 상자 + 금테 두 줄 + 네 귀 장식 (게임 화면 대사창 느낌) */
.sf-msg { position: relative; padding: var(--sp-5) var(--sp-6); color: var(--script); background: var(--art-bg-deep);
  border: 3px double var(--msg-frame); border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,231,168,.15), 0 18px 40px -18px rgba(0,0,0,.9); }
.sf-msg::before, .sf-msg::after { content: ""; position: absolute; top: -6px; width: 9px; height: 9px; background: var(--msg-frame-light); transform: rotate(45deg); box-shadow: 0 0 6px rgba(var(--cc-rgb), .8); }
.sf-msg::before { left: -6px; }
.sf-msg::after { right: -6px; }


/* 스테이지 머리 정보: 위치 딱지 · 소개 · 수치 · 등장하는 적 */
.sf-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.sf-eyebrow a { color: var(--text-sub); }
.sf-eyebrow a:hover { color: var(--text-strong); }
.sf-loc { padding: 3px var(--sp-3); color: var(--cc); background: rgba(var(--cc-rgb), .08); border: 1px solid rgba(var(--cc-rgb), .4); border-radius: 999px; }
.sf-title__no { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); color: var(--cc); }
.sf-lore { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--text-sub); }
.sf-lore b { color: var(--text-strong); }
.sf-stats { display: flex; gap: var(--sp-6); margin: 0; }
.sf-stats dt { font-size: var(--fs-xs); color: var(--muted); }
.sf-stats dd { margin: var(--sp-1) 0 0; font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--text-strong); }
.sf-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); align-items: stretch; gap: var(--sp-2); } /* 같은 폭 격자: 많으면 칸이 조금 좁아지고, 더 많으면 고르게 다음 줄로 */
.sf-foes__t { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); } /* '등장하는 적' 은 카드 위 한 줄 */
.sf-foe { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: auto; padding: var(--sp-2); text-align: center; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sf-foe:hover { color: var(--text); border-color: rgba(var(--cc-rgb), .6); }
.sf-foe img { width: 100%; height: 50px; object-fit: contain; image-rendering: pixelated; }
.sf-foe span { font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.sf-foe small { display: block; font-weight: var(--fw-regular); color: var(--muted); }

/* 출발: 구간 지도 (구역 1 · 2 를 이어 붙이고 번호 핀) */
.sf-map { margin-bottom: var(--sp-6); }
.sf-map__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
.sf-map__h .en { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); color: var(--cc); }
.sf-map__h b { font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--text-strong); }
.sf-map__h small { font-size: var(--fs-sm); color: var(--muted); }
.sf-map__view { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.sf-map__view > img { display: block; width: 100%; image-rendering: pixelated; }
.sf-map__cut { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--text-sub); }
.sf-map__cut span { position: absolute; top: var(--sp-3); left: var(--sp-2); padding: 2px var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; background: rgba(var(--scrim-rgb), .75); border-radius: var(--radius-sm); }
.sf-pins { list-style: none; margin: 0; padding: 0; }
/* 핀: 아이템 자리(--x, --y)에서 --dx 만큼 왼쪽에 번호 딱지 (아이템을 가리지 않게) */
.sf-pin { --k: 1; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.sf-pin__dot { position: absolute; left: calc(var(--dx) * var(--k)); top: 0; transform: translate(-50%, -50%); }
.sf-legend .sf-pin__dot { position: static; transform: none; }
.sf-pin__dot { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--bg); background: var(--cc); border: 2px solid var(--art-bg-deep); border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--cc-rgb), .35), 0 6px 14px rgba(0,0,0,.6); }
.sf-pin__tip { position: absolute; z-index: 2; left: calc(var(--dx) * var(--k)); top: -22px; transform: translate(-50%, -100%); display: none; min-width: 160px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-sub); background: var(--ui-tip-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.sf-pin__tip b { display: block; font-size: var(--fs-sm); color: var(--text-strong); }
.sf-pin:hover .sf-pin__tip, .sf-pin:focus .sf-pin__tip { display: block; }
.sf-legend { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); }
.sf-legend li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.sf-legend .sf-pin__dot { flex-shrink: 0; width: 22px; height: 22px; font-size: var(--fs-2xs); box-shadow: none; }
.sf-legend b { color: var(--text-strong); white-space: nowrap; }

/* 게임 대사창 모양 덧입히기: 인트로 자막 · 마지막 장면 */
.sw-story.sf-msg p { color: var(--script); }
.sw-story.sf-msg .sw-hl { color: var(--cc); }
.sf-end { border-color: rgba(var(--cc-rgb), .4); }
.sf-end p.sf-msg { margin: 0; font-size: var(--fs-lg); }
.sf-end p.sf-msg .sw-hl { color: var(--cc); }
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
  .sf-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-pin { --k: .55; } /* 폰: 지도가 작아져서 비켜 두는 거리도 줄임 */
  .sf-pin__dot { width: 22px; height: 22px; font-size: var(--fs-2xs); }
}

/* ---------- 구간 공략 부품 (sw-): 그림 · 웨이브 · 상자 · 수레 · 이름 계산기 ---------- */
.sw-lead { max-width: 64ch; font-size: var(--fs-lg); line-height: var(--lh-reading); color: var(--text); }
.sw-lead + .sw-lead { margin-top: var(--sp-2); }
.sw-hl { color: var(--accent); font-weight: var(--fw-bold); }
/* 글 속 적 이름 앞 얼굴 (js/stage-scenes.js, 원래 도트 18px 그대로) */
.sw-foe { display: inline-block; width: 18px; height: 18px; margin-right: var(--sp-1); vertical-align: -4px; image-rendering: pixelated; }
.sw-em { color: var(--script); font-weight: var(--fw-semibold); }
.sw-sub { margin: var(--sp-10) 0 var(--sp-4); display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-2xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.sw-sub small { font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--muted); }
.is-p1 { color: var(--p1); } .is-p2 { color: var(--p2); } .is-p3 { color: var(--p3); } .is-p4 { color: var(--p4); }

/* 게임 화면 그림 */
.sw-shot { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sw-shot img:not(.sw-ii):not(.sw-foe) { display: block; width: 100%; height: auto; image-rendering: pixelated; background-color: var(--art-bg-deep); border: 1px solid var(--line); border-radius: var(--radius); } /* 바탕색만 (background 한 줄로 쓰면 스프라이트 칸 .art-cut 의 빛까지 지워짐) */
.sw-shot figcaption { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.sw-shot figcaption b { color: var(--text-strong); }
/* 위아래 검은 띠가 있는 인트로 그림은 띠를 잘라서 보여줌 */
.sw-shot--crop img { aspect-ratio: 384 / 112; object-fit: cover; object-position: 50% 37.5%; }
/* 배경이 투명한 스프라이트(수레 등): 누끼 그림 칸 검은 바탕 + 스테이지 색 빛, 도트는 2배로 또렷하게 */
.sw-shot--sprite img { width: 100%; max-width: 400px; padding: var(--sp-5) var(--sp-4); --art-glow-c: var(--cc); image-rendering: pixelated; } /* 바탕 = 누끼 그림 칸 (dnd2.css .art-cut, 빛은 스테이지 색) */
.sw-grid { display: grid; gap: var(--sp-4); }
.sw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-6); align-items: start; }
.sw-media--sprite { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.sw-media__text { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* 인트로 자막 */
.sw-story { margin: var(--sp-5) 0 0; padding: var(--sp-6); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius); }
.sw-story p { font-size: var(--fs-lg); line-height: var(--lh-reading); color: var(--text); }
.sw-story cite { display: block; margin-top: var(--sp-3); font-style: normal; font-size: var(--fs-sm); color: var(--muted); }

/* 접는 상자 (일어판 대사 · 알아도 그만인 내용) */
.sw-more { margin-top: var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-5); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-sub); cursor: pointer; list-style: none; }
.sw-more > summary::-webkit-details-marker { display: none; }
.sw-more > summary::after { content: "+"; font-size: var(--fs-xl); color: var(--accent); }
.sw-more[open] > summary::after { content: "−"; }
.sw-more > summary:hover { color: var(--text-strong); }
.sw-more__body { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.sw-jp { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-md); line-height: var(--lh-base); }
.sw-jp span { color: var(--muted); }
.sw-jp b { font-weight: var(--fw-regular); color: var(--text); }

/* 줍는 것 */
.sw-loot { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sw-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.sw-item img:not(.sw-foe) { height: 16px; width: auto; image-rendering: pixelated; }
.sw-item img.is-coin { height: 9px; }
.sw-item--none { color: var(--muted); }

/* 알림 한 줄 */
.sw-tip { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--ui-warn); border-radius: var(--radius); }
.sw-tip__ic { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--bg); background: var(--ui-warn); border-radius: 50%; }
.sw-tip--info { border-left-color: var(--primary); }
.sw-tip--info .sw-tip__ic { color: #fff; background: var(--primary); }
.sw-tip img:not(.sw-ii):not(.sw-px):not(.sw-foe) { flex-shrink: 0; width: 48px; height: auto; image-rendering: pixelated; }

/* 등장하는 적 (웨이브) */
.sw-wave { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sw-wave__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sw-wave__head h3 { font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--text-strong); }
.sw-wave__head p { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.sw-wave__head .pill { min-height: 36px; }
/* 웨이브 카드: 같은 폭 · 같은 높이 격자 (줄마다 높이가 달라 들쭉날쭉하지 않게, 모든 줄을 가장 높은 카드에 맞춤). 순서는 WAVE 번호 */
.sw-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-2); }
.sw-flow:has(.sw-wv__face) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* 적 얼굴이 들어가 한 가지 적 카드도 조금 넓게 */
.sw-flow:has(.sw-wv__x) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* 적 이름이 들어가는 카드는 조금 넓게 */
.sw-flow li { display: flex; min-width: 0; }
.sw-wv { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-wv__no { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); color: var(--muted); }
.sw-wv__who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.sw-wv__dir { display: inline-flex; align-items: center; gap: 2px; padding: 1px var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--p2); border: 1px solid currentColor; border-radius: var(--radius-sm); }
.sw-wv__dir.is-left { color: var(--p3); }
.sw-wv__cnt { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-none); color: var(--text-strong); }
.sw-wv__when { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); } /* 나오는 때는 늘 카드 맨 아래 */
.sw-wv__body { display: contents; } /* PC: 적 줄 · 나오는 때를 카드의 줄로 바로 (폰에서만 한 덩어리) */
.sw-wv__cnt { order: 1; } .sw-wv__when { order: 2; } /* 큰 마리 수가 나오는 때보다 위 */

/* 상자 */
.sw-box { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sw-box__head { display: flex; align-items: center; gap: var(--sp-3); }
.sw-box__tag { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--gold); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.sw-box__head b { font-size: var(--fs-lg); color: var(--text-strong); }
.sw-box__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.sw-box__row > span { padding-top: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.sw-cls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.sw-cls div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-2) 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-sub); background: var(--surface); border-radius: var(--radius-sm); }
.sw-cls img:not(.sw-foe) { height: 16px; image-rendering: pixelated; }

/* 규칙 목록 · 갈래 */
.sw-rules { counter-reset: r; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sw-rules li { position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) 48px; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-rules li::before { counter-increment: r; content: counter(r); position: absolute; left: var(--sp-3); top: var(--sp-3); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: #fff; background: var(--primary); border-radius: 50%; }
.sw-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.sw-path { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-path .chip { margin-bottom: var(--sp-2); }
.sw-path.is-ok { border-color: var(--accent-line); }

/* 이름 입력 버튼 설명 */
.sw-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.sw-key { padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-sub); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-key kbd { display: inline-block; margin: 0 var(--sp-1) var(--sp-2) 0; padding: 2px var(--sp-2); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); }
.sw-key small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }

/* 이름 → 타입 계산기 */
.sw-calc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); padding: var(--sp-6); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sw-calc label { font-size: var(--fs-sm); color: var(--text-sub); }
.sw-calc .input { margin-top: var(--sp-2); min-height: 52px; font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: .12em; text-transform: uppercase; }
.sw-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); }
.sw-presets > span { margin-right: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.sw-name { min-height: 44px; padding: 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--text-sub); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.sw-name:hover { color: var(--text-strong); border-color: var(--accent-line); background: var(--hover); }
.sw-letters { width: 100%; margin-top: var(--sp-5); border-collapse: separate; border-spacing: var(--sp-1); }
.sw-letters th { padding: var(--sp-1) 0; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--accent); }
.sw-letters td { height: 32px; text-align: center; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); background: var(--surface); border-radius: var(--radius-sm); }
.sw-letters td:empty { background: transparent; }
.sw-letters td.is-roman { font-size: var(--fs-2xs); }
.sw-letters td.is-hit { color: #fff; background: var(--primary); }
.sw-result { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-result__eq { min-height: 48px; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); word-break: break-all; }
.sw-result__eq b { color: var(--text-strong); }
.sw-result__eq sub { color: var(--muted); }
.sw-result__type { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.sw-result__type b { font-family: var(--font-display); font-size: 56px; font-weight: var(--fw-bold); line-height: var(--lh-none); color: var(--text-strong); }
.sw-result__warn { font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--ui-warn); }
.sw-result__warn:empty { display: none; }
.sw-result__gets { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.sw-result__gets div { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-xs); color: var(--muted); background: var(--surface-solid); border-radius: var(--radius-sm); }
.sw-result__gets em { display: inline-flex; align-items: center; gap: var(--sp-1); font-style: normal; color: var(--text-strong); }
.sw-result__gets img:not(.sw-foe) { height: 16px; image-rendering: pixelated; }

/* 고유 이름 · 타입별 보상 표 */
.sw-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.sw-def { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-def b { font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: .04em; color: var(--text-strong); }
.sw-def i { font-style: normal; font-weight: var(--fw-bold); color: var(--accent); }
.sw-types { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--sp-4); align-items: start; }
.sw-types .table-wrap { background: var(--surface-solid); border: 1px solid var(--line); }
.sw-types .table th, .sw-types .table td { padding: var(--sp-3); text-align: center; }
.sw-types .table th:first-child, .sw-types .table td:first-child { text-align: left; }
.sw-types .table td img { display: block; height: 16px; margin: 0 auto var(--sp-1); image-rendering: pixelated; }
.sw-types .table td small { font-size: var(--fs-2xs); color: var(--text-sub); white-space: nowrap; }
.sw-types .table td.sw-tp { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.sw-types .table tr.is-sel { background: var(--accent-soft); }
.sw-samples { display: flex; flex-direction: column; gap: var(--sp-3); }
.sw-samples__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.sw-samples__row > b { padding-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-strong); }
.sw-samples__row > div { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* 다음 스테이지로 이어지는 마지막 장면 */
.sw-end { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-6); align-items: center; margin-top: var(--sp-6); padding: var(--sp-6); background: var(--surface-solid); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); }
.sw-end p { margin-bottom: var(--sp-4); font-size: var(--fs-xl); line-height: var(--lh-loose); color: var(--text); }

/* ---------- STAGE 2 부터 더한 부품 ---------- */
/* 도트 그림을 width · height 로 정수 배 (아이템 칸 테두리 · 검은 바탕을 걷어 낸 it-*.png) */
.sw-item img.sw-px, .sw-cls img.sw-px, img.sw-px { height: auto; image-rendering: pixelated; }
.sw-item img.sw-px { max-height: 28px; }
/* 글 속 아이템 이름 앞 그림 (블록마다 이름별 처음 한 번): 도트 2배 그대로, 줄 높이를 거의 늘리지 않게 위아래 여백을 당김 */
img.sw-ii { display: inline-block; vertical-align: middle; margin: -4px var(--sp-1) -2px 0; }
.ii-w { white-space: nowrap; } /* 그림 + 이름 첫 낱말 한 덩어리: 폰에서 그림만 줄 끝에 남지 않게 */
.sw-types .table td img.sw-px, .sw-result__gets img.sw-px { height: auto; } /* 이름 계산기 보상 그림 (누끼, js 가 2배 크기를 넣음) */

/* 브리핑 구간 흐름: 장면 칸 (누르면 그 장면) */
.sf-route { margin-bottom: var(--sp-6); }
.sf-route__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); counter-reset: none; }
.sf-route__list button { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); text-align: left; font: inherit; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.sf-route__list button:hover { border-color: rgba(var(--cc-rgb), .6); background: var(--surface-2); }
.sf-route__list button:active { transform: translateY(1px); }
.sf-route__list button:focus-visible { outline: 2px solid var(--cc); outline-offset: 2px; }
.sf-route__list img:not(.sw-foe) { width: 100%; aspect-ratio: 98 / 46; object-fit: contain; margin-bottom: var(--sp-2); image-rendering: pixelated; background: var(--art-bg-deep); border-radius: var(--radius-sm); }
.sf-route__no { font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); color: var(--cc); }
.sf-route__list b { font-size: var(--fs-md); color: var(--text-strong); }
.sf-route__list small { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--muted); }
.sf-route__list li + li button::before { content: "›"; position: absolute; left: calc(var(--sp-3) * -1 - 1px); top: 30%; transform: translate(-50%, -50%); font-size: var(--fs-xl); color: var(--muted); }
.sf-route__list .is-side button { border-style: dashed; }
.sf-route__tag { position: absolute; top: var(--sp-2); right: var(--sp-2); padding: 1px var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--cc); background: rgba(var(--scrim-rgb), .8); border: 1px solid rgba(var(--cc-rgb), .5); border-radius: 999px; }

/* 상자: 잠김 딱지 · 함정 줄 · 랜덤 덧말 · 클래스 칸 '없음' */
.sw-lock { margin-left: auto; padding: 2px var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ui-warn); border: 1px solid rgba(var(--ui-warn-rgb), .5); border-radius: 999px; }
.sw-box__note { margin: calc(var(--sp-1) * -1) 0 0; font-size: var(--fs-sm); color: var(--ui-warn); }
.sw-box__sub { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.sw-cls__none { font-size: var(--fs-2xs); color: var(--muted); }
.sw-cls:has(.sw-px), .sw-box .sw-cls { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } /* 아이템 그림이 2배라 넓음: 칸이 좁으면 두 줄 */
.sw-cls:has(.sw-px) div, .sw-box .sw-cls div { min-height: 36px; white-space: nowrap; }
/* 상자 옆 설명 칸 */
.sw-note { display: flex; flex-direction: column; gap: var(--sp-3); }
.sw-note > p { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); }
.sw-tip--good { border-left-color: var(--ui-success); }
.sw-tip--good .sw-tip__ic { color: var(--bg); background: var(--ui-success); }
.sw-link { margin-left: var(--sp-1); padding: 0; font: inherit; font-weight: var(--fw-bold); color: var(--cc); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sw-link:hover { color: var(--text-strong); }

/* 웨이브: 여러 적이 섞여 나올 때 (적 이름 + 마리 수 한 줄씩) */
.sw-wv__who .sw-wv__x { margin-left: auto; padding-left: var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-none); color: var(--text-strong); }
.sw-wv__who + .sw-wv__who { padding-top: var(--sp-1); border-top: 1px dashed var(--line); }
.sw-wv__dir.is-up { color: var(--p4); }
.sw-wv__dir.is-here { color: var(--cc); }

/* 보스 장면: 보너스 점수 · 자세한 공략 버튼 */
.sw-bonus { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); }
.sw-bonus > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 150px; padding: var(--sp-3) var(--sp-4); background: var(--art-bg-deep); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.sw-bonus > div img { margin-bottom: var(--sp-1); }
.sw-bonus > div b { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--gold); }
.sw-bonus > div small { font-size: var(--fs-xs); color: var(--muted); }
.sw-bonus__go { align-self: center; margin-left: auto; }

/* 웨이브: 방향 딱지는 줄바꿈 없이 (폰에서 '왼/쪽' 처럼 깨지지 않게), 긴 적 이름만 줄바꿈 */
.sw-wv__dir { flex: none; white-space: nowrap; }
.sw-wv__name { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; } /* 한글 이름은 띄어쓰기에서만 줄바꿈 */
/* 웨이브: 적 얼굴 동그라미 (js 의 FOES · img/foes/*.png 18×18 도트를 2배), 바탕은 누끼 그림 칸(dnd2.css .art-cut) + 스테이지 색 빛.
   그림이 없는 적은 첫 글자 (--txt) */
.sw-wv__face { --art-glow-c: var(--cc); flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--art-line); border-radius: 50%; }
.sw-wv__face img { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.sw-wv__face--txt { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-none); color: var(--text-sub); }

/* 옛 BGM 소리 칸 · NAS 영상 */
.sw-bgm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--cc); border-radius: var(--radius); }
.sw-bgm__ic { font-size: var(--fs-xl); color: var(--cc); }
.sw-bgm b { font-size: var(--fs-md); color: var(--text-strong); }
.sw-bgm audio { flex: 1 1 240px; min-width: 0; height: 44px; }
.sw-video { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sw-video video { display: block; width: 100%; height: auto; background: var(--art-bg-deep); border: 1px solid var(--line); border-radius: var(--radius); }
.sw-video figcaption { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }

/* 갈림길 고르기 카드 (글자 딱지 + 고르는 말 + 설명 + 가는 스테이지) */
.sw-choices { display: flex; flex-direction: column; gap: var(--sp-3); }
.sw-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-4); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, background .15s; }
.sw-choice:hover { color: var(--text); border-color: rgba(var(--cc-rgb), .6); background: var(--surface-2); }
.sw-choice:active { transform: translateY(1px); }
.sw-choice__tag { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--cc); border: 1px solid rgba(var(--cc-rgb), .5); border-radius: var(--radius-sm); }
.sw-choice__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; font-size: var(--fs-md); line-height: var(--lh-loose); }
.sw-choice__body b { font-size: var(--fs-lg); color: var(--text-strong); }
.sw-choice__go { margin-top: var(--sp-1); font-weight: var(--fw-bold); color: var(--cc); }
.sw-choice__go small { font-weight: var(--fw-regular); color: var(--muted); }

/* 스테이지 끝: 갈림길 버튼 */
.sw-next-q { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-md); color: var(--text-sub); }
.sw-branch { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sw-end p.sw-next-q { font-size: var(--fs-md); margin-bottom: var(--sp-3); }

@media (max-width: 1024px) {
  .sf-route__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-route__list li:nth-child(odd) button::before { display: none; }
}
@media (max-width: 768px) {
  /* 폰: 읽는 글은 한 단계 크게 (사이트 폰 본문 14px → 16px), 누르는 칸 44px 이상 */
  .sw-lead, .sw-story p { font-size: var(--fs-lg); }
  .sw-shot figcaption, .sw-video figcaption, .sw-tip, .sw-rules li, .sw-path, .sw-note > p, .sw-box__note, .sw-box__sub, .sw-jp, .sw-wave__head p, .sh-scene > header p { font-size: var(--fs-md); }
  .sw-wave__head .pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .sw-wave__head .pill { min-height: 44px; justify-content: center; padding: 0; }
  .sw-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }
  /* 등장하는 적: 한 줄에 셋 (다섯이면 3 + 2), 이름이 꺾이지 않게 */
  .sf-foes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-foe span { white-space: nowrap; }
  .sw-bonus__go { width: 100%; margin-left: 0; }
  .sw-bonus > div { flex: 1 1 140px; }
  .sw-branch .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .sw-flow, .sw-flow:has(.sw-wv__face), .sw-flow:has(.sw-wv__x) { grid-template-columns: minmax(0, 1fr); } /* 폰: 한 줄에 하나 */
  /* 폰 카드는 가로형 한 줄: WAVE 번호 | 적 줄(+나오는 때) | 큰 마리 수, 셋 다 세로 가운데. 높이는 내용대로 (한 무리 카드는 모두 같은 높이) */
  .sw-flow { grid-auto-rows: auto; }
  .sw-wv { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .sw-wv__no { flex: none; width: 100%; } /* 얼굴 그림이 들어가 줄이 넓어져서 WAVE 번호는 카드 맨 위 한 줄로 (이름이 '코볼/드' 처럼 꺾이지 않게) */
  .sw-wv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); }
  .sw-wv__when { margin-top: 0; padding-top: 0; }
}

@media (max-width: 1024px) {
  .sw-calc, .sw-types { grid-template-columns: minmax(0, 1fr); }
  .sw-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sw-grid--3, .sw-media, .sw-media--sprite, .sw-end, .sw-paths { grid-template-columns: minmax(0, 1fr); }
  .sw-cls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* 클래스별 보상표: 표 대신 타입마다 카드 (타입 글자 + 직업 6칸, 직업 이름은 칸 위에) */
  #sw-class thead { display: none; }
  #sw-class tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); padding: var(--sp-3); border-bottom: 1px solid var(--line); }
  #sw-class td { padding: var(--sp-2) var(--sp-1); border: 0; text-align: center; background: var(--surface); border-radius: var(--radius-sm); }
  #sw-class td.sw-tp { grid-column: 1 / -1; padding: 0 0 var(--sp-1); text-align: left; background: none; }
  #sw-class td[data-c]::before { content: attr(data-c); display: block; margin-bottom: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
  .sf-legend li { font-size: var(--fs-md); }
  .sw-grid--2, .sw-keys { grid-template-columns: minmax(0, 1fr); }
  .sw-box__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .sw-box__row > span { padding-top: 0; }
}
.sw-wv__x, .sw-wv__cnt { flex: none; white-space: nowrap; } /* 마리 수(×3)는 줄바꿈 없이 */