/* ===== 채운 Heritage — "오래된 종이 위의 광물 표본실" ===== */

/* ---- 폰트 (self-host, font-display:swap) ---- */
@font-face{
  font-family:'Gowun Batang';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/gowun-batang/gb-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Gowun Batang';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/gowun-batang/gb-700.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/fraunces/fraunces-v38-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/fraunces/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'CW Hanja Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/hanja/serifkr.woff2') format('woff2');
}

/* ---- 컬러 시스템 (design.heritage §2) ---- */
:root{
  --paper:#f1ebdf;
  --paper-deep:#e8e0d0;
  --ink:#2a2520;
  --ink-soft:#6b6358;
  --hairline:#c9bfa9;

  --mok:#5b6b52;
  --hwa:#a8553e;
  --to:#9c7f48;
  --geum:#9a948a;
  --su:#2c3a4a;

  /* 주인공 색 — 런타임에 app.js가 덮어씀 (기본 水) */
  --protagonist:#33485e;
  --protagonist-glow:#5a7691;

  --rail-w:56px;
  --col:720px;
  --indent:120px;
}

/* ---- 기본 지면 ---- */
html{scroll-behavior:smooth;}
body{
  font-family:'Gowun Batang',serif;
  background:var(--paper);
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.9;
}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 五行 인덱스 레일 (데스크톱) ---- */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:5;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 0;
  border-right:.5px solid var(--hairline);
  background:var(--paper);
}
.rail-mark{
  font-family:'CW Hanja Serif',serif;font-size:.78rem;
  color:var(--ink-soft);letter-spacing:.04em;
  writing-mode:vertical-rl;margin-bottom:auto;
}
.rail-list{list-style:none;display:flex;flex-direction:column;gap:30px;
  margin:auto 0;padding:0;}
.rail-item{display:block;text-decoration:none;}
.rail-hanja{
  font-family:'CW Hanja Serif',serif;font-size:1rem;
  color:var(--hairline);transition:color .6s ease,filter .6s ease,transform .6s ease;
  display:block;
}
.rail-item.is-active .rail-hanja{
  color:var(--ink);filter:blur(.3px);transform:scale(1.12);
}

/* ---- 모바일 五行 progress ---- */
.rail-mobile{
  display:none;position:sticky;top:0;z-index:5;
  background:var(--paper);border-bottom:.5px solid var(--hairline);
}
.rm-cell{
  flex:1;text-align:center;padding:8px 0;
  font-family:'CW Hanja Serif',serif;font-size:.85rem;
  color:var(--hairline);transition:color .5s ease;
}
.rm-cell.is-active{color:var(--ink);}

/* ---- 페이지 그리드 ---- */
.page{
  position:relative;z-index:2;
  padding-left:var(--rail-w);
}
section{
  max-width:calc(var(--col) + var(--indent));
  margin:0 auto;
  padding:64px var(--indent) 64px;
}
.hairline{
  max-width:calc(var(--col) + var(--indent));
  margin:0 auto;
  border:0;border-top:.5px solid var(--hairline);
  height:0;
}

/* ---- 타이포 공통 ---- */
.eyebrow{
  display:flex;align-items:baseline;gap:12px;
  font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);
  margin-bottom:28px;
}
.seal{
  font-family:'CW Hanja Serif',serif;font-size:.95rem;
  color:var(--ink);letter-spacing:.06em;
}
.section-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;letter-spacing:.03em;color:var(--ink-soft);
  margin-bottom:18px;
}
.seal-sm{
  font-family:'CW Hanja Serif',serif;font-size:.9rem;color:var(--ink);
}
.section-title{
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:700;line-height:1.32;letter-spacing:-.02em;
  margin-bottom:20px;
}
.section-lead{
  font-size:1.05rem;color:var(--ink);max-width:var(--col);
  margin-bottom:32px;
}

/* ---- S0 Hero ---- */
.s0{padding-top:88px;padding-bottom:48px;}
.hero-title{
  font-size:clamp(2.4rem,7vw,4.2rem);
  font-weight:700;line-height:1.18;letter-spacing:-.02em;
  margin-bottom:32px;
}
.hero-title .line{display:block;}
.hero-sub{
  font-size:1.1rem;color:var(--ink);max-width:560px;margin-bottom:18px;
}
.hero-note{
  font-size:.95rem;color:var(--ink-soft);font-style:italic;
  margin-bottom:40px;
}
.scroll-cue{
  display:inline-block;font-size:.9rem;color:var(--ink-soft);
  text-decoration:none;border-bottom:.5px solid var(--hairline);
  padding-bottom:3px;
}
.scroll-cue:hover{color:var(--ink);border-color:var(--ink);}

/* ---- 버튼 ---- */
.btn{
  font-family:'Gowun Batang',serif;font-size:1rem;
  border-radius:2px;padding:15px 30px;
  transition:background-color .35s ease,color .35s ease;
}
.btn-line{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);
}
.btn-line:hover{background:var(--ink);color:var(--paper);}
.btn-fill{
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
}
.btn-fill:hover{background:transparent;color:var(--ink);}
.btn-fill:disabled,.btn:disabled{
  opacity:.32;cursor:not-allowed;background:transparent;
  color:var(--ink-soft);border-color:var(--hairline);
}
.btn-text{
  display:inline-block;font-size:.95rem;color:var(--ink);
  text-decoration:none;border-bottom:.5px solid var(--ink);
  padding-bottom:2px;
}
.btn-text:hover{color:var(--ink-soft);}

/* ---- S1 입력 (장부 스타일) ---- */
.ledger{margin-top:8px;}
.ledger-row{
  display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;
}
.field{display:flex;flex-direction:column;gap:8px;flex:1;min-width:120px;}
.field-hour{max-width:340px;}
.field label{
  font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);
}
.field input,.field select{
  font-family:'Gowun Batang',serif;font-size:1.05rem;color:var(--ink);
  background:transparent;
  border:0;border-bottom:.5px solid var(--hairline);
  padding:8px 2px;
  border-radius:0;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
    linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:right 4px center,right 0px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:20px;
}
.field input:focus,.field select:focus{
  outline:none;border-bottom-color:var(--ink);
}
.field input::placeholder{color:var(--hairline);}
.field-error{
  color:var(--hwa);font-size:.85rem;margin:4px 0 12px;
}
.ledger-note{
  font-size:.82rem;color:var(--ink-soft);margin-top:14px;
}
#read-btn{margin-top:8px;}

/* ---- S2 결과 ---- */
.s2{padding-top:0;padding-bottom:0;}
.s2 .hairline{margin:0 0 64px;max-width:none;}
.result{padding-top:0;}
.result-summary{margin-bottom:36px;}
.result-grid{
  display:grid;grid-template-columns:1fr 280px;gap:48px;
  align-items:start;margin-bottom:36px;
}
.result-label{
  font-size:.82rem;letter-spacing:.03em;color:var(--ink-soft);
  margin-bottom:18px;
}

/* 다섯 점 — 퍼센트·차트 금지, 상대 크기·농도 */
.dots{list-style:none;display:flex;align-items:center;gap:22px;
  padding:0;margin:0 0 18px;min-height:64px;}
.dot{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.dot-mark{
  border-radius:50%;display:block;
  background:var(--dot-color);
}
.dot-hanja{
  font-family:'CW Hanja Serif',serif;font-size:.78rem;color:var(--ink-soft);
}
.dot.is-need .dot-hanja{color:var(--ink);font-weight:400;}
.dot.is-need .dot-mark{
  outline:.5px solid var(--ink);outline-offset:3px;
}
.result-caption,.diagram-caption,.result-guard{
  font-size:.86rem;color:var(--ink-soft);line-height:1.8;
}

/* 주인공 원석 — 빛을 머금은 하나 */
.protagonist-stone{margin:0;text-align:center;}
.stone-orb{
  width:200px;height:200px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 34% 30%,
      var(--protagonist-glow) 0%,
      var(--protagonist) 46%,
      color-mix(in srgb,var(--protagonist) 78%,#000) 100%);
  box-shadow:inset 0 0 36px color-mix(in srgb,var(--protagonist) 60%,#000);
}
.stone-hanja{
  font-family:'CW Hanja Serif',serif;font-size:2.4rem;
  color:var(--paper);opacity:.78;
}
.protagonist-stone figcaption{
  font-size:.92rem;color:var(--ink);
}
.result-letter{
  font-size:1.08rem;color:var(--ink);max-width:var(--col);
  margin:8px 0 18px;line-height:1.95;
}
.result-guard{margin-bottom:28px;}

/* ---- S3 BeadDiagram ---- */
.bead-diagram{margin:8px 0 18px;}
.bead-track{
  display:flex;align-items:center;justify-content:flex-start;
  gap:14px;padding:32px 0;flex-wrap:wrap;
}
.bead{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
}
.bead[data-el="목"]{background:var(--mok);}
.bead[data-el="화"]{background:var(--hwa);}
.bead[data-el="토"]{background:var(--to);}
.bead[data-el="금"]{background:var(--geum);}
.bead[data-el="수"]{background:var(--su);}
.bead-hero{
  width:50px;height:50px;
  background:
    radial-gradient(circle at 34% 30%,
      var(--protagonist-glow) 0%,
      var(--protagonist) 50%,
      color-mix(in srgb,var(--protagonist) 80%,#000) 100%);
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--protagonist) 55%,#000);
}

/* ---- 사진 플레이스홀더 ---- */
.ph-block{margin:24px 0 8px;}
.ph{
  width:100%;
  background:
    repeating-linear-gradient(135deg,var(--paper-deep) 0 18px,
      color-mix(in srgb,var(--paper-deep) 88%,var(--ink)) 18px 19px);
  border:.5px solid var(--hairline);
  display:flex;align-items:flex-end;
  color:var(--ink-soft);
}
.ph-43{aspect-ratio:4/3;}
.ph-11{aspect-ratio:1/1;}
.ph-169{aspect-ratio:16/9;}
img.ph{display:block;object-fit:cover;height:auto;background:var(--paper-deep);}
.ph-label{
  font-size:.78rem;letter-spacing:.02em;
  background:var(--paper);padding:6px 12px;margin:12px;
  border:.5px solid var(--hairline);
}

/* 풀블리드 컷 — 레일 침범 */
.s5 .ph-block,.s3 .ph-block,.s6 .ph-block{
  margin-left:calc(-1 * var(--indent));
  margin-right:calc(-1 * var(--indent));
}

/* ---- S4 소재 proof ---- */
.proof{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:center;margin-bottom:48px;
}
.proof-rev .proof-text{order:2;}
.proof-h{
  font-size:1.2rem;font-weight:700;margin-bottom:12px;
}
.proof-text p{font-size:1rem;color:var(--ink);}
.proof-strip{
  border-top:.5px solid var(--hairline);
  border-bottom:.5px solid var(--hairline);
  padding:22px 0;text-align:center;
}
.proof-strip-line{
  font-size:1rem;color:var(--ink);letter-spacing:.01em;
}

/* ---- S5 결과 카드 인용 ---- */
.card-quote{
  margin:32px 0 0;
  border-left:2px solid var(--protagonist);
  padding-left:28px;
}
.card-quote blockquote{
  font-size:1.1rem;line-height:1.95;color:var(--ink);
}
.card-quote figcaption{
  font-size:.84rem;color:var(--ink-soft);margin-top:14px;
}

/* ---- S6 선물·소장 ---- */
.keep-list{list-style:none;padding:0;margin:0 0 12px;}
.keep-list li{
  display:flex;gap:14px;align-items:baseline;
  font-size:1.02rem;color:var(--ink);
  padding:14px 0;border-bottom:.5px solid var(--hairline);
}
.keep-list li:last-child{border-bottom:0;}
.keep-hanja{
  font-family:'CW Hanja Serif',serif;font-size:.95rem;
  color:var(--ink-soft);flex:0 0 auto;
}

/* ---- S7 가격 ---- */
.price-block{margin-bottom:48px;}
.price-num{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;}
.price-fig{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(2.6rem,6vw,3.6rem);letter-spacing:-.01em;
  color:var(--ink);line-height:1;
}
.price-won{font-size:1.2rem;color:var(--ink);}
.price-sub{font-size:.9rem;color:var(--ink-soft);margin-bottom:22px;}
.price-incl{
  list-style:none;padding:0;margin:0;
  max-width:420px;
}
.price-incl li{
  font-size:.96rem;color:var(--ink);
  padding:11px 0;border-bottom:.5px solid var(--hairline);
}
.price-incl li:last-child{border-bottom:0;}
.price-incl li::before{content:"—  ";color:var(--ink-soft);}

.prod-info{
  background:var(--paper-deep);
  padding:32px;border:.5px solid var(--hairline);
}
.prod-h{font-size:1.1rem;font-weight:700;margin-bottom:18px;}
.prod-dl{margin:0;}
.prod-dl dt{
  font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft);
  margin-bottom:5px;
}
.prod-dl dd{
  /* 기능 고지 레지스터 — Pretendard 대신 동일 명조 유지하되 자간으로 분리 */
  font-size:.92rem;color:var(--ink);margin:0 0 18px;
  letter-spacing:0;line-height:1.8;
}
.prod-dl dd:last-child{margin-bottom:0;}

/* ---- S8 CTA ---- */
.s8{text-align:left;}
.cta-gate{
  font-size:.85rem;color:var(--ink-soft);margin-top:14px;
}
.s8.is-ready .cta-gate{display:none;}

/* ---- FAQ ---- */
.faq-item{
  border-bottom:.5px solid var(--hairline);
}
.faq-item:first-of-type{border-top:.5px solid var(--hairline);}
.faq-item summary{
  font-size:1.02rem;color:var(--ink);
  padding:18px 28px 18px 0;cursor:pointer;
  list-style:none;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";position:absolute;right:2px;top:16px;
  font-size:1.2rem;color:var(--ink-soft);transition:transform .3s ease;
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{
  font-size:.96rem;color:var(--ink-soft);
  padding:0 0 20px;max-width:var(--col);
}

/* ---- footer ---- */
.foot{
  max-width:calc(var(--col) + var(--indent));
  margin:0 auto;padding:56px var(--indent) 72px;
  border-top:.5px solid var(--hairline);
}
.foot-mark{
  font-family:'CW Hanja Serif',serif;font-size:1.1rem;
  color:var(--ink);letter-spacing:.06em;display:block;margin-bottom:14px;
}
.foot p{font-size:.88rem;color:var(--ink-soft);max-width:520px;}

/* ---- 모달 ---- */
.modal{
  border:0;padding:0;background:transparent;
  max-width:100%;max-height:100%;
}
.modal::backdrop{
  background:rgba(20,17,13,.62);
}
.modal[open]{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.modal-inner{
  position:relative;
  background:var(--paper);
  border:.5px solid var(--hairline);
  width:min(480px,calc(100vw - 40px));
  padding:44px 40px 36px;
  box-shadow:0 24px 60px rgba(20,17,13,.28);
}
.modal-close{
  position:absolute;top:14px;right:16px;
  font-size:1rem;color:var(--ink-soft);line-height:1;padding:6px;
}
.modal-close:hover{color:var(--ink);}
.modal-seal{
  font-family:'CW Hanja Serif',serif;font-size:1.1rem;
  color:var(--ink);margin-bottom:14px;
}
.modal-title{
  font-size:1.5rem;font-weight:700;line-height:1.4;
  margin-bottom:14px;
}
.modal-body{
  font-size:.98rem;color:var(--ink-soft);line-height:1.85;
  margin-bottom:24px;
}
.modal-label{
  display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:8px;
}
#email-form input{
  font-family:'Gowun Batang',serif;font-size:1.05rem;color:var(--ink);
  width:100%;background:transparent;
  border:0;border-bottom:.5px solid var(--hairline);
  padding:9px 2px;margin-bottom:6px;border-radius:0;
}
#email-form input:focus{outline:none;border-bottom-color:var(--ink);}
#email-form .btn{width:100%;margin-top:18px;}
.modal-privacy{
  font-size:.8rem;color:var(--ink-soft);margin-top:14px;letter-spacing:0;
}
#modal-done-stage .btn{margin-top:6px;}

/* ---- page-load staggered reveal ---- */
.reveal{opacity:0;transform:translateY(8px);}
.is-in.reveal{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s ease;
}
.hero-title .line{
  opacity:0;transform:translateY(8px);
}
.hero-loaded .hero-title .line{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s ease;
}
.hero-loaded .hero-title .line:nth-child(1){transition-delay:.10s;}
.hero-loaded .hero-title .line:nth-child(2){transition-delay:.19s;}
.hero-loaded .hero-title .line:nth-child(3){transition-delay:.28s;}
.eyebrow,.hero-sub,.hero-note,.scroll-cue{opacity:0;}
.hero-loaded .eyebrow{opacity:1;transition:opacity .6s ease .04s;}
.hero-loaded .hero-sub{opacity:1;transition:opacity .6s ease .40s;}
.hero-loaded .hero-note{opacity:1;transition:opacity .6s ease .50s;}
.hero-loaded .scroll-cue{opacity:1;transition:opacity .6s ease .58s;}

/* S2 결과 공개 시퀀스 */
.result .dot{opacity:0;transform:scale(.9);}
.result.is-revealed .dot{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease;
}
.result.is-revealed .dot:nth-child(1){transition-delay:.05s;}
.result.is-revealed .dot:nth-child(2){transition-delay:.13s;}
.result.is-revealed .dot:nth-child(3){transition-delay:.21s;}
.result.is-revealed .dot:nth-child(4){transition-delay:.29s;}
.result.is-revealed .dot:nth-child(5){transition-delay:.37s;}
.stone-orb{opacity:0;transform:scale(.94);}
.result.is-revealed .stone-orb{
  opacity:1;transform:none;
  transition:opacity .8s ease .55s,transform .8s ease .55s;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.hero-title .line,.eyebrow,.hero-sub,.hero-note,.scroll-cue,
  .result .dot,.stone-orb{
    opacity:1!important;transform:none!important;
  }
}

/* ---- 반응형 (design.heritage §9) ---- */
@media (max-width:1023px){
  :root{--rail-w:40px;--indent:64px;}
  .rail-mark{font-size:.66rem;}
  .rail-hanja{font-size:.88rem;}
}

@media (max-width:767px){
  :root{--rail-w:0px;--indent:20px;}
  .rail{display:none;}
  .rail-mobile{display:flex;}
  .page{padding-left:0;}
  section{padding:48px 20px;}
  .s0{padding-top:40px;}
  .hairline,.foot{max-width:none;}
  .result-grid{grid-template-columns:1fr;gap:32px;}
  .result-stone{order:-1;}
  .proof{grid-template-columns:1fr;gap:20px;}
  .proof-rev .proof-text{order:0;}
  .ledger-row{gap:16px;}
  .field{min-width:0;}
  .s5 .ph-block,.s3 .ph-block,.s6 .ph-block{
    margin-left:-20px;margin-right:-20px;
  }
  .stone-orb{width:160px;height:160px;}
  .dots{gap:14px;}
  .prod-info{padding:24px 20px;}
  .modal-inner{padding:38px 24px 30px;}
}