/* ──────────────────────────────────────────────────────────────────
   명리결 storefront — **PHASE 2: 첫 화면 아래를 같은 세계로.**

   `sf.css` · `sf-motion.css` · `sf-hero.css` 뒤에 실린다. 여기 있는
   것은 전부 **겉모습**이다 — 구조도 차례도 글도 손대지 않으므로,
   이 파일 하나만 빼면 예전 화면으로 돌아간다.

   HERO 는 **잠갔다.** 이 파일은 `.hero` 안쪽을 건드리지 않는다.
   딱 하나, 첫 화면에서 아래로 넘어가는 자리(`.veil`)만 손댄다.

   화려하게 만드는 것이 목적이 아니다. 시선의 차례를 지키는 것이
   목적이다 —

     1 내용   2 CTA   3 캐릭터·핵심   4 장식

   그래서 장식은 전부 뒤로 깔고, 글자는 언제나 그 위에 온다.
   장식 때문에 글이 안 읽히면 실패다.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* 섹션마다 공기를 조금씩 바꾼다. 같은 밤이되 같은 방은 아니다(§23) */
  --air-free:  #140f28;      /* 무료 결과 — 어두운 보라 */
  --air-lock:  #0a0716;      /* 잠긴 곳 — 더 검은 보라 */
  --air-topic: #181129;      /* 아홉 장 — 조금 따뜻한 보라 */
  --air-prod:  #0b0f26;      /* 상품 — 짙은 남색 + 금 */

  --edge:      #6b55a84d;    /* 보랏빛 테 */
  --edge-gold: #c9a22740;    /* 금빛 테 */
  --ink-body:  #e6e0f2;      /* 본문 — 아이보리에 가까운 밝은 회색 */
}

/* ═══════════════════════════════════ 0. 아래까지 이어지는 밤
   섹션마다 바탕을 **아주 불투명하게** 깔면 첫 화면과 다른 사이트가
   된다. 그래서 바탕은 살짝 비치게 두고, 그 뒤로 별을 고정해 둔다.
   스크롤을 내려도 같은 하늘 아래라는 느낌이 끊기지 않는다. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 11% 12%, #fff6dd 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 73% 7%,  #e6d9ff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 38% 31%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 89% 27%, #fff6dd 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 21% 52%, #fff6dd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 61%, #e6d9ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 78%,  #ffe9a8 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 81% 86%, #fff6dd 50%, transparent 51%);
}

section { position: relative; padding: 30px 0 32px; }
section > .wrap { position: relative; z-index: 1; }

/* 섹션 머리의 금실 한 줄. 양 끝으로 사라진다 — 상자처럼 닫히지 않게. */
section::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9a22759 32%,
                              #e8c87a7a 50%, #c9a22759 68%, transparent);
}
#teaserSec::after { content: none; }

#free    { background: linear-gradient(180deg, #140f28e8, #17102ef2); }
#locked  { background: linear-gradient(180deg, #0a0716f2, #090614fa); }
#value   { background: linear-gradient(180deg, #181129ef, #140e26f5); }
#reviews { background: linear-gradient(180deg, #110c22e8, #0f0b1eef); }
#faq     { background: linear-gradient(180deg, #0e0a1eef, #0c0918f7); }

/* 각 섹션 안쪽에 아주 옅은 별자리. 카드 **뒤**에만 보인다. */
section#free::before, section#locked::before,
section#value::before, section#faq::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 0; opacity: .5;
  background-image:
    radial-gradient(1.3px 1.3px at 14% 9%,  #cdb8ff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 29% 17%, #f0e6ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 47% 6%,  #ffe9a8 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 86% 21%, #cdb8ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 69% 88%, #f0e6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 19% 71%, #ffe9a8 50%, transparent 51%);
}

/* 섹션 머리표 — 작은 금빛 마름모를 앞에 둔다 */
.sec-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 2.6px; color: var(--gold-hi);
  margin-bottom: 8px;
}
.sec-label::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff3cf, var(--gold-mid));
  box-shadow: 0 0 9px #c9a22766;
}
h2 { color: var(--ivory); }
h2 small { color: #a99ec6; }

/* ═══════════════════════════════════ 1. 첫 화면에서 아래로
   갑자기 다른 웹페이지로 떨어지면 안 된다. 운무가 아래로 흐르고,
   금실 한 줄과 작은 별이 그 뒤를 받친다 — 「사주 세계 안으로 들어간다」.

   HERO 안에 둔다. 그래야 결과가 열려 HERO 가 접힐 때 **같이 접힌다.** */
.veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.veil::before {                       /* 아래로 가라앉는 운무 */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -18px;
  height: 78px;
  background: radial-gradient(58% 100% at 50% 100%, #6c54a83d 0%,
                              transparent 72%);
  filter: blur(12px);
}
.veil-cloud {
  position: absolute; left: 0; right: 0; bottom: 8px;
  width: 100%; height: 40px; display: block; opacity: .55;
}
.veil-thread {                        /* 금실 — 가운데만 밝다 */
  position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a22766 30%,
                              #f0cf5e99 50%, #c9a22766 70%, transparent);
}
.veil-thread::after {                 /* 실 한가운데의 작은 별 */
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 5px; height: 5px; margin-left: -2.5px; transform: rotate(45deg);
  background: #fff3cf; box-shadow: 0 0 10px #f0cf5eaa;
}

/* ═══════════════════════════════════ 2. 분석 화면 — 세계 안으로
   입력과 결과 사이의 문이다. 여기가 맨 검은 로딩 화면이면 세계가 끊긴다. */
.overlay {
  background:
    radial-gradient(90% 60% at 50% 12%, #2b1c5266 0%, transparent 66%),
    linear-gradient(180deg, #0b0818, #070512);
}
.overlay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 16% 18%, #fff6dd 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 78% 13%, #e6d9ff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 44% 28%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 72%, #fff6dd 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 12% 81%, #cdb8ff 50%, transparent 51%);
}
.spinner {
  border-color: #33265c; border-top-color: var(--gold-hi);
  box-shadow: 0 0 24px -4px #c9a22766, inset 0 0 18px -6px #c9a22744;
}
.analysis h3 { color: var(--ivory); }
.steps li { border-bottom: 1px solid #ffffff0d; }
.steps li.done .s-val { color: var(--gold-hi); }

/* ═══════════════════════════════════ 3. 무료 결과 머리
   「내 걸 진짜 분석했네」 — 이름은 이미 제목에 있다(서버가 넣는다).
   여기서 더하는 것은 **문양 · 끝났다는 표시 · 빛나는 금** 뿐이다.
   새로운 사실도 예언도 만들지 않는다. */
.intro { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.intro-seal {
  flex: 0 0 auto; width: 40px; height: 40px; opacity: .85;
  pointer-events: none; filter: drop-shadow(0 0 12px #c9a22766);
}
.intro-done {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px;
  color: #efe3bb; padding: 4px 11px; border-radius: 999px;
  border: 1px solid #c9a22759; background: #c9a2271a;
}
.intro-done::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 8px #f0cf5e;
}

/* 빛나는 금 — 제목과 내용 사이를 가른다 */
.rule {
  position: relative; height: 1px; margin: 14px 0 16px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9a22766 24%,
                              #c9a22766 76%, transparent);
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: -3.5px;
  width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff6d8, var(--gold-mid));
  box-shadow: 0 0 14px #c9a22788;
}

/* ═══════════════════════════════════ 4. 명식 패널 — 천문 기록판
   여기는 **근거**다. 고객에게 하는 설명보다 튀면 안 된다. 그래서
   금선은 얇게, 빛은 거의 없이, 글자만 또렷하게 둔다. */
.card.chart {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #16102ee6 0%, #100b23f2 100%);
  border: 1px solid var(--edge);
  border-radius: 16px; padding: 16px 15px 15px;
  box-shadow: 0 14px 30px -20px #000000cc;
  isolation: isolate;
}
.card.chart::before {                 /* 옅은 별자리 결 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: -1; opacity: .5;
  background-image:
    radial-gradient(1.2px 1.2px at 9% 14%,  #cdb8ff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 31% 8%,  #ffe9a8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 18%, #f0e6ff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 71% 92%, #cdb8ff 50%, transparent 51%);
}
.card.chart::after {                  /* 네 귀퉁이 금선 — 접수 카드와 한 벌 */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  z-index: -1; border-radius: 11px;
  background:
    linear-gradient(#c9a2276b, #c9a2276b) left top / 14px 1px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) left top / 1px 14px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) right top / 14px 1px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) right top / 1px 14px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) left bottom / 14px 1px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) left bottom / 1px 14px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) right bottom / 14px 1px no-repeat,
    linear-gradient(#c9a2276b, #c9a2276b) right bottom / 1px 14px no-repeat;
}

.pil {
  background: #0a0720d9; border: 1px solid #3d3163; border-radius: 12px;
  padding: 9px 4px 8px;
}
.pil .where { color: #9b8fbe; letter-spacing: .5px; }
.pil .han { color: var(--gold-hi); text-shadow: 0 0 16px #c9a22766; }
.pil .kor { color: #bdb2d6; }
.bar .nm { color: #b6abd0; }
.bar .tr { background: #241d3d; }
.bar .fl { background: linear-gradient(90deg, #8d6fe0, var(--gold-hi)); }
.bar .vl { color: #cfc5e4; }
.chart-note { color: #a99ec6 !important; }

/* ═══════════════════════════════════ 5. 운명의 조각 — 무료 해석 카드
   **가독성이 먼저다.** 본문은 밝은 아이보리, 굵은 문장만 금빛으로
   한 단계 올린다. 장식은 카드 뒤 오른쪽 귀퉁이에만 옅게 둔다. */
.free-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--edge-gold); border-radius: 16px;
  padding: 16px 15px 15px; margin-bottom: 11px;
  background:
    radial-gradient(120% 78% at 6% 0%, #2a1b4e59 0%, transparent 58%),
    linear-gradient(180deg, #191231f0 0%, #110c22f7 100%);
  box-shadow:
    inset 0 1px 0 #ffffff0f,
    inset 0 0 30px -10px #7a5cc44d,
    0 16px 32px -22px #000000cc;
  isolation: isolate;
}
.free-card::before {                  /* 작은 별자리 — 카드마다 조금 다르다 */
  content: ""; position: absolute; right: 10px; bottom: 8px; z-index: -1;
  width: 78px; height: 58px; pointer-events: none; opacity: .34;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 72%, #f7e3a6 50%, transparent 51%),
    radial-gradient(2.1px 2.1px at 52% 26%, #f7e3a6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 62%, #cdb8ff 50%, transparent 51%),
    linear-gradient(28deg, transparent 0 48%, #c9a2273d 48% 52%,
                    transparent 52%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 62% 52%;
  background-position: 0 0, 0 0, 0 0, 14% 30%;
  background-repeat: no-repeat;
}
/* 카드가 전부 같은 얼굴이면 목록이 된다. 그러나 전부 다르면 정신이
   없다 — **한 벌 안에서 네 가지**만 돌려 쓴다(§12). */
.free-card:nth-of-type(4n+2)::before { transform: scaleX(-1); }
.free-card:nth-of-type(4n+3)::before {
  background-position: 0 0, 0 0, 0 0, 58% 56%;
}
.free-card:nth-of-type(4n+4)::before { transform: scaleX(-1) rotate(-8deg); }
.free-card:nth-of-type(4n+2) {
  background:
    radial-gradient(120% 78% at 94% 0%, #3a2a5a4d 0%, transparent 58%),
    linear-gradient(180deg, #181131f0 0%, #110c23f7 100%);
}
.free-card:nth-of-type(4n+3) {
  background:
    radial-gradient(120% 78% at 50% 0%, #2a1b4e4d 0%, transparent 62%),
    linear-gradient(180deg, #1a1333f0 0%, #120d24f7 100%);
}

.free-card h3 { color: var(--ivory); font-size: 16.5px; }
.free-card p { color: var(--ink-body); }
.free-card p b { color: var(--gold-hi); font-weight: 700; }

/* FREE 배지 — 싸구려 판촉 딱지처럼 보이지 않게, 작고 조용하게(§5) */
.openmark {
  top: 12px; right: 12px;
  color: #efe3bb; background: #c9a22714; border: 1px solid #c9a2274d;
  font-size: 10px; letter-spacing: 1.1px; padding: 3px 9px;
}
.tag {
  color: #e6d6a6; background: #c9a2271a; border: 1px solid #c9a2274d;
  letter-spacing: .4px;
}

/* ═══════════════════════════════════ 6. 봉인 — 잠긴 카드
   전환에서 가장 중요한 자리다. 「아래에 내 중요한 답이 있는데 잠겨
   있다」로 읽혀야 한다.

   가짜 문장을 새로 만들지 않는다. 지금 그대로다 —
     귀띔(`.hint`)   진짜 teaser 다. 서버가 실제로 센 숫자가 들어 있다
     실루엣(`.skel`) 본문이 들어올 자리를 가려 둔 줄이다
   여기서 하는 일은 그 둘을 **봉인처럼 보이게** 하는 것뿐이다. */
.lock-item {
  border: 1px solid var(--edge-gold); border-radius: 16px;
  padding: 16px 16px 12px; margin-bottom: 11px;
  background: linear-gradient(180deg, #150f2ccc 0%, #0b0819e6 100%);
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 #ffffff0d,
    0 18px 38px -24px #000000e6,
    0 0 30px -16px #7a5cc48c;              /* 카드 뒤 보랏빛 */
}
.lock-item h4 { color: var(--ivory); font-size: 15.5px; }
.lock-item h4::before {                     /* 작은 부적 — 이모지를 지운다 */
  content: ""; display: inline-block; width: 12px; height: 13px;
  margin-right: 8px; vertical-align: -1px; border-radius: 2px;
  background:
    radial-gradient(circle 1.6px at 50% 42%, #2a1e06 0 100%, transparent 100%),
    linear-gradient(180deg, #f7e3a6, #c9a227);
  box-shadow: 0 0 9px #c9a22766;
}
.lock-item .hint { color: #cfc6e2; }
.lock-item .hint b { color: var(--gold-hi); }

/* 실루엣 — 위에서 아래로 사라지게. 전문을 공짜로 읽히지 않는다. */
.lock-item .skel {
  filter: blur(3.2px); opacity: .62; margin-top: 12px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%,
                                      transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 98%);
}
.lock-item .skel i {
  height: 10px; margin: 8px 0;
  background: linear-gradient(90deg, #5b5080, #322a52);
}
.lock-item .fade {
  background: linear-gradient(180deg, #0b081900, #0b0819e6 78%, #0b0819);
}

/* 가운데 봉인. 금빛 자물쇠 — 실루엣 위에 도장처럼 찍힌다(§7·§8). */
.lock-item::before {
  content: ""; position: absolute; left: 50%; bottom: 44px; z-index: 1;
  width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle 2.6px at 50% 40%, #33260a 0 100%, transparent 100%),
    linear-gradient(#33260a, #33260a) 50% 56% / 2.6px 7px no-repeat,
    radial-gradient(64% 64% at 38% 26%, #fffaec 0%, #f2d68f 42%,
                    #c9a227 74%, #96701f 100%);
  border: 1px solid #f7e3a666;
  box-shadow: 0 0 0 5px #c9a2270f, 0 0 20px #c9a2274d,
              0 6px 14px -6px #000000a6;
}
.lock-cta {
  color: #e6d6a6 !important;
  display: flex; align-items: center; gap: 7px;
}
.seal-mini {                                /* 잠금 한 줄 앞의 작은 봉인 */
  flex: 0 0 auto; display: inline-block; width: 11px; height: 12px;
  border-radius: 2px; vertical-align: -1px; pointer-events: none;
  background:
    radial-gradient(circle 1.5px at 50% 42%, #2a1e06 0 100%, transparent 100%),
    linear-gradient(180deg, #f7e3a6, #c9a227);
  box-shadow: 0 0 8px #c9a22759;
}
.tz.locked .q::before {                     /* 잠긴 답 teaser 도 같은 봉인 */
  content: ""; display: inline-block; width: 10px; height: 11px;
  margin-right: 6px; vertical-align: -1px; border-radius: 2px;
  background:
    radial-gradient(circle 1.3px at 50% 42%, #2a1e06 0 100%, transparent 100%),
    linear-gradient(180deg, #f7e3a6, #c9a227);
}
.teaser {
  background: linear-gradient(180deg, #150f2ccc, #0e0a20d9);
  border: 1px solid var(--edge); border-radius: 15px;
}

/* ═══════════════════════════════════ 7. CTA 둘레 — 봉인이 풀리는 자리
   **문구는 건드리지 않는다.** 버튼 둘레에 금실과 별빛만 놓는다. */
.alcove { position: relative; margin-top: 22px; padding-top: 16px; }
.alcove .cta.mid { margin-top: 0; position: relative; z-index: 2; }
.alcove::after {                            /* 버튼 뒤 금빛 후광 */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px;
  height: 42px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 60%, #c9a2274d 0%,
                              transparent 72%);
  filter: blur(14px);
}
.alcove .thread {                           /* 버튼 위로 지나가는 금실 */
  position: absolute; left: 6%; right: 6%; top: 6px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9a22759 28%,
                              #f0cf5e8c 50%, #c9a22759 72%, transparent);
}
.alcove .thread::before, .alcove .thread::after {
  content: ""; position: absolute; top: -1.5px; width: 4px; height: 4px;
  transform: rotate(45deg); background: #f7e3a6;
  box-shadow: 0 0 8px #f0cf5eaa;
}
.alcove .thread::before { left: 24%; }
.alcove .thread::after  { right: 24%; }

/* ═══════════════════════════════════ 8. 안내자가 한 번 나온다
   브랜드 캐릭터는 특별해야 한다. 아래 섹션마다 크게 복붙하면 흔해진다.
   그래서 **잠김 → 구매로 넘어가는 자리 한 곳**에만, 작게 놓는다(§13). */
.alcove.guided { padding-top: 48px; }
.alcove .cameo {
  position: absolute; left: 2px; top: -4px; width: 64px; height: auto;
  z-index: 1; pointer-events: none; opacity: .92;
  filter: drop-shadow(0 6px 14px #000000a6) drop-shadow(0 0 16px #c9a22740);
}
.alcove.guided .thread { top: 38px; }

/* ═══════════════════════════════════ 9. 아홉 장 — 두루마리
   글은 그대로 둔다. 목록처럼 보이지 않게 **펼쳐 놓은 두루마리**로만
   바꾼다. 번호가 주인공이다. */
.chapters {
  position: relative; padding: 4px 15px; border-radius: 16px;
  background:
    radial-gradient(120% 60% at 50% 0%, #2a1b4e4d 0%, transparent 62%),
    linear-gradient(180deg, #1b1436e6 0%, #120d27f2 100%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 44px -20px #c9a2273d, 0 16px 34px -24px #000000cc;
}
.chapters::before, .chapters::after {       /* 두루마리 위·아래 봉 */
  content: ""; position: absolute; left: 12px; right: 12px; height: 2px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9a22766 18%,
                              #e8c87a8c 50%, #c9a22766 82%, transparent);
}
.chapters::before { top: 0; }
.chapters::after  { bottom: 0; }
.chapters li {
  position: relative; padding: 13px 26px 13px 0;
  border-bottom: 1px solid #ffffff0f;
  font-size: 14.4px; color: var(--ink-body);
  transition: background .2s ease, box-shadow .2s ease;
}
.chapters li:last-child { border-bottom: none; }
.chapters li::before {
  font-size: 13px; min-width: 27px; color: var(--gold-hi);
  text-shadow: 0 0 12px #c9a22766; font-variant-numeric: tabular-nums;
}
.chapters li::after {                       /* 오른쪽 끝의 옅은 문양 */
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px; transform: rotate(45deg);
  border: 1px solid #c9a22740; border-radius: 2px; opacity: .8;
}
.chapters li:nth-child(3n+2)::after { border-radius: 50%; transform: none; }
.chapters li:nth-child(3n+3)::after {
  border: none; transform: none;
  background:
    radial-gradient(1.6px 1.6px at 22% 22%, #c9a22773 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 78% 46%, #c9a22773 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 84%, #c9a22773 50%, transparent 51%);
}
.chapters li:hover, .chapters li:active {
  background: #c9a2270d; box-shadow: inset 2px 0 0 #c9a22773;
}

/* ═══════════════════════════════════ 10. 후기 · FAQ */
.quiet-note {
  color: #a99ec6; border-left: 2px solid #c9a22740; padding-left: 12px;
}

.faq {
  border: 1px solid var(--edge); border-radius: 14px; margin-bottom: 9px;
  padding: 0 14px; background: linear-gradient(180deg, #150f2ad9, #100b21e6);
}
.faq summary { color: var(--ivory); }
.faq summary::after {                       /* 금빛 글리프 — + 가 − 가 된다 */
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background:
    linear-gradient(90deg, #f7e3a6, #d9b25c) 50% 50% / 14px 1.5px no-repeat,
    linear-gradient(180deg, #f7e3a6, #d9b25c) 50% 50% / 1.5px 14px no-repeat,
    radial-gradient(1.4px 1.4px at 8% 8%,   #c9a22773 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 92% 92%, #c9a22773 50%, transparent 51%);
  transition: transform .26s var(--ease-out), background-size .26s ease;
}
.faq[open] summary::after {
  transform: rotate(90deg);
  background-size: 14px 1.5px, 1.5px 0, 100% 100%, 100% 100%;
}
.faq[open] summary { border-bottom: 1px solid #c9a22733; }
.faq p { color: #cfc6e2; margin-top: 12px; }

/* ═══════════════════════════════════ 발바닥 — 법적 정보
   **작고 조용하게.** 금빛 후광을 두르지 않는다. 시선은 끝까지 내용과
   CTA 에 있어야 한다. 그러나 찾으려는 고객이 **바로 찾을 수 있어야**
   하므로, 숨기지 않고 글자 링크로 둔다 — 마우스를 올려야 보이거나
   투명도로 지워 두는 짓은 하지 않는다. */
footer { border-top: 1px solid #ffffff12; color: #7a7194; }
footer p b { color: #b3a6d0; }
.foot-brand {
  margin: 0 0 10px !important; font-size: 12.5px; color: #9a90b8;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
}
.foot-op { color: #7a7194; font-size: 12px; }

/* 실제 사업자 정보. **작고 조용하게** — 금빛도 큰 글씨도 쓰지 않는다.
   그래도 읽히기는 해야 하므로 11.8px 아래로 내리지 않는다. */
.foot-biz { margin: 0 0 12px; }
.foot-biz p {
  margin: 0 0 3px !important; font-size: 11.8px; line-height: 1.65;
  color: #7f7699; word-break: keep-all; overflow-wrap: anywhere;
}
.foot-biz p:last-child { margin-bottom: 0 !important; }

.foot-legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 4px; margin: 0 0 12px;
}
.foot-legal a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;      /* 손가락이 닿는 자리는 44px */
  color: #b3a6d0; font-size: 12.5px; text-decoration: none;
  border-bottom: 1px solid #ffffff1f;
}
.foot-legal a + a { position: relative; margin-left: 15px; }
.foot-legal a + a::before {           /* 링크 사이의 가는 칸막이 */
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px; background: #ffffff26;
}
.foot-legal a:hover, .foot-legal a:focus-visible {
  color: var(--gold-hi); border-bottom-color: #c9a22766;
}
.foot-note { margin: 0 !important; font-size: 11.6px; color: #6b6380;
             line-height: 1.6; }

/* ═══════════════════════════════════ 법적 정보 창
   상품 시트와 **같은 결**을 쓰되 다른 창이다. 여기는 화려할 까닭이
   없다 — 읽히는 것이 전부다. */
.legal-sheet { max-height: 84vh; }
.legal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.legal-head .sheet-title { margin: 4px 0 10px; }
.legal-x {
  flex: 0 0 auto; min-height: 44px; min-width: 60px; padding: 0 14px;
  background: transparent; color: var(--gold-hi); cursor: pointer;
  border: 1px solid #c9a22759; border-radius: 11px;
  font-size: 13.5px; font-weight: 700;
}
.legal-x:active { transform: scale(.97); }

.biz { margin: 0 0 6px; padding: 0; }
.biz-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid #ffffff12;
}
.biz-row:last-child { border-bottom: none; }
.biz dt {
  flex: 0 0 96px; margin: 0; font-size: 12.3px; color: #9a90b8;
  word-break: keep-all;
}
.biz dd {
  flex: 1; margin: 0; font-size: 13.8px; color: var(--ivory);
  word-break: break-all;
}
.biz dd a { color: var(--gold-hi); text-decoration: none;
             border-bottom: 1px solid #c9a22759; }

.legal-h { margin: 16px 0 6px; font-size: 14.5px; color: var(--gold-hi);
           font-weight: 800; letter-spacing: -0.2px; }
.legal-doc > .legal-h:first-child { margin-top: 4px; }
.legal-p { margin: 0; font-size: 13.6px; line-height: 1.75;
           color: #cfc6e2; white-space: pre-line; word-break: keep-all; }
.legal-when { margin: 18px 0 0; font-size: 11.8px; color: #7a7194; }

/* 따로 선 법적 정보 페이지 */
.legal-page { padding-top: 24px; }
.legal-page .legal-doc { margin-bottom: 8px; }
.hd-home { display: block; line-height: 0; }

/* ═══════════════════════════════════ 11. 상품 — 봉인 해제 창
   기능은 한 줄도 손대지 않는다. 고르는 자리 · 값 · 상대방 칸 전부 그대로.
   겉만 「운세 선택함」으로 바꾼다(§19). */
.scrim { background: #04030ac2; backdrop-filter: blur(2px); }
.sheet {
  background:
    radial-gradient(120% 40% at 50% 0%, #2a1b4e73 0%, transparent 64%),
    linear-gradient(180deg, #131028f7 0%, #0a0817fb 100%);
  border: 1px solid #c9a22740; border-bottom: none;
  border-radius: 22px 22px 0 0;
  backdrop-filter: blur(14px);
  box-shadow: 0 -20px 54px -22px #000000e6, 0 0 0 1px #00000059;
}
.sheet::before {                            /* 창 위쪽 금실 */
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, #c9a22773 30%,
                              #f0cf5ea6 50%, #c9a22773 70%, transparent);
}
.grab {
  width: 44px; height: 4px;
  background: linear-gradient(90deg, #c9a22700, #e8c87a, #c9a22700);
  box-shadow: 0 0 10px #c9a22759;
}
.sheet-title { color: var(--ivory); }

.pack {
  border: 1px solid #c9a2272e; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #111634e6 0%, #0a0e23f2 100%);
  padding: 15px 14px 14px; isolation: isolate;
}
.pack::before {                             /* 상품마다 결이 다르다 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: -1; opacity: .5;
}
/* 종합사주 — **네 기둥.** 평생 구조를 세로 기둥 넷으로 앉힌다(§16). */
.pack[data-code="comp"] {
  border-color: #c9a2275c;
  background:
    radial-gradient(120% 78% at 88% 0%, #2c3a7559 0%, transparent 62%),
    linear-gradient(180deg, #131a3bee 0%, #0a0e23f7 100%);
  box-shadow: inset 0 1px 0 #ffffff10, 0 0 24px -15px #c9a22780;
}
.pack[data-code="comp"]::before {
  background-image:
    linear-gradient(180deg, #c9a22700, #c9a22745, #c9a22700),
    linear-gradient(180deg, #c9a22700, #c9a22730, #c9a22700),
    linear-gradient(180deg, #c9a22700, #c9a22745, #c9a22700),
    linear-gradient(180deg, #c9a22700, #c9a22730, #c9a22700),
    radial-gradient(2px 2px at 86% 20%, #f7e3a666 50%, transparent 51%);
  background-size: 2px 54px, 2px 54px, 2px 54px, 2px 54px, 100% 100%;
  background-position:
    right 58px top 14px, right 44px top 14px,
    right 30px top 14px, right 16px top 14px, 0 0;
  background-repeat: no-repeat;
}
/* 신년운세 — 한 해의 흐름을 읽는 카드. 달력 칸과 별 하나(§17). */
.pack[data-code="single"]::before {
  background-image:
    repeating-linear-gradient(90deg, #c9a2271f 0 1px, transparent 1px 15px),
    repeating-linear-gradient(0deg, #c9a2271a 0 1px, transparent 1px 15px),
    radial-gradient(2px 2px at 86% 22%, #f7e3a666 50%, transparent 51%);
  background-size: 92px 46px, 92px 46px, 100% 100%;
  background-position: right 8px top 10px, right 8px top 10px, 0 0;
  background-repeat: no-repeat;
}
/* 세트 — **가장 풍성하게.** 제일 많이 깎이는 칸이다. 그래도 값이 먼저
   읽혀야 한다(§18). */
.pack[data-code="bundle"] {
  border-color: #e8c87a8c;
  background:
    radial-gradient(130% 80% at 50% -10%, #5a3a9166 0%, transparent 64%),
    linear-gradient(180deg, #1b1440f0 0%, #0c0a24f7 100%);
  box-shadow:
    inset 0 0 0 1px #c9a22740,
    inset 0 1px 0 #ffffff1a,
    0 0 34px -14px #c9a227a6;
}
.pack[data-code="bundle"]::before {
  background-image:
    radial-gradient(2.2px 2.2px at 50% 8%,  #fff3cf99 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 38% 15%, #f7e3a680 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 62% 15%, #f7e3a680 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 24%, #cdb8ff73 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 24%, #cdb8ff73 50%, transparent 51%),
    radial-gradient(70% 40% at 50% 0%, #c9a2271f 0%, transparent 70%);
}
/* 궁합 — **두 사람.** 구슬 둘이 겹쳐 놓인다(§19). */
.pack[data-code="pair"] {
  border-color: #c78eb866;
  background:
    radial-gradient(120% 78% at 88% 0%, #6a2f5e52 0%, transparent 62%),
    linear-gradient(180deg, #1a1132ee 0%, #0b0a22f7 100%);
  box-shadow: inset 0 1px 0 #ffffff10, 0 0 26px -14px #d59ec27a;
}
.pack[data-code="pair"]::before {
  background-image:
    radial-gradient(8px 8px at 80% 26%, #f7e3a64d 50%, transparent 51%),
    radial-gradient(8px 8px at 89% 26%, #e8b8d659 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84.5% 44%, #f7e3a666 50%, transparent 51%);
}
.pack-title { color: var(--ivory); }
.pack-desc { color: #a99ec6; }
.pack-items li { color: #cfc6e2; }
.pack-items li::before { color: var(--gold-mid); }
.pack-price .now { color: var(--gold-hi); text-shadow: 0 0 16px #c9a22759; }
.pack-price .was { color: #8d84a8; }
.pack-badge {
  background: linear-gradient(180deg, #fbeec0, #d9b25c); color: #2a1e06;
  box-shadow: 0 2px 10px -2px #c9a227a6;
}
.pack.sel {
  border-color: var(--gold-mid);
  box-shadow: inset 0 0 0 1px var(--gold-mid), 0 0 28px -10px #c9a227a6;
}

/* 상대방 칸 — 접수 카드와 **같은 한 벌**이어야 한다(§20) */
.partner {
  border: 1px solid var(--edge); border-radius: 15px;
  background: linear-gradient(180deg, #1a1333e6 0%, #110c25f0 100%);
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.partner-title { color: var(--gold-hi); letter-spacing: -0.2px; }

/* 결제 직전 — **화려함보다 또렷함이 먼저다**(§21) */
.sum { border-top: 1px solid #c9a22733; }
.sum-row { color: #a99ec6; }
.sum-row.total { border-top: 1px dashed #c9a22740; color: var(--ivory); }
.sum-row.total b { color: var(--gold-hi); text-shadow: 0 0 18px #c9a22766; }

/* sticky — 같은 세계의 띠 */
.sticky {
  background: linear-gradient(180deg, #0f0b1ef2, #090715fa);
  border-top: 1px solid #c9a22733;
}
.sticky .p .now { color: var(--gold-hi); }

/* ═══════════════════════════════════ 12. 완성 화면 (order)
   「당신의 감명서가 완성되었습니다」 — 시스템 화면처럼 보이지 않게.
   다만 **내려받기 버튼은 언제나 또렷해야 한다.** */
.hero.ord { min-height: 0; overflow: visible; }
.hero.ord h1.big { max-width: none; font-size: 24px; }
.hero.ord .sub { max-width: none; }
.hero.ord .cameo {
  position: absolute; right: 6px; bottom: -6px; width: 92px; height: auto;
  pointer-events: none; opacity: .9; z-index: 0;
  filter: drop-shadow(0 8px 18px #000000a6) drop-shadow(0 0 20px #7a5cc44d);
  -webkit-mask-image: radial-gradient(74% 62% at 56% 36%,
                      #000 0 58%, transparent 100%);
  mask-image: radial-gradient(74% 62% at 56% 36%,
              #000 0 58%, transparent 100%);
}

.card.fulfil {
  border: 1px solid var(--edge); border-radius: 16px;
  background: linear-gradient(180deg, #171030e6 0%, #100b23f2 100%);
}
/* 다 된 권은 **봉인된 문서**처럼. 금선이 두루마리 끝을 만든다. */
.card.fulfil.completed {
  border-color: #c9a22773;
  background:
    radial-gradient(120% 70% at 50% 0%, #2a1b4e66 0%, transparent 64%),
    linear-gradient(180deg, #1b1438f0 0%, #0d0a24f7 100%);
  box-shadow: inset 0 0 0 1px #c9a22726, 0 0 30px -14px #c9a2278c;
}
.card.fulfil.completed::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 6px;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9a22766 24%,
                              #e8c87a8c 50%, #c9a22766 76%, transparent);
}
.card.fulfil h3 { color: var(--ivory); }
.card.fulfil .cta { position: relative; z-index: 1; }
.card.fulfil .step-line { color: #a99ec6; }
.progress { background: #241d3d; }
.progress i { background: linear-gradient(90deg, #8d6fe0, var(--gold-hi)); }

/* ═══════════════════════════════════ 13. 움직임 — 아래는 덜 움직인다
   첫 화면이 가장 살아 있고, 내려갈수록 조용해야 한다(§25). 여기서
   허용하는 것은 나타날 때 한 번, 그리고 아주 느린 봉인의 숨뿐이다. */
.lock-item.near .skel i { animation-iteration-count: 2; }
.lock-item.near::before { animation: pg-seal 6.5s ease-in-out infinite; }
@keyframes pg-seal {
  0%, 100% { box-shadow: 0 0 0 5px #c9a2270f, 0 0 18px #c9a22740,
                         0 6px 14px -6px #000000a6; }
  50%      { box-shadow: 0 0 0 6px #c9a22717, 0 0 26px #c9a22773,
                         0 6px 14px -6px #000000a6; }
}

/* ═══════════════════════════════════ 14. 폭 */
@media (max-width: 379px) {              /* 375 */
  section { padding: 26px 0 28px; }
  .free-card, .lock-item { padding-left: 14px; padding-right: 14px; }
  .free-card::before { width: 64px; height: 48px; opacity: .28; }
  .chapters { padding: 4px 12px; }
  .chapters li { font-size: 13.8px; padding-right: 22px; }
  .alcove .cameo { width: 56px; }
  .alcove.guided { padding-top: 44px; }
  .alcove.guided .thread { top: 34px; }
  .pack { padding: 14px 13px 13px; }
  .intro-seal { width: 36px; height: 36px; }
}
@media (min-width: 400px) {              /* 430 */
  section { padding: 34px 0 36px; }
  .free-card, .lock-item { padding: 18px 17px 16px; }
  .chapters li { font-size: 14.8px; padding: 14px 28px 14px 0; }
  .alcove .cameo { width: 72px; }
  .alcove.guided { padding-top: 52px; }
  .alcove.guided .thread { top: 42px; }
}

/* ═══════════════════════════════════ 15. 움직임 줄임
   장식은 전부 멈춘다. 내용·CTA·읽는 차례는 그대로 남는다(§30). */
@media (prefers-reduced-motion: reduce) {
  .lock-item.near::before, .lock-item.near .skel i {
    animation: none !important;
  }
  .faq summary::after { transition: none !important; }
}