/* 이야기로 찾아보기 — 플레이어 화면.
   사이트는 밝은 커머스지만 이 창은 웹툰 관습대로 어둡다(episode 뷰어와 같은 결).
   층: 상품 패널(.ov 100) «위», 가상 발색(.ty 110) «아래» — 결과에서 발색을
   열면 발색이 이 위에 뜬다. */
.spv{position:fixed;inset:0;z-index:105;display:none;background:#14111c;color:#f2eef6}
.spv.on{display:flex;flex-direction:column}

.spv .sp-top{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:rgba(20,17,28,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.spv .sp-top b{font-size:14px;letter-spacing:.14em}
.spv .sp-top span{font-size:12px;color:#a99fbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spv .sp-top .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.spv .sp-top button{flex:0 0 auto;min-width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:transparent;color:#f2eef6;font:inherit;font-size:16px;cursor:pointer}
.spv .sp-top button:hover,.spv .sp-top button:focus-visible{border-color:#ff8c7a;color:#ff8c7a}
.spv .sp-top button[disabled]{opacity:.35;cursor:default}

.spv .sp-prog{height:3px;background:rgba(255,255,255,.09)}
.spv .sp-prog i{display:block;height:100%;width:0;background:#ff8c7a;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}

.spv .sp-frame{position:relative;border-radius:14px;overflow:hidden;background:#0e0c14}
.spv .sp-frame img{display:block;width:100%;height:auto}
/* AI 표기 — 의무. 그림마다 붙는다(episode 뷰어와 같은 규칙). */
.spv .sp-ai{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:4px;
  font-size:11px;letter-spacing:.02em;background:rgba(0,0,0,.66);color:#e8e3ee}

.spv .sp-copy{padding:16px 4px 0}
.spv .sp-k{font-size:12px;letter-spacing:.12em;color:#ff8c7a;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:#cfc7dd;margin:0}

.spv .sp-next{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:18px;padding:14px 18px;border-radius:12px;border:0;cursor:pointer;
  background:#ff8c7a;color:#231015;font:inherit;font-size:15px;font-weight:700}
.spv .sp-next:hover,.spv .sp-next:focus-visible{filter:brightness(1.07)}

.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:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#f2eef6;font:inherit}
.spv .sp-choice:hover,.spv .sp-choice:focus-visible{border-color:#ff8c7a;background:rgba(255,140,122,.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:rgba(255,140,122,.16);color:#ff8c7a;font-weight:700}
.spv .sp-choice b{font-size:15px;line-height:1.35}
.spv .sp-choice small{font-size:12.5px;color:#a99fbb}

/* ── 결과 ── */
.spv .sp-result{max-width:560px;margin:0 auto;padding:26px 16px 40px}
.spv .sp-eyebrow{font-size:11px;letter-spacing:.22em;color:#ff8c7a}
.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:#e4dcef;margin:0 0 14px}
.spv .sp-aff{font-size:14px;line-height:1.7;color:#a99fbb;border-left:3px solid rgba(255,140,122,.5);
  padding-left:12px;margin:0 0 22px}

.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:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12)}
.spv .sp-sw{width:52px;height:52px;border-radius:12px;border:1px solid rgba(255,255,255,.25)}
.spv .sp-card .role{font-size:11px;letter-spacing:.1em;color:#ff8c7a}
.spv .sp-card .nm{font-size:15.5px;font-weight:700;margin:2px 0 1px}
.spv .sp-card .pd{font-size:12.5px;color:#a99fbb}
.spv .sp-acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.spv .sp-acts button,.spv .sp-acts a{padding:9px 13px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#f2eef6;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:#ff8c7a;color:#ff8c7a}
.spv .sp-acts button[disabled]{opacity:.5;cursor:default;border-style:dashed}

.spv .sp-primary{display:block;width:100%;margin:20px 0 0;padding:15px 18px;border-radius:12px;border:0;
  cursor:pointer;background:#ff8c7a;color:#231015;font:inherit;font-size:15.5px;font-weight:700}
.spv .sp-ghost{display:block;width:100%;margin:10px 0 0;padding:13px 18px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#cfc7dd;font:inherit;font-size:14px}
.spv .sp-ghost:hover,.spv .sp-ghost:focus-visible{border-color:#ff8c7a;color:#ff8c7a}
.spv .sp-note{font-size:12px;color:#a99fbb;line-height:1.6;margin:16px 0 0}

/* 360px — 이미지·버튼이 잘리지 않는다(계약 §10) */
@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 11px;font-size:12.5px}
}

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

/* ── 가상 발색 화면의 «이야기가 추천한 3색» 칩 (tryon 편집 화면에 붙는다) ── */
.ty-story3{margin:0 0 12px}
.ty-story3 .lab{font-size:12px;color:#8a7f77;margin-bottom:6px}
.ty-story3 .row{display:flex;gap:8px;flex-wrap:wrap}
.ty-story3 .chip{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;
  border:1px solid rgba(0,0,0,.16);background:#fff;font:inherit;font-size:13px;cursor:pointer}
.ty-story3 .chip .sw{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.ty-story3 .chip.on{border-color:#e2492f;box-shadow:0 0 0 1px #e2492f inset}
.ty-story3 .chip:hover,.ty-story3 .chip:focus-visible{border-color:#e2492f}