/* ════════════════════════════════════════════════════════════════
   천명재 디자인 시스템 v2 — 모던·따뜻·모바일 우선
   타깃: 20·30대 자기이해층 (MBTI·감성 운세 친화)
   원칙: 본문 Pretendard(산세리프) · 제목/한자만 명조 / 밝은 한지톤 /
         둥근 카드 · 넉넉한 여백 · 부드러운 그림자 / 절제된 전통 악센트(금·인장)
   주의: 기존 클래스명·CSS 변수명 100% 보존 (인라인 스타일 호환)
   ════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* ── 기존 변수명 유지 (값만 모던하게 리매핑) ── */
  --bg-paper:     #faf6ef;   /* 밝은 한지 */
  --bg-paper-2:   #f2eae0;
  --bg-card:      #ffffff;   /* 카드는 흰 종이 */
  --ink-dark:     #2a2420;   /* 부드러운 먹 */
  --ink-mid:      #6b6053;
  --ink-light:    #9c9082;
  --accent-red:   #b64540;   /* 인주(印朱) — 따뜻한 코랄 톤 */
  --accent-red-2: #9e332e;
  --accent-gold:  #c39a4e;   /* 금(金) */
  --accent-gold-2:#e3c879;
  --line:         #ece4d6;   /* 옅은 경계 */
  --shadow:       rgba(60, 45, 25, 0.10);

  /* ── 신규 토큰 ── */
  --bg-soft:    #f5efe4;
  --surface-2:  #fbf7f0;
  --blush:      #fbefe9;     /* 살구빛 — 감성 포인트 배경 */
  --blush-2:    #f6ddd3;
  --red-deep:   #8a1a1a;     /* 한자 전통 악센트용 */
  --rose:       #fbeeee;     /* 붉은 칩 배경 */
  --gold-tint:  #f7efda;     /* 금 칩 배경 */
  --good:       #2f7d57;
  --good-bg:    #e9f5ee;

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(60,45,25,0.06), 0 1px 2px rgba(60,45,25,0.04);
  --sh:    0 4px 16px rgba(60,45,25,0.08);
  --sh-lg: 0 12px 36px rgba(60,45,25,0.14);
  --maxw: 1080px;

  --serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --sans:  'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 전역 — 미디어가 컨테이너를 넘지 않도록 (모바일 가로 잘림 방지) */
img, svg, video, canvas { max-width: 100%; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html, body {
  font-family: var(--sans);
  background: var(--bg-paper);
  color: var(--ink-dark);
  line-height: 1.65;
  font-size: 16px;
  letter-spacing: -0.01em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* 한지 결 — 색 워시(고정) + 한지 텍스처(전 페이지 타일) */
body {
  background-image: radial-gradient(circle at 15% 0%, rgba(195,154,78,0.06), transparent 45%),
                    radial-gradient(circle at 85% 8%, rgba(178,59,59,0.045), transparent 40%),
                    url('img/pattern.webp');
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 520px 520px;
  background-attachment: fixed, fixed, scroll;
  background-blend-mode: normal, normal, multiply;
}

a { color: var(--accent-red); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-red-2); }

main { min-height: 50vh; }

/* 제목·한자만 명조 */
h1, h2, h3, .section-title, .han, .brand-name, .seal, .amount,
.pillar-card .kor, .han-stem, .han-branch { font-family: var(--serif); }

.han { display:block; font-size:0.62em; letter-spacing:0.35em; color:var(--accent-gold);
       font-weight:600; margin-bottom:0.5rem; }

/* ───────── 헤더 (밝고 모던 · 스티키) ───────── */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 240, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand-symbol {
  width: 38px; height: 38px; line-height: 38px; text-align: center;
  background: var(--ink-dark); color: var(--accent-gold-2);
  border-radius: 50%; font-size: 1.15rem; flex-shrink: 0;
}
.brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-dark); }
.brand-name .han { display: inline; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--accent-gold); margin: 0 0 0 0.2rem; }

.menu {
  display: flex; align-items: center; gap: 0.2rem;
  flex: 1 1 0; min-width: 0; justify-content: flex-end;   /* 남은 폭 고정 → 내용은 내부 스크롤(헤더 흔들림 방지) */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: var(--ink-mid); font-size: 0.92rem; font-weight: 500;
  padding: 0.45rem 0.7rem; border-radius: var(--r-pill); white-space: nowrap;
  transition: background .15s, color .15s;
}
.menu a:hover { background: var(--bg-soft); color: var(--ink-dark); }

/* 모바일 햄버거 — 좁은 폭에서 메뉴가 잘리지 않고 드롭다운으로 */
.nav-toggle {
  display: none; flex-shrink: 0; width: 42px; height: 42px;
  align-items: center; justify-content: center; line-height: 1;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-dark); font-size: 1.35rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent-gold); }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
    flex: none; flex-direction: column; align-items: stretch;
    background: var(--bg-card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh); padding: 0.3rem 1rem 0.7rem; gap: 0;
    max-height: calc(100dvh - 64px); overflow-y: auto; display: none;
  }
  .site-header.nav-open .menu { display: flex; }
  .menu a { padding: 0.85rem 0.4rem; font-size: 1rem; border-radius: 0;
    border-bottom: 1px solid var(--line); white-space: normal; }
  .menu a:last-child { border-bottom: none; }
}
/* 로그인/계정 액션 — 헤더 우측 다크 칩 (메뉴 밖으로 분리) */
.header-auth {
  flex-shrink: 0; white-space: nowrap; margin-left: auto;
  background: var(--ink-dark); color: var(--bg-paper);
  padding: 0.5rem 1.15rem; border-radius: var(--r-pill);
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, transform .12s ease;
}
.header-auth:hover { background: var(--accent-red); color: #fff; transform: translateY(-1px); }

/* ───────── PC 헤더 — 세련된 언더라인 내비 ───────── */
@media (min-width: 861px) {
  header.site-header { padding: 1.05rem 0; transition: box-shadow .25s ease, background .25s ease, padding .25s ease; }
  .site-header.scrolled { box-shadow: 0 6px 24px rgba(60,45,25,0.08); background: rgba(251,247,240,0.94); padding: 0.72rem 0; }
  /* 브랜드 좌끝 · 메뉴 정중앙 · 로그인 우끝 (풀블리드 3존) */
  /* 가운데 칸은 줄어들 수 있어야 함 — 메뉴가 브랜드/로그인을 침범하지 않게 */
  .header-inner { max-width: none; padding: 0 2.2rem; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 1rem; }
  .brand { justify-self: start; }
  .header-auth { justify-self: end; margin-left: 0; }
  .brand-symbol { width: 42px; height: 42px; line-height: 42px; transition: transform .3s ease, box-shadow .25s ease; border: 1px solid rgba(195,154,78,0.4); }
  .brand:hover .brand-symbol { transform: rotate(-10deg) scale(1.04); box-shadow: 0 4px 14px rgba(195,154,78,0.3); }
  .menu { justify-self: center; gap: 0.2rem; min-width: 0; max-width: 100%; overflow-x: auto; }
  .menu a {
    position: relative; margin: 0; padding: 0.55rem 0.95rem; border-radius: 0; background: none;
    font-size: 0.95rem; font-weight: 500; color: var(--ink-mid); letter-spacing: 0.01em;
    transition: color .15s ease;
  }
  .menu a::after {
    content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.22rem; height: 1.5px;
    background: var(--accent-red); border-radius: 2px;
    transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
  }
  .menu a:hover { background: none; color: var(--ink-dark); }
  .menu a:hover::after { transform: scaleX(1); }
  .menu a.active { color: var(--accent-red); font-weight: 600; }
  .menu a.active::after { transform: scaleX(1); }
}

/* ───────── 히어로 ───────── */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 3.2rem 1.4rem 2.2rem;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.7rem); font-weight: 700; line-height: 1.25;
  color: var(--ink-dark); letter-spacing: 0.02em;
}
.hero .subtitle {
  font-family: var(--sans);
  margin: 1rem auto 0; max-width: 560px;
  color: var(--ink-mid); font-size: 1.02rem; line-height: 1.7;
}
.subtitle { color: var(--ink-mid); }

/* 히어로 일러스트 — aspect-ratio 고정 + cover 로 어떤 화면에서도 찌그러지지 않음 */
.hero-figure {
  max-width: 720px; margin: 1.8rem auto 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--sh); aspect-ratio: 16 / 9; background: var(--surface-2);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ───────── 천명재가 보는 것 (랜딩 기능 발견) ───────── */
.discover { max-width: var(--maxw); margin: 0.5rem auto 0; padding: 1.5rem 1.4rem 0.5rem; text-align: center; }
.discover-title { font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 700; color: var(--ink-dark); letter-spacing: 0.06em; }
.discover-sub { font-family: var(--sans); color: var(--ink-mid); font-size: 0.95rem; margin: 0.6rem auto 1.4rem; max-width: 520px; line-height: 1.7; }

/* ───────── 버튼 ───────── */
.btn-primary, .btn-gold, .btn-secondary {
  font-family: var(--sans); cursor: pointer; border: none;
  border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.02em;
  transition: transform .12s ease, box-shadow .15s, filter .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-primary {
  display: block; width: 100%; margin: 1.6rem 0 0; padding: 0.95rem 2rem;
  background: var(--accent-red); color: #fff; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(178,59,59,0.28);
}
.btn-primary:hover { background: var(--accent-red-2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(178,59,59,0.34); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: #d8b9b9; box-shadow: none; cursor: not-allowed; transform: none; }

.btn-gold {
  padding: 0.95rem 2rem; font-size: 1.02rem;
  background: linear-gradient(135deg, var(--accent-gold-2), var(--accent-gold));
  color: #fff; box-shadow: 0 6px 18px rgba(195,154,78,0.32);
}
.btn-gold:hover { filter: brightness(1.05); color: #fff; transform: translateY(-2px); }
.btn-gold:active { transform: translateY(0); }

.btn-secondary {
  padding: 0.7rem 1.4rem; background: var(--surface-2); color: var(--ink-dark);
  border: 1px solid var(--line); font-weight: 600;
}
.btn-secondary:hover { background: var(--bg-soft); color: var(--ink-dark); border-color: var(--accent-gold); }

/* ───────── 카드 공통 / 폼 ───────── */
.form-card, .info-section {
  max-width: 920px; margin: 1.4rem auto; padding: 1.8rem;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh);
}
.form-card h2, .info-section h3 { text-align: center; letter-spacing: 0.2em; margin-bottom: 1.4rem; color: var(--ink-dark); }

.form-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.form-row > label { width: 110px; flex-shrink: 0; font-weight: 600; color: var(--ink-mid); font-size: 0.95rem; }
.form-row input, .form-row select {
  flex: 1; min-width: 0; padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 1rem; background: var(--surface-2); color: var(--ink-dark);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-row input:focus, .form-row select:focus, .feature-saju input:focus, .feature-saju select:focus {
  outline: none; border-color: var(--accent-gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(195,154,78,0.18);
}
.row-flex { display: flex; align-items: center; gap: 0.7rem; flex: 1; flex-wrap: wrap; }
.row-flex small, .form-row small { color: var(--ink-light); font-size: 0.82rem; }

/* ───────── 결과 영역 ───────── */
.result-section { max-width: var(--maxw); margin: 1.5rem auto; padding: 0 1rem; display: none; }
.result-section.visible { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.section-title { text-align: center; font-size: 1.5rem; letter-spacing: 0.25em; margin: 1.5rem 0; color: var(--ink-dark); }

.info-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--ink-light); font-size: 0.9rem; flex-shrink: 0; }
.info-row .value { color: var(--ink-dark); text-align: right; font-weight: 500; }

/* ───────── 4기둥 카드 ───────── */
.pillars-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem;
  max-width: var(--maxw); margin: 1.2rem auto;
}
.pillar-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.1rem 0.8rem; text-align: center; box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .15s;
}
.pillar-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.pillar-card.day { border-color: var(--accent-gold); background: linear-gradient(180deg, var(--gold-tint), var(--bg-card) 60%); }
.pillar-card .position { font-size: 0.8rem; color: var(--accent-gold); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.pillar-card .han-stem, .pillar-card .han-branch { display: block; font-size: 2rem; line-height: 1.15; color: var(--ink-dark); }
.pillar-card .han-branch { color: var(--accent-red); }
.pillar-card .kor { font-size: 1.05rem; font-weight: 700; margin: 0.3rem 0 0.5rem; color: var(--ink-dark); }
.pillar-card .meta { font-size: 0.82rem; color: var(--ink-mid); line-height: 1.6; }
.pillar-card .nayuum { margin-top: 0.3rem; color: var(--ink-light); font-size: 0.76rem; }
.gongmang-mark { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.62rem; color: var(--accent-red); background: var(--rose); padding: 0.1rem 0.35rem; border-radius: var(--r-pill); }
.gongmang-mark.year { top: 1.5rem; color: var(--ink-light); background: var(--bg-soft); }

/* 태그 (신살·귀인) */
.tag { display: inline-block; font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: var(--r-pill); margin: 0.1rem; }
.tag.year-basis { background: var(--rose); color: var(--accent-red); }
.tag.day-basis  { background: var(--gold-tint); color: #8a6a1e; }
.tag.gwiin      { background: var(--good-bg); color: var(--good); }
.tag.gongmang   { background: #eee; color: #777; }
.shinsal-tags, .gwiin-tags, .shinsal-row, .gwiin-row, .daewoon-shinsal { margin-top: 0.3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; }

/* ───────── 무료/프리미엄 섹션 ───────── */
.free-tier, .premium-tier {
  max-width: 920px; margin: 1.4rem auto; padding: 1.8rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh);
}
.free-tier > h3, .premium-tier > h3 {
  font-size: 1.15rem; letter-spacing: 0.12em; color: var(--ink-dark);
  margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--gold-tint);
}
.free-tier h4, .premium-tier h4 { font-family: var(--sans); }

/* 오행 막대 — 그리드 컬럼으로 정렬(아이콘·이름·막대·수치) + 차트 블록 가운데 정렬 */
.ohhang-chart { display: flex; flex-direction: column; gap: 0.55rem; max-width: 460px; margin: 0 auto; }
.ohhang-bar { display: grid; grid-template-columns: 28px 1.8rem 1fr 2.6rem; align-items: center; gap: 0.6rem; }
.ohhang-bar .oh-ico { justify-self: center; }
.ohhang-bar .name { text-align: center; font-weight: 700; }
.ohhang-bar .name.목 { color: #3f8f5b; } .ohhang-bar .name.화 { color: #c0453b; }
.ohhang-bar .name.토 { color: #b0852f; } .ohhang-bar .name.금 { color: #8a8f97; }
.ohhang-bar .name.수 { color: #3a6ea5; }
.ohhang-bar .track { height: 12px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
.ohhang-bar .fill { height: 100%; background: linear-gradient(90deg, var(--accent-gold-2), var(--accent-gold)); border-radius: var(--r-pill); transition: width .6s ease; }
.ohhang-bar .num { text-align: right; font-size: 0.9rem; color: var(--ink-mid); font-variant-numeric: tabular-nums; }

/* 대운/세운 타임라인 */
.daewoon-timeline { display: flex; flex-direction: column; gap: 0.4rem; }
.daewoon-row { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6rem; align-items: start;
  padding: 0.7rem 0.9rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.85rem; }
.daewoon-row.current { border-color: var(--accent-gold); background: var(--gold-tint); }
.daewoon-row .age { color: var(--ink-light); white-space: nowrap; }
.daewoon-row .gapja { font-weight: 700; color: var(--accent-red); white-space: nowrap; }
.daewoon-row .summary { color: var(--ink-mid); }

/* 신살·납음 — 태그 클릭 시 뜻 표시 */
.extras-lead { text-align: center; color: var(--ink-mid); font-size: 0.85rem; margin: 0 0 0.9rem; line-height: 1.6; }
.extras-lead b { color: var(--accent-red); }
.extras-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; align-items: stretch; }
.extra-col { text-align: center; display: flex; flex-direction: column; }
.extra-head { font-size: 0.8rem; color: var(--accent-gold); font-weight: 700; margin-bottom: 0.4rem; }
.extra-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.55rem 0.3rem; min-height: 3rem; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; }
.extra-empty { color: var(--ink-light); }
.etag-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.28rem; }
.etag { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; padding: 0.28rem 0.55rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink-dark); cursor: pointer; transition: transform .1s, box-shadow .12s, background .12s; line-height: 1.3; }
.etag:hover { transform: translateY(-1px); }
.etag.ny { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); font-weight: 700; }
.etag.ny .ny-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.etag.ss { background: var(--rose); color: var(--accent-red); border-color: #eecccc; }
.etag.gw { background: var(--good-bg); color: var(--good); border-color: #c7e6d3; }
.etag.on { box-shadow: 0 0 0 2px var(--accent-gold); background: #fff; color: var(--ink-dark); }
.extras-detail { margin-top: 0.9rem; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--accent-gold); border-radius: var(--r); padding: 0.9rem 1.2rem; min-height: 2.2rem; }
.extras-detail .ed-hint { color: var(--ink-light); font-size: 0.86rem; }
.ed-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink-dark); display: flex; align-items: center; gap: 6px; margin-bottom: 0.35rem; }
.ed-title .ed-dot { width: 12px; height: 12px; border-radius: 50%; }
.ed-title .ed-han { font-size: 0.82rem; color: var(--ink-light); font-weight: 500; }
.ed-desc { color: var(--ink-dark); line-height: 1.75; }
.extras-foot { margin-top: 0.9rem; font-size: 0.84rem; color: var(--ink-mid); line-height: 1.6; }
.extras-foot .ftag { color: var(--accent-red); font-weight: 700; margin-right: 0.4rem; }

/* ───────── 해석(읽는 풀이) ───────── */
.interpret-section {
  margin: 0 0 1.1rem; padding: 1.2rem 1.3rem; background: var(--surface-2);
  border: 1px solid var(--line); border-left: 4px solid var(--accent-gold); border-radius: var(--r);
}
.interpret-section h4 { margin: 0 0 0.6rem; color: var(--accent-red); letter-spacing: 0.06em; font-size: 1.08rem; font-family: var(--sans); font-weight: 700; }
.interpret-section p { margin: 0 0 0.5rem; line-height: 1.85; color: var(--ink-dark); }
.interpret-section p:last-child { margin-bottom: 0; }
.interpret-disclaimer { margin-top: 1rem; font-size: 0.82rem; color: var(--ink-light); line-height: 1.6; }

/* ───────── 도령의 깊은 풀이 (AI) ───────── */
.ai-badge {
  display: inline-block; vertical-align: middle; margin-left: 0.5rem;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  color: #fff; background: linear-gradient(135deg, var(--accent-red), #c9742e);
  padding: 0.22em 0.6em; border-radius: 999px; transform: translateY(-2px);
}
.ai-lead { color: var(--ink-mid); font-size: 0.94rem; line-height: 1.7; margin: 0.2rem 0 1rem; }
/* 도령의 깊은 풀이 본문 — 바깥 .premium-tier 가 유일한 카드.
   여기선 카드 껍데기 없이 평탄하게(이중 카드 방지). 서사는 .dr-body/.dr-chapter 로 렌더.
   (구 .ai-reading 카드 + .ai-sec/스트리밍/로딩/이어보기 스타일은 서사 전환으로 폐기) */
.ai-reading { min-height: 3rem; }

/* 명식 진입 CTA (홈 결과) */
.manse-cta { display:flex; align-items:center; gap:1rem; margin:0 0 1.6rem; padding:1rem 1.3rem; background:linear-gradient(180deg,#fffdf7,var(--surface-2)); border:1px solid var(--accent-gold); border-radius:var(--r-lg); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.manse-cta:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(195,154,78,0.22); }
.manse-cta .mc-ico { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--ink-dark); color:var(--accent-gold); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:24px; font-weight:700; }
.manse-cta .mc-txt { flex:1; min-width:0; }
.manse-cta .mc-txt b { display:block; font-family:var(--serif); font-size:1.05rem; color:var(--ink-dark); margin-bottom:2px; }
.manse-cta .mc-txt span { display:block; font-size:0.82rem; color:var(--ink-mid); line-height:1.5; }
.manse-cta .mc-arrow { flex-shrink:0; color:var(--accent-red); font-size:1.3rem; font-weight:700; }

/* ═══════════ 내 명식 자세히 (만세력 뷰어) ═══════════ */
.manse-summary { display:flex; align-items:center; gap:1rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.3rem; margin-bottom:1.6rem; }
.ms-day { flex-shrink:0; width:60px; height:72px; border-radius:14px; border:2px solid var(--accent-gold); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-family:var(--serif); font-weight:700; background:#fff; line-height:1; }
.ms-day .ms-c { font-size:27px; }
.ms-title { font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--ink-dark); margin-bottom:0.2rem; }
.ms-line { font-size:0.86rem; color:var(--ink-mid); line-height:1.55; }
.ms-sol { color:var(--accent-red); }
.manse-sec { margin:0 0 2rem; }
.manse-sec > h3 { font-family:var(--serif); font-size:1.18rem; color:var(--ink-dark); letter-spacing:0.06em; margin-bottom:0.9rem; display:flex; align-items:baseline; gap:0.6rem; }
.manse-sec .ms-sub { font-family:var(--sans); font-size:0.78rem; font-weight:500; color:var(--ink-light); letter-spacing:0.02em; }
.mnone { color:var(--ink-mid); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.2rem; line-height:1.7; }
.mnote { font-size:0.8rem; color:var(--ink-light); margin-top:0.7rem; line-height:1.6; }

/* 관계 칩 */
.chip-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.rchip { font-family:var(--sans); font-size:0.92rem; font-weight:600; padding:0.55rem 1rem; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line); color:var(--ink-dark); cursor:pointer; transition:transform .12s, background .15s, border-color .15s; }
.rchip:hover { border-color:var(--ink-light); transform:translateY(-1px); }
.rchip.on { background:var(--ink-dark); color:#fff; border-color:var(--ink-dark); }
.rchip.r-chung { border-color:#e3b4b4; } .rchip.r-hyeong { border-color:#e3cdb4; }
.rchip.r-hap { border-color:#b7ceb9; } .rchip.r-gong { border-color:#cdb9d6; }
.rel-detail { background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent-gold); border-radius:var(--r); padding:1.1rem 1.3rem; min-height:2.5rem; margin-bottom:1.4rem; }
.mtbl-wrap { margin-top:0.2rem; }
.rel-hint { color:var(--ink-light); font-size:0.9rem; line-height:1.6; }
.rel-title { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--accent-red); margin-bottom:0.5rem; }
.rel-formula { font-family:var(--serif); font-size:1.25rem; color:var(--ink-dark); margin-bottom:0.6rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.35rem; }
.rf-pos { font-family:var(--sans); font-size:0.72rem; color:var(--ink-light); vertical-align:super; }
.rf-op { color:var(--ink-mid); font-size:1.1rem; } .rf-op.red { color:var(--accent-red); }
.rf-res { font-family:var(--sans); font-size:0.9rem; color:var(--ink-mid); }
.rel-desc { color:var(--ink-dark); line-height:1.8; }
.void-badges { font-size:0.92rem; color:var(--ink-mid); margin-bottom:0.5rem; }
.void-chip-b { display:inline-flex; align-items:baseline; gap:2px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px 7px; margin-left:4px; font-family:var(--serif); font-weight:700; }
.void-chip-b small { font-family:var(--sans); font-weight:500; color:var(--ink-light); }

/* 원국 — 좌측 구분 열 없이 4열(시·일·월·년) 카드. 어떤 화면에서도 잘리지 않음 */
.wg-grid { display:grid; grid-template-columns:repeat(var(--wg-cols, 4), 1fr); gap:0.4rem; }
.wg-col {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:0.55rem 0.25rem 0.5rem; text-align:center; min-width:0;
}
.wg-col.day { border-color:var(--accent-gold); background:linear-gradient(180deg, var(--gold-tint), #fff 55%); }
.wg-head { font-size:0.74rem; font-weight:700; color:var(--accent-gold); letter-spacing:0.02em; margin-bottom:0.3rem; }
.wg-sipsin { font-size:0.7rem; color:var(--ink-mid); line-height:1.3; min-height:1.1em; word-break:keep-all; }
.wg-char {
  font-family:var(--serif); font-size:1.85rem; font-weight:700; line-height:1.1; position:relative;
  margin:0.15rem 0 0; transition:opacity .2s ease, box-shadow .15s, background .15s; border-radius:6px;
}
.wg-sub { font-size:0.64rem; color:var(--ink-light); margin-top:1px; word-break:keep-all; }
.wg-ji { margin-top:0.35rem; }
.void-badge { position:absolute; top:-4px; right:calc(50% - 1.4em); font-family:var(--sans); font-size:0.48rem; font-weight:700; color:#fff; background:#8a6ea8; border-radius:4px; padding:1px 3px; }
.wg-attrs { margin:0.5rem 0 0; padding:0.4rem 0 0; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:0.28rem; }
.wg-attr { display:flex; flex-direction:column; gap:1px; }
.wg-attr dt { font-size:0.58rem; font-weight:700; color:var(--accent-gold); letter-spacing:0.02em; }
.wg-attr dd { margin:0; font-size:0.68rem; color:var(--ink-dark); line-height:1.35; word-break:keep-all; }
.jjg { font-family:var(--serif); font-weight:600; margin:0 1px; }
.gwiin { display:inline-block; font-size:0.62rem; color:var(--ink-dark); background:var(--gold-tint); border-radius:4px; padding:0 3px; }
/* 칩 선택 시 — 관련 없는 글자는 흐리게, 선택 글자는 인주 테두리로 또렷 */
.wg-grid.dimmed .wg-char { opacity:0.4; }
.wg-grid.dimmed .wg-char.hot { opacity:1; background:#fff7ec; box-shadow:0 0 0 2.5px var(--accent-red); }
@media (max-width:400px) {
  .wg-grid { gap:0.28rem; }
  .wg-col { padding:0.5rem 0.15rem; }
  .wg-char { font-size:1.6rem; }
  .wg-attr dd { font-size:0.64rem; }
}

/* 오행 상생상극 다이어그램 */
.ohd-wrap { display:flex; flex-direction:column; align-items:center; }
.ohd-svg { width:min(300px, 86%); height:auto; }
.ohd-han { font-family:var(--serif); font-size:22px; font-weight:700; fill:#fff; text-anchor:middle; }
.ohd-cnt { font-family:var(--sans); font-size:12px; fill:var(--ink-mid); text-anchor:middle; }
.saeng { stroke:#3a6ea5; stroke-width:2.4; fill:none; transition:stroke-dashoffset 1s ease; transition-delay:calc(var(--i,0)*0.08s); }
.geuk { stroke:#c0453b; stroke-width:1.6; stroke-dasharray:5 4; fill:none; opacity:0; transition:opacity .55s ease; transition-delay:calc(var(--i,0)*0.05s); }
.ohd-svg.drawn .geuk { opacity:1; }
.ohd-node circle { transition:transform .3s ease; }
.ohd-legend { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; margin-top:0.4rem; font-size:0.82rem; color:var(--ink-mid); }
.ohd-legend i { display:inline-block; width:18px; height:0; vertical-align:middle; margin-right:4px; }
.lg-saeng { border-top:2px solid #3a6ea5; } .lg-geuk { border-top:2px dashed #c0453b; }

/* 오행 비율 막대 */
.ratio-bars { display:flex; justify-content:center; gap:0.7rem; align-items:flex-end; padding:0.5rem 0; }
.rbar { display:flex; flex-direction:column; align-items:center; gap:0.25rem; flex:1; max-width:80px; }
.rbar-track { position:relative; width:100%; max-width:54px; height:140px; background:var(--bg-soft); border-radius:var(--r-sm); display:flex; align-items:flex-end; overflow:hidden; }
.rbar-fill { width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0; transition:height 1s cubic-bezier(.2,.7,.2,1); }
.rbar-pct { position:absolute; top:4px; left:0; right:0; text-align:center; font-size:0.74rem; font-weight:700; color:var(--ink-dark); }
.rbar-ico { width:22px; height:22px; object-fit:contain; margin-top:0.3rem; }
.rbar-han { font-family:var(--serif); font-size:1.25rem; font-weight:700; line-height:1; } .rbar-ko { font-size:0.72rem; color:var(--ink-light); }
.rbar-role { font-size:0.7rem; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); }
.rbar-role.none { visibility:hidden; } .role-용신 { background:#fbeeee; color:#b23b3b; } .role-희신 { background:#f7efda; color:#9a7420; } .role-기신 { background:#eef0f2; color:#5f6b78; }
.yong-badges { display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.yong-badge { display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:0.4rem 0.9rem; font-size:0.9rem; font-weight:600; }
.yb-dot { width:12px; height:12px; border-radius:50%; }

/* 신강/신약 게이지 */
.gauge-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.9rem; }
.gauge-pill { background:#e2f0ec; color:#1f7a63; font-weight:700; border-radius:var(--r-pill); padding:0.4rem 1rem; font-size:0.95rem; }
.gauge-il { font-size:0.95rem; color:var(--ink-mid); }
.gauge-bar { position:relative; padding-top:17px; }
.gauge-track { display:flex; border-radius:var(--r-pill); overflow:hidden; }
.gseg { flex:1; text-align:center; font-size:0.74rem; font-weight:600; color:var(--ink-mid); padding:0.5rem 0.2rem; background:var(--bg-soft); }
.gseg:first-child { background:#e2f0ec; } .gseg:nth-child(2){ background:#e9f2df; } .gseg:nth-child(3){ background:#f7efda; } .gseg:nth-child(4){ background:#f6e2cf; } .gseg:last-child { background:#f6d8cf; }
.gseg.on { color:var(--ink-dark); font-weight:800; box-shadow:inset 0 -3px 0 var(--accent-red); }
/* 현재 위치 — 아래를 가리키는 화살표만 (세로 | 막대·구분선 제거) */
.gauge-marker { position:absolute; top:0; width:0; height:0; transform:translateX(-50%);
  border-left:9px solid transparent; border-right:9px solid transparent; border-top:13px solid var(--accent-red);
  filter:drop-shadow(0 1px 2px rgba(60,45,25,0.35)); pointer-events:none; }

/* 대운·연운·월운 가로 카드 (클릭 선택) */
.luck-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 0.6rem; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--accent-gold) transparent; scroll-behavior:smooth; }
.luck-scroll.grabbing { cursor:grabbing; scroll-behavior:auto; }
.luck-scroll::-webkit-scrollbar { height:6px; }
.luck-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.luck-scroll:hover::-webkit-scrollbar-thumb { background:var(--accent-gold); }
.luck-scroll::-webkit-scrollbar-track { background:transparent; }
.luck-cards { display:flex; gap:0.6rem; width:max-content; }
.luck-card { flex:0 0 auto; width:66px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r); padding:0.5rem 0.3rem; text-align:center; cursor:pointer; user-select:none; transition:transform .12s, border-color .15s, box-shadow .15s; }
.luck-card:hover { transform:translateY(-2px); border-color:var(--ink-light); }
.luck-card.now { border-color:var(--accent-gold); background:#fffdf6; }
.luck-card.sel { border-color:var(--accent-red); border-width:2px; box-shadow:0 3px 12px rgba(178,59,59,0.18); }
.lc-top, .lc-bot { font-size:0.7rem; color:var(--ink-mid); min-height:0.9rem; }
.lc-gz { font-family:var(--serif); font-size:1.5rem; font-weight:700; line-height:1.15; }
.lc-age { font-size:0.72rem; color:var(--ink-dark); font-weight:600; margin-top:2px; }
.lc-now { font-size:0.66rem; font-weight:700; color:var(--accent-gold); }
.wol-head { font-family:var(--serif); font-size:0.95rem; color:var(--ink-mid); margin-bottom:0.5rem; }

/* ───────── 잠금 CTA ───────── */
.locked-overlay { position: relative; max-height: 220px; overflow: hidden; filter: blur(3px); opacity: 0.55; pointer-events: none; }
.unlock-cta {
  text-align: center; padding: 2.2rem 1.5rem; margin-top: 1rem;
  background: linear-gradient(180deg, var(--gold-tint), var(--surface-2));
  border: 1px solid var(--accent-gold-2); border-radius: var(--r-lg);
}
.unlock-cta h3 { letter-spacing: 0.25em; color: var(--accent-red); margin: 0.8rem 0; border: none; padding: 0; }
.unlock-cta p { color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.2rem; }

/* ───────── 인장(印) ───────── */
.seal {
  display: inline-block; width: 52px; height: 52px; line-height: 52px;
  background: var(--accent-red); color: #fff; border-radius: 10px; text-align: center;
  font-size: 1.3rem; font-weight: 600; border: 2px solid var(--accent-red-2);
  box-shadow: 0 4px 12px rgba(178,59,59,0.3);
}
.seal-modal { display: block; margin: 0 auto 1.2rem; transform: none; }

/* ───────── 운세 더보기 / 기능 카드 ───────── */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 720px; margin: 0 auto; }
.feature-card {
  display: block; text-align: center; padding: 1.8rem 1rem; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink-dark);
  box-shadow: var(--sh-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--accent-gold); color: var(--ink-dark); }
.feature-card .fc-icon {
  width: 52px; height: 52px; line-height: 52px; margin: 0 auto 0.8rem;
  background: linear-gradient(135deg, var(--accent-red), var(--red-deep)); color: #fff;
  border-radius: 50%; font-size: 1.4rem; font-family: var(--serif);
}
.feature-card .fc-img {
  width: 96px; height: 96px; margin: 0 auto 0.8rem; display: block;
  border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-tint);
}
.feature-card .fc-title { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-red); }
.feature-card .fc-desc { font-size: 0.84rem; color: var(--ink-light); margin-top: 0.4rem; }

/* 기능 페이지 — 사주 입력 / 잠금 */
.feature-saju { background: var(--surface-2); border: 1px solid var(--line);
  padding: 1.1rem 1.2rem; border-radius: var(--r-lg); margin-bottom: 1.1rem; }
.feature-saju .fs-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; flex-wrap: wrap; row-gap: 0.5rem; }
.feature-saju .fs-row:last-child { margin-bottom: 0; }
.feature-saju .fs-row > label { width: 78px; flex-shrink: 0; font-size: 0.9rem; color: var(--ink-mid); font-weight: 600; }
.feature-saju input, .feature-saju select { flex: 1; min-width: 0; padding: 0.72rem 0.8rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); font-family: var(--sans); font-size: 0.95rem; background: #fff; color: var(--ink-dark); }
.feature-saju .fs-hint { flex-shrink: 0; font-size: 0.8rem; color: var(--ink-light); }

/* 네이티브 날짜·시간 입력 — 값(예: 오후 12:00)이 칸 안에서 잘리지 않도록 최소폭 확보.
   좁으면 같은 줄의 힌트가 아래로 줄바꿈됨(.row-flex/.fs-row 가 wrap). */
input[type="time"], input[type="date"] { min-width: 9.5em; max-width: 100%; }
.feature-saju .adv { border-top: 1px dashed var(--line); margin-top: 0.7rem; padding-top: 0.1rem; }
.feature-saju .adv > summary { cursor: pointer; list-style: none; font-family: var(--sans); font-size: 0.88rem;
  color: var(--accent-gold-2); font-weight: 600; padding: 0.55rem 0.2rem; user-select: none; }
.feature-saju .adv > summary::-webkit-details-marker { display: none; }
.feature-saju .adv > summary::before { content: "▸ "; color: var(--accent-gold); }
.feature-saju .adv[open] > summary::before { content: "▾ "; }
.feature-saju .adv .fs-row { margin-top: 0.7rem; }
.fs-section-title { letter-spacing: 0.12em; font-size: 1rem; margin: 0 0 0.6rem; color: var(--accent-red); font-weight: 700; }
/* 기능 액션 줄 (연도·이벤트 선택 + 실행 버튼) */
.feature-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; margin-bottom: 1.2rem; }
.feature-actions select { flex: 1; min-width: 120px; padding: 0.8rem 0.9rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--sans); font-size: 0.95rem; background: #fff; }
.feature-actions .btn-primary { width: auto; margin: 0; flex-shrink: 0; padding: 0.8rem 2.2rem; font-size: 1rem; letter-spacing: 0.08em; text-indent: 0; }
.feature-lock { text-align: center; padding: 2.5rem 1.5rem; background: var(--surface-2);
  border: 1px dashed var(--accent-gold); border-radius: var(--r-lg); }
.feature-lock h4 { letter-spacing: 0.1em; color: var(--accent-red); margin: 0.8rem 0 0.5rem; font-family: var(--sans); }
.feature-lock p { color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.2rem; }

/* ───────── 결제 카드 ───────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: var(--maxw); margin: 1.5rem auto; padding: 0 1.2rem; }
.price-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.6rem; text-align: center; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.price-card.featured { border: 2px solid var(--accent-gold); box-shadow: var(--sh); position: relative; }
.price-card.featured::before {
  content: '추천'; position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
  background: var(--accent-gold); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.9rem; border-radius: var(--r-pill); letter-spacing: 0.1em;
}
.price-card h3 { font-size: 1.2rem; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.price-card .amount { font-size: 2.2rem; font-weight: 700; color: var(--accent-red); }
.price-card .amount .unit { font-size: 0.95rem; font-weight: 500; color: var(--ink-light); margin-left: 0.2rem; }
.price-card ul { list-style: none; text-align: left; margin: 1.2rem 0; flex: 1; }
.price-card ul li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; color: var(--ink-mid); font-size: 0.92rem; line-height: 1.5; }
.price-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-gold); font-weight: 700; }
.price-card button { margin-top: auto; }

/* ───────── 모달 ───────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(42,36,32,0.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal-backdrop.open { display: flex; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-card); border-radius: var(--r-lg); padding: 2.2rem; max-width: 460px; width: 100%;
  text-align: center; box-shadow: var(--sh-lg); animation: popIn .25s ease;
  max-height: calc(100dvh - 1.6rem); overflow-y: auto; overscroll-behavior: contain;
}
/* 모달 안 혜택 리스트 — 카드 대신 컴팩트 줄 (세로 공간 절약) */
.modal .benefit-list { gap: 0.15rem; margin: 0.8rem auto; }
.modal .benefit-list li { padding: 0.4rem 0.4rem; border: none; background: none; box-shadow: none; }
@media (max-width: 620px) { .modal { padding: 1.6rem 1.3rem; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 1.3rem; letter-spacing: 0.15em; }
.modal p { color: var(--ink-mid); margin: 0.8rem 0 1.2rem; }
.modal input { width: 100%; padding: 0.85rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 1rem; margin-bottom: 0.6rem; background: var(--surface-2); }
.modal input:focus { outline: none; border-color: var(--accent-gold); background: #fff; box-shadow: 0 0 0 3px rgba(195,154,78,0.18); }
.modal-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; }
.modal-actions .btn-gold, .modal-actions .btn-secondary { display: block; width: 100%; margin: 0; text-align: center; }
.modal-actions .btn-secondary { font-size: 0.9rem; }
.modal-close-link { background: none; border: none; color: var(--ink-mid); cursor: pointer; font-family: var(--sans);
  font-size: 0.9rem; padding: 0.3rem; margin-top: 0.2rem; }
.modal-close-link:hover { color: var(--ink-dark); }

/* ───────── 학파소개 등 글 ───────── */
.about-article { max-width: 760px; margin: 2rem auto; background: var(--bg-card); border: 1px solid var(--line);
  padding: 2.5rem; line-height: 1.9; border-radius: var(--r-lg); box-shadow: var(--sh); }
.about-article h2 { font-family: var(--serif); }
.about-article p { margin-bottom: 1rem; color: var(--ink-mid); }

/* ───────── 푸터 ───────── */
.site-footer { background: var(--ink-dark); color: var(--bg-paper); text-align: center;
  padding: 2.5rem 1.4rem; margin-top: 3rem; line-height: 1.7; }
.site-footer a { color: var(--accent-gold-2); }
.footer-quote { font-family: var(--serif); font-size: 1.1rem; color: var(--accent-gold-2); letter-spacing: 0.1em; margin-bottom: 0.6rem; }

/* ═══════════ P0 타깃 고도화 ═══════════ */

/* 히어로 CTA (앵커형 빨강 알약) */
.btn-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.85rem 1.9rem; border-radius: var(--r-pill); text-decoration: none;
  background: var(--accent-red); color: #fff; font-family: var(--sans); font-weight: 700;
  box-shadow: 0 6px 18px rgba(178,59,59,0.28);
  transition: transform .12s ease, box-shadow .15s, background .15s;
}
.btn-cta:hover { background: var(--accent-red-2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(178,59,59,0.34); }

/* 질문형 4카드 라우터 */
.q-cards { grid-template-columns: repeat(4, 1fr); max-width: 940px; gap: 0.9rem; }
.q-cards .feature-card { padding: 1.4rem 0.9rem; }
.q-cards .fc-title { font-size: 1rem; letter-spacing: 0; line-height: 1.35; }
.q-cards .fc-desc { font-size: 0.8rem; }
.fc-me { object-position: 72% 42%; }   /* 히어로 인물 쪽으로 크롭 */

/* 고급 옵션 (음력·출생지) */
.adv { margin: 0.3rem 0 0.5rem; border-top: 1px dashed var(--line); padding-top: 0.4rem; }
.adv > summary {
  cursor: pointer; list-style: none; font-family: var(--sans); font-size: 0.9rem;
  color: var(--accent-gold-2); font-weight: 600; padding: 0.55rem 0.2rem; user-select: none;
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::before { content: "▸ "; color: var(--accent-gold); }
.adv[open] > summary::before { content: "▾ "; }
.adv > summary:hover { color: var(--accent-red); }
.adv-body { padding-top: 0.4rem; }

/* 한눈 요약 카드 (번역 레이어 — 무료 핵심 훅) */
.summary-hero {
  background: linear-gradient(135deg, #fff, var(--surface-2));
  border: 1px solid var(--gold-tint); border-radius: var(--r-lg);
  padding: 1.6rem 1.6rem 1.3rem; margin: 0.2rem 0 1.2rem; box-shadow: var(--sh-sm);
}
.summary-hero .s-eyebrow { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--accent-gold-2); font-weight: 700; }
.summary-hero .s-oneline { font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 700; color: var(--ink-dark); line-height: 1.45; margin: 0.4rem 0 0.2rem; }
.summary-hero .s-oneline .em { color: var(--accent-red); }
.summary-hero .s-body { color: var(--ink-mid); line-height: 1.7; margin-top: 0.4rem; font-size: 0.96rem; }
.summary-hero .s-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.summary-hero .s-tag { font-family: var(--sans); font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--bg-paper); border: 1px solid var(--line); color: var(--ink-mid); }

/* 생활영역 5칸 */
.life-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; margin: 0 0 1.4rem; }
.life-cell { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 0.7rem; text-align: center; }
.life-cell .l-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto 0.5rem; border-radius: 50%;
  background: var(--gold-tint); color: var(--accent-red); font-family: var(--serif); font-size: 1.15rem;
}
.life-cell .l-name { font-family: var(--sans); font-weight: 700; font-size: 0.86rem; color: var(--accent-red); margin-bottom: 0.35rem; letter-spacing: 0.04em; }
.life-cell .l-txt { font-size: 0.82rem; color: var(--ink-mid); line-height: 1.5; }

/* 공유 바 */
.share-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0.4rem 0 1.4rem; }

/* 도령 캐릭터 — 아바타/화법 (이미지 도착 전 인장 플레이스홀더) */
.dy-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.dy-avatar {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2);
  color: var(--accent-red); font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  border: 2px solid var(--gold-tint); box-shadow: var(--sh-sm);
}
.dy-avatar-sm { width: 30px; height: 30px; font-size: 0.95rem; vertical-align: middle; border-width: 1.5px; }
.dy-name { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--accent-red); letter-spacing: 0.02em; }

/* 도령 이미지 — 로딩/페이월, 오행 아이콘 */
.dy-loading-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; font-style: normal; }
.dy-loading { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; box-shadow: var(--sh); animation: dy-pulse 1.6s ease-in-out infinite; }
@keyframes dy-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: 1; } }
.dy-paywall { width: 168px; height: auto; display: block; margin: 0 auto 0.6rem; filter: drop-shadow(0 6px 16px rgba(60,45,25,0.18)); }
.oh-ico { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
.result-dy { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.5rem; display: block; box-shadow: var(--sh); }
.empty-dy { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.8rem; display: block; opacity: .96; }
.feature-hero-img { width: min(280px, 64%); height: auto; border-radius: 20px; margin: 1.5rem auto 0; display: block; box-shadow: var(--sh); }
.about-fig { width: 100%; height: auto; border-radius: 14px; margin: 1.6rem 0 0.6rem; display: block; box-shadow: var(--sh-sm); }

/* ───────── 회원가입 인증번호 입력행 ───────── */
.auth-code-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.5rem; }
.auth-code-input {
  flex: 1; min-width: 0; height: 48px; padding: 0 0.9rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--sans); font-size: 1.05rem;
  letter-spacing: 0.25em; text-align: center; background: #fff; color: var(--ink-dark);
}
.auth-code-input:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(195,154,78,0.18); }
.auth-code-btn {
  flex-shrink: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 1.2rem; border: none; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent-gold-2), var(--accent-gold)); color: #4a3614;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: filter .15s, transform .12s, opacity .15s;
}
.auth-code-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-code-btn:disabled { background: var(--line); color: var(--ink-light); cursor: not-allowed; transform: none; filter: none; }
.auth-code-note { font-size: 0.8rem; color: var(--ink-light); line-height: 1.55; margin-bottom: 0.4rem; }

/* ───────── 모션 — 절제된 진입/리빌 (타깃 친화) ───────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 스크롤 리빌(정적 요소) — JS 가 .anim-reveal 부여, 보이면 .anim-in */
.anim-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.anim-reveal.anim-in { opacity: 1; transform: none; }
/* 동적 결과(요약·기둥·생활영역)는 삽입 시 자동 재생 */
.summary-hero { animation: fadeUp .55s ease both; }
.life-grid .life-cell { animation: fadeUp .5s ease both; }
.life-grid .life-cell:nth-child(2) { animation-delay: .06s; }
.life-grid .life-cell:nth-child(3) { animation-delay: .12s; }
.life-grid .life-cell:nth-child(4) { animation-delay: .18s; }
.life-grid .life-cell:nth-child(5) { animation-delay: .24s; }
.pillars-grid .pillar-card { animation: fadeUp .5s ease both; }
.pillars-grid .pillar-card:nth-child(2) { animation-delay: .07s; }
.pillars-grid .pillar-card:nth-child(3) { animation-delay: .14s; }
.pillars-grid .pillar-card:nth-child(4) { animation-delay: .21s; }
/* 히어로/질문카드 로드 시 진입 */
.hero h1 { animation: fadeUp .6s ease both; }
.hero .subtitle { animation: fadeUp .6s ease .08s both; }
.hero .hero-figure { animation: fadeUp .7s ease .14s both; }
.qrouter .feature-card { animation: fadeUp .5s ease both; }
.qrouter .feature-card:nth-child(2) { animation-delay: .08s; }
.qrouter .feature-card:nth-child(3) { animation-delay: .16s; }
.qrouter .feature-card:nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .anim-reveal, .summary-hero, .life-cell, .pillar-card, .hero h1, .hero .subtitle,
  .hero .hero-figure, .qrouter .feature-card { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ───────── 로딩 ───────── */
.loading { text-align: center; padding: 2rem; color: var(--ink-light); font-style: italic; }

/* ───────── 반응형 (모바일 우선 정리) ───────── */
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .feature-cards { grid-template-columns: 1fr; max-width: 420px; }
  .q-cards { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
  .life-grid { grid-template-columns: repeat(3, 1fr); }
  .menu { justify-content: flex-start; }   /* 좁은 폭: 스크롤이 첫 항목부터 보이게 */
}
@media (max-width: 620px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .extras-grid { grid-template-columns: repeat(2, 1fr); }
  .q-cards .fc-title { font-size: 0.94rem; }
  .life-grid { gap: 0.5rem; }
  .life-cell { padding: 0.8rem 0.5rem; }
  .form-card, .info-section, .free-tier, .premium-tier { padding: 1.3rem; border-radius: var(--r); margin: 1rem 0.8rem; }
  .form-row { gap: 0.5rem; }
  .form-row > label { width: 100%; }
  .hero { padding: 2.2rem 1.2rem 1.6rem; }
  .hero-figure { aspect-ratio: 4 / 3; margin-top: 1.4rem; border-radius: 16px; }
  .discover { padding: 1rem 1.2rem 0; }
  .brand-name { font-size: 1.02rem; }
  .brand-name .han { display: none; }
  .daewoon-row { grid-template-columns: 1fr; gap: 0.2rem; }
  /* 좁은 폭에서 넓은 자간 제목이 넘쳐 잘리는 것 방지 */
  .section-title { letter-spacing: 0.12em; font-size: 1.3rem; }
  .hero h1 .han, .hero .han { letter-spacing: 0.18em; }
  .form-card h2, .info-section h3 { letter-spacing: 0.1em; }
  .unlock-cta h3 { letter-spacing: 0.12em; }
  .fs-section-title { letter-spacing: 0.06em; }
  /* 결과 표·코드가 넘칠 경우 가로 스크롤로 (잘림 대신) */
  .extras-grid, .pillars-grid { overflow-x: auto; }
}

/* ═══════════ 인증 모달 v2 — 로그인·회원가입·계정 ═══════════ */
.auth-close {
  position: absolute; top: 0.9rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--ink-light);
  padding: 0.3rem; transition: color 0.15s;
}
.auth-close:hover { color: var(--ink-dark); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin: 1rem 0 1.2rem; }
.auth-tab {
  flex: 1; padding: 0.65rem; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--ink-light);
  cursor: pointer; font-family: inherit; font-size: 0.95rem;
  letter-spacing: 0.06em; transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active { border-bottom-color: var(--accent-red); color: var(--ink-dark); font-weight: 600; }
.auth-field { text-align: left; margin-bottom: 0.7rem; }
.auth-label { display: block; font-size: 0.78rem; color: var(--ink-mid); margin-bottom: 0.3rem; letter-spacing: 0.04em; }
.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%; padding: 0.8rem 2.6rem 0.8rem 0.9rem;
  border: 1px solid var(--line); border-radius: 4px;
  font-family: inherit; font-size: 1rem; background: #fffdf8;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--accent-gold, #b88c3a); box-shadow: 0 0 0 3px rgba(184,140,58,0.12); }
.auth-eye {
  position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--ink-light); padding: 0.25rem; line-height: 1;
}
.auth-eye:hover { color: var(--ink-dark); }
.auth-error-box {
  display: none; align-items: flex-start; gap: 0.45rem; text-align: left;
  background: #fdf0ef; border: 1px solid #ecc8c4; border-radius: 4px;
  padding: 0.6rem 0.8rem; margin-top: 0.7rem;
  color: var(--accent-red); font-size: 0.85rem; line-height: 1.5;
}
.auth-error-box.show { display: flex; }
.auth-helper { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-light); }
.auth-helper a { color: inherit; text-decoration: underline; }
.auth-submit-loading { position: relative; color: transparent !important; pointer-events: none; }
.auth-submit-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: authspin 0.7s linear infinite;
}
@keyframes authspin { to { transform: rotate(360deg); } }
/* 성공 뷰 */
.auth-success { padding: 1.2rem 0 0.6rem; }
.auth-success-check {
  width: 54px; height: 54px; margin: 0 auto 0.9rem; border-radius: 50%;
  background: #eef6ee; border: 2px solid #4c8b4c; color: #2f6b2f;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; animation: authpop 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes authpop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* 계정(로그인 상태) 뷰 */
.acct-box {
  text-align: left; background: #faf7f0; border: 1px solid var(--line);
  border-radius: 6px; padding: 0.9rem 1rem; margin: 1rem 0 1.1rem;
}
.acct-email { font-weight: 600; color: var(--ink-dark); word-break: break-all; }
.acct-plan { margin-top: 0.35rem; font-size: 0.85rem; color: var(--ink-mid); }
.acct-plan .badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; margin-right: 0.35rem;
}
.acct-plan .badge.on  { background: #f3ebd8; color: #8a6a24; border: 1px solid #e0cd9e; }
.acct-plan .badge.off { background: #f1efe9; color: var(--ink-light); border: 1px solid var(--line); }
.acct-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.btn-outline {
  display: block; width: 100%; padding: 0.75rem 0; text-align: center;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-dark); cursor: pointer; font-family: inherit; font-size: 0.95rem;
  text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.btn-outline:hover { border-color: var(--ink-mid); background: #faf8f2; }
.btn-danger-outline {
  display: block; width: 100%; padding: 0.75rem 0; text-align: center;
  background: none; border: 1px solid #ddb3ae; border-radius: 4px;
  color: var(--accent-red); cursor: pointer; font-family: inherit; font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s;
}
.btn-danger-outline:hover { background: #fdf0ef; border-color: var(--accent-red); }
.logout-confirm { display: none; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.logout-confirm.show { display: block; }
.logout-confirm p { font-size: 0.9rem; color: var(--ink-mid); margin-bottom: 0.7rem; }
.logout-row { display: flex; gap: 0.55rem; }
.logout-row .btn-danger-outline, .logout-row .btn-outline { flex: 1; padding: 0.65rem 0; }

/* ── 토스트 알림 (alert 대체) ─────────────────────────── */
#toast-wrap {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 12000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: min(92vw, 480px);
}
.toast {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: #14110d; color: #f7f2e9; border: 1px solid rgba(184, 140, 58, 0.55);
  border-radius: 6px; padding: 0.8rem 1.1rem; font-size: 0.9rem; line-height: 1.55;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); max-width: 100%;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ico { flex: 0 0 auto; font-weight: 700; }
.toast.success .toast-ico { color: #d9b56a; }
.toast.error { border-color: rgba(179, 38, 30, 0.6); }
.toast.error .toast-ico { color: #e6968f; }
.toast.info .toast-ico { color: #b8a98e; }

/* ── 확인 다이얼로그 (confirm/prompt 대체) ─────────────── */
#confirm-modal {
  display: none; position: fixed; inset: 0; z-index: 11500;
  background: rgba(20, 17, 13, 0.55); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 1rem;
}
#confirm-modal.open { display: flex; }
.confirm-card {
  background: #fdfaf2; border: 1px solid var(--line); border-top: 3px solid var(--accent-gold);
  max-width: 420px; width: 100%; padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); animation: popIn 0.22s ease;
}
.confirm-card.danger { border-top-color: var(--accent-red); }
.confirm-title { font-weight: 600; letter-spacing: 0.12em; margin-bottom: 0.6rem; font-size: 1.02rem; }
.confirm-msg { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7; white-space: pre-line; }
.confirm-field { margin-top: 1rem; }
.confirm-actions { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.confirm-actions button { flex: 1; padding: 0.72rem 0; }
.btn-danger-solid {
  display: block; text-align: center; background: var(--accent-red); color: #fdfaf2;
  border: 1px solid var(--accent-red); border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; transition: filter 0.15s;
}
.btn-danger-solid:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════
   v3 — 젊은 여성 타깃 전환 최적화 컴포넌트
   (히어로·신뢰 스트립·혜택 리스트·가격 앵커·스티키 CTA·FAQ)
   ═══════════════════════════════════════════════════════════════ */

/* 히어로 v3 — 감성 카피 중심 */
.hero-v3 h1 { font-size: clamp(1.9rem, 5.6vw, 2.9rem); line-height: 1.32; letter-spacing: -0.01em; }
.hero-v3 h1 .hl { color: var(--accent-red); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent-gold); background: var(--gold-tint);
  padding: 0.35rem 0.95rem; border-radius: var(--r-pill); margin-bottom: 1.1rem;
}
.hero-cta-note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-light); }
.hero-cta-note b { color: var(--ink-mid); }

/* 신뢰 스트립 — 히어로 하단 4칩 */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
  max-width: 720px; margin: 1.6rem auto 0;
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.5rem 1rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-mid);
  box-shadow: var(--sh-sm);
}
.trust-chip .tc-ico { font-size: 0.95rem; }

/* 혜택 리스트 — 페이월·모달 공용 (사람 말로 쓴 잠금 항목) */
.benefit-list { list-style: none; text-align: left; margin: 1.2rem auto; max-width: 480px; display: flex; flex-direction: column; gap: 0.55rem; }
.benefit-list li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.8rem 1rem; line-height: 1.55; font-size: 0.93rem; color: var(--ink-dark);
}
.benefit-list .b-ico { flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }
.benefit-list b { color: var(--accent-red); }
.benefit-list small { display: block; color: var(--ink-mid); font-size: 0.84rem; margin-top: 1px; }

/* 가격 앵커 — 5만원 대비 900원 */
.price-anchor {
  display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 1.1rem 0 0.3rem; font-family: var(--sans);
}
.price-anchor .pa-was { color: var(--ink-light); font-size: 0.95rem; text-decoration: line-through; text-decoration-color: var(--accent-red); }
.price-anchor .pa-now { font-size: 1.9rem; font-weight: 800; color: var(--accent-red); letter-spacing: -0.02em; }
.price-anchor .pa-now small { font-size: 1rem; font-weight: 700; }
.price-anchor .pa-note { width: 100%; text-align: center; font-size: 0.84rem; color: var(--ink-mid); }

/* 결제 신뢰 라인 — 토스·환불 */
.pay-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem;
  margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-light);
}
.pay-trust span { display: inline-flex; align-items: center; gap: 0.3rem; }
.pay-trust b { color: #0064ff; font-weight: 800; }   /* 토스 블루 */

/* 잠금 미리보기 배지 — 흐림 영역 위에 떠 있는 힌트 */
.premium-tier { position: relative; }
.lock-float {
  position: absolute; left: 50%; top: 130px; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(42,36,32,0.82); color: #fdf8ef; backdrop-filter: blur(2px);
  border-radius: var(--r-pill); padding: 0.5rem 1.1rem; font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--sh);
}

/* 모바일 스티키 CTA 바 — 결과 잠금 상태에서만 */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(251, 247, 240, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(60,45,25,0.12);
  animation: ctaUp .3s ease;
}
@keyframes ctaUp { from { transform: translateY(100%); } to { transform: none; } }
.sticky-cta.show { display: flex; }
.sticky-cta .sc-txt { flex: 1; min-width: 0; line-height: 1.35; }
.sticky-cta .sc-txt b { display: block; font-size: 0.93rem; color: var(--ink-dark); }
.sticky-cta .sc-txt small { color: var(--ink-mid); font-size: 0.78rem; }
.sticky-cta .btn-primary { width: auto; margin: 0; padding: 0.75rem 1.4rem; font-size: 0.95rem; flex-shrink: 0; }
.sticky-cta .sc-close { background: none; border: none; color: var(--ink-light); font-size: 1.1rem; cursor: pointer; padding: 0.3rem; flex-shrink: 0; }
@media (min-width: 861px) { .sticky-cta { display: none !important; } }

/* FAQ 아코디언 (details 기반) */
.faq-list { max-width: 640px; margin: 1rem auto; display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 1.2rem; box-shadow: var(--sh-sm);
}
.faq-item > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 1rem 0; font-weight: 700; font-size: 0.96rem; color: var(--ink-dark);
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--accent-gold); font-size: 1.2rem; font-weight: 700; transition: transform .2s; }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 1.1rem; color: var(--ink-mid); font-size: 0.92rem; line-height: 1.75; }

/* 결과 섹션 헤딩 소프트닝 (v3 페이지에서 자간 제거) */
.soft-title { letter-spacing: 0 !important; }

/* 페이월 개인화 라인 — 무료 데이터로 만든 "이 사람 이야기" 필 */
.unlock-persona {
  display: inline-block; background: var(--blush); border: 1px solid var(--blush-2);
  color: var(--ink-dark); border-radius: var(--r-pill); padding: 0.5rem 1.15rem;
  font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.4rem;
}
.unlock-persona b { color: var(--accent-red); }
.modal-persona {
  background: var(--gold-tint); border-radius: var(--r); padding: 0.55rem 0.95rem;
  font-size: 0.9rem; color: var(--ink-dark); margin: 0.4rem auto 0.2rem; max-width: 340px;
}
.modal-persona b { color: var(--accent-red); }

/* 홈 히어로 특가 리본 */
.hero-promo {
  display: inline-block; margin-top: 0.9rem;
  background: linear-gradient(135deg, #8C1D18, #B3261E); color: #FDF6E9;
  border-radius: var(--r-pill); padding: 0.5rem 1.2rem;
  font-size: 0.88rem; font-weight: 600; box-shadow: 0 4px 14px rgba(140,29,24,0.25);
}
.hero-promo b { color: #FFE2A8; }

/* ═══════════ 사주 관상 (오형인) — 유입용 무료 기능 ═══════════ */
.gwansang-result { max-width: 560px; margin: 1.4rem auto; padding: 0 1rem; }
.gwansang-result.visible { animation: fadeUp .45s ease; }
.gw-card {
  background: linear-gradient(180deg, var(--gw-tint, #f7efda), var(--bg-card) 55%);
  border: 1px solid var(--line); border-top: 4px solid var(--gw, var(--accent-gold));
  border-radius: var(--r-lg); box-shadow: var(--sh); padding: 1.8rem 1.5rem 1.6rem; text-align: center;
}
.gw-eyebrow { font-size: 0.82rem; color: var(--ink-light); letter-spacing: 0.02em; }
.gw-badge {
  display: inline-block; margin: 0.9rem 0 0.2rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink-mid);
}
.gw-title { font-family: var(--serif); font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; line-height: 1.1; margin: 0.1rem 0 0.3rem; }
.gw-face { font-size: 1.02rem; font-weight: 600; color: var(--ink-dark); }
.gw-el-strip { display: flex; justify-content: center; gap: 0.5rem; margin: 1.2rem 0 0.4rem; }
.gw-el {
  flex: 0 0 auto; width: 52px; padding: 0.5rem 0; border-radius: var(--r);
  background: var(--surface-2); border: 1.5px solid var(--line); opacity: 0.55;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .15s;
}
.gw-el.on { opacity: 1; border-color: var(--gw); border-width: 2px; background: #fff; box-shadow: 0 3px 12px rgba(60,45,25,0.12); transform: translateY(-2px); }
.gw-el-han { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.gw-el-ko { font-size: 0.68rem; color: var(--ink-light); }
.gw-reading { text-align: left; margin: 1.3rem 0 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.gw-reading p { margin: 0 0 0.7rem; line-height: 1.85; color: var(--ink-dark); font-size: 0.95rem; }
.gw-reading p:last-child { margin-bottom: 0; }
.gw-reading b { color: var(--ink-dark); }
.gw-meme { font-size: 0.9rem; color: var(--ink-mid); background: var(--surface-2); border-radius: 8px; padding: 0.6rem 0.8rem; margin-top: 0.3rem !important; }
.gw-sal { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.4rem; }
.gw-sal-tag { font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--rose); color: var(--accent-red); border: 1px solid #eecccc; }
.gw-share { margin-top: 1.3rem; }
.gw-share .btn-secondary { width: 100%; padding: 0.85rem; font-size: 1rem; }
.gw-cta { text-align: center; margin: 1.4rem auto 0; padding: 1.6rem 1.4rem; background: linear-gradient(180deg, var(--gold-tint), var(--surface-2)); border: 1px solid var(--accent-gold-2); border-radius: var(--r-lg); }
.gw-cta h3 { color: var(--accent-red); margin-bottom: 0.5rem; }
.gw-cta p { color: var(--ink-mid); line-height: 1.6; margin-bottom: 1.1rem; }

/* ═══════════ 사주 성격유형·등급·매력 (saju-persona) ═══════════ */
#persona-card { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
#persona-card:empty { display: none; }
#persona-card > div { animation: fadeUp .5s ease both; }
#persona-card > div:nth-child(2) { animation-delay: .06s; }
#persona-card > div:nth-child(3) { animation-delay: .12s; }
#persona-card > div:nth-child(4) { animation-delay: .18s; }

.pz-report, .pz-charm, .pz-persona {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 1.5rem 1.5rem;
}
/* 통합 리포트 카드 (유형명 + 등급/상위% + 점수 + 근거) */
.pz-report { background: linear-gradient(180deg, var(--pz-tint), var(--bg-card) 52%); border-top: 4px solid var(--pz); }
.pz-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-mid); }
.pz-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 0; }
.pz-hero-txt { min-width: 0; }
.pz-type { font-family: var(--serif); font-size: clamp(1.5rem, 5.6vw, 2rem); font-weight: 700; color: var(--pz); margin: 0.1rem 0 0.15rem; line-height: 1.18; border: none; padding: 0; }
.pz-title { font-size: 0.98rem; font-weight: 600; color: var(--ink-dark); line-height: 1.4; }
.pz-badge-wrap { flex: 0 0 auto; text-align: center; }
.pz-grade-badge { width: 54px; height: 54px; border-radius: 14px; background: var(--pz); color: #fff; font-family: var(--serif); font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.pz-pct { font-size: 0.8rem; font-weight: 700; color: var(--pz); margin-top: 0.35rem; white-space: nowrap; }
.pz-kws { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.7rem; }
.pz-kw { font-size: 0.82rem; font-weight: 600; color: var(--pz); background: var(--bg-card); border: 1px solid var(--pz); border-radius: 999px; padding: 0.25rem 0.7rem; }
.pz-def { font-size: 0.96rem; line-height: 1.7; color: var(--ink-mid); margin: 0 0 1.2rem; word-break: keep-all; }
.pz-scoreline { display: flex; align-items: center; gap: 0.8rem; }
.pz-scorebar { flex: 1; height: 9px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.pz-scorebar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--pz), var(--accent-gold-2)); }
.pz-scorenum { flex: 0 0 auto; color: var(--ink-mid); font-size: 0.9rem; }
.pz-scorenum b { font-size: 1.45rem; color: var(--ink-dark); } .pz-scorenum small { color: var(--ink-light); }
.pz-grade-scale { display: flex; gap: 0.3rem; margin: 0.9rem 0; }
.pz-grade-scale span { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--ink-light); background: var(--surface-2); border-radius: var(--r-sm); padding: 0.35rem 0; }
.pz-grade-scale span.on { color: #fff; background: var(--pz); }
.pz-reasons { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.pz-reasons li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; color: var(--ink-dark); line-height: 1.55; }
.pz-reasons li::before { content: '✓'; position: absolute; left: 0; color: var(--pz); font-weight: 800; }
.pz-disc { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-light); line-height: 1.6; }
/* 매력 카드 */
.pz-charm { border-left: 4px solid var(--pz); }
.pz-charm-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pz-charm-label { font-size: 1.1rem; font-weight: 700; color: var(--pz); }
.pz-charm-star { font-size: 0.75rem; font-weight: 700; color: var(--accent-red); background: var(--rose); border: 1px solid #eecccc; border-radius: 999px; padding: 0.15rem 0.6rem; }
.pz-charm-body { color: var(--ink-dark); line-height: 1.8; font-size: 0.95rem; }
/* 일간 페르소나 */
.pz-persona { text-align: center; background: var(--surface-2); }
.pz-persona-nick { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.pz-persona p { color: var(--ink-mid); line-height: 1.7; font-size: 0.94rem; margin: 0; }
/* 공유 */
.pz-share .btn-secondary { width: 100%; padding: 0.9rem; font-size: 1rem; }

/* ══════════ 오늘의 운세 (saju-today.js) ══════════ */
#today-card:empty { display: none; }
.td-card {
  background: linear-gradient(180deg, var(--td-tint), var(--bg-card) 55%);
  border: 1px solid var(--line); border-top: 4px solid var(--td);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 1.4rem 1.5rem; margin-top: 1rem;
}
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.td-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-mid); }
.td-iljin { font-family: var(--serif); font-weight: 700; color: var(--td); font-size: 1rem; white-space: nowrap; }
.td-iljin small { font-size: 0.72em; color: var(--ink-mid); margin-left: 0.15rem; }
.td-zong { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.9rem 0 0.2rem; }
.td-zong-label { font-size: 1.12rem; color: var(--ink-dark); }
.td-zong-label b { color: var(--td); font-weight: 700; }
.td-zong-star { color: var(--td); letter-spacing: 0.12em; font-size: 1.05rem; }
.td-areas { display: flex; flex-direction: column; gap: 0.55rem; margin: 1rem 0 0.2rem; }
.td-area { display: grid; grid-template-columns: 5.2rem 1fr auto; align-items: center; gap: 0.6rem; }
.td-area-l { font-size: 0.9rem; color: var(--ink-dark); font-weight: 600; }
.td-area-bar { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.td-area-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--td), var(--accent-gold-2)); }
.td-area-star { font-size: 0.82rem; color: var(--td); letter-spacing: 0.06em; }
.td-msg { margin: 1.1rem 0 0; padding: 1rem 1.1rem; background: var(--bg-soft); border-radius: var(--r); border: 1px solid var(--line); }
.td-msg-h { font-family: var(--serif); font-size: 1.08rem; color: var(--ink-dark); margin: 0 0 0.6rem; line-height: 1.55; }
.td-msg-a, .td-msg-c { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.6; margin: 0.3rem 0 0; }
.td-msg-a b, .td-msg-c b { color: var(--td); font-weight: 700; margin-right: 0.2rem; }
.td-luck { margin: 1.1rem 0 0; }
.td-luck-title { font-size: 0.85rem; font-weight: 700; color: var(--ink-mid); margin-bottom: 0.5rem; }
.td-luck-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.td-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-dark);
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.7rem; }
.td-chip em { font-style: normal; font-weight: 700; color: var(--td); margin-right: 0.15rem; }
.td-chip-tti { background: var(--td-tint); border-color: var(--td); }
.td-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); margin-left: 0.15rem; }
.td-share { margin-top: 1.1rem; }
.td-share .btn-secondary { width: 100%; padding: 0.9rem; font-size: 1rem; }
@media (max-width: 420px) {
  .td-area { grid-template-columns: 3.9rem 1fr auto; gap: 0.45rem; }
  .td-area-l { font-size: 0.84rem; }
  .td-area-star { font-size: 0.7rem; letter-spacing: 0; }
}

/* 홈 오늘의 운세 배너 */
.today-banner {
  display: flex; align-items: center; gap: 0.9rem; max-width: 940px; margin: 0.9rem auto 0;
  padding: 0.95rem 1.2rem; background: linear-gradient(100deg, var(--gold-tint), var(--bg-card) 75%);
  border: 1px solid var(--accent-gold); border-radius: var(--r-lg); text-decoration: none;
  box-shadow: var(--sh-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.today-banner:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.today-banner .tb-ico { font-size: 1.6rem; line-height: 1; }
.today-banner .tb-text { display: flex; flex-direction: column; flex: 1 1 auto; }
.today-banner .tb-text b { color: var(--ink-dark); font-size: 1.02rem; }
.today-banner .tb-text small { color: var(--ink-mid); font-size: 0.82rem; margin-top: 0.15rem; }
.today-banner .tb-arrow { color: var(--accent-gold); font-size: 1.3rem; font-weight: 700; }

/* ══════════ 궁합 역할비교 무료 티저 (saju-gunghap-teaser.js) ══════════ */
#gunghap-teaser:empty { display: none; }
.gt-card {
  background: linear-gradient(180deg, #fbeef0, var(--bg-card) 55%);
  border: 1px solid var(--line); border-top: 4px solid var(--accent-red, #c0453b);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 1.5rem 1.4rem; margin-top: 1.1rem;
}
.gt-eyebrow { text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-mid); }
.gt-pair { display: flex; align-items: stretch; justify-content: center; gap: 0.7rem; margin: 1rem 0 0.4rem; }
.gt-person { flex: 1 1 0; max-width: 200px; text-align: center; padding: 0.9rem 0.6rem;
  background: var(--bg-card); border: 1px solid var(--line); border-top: 3px solid var(--gt); border-radius: var(--r); }
.gt-role { display: inline-block; font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--gt);
  border-radius: 999px; padding: 0.15rem 0.7rem; margin-bottom: 0.5rem; }
.gt-name { font-size: 0.85rem; color: var(--ink-mid); }
.gt-stem { font-family: var(--serif); font-weight: 700; color: var(--ink-dark); font-size: 1.02rem; margin-top: 0.1rem; }
.gt-link { align-self: center; font-size: 1.3rem; }
.gt-headline { text-align: center; font-family: var(--serif); font-size: 1.1rem; line-height: 1.55;
  color: var(--ink-dark); margin: 0.9rem 0.2rem 1rem; }
.gt-points { display: flex; flex-direction: column; gap: 0.6rem; }
.gt-good, .gt-caution { font-size: 0.9rem; line-height: 1.6; color: var(--ink-mid); margin: 0;
  padding: 0.7rem 0.9rem; background: var(--bg-soft); border-radius: var(--r); }
.gt-good b { color: #2f8f5b; display: block; margin-bottom: 0.15rem; font-size: 0.82rem; }
.gt-caution b { color: #c0453b; display: block; margin-bottom: 0.15rem; font-size: 0.82rem; }
.gt-cta { margin-top: 1.2rem; text-align: center; }
.gt-cta .btn-primary { width: 100%; padding: 0.95rem; font-size: 1.02rem; }
.gt-cta-note { font-size: 0.8rem; color: var(--ink-mid); margin: 0.6rem 0 0; line-height: 1.5; }
@media (max-width: 400px) { .gt-stem { font-size: 0.92rem; } .gt-headline { font-size: 1rem; } }

/* ══════════ 심층 리포트 공통 (deep-report.js) ══════════ */
.dr-loading { text-align: center; padding: 3rem 1rem; }
.dr-spinner { display: inline-flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.dr-spinner span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold); animation: drPulse 1.1s ease-in-out infinite; }
.dr-spinner span:nth-child(2) { animation-delay: .16s; }
.dr-spinner span:nth-child(3) { animation-delay: .32s; }
@keyframes drPulse { 0%,80%,100% { opacity:.25; transform: scale(.8);} 40% { opacity:1; transform: scale(1);} }
.dr-loading-text { color: var(--ink-mid); font-size: 0.95rem; margin: 0; }

.dr-body { display: flex; flex-direction: column; gap: 0.9rem; }
.dr-chapter {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem; box-shadow: var(--sh-sm);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;
}
.dr-chapter.in { opacity: 1; transform: none; }
.dr-ch-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 700; color: var(--ink-dark);
  margin: 0 0 0.4rem; line-height: 1.4; border: none; padding: 0; }
.dr-ch-summary { font-size: 0.88rem; color: var(--accent-gold); font-weight: 600; margin: 0 0 0.9rem; line-height: 1.55; }
.dr-p { font-size: 1rem; line-height: 1.85; color: var(--ink-mid); margin: 0 0 0.85rem; word-break: keep-all; }
.dr-p:last-child { margin-bottom: 0; }

/* 프리미엄 카드(#ai-tier 등) 안에서 서사를 렌더할 때 — 카드 속 카드(이중 카드) 방지:
   각 챕터의 카드 테두리/배경/그림자를 걷어내고, 얇은 구분선으로 나눈 '쭉 이어지는'
   한 장의 문서로 보이게 한다(시인성↑). 심층 페이지(별도 컨테이너)는 카드 유지. */
.premium-tier .dr-body { gap: 0; }
.premium-tier .dr-chapter {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  padding: 1.5rem 0 0.4rem; margin: 0; border-top: 1px solid var(--line);
}
.premium-tier .dr-chapter:first-child { border-top: none; padding-top: 0.2rem; }
.premium-tier .dr-ch-title { font-size: 1.1rem; }

/* ── 궁합 심층 서사 (glowy buildCompatibilityStory) ── */
.gc-report { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.2rem; }
.gc-hero { text-align: center; padding: 0.4rem 0 0.2rem; }
.gc-eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--accent-gold); font-weight: 700; margin: 0 0 0.4rem; }
.gc-title { font-family: var(--serif); font-size: 1.28rem; font-weight: 700; color: var(--ink-dark); margin: 0 0 0.7rem; line-height: 1.4; word-break: keep-all; }
.gc-score { display: inline-flex; align-items: baseline; gap: 0.35rem; margin: 0.1rem 0 0.5rem; }
.gc-score span { font-size: 0.8rem; color: var(--ink-light); }
.gc-score strong { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: var(--accent-gold); line-height: 1; }
.gc-score em { font-style: normal; font-size: 0.92rem; color: var(--ink-mid); }
.gc-label { font-size: 1.04rem; font-weight: 700; color: var(--ink-dark); margin-bottom: 0.5rem; }
.gc-lead { font-size: 0.94rem; line-height: 1.75; color: var(--ink-mid); max-width: 34em; margin: 0 auto; word-break: keep-all; }
.gc-score-note { display: block; margin-top: 0.6rem; font-size: 0.76rem; color: var(--ink-light); }
.gc-people { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.gc-person { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem; text-align: center; }
.gc-person small { display: block; font-size: 0.73rem; color: var(--accent-gold); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.gc-person strong { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink-dark); margin-bottom: 0.35rem; line-height: 1.4; }
.gc-person > p { font-size: 0.84rem; line-height: 1.6; color: var(--ink-mid); margin: 0; word-break: keep-all; }
.gc-person span { display: block; margin-top: 0.4rem; font-size: 0.77rem; color: var(--ink-light); }
.gc-core { display: flex; flex-direction: column; }
.gc-block { padding: 1.05rem 0 0.15rem; border-top: 1px solid var(--line); }
.gc-core .gc-block:first-child { border-top: none; padding-top: 0.1rem; }
.gc-block h4 { font-family: var(--serif); font-size: 1.08rem; color: var(--ink-dark); margin: 0 0 0.5rem; line-height: 1.4; word-break: keep-all; }
.gc-block p { font-size: 0.94rem; line-height: 1.8; color: var(--ink-mid); margin: 0 0 0.5rem; word-break: keep-all; }
.gc-block p:last-child { margin-bottom: 0; }
.gc-sec-title { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-dark); margin: 0 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold-tint); }
.gc-roles { display: flex; flex-direction: column; gap: 0.7rem; }
.gc-role { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 0.85rem 1rem; }
.gc-role-q { font-size: 0.9rem; font-weight: 700; color: var(--ink-dark); margin-bottom: 0.15rem; word-break: keep-all; }
.gc-role-who { font-size: 0.8rem; color: var(--accent-gold); font-weight: 700; margin-bottom: 0.4rem; }
.gc-role p { font-size: 0.89rem; line-height: 1.7; color: var(--ink-mid); margin: 0; word-break: keep-all; }
.gc-care { background: var(--gold-tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; }
.gc-care-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.gc-care-top small { font-size: 0.78rem; color: var(--ink-light); }
.gc-care-top strong { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-dark); }
.gc-care-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.gc-care-bar i { background: var(--accent-gold); }
.gc-care-bar b { background: var(--accent-red); }
.gc-care-labels { display: flex; justify-content: space-between; margin: 0.4rem 0 0.6rem; font-size: 0.77rem; color: var(--ink-light); }
.gc-care-labels strong { color: var(--ink-dark); }
.gc-care > p { font-size: 0.89rem; line-height: 1.7; color: var(--ink-mid); margin: 0; word-break: keep-all; }
.gc-quick { display: flex; flex-direction: column; }
.gc-quick-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--line); }
.gc-quick-item:last-child { border-bottom: none; }
.gc-quick-item b { display: block; font-size: 0.87rem; color: var(--ink-dark); margin-bottom: 0.2rem; }
.gc-quick-item p { font-size: 0.84rem; line-height: 1.6; color: var(--ink-mid); margin: 0; word-break: keep-all; }
.gc-quick-item > span { flex: 0 0 auto; font-size: 0.77rem; color: var(--accent-gold); font-weight: 700; white-space: nowrap; padding-top: 0.1rem; }
.gc-conflict { border-top: 1px solid var(--line); }
.gc-closing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.gc-ending { font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ink-dark); text-align: center; margin: 0.4rem auto; max-width: 30em; padding: 0.4rem 0; border: none; word-break: keep-all; }
@media (max-width: 560px) { .gc-people, .gc-closing-grid { grid-template-columns: 1fr; } }

.dr-lock {
  margin-top: 1rem; text-align: center; padding: 2rem 1.3rem;
  background: linear-gradient(180deg, var(--gold-tint), var(--bg-card) 70%);
  border: 1px solid var(--accent-gold); border-radius: var(--r-lg);
}
.dr-lock-seal { font-family: var(--serif); font-size: 1.9rem; color: var(--accent-gold); margin-bottom: 0.4rem; }
.dr-lock h4 { font-size: 1.08rem; color: var(--ink-dark); margin: 0 0 0.6rem; border: none; padding: 0; }
.dr-lock p { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7; margin: 0 0 1.2rem; }
.dr-lock-cta { display: inline-block; text-decoration: none; padding: 0.9rem 1.6rem; font-size: 1rem; }
.dr-disclaimer { font-size: 0.8rem; color: var(--ink-light, var(--ink-mid)); line-height: 1.65;
  margin: 1.2rem 0 0; padding: 0.9rem 1rem; background: var(--bg-soft); border-radius: var(--r); }

/* 상단 요약 히어로 (점수·별점) */
.dr-head { text-align: center; padding: 1.6rem 1.2rem; margin-bottom: 1rem;
  background: linear-gradient(180deg, var(--gold-tint), var(--bg-card) 65%);
  border: 1px solid var(--line); border-top: 4px solid var(--accent-gold);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.dr-head-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-mid); }
.dr-head-score { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: var(--accent-gold); line-height: 1.1; margin: 0.3rem 0 0.1rem; }
.dr-head-score small { font-size: 0.9rem; color: var(--ink-mid); font-weight: 400; }
.dr-head-stars { color: var(--accent-gold); font-size: 1.15rem; letter-spacing: 0.1em; }
.dr-head-label { font-family: var(--serif); font-size: 1.12rem; color: var(--ink-dark); margin: 0.6rem 0 0; line-height: 1.5; }
.dr-head-sub { font-size: 0.88rem; color: var(--ink-mid); margin: 0.45rem 0 0; line-height: 1.6; }
.dr-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; }
.dr-fact { font-size: 0.82rem; color: var(--ink-dark); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.75rem; }
.dr-fact em { font-style: normal; color: var(--accent-gold); font-weight: 700; margin-right: 0.25rem; }

/* 입력 카드 — 모바일 우선 */
.dr-form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 1.3rem 1.2rem; }
.dr-form h3 { font-size: 1rem; color: var(--ink-dark); margin: 0 0 0.9rem; border: none; padding: 0; }
.dr-field { margin-bottom: 0.85rem; }
.dr-field > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-mid); margin-bottom: 0.35rem; }
.dr-field input, .dr-field select {
  width: 100%; padding: 0.85rem 0.9rem; font-size: 1rem; font-family: inherit;
  color: var(--ink-dark); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r); appearance: none; -webkit-appearance: none;
}
.dr-field input:focus, .dr-field select:focus { outline: none; border-color: var(--accent-gold); background: var(--bg-card); }
.dr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.dr-hint { font-size: 0.78rem; color: var(--ink-mid); margin: 0.3rem 0 0; }
.dr-submit { width: 100%; padding: 1rem; font-size: 1.05rem; margin-top: 0.4rem; }

/* 재회 리포트 (reunion.html) */
.ru-notice { font-size: 0.85rem; line-height: 1.7; color: var(--ink-mid); margin: 0 0 1rem;
  padding: 0.9rem 1rem; background: var(--bg-soft); border-left: 3px solid var(--accent-gold); border-radius: var(--r); }
.ru-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ru-list li { font-size: 0.95rem; color: var(--ink-mid); background: var(--bg-soft);
  border-radius: var(--r); padding: 0.6rem 0.85rem; }
.ru-list li b { color: var(--ink-dark); }
.ru-plan { margin: 0.6rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ru-plan li { font-size: 0.95rem; line-height: 1.7; color: var(--ink-mid); }

/* 서양 점성술 (astro.html) */
.as-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.9rem 0 1rem; }
.as-b3 { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 0.8rem 0.4rem; }
.as-b3-k { font-size: 0.78rem; font-weight: 700; color: var(--ink-mid); }
.as-b3-sign { font-size: 1.7rem; line-height: 1.2; color: var(--accent-gold); }
.as-b3-name { font-family: var(--serif); font-size: 0.95rem; font-weight: 700; color: var(--ink-dark); }
.as-b3-note { font-size: 0.72rem; color: var(--ink-mid); margin-top: 0.15rem; }
.as-els { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
.as-el { display: grid; grid-template-columns: 2.2rem 1fr 1.4rem; align-items: center; gap: 0.5rem; }
.as-el-l { font-size: 0.82rem; color: var(--ink-mid); font-weight: 600; }
.as-el-bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.as-el-bar i { display: block; height: 100%; border-radius: 4px; }
.as-el-n { font-size: 0.78rem; color: var(--ink-mid); text-align: right; }

/* 사주×점성술 교차 (cross.html) */
.cx-axes { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cx-axes-head { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700;
  color: var(--ink-mid); padding: 0 0.6rem; letter-spacing: 0.04em; }
.cx-axis { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: 0.5rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 0.55rem 0.7rem; }
.cx-axis.same { border-color: var(--accent-gold); background: var(--gold-tint); }
.cx-axis-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-mid); }
.cx-axis-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4rem; }
.cx-axis-pair em { font-style: normal; font-size: 0.88rem; color: var(--ink-dark); }
.cx-east { text-align: right; }
.cx-west { text-align: left; }
.cx-vs { font-style: normal; font-size: 0.82rem; color: var(--ink-mid); }
.cx-axis.same .cx-vs { color: var(--accent-gold); font-weight: 700; }

/* 홈 — 심층 리포트 카드 */
.deep-cards .dc-ico { font-size: 1.8rem; line-height: 1; color: var(--accent-gold); margin-bottom: 0.5rem; }
.deep-cards .feature-card { padding: 1.5rem 0.9rem; }

/* ══════════════════════════════════════════════════════════
   모바일 앱 셸 — 하단 탭바 + 전체메뉴 시트 (app-shell.js)
   ══════════════════════════════════════════════════════════ */
.tabbar, .sheet-wrap { display: none; }

@media (max-width: 860px) {
  /* ── 하단 고정 탭바 ── */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    background: rgba(251, 247, 240, 0.94); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 18px rgba(60, 45, 25, 0.07);
  }
  .tb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem; min-height: 56px; padding: 0.45rem 0.2rem;
    color: var(--ink-mid); text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, transform .12s ease;
  }
  .tb-item:active { transform: scale(0.93); }
  .tb-ic { display: block; width: 23px; height: 23px; }
  .tb-ic svg { width: 100%; height: 100%; display: block; }
  .tb-lb { font-size: 0.68rem; font-weight: 600; letter-spacing: -0.01em; }
  .tb-item.on { color: var(--accent-gold); }
  .tb-item.on .tb-lb { font-weight: 700; }

  /* 탭바 높이만큼 본문 여백 */
  body.has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* 스티키 CTA는 탭바 위로 */
  body.has-tabbar .sticky-cta { bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* 탭바가 있으니 헤더 햄버거는 숨김 */
  body.has-tabbar .nav-toggle { display: none; }
  body.has-tabbar .site-header .menu { display: none !important; }

  /* ── 전체메뉴 시트 ── */
  .sheet-wrap { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
  .sheet-wrap.open { pointer-events: auto; }
  .sheet-back {
    position: absolute; inset: 0; background: rgba(30, 24, 18, 0.42);
    opacity: 0; transition: opacity .26s ease;
  }
  .sheet-wrap.open .sheet-back { opacity: 1; }
  .sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 84vh; display: flex; flex-direction: column;
    background: var(--bg-card); border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(60, 45, 25, 0.2);
    transform: translateY(100%); transition: transform .3s cubic-bezier(.22,.9,.3,1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet-wrap.open .sheet { transform: none; }
  .sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line);
    margin: 0.65rem auto 0.2rem; flex-shrink: 0; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 1.2rem 0.7rem; flex-shrink: 0; }
  .sheet-title { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink-dark); }
  .sheet-x { background: none; border: none; font-size: 1.1rem; color: var(--ink-mid);
    padding: 0.4rem 0.5rem; cursor: pointer; line-height: 1; }
  .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem 1.2rem; }
  .sheet-group { margin-bottom: 1.1rem; }
  .sheet-group-t { font-size: 0.76rem; font-weight: 700; color: var(--accent-gold);
    letter-spacing: 0.06em; padding: 0 0.4rem 0.4rem; }
  .sheet-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    min-height: 56px; padding: 0.7rem 0.9rem; margin-bottom: 0.35rem;
    background: var(--bg-soft); border: 1px solid transparent; border-radius: var(--r);
    text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
  }
  .sheet-item:active { transform: scale(0.985); background: var(--gold-tint); }
  .sheet-item.on { border-color: var(--accent-gold); background: var(--gold-tint); }
  .si-text { display: flex; flex-direction: column; min-width: 0; }
  .si-text b { font-size: 0.97rem; color: var(--ink-dark); display: flex; align-items: center; gap: 0.35rem; }
  .si-text small { font-size: 0.8rem; color: var(--ink-mid); margin-top: 0.1rem; }
  .si-new { font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em;
    color: #fff; background: var(--accent-red, #c0453b); border-radius: 999px; padding: 0.1rem 0.34rem; }
  .si-arrow { color: var(--ink-light, var(--ink-mid)); font-size: 1.2rem; flex-shrink: 0; }

  /* ── 모바일 터치 최적화 ── */
  .btn-primary, .btn-secondary, .btn-gold, .btn-cta {
    min-height: 50px; -webkit-tap-highlight-color: transparent;
  }
  .btn-primary:active, .btn-secondary:active, .btn-gold:active, .btn-cta:active { transform: scale(0.978); }
  input[type="date"], input[type="time"], input[type="text"], input[type="email"],
  input[type="password"], input[type="number"], select, textarea { min-height: 48px; font-size: 16px; }
  .feature-card, .dr-chapter, .sheet-item, .today-banner { -webkit-tap-highlight-color: transparent; }
  .feature-card:active, .today-banner:active { transform: scale(0.985); }
}

/* 진입 페이드 (모션 최소화 설정은 존중) */
@media (prefers-reduced-motion: no-preference) {
  body { animation: shellFade .28s ease both; }
  @keyframes shellFade { from { opacity: 0; } to { opacity: 1; } }
}

/* ══════════════════════════════════════════════════════════
   홈 컴팩트 메뉴 + 모바일 가독성 교정 (2026-07-22)
   ══════════════════════════════════════════════════════════ */
.hero-cta-wrap { margin-top: 1.5rem; display: flex; justify-content: center; }

.more-menu { max-width: 640px; margin: 2.2rem auto 1rem; padding: 0 1rem; }
.more-title { font-size: 1.05rem; font-weight: 700; color: var(--ink-dark);
  letter-spacing: 0; margin: 0 0 0.8rem; text-align: center; }
.more-list { display: flex; flex-direction: column; gap: 0.5rem; }
.more-row {
  display: flex; align-items: center; gap: 0.8rem; min-height: 60px;
  padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-sm); text-decoration: none; color: inherit;
  transition: transform .12s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.more-row:active { transform: scale(0.985); border-color: var(--accent-gold); }
.mr-ic { font-size: 1.35rem; line-height: 1; width: 1.9rem; text-align: center; flex-shrink: 0; }
.mr-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mr-tx b { font-size: 0.98rem; font-weight: 700; color: var(--ink-dark); }
.mr-tx small { font-size: 0.82rem; color: var(--ink-mid); margin-top: 0.1rem; }
.mr-ar { color: var(--accent-gold); font-size: 1.25rem; flex-shrink: 0; }

/* ── 한글 줄바꿈: 단어 중간에서 끊기지 않게 (전역) ── */
body, p, h1, h2, h3, h4, li, small, b, span, a, label, button, summary {
  word-break: keep-all; overflow-wrap: break-word;
}

@media (max-width: 860px) {
  /* PC 느낌의 넓은 자간 제거 — 모바일에서는 촘촘하게 */
  .discover-title, .soft-title, .more-title, .sheet-title,
  .hero h1, .section-title, h2, h3 { letter-spacing: 0 !important; }
  .hero h1 .han, .hero .han, .brand-name .han { letter-spacing: 0.14em !important; }

  /* 섹션 여백 축소 — 모바일에서 스크롤이 덜 길게 */
  .discover, .form-card, .info-section { padding-left: 1rem; padding-right: 1rem; }
  .discover { margin: 1.6rem auto; }
  .discover-title { font-size: 1.22rem; }
  .discover-sub { font-size: 0.88rem; line-height: 1.6; }

  /* 히어로 — 문구·이미지 정리 */
  .hero { padding-top: 1.4rem; }
  .hero .subtitle { font-size: 0.94rem; line-height: 1.7; }
  .hero-cta-note { font-size: 0.78rem; line-height: 1.6; padding: 0 0.6rem; }
  .trust-strip { gap: 0.4rem; }
  .trust-chip { font-size: 0.76rem; padding: 0.3rem 0.7rem; }

  /* 폼 하단 안내가 화면 끝에 붙지 않게 */
  .form-card form > p:last-child { padding: 0 0.6rem; line-height: 1.6; }

  /* 푸터 촘촘하게 */
  .site-footer { padding-left: 1.1rem; padding-right: 1.1rem; }
  .footer-quote { font-size: 0.95rem; line-height: 1.7; }
}

/* 모바일 — 히어로 밀도 조정 (PC 브로슈어 느낌 완화) */
@media (max-width: 860px) {
  /* 한글 아이브로우는 자간을 좁혀 늘어져 보이지 않게 (한자 브랜드 표기만 넓게 유지) */
  .hero h1 .han, .hero .han { letter-spacing: 0.08em !important; font-size: 0.6em; }
  .brand-name .han { letter-spacing: 0.14em !important; }

  .hero { padding-top: 1.1rem; padding-bottom: 1.2rem; }
  .hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.85rem); line-height: 1.38; }
  /* 이미지가 컨테이너를 꽉 채우도록 — 비율만 줄여서 높이를 낮춘다.
     (img에 max-height/width:auto 를 주면 컨테이너 배경이 이미지 옆·아래로 드러남) */
  .hero-figure { margin-top: 1rem; aspect-ratio: 16 / 10; background: transparent; }
  .hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-eyebrow { font-size: 0.76rem; letter-spacing: 0.04em; }
}

/* 중간 데스크톱 폭(861~1180px) — 메뉴 항목이 늘어나 헤더가 좁아지는 구간 대응 */
@media (min-width: 861px) and (max-width: 1180px) {
  .header-inner { padding: 0 1.2rem; gap: 0.5rem; }
  .menu a { padding: 0.5rem 0.55rem; font-size: 0.88rem; }
  .menu a::after { left: 0.55rem; right: 0.55rem; }
}

/* 모바일 — 기능 페이지 입력 폼을 스택형으로 (라벨 위 / 입력 아래, 전폭)
   기존 좌우 배치는 PC식이라 좁은 화면에서 입력칸이 눌림 */
@media (max-width: 860px) {
  .feature-saju .fs-row { display: block; margin-bottom: 0.9rem; }
  .feature-saju .fs-row > label {
    width: auto; display: block; margin-bottom: 0.35rem;
    font-size: 0.85rem; font-weight: 600; color: var(--ink-mid);
  }
  .feature-saju .fs-row > input,
  .feature-saju .fs-row > select {
    width: 100%; min-height: 48px; font-size: 16px;
    padding: 0.8rem 0.9rem; border-radius: var(--r);
  }
  .feature-saju .fs-row > .fs-hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; }
  .fs-section-title { font-size: 0.95rem; letter-spacing: 0 !important; }
}

/* 아이콘 — 이모지 대신 선 아이콘 (톤 통일) */
.mr-ic svg, .b-ico svg { width: 20px; height: 20px; display: block; }
.mr-ic { color: var(--accent-gold); display: flex; align-items: center; justify-content: center; }
.b-ico { color: var(--accent-gold); display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; flex-shrink: 0; }
.b-ico svg { width: 18px; height: 18px; }
/* 궁합 티저 — 두 사람을 잇는 선 */
.gt-link { align-self: center; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--line), var(--accent-gold), var(--line)); flex-shrink: 0; }
/* 아이콘 없이 텍스트만 남은 신뢰 칩 */
.trust-chip .tc-ico:empty { display: none; }

/* ══════════════════════════════════════════════════════════
   모바일 버튼 통일 — 페이지마다 폭·높이·글자크기가 달라 보이던 문제
   (궁합·신년운세·택일·명식은 .feature-actions 때문에 136~151px로 작았음)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .btn-primary, .btn-secondary, .btn-gold, .btn-cta {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 52px; padding: 0.9rem 1.2rem;
    font-size: 1.02rem; line-height: 1.3; letter-spacing: 0; text-align: center;
  }
  .feature-actions { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .feature-actions select { width: 100%; min-height: 50px; font-size: 16px; }
  .feature-actions .btn-primary {
    width: 100%; margin: 0; padding: 0.9rem 1.2rem;
    font-size: 1.02rem; letter-spacing: 0;
  }
  /* 예외 — 문구 옆에 나란히 붙는 인라인 버튼은 원래 폭 유지 */
  .sticky-cta .btn-primary {
    display: inline-block; width: auto; min-height: 44px;
    padding: 0.75rem 1.3rem; font-size: 0.95rem;
  }
  /* 버튼이 연달아 올 때 간격 */
  .btn-primary + .btn-secondary, .btn-secondary + .btn-primary,
  .btn-cta + .btn-secondary { margin-top: 0.55rem; }
}

/* 생년월일 — 모바일 3단 선택 (년·월·일) */
.bd-native-hidden { display: none !important; }
.bd-group {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 0.4rem;
  width: 100%; flex: 1 1 100%; min-width: 0;   /* flex 부모(.form-row) 안에서도 전폭 */
}
.bd-group select {
  width: 100%; min-height: 50px; box-sizing: border-box;
  padding: 0.75rem 0.5rem; font-size: 16px; font-family: inherit;
  color: var(--ink-dark); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r);
  appearance: none; -webkit-appearance: none; text-align: center;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%),
                    linear-gradient(135deg, var(--ink-mid) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 1.5rem;
}
.bd-group select:focus { outline: none; border-color: var(--accent-gold); background-color: var(--bg-card); }
/* 좌우 라벨형(.fs-row) 안에서도 전폭 */
.feature-saju .fs-row > .bd-group { width: 100%; margin-top: 0.35rem; }

/* ══════════════════════════════════════════════════════════
   사주 풀이 결과 — 모바일 좌우 여백 정리
   섹션 패딩(16) + 카드 마진(12.8) + 카드 패딩(20.8) 이 겹쳐
   375px에서 실제 내용 폭이 274px(73%)까지 줄던 문제
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .result-section { padding: 0 0.7rem; }

  /* 결과 섹션 안쪽 블록 — 섹션 패딩이 이미 있으므로 자체 좌우 마진 제거 */
  .result-section .free-tier, .result-section .premium-tier,
  .result-section .form-card, .result-section .info-section {
    margin-left: 0; margin-right: 0; padding: 1.15rem 1rem;
  }
  /* 최상위 카드 — 화면 끝에 붙지 않게 좌우 여백은 두되 축소 */
  main > .form-card, main > .info-section {
    margin-left: 0.7rem; margin-right: 0.7rem; padding: 1.25rem 1rem;
  }
  /* 리포트/성격/오늘 카드 패딩도 한 단계 축소 */
  .pz-card, .pz-grade, .pz-charm, .pz-persona,
  .td-card, .dr-chapter, .dr-head, .dr-form, .gt-card, .dr-lock {
    padding-left: 1rem; padding-right: 1rem;
  }

  /* 만세력 원국 — 4주를 한 줄에 (표처럼 보이게) */
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
    margin: 1rem auto; overflow: visible;
  }
  .pillar-card { padding: 0.7rem 0.22rem; border-radius: var(--r-sm); }
  .pillar-card:hover { transform: none; box-shadow: var(--sh-sm); }
  .pillar-card .position { font-size: 0.66rem; letter-spacing: 0.02em; margin-bottom: 0.25rem; }
  .pillar-card .han-stem, .pillar-card .han-branch { font-size: 1.45rem; line-height: 1.12; }
  .pillar-card .kor { font-size: 0.82rem; margin: 0.15rem 0 0.3rem; }
  .pillar-card .meta { font-size: 0.63rem; line-height: 1.45; word-break: keep-all; }
  .pillar-card .meta div { margin-bottom: 0.08rem; }
  .pillar-card .nayuum { font-size: 0.62rem; margin-top: 0.2rem; }
}

/* 오늘의 운세 — 개인 용신 흐름 문구 */
.td-flow { margin: 0.6rem 0 0; padding: 0.6rem 0.9rem; font-size: 0.88rem; line-height: 1.6;
  border-radius: var(--r); background: var(--bg-soft); border-left: 3px solid var(--td); color: var(--ink-mid); word-break: keep-all; }
.td-flow.up { border-left-color: #2f8f5b; }
.td-flow.down { border-left-color: #b0852f; }

/* 오늘의 운세 — 명리 포인트(형충회합·세운) */
.td-manly { margin: 1.1rem 0 0; padding: 0.9rem 1rem; background: var(--bg-soft); border-radius: var(--r); border: 1px solid var(--line); }
.td-manly-title { font-size: 0.85rem; font-weight: 700; color: var(--ink-mid); margin-bottom: 0.5rem; }
.td-manly-p { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-dark); padding-left: 0.7rem; border-left: 3px solid var(--line); word-break: keep-all; }
.td-manly-p.up { border-left-color: #2f8f5b; }
.td-manly-p.down { border-left-color: #c0453b; }
.td-manly-seun { margin: 0.2rem 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--ink-mid); padding-top: 0.5rem; border-top: 1px dashed var(--line); word-break: keep-all; }