/* 무료 오늘의 운세
 *
 * 앞선 시안이 "폰트·색감이 딱딱하고 가독성이 떨어진다"는 지적을 받았다.
 * 대중 대상이므로 이번엔 이렇게 고쳤다.
 *  · 차가운 회청 계열 → 따뜻한 모래·잉크 계열
 *  · 본문 글자를 키우고(0.98 → 1.06rem) 대비를 올렸다
 *  · 표제는 명조 대신 Hahmlet(획이 부드러운 세리프), 본문은 고운돋움
 */

:root {
  /**
   * 쪽빛과 주사 — 한지 위에 남색 먹, 강조는 주사(朱砂) 하나.
   *
   * 이 바닥은 죄다 어두운 바탕에 네온이라(천명·운명연구소·포스텔러)
   * 밝은 종이 쪽이 오히려 눈에 띈다. 게다가 우리 리포트가 크림 종이라
   * 사이트와 결과물이 같은 결이 된다 — 저쪽들은 그 연결이 없다.
   *
   * 글자를 검정 대신 쪽빛(남색)으로 두면 종이가 덜 딱딱해 보이고,
   * 주사색 강조 하나가 훨씬 선명하게 뜬다. 둘 다 전통 오방색 계열이다.
   */
  --ground:      #F5EFE3;   /* 한지 */
  --panel:       #FFFCF6;
  --line:        #DFD5C2;
  --ink:         #1F2A3C;   /* 쪽빛 */
  --ink-mid:     #46536A;
  --ink-dim:     #7C8697;
  --seal:        #C1452F;   /* 주사(朱砂) — 강조 하나만 */
  --seal-soft:   #F7E2DC;
  /* 띠 구역 바탕 — 한지보다 반 톤 어둡게. 상자를 두르지 않고 리듬을 만든다 */
  --band:        #EDE5D5;
  --shadow:      0 1px 2px rgba(60,45,30,.05), 0 18px 40px -22px rgba(60,45,30,.28);
  --shadow-lift: 0 2px 4px rgba(60,45,30,.05), 0 30px 60px -30px rgba(60,45,30,.35);

  /**
   * 글꼴 척도.
   * 예전에는 크기가 쉰 가지였고 대부분 .8~1.0rem 사이에 몰려 있었다.
   * 어디가 중요한지 눈이 못 잡아서 글이 벽처럼 보였다 — 대비가 곧 가독성이다.
   */
  --t-xs:  .8rem;    /* 근거·주석 */
  --t-sm:  .92rem;   /* 보조 설명 */
  --t-md:  1.06rem;  /* 본문 */
  --t-lg:  1.55rem;  /* 구획 제목 — 훑을 때 확실히 걸리게 */
  --t-xl:  2.2rem;   /* 큰 제목 */
  --t-2xl: 3.1rem;   /* 히어로 */

  /** 여백 척도 — 리듬을 만든다 */
  --s-1: .4rem;  --s-2: .8rem;  --s-3: 1.3rem;
  --s-4: 2.1rem; --s-5: 3.4rem; --s-6: 5.5rem;

  /** 어두운 띠 — 흰 판만 쌓이면 스크롤이 단조로우므로 대비를 준다 */
  --dark:      #141B26;
  --dark-2:    #1C2532;
  --dark-ink:  #EDF1F8;
  --dark-mid:  #B7C1D1;
  --dark-dim:  #808B9C;
  --dark-seal: #E0654C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 밤의 쪽빛 — 낮의 남색을 그대로 어둡게 내린다 */
    --ground:    #141B26;
    --panel:     #1C2532;
    --line:      #2D3949;
    --ink:       #E9EEF6;
    --ink-mid:   #AEBACC;
    --ink-dim:   #7C8697;
    --seal:      #E0654C;
    --seal-soft: #3A2320;
    --band:      #101722;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 18px 40px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ground: #141B26; --panel: #1C2532; --line: #2D3949;
  --ink: #E9EEF6; --ink-mid: #AEBACC; --ink-dim: #7C8697;
  --seal: #E0654C; --seal-soft: #3A2320; --band: #101722;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -22px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--ground);
  color: var(--ink);
  font-family: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
  font-size: var(--t-md);
  line-height: 1.9;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 30rem; margin: 0 auto; }

/* ── 머리 ── */
/**
 * 히어로가 아닌 머리(있다면)의 기본값.
 * `:not(.hero)` 를 붙이지 않으면 특이도(0,1,1)가 `.hero`(0,1,0)를 이겨
 * 히어로의 좌우 안쪽 여백이 0 이 되고, 어두운 배경 위 글자가 화면에 붙는다.
 */
header.top:not(.hero) { padding: var(--s-6) 0 var(--s-5); text-align: center; }
.seal {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--seal-soft);
  font-family: "Hahmlet", serif; font-size: var(--t-lg); color: var(--seal);
}
h1 {
  font-family: "Hahmlet", serif; font-weight: 600;
  font-size: clamp(1.9rem, 8vw, var(--t-2xl)); line-height: 1.3;
  letter-spacing: -.02em; margin: 0 0 var(--s-2); text-wrap: balance;
}
.tagline { color: var(--ink-mid); margin: 0; font-size: var(--t-sm); line-height: 1.8; }

/* ── 입력 ── */
form {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 1.1rem; padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.field-label {
  font-size: var(--t-sm); letter-spacing: .02em; color: var(--ink-dim);
  display: block; margin-bottom: .6rem;
}
.dob { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .5rem; }
select {
  width: 100%; padding: .8rem .7rem; font: inherit; font-size: var(--t-md);
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--line); border-radius: .6rem;
  appearance: none; text-align: center; cursor: pointer;
}
select:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

.check {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1.1rem 0 1.3rem; font-size: var(--t-sm); color: var(--ink-mid);
  cursor: pointer;
}
.check input { width: 1.15rem; height: 1.15rem; margin: .28rem 0 0; accent-color: var(--seal); flex: 0 0 auto; }
.check span small { display: block; color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.5; }

.btn {
  display: block; width: 100%; padding: .95rem 1rem;
  font: inherit; font-size: var(--t-md); text-align: center; text-decoration: none;
  border-radius: .7rem; border: 1px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--seal); color: #FFF8F4; }
.btn--ghost { background: transparent; color: var(--ink-mid); border-color: var(--line); }
.btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.privacy {
  margin: 1rem 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-dim);
  text-align: center;
}

/* ── 카드 ── */
#result[hidden] { display: none; }
.card {
  position: relative; isolation: isolate;
  background: var(--bg); border-radius: 1.25rem;
  padding: 1.5rem 1.5rem 1.25rem; margin-bottom: 1.25rem;
  display: grid; grid-template-rows: auto auto auto 1fr auto; row-gap: 1.15rem;
  min-height: 30rem; color: #FBF7F2;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 22px 44px -20px rgba(0,0,0,.5);
}
.card > .card-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .4;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.05) .5px, transparent .5px);
  background-size: 3px 3px;
}
.card > *:not(.card-grain) { position: relative; z-index: 1; }

.card-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-xs); letter-spacing: .04em; color: rgba(251,247,242,.6);
}
.brand { font-family: "Hahmlet", serif; font-size: var(--t-sm); letter-spacing: .28em; color: var(--accent); }

.marks { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: .9rem; justify-items: center; align-items: start; }
.mark { display: grid; justify-items: center; row-gap: .3rem; }
.mark-box { height: 4.6rem; display: grid; place-items: center; }
.mark-img { width: 4.6rem; height: 4.6rem; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.mark-emoji { font-size: var(--t-2xl); line-height: 1; }
.mark-label { font-size: var(--t-xs); color: rgba(251,247,242,.55); }
.mark-ganji { font-family: "Hahmlet", serif; font-size: var(--t-lg); line-height: 1.2; color: var(--accent); }
.mark-x { color: rgba(251,247,242,.35); height: 4.6rem; display: grid; place-items: center; align-self: start; }

.headline { display: grid; row-gap: .55rem; justify-items: center; text-align: center; }
.headline h2 {
  font-family: "Hahmlet", serif; font-weight: 600; font-size: var(--t-xl);
  line-height: 1.3; margin: 0; text-wrap: balance;
}
.badge {
  margin: 0; padding: .34rem .85rem; border-radius: 1rem;
  font-size: var(--t-sm); line-height: 1.45;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(255,255,255,.09);
}
.badge--mixed { background: rgba(255,255,255,.06); color: rgba(251,247,242,.78); }

.body { display: grid; row-gap: 1rem; align-content: start; }
.lead { margin: 0; font-size: var(--t-md); line-height: 1.78; color: rgba(251,247,242,.96); }
.advice { margin: 0; display: grid; row-gap: .7rem; }
.advice > div {
  display: grid; grid-template-columns: 4.1rem 1fr; column-gap: .75rem;
  align-items: baseline; padding-top: .6rem;
  border-top: 1px solid var(--accent-soft);
}
.advice dt { margin: 0; font-size: var(--t-sm); color: var(--accent); white-space: nowrap; }
.advice dd { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: rgba(251,247,242,.86); }

.card-foot {
  display: grid; row-gap: .35rem; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.11);
  font-size: var(--t-xs); line-height: 1.5; color: rgba(251,247,242,.52);
}
.foot-row { display: flex; flex-wrap: wrap; gap: .25rem .8rem; }
.foot-note { color: rgba(251,247,242,.42); }

/* ── 카드 뒤 ── */
.after { display: grid; row-gap: .65rem; }
.after-note {
  margin: .4rem 0 0; font-size: var(--t-sm); line-height: 1.7;
  color: var(--ink-dim); text-align: center;
}

#toast[hidden] { display: none; }
#toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--ground);
  padding: .7rem 1.2rem; border-radius: 2rem; font-size: var(--t-sm);
  box-shadow: var(--shadow); z-index: 50;
}

footer.foot {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.7; color: var(--ink-dim); text-align: center;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ══════════════ 상품 페이지 — 종합사주 열세 단계 ══════════════
 *
 * 무료 페이지의 토큰(모래·인주·Hahmlet)을 그대로 쓴다. 여기서 색을 새로 만들면
 * 두 페이지가 다른 서비스처럼 보인다.
 * 다만 폭은 넓힌다 — 무료는 카드 한 장이라 30rem 이 맞지만 여기는 읽을 것이 많다.
 */

.wrap--wide { max-width: 38rem; }

.carried {
  margin: .9rem 0 0;
  font-family: "Hahmlet", serif;
  color: var(--seal);
  font-size: var(--t-sm);
}

/* ── 구획 ── */
.pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: var(--s-4) 1.4rem;
  margin: 0 0 var(--s-3);
  box-shadow: var(--shadow);
}
.pane--seal { border-color: var(--seal); }

/**
 * 구획 제목은 본문보다 확실히 커야 훑을 때 눈이 걸린다.
 * 제목 위에 짧은 선을 하나 두어 구획이 시작하는 자리를 눈에 박아 준다.
 */
.pane-title {
  margin: 0 0 var(--s-3);
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pane-title::before {
  content: '';
  display: block;
  width: 1.8rem;
  height: 2px;
  margin-bottom: var(--s-2);
  background: var(--seal);
  border-radius: 2px;
}
.pane-lead { margin: 0 0 1.3rem; line-height: 1.85; }
.pane-lead b { font-weight: 400; color: var(--seal); }
.pane-note { margin: 1rem 0 0; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-dim); }

/* ── 사양 ── */
.spec { margin: 0; display: grid; gap: .1rem; }
.spec > div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: .6rem;
  padding: .62rem 0;
  border-top: 1px solid var(--line);
}
.spec dt { font-family: "Hahmlet", serif; color: var(--ink-dim); font-size: var(--t-sm); }
.spec dd { margin: 0; font-size: var(--t-sm); line-height: 1.65; }

/* ── 열세 단계 ── */
.stages { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.stages li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .1rem .7rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
}
.stages li::before {
  content: counter(st);
  grid-row: 1 / 3;
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--seal);
  padding-top: .28rem;
  font-variant-numeric: tabular-nums;
}
.stages b { font-weight: 400; font-size: var(--t-sm); line-height: 1.5; }
.stages span { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-dim); }

/* ── 인용 ── */
.quote {
  margin: 0;
  padding: 0 0 0 1.05rem;
  border-left: 3px solid var(--seal);
  font-family: "Hahmlet", serif;
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--ink);
}
.pulls { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.pulls li {
  padding: .7rem .9rem;
  background: var(--seal-soft);
  border-radius: .55rem;
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* ── 시각 토글 ── */
.time-effect {
  margin: 1.1rem 0 0;
  padding: 1.05rem 1.1rem;
  border-radius: .6rem;
  background: var(--seal-soft);
}
.te-head {
  margin: 0 0 .6rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--seal);
}
.te-list { margin: 0; padding-left: 1.05rem; display: grid; gap: .36rem; }
.te-list li { font-size: var(--t-sm); line-height: 1.7; }
.te-list b { font-weight: 400; color: var(--seal); }
.te-note { margin: .85rem 0 0; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-dim); }

/* ── 하지 않는 것 ── */
.nots { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.nots li { font-size: var(--t-sm); line-height: 1.75; color: var(--ink-mid); }
.nots b { font-weight: 400; color: var(--ink); }

/* ── 결제 ── */
.pane--buy { text-align: center; }
.price {
  margin: 0;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.3;
  color: var(--ink);
}
.price-note { margin: .3rem 0 1.3rem; font-size: var(--t-sm); color: var(--ink-dim); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.buy-note { margin: 1rem 0 0; font-size: var(--t-xs); line-height: 1.7; color: var(--ink-dim); }

.foot-dim { color: var(--ink-dim); font-size: var(--t-xs); line-height: 1.7; }

@media (max-width: 26rem) {
  .pane { padding: 1.25rem 1.05rem; }
  .spec > div { grid-template-columns: 4.4rem 1fr; }
}

/* ══════════════ 마케팅 카피 ══════════════
 *
 * 두 페이지 모두 "폼 + 사양서"라 왜 해야 하는지 말하지 않고 있었다.
 * 경쟁사는 숫자 사회적 증거(7만명·5.6만명)와 이모지로 끌지만 우리는 고객이 0명이라
 * 그 숫자를 쓸 수 없다 — 쓰면 거짓말이다.
 * 대신 우리에게만 있는 것을 쓴다: **만신이라는 화자**. 사양이 말하지 않고 만신이 말한다.
 */

.eyebrow {
  margin: 0 0 .5rem;
  font-family: "Hahmlet", serif;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--seal);
}

/* ── 무료 페이지: 왜 보는가 ── */
.hooks {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.hooks li {
  display: grid;
  gap: .1rem;
  padding: .7rem .9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.hooks b {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
}
.hooks span { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-dim); }

.foot-link {
  color: var(--seal);
  text-decoration: none;
  border-bottom: 1px solid var(--seal-soft);
  font-size: var(--t-sm);
}
.foot-link:hover { border-bottom-color: var(--seal); }

/* ── 상품 페이지: 말 건네기 ── */
.pane--hail { border-color: var(--seal); background: var(--seal-soft); }
.hail {
  margin: 0 0 .9rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
}
.hail-body { margin: 0 0 .8rem; font-size: var(--t-sm); line-height: 1.85; color: var(--ink-mid); }
.hail-body:last-child { margin-bottom: 0; }
.hail-body b { font-weight: 400; color: var(--seal); }

/* 구획 첫머리에 오는 안내문은 제목 바로 아래 붙는다 */
.pane-note--top { margin: -.5rem 0 1.1rem; }
.pane-note--top b { font-weight: 400; color: var(--seal); }

.price-lead { margin: 0 0 .7rem; font-size: var(--t-sm); color: var(--ink-dim); }
.buy-note b { font-weight: 400; color: var(--ink-mid); }

/* ── 맺음말 ── */
.pane--last { text-align: center; background: transparent; border: none; box-shadow: none; }
.last-word {
  margin: 0;
  font-family: "Hahmlet", serif;
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--ink-mid);
  text-wrap: balance;
}

/* ── 기술 차별점 나열 ──
 * 경쟁사(운명연구소)가 공법 이름을 그대로 노출해 신뢰를 만든다.
 * 우리는 실제로 구현한 것이 더 많으므로 같은 방식이 유리하다.
 */
.whys { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.whys li {
  display: grid;
  gap: .22rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}
.whys li:first-child { border-top: none; padding-top: 0; }
.whys b {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
}
.whys span { font-size: var(--t-xs); line-height: 1.75; color: var(--ink-dim); }

/* ── 면책·사업자 정보 ── */
.last-note {
  margin: 1.2rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: balance;
}
.biz {
  margin: 1.3rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .3rem;
  text-align: left;
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
.biz > div { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
.biz dt { color: var(--ink-dim); }
.biz dd { margin: 0; }
.biz-link { color: var(--ink-dim); }

/* ── 브랜드 ──
 * .seal 은 원래 홀로 서던 도장이라 3rem 에 아래 여백 1.1rem 을 갖고 있다.
 * 이름 옆에 세우려면 그 둘을 걷어내야 줄이 맞는다.
 */
.brand .seal {
  width: 2.1rem; height: 2.1rem;
  margin: 0;
  font-size: var(--t-md);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  text-decoration: none;
  color: inherit;
}
.brand-name {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: .02em;
  color: var(--ink);
}
.brand:hover .brand-name { color: var(--seal); }

/* ── 개인화 추천 ──
 * 경쟁사는 여기에 하드코딩된 같은 상품을 띄운다.
 * 우리는 그 사람 사주에 실제로 걸린 것을 근거와 함께 보여 준다 —
 * 근거(evidence)를 빼면 그냥 광고가 되므로 반드시 함께 둔다.
 */
.hooks-out { margin: 2rem 0 0; }
.hooks-title {
  margin: 0 0 .35rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--ink);
}
.hooks-note { margin: 0 0 1rem; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-dim); }
.hooks-note b { font-weight: 400; color: var(--seal); }

.hook-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.hook {
  padding: .95rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .7rem;
  box-shadow: var(--shadow);
}
.hook-badge {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .16rem .5rem;
  border-radius: .3rem;
  background: var(--seal-soft);
  color: var(--seal);
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  letter-spacing: .02em;
}
.hook-line {
  margin: 0 0 .35rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
}
.hook-why { margin: 0 0 .5rem; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-mid); }
.hook-evi {
  margin: 0 0 .7rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.hook-go {
  color: var(--seal);
  text-decoration: none;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--seal-soft);
}
.hook-go:hover { border-bottom-color: var(--seal); }

/* ── 자리별 결 ──
 * 일주 하나만 보는 곳과 갈리는 지점이라 결과 카드 바로 아래 둔다.
 */
.seats { margin: 1.6rem 0 0; }
.seats-title {
  margin: 0 0 .35rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink);
}
.seats-note { margin: 0 0 .9rem; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-dim); }
.seats-note b { font-weight: 400; color: var(--seal); }

.seat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.seat {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .7rem;
  padding: .62rem .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  font-size: var(--t-sm);
}
.seat--on { border-color: var(--seal); background: var(--seal-soft); }
.seat-name { color: var(--ink-mid); }
.seat-ganji { font-family: "Hahmlet", serif; color: var(--ink-dim); font-size: var(--t-xs); }
.seat-rel {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  color: var(--ink);
  min-width: 4.2rem;
  text-align: right;
}
.seat--on .seat-rel { color: var(--seal); }

/* ── 처음 보는 사람을 위한 안내 ──
 * 접어 두어 아는 사람은 지나가고, 모르는 사람은 펼쳐 본다.
 * 상품 페이지에 "어려운 말은 쉽게 풀어 드립니다"라 적어 놓고 이 페이지가
 * 용어 범벅이면 그 말이 거짓이 된다.
 */
.primer {
  margin: 0 0 1.1rem;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .9rem;
  box-shadow: var(--shadow);
}
.primer > summary {
  padding: 1rem 1.35rem;
  cursor: pointer;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--seal);
  list-style: none;
}
.primer > summary::-webkit-details-marker { display: none; }
.primer > summary::after { content: ' ＋'; color: var(--ink-dim); font-weight: 400; }
.primer[open] > summary::after { content: ' －'; }
.primer > summary:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }
.primer-body { padding: 0 1.35rem 1.25rem; }
.primer-body p { margin: 0 0 .75rem; font-size: var(--t-sm); line-height: 1.85; color: var(--ink-mid); }
.primer-body b { font-weight: 400; color: var(--seal); }
.primer-note { color: var(--ink-dim) !important; font-size: var(--t-xs) !important; }

/* ── 상품 라인업 ── */
.prod-hero {
  padding: 1.4rem 1.2rem;
  background: var(--seal-soft);
  border: 1px solid var(--seal);
  border-radius: .75rem;
  text-align: center;
}
.prod-hero-tag { margin: 0 0 .45rem; font-size: var(--t-sm); color: var(--seal); }
.prod-hero-name {
  margin: 0 0 .35rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--ink);
}
.prod-hero-blurb { margin: 0 0 .9rem; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-mid); }
.prod-hero-price {
  margin: 0 0 .3rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-xl);
  color: var(--ink);
}
.prod-hero-anchor { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-dim); }
.prod-hero-anchor b { font-weight: 400; color: var(--seal); }

.prod-split {
  margin: 1.6rem 0 .7rem;
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--ink-dim);
}
.prod-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.prod {
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--panel);
  scroll-margin-top: 1rem;
}
.prod:target { border-color: var(--seal); background: var(--seal-soft); }
.prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.prod-head b { font-family: "Hahmlet", serif; font-weight: 600; font-size: var(--t-md); }
.prod-price {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  color: var(--seal);
  white-space: nowrap;
}
.prod-blurb { margin: .3rem 0 .35rem; font-size: var(--t-sm); line-height: 1.65; color: var(--ink-mid); }
.prod-meta { margin: 0; font-size: var(--t-xs); color: var(--ink-dim); }

/* ── 명식표·오행 (리포트와 같은 규칙) ── */
.block-label{font-family:"Hahmlet",serif;font-size:.95rem;color:var(--seal);
  margin:0 0 .7rem;letter-spacing:.02em}
.block-label small{color:var(--ink-dim);font-weight:400;font-size:.8rem;letter-spacing:0}
.chart-wrap{overflow-x:auto;margin:0 0 2rem}
table.chart{border-collapse:separate;border-spacing:.3rem;width:100%;min-width:23rem}
table.chart th[scope=col]{padding:.3rem 0 .5rem}
table.chart th[scope=col] b{display:block;font-family:"Hahmlet",serif;font-weight:600;
  font-size:.95rem;color:var(--ink)}
table.chart th[scope=col] span{display:block;font-size:.66rem;color:var(--ink-dim);margin-top:.1rem}
table.chart tbody th{width:3.6rem;text-align:right;padding-right:.5rem;font-weight:400;
  font-size:.72rem;color:var(--ink-dim);white-space:nowrap;vertical-align:middle}
table.chart td{text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:.45rem;padding:.4rem .2rem}
.elements{margin:0 0 2rem}
.el-name{font-family:"Hahmlet",serif;font-size:.9rem}
.el-bar{background:var(--seal-soft);border-radius:2rem;height:.55rem;overflow:hidden}
.el-bar i{display:block;height:100%;border-radius:2rem;min-width:2px}
.el-n{font-size:.78rem;color:var(--ink-dim);text-align:right}
.el-note{margin:.8rem 0 0;font-size:.85rem;line-height:1.65;color:var(--ink-mid)}
.el-note b{color:var(--seal);font-weight:400}

/* ── 리포트 실물 미리보기 ──
 * 그림 서른두 개를 만들어 놓고 파는 화면에서 하나도 안 보여 주고 있었다.
 * 종이 한 장처럼 보이게 얹어, 리포트를 펼친 느낌을 준다.
 */
.inside-tag {
  margin: -.4rem 0 1rem;
  font-size: .85rem;
  color: var(--seal);
}
.inside-sheet {
  padding: 1rem .9rem 1.1rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: .6rem;
  overflow-x: auto;
}
.inside-sheet + .inside-sheet,
.inside-grid { margin-top: .7rem; }
.inside-grid { display: grid; gap: .7rem; }
.inside-cap {
  margin: 0 0 .7rem;
  font-family: "Hahmlet", serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.inside-note {
  margin: 1.1rem 0 0;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.inside-note b { font-weight: 400; color: var(--seal); }
/* 미리보기 안의 그림은 크기를 줄여 여러 개가 나란히 보이게 */
.inside-sheet figure.viz { margin: 0; }
.inside-sheet svg { max-width: 100%; height: auto; }

@media (min-width: 34rem) {
  .inside-grid { grid-template-columns: 1fr 1fr; }
  .inside-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── 그림 (리포트와 같은 규칙) ── */
.viz{margin:0 0 1.8rem;padding:1.2rem 1.1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:.8rem;break-inside:avoid}
.viz figcaption{margin-top:.9rem;font-size:.82rem;line-height:1.6;
  color:var(--ink-dim);text-align:center}
.viz figcaption b{color:var(--seal);font-weight:400}
.viz--wheel{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center}
.viz--wheel svg{width:8.5rem;height:8.5rem}
.wheel-n{text-anchor:middle;font-family:"Hahmlet",serif;font-size:1.5rem;fill:var(--ink)}
.wheel-l{text-anchor:middle;font-size:.6rem;fill:var(--ink-dim)}
.legend{list-style:none;margin:0;padding:0;display:grid;row-gap:.3rem}
.legend li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink-mid)}
.legend li.zero{opacity:.45}
.legend i{width:.7rem;height:.7rem;border-radius:2px;flex:0 0 auto}
.legend b{margin-left:auto;font-weight:400;color:var(--ink)}
.viz--wheel figcaption{grid-column:1/-1;margin-top:.4rem}
.tgrow{display:grid;grid-template-columns:5.6rem 1fr 1.4rem;gap:.7rem;
  align-items:center;margin-bottom:.45rem}
.tgname{font-size:.88rem;color:var(--ink)}
.tgname small{display:block;font-size:.68rem;color:var(--ink-dim)}
.tgbar{background:var(--seal-soft);border-radius:2rem;height:.6rem;overflow:hidden}
.tgbar i{display:block;height:100%;background:var(--seal);border-radius:2rem;min-width:2px}
.tgn{font-size:.8rem;color:var(--ink-dim);text-align:right}
.viz--curve svg{width:100%;height:auto}
.cv-line{fill:none;stroke:var(--seal);stroke-width:2;stroke-linejoin:round}
.viz--curve circle{fill:var(--seal)}
.cv-s{text-anchor:middle;font-size:9px;fill:var(--ink)}
.cv-l{text-anchor:middle;font-size:8px;fill:var(--ink-dim)}
.viz--sinsal{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.viz--annual{overflow-x:auto}
.viz--annual table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:20rem}
.viz--annual th{font-weight:400;font-size:.7rem;color:var(--ink-dim);
  text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--line)}
.viz--annual td{padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.viz--annual tr:last-child td{border-bottom:0}
.viz--annual .yr{font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.viz--annual .gz{font-family:"Hahmlet",serif;font-size:1rem}
.viz--annual .tg{font-size:.78rem;color:var(--ink-mid)}
.viz-title{font-family:"Hahmlet",serif;font-size:.92rem;color:var(--seal);
  margin:0 0 .8rem;letter-spacing:.02em}
.viz--overview{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center}
.viz--health table{border-collapse:collapse;width:100%;font-size:.86rem}
.viz--health td{padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.viz--health tr:last-child td{border-bottom:0}
.viz--health tr.none{background:var(--seal-soft)}
.viz--health tr.much{background:var(--ground)}
.viz--health .hel{font-family:"Hahmlet",serif;font-size:1rem;width:2.2rem}
.viz--health .hn{width:1.8rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.viz--health .horg{color:var(--ink-mid)}
.viz--health .hst{width:3.4rem;text-align:right;font-size:.76rem;color:var(--seal)}
.viz--now{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center}
  figure.viz,table.chart,.board-note{break-inside:avoid}
  figure.viz{margin:2.4rem 0}

tr.r-tg th{color:var(--ink-dim)}
section.stage{margin-bottom:3.5rem;break-inside:avoid-page}
.stage-no{font-family:"Hahmlet",serif;font-size:.8rem;letter-spacing:.14em;
  color:var(--seal);margin:0 0 .4rem}
.stage h2{font-family:"Hahmlet",serif;font-weight:600;font-size:1.5rem;line-height:1.35;
  margin:0 0 .3rem;letter-spacing:-.01em;text-wrap:balance}
.stage .sub{margin:0 0 1.5rem;color:var(--ink-dim);font-size:.9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.stage h3{font-family:"Hahmlet",serif;font-weight:600;font-size:1.08rem;
  margin:2rem 0 .6rem;color:var(--ink)}
.stage p{margin:0 0 1.1rem}
.stage ul{margin:0 0 1.1rem;padding-left:1.2rem}
.stage li{margin-bottom:.4rem}
.stage strong{font-weight:400;color:var(--seal)}
td.mark{padding:.35rem;border:0;background:transparent}
td.mark img{width:3.1rem;height:3.1rem;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 3px 10px rgba(90,60,40,.2))}
td.mark .mark-emoji{font-size:1.9rem;line-height:1}
td.gz{background:var(--bg);border-color:transparent;padding:.5rem .2rem}
.gz-hanja{display:block;font-family:"Hahmlet",serif;font-size:1.55rem;line-height:1.15;
  color:var(--fg)}
.gz-ko{display:block;font-size:.75rem;color:var(--fg);opacity:.85;margin-top:.1rem}
.gz-el{display:block;font-size:.6rem;color:var(--fg);opacity:.55;margin-top:.05rem}
td.tg{font-size:.76rem;color:var(--ink-mid);padding:.32rem .2rem;background:transparent;
  border-color:transparent}
td.hidden-stems{font-family:"Hahmlet",serif;font-size:.85rem;letter-spacing:.12em;
  color:var(--ink-mid);padding:.3rem .2rem}
td.stage{font-size:.78rem;color:var(--ink-mid);padding:.3rem .2rem}
td.sinsal{padding:.3rem .2rem;line-height:1.4}
td.sinsal span{display:block;font-size:.68rem;color:var(--seal)}
td.sinsal i{color:var(--ink-dim);font-style:normal;font-size:.7rem}
  section.stage{break-inside:auto;margin-bottom:3.2rem}
  .stage h2{break-after:avoid}
  .stage h3{break-after:avoid;margin-top:2em}

/* ══════════════ 스크롤 리듬 ══════════════
 *
 * 같은 크기·같은 흰 판이 계속 쌓이면 스크롤이 단조로워 이탈한다.
 * 세 가지로 흐름을 만든다 —
 *   · 중요한 구획은 배경을 바꿔 눈에 걸리게 한다
 *   · 구획 사이 여백에 차이를 둔다 (숨 돌릴 자리)
 *   · 도장(神) 문양을 큰 구획 앞에 두어 장이 바뀌는 느낌을 준다
 */

/* 리드·라인업·미리보기는 무겁게 — 나머지는 가볍게 */
.pane--hail,
#lineup,
#inside-pane {
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-lift);
}

/* 큰 구획 앞에 숨 돌릴 자리 */
#inside-pane,
#lineup { margin-top: var(--s-5); }

/* 구획 사이 인장 — 종이책의 장 구분 같은 노릇 */
.rule {
  display: block;
  margin: var(--s-5) auto;
  width: 100%;
  max-width: 12rem;
  border: 0;
  text-align: center;
  overflow: visible;
}
.rule::after {
  content: '神';
  display: inline-block;
  padding: 0 .9rem;
  background: var(--ground);
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--seal);
  transform: translateY(-.72em);
}
.rule { border-top: 1px solid var(--line); height: 0; }

/* 훑을 때 걸리도록 본문 안의 강조를 또렷하게 */
.pane-lead { font-size: var(--t-md); }
.pane-lead b, .hail-body b { border-bottom: 1px solid var(--seal-soft); }

/* 목록·표는 조금 성기게 — 리포트를 성기게 바꾼 것과 같은 이유 */
.whys li { padding: var(--s-3) 0; }
.stages li { padding: var(--s-2) 0; }
.spec > div { padding: .75rem 0; }
.nots { gap: var(--s-3); }

/* ── 고정 결제 바 ── */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px -18px rgba(60, 45, 30, .4);
  backdrop-filter: blur(10px);
}
.buybar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: 38rem;
  margin: 0 auto;
}
.buybar-txt { display: grid; gap: .05rem; min-width: 0; }
.buybar-txt b {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buybar-txt span {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--seal);
}
.buybar .btn { margin: 0; white-space: nowrap; padding: .65rem 1.2rem; }

/* 바에 가려지지 않게 아래를 비운다 */
.page-premium { padding-bottom: 6.5rem; }

/* ══════════════ 무료 페이지 첫 화면 ══════════════
 *
 * 폼이 바로 나오면 계산기처럼 보인다. 눈이 한 번 멈출 자리를 만든다.
 * 도장을 키우고, 폼을 판으로 감싸 '입력하는 자리'임을 분명히 한다.
 */
.top .seal {
  width: 4.2rem; height: 4.2rem;
  margin-bottom: var(--s-3);
  font-size: 1.9rem;
  box-shadow: 0 0 0 1px var(--seal-soft), 0 14px 34px -18px var(--seal);
}
.brand .seal { box-shadow: none; }

#form {
  padding: var(--s-4) 1.3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow-lift);
}
.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--ink-mid);
}
#form .btn { margin-top: var(--s-3); }
.privacy { margin: var(--s-2) 0 0; font-size: var(--t-xs); line-height: 1.7; }

/* 훅은 폼 아래로 — 먼저 입력하게 두고, 왜 여기서 보는지는 그다음 */
.hooks { margin-top: var(--s-3); }
.hooks li { padding: .8rem 1rem; }
.hooks b { font-size: var(--t-sm); }
.hooks span { font-size: var(--t-xs); }

/* 결과가 나오면 아래 구획들이 이어진다 — 사이를 벌려 각각이 서게 */
#result > * + * { margin-top: var(--s-4); }
.board-out, .seats, .hooks-out { scroll-margin-top: 1rem; }
.board-title, .seats-title, .hooks-title { font-size: var(--t-lg); }
.board-title::before, .seats-title::before, .hooks-title::before {
  content: '';
  display: block;
  width: 1.8rem; height: 2px;
  margin-bottom: var(--s-2);
  background: var(--seal);
  border-radius: 2px;
}

/* ── 결과는 폼보다 넓게 ──
 * 무료 페이지는 폼 한 장이라 30rem 이 맞지만, 명식표는 그 안에서 잘린다.
 * 결과가 나온 뒤에는 자리를 넓혀 표가 온전히 보이게 한다.
 */
@media (min-width: 34rem) {
  #result { width: min(38rem, 100%); margin-left: calc((30rem - min(38rem, 100%)) / 2); }
}
.board-out table.chart { min-width: 0; }
.board-out .chart-wrap,
.inside-sheet { -webkit-overflow-scrolling: touch; }

/* 표가 좁은 화면에서 잘릴 때 옆으로 밀 수 있음을 알린다 */
.board-out { position: relative; }
.board-out::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 1.6rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--ground));
  opacity: .9;
}
@media (min-width: 34rem) { .board-out::after { display: none; } }

/* ── 첫 장 맛보기 ──
 * 완결된 발췌는 "읽었다"로 끝난다. 문장 한복판에서 흐려져야 이어 읽고 싶어진다.
 * 글을 실제로 잘라 두고(DOM 에 없는 것은 훔쳐 갈 수도 없다) 아래를 덮는다.
 */
.teaser {
  position: relative;
  padding: var(--s-4) 1.2rem 0;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: .7rem;
  overflow: hidden;
}
.teaser-head {
  margin: 0 0 var(--s-2);
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink);
}
.teaser-sum {
  margin: 0 0 var(--s-3);
  padding: .7rem .9rem;
  background: var(--seal-soft);
  border-radius: .5rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.75;
}
.teaser-body {
  max-height: 17rem;
  overflow: hidden;
}
.teaser-body p {
  margin: 0 0 1em;
  font-size: var(--t-sm);
  line-height: 2;
  color: var(--ink-mid);
}
.teaser-veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4rem 1.2rem 1.4rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ground) 0%, transparent),
    var(--ground) 62%
  );
  text-align: center;
}
.teaser-more {
  margin: 0;
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--ink-dim);
}
.teaser-more b { font-weight: 600; color: var(--seal); }

/* ══════════════ 어두운 띠 ══════════════
 *
 * 흰 판만 세로로 쌓이면 스크롤이 단조로워 이탈한다.
 * 중요한 자리(히어로·라인업)를 화면 끝까지 어둡게 깔아 장이 바뀌는 느낌을 준다.
 *
 * 가운데 정렬된 좁은 컨테이너 안에서 화면 폭까지 넓히는 방법 —
 * 좌우로 음수 여백을 주고 같은 양을 안쪽 여백으로 되돌린다.
 */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background: var(--dark);
  color: var(--dark-ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.band h1,
.band h2,
.band .pane-title { color: var(--dark-ink); }
.band .pane-title::before { background: var(--dark-seal); }
.band .tagline,
.band p { color: var(--dark-mid); }
.band .eyebrow { color: var(--dark-seal); }
.band b { color: var(--dark-ink); }
.band small,
.band .foot-dim { color: var(--dark-dim); }

/* 어두운 띠 안의 판은 배경을 한 단 밝게 */
.band .prod,
.band .inside-sheet {
  background: var(--dark-2);
  border-color: rgba(255, 255, 255, .1);
}
.band .prod-head b { color: var(--dark-ink); }
.band .prod-blurb { color: var(--dark-mid); }
.band .prod-meta { color: var(--dark-dim); }
.band .prod:target { border-color: var(--dark-seal); background: #2C221B; }
.band .prod-price { color: var(--dark-seal); }
.band .prod-split { color: var(--dark-dim); }
.band .prod-hero {
  background: linear-gradient(158deg, #2C221B 0%, #201A14 100%);
  border-color: var(--dark-seal);
}
.band .prod-hero-name,
.band .prod-hero-price { color: var(--dark-ink); }
.band .prod-hero-tag,
.band .prod-hero-anchor b { color: var(--dark-seal); }
.band .prod-hero-blurb,
.band .prod-hero-anchor { color: var(--dark-mid); }

/* ══════════════ 히어로 ══════════════
 *
 * 예전에는 도장 하나에 제목뿐이라 눈이 멈출 자리가 없었다.
 * 60갑자 물상 그림 60장을 만들어 두고 파는 화면에 한 장도 안 쓰고 있었다.
 * 방문자의 일주 그림을 배경으로 깔고 제목을 얹는다 — 자기 것이라 눈이 붙는다.
 */
.hero {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: var(--s-6) calc(50vw - 50%) var(--s-5);
  background: var(--dark);
  color: var(--dark-ink);
  overflow: hidden;
  text-align: center;
}
/* 물상 그림은 크게 깔되 글을 방해하지 않게 눌러 둔다 */
.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center 22%;
  background-size: cover;
  opacity: .3;
  filter: saturate(.85);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(25, 20, 16, .45) 0%,
    rgba(25, 20, 16, .82) 55%,
    var(--dark) 100%);
}
.hero-in { position: relative; }
.hero .seal {
  background: rgba(255, 255, 255, .08);
  color: var(--dark-seal);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.hero h1 { color: var(--dark-ink); }
.hero .tagline { color: var(--dark-mid); }
.hero .eyebrow { color: var(--dark-seal); }
.hero .carried { color: var(--dark-seal); }
.hero .brand-name { color: var(--dark-ink); }
.hero .brand:hover .brand-name { color: var(--dark-seal); }

/* 그림이 있으면 그 갑자를 알려 준다 — 근거가 보이면 신뢰가 붙는다 */
.hero-mark {
  margin: var(--s-3) 0 0;
  font-family: "Hahmlet", serif;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  color: var(--dark-dim);
}

/* ── 커진 제목 다듬기 ──
 * 제목을 1.22 → 1.55rem 으로 올리면 좁은 화면에서 줄이 어색하게 끊긴다.
 * 줄바꿈을 고르게 하고, 아주 좁은 화면에서는 한 단 내린다.
 */
.pane-title,
.board-title, .seats-title, .hooks-title {
  text-wrap: balance;
  letter-spacing: -.02em;
}
@media (max-width: 24rem) {
  :root { --t-lg: 1.32rem; --t-2xl: 2.5rem; }
}

/* 어두운 띠가 이어질 때 사이 여백이 흰색으로 벌어지지 않게 */
.band + .band { margin-top: 0; }
.hero + * { margin-top: var(--s-4); }

/* 어두운 띠 안에서는 인장 구분선이 안 보인다 — 띠 자체가 구분이므로 뺀다 */
.band .rule { display: none; }

/* 히어로 안의 브랜드는 위쪽에 붙여 둔다 */
.hero .brand { margin-bottom: var(--s-4); }

/* 어두운 띠 위아래로 숨 돌릴 자리 */
#lineup { padding-block: var(--s-5); }

/* ── 숫자 블록 ──
 * 목록으로 늘어놓으면 글에 묻혀 안 읽힌다.
 * 숫자를 크게 세우면 훑는 눈이 거기서 멈춘다.
 */
.stats {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.stats li { display: grid; gap: .1rem; }
.stats b {
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  color: var(--seal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.stats span { font-size: var(--t-xs); color: var(--ink-dim); }
.band .stats { border-color: rgba(255, 255, 255, .12); }
.band .stats b { color: var(--dark-seal); }
.band .stats span { color: var(--dark-dim); }

@media (max-width: 24rem) {
  .stats b { font-size: var(--t-lg); }
}

/* ── 목록에 리듬 ──
 * 6항목·13줄이 다 똑같이 생기면 눈이 미끄러져 아무것도 안 읽힌다.
 * 번호와 색으로 셀 수 있게 만든다. 새 색은 만들지 않고 오행 다섯 색을 쓴다.
 */
.whys { counter-reset: why; }
.whys li { counter-increment: why; position: relative; padding-left: 2.6rem; }
.whys li::before {
  content: counter(why);
  position: absolute;
  left: 0;
  top: var(--s-3);
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--seal-soft);
  color: var(--seal);
  font-family: "Hahmlet", serif;
  font-size: var(--t-xs);
}
.whys li:first-child::before { top: 0; }

/* 장 목록 — 번호 자리에 오행 색을 입힌다 */
.stages li::before { transition: none; }
.ch-mok::before  { color: #3E6B4A !important; }
.ch-hwa::before  { color: #A2503C !important; }
.ch-to::before   { color: #8A6A2F !important; }
.ch-geum::before { color: #5B6B7E !important; }
.ch-su::before   { color: #3A5578 !important; }
.stages li {
  border-left: 2px solid transparent;
  padding-left: .7rem;
  margin-left: -.7rem;
  transition: border-color .15s;
}
.ch-mok  { border-left-color: #3E6B4A33; }
.ch-hwa  { border-left-color: #A2503C33; }
.ch-to   { border-left-color: #8A6A2F33; }
.ch-geum { border-left-color: #5B6B7E33; }
.ch-su   { border-left-color: #3A557833; }

/* ── 훅 카드에 아이콘 ──
 * 세 카드가 글자만 있어 눈이 지나쳐 버렸다. 왼쪽에 표식을 두어 시선을 잡는다.
 */
.hooks li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .1rem .7rem;
  align-items: center;
}
.hooks i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--seal-soft);
  font-style: normal;
  font-size: var(--t-md);
}
.hooks b { align-self: end; }
.hooks span { align-self: start; }

/* ── 크로스셀 카드에 표식 ── */
.hook { position: relative; padding-left: 1.05rem; }
.hook::before {
  content: '';
  position: absolute;
  left: 0; top: .95rem; bottom: .95rem;
  width: 3px;
  border-radius: 3px;
  background: var(--seal);
}

/* ── 하지 않는 것 ── */
.nots li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--t-sm);
}
.nots li::before {
  content: '✕';
  position: absolute;
  left: 0; top: .1rem;
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--seal-soft);
  color: var(--seal);
  font-size: .7rem;
}
.nots b {
  display: block;
  margin-bottom: .15rem;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink);
}

/* ── 상품 카드에 표식 ── */
.prod { display: grid; grid-template-columns: 2.5rem 1fr; gap: .1rem .8rem; }
.prod-mark {
  grid-row: 1 / 4;
  align-self: start;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: .55rem;
  background: var(--seal-soft);
  font-style: normal;
  font-size: var(--t-md);
}
.band .prod-mark { background: rgba(255, 255, 255, .08); }

/* ── 접이식 항목 ──
 * 여섯 항목에 세 줄짜리 설명이 붙어 765자 벽이 됐다.
 * 요점만 보이고 궁금한 것만 펼치게 한다 — 훑는 사람이 지나갈 수 있어야 한다.
 */
.whys details > summary {
  cursor: pointer;
  list-style: none;
  font-family: "Hahmlet", serif;
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink);
}
.whys details > summary::-webkit-details-marker { display: none; }
.whys details > summary::after {
  content: ' ＋';
  color: var(--ink-dim);
  font-weight: 400;
  font-size: var(--t-xs);
}
.whys details[open] > summary::after { content: ' －'; }
.whys details > summary:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.whys details p {
  margin: .5rem 0 0;
  font-size: var(--t-sm);
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ══════════════ 모바일 ══════════════
 *
 * 좁은 화면에서 실제로 깨지던 것들을 잡는다.
 */

/**
 * 전면 배치의 100vw 는 세로 스크롤바 폭을 포함한다.
 * 그래서 스크롤바가 보이는 환경에서는 페이지가 가로로 몇 픽셀 삐져나가고,
 * 손가락으로 옆으로 밀리는 페이지가 된다.
 * html 을 잘라 두면 그 몇 픽셀이 스크롤을 만들지 않는다.
 */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* 결제 바 — 좁은 화면에서 이름·값·버튼이 한 줄에 안 들어간다 */
@media (max-width: 26rem) {
  .buybar { padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); }
  .buybar-in { gap: .7rem; }
  .buybar-txt b { display: none; }          /* 이름을 접고 값만 남긴다 */
  .buybar-txt span { font-size: var(--t-md); }
  .buybar .btn { padding: .6rem .9rem; font-size: var(--t-sm); }
}

/* 손가락이 닿는 것은 44px 이상이어야 한다 */
.btn, .prod, .hook-go, .foot-link,
.primer > summary, .whys summary { min-height: 2.75rem; }
.whys summary, .primer > summary { display: flex; align-items: center; }
.check { min-height: 2.75rem; align-items: center; }
.check input { width: 1.4rem; height: 1.4rem; }

/* 넓은 화면에서 두 단으로 — 좁은 화면은 그대로 한 단 */
@media (min-width: 46rem) {
  .wrap--wide { max-width: 44rem; }
  .stats { gap: var(--s-3); }
}

/* 아주 좁은 화면(320px 언저리)에서 여백을 줄여 글이 눌리지 않게 */
@media (max-width: 22rem) {
  body { padding-inline: .9rem; }
  .pane { padding: var(--s-3) 1rem; }
  .prod { grid-template-columns: 2.1rem 1fr; gap: .1rem .6rem; }
  .prod-mark { width: 2.1rem; height: 2.1rem; }
  .stats { grid-template-columns: 1fr; gap: var(--s-2); text-align: left; }
  .stats li { display: flex; align-items: baseline; gap: .5rem; }
}

/* 표가 넘칠 때 옆으로 밀 수 있음을 알린다 */
.chart-wrap, .viz--annual { scrollbar-width: thin; }

/* 그림이 좁은 화면에서 넘치지 않게 */
.viz--wheel { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
@media (max-width: 24rem) {
  .viz--wheel { grid-template-columns: 1fr; justify-items: center; }
  .viz--wheel svg { width: 7rem; height: 7rem; }
  .inside-grid { grid-template-columns: 1fr; }
}

/* ── 양력·음력 고르기 ──
 * 안 물으면 음력을 쓰는 분에게 조용히 다른 사주가 나간다.
 * 두 칸짜리 스위치로 두어 고르는 데 품이 안 들게 한다.
 */
.cal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin-bottom: var(--s-3);
  padding: .25rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.cal label { position: relative; }
.cal input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.cal span {
  display: grid;
  place-items: center;
  min-height: 2.4rem;
  border-radius: .45rem;
  font-family: "Hahmlet", serif;
  font-size: var(--t-sm);
  color: var(--ink-dim);
  transition: background .15s, color .15s;
}
.cal input:checked + span {
  background: var(--panel);
  color: var(--seal);
  box-shadow: var(--shadow);
}
.cal input:focus-visible + span { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ── 시각을 안 넣었을 때 알림 ──
 * 자기 사주를 아는 사람이 오행 개수가 안 맞는 걸 보면 계산이 틀린 줄 안다.
 * 실제로 그런 지적을 받았다. 왜 다른지 그 자리에서 밝힌다.
 */
.board-warn {
  margin: 0 0 var(--s-3);
  padding: .75rem .9rem;
  background: var(--seal-soft);
  border-radius: .5rem;
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--ink-mid);
}
.board-warn b { font-weight: 400; color: var(--seal); }
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--seal);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* 선택 항목임을 알리는 꼬리표 */
.field-label em {
  font-style: normal;
  margin-left: .4rem;
  font-size: var(--t-xs);
  color: var(--seal);
}
/* 시진은 문구가 길어 가운데 정렬이 어색하다 */
#h { width: 100%; text-align: left; padding-left: .9rem; margin-bottom: var(--s-3); }
.dob { margin-bottom: var(--s-3); }

/* ── 세는 방식 안내 ──
 * 지장간을 세느냐 마느냐로 오행 개수가 달라진다.
 * 어느 방식인지 안 밝히면 다른 곳과 숫자가 달라 계산이 틀린 줄 안다 —
 * 실제로 그 지적을 받았다.
 */
.el-note--how {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ─────────────────────────────────────────────────────────────
   메인 홈페이지
   ───────────────────────────────────────────────────────────── */

.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.cta {
  display: inline-block; padding: .85rem 1.6rem; border-radius: .6rem;
  font-family: "Hahmlet", serif; font-size: 1rem; text-decoration: none;
  border: 1px solid var(--seal); transition: background .15s, color .15s;
}
.cta--main { background: var(--seal); color: #FFF8F4; }
.cta--main:hover { background: #8d4433; }
.cta--ghost { background: transparent; color: var(--seal); }
.cta--ghost:hover { background: var(--seal-soft); }

/* 왜 다른가 — 셋 */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.why b {
  display: block; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 1.15rem; color: var(--ink); margin-bottom: .45rem;
}
.why p { margin: 0; color: var(--ink-mid); line-height: 1.9; }

/* 종합 — 가장 크게 */
/** 으뜸 상품도 같은 결로 — 다만 더 크게 */
.hero-prod {
  border-radius: 1.1rem; padding: 2.8rem 1.8rem 2.4rem; text-align: center;
  margin-bottom: 2.6rem; color: #fff;
  background: linear-gradient(160deg, var(--tint-a), var(--tint-b));
  box-shadow: var(--shadow-lift);
}
.hero-prod figure {
  width: 128px; height: 128px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-prod img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}
.hero-prod-tag {
  margin: 0 0 .5rem; font-size: .85rem; letter-spacing: .04em; color: rgba(255,255,255,.75);
}
.hero-prod-name {
  margin: 0 0 .4rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 1.9rem; color: #fff; letter-spacing: -.01em;
}
.hero-prod-blurb { margin: 0 0 .9rem; color: rgba(255,255,255,.85); line-height: 1.8; }
.hero-prod-meta { margin: 0 0 1.2rem; font-size: .88rem; color: rgba(255,255,255,.65); }
.hero-prod-price {
  margin: 0 0 .35rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 2.2rem; color: #fff;
}
.hero-prod-anchor { margin: 0 0 1.6rem; font-size: .88rem; color: rgba(255,255,255,.7); }
.hero-prod-anchor b { color: #fff; font-weight: 400; }
/* 어두운 판 위에서는 테두리를 밝게 뒤집는다 */
.hero-prod .cta--main {
  background: #fff; color: var(--tint-a); border-color: #fff;
}
.hero-prod .cta--main:hover { background: rgba(255,255,255,.88); }

/**
 * **이름 앞에 p 를 붙인 까닭.**
 * `.card` 는 무료 운세 페이지가 이미 쓰고 있다 — min-height 30rem 에
 * grid-template-rows 까지 잡아 둔 큰 카드다. 같은 이름을 쓰자마자 상품 카드가
 * 세로로 늘어졌다. 명시도로 싸우기보다 이름을 안 겹치게 두는 편이 안전하다.
 */

/**
 * 값이 같아도 넣어야 하는 것이 다르다.
 * 묶음 머리에 무엇이 필요한지 적어 둬야, 궁합을 고르고 나서야
 * 상대 생일이 필요한 걸 아는 일이 없다.
 */
.grp { margin-bottom: 2.2rem; }
.grp-head {
  margin: 0 0 .9rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.grp-head span { font-family: inherit; font-weight: 400; font-size: .82rem; color: var(--ink-dim); }

.pcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .9rem;
}

/**
 * 상품 카드 — 리포트 안의 삽화 카드와 같은 모양.
 *
 * 그림도 빛깔도 리포트가 쓰는 것을 그대로 쓴다. 카드만 봐도 리포트가 어떻게
 * 생겼는지 안다. 이 바닥은 죄다 어두운 바탕에 네온인데, 사이트는 네온이고
 * 결과물은 평범한 웹 텍스트라 그 연결이 없다. 우리는 잇는다.
 */
/**
 * 카드 높이를 맞춘다.
 * 설명이 한 줄인 것과 두 줄인 것이 섞이면 값 줄이 제각각 높이에 떠서
 * 격자가 어긋나 보인다. 설명 칸을 1fr 로 늘려 값 줄을 바닥에 붙인다.
 */
.pcard { border-radius: .9rem; overflow: hidden; display: grid; }
.pcard a {
  display: grid; grid-template-rows: auto auto 1fr auto; height: 100%;
  text-decoration: none; color: #fff;
  background: linear-gradient(160deg, var(--tint-a), var(--tint-b));
  padding: 1.4rem 1.2rem 1.1rem;
  transition: transform .16s, box-shadow .16s;
}
.pcard a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/** 그림 자리는 늘 같은 크기다 — 흔들리면 카드 높이가 제각각으로 보인다 */
.pcard figure {
  width: 84px; height: 84px; margin: 0 auto .7rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pcard img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.pcard-name {
  font-family: "Hahmlet", serif; font-weight: 600; font-size: 1.12rem;
  color: #fff; text-align: center; margin-bottom: .35rem;
}
.pcard-blurb {
  margin: 0; font-size: .84rem; line-height: 1.65;
  color: rgba(255,255,255,.82); text-align: center;
}
.pcard-foot {
  margin: .9rem 0 0; padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .76rem; color: rgba(255,255,255,.7);
}
.pcard-foot span {
  font-family: "Hahmlet", serif; font-weight: 600; font-size: 1rem; color: #fff;
}

/* 읽어 볼 수 있는 실제 리포트 */
.lede { margin: 0 0 1.4rem; color: var(--ink-mid); line-height: 1.9; }
.samples { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.samples a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .7rem;
  background: var(--panel); text-decoration: none; color: inherit;
}
.samples a:hover { border-color: var(--seal); }
.samples b { font-family: "Hahmlet", serif; font-weight: 600; color: var(--ink); }
.samples span { font-size: .82rem; color: var(--ink-dim); white-space: nowrap; }

/* 자주 묻는 것 */
.qa { margin: 0; }
.qa dt {
  font-family: "Hahmlet", serif; font-weight: 600; font-size: 1.02rem;
  color: var(--ink); margin-top: 1.6rem;
}
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: .5rem 0 0; color: var(--ink-mid); line-height: 1.9; }
.qa b { font-weight: 400; color: var(--seal); }

/* 사업자 정보 — 통신판매업자 표시 의무 */
.biz { margin: 1.6rem 0 1rem; display: grid; gap: .3rem; font-size: .8rem; }
.biz div { display: flex; gap: .6rem; }
.biz dt { color: var(--ink-dim); min-width: 7.5rem; }
.biz dd { margin: 0; color: var(--ink-mid); }
.biz .todo { font-style: normal; color: #B0472F; }

@media (max-width: 46rem) {
  .pcards { grid-template-columns: 1fr; }
  .hero-prod { padding: 1.8rem 1.2rem; }
  .hero-prod-price { font-size: 1.8rem; }
  .samples a { flex-direction: column; gap: .25rem; }
}

/* ── 모든 페이지가 함께 쓰는 머리 ── */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
/**
 * 손가락으로 누를 자리는 44px 은 되어야 한다.
 * 글자 높이만 잡으면 27px 이라 폰에서 자꾸 빗나간다 — 안쪽 여백으로 키운다.
 * 눈에 보이는 크기는 그대로고 누를 수 있는 넓이만 커진다.
 */
.nav-links { display: flex; gap: .4rem; align-items: center; }
.nav-links a {
  font-size: .88rem; color: var(--ink-mid); text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: .8rem;
}
.nav-links a:hover { color: var(--seal); }
.nav .brand { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 상품 상세 ── */
.phero { text-align: center; padding: 3.5rem 0 3rem; }
.phero-tag { margin: 0 0 .6rem; font-size: .85rem; letter-spacing: .04em; color: var(--seal); }
.phero h1 {
  margin: 0 0 .6rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 2.4rem; line-height: 1.3; color: var(--ink); letter-spacing: -.02em;
}
.phero-blurb { margin: 0 0 1rem; color: var(--ink-mid); line-height: 1.8; font-size: 1.05rem; }
.phero-meta { margin: 0 0 1.4rem; font-size: .86rem; color: var(--ink-dim); }
.phero-price {
  margin: 0 0 1.6rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 2.2rem; color: var(--ink);
}

/**
 * 목차를 그대로 펼친다.
 * 값을 설명하는 것은 이것 하나다 — 경쟁사는 "8섹션"이라고만 적는다.
 */
.toc-prod { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: none; }
.toc-prod li {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .8rem; align-items: baseline;
  padding: .8rem 1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: .6rem;
}
.toc-prod-no {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--seal);
  text-align: right; font-variant-numeric: tabular-nums;
}
.toc-prod-body b {
  display: block; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 1rem; color: var(--ink); line-height: 1.5;
}
.toc-prod-body i {
  font-style: normal; font-size: .82rem; color: var(--ink-dim); line-height: 1.6;
}
.pane-note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--ink-dim); }
.soon {
  margin: 0; padding: 1.1rem 1.3rem; border-radius: .7rem;
  background: var(--seal-soft); color: var(--seal); text-align: center;
  font-family: "Hahmlet", serif;
}

/* 카드가 통째로 눌리게 */
.pcard a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.pcard { transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: var(--seal); transform: translateY(-2px); }

@media (max-width: 46rem) {
  .phero h1 { font-size: 1.9rem; }
  .phero-price { font-size: 1.8rem; }
  .nav-links { gap: .8rem; }
}

/**
 * 꼬리 링크 — 기본 파란 링크 색이 그대로 나오고 있었다.
 * 약관 세 장은 분쟁 났을 때 찾는 자리다. 폰에서 21px 짜리 글자를 겨누게 두면
 * 안 된다 — 안쪽 여백으로 누를 넓이를 44px 까지 키운다.
 */
.foot-link { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.foot-link a {
  color: var(--ink-dim); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .6rem;
}
.foot-link a:hover { color: var(--seal); text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════
   파는 페이지 — 색과 배치를 다시 잡는다
   ═════════════════════════════════════════════════════════════

   고친 것 셋.

   ① 너비. `.wrap` 이 30rem(480px)이라 데스크톱에서도 폰 한 줄이었다.
      무료 운세는 입력 폼이라 좁아도 되지만, 파는 페이지는 상품이 아홉이다.

   ② 상자. 모든 구역이 테두리·그림자 있는 판이라 상자 안에 상자가 겹쳤다.
      글은 바탕 위에 그냥 앉히고, 판은 **정말 카드인 것**에만 남긴다.

   ③ 히어로. 시커먼 판때기가 크림 바탕에서 뚝 떨어져 있었다.
      종이 위에 인주 도장을 찍은 결로 바꾼다 — 리포트의 쪽 테두리와 같은 장식이다.
   ═════════════════════════════════════════════════════════════ */

.page-home, .page-product, .page-legal { --col: 46rem; }

.page-home .wrap,
.page-product .wrap,
.page-legal .wrap { max-width: var(--col); padding-inline: 1.4rem; }

/* 구역은 바탕 위에 그냥 앉는다 — 판을 두르지 않는다 */
.page-home .pane,
.page-product .pane,
.page-legal .pane {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 3.6rem 0; margin: 0;
}

/**
 * 화면 끝까지 채우는 띠가 가로 스크롤을 만들지 않게 한다.
 *
 * `width: 100vw` 는 세로 스크롤바 너비까지 센다. 그래서 스크롤바가 있는 창에서
 * 띠가 좌우로 7~8px 씩 삐져나가고, 그 몇 px 이 가로 스크롤을 만든다.
 * 실제로 재 보니 창 794 · 화면 779 에서 정확히 그만큼 넘쳤다.
 *
 * `clip` 은 `hidden` 과 달리 스크롤 상자를 만들지 않아 안쪽 자리 이동(#menu 로
 * 건너뛰기 같은 것)을 깨지 않는다.
 */
.page-home, .page-product, .page-legal { overflow-x: clip; }

/**
 * 띠 구역만 바탕색을 반 톤 바꿔 리듬을 만든다.
 * 화면 끝까지 채우되 글은 가운데 칸에 머문다.
 *
 * `.band` 는 원래 **어두운 띠**용이라 글자를 밝게 칠한다. 파는 페이지에서는
 * 밝은 종이 위에 얹으므로 그 글자색을 되돌려야 한다 — 안 그러면 제목이
 * 바탕에 묻혀 통째로 안 보인다. 실제로 그렇게 나갔다.
 */
.page-home .band,
.page-product .band {
  margin-inline: calc(50% - 50vw); width: 100vw;
  padding-inline: max(1.4rem, calc(50vw - var(--col) / 2));
  background: var(--band); color: var(--ink);
}
.page-home .band h1, .page-home .band h2, .page-home .band .pane-title,
.page-product .band h1, .page-product .band h2, .page-product .band .pane-title {
  color: var(--ink);
}
.page-home .band .pane-title::before,
.page-product .band .pane-title::before { background: var(--seal); }
.page-home .band .lede, .page-product .band .lede,
.page-home .band .pane-note, .page-product .band .pane-note { color: var(--ink-mid); }

/* 구역 제목 — 왼쪽 짧은 인주선은 그대로 두되 더 크게 */
.page-home .pane-title,
.page-product .pane-title { font-size: 1.75rem; margin-bottom: 1.6rem; }

/* ── 히어로 — 종이 위의 도장 ── */
.page-home .hero,
.page-product .phero {
  position: relative; background: none; color: inherit;
  padding: 5rem 1.2rem 4.5rem; text-align: center;
}
/**
 * 네 모서리의 인주 갈고리 — 리포트 쪽 테두리와 같은 장식이다.
 * 사기 전에 본 것이 사고 나서 받는 것과 같아야 한다.
 */
.page-home .hero::before, .page-home .hero::after,
.page-product .phero::before, .page-product .phero::after {
  content: ""; position: absolute; width: 1.6rem; height: 1.6rem;
  border: 2px solid var(--seal); opacity: .5; border-radius: 2px;
}
.page-home .hero::before, .page-product .phero::before {
  top: 1.4rem; left: .2rem; border-right: 0; border-bottom: 0;
}
.page-home .hero::after, .page-product .phero::after {
  bottom: 1.4rem; right: .2rem; border-left: 0; border-top: 0;
}
.page-home .hero h1, .page-product .phero h1 {
  font-size: clamp(2.1rem, 6vw, 3.1rem); line-height: 1.28;
  color: var(--ink); letter-spacing: -.03em; margin: 0 0 .9rem;
}
.page-home .hero .tagline {
  color: var(--ink-mid); font-size: 1.02rem; line-height: 1.85;
  max-width: 30rem; margin-inline: auto;
}

/* ── 약관 — 읽히는 것보다 찾아지는 것이 중요하다 ── */
.legal { max-width: 40rem; }
.legal-h {
  margin: 2.4rem 0 .8rem; font-family: "Hahmlet", serif; font-weight: 600;
  font-size: 1.1rem; color: var(--ink);
}
.legal-h:first-child { margin-top: 0; }
.legal-p { margin: 0 0 .9rem; line-height: 1.95; color: var(--ink-mid); }
.legal-p b { font-weight: 400; color: var(--seal); }
.legal-ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.legal-ol li { margin-bottom: .5rem; line-height: 1.9; color: var(--ink-mid); }
.legal-ol b { font-weight: 400; color: var(--seal); }