/* 「이야기로 고르기」 — 전체화면 플레이어
 *
 * 바탕은 코럴헤이즈가 보내 준 story_player.tokens.css 입니다(2026-08-05).
 * 색 23개에 이름만 붙인 판이고, 여기서 :root 값만 돌핀 것으로 바꿨습니다.
 *
 * ⛔ 왜 전체화면인가 — 이야기는 «읽는 것»이 아니라 «고르는 것»입니다.
 *    페이지 안의 한 구획이면 손님이 스크롤로 답을 고르지 않고 그냥 지나갑니다.
 *    그러면 마지막에 나오는 「당신의 시계」가 아무 의미가 없어집니다 — 고른 것이 없으니까요.
 * ⛔ 가두는 것이 아닙니다. 나가는 문이 셋(← ↻ ✕)이고 Esc·뒤로가기도 닫습니다.
 *
 * ⛔ 순검정(#000)을 쓰지 않습니다. 순검정은 웹툰 컷의 그림자와 붙어
 *    «화면이 끊긴 것처럼» 보입니다. 돌핀은 파란 계열이라 파란빛 도는 어두운색입니다.
 * ⛔ 강조색은 «하나»입니다. 키커·진행막대·선택지·주 버튼·결과가 전부 같은 색입니다.
 *    둘셋을 쓰면 「지금 눌러야 할 것」이 흐려집니다.
 */
.spv {
  /* ── 바꾼 것 둘 ─────────────────────────────────────── */
  --sp-ac:      #3fb6bd;                 /* 강조 — 어두운 바탕에서도 읽히는 청록 */
  --sp-bg:      #111420;                 /* 캔버스 — 파란빛 도는 어두운색 */

  /* ── 강조색에서 파생 (강조색을 바꾸면 여기도 같이) ────── */
  --sp-ac-09:   rgba(63,182,189,.09);
  --sp-ac-16:   rgba(63,182,189,.16);
  --sp-ac-50:   rgba(63,182,189,.5);
  --sp-on-ac:   #06202a;                 /* 강조색 «위»의 글자 */

  /* ── 그대로 둔 것 ──────────────────────────────────── */
  --sp-bg-2:    #0b0e17;
  --sp-bar:     rgba(17,20,32,.92);
  --sp-badge:   rgba(0,0,0,.66);

  --sp-ink:     #eef1f8;
  --sp-ink-2:   #c7cede;
  --sp-ink-3:   #9fa8bd;
  --sp-ink-4:   #dce2ee;
  --sp-ink-5:   #e8ecf5;

  --sp-track:   rgba(255,255,255,.09);
  --sp-line-1:  rgba(255,255,255,.08);
  --sp-line-2:  rgba(255,255,255,.12);
  --sp-line-3:  rgba(255,255,255,.14);
  --sp-line-4:  rgba(255,255,255,.16);
  --sp-line-5:  rgba(255,255,255,.2);
  --sp-line-6:  rgba(255,255,255,.25);

  --sp-fill-1:  rgba(255,255,255,.045);
  --sp-fill-2:  rgba(255,255,255,.05);

  position: fixed; inset: 0; z-index: 105;
  display: flex; flex-direction: column;
  background: var(--sp-bg); color: var(--sp-ink);
}

/* 상단바 — ⛔ 단추 셋의 뜻이 «다릅니다». 섞지 마세요.
   ← 한 장면 되돌리기 (첫 장면·선반에서 꺼짐) · ↻ 이 편을 처음부터 · ✕ 나가기 */
.spv .sp-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--sp-bar); border-bottom: 1px solid var(--sp-line-1) }
.spv .sp-top b { font-size: 14px; letter-spacing: .14em }
.spv .sp-top span { font-size: 12px; color: var(--sp-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.spv .sp-top .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
/* ⛔ 코럴헤이즈 원본은 38×38 입니다. 우리는 «44px» 을 지킵니다 —
   손가락이 38px 을 맞추려면 두 번 누르게 됩니다. 검사 [87]이 이 값을 봅니다. */
.spv .sp-top button { flex: 0 0 auto; min-width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--sp-line-4); background: transparent; color: var(--sp-ink);
  font: inherit; font-size: 16px; cursor: pointer }
.spv .sp-top button:hover, .spv .sp-top button:focus-visible { border-color: var(--sp-ac); color: var(--sp-ac) }
.spv .sp-top button[disabled] { opacity: .35; cursor: default }

/* ⛔ 숫자(3/13)를 쓰지 않고 «막대»만 씁니다.
   숫자는 「아직 열 개 남았네」를 먼저 읽게 만듭니다. */
.spv .sp-prog { height: 3px; background: var(--sp-track) }
.spv .sp-prog i { display: block; height: 100%; width: 0; background: var(--sp-ac); transition: width .25s ease }

/* ⛔ 여기«만» 스크롤합니다. 페이지 전체가 같이 움직이면 이야기 밖으로 나가 버립니다. */
.spv .sp-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }
/* ⛔ 한 줄 기둥입니다. 넓은 화면에서 두 단으로 벌리지 않습니다 —
   만화는 «한 줄로 내려가는» 것이 관습입니다. */
.spv .sp-cut { max-width: 560px; margin: 0 auto; padding: 14px 14px 30px }

/* ⛔ 회차마다 그림 비율이 다릅니다 — ep01~03 은 3:2(가로), ep04 는 9:16(세로).
   가로세로를 박아 두면 한쪽이 눌립니다. 「최대 크기」만 정하고 비율은 그림이 정합니다.
   ⛔ 그림 «위»에 검은 막·그러데이션·비네팅을 얹지 않습니다.
      밝게 그린 그림을 우리가 다시 어둡게 만들면 그린 사람의 의도가 사라집니다.
      글 가독성은 그림 «밖»의 글자 영역(sp-copy)에서 해결합니다. */
.spv .sp-frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--sp-bg-2) }
.spv .sp-frame img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 62vh; width: auto; height: auto;
}
/* ⛔ 폰에서는 세로를 «넉넉히» 줍니다. 9:16 그림이 좁은 화면에서 작아지면
   무슨 장면인지 안 보이고, 그러면 고를 수가 없습니다. */
@media (max-width: 640px) { .spv .sp-frame img { max-height: 72vh } }
/* AI 표기 — ⛔ 의무입니다. «그림마다» 붙습니다.
   한 번만 적고 넘어가면, 중간부터 보신 분은 못 봅니다. */
.spv .sp-ai { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 4px;
  font-size: 11px; letter-spacing: .02em; background: var(--sp-badge); color: var(--sp-ink-5) }

.spv .sp-copy { padding: 16px 4px 0 }
.spv .sp-k { font-size: 12px; letter-spacing: .12em; color: var(--sp-ac); margin-bottom: 6px }
.spv .sp-t { font-size: 21px; line-height: 1.3; margin: 0 0 8px; font-weight: 700 }
.spv .sp-p { font-size: 15px; line-height: 1.65; color: var(--sp-ink-2); margin: 0 }

.spv .sp-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 18px }
.spv .sp-choice { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px;
  cursor: pointer; background: var(--sp-fill-2); border: 1px solid var(--sp-line-3);
  color: var(--sp-ink); font: inherit }
/* ⛔ 색으로만 알리지 않습니다 — 테두리와 배경을 «같이» 바꿉니다 */
.spv .sp-choice:hover, .spv .sp-choice:focus-visible { border-color: var(--sp-ac); background: var(--sp-ac-09) }
.spv .sp-choice .ab { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-ac-16); color: var(--sp-ac); font-weight: 700 }
.spv .sp-choice b { font-size: 15px; line-height: 1.35 }
.spv .sp-choice small { font-size: 12.5px; color: var(--sp-ink-3) }
/* ⛔ 「정답은 없다」를 화면에 적어 둡니다. 고르기를 시험처럼 만들지 않습니다. */
.spv .sp-noright { margin: 14px 0 0; font-size: 12.5px; color: var(--sp-ink-3) }

/* ── 결과 ── */
.spv .sp-result { max-width: 560px; margin: 0 auto; padding: 26px 16px 40px }
.spv .sp-eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--sp-ac) }
.spv .sp-rt { font-size: 26px; margin: 8px 0 10px; font-weight: 800 }
.spv .sp-rc { font-size: 15.5px; line-height: 1.7; color: var(--sp-ink-4); margin: 0 0 14px }
.spv .sp-aff { font-size: 14px; line-height: 1.7; color: var(--sp-ink-3);
  border-left: 3px solid var(--sp-ac-50); padding-left: 12px; margin: 0 0 14px }
/* 「왜 이 시계인가」 — ⛔ 상품 카드 «바로 위»에 둡니다.
   근거 없이 상품부터 내밀면 그건 광고고, 무엇을 보고 골랐는지 알 수 없습니다. */
.spv .sp-why { font-size: 13px; line-height: 1.7; color: var(--sp-ink-3); margin: 0 0 18px }
/* 동점일 때 두 갈래 — ⛔ 지금 고른 쪽을 aria-pressed 로도 알립니다 */
.spv .sp-tie { margin: 0 0 18px }
.spv .sp-tie p { margin: 0 0 8px; font-size: 13px; color: var(--sp-ink-3) }
.spv .sp-tie .rf { margin-right: 6px; border-color: var(--sp-line-5); color: var(--sp-ink); background: transparent }
.spv .sp-tie .rf[aria-pressed="true"] { background: var(--sp-ac); border-color: var(--sp-ac); color: var(--sp-on-ac) }

.spv .sp-cards { display: flex; flex-direction: column; gap: 12px }
.spv .sp-card { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  padding: 14px; border-radius: 14px; background: var(--sp-fill-1); border: 1px solid var(--sp-line-2) }
/* 시계 썸네일 — 코럴헤이즈는 이 자리가 «색 스와치»였습니다 */
.spv .sp-sw { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--sp-line-6);
  object-fit: cover; background: var(--sp-bg-2) }
.spv .sp-card .role { font-size: 11px; letter-spacing: .1em; color: var(--sp-ac) }
.spv .sp-card .nm { font-size: 15.5px; font-weight: 700; margin: 2px 0 1px }
.spv .sp-card .pd { font-size: 12.5px; color: var(--sp-ink-3) }
.spv .sp-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px }
/* ⛔ 여기도 44px 입니다. 알약 모양이라 작아 보이기 쉬운 자리입니다. */
.spv .sp-acts button, .spv .sp-acts a { display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 15px; border-radius: 999px; font: inherit;
  font-size: 13px; cursor: pointer; background: transparent; border: 1px solid var(--sp-line-5);
  color: var(--sp-ink); text-decoration: none }
.spv .sp-acts button:hover, .spv .sp-acts button:focus-visible,
.spv .sp-acts a:hover, .spv .sp-acts a:focus-visible { border-color: var(--sp-ac); color: var(--sp-ac) }
.spv .sp-acts button[disabled] { opacity: .5; cursor: default; border-style: dashed }

.spv .sp-ghost { display: block; width: 100%; margin: 20px 0 0; padding: 13px 18px; border-radius: 12px;
  cursor: pointer; background: transparent; border: 1px solid var(--sp-line-5);
  color: var(--sp-ink-2); font: inherit; font-size: 14px }
.spv .sp-ghost:hover, .spv .sp-ghost:focus-visible { border-color: var(--sp-ac); color: var(--sp-ac) }
/* ⛔ 면책·근거 한 줄. 값과 재고는 관측한 시점의 것이라 반드시 남깁니다. */
.spv .sp-note { font-size: 12px; color: var(--sp-ink-3); line-height: 1.6; margin: 16px 0 0 }
.spv .sp-note li { list-style: none; margin: 4px 0 }

/* ── 편 고르기 선반 — ⛔ 편이 «둘 이상일 때만» 뜹니다 ──────────
   카드 하나짜리 선반은 길만 늘립니다. 하나면 바로 그 편으로 들어갑니다.
   ⛔ 클래스가 sp-ep 인 이유 — sp-card 는 이미 «결과의 시계 카드»가 쓰고 있습니다.
      코럴헤이즈가 여기서 이름이 부딪쳐 뒤 CSS 가 앞을 덮는 사고를 겪었습니다. */
.spv .sp-shelf { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; padding: 18px 16px 40px }
.spv .sp-shelf > p { margin: 0; color: var(--sp-ink-3); font-size: 13px }
.spv .sp-ep { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%;
  border-radius: 14px; padding: 12px; border: 1px solid #e7e0d8; background: #fff; color: #1a1c22;
  font: inherit; cursor: pointer }
.spv .sp-ep:hover, .spv .sp-ep:focus-visible { border-color: var(--sp-ac); box-shadow: 0 0 0 2px var(--sp-ac-16) }
/* ⛔ 표지에 loading="lazy" 를 쓰지 않습니다. 카드가 두세 장뿐이고 전부 첫 화면이라
   미루기가 얻는 것이 없는데, «표지가 빈 카드»가 될 위험은 진짜입니다. */
.spv .sp-ep .ph { flex: 0 0 88px; width: 88px; aspect-ratio: 3/4; border-radius: 10px;
  object-fit: cover; background: #ece7e0 }
.spv .sp-ep .g { font-size: 11px; color: var(--sp-ac); font-weight: 700; letter-spacing: .08em }
.spv .sp-ep strong { display: block; font-size: 16px; margin: 3px 0 2px }
.spv .sp-ep .sm { display: block; font-size: 13px; color: #5b6472; line-height: 1.5 }
.spv .sp-ep .dur { display: block; font-size: 12px; color: #8a93a3; margin-top: 4px }

/* 360px — ⛔ 그림·단추가 잘리지 않습니다 */
@media (max-width: 380px) {
  .spv .sp-cut, .spv .sp-result { padding-left: 10px; padding-right: 10px }
  .spv .sp-t { font-size: 19px }
  .spv .sp-rt { font-size: 23px }
  /* ⛔ 좁은 화면에서도 «높이는» 줄이지 않습니다. 좌우 여백만 줄입니다. */
  .spv .sp-acts button, .spv .sp-acts a { padding: 9px 12px; font-size: 12.5px }
}

/* 움직임 줄이기 존중 */
@media (prefers-reduced-motion: reduce) { .spv .sp-prog i { transition: none } }