/* 명리소 화면 공통 양식. 디자인 토큰은 frontend-handoff.md 3번을 따른다. */

@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}
/* 명식 한자 전용: 천간과 지지 스물두 글자만 담은 Noto Sans KR */
@font-face{
  font-family:'Noto Sans KR Hanja';
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  src:url('/static/fonts/NotoSansKR-hanja.woff2') format('woff2-variations');
}

:root{
  --bg: #FBFBFD;
  --surface: #F5F5F7;
  --ink: #1D1D1F;
  --ink-soft: #6E6E73;
  --line: #D2D2D7;
  --accent: #3454D1;
  --accent-ink: #24398F;
  --error: #B3261E;
  --font-hanja: 'Noto Sans KR Hanja','Noto Sans KR','Pretendard Variable',sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* display:flex 같은 지정보다 hidden 속성이 우선한다 */
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 상단 바 ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 24px;
  background:rgba(251,251,253,0.8);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .logo{ font-size:15px; font-weight:600; letter-spacing:-0.01em; text-decoration:none; }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.theme-toggle{
  font:inherit; font-size:13px; font-weight:500; color:var(--ink-soft);
  min-height:32px; padding:0 12px; border-radius:980px;
  background:transparent; border:1px solid transparent; cursor:pointer;
}
.theme-toggle:hover{ background:var(--surface); color:var(--ink); }
.theme-toggle .when-dark{ display:none; }
[data-theme="dark"] .theme-toggle .when-light{ display:none; }
[data-theme="dark"] .theme-toggle .when-dark{ display:inline; }
.nav .cta-small{
  font-size:13px; font-weight:500; color:var(--ink);
  padding:6px 16px; border-radius:980px; border:1px solid var(--line);
  text-decoration:none; transition:background 0.2s ease;
}
.nav .cta-small:hover{ background:var(--surface); }

/* ---------- 큰 제목, 주 단추 ---------- */
.eyebrow{
  font-size:14px; font-weight:600; color:var(--accent);
  letter-spacing:0.02em; margin-bottom:18px;
}
h1.headline{
  font-size:clamp(36px, 6vw, 60px);
  font-weight:200;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:0 0 22px;
  word-break:keep-all;
}
h1.headline strong{ font-weight:600; }
p.subhead{
  font-size:clamp(17px, 2vw, 22px);
  font-weight:400;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto 36px;
  word-break:keep-all;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  background:var(--accent);
  color:#fff;
  font:inherit; font-size:16px; font-weight:500;
  padding:12px 30px;
  border:0; border-radius:980px;
  text-decoration:none; cursor:pointer;
  transition:background 0.2s ease;
}
.btn-primary:hover{ background:var(--accent-ink); }
.btn-primary:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- 랜딩: 첫 구간 ---------- */
section.hero{
  padding:96px 24px 64px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}
.chart-shot{
  margin:72px auto 0;
  max-width:760px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.pillar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 8px 20px;
  box-shadow:0 20px 40px -28px rgba(29,29,31,0.35);
}
.pillar .hanja{
  font-family:var(--font-hanja);
  font-size:clamp(26px, 5vw, 40px);
  font-weight:300;
  line-height:1.35;
  letter-spacing:0.04em;
}
.pillar .label{
  margin-top:14px;
  font-size:12px; font-weight:500; color:var(--ink-soft);
  letter-spacing:0.02em;
}
.chart-caption{
  text-align:center; margin:18px 0 0;
  font-size:13px; color:var(--ink-soft);
}

/* ---------- 랜딩: 나눠 보여주는 구간 ---------- */
section.split{
  background:var(--surface);
  padding:120px 24px;
}
.split-inner{
  max-width:1040px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.split-inner h2{
  font-size:clamp(32px, 4vw, 48px);
  font-weight:200; letter-spacing:-0.02em; line-height:1.15;
  margin:0;
}
.split-inner h2 em{ font-style:normal; font-weight:600; color:var(--accent); }
.point-list{ display:flex; flex-direction:column; gap:28px; }
.point{ border-top:1px solid var(--line); padding-top:16px; }
.point .point-title{ font-size:17px; font-weight:600; margin-bottom:6px; }
.point .point-desc{ font-size:15px; color:var(--ink-soft); line-height:1.6; }

/* ---------- 상품 카드 ---------- */
section.products{ padding:120px 24px; }
.products h2{
  text-align:center;
  font-size:clamp(32px, 4vw, 48px);
  font-weight:200; letter-spacing:-0.02em;
  margin:0 0 56px;
}
.product-grid{
  max-width:920px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.product-card{
  border-radius:24px; padding:40px 32px;
  border:1px solid var(--line);
  background:#fff;
}
.product-card.featured{ background:var(--ink); color:#fff; border-color:var(--ink); }
.product-card .tier{ font-size:13px; font-weight:600; color:var(--accent); margin-bottom:10px; }
.product-card.featured .tier{ color:#9DB2FF; }
.product-card h3{ font-size:26px; font-weight:600; margin:0 0 12px; letter-spacing:-0.01em; }
.product-card .desc{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 22px; }
.product-card.featured .desc{ color:#B8B8BD; }
.product-card .price{ font-size:15px; font-weight:600; }
.btn-select{
  margin-top:24px; width:100%; min-height:48px;
  font:inherit; font-size:15px; font-weight:500;
  border-radius:980px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft);
  cursor:not-allowed;
}
.product-card.featured .btn-select{ background:#2C2C2E; border-color:#48484A; color:#B8B8BD; }
section.products.on-result{ background:var(--surface); padding:96px 24px; }
.products.on-result .steps{ margin-bottom:20px; }
.products-note{ text-align:center; margin:28px 0 0; font-size:14px; color:var(--ink-soft); }

/* ---------- 랜딩: 신뢰 수치, 마지막 구간 ---------- */
section.stats{
  background:var(--surface);
  padding:100px 24px;
  text-align:center;
}
.stats-grid{
  max-width:760px; margin:0 auto 32px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:40px;
}
.stat .num{
  font-size:clamp(40px, 6vw, 64px); font-weight:200; letter-spacing:-0.02em;
  color:var(--accent);
}
.stat .num strong{ font-weight:600; }
.stat .label{ margin-top:8px; font-size:14px; color:var(--ink-soft); }
.stats-note{ font-size:13px; color:var(--ink-soft); }

section.final{
  background:var(--ink); color:#fff;
  padding:120px 24px; text-align:center;
}
.final h2{
  font-size:clamp(32px, 5vw, 56px); font-weight:200; letter-spacing:-0.02em;
  margin:0 0 32px;
}
.final .btn-primary{ background:#fff; color:var(--ink); }
.final .btn-primary:hover{ background:#E8E8ED; }
.final .btn-primary:focus-visible{ outline-color:#fff; }

/* ---------- 바닥글 ---------- */
footer{
  padding:32px 24px; text-align:center;
  font-size:13px; color:var(--ink-soft);
}
footer p{ margin:0 0 8px; }
footer .feedback a{ margin-left:10px; color:var(--accent); font-weight:500; }
footer a{ display:inline-block; padding:6px 0; }
footer .business{ font-size:12px; line-height:1.8; }
footer .business span{ display:inline-block; margin:0 8px; white-space:nowrap; }
footer .disclaimer{ margin-top:12px; font-size:12px; opacity:0.8; }

/* ---------- 나타나는 효과 (스크립트가 켜져 있을 때만) ---------- */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- 입력 폼과 결과 화면 공통 ---------- */
body.page-form{ background:var(--surface); }
section.flow{
  max-width:560px; margin:0 auto;
  padding:56px 24px 40px;
  text-align:center;
}
section.flow.wide{ max-width:860px; }
.steps{
  list-style:none; margin:0 0 36px; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px;
  font-size:13px; color:var(--ink-soft);
}
.steps li{ display:flex; align-items:center; gap:6px; }
.steps .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); font-size:12px; font-weight:600;
  background:#fff;
}
.steps li.current{ color:var(--ink); font-weight:600; }
.steps li.current .step-num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.steps li.done .step-num{ border-color:var(--ink-soft); }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px 28px;
  text-align:left;
}
.flow-note{ margin:20px 0 0; font-size:13px; color:var(--ink-soft); text-align:center; }
.flow-note.bottom{ margin:0; padding:40px 24px 8px; }

/* ---------- 입력 항목 ---------- */
.field{ border:0; margin:0 0 26px; padding:0; min-width:0; }
.field-label{
  display:block; padding:0; margin-bottom:10px;
  font-size:14px; font-weight:600;
}
.input{
  width:100%; height:48px;
  padding:0 14px;
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff;
  border:1px solid var(--line); border-radius:14px;
}
.input::placeholder{ color:var(--ink-soft); }
.input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.input:disabled{ background:var(--surface); color:var(--ink-soft); }
.input[aria-invalid="true"]{ border-color:var(--error); }

.segmented{ display:flex; gap:8px; }
.segmented label{ flex:1; position:relative; }
.segmented input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.segmented span{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:6px 12px;
  border-radius:980px;
  background:var(--surface); border:1px solid transparent;
  font-size:15px; font-weight:500; text-align:center;
  transition:background 0.15s ease, color 0.15s ease;
}
.segmented input:checked + span{ background:var(--ink); color:#fff; }
.segmented input:focus-visible + span{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.segmented input:disabled + span{ color:var(--ink-soft); opacity:0.55; }
.segmented input:disabled{ cursor:not-allowed; }
.segmented.stacked{ flex-direction:column; margin-top:12px; }
.segmented.stacked span{ border-radius:14px; }

.number-row{ display:flex; gap:8px; flex:1; }
.unit-input{ flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.unit-input:first-child:nth-last-child(3){ flex:1.5; }
.unit-input .input{ text-align:center; padding:0 8px; min-width:0; }
.unit-input span{ font-size:15px; color:var(--ink-soft); }
.time-row{ display:flex; gap:12px; align-items:center; margin-top:12px; }
.sijin-row{ margin-top:12px; }
.select{ appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.segmented span{ font-size:14px; }
/* 스크립트가 꺼져 있으면 세 방식 입력칸이 모두 보이고, 서버가 고른 방식만 쓴다. */
.time-row .segmented.compact{ flex:0 0 150px; }

.check{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; margin-top:8px;
  font-size:15px; cursor:pointer;
}
.check input{ width:20px; height:20px; margin:0; accent-color:var(--accent); flex:none; }
.field-hint{ margin:4px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.field-error{ margin:8px 0 0; font-size:13px; color:var(--error); line-height:1.6; }
.form-error{
  margin:0 0 24px; padding:12px 16px;
  border-radius:14px; background:#FBEAE9; color:var(--error);
  font-size:14px; font-weight:500;
}
.consent{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 12px;
  border-top:1px solid var(--line); padding-top:14px; margin-bottom:20px;
}
.consent .check{ margin-top:0; }
.consent .field-error{ flex-basis:100%; margin-top:0; }
.text-link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14px; color:var(--accent); font-weight:500;
}

/* ---------- 결과: 한 줄 요약 ---------- */
.summary-card{
  margin:32px auto 0; max-width:640px;
  background:var(--ink); color:#fff;
  border-radius:24px; padding:24px 28px;
  text-align:left;
}
.summary-main{ display:flex; align-items:center; gap:20px; }
.summary-badge{
  flex:none; width:64px; height:64px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  font-size:22px; font-weight:600; line-height:1; letter-spacing:-0.02em;
}
.summary-lead{ margin:0; font-size:17px; font-weight:500; line-height:1.5; word-break:keep-all; }
.summary-sub{ margin:6px 0 0; font-size:14px; color:#B8B8BD; line-height:1.6; word-break:keep-all; }
.summary-card strong{ color:#fff; font-weight:600; }
.summary-sub strong{ color:#9DB2FF; }
.summary-caveat{ margin:14px 0 0; padding-top:12px; border-top:1px solid #3A3A3C; font-size:13px; color:#B8B8BD; }

/* ---------- 결과: 명식 카드 ---------- */
.chart-grid{ align-items:start; }
.pillar-card:not(.day):not(.empty){ background:#FDFDFE; }
.pillar-card:not(.day) .p-hanja{ color:#3A3A3C; }
.pillar-card.day{ box-shadow:0 20px 40px -28px rgba(52,84,209,0.55); }
.pillar-card.day .p-hanja{ font-size:clamp(40px, 7vw, 58px); }
.extra-collapsed .p-extra{ display:none; }
.btn-text{
  margin:14px auto 0; display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  font:inherit; font-size:14px; font-weight:500; color:var(--accent);
  background:transparent; border:1px solid var(--line); border-radius:980px; cursor:pointer;
}
.btn-text:hover{ background:#fff; }

/* ---------- 결과: 리포트 미리보기 ---------- */
.preview-card{
  max-width:640px; margin:0 auto 40px;
  background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:28px 32px 24px; text-align:left;
}
.preview-card figcaption{ font-size:14px; font-weight:600; margin-bottom:14px; }
.preview-card figcaption span{ display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--ink-soft); }
.preview-card blockquote{ margin:0; position:relative; }
.preview-card blockquote p{ margin:0 0 12px; font-size:15px; line-height:1.8; color:var(--ink); word-break:keep-all; }
.preview-fade{
  color:var(--ink-soft) !important;
  -webkit-mask-image:linear-gradient(to bottom, #000 20%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 20%, transparent 100%);
}
.preview-more{ margin:0; font-size:13px; font-weight:500; color:var(--accent); }
.adjust-note{
  display:inline-block; margin:-16px 0 0; padding:10px 16px;
  border-radius:14px; background:#fff; border:1px solid var(--line);
  font-size:14px; color:var(--ink);
}
.chart-grid{
  margin:40px 0 0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.pillar-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px 8px 18px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.pillar-card.day{ border:2px solid var(--accent); padding:19px 7px 17px; }
.pillar-card .p-label{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:12px; }
.pillar-card .p-sipsin{ font-size:14px; font-weight:500; min-height:24px; line-height:24px; }
.pillar-card .p-sipsin.badge{
  padding:0 10px; border-radius:980px;
  background:var(--accent); color:#fff; font-size:13px;
}
.pillar-card .p-hanja{
  font-family:var(--font-hanja);
  font-size:clamp(34px, 6vw, 48px); font-weight:300; line-height:1.25;
  margin-top:6px;
}
.pillar-card .p-ko{ font-size:14px; color:var(--ink-soft); margin-bottom:8px; }
.pillar-card hr{ width:60%; border:0; border-top:1px solid var(--line); margin:6px 0 2px; }
.pillar-card .p-extra{
  width:100%; margin:14px 0 0; padding:12px 4px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.pillar-card .p-extra div + div{ margin-top:8px; }
.pillar-card .p-extra dt{ color:var(--ink-soft); font-size:12px; }
.pillar-card .p-extra dd{ margin:2px 0 0; font-weight:500; }
.pillar-card.empty{ justify-content:flex-start; background:transparent; border-style:dashed; }
.pillar-card .p-empty{ margin:auto 0; font-size:14px; color:var(--ink-soft); }
.chart-note{ margin:8px 0 0; font-size:13px; color:var(--ink-soft); }

/* ---------- 결과: 오행 분포 ---------- */
.ohaeng{ margin-top:40px; }
.ohaeng h2{ margin:0 0 20px; font-size:17px; font-weight:600; }
.bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.bars li{ display:flex; align-items:center; gap:12px; }
.bar-name{ flex:none; width:20px; font-size:15px; font-weight:600; }
.bar-track{ flex:1; height:12px; border-radius:980px; background:var(--surface); overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:980px; background:var(--accent); }
.bar-count{ flex:none; width:20px; text-align:right; font-size:15px; font-variant-numeric:tabular-nums; }
.bars-note{ margin:18px 0 0; font-size:13px; color:var(--ink-soft); }

/* ---------- 안내 문서 ---------- */
.prose .card h2{ font-size:16px; font-weight:600; margin:24px 0 6px; }
.prose .card h2:first-child{ margin-top:0; }
.prose .card p{ margin:0; font-size:15px; color:var(--ink-soft); line-height:1.7; }
.prose .card p + p{ margin-top:8px; }
.prose .card ul{ margin:6px 0 0; padding-left:20px; font-size:15px; color:var(--ink-soft); line-height:1.7; }
.prose .card li + li{ margin-top:4px; }
.prose .card-note{ margin:12px 0 0; font-size:13px; color:var(--ink-soft); }
.prose .card + .card{ margin-top:16px; }
.price-list{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.price-row{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line); }
.price-row:first-child{ border-top:0; padding-top:0; }
.price-row .price-name{ font-size:16px; font-weight:600; color:var(--ink); }
.price-row .price-desc{ display:block; margin-top:4px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.price-row .price-amount{ flex:none; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.price-row .price-amount small{ display:block; font-size:12px; font-weight:400; color:var(--ink-soft); text-align:right; }
@media (max-width:600px){ .price-row{ flex-direction:column; gap:6px; } .price-row .price-amount small{ text-align:left; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width:720px){
  section.hero{ padding-top:72px; }
  section.split, section.products, section.final{ padding-top:96px; padding-bottom:96px; }
  .split-inner{ grid-template-columns:1fr; gap:40px; }
  .product-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .chart-shot, .chart-grid{ grid-template-columns:repeat(2, 1fr); }
  .summary-card{ padding:20px; }
  .summary-main{ gap:14px; }
  .summary-badge{ width:52px; height:52px; font-size:18px; border-radius:16px; }
  .preview-card{ padding:22px 20px 18px; }
  section.flow{ padding-top:40px; }
  .card{ padding:24px 20px; }
  .time-row{ flex-direction:column; align-items:stretch; }
  .segmented.time-mode{ flex-direction:column; }   /* 휴대전화에서는 세 방식을 세로로 쌓아 글자가 줄 바꿈되지 않게 한다 */
  .segmented.time-mode span{ border-radius:14px; }
  .time-row .segmented.compact{ flex:none; }
}


/* ---------- 어두운 화면 (상단 바의 단추로 고르며, 처음에는 기기 설정을 따른다) ---------- */
:root[data-theme="dark"]{
  --bg: #0F0F12;
  --surface: #17171B;
  --ink: #F5F5F7;
  --ink-soft: #A1A1A8;
  --line: #2E2E34;
  --accent: #6D8CFF;
  --accent-ink: #9DB2FF;
  --error: #FF8A80;
  color-scheme: dark;
}
[data-theme="dark"] header.nav{ background:rgba(15,15,18,0.82); }
[data-theme="dark"] .btn-primary{ color:#0F0F12; }
[data-theme="dark"] .btn-primary:disabled{ background:#26262C; color:var(--ink-soft); }
[data-theme="dark"] .btn-primary:focus-visible, [data-theme="dark"] :focus-visible{ outline-color:var(--accent-ink); }

/* 랜딩 */
[data-theme="dark"] .pillar{ background:var(--surface); box-shadow:0 20px 40px -28px rgba(0,0,0,0.8); }
[data-theme="dark"] .product-card{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .product-card.featured{ background:#1A1D2B; border-color:#2A3150; }
[data-theme="dark"] .product-card .desc{ color:var(--ink-soft); }
[data-theme="dark"] .product-card.featured .desc{ color:#C7C7CC; }
[data-theme="dark"] section.final{ background:#1A1D2B; }
[data-theme="dark"] .final .btn-primary{ background:var(--accent); color:#0F0F12; }
[data-theme="dark"] .final .btn-primary:hover{ background:var(--accent-ink); }

/* 입력 폼 */
[data-theme="dark"] body.page-form{ background:var(--bg); }
[data-theme="dark"] .card, [data-theme="dark"] .adjust-note{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .input{ background:#101014; border-color:var(--line); color:var(--ink); }
[data-theme="dark"] .input:disabled{ background:#1C1C21; }
[data-theme="dark"] .segmented span{ background:#26262C; }
[data-theme="dark"] .segmented input:checked + span{ background:var(--ink); color:var(--bg); }
[data-theme="dark"] .form-error{ background:#3A1F1F; color:var(--error); }
[data-theme="dark"] .steps .step-num{ background:var(--surface); }
[data-theme="dark"] .steps li.current .step-num{ background:var(--accent); border-color:var(--accent); color:#0F0F12; }

/* 결과 */
[data-theme="dark"] .pillar-card:not(.day):not(.empty){ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .pillar-card.day{ background:#1A1D2B; border-color:var(--accent); box-shadow:0 24px 48px -24px rgba(109,140,255,0.55); }
[data-theme="dark"] .pillar-card .p-hanja{ color:#F5F5F7; }
[data-theme="dark"] .pillar-card:not(.day) .p-hanja{ color:#C7C7CC; }
[data-theme="dark"] .pillar-card .p-sipsin.badge{ color:#0F0F12; }
[data-theme="dark"] .pillar-card.empty{ border-color:var(--line); }
[data-theme="dark"] .summary-card{ background:linear-gradient(135deg, #1A1D2B 0%, #17171B 100%); border:1px solid #2A3150; }
[data-theme="dark"] .summary-badge{ color:#0F0F12; }
[data-theme="dark"] .summary-sub{ color:#C7C7CC; }
[data-theme="dark"] .bar-track{ background:#26262C; }
[data-theme="dark"] .btn-text:hover{ background:var(--surface); }
[data-theme="dark"] section.products.on-result{ background:#0B0B0E; }
[data-theme="dark"] .preview-card{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .btn-select{ background:#1F1F24; border-color:var(--line); color:var(--ink-soft); }
[data-theme="dark"] .product-card.featured .btn-select{ background:#242A40; border-color:#2A3150; color:#C7C7CC; }

/* ---------- 회원 흐름: 상단 바, 로그인, 이메일 확인, 내 리포트, 검수 ---------- */
.nav-link{ font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:6px 8px; }
.nav-link:hover{ color:var(--ink); }
.inline-form-text{ display:inline; }
.link-button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
.text-link.inline{ min-height:0; display:inline; }
.form-note-top{ margin:0 0 20px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.textarea{ height:auto; min-height:112px; padding:12px 14px; resize:vertical; line-height:1.6; }
.product-card.soon{ opacity:0.7; }
.product-card form{ margin:0; }
.btn-select:not(:disabled){ background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
.btn-select:not(:disabled):hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.product-card.featured .btn-select:not(:disabled){ background:#fff; color:var(--ink); border-color:#fff; }
.product-card.featured .btn-select:not(:disabled):hover{ background:#E8E8ED; border-color:#E8E8ED; }
[data-theme="dark"] .btn-select:not(:disabled){ color:#0F0F12; }
[data-theme="dark"] .product-card.featured .btn-select:not(:disabled){ background:var(--accent); border-color:var(--accent); color:#0F0F12; }
@media (min-width:721px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } .product-grid .product-card:last-child:nth-child(odd){ grid-column:1 / -1; max-width:460px; width:100%; justify-self:center; } }

.order-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.order-card{ padding:0; }
.order-link{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:20px 24px; text-decoration:none; align-items:center; }
.order-title{ font-size:17px; font-weight:600; }
.order-meta{ font-size:13px; color:var(--ink-soft); grid-column:1; }
.order-status{ grid-column:2; grid-row:1 / span 2; font-size:13px; font-weight:600; padding:6px 12px; border-radius:980px; background:var(--surface); color:var(--ink-soft); white-space:nowrap; }
.status-approved{ background:#E6F0E8; color:#1F6B3A; }
.status-review, .status-generating{ background:#EEF1FB; color:var(--accent-ink); }
.status-failed{ background:#FBEAE9; color:var(--error); }
[data-theme="dark"] .status-approved{ background:#163322; color:#8FD5A6; }
[data-theme="dark"] .status-review, [data-theme="dark"] .status-generating{ background:#1A1D2B; color:var(--accent-ink); }
[data-theme="dark"] .status-failed{ background:#3A1F1F; }
.empty-card{ text-align:center; }
.empty-card p{ margin:0 0 20px; color:var(--ink-soft); }
.danger-zone{ margin-top:48px; text-align:left; }
.danger-zone summary{ cursor:pointer; font-size:14px; color:var(--ink-soft); }
.danger-zone .inline-form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.btn-danger{ min-height:44px; font:inherit; font-size:14px; font-weight:500; border-radius:980px; border:1px solid var(--error); background:transparent; color:var(--error); cursor:pointer; }
.btn-danger:hover{ background:#FBEAE9; }

.report-body{ margin-top:32px; line-height:1.85; font-size:16px; }
.report-body h1, .report-body h2, .report-body h3{ font-size:19px; font-weight:600; margin:32px 0 10px; letter-spacing:-0.01em; }
.report-body h1:first-child, .report-body h2:first-child, .report-body h3:first-child{ margin-top:0; }
.report-body p{ margin:0 0 16px; word-break:keep-all; }
.report-body hr{ border:0; border-top:1px solid var(--line); margin:28px 0; }
.report-body ul, .report-body ol{ padding-left:22px; }

.admin-table{ width:100%; border-collapse:collapse; font-size:14px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.admin-table th, .admin-table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.admin-table th{ font-weight:600; background:var(--surface); }
.admin-table small{ color:var(--ink-soft); }
.admin-table .warn{ color:var(--error); }
[data-theme="dark"] .admin-table{ background:var(--surface); }
.admin-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:20px; margin-top:32px; }
.admin-grid h2{ font-size:15px; font-weight:600; margin:20px 0 8px; }
.admin-grid h2:first-child{ margin-top:0; }
.kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px; }
.kv dt{ color:var(--ink-soft); }
.kv dd{ margin:0; }
.pre, .facts{ white-space:pre-wrap; font-size:13px; line-height:1.6; margin:0; font-family:inherit; }
.issues{ margin:0; padding-left:18px; font-size:14px; color:var(--error); line-height:1.6; }
.review-form{ margin-top:20px; }
.review-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.review-actions .btn-text{ margin:0; }
@media (max-width:720px){ .admin-grid{ grid-template-columns:1fr; } .order-link{ grid-template-columns:1fr; } .order-status{ grid-column:1; grid-row:auto; justify-self:start; } }
.textarea.tall{ min-height:220px; font-size:14px; }
.review-divider{ border:0; border-top:1px solid var(--line); margin:24px 0 20px; }
.review-form h2{ font-size:15px; font-weight:600; margin:0 0 6px; }

.sample-link{ display:inline-block; margin-top:12px; font-size:14px; font-weight:500; color:var(--accent); text-decoration:none; }
.sample-link:hover{ text-decoration:underline; }
.product-card.featured .sample-link{ color:#9DB2FF; }
.sample-cta{ text-align:center; margin:28px 0 0; }

.btn-kakao{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:48px;
  background:#FEE500; color:#191919; font-size:16px; font-weight:600; border-radius:980px; text-decoration:none;
}
.btn-kakao:hover{ background:#F2DA00; }
[data-theme="dark"] .btn-kakao{ color:#191919; }