/* ============================================================
   명리원 — 묵지금(墨金) 디자인 시스템
   먹빛 바탕 · 금박 획 · 한지 질감 · 전각 인장
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 먹 */
  --ink-0:#080705; --ink-1:#0d0b08; --ink-2:#141109; --ink-3:#1c1811; --ink-4:#262016;
  /* 금 */
  --gold:#c9a961; --gold-hi:#f0dcae; --gold-lo:#8a6f3c; --gold-line:rgba(201,169,97,.22);
  --gold-line-2:rgba(201,169,97,.40);
  /* 한지 */
  --paper:#f2ebdd; --paper-2:#b8ad97; --paper-3:#7d7462;
  /* 인장 */
  --seal:#b8352f; --seal-hi:#e06a5e;
  /* 오방색 (다크 보정) */
  --o-목:#3fa07a; --o-화:#e8594c; --o-토:#d9a441; --o-금:#cfc9ba; --o-수:#5b8fd0;
  --serif:'Noto Serif KR','Gowun Batang','Nanum Myeongjo','AppleMyungjo','Apple SD Gothic Neo','Batang','바탕','Songti SC',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,system-ui,sans-serif;
}
html,body{background:var(--ink-1);color:var(--paper);font-family:var(--sans);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* 한지 질감 */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
/* 상단 금빛 번짐 */
body::after{content:'';position:fixed;top:0;left:0;right:0;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 100% at 50% -10%,rgba(201,169,97,.13),transparent 70%)}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
a{color:var(--gold);text-decoration:none;transition:.2s}
a:hover{color:var(--gold-hi)}

/* ── 헤더 ── */
body>header::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-hi),var(--gold),transparent);opacity:.55}
header{position:sticky;top:0;z-index:60;background:rgba(13,11,8,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--gold-line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}
.logo .mark{width:32px;height:32px;border:1.5px solid var(--seal);border-radius:5px;color:var(--seal-hi);
  font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transform:rotate(-3deg);letter-spacing:0;background:rgba(184,53,47,.07)}
.logo span{background:linear-gradient(135deg,#f3e2b8,#c9a961 45%,#8a6f3c 62%,#eddcb2);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px;letter-spacing:4px}
.nav{display:flex;gap:22px;font-size:13.5px;color:var(--paper-2);align-items:center}

/* ── 히어로 ── */
.hero{padding:82px 0 44px;text-align:center}
.hero .eyebrow{font-family:var(--serif);font-size:12.5px;letter-spacing:7px;color:var(--gold-lo);
  margin-bottom:22px;text-transform:uppercase}
.hero h1{font-family:var(--serif);font-size:42px;font-weight:600;letter-spacing:-.5px;line-height:1.45;
  margin-bottom:20px;word-break:keep-all}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#f6ead0,#d3b473 45%,#a08249 62%,#f0dcae);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--paper-2);font-size:16px;max-width:600px;margin:0 auto;word-break:keep-all;line-height:1.9}
.rule{width:1px;height:44px;margin:24px auto 22px;background:linear-gradient(180deg,transparent,var(--gold-line-2),transparent)}
.badges{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.badge{border:1px solid var(--gold-line);border-radius:2px;padding:6px 13px;font-size:12px;
  color:var(--paper-2);background:rgba(201,169,97,.04);letter-spacing:.3px}

/* ── 단계 ── */
.steps{display:flex;gap:0;margin:38px 0 26px;border:1px solid var(--gold-line);border-radius:3px;overflow:hidden;
  background:var(--ink-2)}
.step{flex:1;min-width:0;padding:13px 10px;font-size:13px;color:var(--paper-3);text-align:center;
  border-right:1px solid var(--gold-line);transition:.25s;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step:last-child{border-right:0}
.step b{display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:2.5px;color:var(--paper-3);margin-bottom:3px}
.step.on{background:linear-gradient(180deg,rgba(201,169,97,.16),rgba(201,169,97,.03));color:var(--gold-hi)}
.step.on b{color:var(--gold)}
.step.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.step.done{color:var(--paper-2)}
.step.done b{color:var(--gold-lo)}
@media(max-width:760px){.steps{flex-wrap:wrap}.step{flex:1 0 33.33%;border-bottom:1px solid var(--gold-line)}}

/* ── 카드 ── */
.card{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--gold-line);
  border-radius:4px;padding:34px 32px;margin-bottom:20px;position:relative}
.card::before,.card::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none}
.card::before{top:-1px;left:-1px;border-top:1px solid var(--gold-line-2);border-left:1px solid var(--gold-line-2)}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--gold-line-2);border-right:1px solid var(--gold-line-2)}
.card h2{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:7px;letter-spacing:-.2px;
  display:flex;align-items:baseline;gap:12px}
.card h2 .n{font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:400;
  border:1px solid var(--gold-line-2);padding:3px 8px;border-radius:2px;line-height:1}
.card .sub{color:var(--paper-3);font-size:13.5px;margin-bottom:24px;word-break:keep-all;line-height:1.8}
@media(max-width:680px){.card{padding:24px 18px}.hero h1{font-size:29px}.hero{padding:52px 0 30px}}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── 폼 ── */
label.f{display:block;font-family:var(--serif);font-size:12px;color:var(--gold-lo);margin-bottom:8px;
  letter-spacing:2px;font-weight:500}
input[type=text],input[type=number],input[type=password],input[type=date],select{
  width:100%;background:var(--ink-1);border:1px solid var(--gold-line);border-radius:2px;
  padding:12px 14px;color:var(--paper);font-size:15px;font-family:inherit;transition:.2s}
input:focus,select:focus{outline:none;border-color:var(--gold);background:var(--ink-0);
  box-shadow:0 0 0 3px rgba(201,169,97,.08)}
input:disabled{opacity:.35}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-lo) 50%),linear-gradient(135deg,var(--gold-lo) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.seg{display:flex;border:1px solid var(--gold-line);border-radius:2px;overflow:hidden}
.seg button{flex:1;background:var(--ink-1);border:0;color:var(--paper-2);padding:12px 6px;font-size:14px;
  cursor:pointer;font-family:inherit;border-right:1px solid var(--gold-line);transition:.2s;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--ink-4);color:var(--paper)}
.seg button.on{background:linear-gradient(180deg,#d9bc7c,#b5934f);color:#1a1207;font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.25)}
.opt{display:flex;align-items:flex-start;gap:11px;padding:10px 0;font-size:13.5px;color:var(--paper-2);cursor:pointer}
.opt input{margin-top:5px;accent-color:var(--gold);width:15px;height:15px;flex-shrink:0}
.opt .d{display:block;font-size:12px;color:var(--paper-3);margin-top:3px;line-height:1.7;word-break:keep-all}
details summary{cursor:pointer;color:var(--paper-2);font-size:13.5px;font-family:var(--serif);letter-spacing:.5px;
  padding:8px 0;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'⌄ ';color:var(--gold-lo)}
details[open] summary::before{content:'⌃ '}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;position:relative;
  background:linear-gradient(180deg,#e2c88d,#c9a961 45%,#a8873f);color:#1a1207;border:0;border-radius:2px;
  padding:15px 30px;font-size:15.5px;font-weight:700;cursor:pointer;font-family:var(--serif);
  letter-spacing:1.5px;transition:.2s;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 18px rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn.full{width:100%}
.btn.ghost{background:transparent;border:1px solid var(--gold-line-2);color:var(--gold);box-shadow:none;font-weight:500}
.btn.ghost:hover{background:rgba(201,169,97,.08);border-color:var(--gold)}
.btn.sm{padding:10px 18px;font-size:13.5px;letter-spacing:1px}

/* ── 사주 원국 기둥 ── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pillars.p3{grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.pillars,.pillars.p3{grid-template-columns:repeat(2,1fr)}}
.pillar{background:linear-gradient(180deg,#1a160f,#100d09);border:1px solid var(--gold-line);
  border-radius:3px;overflow:hidden;position:relative;transition:.25s;
  display:flex;flex-direction:column}
.pillar:hover{border-color:var(--gold-line-2);transform:translateY(-2px)}
.pillar.day{border-color:var(--gold-line-2);box-shadow:0 0 0 1px rgba(201,169,97,.12),0 8px 26px rgba(0,0,0,.45)}
.pillar.day::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(201,169,97,.10),transparent 65%)}
.p-head{padding:9px 6px;text-align:center;font-family:var(--serif);font-size:11.5px;letter-spacing:4px;
  color:var(--gold-lo);border-bottom:1px solid var(--gold-line);background:rgba(201,169,97,.045)}
.pillar.day .p-head{color:var(--gold);background:rgba(201,169,97,.10)}
.p-sip{text-align:center;font-size:11.5px;color:var(--paper-3);padding:9px 4px 3px;letter-spacing:.5px}
.p-char{text-align:center;padding:2px 4px 8px;position:relative}
.p-char .han{font-family:var(--serif);font-size:52px;font-weight:500;line-height:1.02;display:block;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.p-char .ko{display:block;font-size:11px;color:var(--paper-3);margin-top:5px;letter-spacing:.5px}
.p-div{height:1px;margin:2px 22%;background:linear-gradient(90deg,transparent,var(--gold-line-2),transparent)}
.p-jj{border-top:1px solid var(--gold-line);padding:10px 8px;font-size:11px;color:var(--paper-3);
  text-align:center;line-height:1.9;background:rgba(0,0,0,.22);flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:1px}
.p-jj b{font-family:var(--serif);color:var(--paper-2);font-weight:500;font-size:12px}
.p-foot{border-top:1px solid var(--gold-line);padding:8px;font-size:11px;color:var(--paper-3);text-align:center;
  display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.28)}
.p-foot span b{color:var(--paper-2);font-weight:600}
@media(max-width:680px){.p-char .han{font-size:40px}}

.e-목{color:var(--o-목)} .e-화{color:var(--o-화)} .e-토{color:var(--o-토)}
.e-금{color:var(--o-금)} .e-수{color:var(--o-수)}
.tint-목{box-shadow:inset 0 0 32px rgba(63,160,122,.10)}
.tint-화{box-shadow:inset 0 0 32px rgba(232,89,76,.10)}
.tint-토{box-shadow:inset 0 0 32px rgba(217,164,65,.10)}
.tint-금{box-shadow:inset 0 0 32px rgba(207,201,186,.08)}
.tint-수{box-shadow:inset 0 0 32px rgba(106,155,209,.09)}

/* ── 표 ── */
.mtable{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--gold-line)}
.mtable th,.mtable td{padding:10px 8px;text-align:center;border-bottom:1px solid rgba(201,169,97,.13);
  border-right:1px solid rgba(201,169,97,.13)}
.mtable th:last-child,.mtable td:last-child{border-right:0}
.mtable tr:last-child td{border-bottom:0}
.mtable thead th{background:rgba(201,169,97,.07);color:var(--gold-lo);font-family:var(--serif);
  font-size:12px;font-weight:500;letter-spacing:1.5px}
.mtable td.lab{background:rgba(0,0,0,.25);color:var(--paper-3);font-size:11.5px;width:82px;font-family:var(--serif);letter-spacing:1px}
.mtable tbody tr:hover{background:rgba(201,169,97,.035)}
.mtable tr.cur{background:rgba(201,169,97,.11)!important}
.mtable tr.cur td{color:var(--gold-hi)}

/* ── 칩 / 게이지 ── */
.kv{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(201,169,97,.05);border:1px solid var(--gold-line);border-radius:2px;
  padding:7px 12px;font-size:12.5px;color:var(--paper-2)}
.chip b{color:var(--gold-hi);font-weight:600;margin-left:3px}
.chip.seal-c{border-color:rgba(184,53,47,.4);background:rgba(184,53,47,.07);color:var(--seal-hi)}
.gauge{margin-bottom:12px}
.gauge .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;align-items:baseline}
.gauge .lbl b{font-family:var(--serif);font-size:14px;letter-spacing:1px}
.gauge .lbl i{font-style:normal;color:var(--paper-3);font-size:11.5px}
.bar{height:6px;background:rgba(0,0,0,.4);border:1px solid rgba(201,169,97,.12);overflow:hidden}
.bar i{display:block;height:100%;min-width:2px;transition:width .5s ease}

/* ── MBTI ── */
.mbti-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:680px){.mbti-grid{grid-template-columns:repeat(2,1fr)}}
.mbti{background:var(--ink-1);border:1px solid var(--gold-line);border-radius:2px;padding:14px 6px;
  text-align:center;cursor:pointer;transition:.2s}
.mbti:hover{border-color:var(--gold-line-2);background:var(--ink-4);transform:translateY(-2px)}
.mbti b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:1.5px;color:var(--paper)}
.mbti span{font-size:11px;color:var(--paper-3)}
.mbti.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,169,97,.18),rgba(201,169,97,.04))}
.mbti.on b{background:linear-gradient(135deg,#f6ead0,#d3b473);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 손금 ── */
.drop{border:1px dashed var(--gold-line-2);border-radius:3px;padding:38px 20px;text-align:center;cursor:pointer;
  background:rgba(0,0,0,.25);transition:.2s}
.drop:hover{border-color:var(--gold);background:rgba(201,169,97,.05)}
.drop .ic{font-size:32px;margin-bottom:10px;opacity:.5}
.drop p{color:var(--paper-2);font-size:14px}
.drop small{color:var(--paper-3);font-size:11.5px}
.thumb{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--gold-line-2)}
.thumb img{width:100%;display:block}
.thumb button{position:absolute;top:9px;right:9px;background:rgba(8,7,5,.82);border:1px solid var(--gold-line-2);
  color:var(--gold);border-radius:2px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit}

/* ── 이용권 ── */
.plan{border:1px solid var(--gold-line);border-radius:3px;padding:26px 22px;background:linear-gradient(180deg,var(--ink-3),var(--ink-1));
  position:relative;display:flex;flex-direction:column}
.plan.rec{border-color:var(--gold-line-2);background:linear-gradient(180deg,rgba(201,169,97,.09),rgba(201,169,97,.01))}
.plan.rec::before{content:'';position:absolute;inset:-1px;border:1px solid var(--gold);opacity:.35;border-radius:3px;pointer-events:none}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#e2c88d,#b5934f);color:#1a1207;font-size:11px;font-weight:800;
  padding:4px 14px;border-radius:2px;letter-spacing:1px;white-space:nowrap}
.plan h3{font-family:var(--serif);font-size:17px;margin-bottom:3px;letter-spacing:1px}
.plan .price{font-family:var(--serif);font-size:33px;font-weight:600;letter-spacing:-1px;margin:14px 0 2px;
  background:linear-gradient(135deg,#f6ead0,#d3b473 55%,#a08249);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .price small{font-size:14px;color:var(--paper-3);font-weight:400;-webkit-text-fill-color:var(--paper-3)}
.plan ul{list-style:none;margin:16px 0 0;font-size:13px;color:var(--paper-2);flex:1}
.plan li{padding:5px 0 5px 20px;position:relative;line-height:1.65;word-break:keep-all}
.plan li:before{content:'·';position:absolute;left:4px;color:var(--gold);font-weight:900;font-size:17px;line-height:1.3}
.plan li.no{color:var(--paper-3);opacity:.6}
.plan li.no:before{content:'×';color:var(--paper-3);font-size:12px;font-weight:400;line-height:1.9}

/* ── 리포트 ── */
.report{font-family:var(--serif);font-size:16px;line-height:2.05;color:var(--paper);letter-spacing:-.1px}
.report h1{font-size:26px;font-weight:600;margin:52px 0 20px;padding-bottom:14px;position:relative;
  background:linear-gradient(135deg,#f6ead0,#d3b473 50%,#a08249);-webkit-background-clip:text;background-clip:text;color:transparent}
.report h1::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-line),transparent)}
.report h1:first-child{margin-top:0}
.report h2{font-size:20px;font-weight:600;margin:38px 0 12px;color:var(--gold-hi);padding-left:14px;position:relative}
.report h2::before{content:'';position:absolute;left:0;top:.35em;width:3px;height:1em;background:var(--gold);opacity:.75}
.report h3{font-size:17px;font-weight:600;margin:26px 0 8px;color:var(--paper)}
.report p{margin:14px 0;word-break:keep-all}
.report ul,.report ol{margin:14px 0 14px 24px}
.report li{margin:7px 0;word-break:keep-all}
.report strong{color:var(--gold-hi);font-weight:700}
.report em{color:var(--paper-2)}
.report code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:rgba(0,0,0,.4);
  border:1px solid var(--gold-line);padding:1px 6px;border-radius:2px;color:var(--gold-hi)}
.report table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;font-family:var(--sans);line-height:1.7}
.report th,.report td{border:1px solid var(--gold-line);padding:10px 12px;text-align:left;vertical-align:top}
.report th{background:rgba(201,169,97,.08);color:var(--gold-lo);font-family:var(--serif);font-weight:500;letter-spacing:1px}
.report blockquote{border-left:2px solid var(--gold);padding:4px 0 4px 18px;color:var(--paper-2);margin:18px 0;
  background:linear-gradient(90deg,rgba(201,169,97,.05),transparent)}
.report hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line-2),transparent);margin:38px 0}

.prog{font-size:13px;color:var(--paper-3);display:flex;align-items:center;gap:10px;margin:18px 0;font-family:var(--sans)}
.dot{width:6px;height:6px;border-radius:99px;background:var(--gold);animation:pulse 1.2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.secbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.secbar span{font-size:11.5px;padding:5px 11px;border:1px solid var(--gold-line);color:var(--paper-3);
  border-radius:2px;transition:.3s;letter-spacing:.3px}
.secbar span.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,169,97,.12)}
.secbar span.done{border-color:rgba(92,184,148,.35);color:rgba(92,184,148,.85)}

.note{background:rgba(106,155,209,.05);border:1px solid rgba(106,155,209,.22);border-radius:2px;
  padding:14px 16px;font-size:13px;color:var(--paper-2);margin-top:16px;line-height:1.85;word-break:keep-all}
.note.warn{background:rgba(184,53,47,.06);border-color:rgba(184,53,47,.28)}
.note b{color:var(--paper)}
.hidden{display:none!important}

/* ── 모달 ── */
.modal{position:fixed;inset:0;background:rgba(6,5,4,.86);z-index:100;display:flex;align-items:center;
  justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.modal-in{background:linear-gradient(180deg,var(--ink-3),var(--ink-1));border:1px solid var(--gold-line-2);
  border-radius:4px;padding:32px;max-width:540px;width:100%;max-height:88vh;overflow:auto;position:relative}
.modal-in::before{content:'';position:absolute;top:-1px;left:-1px;width:16px;height:16px;
  border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.modal-in::after{content:'';position:absolute;bottom:-1px;right:-1px;width:16px;height:16px;
  border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
.modal-in h2{font-family:var(--serif);font-size:20px;letter-spacing:1px;margin-bottom:6px}

footer{border-top:1px solid var(--gold-line);margin-top:70px;padding:34px 0 70px;color:var(--paper-3);
  font-size:12.5px;line-height:2;position:relative;z-index:2}
footer b{color:var(--paper-2)}

/* ── 인쇄 ── */
@media print{
  header,.hero,.steps,.badges,footer,.btn,#secbar,#prog,.modal,#resumeBox{display:none!important}
  body{background:#fff;color:#111}body::before,body::after{display:none}
  .card{background:#fff;border:0;padding:0}.card::before,.card::after{display:none}
  .report{color:#111}.report h1,.report h2,.report h3{color:#111;-webkit-text-fill-color:#111}
  .report strong{color:#000}.report th{background:#f3f3f3;color:#333}
  .report th,.report td{border-color:#ccc}
}

/* ── 체크박스 / 라디오 ── */
.opt input[type=checkbox],.opt input[type=radio]{appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border:1px solid var(--gold-line-2);background:var(--ink-1);
  border-radius:2px;position:relative;cursor:pointer;transition:.15s;flex-shrink:0}
.opt input[type=radio]{border-radius:50%}
.opt input:hover{border-color:var(--gold)}
.opt input:checked{background:linear-gradient(180deg,#e2c88d,#b5934f);border-color:var(--gold)}
.opt input[type=checkbox]:checked::after{content:'✓';position:absolute;inset:0;color:#1a1207;
  font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:1}
.opt input[type=radio]:checked::after{content:'';position:absolute;inset:4px;background:#1a1207;border-radius:50%}
.opt span{flex:1}

/* ── 모바일 ── */
@media(max-width:520px){
  .hero h1{font-size:24px;line-height:1.5}
  .hero .eyebrow{letter-spacing:4px;font-size:11px}
  .p-char .han{font-size:34px}
  .card h2{font-size:19px}
  .report{font-size:15.5px;line-height:1.95}
  .report h1{font-size:21px}.report h2{font-size:17.5px}
  .btn{padding:14px 20px;font-size:14.5px}
  .step{flex:1 0 50%}
}

/* ── 히어로 명반 장식 ── */
.hero{position:relative;overflow:hidden}
.hero-ornament{position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:620px;height:620px;opacity:.16;pointer-events:none;z-index:0;
  animation:spin 240s linear infinite}
.hero-ornament svg{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .wrap{position:relative;z-index:2}
@media(max-width:680px){.hero-ornament{width:420px;height:420px;opacity:.12}}
@media(prefers-reduced-motion:reduce){.hero-ornament{animation:none}}

/* ── 인물 일러스트 슬롯 ── */
.figure{position:relative;overflow:hidden;border-radius:3px}
.figure img{width:100%;display:block;filter:sepia(.55) saturate(.75) hue-rotate(-8deg) contrast(1.05)}
.figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,11,8,0) 45%,rgba(13,11,8,.92) 100%),
             linear-gradient(0deg,rgba(201,169,97,.16),rgba(201,169,97,.16));
  mix-blend-mode:normal}
.figure.hero-fig{position:absolute;bottom:0;width:250px;opacity:.55;z-index:1;
  mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}
.figure.hero-fig.left{left:2%}.figure.hero-fig.right{right:2%}
@media(max-width:900px){.figure.hero-fig{display:none}}
.gender-fig{width:100%;height:104px;border:1px solid var(--gold-line);border-radius:3px;overflow:hidden;
  position:relative;background:rgba(0,0,0,.25)}
.gender-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  filter:sepia(.55) saturate(.75) hue-rotate(-8deg) contrast(1.05)}
.gender-fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,11,8,0) 40%,rgba(13,11,8,.85) 100%),
             linear-gradient(0deg,rgba(201,169,97,.14),rgba(201,169,97,.14))}

/* ── 로딩 화면 ── */
.loader{text-align:center;padding:26px 0 10px}
.loader-ring{width:200px;height:200px;margin:0 auto;position:relative}
.loader-ring .orn{position:absolute;inset:8px;opacity:.42;animation:spin 40s linear infinite}
.loader-ring .orn svg{width:100%;height:100%}
.loader-ring .prog-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.loader-ring #progArc{transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.loader-ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.loader-ring .pct b{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1;
  background:linear-gradient(135deg,#f6ead0,#d3b473 55%,#a08249);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.loader-ring .pct b i{font-style:normal;font-size:17px;margin-left:1px}
.loader-ring .pct span{font-size:11.5px;color:var(--paper-3);letter-spacing:.3px;
  max-width:150px;text-align:center;line-height:1.45}
.loader-msg{font-family:var(--serif);font-size:17px;color:var(--gold-hi);margin-top:22px;letter-spacing:.5px;
  min-height:26px;transition:opacity .3s}
.loader-time{font-size:12.5px;color:var(--paper-3);margin-top:7px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7}
.checklist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px;text-align:left}
@media(max-width:760px){.checklist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.checklist{grid-template-columns:1fr}}
.chk{border:1px solid var(--gold-line);border-radius:2px;padding:10px 12px;font-size:12.5px;
  color:var(--paper-3);display:flex;align-items:center;gap:9px;transition:.35s;background:rgba(0,0,0,.2)}
.chk i{width:6px;height:6px;border-radius:50%;background:var(--paper-3);opacity:.35;flex-shrink:0;transition:.3s}
.chk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk.run{border-color:var(--gold-line-2);color:var(--gold-hi);background:rgba(201,169,97,.07)}
.chk.run i{background:var(--gold);opacity:1;animation:pulse 1.2s infinite}
.chk.ok{border-color:rgba(92,184,148,.32);color:rgba(92,184,148,.88)}
.chk.ok i{background:var(--o-목);opacity:1;animation:none}
.report.reveal{animation:reveal .7s cubic-bezier(.2,.7,.3,1)}
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 항목별 진행 바 */
.chk{position:relative;overflow:hidden}
.chk u{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold));opacity:.75;transition:width .5s ease}
.chk.ok u{background:var(--o-목);opacity:.6}
.plans{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plans{grid-template-columns:1fr}}
.plans .plan{padding:22px 18px}
.plans .price{font-size:27px;margin:12px 0 2px}
.plans ul{font-size:12.5px}

/* ── 차트 블록 ── */
.chart{background:rgba(0,0,0,.22);border:1px solid var(--gold-line);border-radius:3px;
  padding:18px 16px 12px;margin-top:10px;overflow-x:auto}
.chart-cap{font-size:12px;color:var(--paper-3);text-align:center;margin-top:8px;line-height:1.7}
.chart-cap b{color:var(--gold-lo);font-weight:600}
.chart svg{min-width:640px}
.chart.fit svg{min-width:0}
@media(max-width:680px){.chart{padding:14px 10px 10px}}

/* ── 로딩 중 카톡 전환 제안 ── */
#kakaoOffer{margin:20px auto 0;max-width:520px;animation:reveal .5s ease}
#kakaoOffer .offer{border:1px solid var(--gold-line-2);border-radius:3px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(201,169,97,.09),rgba(201,169,97,.02))}
#kakaoOffer .offer p{font-size:13.5px;color:var(--paper-2);line-height:1.8;margin-bottom:12px;word-break:keep-all}
#kakaoOffer .row{display:flex;gap:8px}
#kakaoOffer input{flex:1}
#kakaoOffer .msg{font-size:12.5px;margin-top:10px;min-height:18px;text-align:left;line-height:1.7}

/* ── 별점 ── */
.stars{display:flex;gap:6px;font-size:30px;color:rgba(201,169,97,.25);cursor:pointer;user-select:none}
.stars span{transition:.15s}
.stars span:hover{transform:scale(1.15)}
.stars span.on{color:var(--gold);text-shadow:0 0 14px rgba(201,169,97,.45)}

/* ── 메인 "비슷한 사주" 훅 ── */
.similar-hook{border:1px solid var(--gold-line);border-radius:4px;margin:6px 0 22px;
  padding:26px 28px;background:linear-gradient(135deg,rgba(201,169,97,.08),rgba(184,53,47,.04));
  position:relative;overflow:hidden}
.similar-hook::before{content:'六十';position:absolute;right:-8px;top:-26px;
  font-family:var(--serif);font-size:120px;color:rgba(201,169,97,.06);pointer-events:none}
.similar-hook h3{font-family:var(--serif);font-size:19px;color:var(--gold-hi);margin-bottom:8px;word-break:keep-all}
.similar-hook p{font-size:14px;color:var(--paper-2);line-height:1.9;word-break:keep-all}
.similar-hook b{color:var(--gold-hi)}
@media(max-width:680px){.similar-hook{padding:20px 18px}}