/* ============================================================
   담청사주 · v4 전략 리포트

   컨셉을 바꿨다. 파는 것은 위로가 아니라 판단 재료다.
     운명에 끌려갈 것인가, 운의 흐름을 지배할 것인가
   반신비 포지션이라 신비주의 표현을 쓰지 않는다.

   구조는 방에 들어가서 읽는 형태를 유지한다. 스크롤 랜딩으로 가면
   설득 구간을 안 읽고 내려가 버린다. 설득은 페이월 자리에 접어 넣었다.
     문 -> 묻기 -> 세우는 중 -> 리포트(01 무료 + 02~07 잠김) -> 결제

   v2 에서 실측으로 나온 것은 유지: 기둥 셔플과 순차 확정,
   시간 모름 체크박스, 결제 화면 청약철회 동의.
   ============================================================ */

:root{
  /* ⚠️ **전부 `--dc-` 접두사다. 떼지 마라.**
     이 파일은 호스트 앱(plugsaju) 안에서 로드되고, 호스트는 `app/layout.tsx`에서
     `brand.theme`을 **`<body>`의 인라인 style**로 바른다. 인라인 선언은 클래스든
     `:root`든 전부 이기고, `<body>`는 게이트 마크업의 조상이라 같은 이름을 쓰면
     호스트 값이 내려온다. 명시도 싸움이 아니라 상속이라 `!important` 말고는
     막을 방법이 없다.

     그리고 두 앱이 같은 이름을 **정반대 뜻**으로 쓴다:
       호스트  --ink = 글자색(#EDE7DA)   --bg = 배경색
       담청    --ink = 배경색(#0C1219)   --paper = 글자색

     2026-09-11 라이브 실측: `body{background:var(--ink)}`가 밝은 글자색을
     배경으로 칠했고, 글자는 `--paper`라 그대로 밝아서 **명암비 1.0:1**이 됐다.
     리포트 화면과 푸터 264px 구간의 글자가 존재하지만 안 보였다.
     접두사는 그 이름공간에서 빠져나오는 유일한 방법이다.

     담청의 남색을 유지하되 전략 톤에 맞춰 더 내렸다 */
  --dc-ink:#0C1219; --dc-ink-2:#0A0F15; --dc-panel:#121922; --dc-panel-2:#18212C;
  --dc-gold:#C4A46A; --dc-gold-2:#E2CD9E; --dc-gold-dim:rgba(196,164,106,.42);
  --dc-hair:rgba(196,164,106,.18); --dc-hair-faint:rgba(196,164,106,.09);
  --dc-paper:#ECE7DD; --dc-dim:#8B93A0;
  --dc-warn:#C77B5A;
  --dc-seal:#B4432E;                    /* 인주(朱砂) 색. 따뜻한 주홍이라 팔레트에 어긋나지 않는다 */
  --dc-serif:'Gowun Batang', serif;
  --dc-sans:'Noto Sans KR', sans-serif;
  --dc-maxw:540px;
  /* 여백 스케일. 지금 CSS 에 서로 다른 여백이 32가지 쓰이고 있었다(1,2,3,5,7,9,11,13…).
     읽는 면부터 이 8단계로 모은다. */
  --dc-s1:4px; --dc-s2:8px; --dc-s3:12px; --dc-s4:16px; --dc-s5:24px; --dc-s6:32px; --dc-s7:48px; --dc-s8:64px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dc-ink);color:var(--dc-paper);
  font-family:var(--dc-sans);font-weight:300;font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--dc-maxw);margin:0 auto;padding-left:24px;padding-right:24px}
a{color:inherit}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.34em;
  color:var(--dc-gold);opacity:.8;margin:0 0 16px;padding-left:.34em;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- 공통 버튼 ---------- */
.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:340px;margin:0 auto;min-height:58px;padding:16px 22px;
  cursor:pointer;border:0;border-radius:2px;
  background:linear-gradient(180deg,#C9A96E,#AE8C4F);
  color:#14100A;font-weight:700;font-size:16px;letter-spacing:.02em;
  transition:filter .25s ease,transform .25s ease;
}
.cta:hover,.cta:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.cta:focus-visible{outline:2px solid var(--dc-gold-2);outline-offset:3px}
.cta[disabled]{opacity:.35;cursor:not-allowed;filter:none;transform:none}
.cta.ghost{background:none;border:1px solid var(--dc-gold-dim);color:var(--dc-gold-2);font-weight:400}
.cta.ghost:hover{border-color:var(--dc-gold);filter:none}

/* ---------- 1. 문 ---------- */
.gate{
  position:relative;min-height:100dvh;display:flex;flex-direction:column;
  overflow:hidden;background:#07090C;
}

/* ── 폰: 사진이 위에 띠로 앉고 글은 그 아래. 겹치지 않으니 사진을 죽이지 않는다. ── */
.gate .hero{
  position:absolute;top:0;left:0;right:0;height:34dvh;width:100%;
  object-fit:cover;object-position:62% 30%;z-index:0;opacity:1;
  /* 인물이 실루엣으로 서고 용머리만 빛을 받게. 대비를 올리지 않으면 사진이 납작해진다. */
  filter:contrast(1.12) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
.gate .gwash{
  position:absolute;top:0;left:0;right:0;height:34dvh;z-index:1;pointer-events:none;
  /* 위쪽 어둠막이 .55 였다. 사진 위에 검은 천을 덮은 꼴이라 인물이 안 보였다. */
  background:linear-gradient(180deg,rgba(7,9,12,.28) 0%,rgba(7,9,12,.04) 40%,rgba(7,9,12,.42) 78%,#07090C 100%);
}
.gate .wrap{
  position:relative;z-index:2;width:100%;
  padding-top:calc(30dvh + env(safe-area-inset-top));
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}

/* ── 넓은 화면: 글 왼쪽, 사진 오른쪽 절반. 겹치는 자리가 없다. ── */
@media (min-width:900px){
  .gate{justify-content:center}
  .gate .hero{
    top:0;left:auto;right:0;width:52%;height:100%;
    object-position:38% center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);
  }
  .gate .gwash{
    top:0;left:0;right:0;height:100%;
    background:linear-gradient(90deg,#07090C 0%,#07090C 46%,rgba(7,9,12,.55) 54%,rgba(7,9,12,0) 68%);
  }
  .gate .wrap{
    max-width:none;width:100%;
    padding:0 0 0 max(40px,calc(50vw - 560px));
    text-align:left;
  }
  .gate .wrap > *{max-width:520px}
  .gate .topnav{max-width:520px;padding-right:0}
  .gate .cta{margin-left:0;margin-right:auto}
  .gate .microline{text-align:left}
}

.topnav{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;margin-bottom:auto}
.navlinks{display:flex;gap:14px;flex-wrap:wrap;min-width:0}
.navlinks button{background:none;border:0;cursor:pointer;padding:10px 0;
  font-size:12px;color:var(--dc-dim);border-bottom:1px solid transparent;white-space:nowrap}
.navlinks button:hover,.navlinks button:focus-visible{color:var(--dc-gold-2);border-bottom-color:var(--dc-gold-dim)}
.brandline{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.brandline b{font-family:var(--dc-serif);font-weight:400;font-size:17px;letter-spacing:.24em}
.brandline span{font-size:10px;letter-spacing:.14em;color:var(--dc-gold);opacity:.85}
.brandline .seal{
  font-family:var(--dc-serif);font-style:normal;font-size:10px;letter-spacing:.1em;
  color:#14100A;background:var(--dc-gold);padding:2px 5px;line-height:1.2;
}

.gate h1{margin:30px 0 0;font-size:clamp(25px,7vw,34px);line-height:1.5;
}
.gate h1 em{font-style:normal;color:var(--dc-gold-2)}
.gate .lede{margin:16px 0 0;font-size:clamp(13.5px,3.7vw,15px);line-height:1.85;color:#D5DAE2}
/* 이제 글 뒤가 단색이라 그림자로 버틸 필요가 없다. */
.gate .navlinks button,.gate .brandline span,.gate .stageline,
.gate .diff b,.gate .microline{color:#AAB2BE}

/* 용의 여섯 자리. 나열이 아니라 올라가는 선으로 그린다. */
.dragonlead{margin:24px 0 0;font-size:clamp(13px,3.5vw,14.5px);line-height:1.85;color:#D5DAE2}
.dragonlead em{font-style:normal;color:var(--dc-gold-2)}
.arc{display:block;width:100%;height:auto;margin:14px 0 0;overflow:hidden}
.arc .pt circle{fill:#0C1219;stroke:var(--dc-gold);stroke-width:1.4}
.arc .pt circle.top{fill:var(--dc-gold);stroke:var(--dc-gold)}
.arc circle.over{fill:#0C1219;stroke:#C77B5A;stroke-width:1.4;stroke-dasharray:2 2}
.arc .han text{font-family:var(--dc-serif);font-size:20px;fill:var(--dc-gold-2);text-anchor:middle}
.arc .ko text{font-size:12px;fill:#B4BBC6;text-anchor:middle}
.stageline{margin:10px 0 0;font-size:13px;line-height:1.8;color:#B4BBC6}
.stageline em{font-style:normal;color:var(--dc-paper)}

/* 차이. 두 줄 나열이 아니라 화살표로 옮겨가는 모양. */
.diff{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:24px 0 0}
.diff > div{padding:13px 14px;border:1px solid var(--dc-hair-faint)}
.diff b{display:block;font-size:13px;font-weight:400;line-height:1.55;color:var(--dc-dim)}
.diff span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.06em;color:var(--dc-dim);opacity:.7}
.diff .arrow{border:0;padding:0;color:var(--dc-gold);font-size:15px;text-align:center;pointer-events:none}
.diff .now{border-color:var(--dc-gold-dim);background:rgba(196,164,106,.07)}
.diff .now b{color:var(--dc-paper);font-weight:500}
.diff .now span{color:var(--dc-gold);opacity:1}

.gate .cta{margin:26px auto 0}
.microline{margin:12px 0 0;font-size:11.5px;color:var(--dc-dim);text-align:center}

/* ---------- 1b. 설득 화면 ---------- */
.about{padding:44px 0 40px}
.backline{background:none;border:0;cursor:pointer;color:var(--dc-dim);font-size:12.5px;padding:0 0 22px}
.backline:hover{color:var(--dc-paper)}
.about h2{font-size:clamp(21px,5.6vw,26px);line-height:1.5}
.about .lede{margin:14px 0 0;font-size:13.5px;color:var(--dc-dim);line-height:1.95}
.about .lede em{font-style:normal;color:var(--dc-gold-2)}

.formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin:26px 0 0}
.formula > div:not(.op){border:1px solid var(--dc-hair-faint);padding:15px 10px;text-align:center;min-height:132px}
.formula b{display:block;font-size:14px;font-weight:500}
.formula i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--dc-gold);margin-top:3px}
.formula span{display:block;margin-top:10px;font-size:11px;line-height:1.6;color:var(--dc-dim)}
.formula .op{color:var(--dc-gold);font-size:13px;text-align:center}
.fnote{margin:16px 0 0;font-size:12.5px;color:var(--dc-dim);text-align:center;line-height:1.8}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0 0;
  border-top:1px solid var(--dc-hair-faint);border-bottom:1px solid var(--dc-hair-faint);padding:18px 0}
.stats div{text-align:center}
.stats b{display:block;font-size:22px;font-weight:700;color:var(--dc-gold-2)}
.stats span{display:block;margin-top:4px;font-size:11px;color:var(--dc-dim)}

.faq{margin:24px 0 0}
.faq dt{font-size:14px;font-weight:500;margin:0 0 8px;padding-top:18px;border-top:1px solid var(--dc-hair-faint)}
.faq dt:first-child{border-top:0;padding-top:0}
.faq dd{margin:0 0 18px;font-size:13px;line-height:1.9;color:var(--dc-dim)}

.compare.tall{margin-top:30px}
.wlede{margin:12px 0 0;font-size:13.5px;line-height:1.9;color:var(--dc-dim);text-align:center}
.wlede em{font-style:normal;color:var(--dc-paper)}
/* 낱개와 전체를 나란히. 전체가 기본이 되게 크기와 테두리로 차이를 준다. */
.plans{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin:20px 0 0;text-align:left}
.plan{border:1px solid var(--dc-hair-faint);padding:16px 15px}
.plan b{display:block;font-size:13.5px;font-weight:500}
.plan .amt{margin:10px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.plan .amt em{font-style:normal;font-size:13px;font-weight:400;margin-left:2px}
.plan span{display:block;margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--dc-dim)}
.plan.all{border-color:var(--dc-gold);background:rgba(196,164,106,.07);position:relative}
.plan.all .tag{position:absolute;top:-9px;left:15px;margin:0;padding:2px 8px;
  background:var(--dc-gold);color:#14100A;font-size:10px;font-weight:500;letter-spacing:.04em}
.plan.all .amt s{font-size:14px;font-weight:300;color:var(--dc-dim);text-decoration:line-through;margin-right:6px}
.plan.all .amt strong{font-size:26px;color:var(--dc-gold-2)}
.plan.all span em{font-style:normal;color:var(--dc-gold-2)}
.plan.all .cta{margin:14px 0 0;min-height:50px;font-size:15px}
/* 광고로 온 사람에게는 낱개(9,900원)를 주 선택지로 세운다 — 처음 온 사람이
   4만 원을 먼저 결제하는 것보다 한 항목을 열고 이어 여는 쪽이 낫다는 판단
   (2026-09-28 퍼널 점검). 오가닉은 전과 같이 묶음이 주다. */
.plan.lead{border-color:var(--dc-gold);background:rgba(196,164,106,.07);position:relative}
.plan.lead .tag{position:absolute;top:-9px;left:15px;margin:0;padding:2px 8px;
  font-size:10.5px;letter-spacing:.08em;background:var(--dc-ink);color:var(--dc-gold-2);
  border:1px solid var(--dc-gold)}
.plan.lead .amt{color:var(--dc-gold-2)}
.plan.lead .cta{margin:14px 0 0;min-height:50px;font-size:15px}
.plan.muted{border-color:var(--dc-hair-faint);background:none}
.plan.muted .tag{display:none}
.plan.muted .amt strong{color:inherit;font-size:22px}
.plan.muted .cta{min-height:44px;font-size:13.5px;opacity:.9}

/* 항목마다 붙는 낱개 버튼 */
.lock .one{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:8px 11px;cursor:pointer;background:none;
  border:1px solid var(--dc-hair);border-radius:2px;
  font-size:12.5px;color:var(--dc-gold-2);white-space:nowrap;
}
.lock .one em{font-style:normal;font-size:10px;color:var(--dc-dim)}
.lock .one:hover,.lock .one:focus-visible{border-color:var(--dc-gold);background:rgba(196,164,106,.08)}
.lock .one:hover em{color:var(--dc-gold)}

.pricebox .ptitle{margin:0;font-size:19px;font-weight:700;line-height:1.5}
.pricebox .psub{margin:10px 0 20px;font-size:12.5px;color:var(--dc-dim);line-height:1.8}

/* ---------- 2. 묻기 ---------- */
.ask{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:56px 0}
.ask h2{font-size:22px;line-height:1.65;margin-bottom:10px}
.ask .lede{margin:0 0 28px;font-size:13.5px;color:var(--dc-dim)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}
.field label{font-size:12px;letter-spacing:.04em;color:var(--dc-gold);opacity:.9}
.field input,.field select{
  width:100%;padding:15px;background:var(--dc-ink-2);color:var(--dc-paper);
  border:1px solid var(--dc-hair);border-radius:2px;
  font-family:var(--dc-sans);font-weight:300;font-size:16px;
}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--dc-gold)}
.field input:disabled{opacity:.35}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 3분할 숫자 필드 (2026-10-04). 년이 네 자리라 조금 넓다. */
.row3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3 input,.row2 input{text-align:center;padding-left:8px;padding-right:8px}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;margin-bottom:14px}
.check input{width:16px;height:16px;accent-color:var(--dc-gold)}
.seg{display:flex;gap:12px;margin-bottom:6px}
.seg button{flex:1;padding:14px;background:var(--dc-ink-2);border:1px solid var(--dc-hair);border-radius:2px;font-size:14px;cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--dc-gold);color:var(--dc-gold-2)}
.note{margin:0 0 18px;font-size:12px;color:var(--dc-dim);line-height:1.85}
.err{margin:14px 0 0;font-size:13px;color:var(--dc-warn);min-height:1.3em}

/* ---------- 3. 세우는 중 ---------- */
.raise{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.raise p{margin:28px 0 0;font-size:14px;letter-spacing:.06em;color:var(--dc-dim)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dc-hair-faint)}
.pillar{padding:14px 2px 16px;text-align:center;transition:background .6s ease}
.pillar + .pillar{border-left:1px solid var(--dc-hair-faint)}
.pillar.lit{background:rgba(196,164,106,.05)}
.pillar .cap{font-size:10px;letter-spacing:.06em;color:var(--dc-gold);opacity:.7;white-space:nowrap}
.pillar .glyph{
  display:block;margin-top:10px;min-height:54px;font-family:var(--dc-serif);font-size:24px;
  line-height:1.15;color:var(--dc-paper);opacity:.35;transition:opacity .5s ease;white-space:pre-line;
}
.pillar.lit .glyph{opacity:1}

/* ---------- 4. 리포트 ---------- */
.report{padding:52px 0 40px}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.rhead b{font-size:11px;font-weight:500;letter-spacing:.3em;color:var(--dc-gold)}
.rhead span{font-size:11.5px;color:var(--dc-dim)}
.who{margin:14px 0 0;font-size:12px;color:var(--dc-dim);text-align:center}

.verdict{margin:34px 0 0;text-align:center}
.verdict .no{font-size:11px;letter-spacing:.3em;color:var(--dc-gold);opacity:.8}
.verdict h2{margin:12px 0 0;font-size:clamp(24px,6.6vw,30px);line-height:1.4}
.verdict p{margin:10px 0 0;font-size:13px;color:var(--dc-dim)}

/* 레이더. 다섯 축은 여덟 글자의 오행 개수에서 그대로 나온다. */
.radar{margin:26px 0 0;display:block;width:100%;height:auto}
.axes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 0}
.axes div{text-align:center}
.axes b{display:block;font-size:11px;font-weight:500;color:var(--dc-paper)}
.axes span{display:block;font-size:15px;font-family:var(--dc-serif);color:var(--dc-gold-2);margin-top:3px}
.axes .axnote{display:block;margin-top:4px;font-style:normal;font-size:9.5px;line-height:1.4;color:var(--dc-dim)}

.body{margin:var(--dc-s6) 0 0;font-size:15px;line-height:2.1}
.body p{margin:0 0 var(--dc-s6)}
.body p:last-child{margin:0}
/* 그림 자리. 아래쪽을 어둠으로 먹여 글자와 이어지게 한다. */
.cut{position:relative;margin:0 0 22px;border-radius:2px;overflow:hidden;background:#0a0e13}
.cut img{display:block;width:100%;height:100%;object-fit:cover}
.cut::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to bottom,transparent,var(--dc-ink) 92%)}
.raise .cut{margin:0 auto 26px;max-width:520px;aspect-ratio:16/9}
.cut video{display:block;width:100%;height:100%;object-fit:cover}
/* 영상이 아직 없을 때. 정지컷을 아주 천천히 밀어 3초를 덜 비게 만든다.
   영상(assets/ink-dip.mp4)이 들어오면 이 클래스를 지우고 video 를 쓴다. */
@media (prefers-reduced-motion: no-preference){
  .cut.drift img{animation:drift 9s ease-in-out infinite alternate;transform-origin:58% 62%}
}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.wall .cut{margin:-6px 0 20px;aspect-ratio:16/9}
.cut.about{margin:24px 0 4px;aspect-ratio:16/10}
.cut.about img{object-position:50% 30%}
.body h4{margin:var(--dc-s6) 0 var(--dc-s3);font-size:14px;font-weight:500;color:var(--dc-gold-2);letter-spacing:-.01em}
.body h4:first-child{margin-top:0}
h4.patt{padding-top:22px;border-top:1px solid var(--dc-hair-faint)}
.body .hook{color:var(--dc-gold-2);font-family:var(--dc-serif);font-size:16px;line-height:1.9}

/* ── 인장(落款) ──
   이 화자의 정체가 "찍는 사람"인데 정작 아무것도 안 찍고 있었다.
   낙관을 찍는 것과 눈을 찍는 것은 같은 동사다. 그래서 그림이 아니라 이걸 먼저 넣는다.
   주문(朱文) 방식 — 붉은 바탕에 글자를 파낸다. 손으로 찍은 티가 나게 살짝 기울인다. */
.stamp{
  display:inline-grid;grid-auto-flow:column;gap:0;
  background:var(--dc-seal);color:#0A0D12;
  font-family:var(--dc-serif);font-weight:400;line-height:1;
  padding:8px 6px 9px;transform:rotate(-3.5deg);   /* 낙관은 정사각에 가깝다 */
  font-size:15px;letter-spacing:0;opacity:.94;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.stamp i{font-style:normal;display:block;padding:0 1px}
.stamp.sm{font-size:11px;padding:6px 4px 7px;transform:rotate(-3deg)}
/* 무료 구간 끝. 화자가 여기서 붓을 놓는다. */
.sealrow{display:flex;align-items:center;gap:12px;justify-content:flex-end;
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--dc-hair-faint)}
.sealrow span{font-family:var(--dc-serif);font-size:12.5px;color:var(--dc-dim)}
.rstamp{display:flex;justify-content:flex-end;margin:-6px 0 2px}
.unlocked .sealrow{margin-top:22px;border-top:0;padding-top:6px}
/* 화자의 말. 설명문과 섞이면 안 되므로 서체와 색을 바꾸고 왼쪽에 획을 하나 세운다. */
.unlocked .voice{margin:20px 0 0;padding:2px 0 2px 14px;
  border-left:2px solid var(--dc-gold-dim);
  font-family:var(--dc-serif);font-size:14.5px;line-height:1.95;color:var(--dc-gold-2)}

.locked{margin:34px 0 0;border-top:1px solid var(--dc-hair)}
.lock{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:17px 2px;border-bottom:1px solid var(--dc-hair-faint);
}
.lock .no{font-size:11px;letter-spacing:.14em;color:var(--dc-gold);opacity:.7}
.lock b{display:block;font-size:14.5px;font-weight:500}
.lock span{display:block;font-size:12px;color:var(--dc-dim);margin-top:3px}
.lock i{font-style:normal;font-size:13px;color:var(--dc-dim);opacity:.7}
.lock.open{opacity:1}
.lock.open i{color:var(--dc-gold-2);opacity:1}
.unlocked{padding:var(--dc-s2) 2px var(--dc-s6);border-bottom:1px solid var(--dc-hair-faint)}
.unlocked h4{margin:var(--dc-s6) 0 var(--dc-s3);font-size:14px;font-weight:500;color:var(--dc-gold-2);letter-spacing:-.01em}
.unlocked h4:first-child{margin-top:8px}
.unlocked p{margin:0 0 var(--dc-s6);font-size:14.5px;line-height:2.05;color:var(--dc-paper)}
.unlocked p:last-child{margin:0}

/* 페이월: 비교표를 여기에 접어 넣었다 */
.wall{margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--dc-hair)}
.wall h3{font-size:19px;line-height:1.6;text-align:center}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:22px 0 0;border:1px solid var(--dc-hair-faint)}
.compare > div{padding:16px 14px}
.compare > div + div{border-left:1px solid var(--dc-hair-faint)}
.compare h4{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--dc-dim);text-align:center}
.compare .ours h4{color:var(--dc-gold)}
.compare ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.compare li{font-size:12px;line-height:1.6;color:var(--dc-dim)}
.compare .ours li{color:var(--dc-paper)}
.compare .ours li::before{content:"✓ ";color:var(--dc-gold)}
.closing{margin:20px 0 0;text-align:center;font-family:var(--dc-serif);font-size:15px;color:var(--dc-gold-2)}

.pricebox{margin:30px 0 0;border:1px solid var(--dc-hair);padding:24px 20px;text-align:center}
.pricebox .name{font-size:12.5px;color:var(--dc-dim)}
.pricebox .amt{margin:8px 0 0;font-size:34px;font-weight:700;letter-spacing:-.02em}
.pricebox ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;text-align:left}
.pricebox li{font-size:12.5px;color:var(--dc-dim)}
.pricebox li::before{content:"✓ ";color:var(--dc-gold)}
.pricebox .cta{margin-top:22px}

/* ---------- 5. 결제 ---------- */
.pay{padding:56px 0 40px}
.pay h2{font-size:21px;margin-bottom:22px}
.sum{border:1px solid var(--dc-hair-faint);padding:20px}
.sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:13.5px}
.sum dt{color:var(--dc-dim);white-space:nowrap}
.sum dd{margin:0;text-align:right}
.sum .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid var(--dc-hair)}
.sum .total b{font-size:24px;font-weight:700}
.agree{display:flex;align-items:flex-start;gap:11px;margin:22px 0 0;font-size:12.5px;line-height:1.8;color:var(--dc-dim);cursor:pointer}
.agree input{width:16px;height:16px;margin-top:3px;flex:0 0 auto;accent-color:var(--dc-gold)}
.agree b{color:var(--dc-paper);font-weight:500}
/* 클릭 = 동의(SAJU_CLICK_CONSENT)일 때 체크박스 대신 서는 고지.
   체크박스를 치우는 것은 손가락 하나를 줄이는 것이고, 고지를 치우는 것이 아니다. */
.agreenote{margin:22px 0 0;font-size:12.5px;line-height:1.8;color:var(--dc-dim)}
.agreenote b{color:var(--dc-paper);font-weight:500}
/* 아직 동의 전 — `disabled`로 잠그지 않는다(누른 사실이 사라진다). 흐리게만 알린다 */
.cta[aria-disabled="true"]{opacity:.55}
.mock{margin:14px 0 0;font-size:11.5px;color:var(--dc-dim);opacity:.75;text-align:center}

/* ---------- 푸터 ---------- */
footer{border-top:1px solid var(--dc-hair-faint);margin-top:40px;padding:24px 0 46px}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 18px}
.badges div{font-size:11.5px;color:var(--dc-dim);line-height:1.5}
.badges b{display:block;color:var(--dc-paper);font-weight:400;font-size:12px}
footer p{margin:0 0 9px;font-size:11.5px;line-height:1.85;color:var(--dc-dim)}

@media (max-width:599px){
  .wrap{padding-left:20px;padding-right:20px}
  .plans{grid-template-columns:1fr}
  .plan.all{order:-1}
  .diff{grid-template-columns:1fr;gap:6px;margin-top:16px}
  .brandline span{display:none}
  .navlinks{gap:12px}
  .navlinks button{font-size:11.5px}
  .arc .han text{font-size:26px}
  .arc .ko text{font-size:15px}
  .gate h1{margin-top:18px;font-size:23px;line-height:1.45}
  .gate .lede{margin-top:12px;font-size:13px}
  .dragonlead{margin-top:16px;font-size:12.5px}
  .arc{margin-top:8px}
  .stageline{margin-top:8px;font-size:12px}
  .diff > div{padding:10px 12px}
  .gate .cta{margin-top:18px;min-height:54px}
  /* ── 첫 화면은 스크롤 없이 다 보여야 한다 ──
     비교 블록이 199px 를 먹고 있었다(테두리 박스 둘 + 회전한 화살표).
     원래 의도가 '비교 한 줄'이었으므로 테두리를 걷고 한 줄씩으로 만든다.
     화살표는 폭 전체를 먹는 블록을 90도 돌리는 구조라 아래 CTA 까지 덮고 있었다 — 뺀다. */
  .diff{gap:6px;margin-top:16px}
  .diff > div,.diff .now{padding:0;border:0;background:none}
  .diff > div{display:flex;align-items:baseline;gap:10px}
  .diff > div > span{order:-1;margin-top:0;flex:0 0 auto;white-space:nowrap;
    opacity:1;font-size:11px;letter-spacing:.02em;min-width:58px}
  .diff b{font-size:13.5px;line-height:1.55}
  .diff .now b{color:var(--dc-gold-2)}          /* 박스 대신 색으로 강조한다 */
  .diff .now span{color:var(--dc-gold);opacity:1}
  .diff .arrow{display:none}

  /* 위아래로 조금씩 걷어 CTA 를 화면 안으로 들인다 */
  .gate .hero,.gate .gwash{height:30dvh}
  .gate .wrap{padding-top:calc(26dvh + env(safe-area-inset-top))}
  .gate .lede{margin-top:12px}
  .dragonlead{margin-top:16px}
  .stageline{margin-top:8px}
  .arc .han text{font-size:24px}
  .arc .ko text{font-size:14px}
  .pillars3{gap:9px}
  .p3 b{font-size:12px}
  .p3 span{font-size:10.5px}
  .compare{grid-template-columns:1fr}
  .compare > div + div{border-left:0;border-top:1px solid var(--dc-hair-faint)}
  .pillar .glyph{margin-top:8px;min-height:46px;font-size:21px}
  .axes b{font-size:9.5px}
  .axes .axnote{font-size:9px;line-height:1.35}
}
/* 세로가 짧은 기기(iPhone SE 등). 첫 화면 버튼이 화면 밖으로 밀린다.
   사진 띠를 줄이는 수밖에 없다 — 인물이 작아지는 건 감수하되, 버튼이 안 보이는 것보다 낫다. */
@media (max-width:599px) and (max-height:720px){
  .gate .hero,.gate .gwash{height:22dvh}
  .gate .wrap{padding-top:calc(18dvh + env(safe-area-inset-top))}
  .gate h1{margin-top:12px;font-size:21px}
  .gate .lede{margin-top:10px}
  .dragonlead{margin-top:12px}
  .arc{margin-top:4px}
  .stageline{margin-top:6px;font-size:11.5px}
  .diff{margin-top:12px}
  .gate .cta{margin-top:14px;min-height:50px}
  .microline{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* 법정 표기 — 목업에 없던 것을 덧붙인 자리(인계서 §6).
   푸터와 같은 결로 두되, 목업 규칙(느낌표·이모지 없음)을 따른다. */
.dc-legal{
  /* 목업엔 없던 블록이라 색을 따로 찍었었다. 담청 배경과 같은 값으로 맞춘다. */
  padding:32px 26px 48px; background:var(--dc-ink);
  font-size:11.5px; line-height:1.9; color:rgba(232,226,214,.42);
  text-align:center; border-top:1px solid rgba(196,164,106,.12);
}
.dc-legal p{margin:0 0 6px}
.dc-legal a{color:rgba(232,226,214,.62)}

/* 그 자리에서 여는 결제창. Stripe가 iframe을 넣는다 */
#payBox{margin-top:18px}
#payBox:empty{display:none}

/* 컷 4 — 결제 직후 보상. 파일이 없으면 hidden 이라 자리도 안 차지한다 */
.cut.reward{margin:var(--dc-s5) 0 var(--dc-s6)}
.cut.reward[hidden]{display:none}


/* ── 하단 고정 오퍼 ──────────────────────────────────────────────
   ⚠️ `env(safe-area-inset-bottom)`가 반드시 들어간다. iOS 인스타그램·페이스북
   인앱 브라우저는 화면 맨 아래에 자체 툴바를 띄우고, `bottom:0`만 있으면 버튼이
   그 아래 깔려 손가락이 닿지 않는다 — 그리고 그 인앱 유입이 바로 광고로 사 오는
   트래픽이다(`lib/sticky.ts`에 명학 쪽 실측과 함께 적혀 있다).

   가격 블록(`.wall`)이 화면에 들어오면 숨는다. 두 개가 같이 서면 서로를 죽인다. */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:20;
  margin:0 auto;max-width:560px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--dc-ink) 62%, rgba(0,0,0,0));
  pointer-events:none}
.stickybuy .cta{margin:0;min-height:52px;pointer-events:auto}


/* ── 1번 뒷부분이 잠겼을 때 ──────────────────────────────────────
   목차(02~07)와 같은 생김새를 쓴다 — 담청이 이미 "잠김"을 말하는 방식이고,
   새 모양을 만들면 읽는 사람이 다른 것으로 오해한다. */
.locked.firsttail{margin-top:26px}
.tailnote{
  margin:14px 0 0;padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--dc-gold) 45%, transparent);
  font-size:12.5px;line-height:1.7;color:var(--dc-gold-2);text-align:center}


/* ── 값을 치른 사람에게 말을 거는 자리 ──
   결제 확인이 늦거나 요청이 실패했을 때, 잠긴 화면을 말없이 두지 않는다. */
.dcnotice{position:fixed;left:0;right:0;bottom:0;z-index:30;
  margin:0 auto;max-width:560px;padding:14px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--dc-ink);border-top:1px solid var(--dc-gold);
  text-align:center}
.dcnotice p{margin:0 0 10px;font-size:13px;line-height:1.7;color:var(--dc-paper)}
.dcnotice .cta{margin:0;min-height:44px;font-size:13.5px}
/* 취소 복귀 칩 (2026-10-04) — 왜 접었는지 한 번만 묻는다. 네 칩 중 하나를 누르면 사라진다. */
.dcnotice .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 10px}
.dcnotice .chips button{padding:9px 12px;background:var(--dc-ink-2);color:var(--dc-paper);
  border:1px solid var(--dc-hair);border-radius:2px;font-size:12.5px;cursor:pointer}
.dcnotice .chips button:hover{border-color:var(--dc-gold)}
.dcnotice .close{display:block;margin:6px auto 0;background:none;border:0;color:var(--dc-dim);font-size:12px;cursor:pointer}

/* 그 자리 결제창 (2026-10-04). Stripe iframe이 서는 자리 — 밝은 바탕 위에 올린다. */
.paybox{margin:18px 0 0;background:#fff;border-radius:4px;min-height:120px;padding:8px 0}

/* 메일로 남겨 두기 (2026-10-04) */
.keep{margin:26px 0 0;padding:18px 16px;border:1px solid var(--dc-hair-faint);text-align:left}
.keep p{margin:0 0 12px;font-size:13px;line-height:1.8;color:var(--dc-dim)}
.keep .keeprow{display:grid;grid-template-columns:1fr auto;gap:8px}
.keep input{width:100%;padding:12px 13px;background:var(--dc-ink-2);color:var(--dc-paper);
  border:1px solid var(--dc-hair);border-radius:2px;font-family:var(--dc-sans);font-weight:300;font-size:16px}
.keep input:focus-visible{outline:none;border-color:var(--dc-gold)}
.keep .cta{margin:0;min-height:44px;padding:0 16px;font-size:13.5px;white-space:nowrap}
.keep .note{margin:10px 0 0;min-height:0}

/* 용어 풀이는 접어 둔다 (2026-10-04). 무료 구간이 길어 가격까지 못 내려가던 자리 — 뜻은 summary 한 줄에 있고
   궁금한 사람만 편다. */
.body details.gloss{margin:0 0 var(--dc-s6);border:1px solid var(--dc-hair-faint);padding:12px 14px}
.body details.gloss summary{cursor:pointer;font-size:13px;line-height:1.8;color:var(--dc-gold-2);list-style:none}
.body details.gloss summary::-webkit-details-marker{display:none}
.body details.gloss summary::before{content:'+ ';color:var(--dc-gold)}
.body details.gloss[open] summary::before{content:'− '}
.body details.gloss p{margin:12px 0 0;font-size:13.5px}