/* 명리결 storefront — 고객용 모바일 퍼널.
   폰에서 보는 것만 생각하고 만든다. 430px 한 칼럼에서 넓어지지 않는다.
   운영자용 app.css 와 겹치지 않는다 — 다른 앱이고 다른 파일이다. */

:root {
  --ink: #0d0b14;
  --gold: #c9a227;
  --gold-2: #f0cf5e;
  --gold-soft: #e8d9a0;
  --text: #f4f1ea;
  --dim: #cfc7de;
  --muted: #a49db5;
  --line: #2e2740;
  --card: #16121f;
  --deep: #0f0c17;
  --ok: #58c08a;
  --warn: #e0a34a;
  --bad: #ffb3c0;
  --radius: 14px;
  --pad: 18px;
  --phone: 430px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { overflow-x: hidden; }
body.locked-scroll { overflow: hidden; }

.wrap { max-width: var(--phone); margin: 0 auto; padding: 0 var(--pad); }
.hide { display: none !important; }

/* ───────────────────────────────────────────── 얇은 헤더 */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: #0d0b14e8; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  height: 46px; display: flex; align-items: center; justify-content: center;
}
.hd .logo {
  font-size: 15.5px; font-weight: 800; letter-spacing: 3px; color: var(--gold);
}

/* ───────────────────────────────────────────── HERO */
.hero {
  position: relative; overflow: hidden; padding: 22px 0 26px;
  background: radial-gradient(120% 60% at 50% 0%,
              #3a2250 0%, #1a1026 58%, var(--ink) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 20%, #fff7d8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 74% 12%, #fff7d8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 34%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 88% 40%, #fff7d8 50%, transparent 51%);
}
.hero .wrap { position: relative; z-index: 1; }

h1.big {
  margin: 0 0 8px; font-size: 26px; line-height: 1.3;
  font-weight: 800; letter-spacing: -0.7px;
}
h1.big em { font-style: normal; color: var(--gold); }
.sub { margin: 0 0 16px; color: var(--dim); font-size: 14px; }

/* ───────────────────────────────────────────── 입력 마법사 */
.wiz {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.wiz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pbar { flex: 1; height: 5px; background: #241d33; border-radius: 99px;
        overflow: hidden; }
.pbar i { display: block; height: 100%; width: 20%;
          background: linear-gradient(90deg, #7a5cc4, var(--gold));
          border-radius: 99px; transition: width .35s ease; }
.pnum { font-size: 12px; color: var(--muted);
        font-variant-numeric: tabular-nums; }
.pnum b { color: var(--gold); }

.step { display: none; }
.step.on { display: block; animation: slide .3s ease; }
@keyframes slide {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.q { margin: 0 0 12px; font-size: 18px; font-weight: 800;
     letter-spacing: -0.4px; }
.hint { margin: 9px 0 0; font-size: 12.3px; color: var(--muted);
        line-height: 1.5; }

/* 날짜·시각도 이제 글자 칸이다 — 달력 팝업도 시계 팝업도 띄우지 않는다.
   손가락으로 누르는 자리라 48px 아래로 내려가지 않게 둔다. */
input[type=text], input[type=email], input[type=tel] {
  width: 100%; padding: 14px 13px; font-size: 16px;  /* 16px — iOS 확대 방지 */
  min-height: 48px;
  background: var(--deep); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px;
}
input:focus { outline: none; border-color: var(--gold); }
input:disabled { opacity: .4; }

.seg { display: flex; gap: 9px; }
.seg button {
  flex: 1; padding: 15px; font-size: 15.5px; font-weight: 700; min-height: 48px;
  background: var(--deep); color: var(--muted);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: #c9a2271f; color: var(--gold); border-color: var(--gold);
}

.check { display: flex; align-items: center; gap: 9px; margin-top: 11px;
         font-size: 13.2px; color: var(--muted); cursor: pointer; }
.check input { width: 22px; height: 22px; min-width: 22px;
               accent-color: var(--gold); }
.check .req { color: var(--gold); }

.wiz-nav { display: flex; gap: 9px; margin-top: 16px; }
.wiz-nav .cta { flex: 1; }
.cta.sm { flex: 0 0 84px; padding: 14px 10px; font-size: 14.5px; }

/* ───────────────────────────────────────────── 버튼 */
.cta {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 16px; font-size: 16.5px; font-weight: 800; min-height: 48px;
  letter-spacing: -0.3px; color: #241a05; border: none; border-radius: 13px;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
  box-shadow: 0 8px 20px #c9a22733; text-decoration: none;
}
.cta:active { transform: translateY(1px); }
.cta.ghost { background: transparent; color: var(--gold);
             border: 1px solid #6b5a2e; box-shadow: none; }
.cta[disabled] { opacity: .5; }
.cta.mid { margin-top: 18px; }
.cta-note { text-align: center; font-size: 12.2px; color: var(--muted);
            margin-top: 9px; }

.err { background: #3a1620; border: 1px solid #7b2b3c; color: var(--bad);
       border-radius: 11px; padding: 11px; font-size: 13.4px; margin-top: 12px; }

/* ───────────────────────────────────────────── 잠긴 답 teaser */
.teaser {
  background: #ffffff08; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px;
}
.tz { display: flex; justify-content: space-between; align-items: baseline;
      gap: 10px; padding: 7px 0; border-bottom: 1px dashed #2e2740; }
.tz:last-of-type { border-bottom: none; }
.tz .q { font-size: 12.8px; color: var(--dim); flex: 1; margin: 0;
         font-weight: 400; }
.tz .a { font-size: 14px; font-weight: 800; color: var(--gold);
         white-space: nowrap; }
.tz .a.masked { filter: blur(3.5px); opacity: .7; user-select: none; }
.tz.locked .q::before { content: "🔒 "; }
.tz.open .a { animation: pop .4s ease; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.teaser-note { margin: 8px 0 0; font-size: 11.6px; color: var(--muted); }

/* ───────────────────────────────────────────── 분석 화면 */
.overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.analysis { text-align: center; width: 100%; }
.spinner {
  width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid #2e2740; border-top-color: var(--gold);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analysis h3 { margin: 0 0 20px; font-size: 17px; font-weight: 800; }
.steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.steps li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 9px 2px; font-size: 13.6px; color: #4b4361;
  border-bottom: 1px solid #1c1730; transition: color .3s;
}
.steps li .s-val { font-size: 12.5px; color: transparent; white-space: nowrap; }
.steps li.done { color: var(--text); }
.steps li.done .s-name::before { content: "✓ "; color: var(--ok); }
.steps li.done .s-val { color: var(--gold-soft); }

/* ───────────────────────────────────────────── 섹션 */
section { padding: 26px 0; }
section.tight { padding: 14px 0 20px; }
.sec-label { font-size: 11.5px; letter-spacing: 2.2px; color: var(--gold);
             margin-bottom: 7px; font-weight: 700; }
h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.38;
     letter-spacing: -0.5px; font-weight: 800; }
h2 small { display: block; font-size: 13px; color: var(--muted);
           font-weight: 500; margin-top: 5px; letter-spacing: 0; }

.card { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 15px; margin-bottom: 10px;
        position: relative; }
.card h3 { margin: 0 0 7px; font-size: 16px; letter-spacing: -0.3px; }
.card p { margin: 0; font-size: 14.2px; color: #ddd7e8; }
.tag { display: inline-block; font-size: 11px; color: var(--gold-soft);
       background: #c9a2271a; border: 1px solid #6b5a2e;
       padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.openmark { position: absolute; top: 13px; right: 13px; font-size: 10.5px;
            color: var(--ok); border: 1px solid #2f5f45;
            background: #58c08a14; padding: 2px 7px; border-radius: 999px; }
.free-card h3 { padding-right: 62px; }

/* 사주 차트 */
.chart-note { margin-top: 11px !important; font-size: 12.4px !important;
              color: var(--muted) !important; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pil { background: var(--deep); border: 1px solid var(--line);
       border-radius: 11px; padding: 10px 4px; text-align: center; }
.pil .where { font-size: 10.5px; color: var(--muted); }
.pil .han { font-size: 23px; font-weight: 800; color: var(--gold);
            line-height: 1.15; margin: 4px 0 1px; }
.pil .kor { font-size: 11px; color: var(--dim); }
.bars { margin-top: 12px; }
.bar { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bar .nm { width: 20px; font-size: 12.5px; color: var(--muted); }
.bar .tr { flex: 1; height: 7px; background: #241d33; border-radius: 99px;
           overflow: hidden; }
.bar .fl { height: 100%; border-radius: 99px;
           background: linear-gradient(90deg, #7a5cc4, var(--gold)); }
.bar .vl { width: 44px; text-align: right; font-size: 12px; color: var(--dim); }

/* ───────────────────────────────────────────── 잠긴 결과 */
.lock-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px 12px; margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.lock-item h4 { margin: 0 0 6px; font-size: 15px; }
.lock-item h4::before { content: "🔒 "; }
.lock-item .hint { margin: 0 0 10px; font-size: 13.3px; color: var(--dim); }
.lock-item .hint b { color: var(--gold); }
.skel { filter: blur(3px); opacity: .5; }
.skel i { display: block; height: 9px; margin: 7px 0; border-radius: 99px;
          background: linear-gradient(90deg, #3a3350, #262038); }
.lock-item .fade {
  position: absolute; left: 0; right: 0; bottom: 34px; height: 52px;
  background: linear-gradient(180deg, #16121f00, var(--card));
}
.lock-cta { margin: 8px 0 0 !important; font-size: 12.6px !important;
            color: var(--gold-soft) !important; position: relative; }

/* ───────────────────────────────────────────── 목록 */
.chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.chapters li { counter-increment: ch; display: flex; gap: 11px;
               align-items: baseline; padding: 10px 0;
               border-bottom: 1px solid #221d33; font-size: 14.2px; }
.chapters li::before { content: counter(ch, decimal-leading-zero);
                       color: var(--gold); font-weight: 800; font-size: 12px;
                       min-width: 21px; }

.dev-slot { border: 1px dashed #5a4420; background: #3a2a1033;
            color: var(--warn); border-radius: 12px; padding: 15px;
            font-size: 13.2px; text-align: center; }

.faq { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 0; font-size: 14.6px; font-weight: 700;
               cursor: pointer; list-style: none; min-height: 48px;
               display: flex; justify-content: space-between;
               align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 18px; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 14px; font-size: 13.6px; color: #c8c1d6; }

footer { padding: 26px 0 34px; color: #6b6380; font-size: 12px;
         border-top: 1px solid var(--line); margin-top: 16px; }
footer p { margin: 3px 0; }
.pad-bottom { height: 92px; }

/* ───────────────────────────────────────────── sticky CTA */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #120f1bf5; backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(130%); transition: transform .3s ease;
}
.sticky.show { transform: translateY(0); }
/* 본문 CTA 가 화면에 들어와 있는 동안은 sticky 를 내린다 —
   같은 노란 버튼이 둘 겹쳐 보이던 자리다. 자리를 차지하지 않는 방식
   (transform·opacity)이라 레이아웃이 튀지 않는다. */
.sticky.show.hushed { transform: translateY(130%); opacity: 0;
                      pointer-events: none; }
.sticky { transition: transform .3s ease, opacity .25s ease; }
.sticky .inner { max-width: var(--phone); margin: 0 auto;
                 display: flex; gap: 10px; align-items: center; }
.sticky .p { flex: 0 0 auto; line-height: 1.2; }
.sticky .p .was { display: block; font-size: 11px; color: var(--muted);
                  text-decoration: line-through; }
.sticky .p .now { font-size: 16.5px; font-weight: 900; color: var(--gold); }
.sticky .cta { flex: 1; padding: 13px; font-size: 15px; }

/* ───────────────────────────────────────────── bottom sheet */
.scrim { position: fixed; inset: 0; z-index: 70; background: #000000a8; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  max-width: var(--phone); margin: 0 auto;
  background: #141020; border: 1px solid var(--line); border-bottom: none;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
  max-height: 88vh; display: flex; flex-direction: column;
}
.sheet.open { transform: translateY(0); }
.grab { width: 38px; height: 4px; border-radius: 99px; background: #3a3350;
        margin: 9px auto 3px; flex: 0 0 auto; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch;
              padding: 8px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.sheet-title { margin: 4px 0 14px; font-size: 17.5px; font-weight: 800; }

.pack {
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
  position: relative; cursor: pointer;
}
.pack.sel { border-color: var(--gold); background: #c9a2270f;
            box-shadow: 0 0 0 1px var(--gold) inset; }
.pack-badge { position: absolute; top: -8px; right: 12px; font-size: 10.5px;
              font-weight: 800; color: #241a05; background: var(--gold-2);
              padding: 2px 9px; border-radius: 999px; }
.pack-title { font-size: 15.5px; font-weight: 800; }
.pack-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pack-items { list-style: none; margin: 9px 0; padding: 0; }
.pack-items li { font-size: 12.8px; color: var(--dim); padding: 2px 0 2px 16px;
                 position: relative; }
.pack-items li::before { content: "·"; position: absolute; left: 5px;
                         color: var(--gold); }
.pack-items .soon { font-size: 10.5px; color: var(--warn);
                    border: 1px solid #5a4420; border-radius: 99px;
                    padding: 0 6px; margin-left: 4px; }
.pack-price { display: flex; align-items: baseline; gap: 8px; }
.pack-price .was { font-size: 12px; color: var(--muted);
                   text-decoration: line-through; }
.pack-price .now { font-size: 18px; font-weight: 900; color: var(--gold); }
.pack-price .off { font-size: 11px; font-weight: 800; color: #fff;
                   background: #b4322f; padding: 1px 7px; border-radius: 999px; }

.sum { border-top: 1px solid var(--line); margin-top: 6px;
       padding: 12px 2px 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline;
           font-size: 13.4px; color: var(--muted); padding: 3px 0; }
.sum-row .strike { text-decoration: line-through; color: var(--muted); }
.sum-row .off { color: #ff9aa5; }
.sum-row.total { font-size: 15px; color: var(--text); padding-top: 9px;
                 margin-top: 6px; border-top: 1px dashed var(--line); }
.sum-row.total b { font-size: 22px; font-weight: 900; color: var(--gold); }
.pending-note { margin: 9px 0 0; font-size: 11.8px; color: var(--warn);
                line-height: 1.5; }

/* ───────────────────────────────────────────── 주문 화면 */
.progress { height: 8px; background: #241d33; border-radius: 99px;
            overflow: hidden; margin: 14px 0 9px; }
.progress i { display: block; height: 100%; width: 0;
              background: linear-gradient(90deg, #7a5cc4, var(--gold));
              transition: width .5s ease; }

/* ───────────────────────────────────────────── 아주 작은 폰 */
@media (max-width: 360px) {
  :root { --pad: 15px; }
  h1.big { font-size: 24px; }
  .q { font-size: 17px; }
  .tz { flex-direction: column; align-items: flex-start; gap: 1px; }
  .sum-row.total b { font-size: 20px; }
}

/* ───────────────────────────────────────────── 데스크톱 = 폰 프레임 */
@media (min-width: 560px) {
  body { background: radial-gradient(90% 60% at 50% 0%,
         #1c1428 0%, #0a0810 60%, #07060c 100%); padding-top: 22px; }
  body::before {
    content: "모바일에 맞춰 만든 화면입니다 — 휴대폰에서 열어 보세요";
    display: block; text-align: center; color: #6b6380;
    font-size: 12px; margin-bottom: 12px;
  }
  .devbar, .hd, .hero, section, footer {
    max-width: var(--phone); margin-left: auto; margin-right: auto;
  }
  .devbar { border-radius: 13px 13px 0 0; }
  .hd { position: static; }
  .hd, .hero, section, footer {
    border-left: 1px solid #1d1830; border-right: 1px solid #1d1830;
  }
  footer { border-bottom: 1px solid #1d1830; border-radius: 0 0 13px 13px;
           margin-bottom: 36px; }
  .sticky { max-width: var(--phone); left: 50%;
            transform: translateX(-50%) translateY(130%);
            border-radius: 13px 13px 0 0;
            border: 1px solid #1d1830; border-bottom: none; }
  .sticky.show { transform: translateX(-50%) translateY(0); }
  .pad-bottom { height: 36px; }
}

/* 주문 화면의 작은 머리표 */
.eyebrow {
  display: inline-block; font-size: 11.5px; letter-spacing: 1.6px;
  color: var(--gold-soft); border: 1px solid #6b5a2e;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
  background: #ffffff0a;
}

/* 팔 수 없는 묶음 — 고를 수 없게 흐려 둔다 */
.pack.soon { opacity: .45; cursor: default; }
.pack.soon:active { transform: none; }
.pack-badge.soonbadge { background: #3a2a10; color: var(--warn);
                        border: 1px solid #5a4420; }

/* 주문 화면의 상품 칸 */
.card.fulfil { padding-top: 16px; }
.card.fulfil.completed { border-color: #2f5f45; }
.card.fulfil.failed { border-color: #7b2b3c; }
.card.fulfil .err { margin-top: 10px; }

/* ───────────────────────────────────────────── 함께 볼 상대방 (궁합)
   묶음에 궁합이 들었을 때만 열린다. 시트의 기본 결을 그대로 쓴다. */
.partner {
  margin: 14px 0 4px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #1b1528;
}
.partner-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; }
.partner input[type="text"] { width: 100%; }
.partner .hint { margin: 6px 0 0; }
.partner .check { margin-top: 10px; }
.seg.sm button { padding: 10px; font-size: 14px; }

/* 후기가 아직 없을 때. 숫자를 지어내지 않는다. */
.quiet-note { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* ── 결제 직전 별도 동의 ──────────────────────────────────────────
   법적 동의는 예쁘기보다 **또렷한 것**이 먼저다. 금빛 장식을 얹지
   않는다. 손가락이 닿는 자리를 44px 로 잡고, 라벨 전체가 눌린다. */
.consent { margin: 14px 0 4px; }
.consent .check {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 10px 2px; cursor: pointer;
  font-size: 14px; line-height: 1.5;
}
.consent .check input[type=checkbox] {
  width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px;
}
.consent .check span { flex: 1 1 auto; }
.consent .req { font-weight: 600; opacity: .85; }
.rc-more {
  display: inline-block; margin: 0 0 2px 30px; font-size: 13px;
  text-decoration: underline; opacity: .85;
}
.rc-more:hover { opacity: 1; }
.consent .err { margin: 6px 0 0 30px; }
/* 안 누른 채로 결제를 누르면 잠깐 테두리로 알려 준다 — 창을 띄우지 않는다 */
.consent.miss { outline: 1px solid rgba(255,140,160,.55);
                outline-offset: 6px; border-radius: 8px; }