/* sjhF0201.css — 상품 스토리텔링 상세(웹툰) · L2
   토큰 SoT: sjcF0101_tokens.css. 플레이스홀더: saju-imgph.css(.imgph). 신규 컬러 금지.
   톤: 다크 Hero → 웹툰 컷(좌우 교차) → 라이트 리스트 → 다크 moat → 다크 최종 CTA. */

.story { background: var(--color-white); color: var(--color-text-ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.story * { box-sizing: border-box; }
.story__wrap { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter-m); }
@media (min-width: 768px){ .story__wrap{ padding: 0 var(--gutter); } }

/* 버튼 */
.story-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 28px; border-radius: 8px; font-size: 15.5px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: none;
  transition: filter var(--transition-base), transform var(--transition-base); }
.story-btn--filled { background: var(--color-amber); color: var(--color-text-ink); box-shadow: var(--shadow-md); }
.story-btn--filled:hover { filter: brightness(1.05); transform: translateY(-1px); }
.story-btn--disabled { background: var(--md-sys-color-surface-variant); color: var(--color-steel); cursor: default; }

/* ── ① Hero (다크 — 아래로 흰색(웹툰 섹션) 페이드) ── */
.story-hero { background: linear-gradient(180deg,
    var(--color-deep-navy) 0%, #16121f 60%, #16121f calc(100% - 48px), var(--color-white) 100%);
  color: var(--color-bg-base); padding: 20px 0 84px; }
.story-back { display: inline-block; margin: 8px 0 22px; font-size: 13.5px; font-weight: 600;
  color: rgba(242,237,227,.72); text-decoration: none; }
.story-back:hover { color: var(--color-amber); }
.story-hero__grid { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.story-hero__img { width: 168px; height: 196px; border-radius: 18px; flex: none; }
@media (min-width: 768px){
  .story-hero__grid{ flex-direction: row; text-align: left; gap: 40px; }
  .story-hero__img{ width: 220px; height: 260px; }
  .story-hero__body{ flex: 1; }
}
.story-hero__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--color-amber); margin-bottom: 10px; }
.story-hero__name { font-family: var(--font-serif); font-weight: 700; font-size: 30px; margin: 0 0 12px; color: var(--color-bg-base); }
@media (min-width: 768px){ .story-hero__name{ font-size: 38px; } }
.story-hero__hook { font-size: 16px; line-height: 1.7; color: rgba(242,237,227,.82); margin: 0 0 24px; }
.story-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (min-width: 768px){ .story-hero__cta{ flex-direction: row; align-items: center; } }
/* ── 가격 연출 (다크 hero) ─────────────────────────────────────────
   한 줄에 정가·할인가·할인율을 늘어놓으면 셋이 같은 무게로 읽혀 구분이 안 된다.
   2단으로 나누고 크기·밝기·굵기로 위계를 준다 — 눈이 '판매가'에 먼저 닿아야 한다. */
.story-hero__price { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
@media (min-width: 768px){ .story-hero__price{ align-items: flex-start; } }

/* 1행: 정가(취소선) + 할인율 — 보조 정보라 작고 흐리게 */
.story-hero__price-row1 { display: inline-flex; align-items: center; gap: 8px; }
.story-hero__price-was {
  font-size: 13px; color: rgba(242,237,227,.5);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.story-hero__price-off {
  font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--color-amber); border: 1px solid var(--color-amber);
  border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}

/* 2행: 판매가 — 시선이 먼저 닿을 자리 */
.story-hero__price-row2 { display: inline-flex; align-items: baseline; gap: 9px; }
.story-hero__price-now {
  font-size: 24px; font-weight: 800; letter-spacing: -.3px;
  color: var(--color-bg-base);
}
@media (min-width: 768px){ .story-hero__price-now{ font-size: 27px; } }
.story-hero__price-refund { font-size: 12.5px; color: rgba(242,237,227,.6); }

/* ── ② 웹툰 컷 (라이트, 좌우 교차) ── */
.story-cuts { padding: 56px 0; }
@media (min-width: 768px){ .story-cuts{ padding: 80px 0; } }
.story-cuts__intro { text-align: center; font-family: var(--font-serif); font-weight: 700;
  font-size: 20px; color: var(--color-text-ink); margin: 0 0 36px; }
.story-cut { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 40px; }
.story-cut:last-child { margin-bottom: 0; }
.story-cut__img { width: 100%; max-width: 420px; aspect-ratio: 4 / 3; }
.story-cut__text { width: 100%; max-width: 420px; text-align: center; }
@media (min-width: 768px){
  .story-cut { flex-direction: row; gap: 40px; margin-bottom: 56px; }
  .story-cut:nth-of-type(even) { flex-direction: row-reverse; }  /* 좌우 교차(웹툰 리듬) */
  .story-cut__img { flex: 0 0 46%; max-width: none; }
  .story-cut__text { flex: 1; text-align: left; }
}
.story-cut__cap { font-size: 12.5px; font-weight: 700; color: var(--color-amber); margin: 0 0 8px; letter-spacing: .2px; }
.story-cut__cap--site { color: var(--color-ohaeng-water); }   /* 사이트 보이스(사실 고지)는 톤 구분 */
.story-cut__line { font-size: 17px; line-height: 1.75; color: #33383f; margin: 0; }
.story-cut__line b { color: var(--color-text-ink); font-weight: 700; }

/* 컷 이미지가 미반입인 상품 — 그림 없이 문구만 전폭으로(좌우 교차·정렬 규칙 무력화) */
.story-cut--textonly .story-cut__text { max-width: 640px; text-align: center; }
@media (min-width: 768px){
  .story-cut--textonly { justify-content: center; }
  .story-cut--textonly .story-cut__text { flex: 0 1 640px; text-align: center; }
}

/* ── ③' 결과지 장별 구성 (라이트·아이보리) ── 실제 PDF 장 표지 + 장 설명 */
.story-chap__lead { text-align: center; font-size: 14.5px; color: #5b6169; margin: -8px 0 28px; }
/* 2열 상한 — 표지는 소품 하나하나가 주제를 말하는 그림이라 3열(카드폭 ~283px)에서는 디테일이 뭉갠다.
   2열이면 카드폭 ~430px로 살아나고, 1열은 8~10장이라 스크롤이 과하게 길어진다. */
/* 모바일은 1줄 1카드(그림 디테일이 살아야 주제가 읽힌다), 태블릿 이상에서만 2열 */
.story-chap { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px){ .story-chap{ grid-template-columns: 1fr 1fr; gap: 24px; } }
.story-chap__card { background: #fff; border: 1px solid #EFEAE0; border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
/* 표지 원본은 세로형이라 카드에서는 정사각으로 잘라 그리드 높이를 고르게 맞춘다 */
.story-chap__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #EDE8E0; }
.story-chap__body { padding: 14px 16px 16px; position: relative; flex: 1; }
.story-chap__no { position: absolute; top: -14px; left: 16px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-amber); color: var(--color-text-ink);
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(26,31,46,.18); }
.story-chap__t { font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--color-text-ink); margin: 6px 0 6px; line-height: 1.4; }
.story-chap__d { font-size: 13.5px; line-height: 1.65; color: #5b6169; margin: 0; }

/* ── ③ 알 수 있는 것 (라이트·아이보리) ── */
.story-sec { padding: 52px 0; }
@media (min-width: 768px){ .story-sec{ padding: 72px 0; } }
.story-sec--ivory { background: var(--color-bg-base); }
.story-sec__title { font-family: var(--font-serif); font-weight: 700; font-size: 22px; text-align: center; margin: 0 0 24px; }
@media (min-width: 768px){ .story-sec__title{ font-size: 26px; } }
.story-list { list-style: none; margin: 0 auto; padding: 0; max-width: 640px;
  display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px){ .story-list{ grid-template-columns: 1fr 1fr; } }
.story-list li { background: #fff; border: 1px solid #EFEAE0; border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; font-weight: 600; color: var(--color-text-ink);
  box-shadow: 0 1px 4px rgba(26,31,46,.05); }

/* ②③ 대체 — 스토리 콘텐츠 준비중 */
.story-pending { max-width: 480px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px dashed var(--color-steel); border-radius: var(--card-radius);
  padding: 36px 24px; }
.story-pending__t { font-family: var(--font-serif); font-weight: 700; font-size: 18px;
  color: var(--color-text-ink); margin: 0 0 8px; }
.story-pending__d { font-size: 14px; color: var(--color-steel); margin: 0; }
.story-list li::before { content: "✓ "; color: var(--color-success); font-weight: 800; }

/* ── ④ 정직 moat (다크 — 위는 이보리 페이드, 아래는 다크 유지→최종 CTA 연속) ── */
.story-moat { padding: 72px 0; background: linear-gradient(180deg,
    var(--color-bg-base) 0%, var(--color-deep-navy) 48px, var(--color-deep-navy) 100%); }
.story-moat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; margin: 0 auto; }
@media (min-width: 768px){ .story-moat__grid{ grid-template-columns: repeat(4,1fr); } }
.story-moat__item { background: rgba(242,237,227,.06); border: 1px solid rgba(242,237,227,.14);
  border-radius: 12px; padding: 18px 12px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--color-bg-base); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.story-moat__ic { font-size: 22px; }

/* ── ⑤ 최종 CTA (다크) ── */
.story-final { background: linear-gradient(180deg, #16121f 0%, var(--color-deep-navy) 100%);
  color: var(--color-bg-base); text-align: center; padding: 60px 0; }
.story-final__t { font-family: var(--font-serif); font-weight: 700; font-size: 24px; margin: 0 0 10px; color: var(--color-bg-base); }
.story-final__d { font-size: 15px; color: rgba(242,237,227,.78); margin: 0 0 24px; }
.story-final__back { display: inline-block; margin-top: 20px; font-size: 13.5px; color: rgba(242,237,227,.7); text-decoration: none; }
.story-final__back:hover { color: var(--color-amber); }

/* ── 스크롤 리빌 (fade-up). JS(.reveal-ready) 없거나 reduce면 항상 최종상태. ── */
@media (prefers-reduced-motion: no-preference){
  .story.reveal-ready .reveal { opacity: 0; transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow); }
  .story.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
  .story.reveal-ready .story-list > .reveal:nth-child(2){ transition-delay: 60ms; }
  .story.reveal-ready .story-list > .reveal:nth-child(3){ transition-delay: 120ms; }
  .story.reveal-ready .story-list > .reveal:nth-child(4){ transition-delay: 180ms; }
  .story.reveal-ready .story-moat__grid > .reveal:nth-child(2){ transition-delay: 60ms; }
  .story.reveal-ready .story-moat__grid > .reveal:nth-child(3){ transition-delay: 120ms; }
  .story.reveal-ready .story-moat__grid > .reveal:nth-child(4){ transition-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce){ .story *{ transition: none !important; } }