/* vosal.css — 사주 명식 메인 화면. 글꼴·토큰 체계는 knavi 를 따르고 브랜드 색만 티파니 블루. */
@import url('vendor/pretendard/pretendardvariable-dynamic-subset.min.css');   /* 자체 사본 — CDN 호출 없음 */

:root{
  --topbar:52px;
  --paper:#F7F8F7;
  --sheet:#FFFFFF;
  --ink:#1B2426;
  --ink2:#5A6669;
  --ink3:#97A2A5;
  --rule:#D8DEDF;
  --rule2:#EDF1F1;
  --tiffany:#0ABAB5;        /* 면: 주 버튼·현재 대운·사령 배지. 위 글자는 --ink */
  --tiffany-2:#81D8D0;      /* 연한 면: 포커스 테두리·호버·오행 링 */
  --tiffany-bg:#E4F6F4;     /* 아주 연한 면: 카드 머리·툴팁 */
  --tiffany-ink:#087F7B;    /* 글자색 (흰 바탕 대비 4.6:1) */
  --tiffany-deep:#065F5C;
  --red:#C8322B; --red-bg:#FBECEA;
  /* 오행 */
  --wood:#2E8B5E;  --wood-bg:#E6F3EC;
  --fire:#D0534B;  --fire-bg:#FCEBE9;
  --earth:#B0813A; --earth-bg:#FBF2E2;
  --metal:#7C868D; --metal-bg:#EEF1F2;
  --water:#2F5FA8; --water-bg:#E7EEF9;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
  --hanja:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Apple Myungjo",serif;   /* 한자는 OS 글꼴에서 온다 */
  --r1:4px; --r2:8px; --r3:10px; --r4:14px;
  --sh1:0 1px 2px rgba(27,36,38,.06);
  --sh2:0 4px 14px rgba(27,36,38,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
a{color:var(--tiffany-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--tiffany);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}
h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:14px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;font-size:11px;margin-bottom:14px}
h3{font-size:13px;color:var(--ink2);margin-bottom:10px}
h3 .sub{font-weight:500;color:var(--ink3);margin-left:6px}

/* ── 상단 바 ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:0 20px;height:var(--topbar);background:var(--sheet);border-bottom:1px solid var(--rule)}
.top h1{font-size:15px;margin:0;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.top h1 .logo{color:var(--tiffany-ink);box-shadow:inset 0 -6px 0 var(--tiffany-bg)}
.top h1 .tag{font-size:12px;font-weight:500;color:var(--ink3);margin-left:10px;padding-left:10px;border-left:1px solid var(--rule);letter-spacing:.01em}
.top .status{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:12px;color:var(--ink3);white-space:nowrap}
.top .status .who{color:var(--ink);font-weight:600;background:var(--rule2);border-radius:14px;padding:4px 11px}
.top .status .who:empty{display:none}

/* ── 배치 ── */
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 40px;display:grid;grid-template-columns:312px minmax(0,1fr);gap:20px;align-items:start}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r4);box-shadow:var(--sh1)}
.card.input{padding:20px;position:sticky;top:calc(var(--topbar) + 20px)}
.card.chart{overflow:hidden}

/* ── 입력 ── */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
label,.lbl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px}
input[type=text],input[type=number]{font-family:var(--font);font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:var(--r2);padding:0 10px;height:38px;width:100%;transition:border-color .12s,box-shadow .12s}
input[type=number]{font-family:var(--mono);text-align:right;-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input:focus{outline:none;border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-bg)}
input[aria-invalid=true]{border-color:var(--red);background:var(--red-bg)}
.ymd{display:flex;align-items:center;gap:4px}
.ymd input{width:0;flex:1 1 0;min-width:52px}
.ymd .u{font-size:12px;color:var(--ink3);margin-right:6px;white-space:nowrap}
.ymd .u:last-child{margin-right:0}
.hint{font-size:12px;color:var(--ink3);margin-top:5px;line-height:1.45}
.err{font-size:12px;color:var(--red);font-weight:600;margin-top:5px;line-height:1.45}
.seg{display:flex;border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden;background:#fff}
.seg label{flex:1;margin:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;gap:4px;height:36px;font-size:13px;font-weight:600;color:var(--ink2);border-right:1px solid var(--rule);transition:background .12s,color .12s}
.seg label:last-child span{border-right:0}
.seg span small{font-size:11px;font-weight:500;color:var(--ink3);font-family:var(--hanja)}
.seg input:checked+span{background:var(--tiffany);color:var(--ink)}
.seg input:checked+span small{color:var(--tiffany-deep)}
.seg input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--tiffany-deep)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;margin:0;padding:9px 12px;background:var(--tiffany-bg);border-radius:var(--r2)}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--tiffany-ink)}
.chk small{font-weight:500;color:var(--ink2);margin-left:4px}

button,.btn{font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:var(--r2);padding:0 14px;height:36px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background .12s,border-color .12s,transform .06s}
.btn:hover:not(:disabled){background:var(--rule2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{color:var(--ink3);cursor:not-allowed;background:var(--paper)}
.btn.primary{background:var(--tiffany);border-color:var(--tiffany);color:var(--ink);height:42px;font-size:14px}
.btn.primary:hover:not(:disabled){background:#08A8A3;border-color:#08A8A3}
.btn.wide{width:100%}
.recent{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule2)}
.recent ul{list-style:none;margin:0;padding:0}
.recent li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.recent li:last-child{border-bottom:0}
.recent li button{height:auto;padding:0;border:0;background:none;font-weight:600;color:var(--tiffany-ink);font-size:13px}
.recent li button:hover{text-decoration:underline;background:none}
.recent li .d{color:var(--ink3);font-size:12px;margin-left:auto}

/* ── 명식 카드 ── */
.print-head{display:none}
.chart-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 22px;background:var(--tiffany-bg);border-bottom:1px solid var(--rule)}
.pname{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pmeta{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r1);background:var(--tiffany);color:var(--ink);white-space:nowrap;line-height:1.5;letter-spacing:.02em}
.badge.ghost{background:#fff;color:var(--tiffany-ink);border:1px solid var(--tiffany-2)}
.birth{text-align:right}
.birth .line{display:flex;justify-content:flex-end;gap:10px;font-size:14px;line-height:1.7}
.birth .k{font-size:11px;font-weight:700;color:var(--tiffany-ink);letter-spacing:.06em;padding-top:4px}
.birth .v{font-weight:600;color:var(--ink);font-size:15px}
.birth .note{font-size:12px;color:var(--ink2);font-weight:400;margin-top:2px}
.birth .note:empty{display:none}

.pillars-wrap{padding:18px 22px 10px}
table.pillars{width:100%;border-collapse:separate;border-spacing:8px 0;margin:0 -8px;table-layout:fixed}
table.pillars th{font-weight:600;color:var(--ink3);padding:0 0 8px;text-align:center;border-bottom:1px solid var(--rule)}
table.pillars th .hz{display:block;font-family:var(--hanja);font-size:15px;color:var(--ink2);font-weight:600}
table.pillars th small{font-size:11px;letter-spacing:.06em}
table.pillars td{text-align:center;vertical-align:middle;padding:0}
tr.gan td,tr.ji td{padding-top:10px}
.gz{display:block;border-radius:var(--r3);padding:8px 4px 6px;background:var(--rule2);color:var(--ink);transition:background .2s}
.gz .c{display:block;font-family:var(--hanja);font-size:38px;line-height:1.05;font-weight:600;letter-spacing:-.02em}
.gz .k{display:block;font-size:12px;color:var(--ink2);margin-top:3px;font-weight:500}
.gz .k b{font-weight:600;font-family:var(--hanja)}
.gz.wood{color:var(--wood);background:var(--wood-bg)}
.gz.fire{color:var(--fire);background:var(--fire-bg)}
.gz.earth{color:var(--earth);background:var(--earth-bg)}
.gz.metal{color:var(--metal);background:var(--metal-bg)}
.gz.water{color:var(--water);background:var(--water-bg)}
tr.ji td{padding-bottom:12px;border-bottom:1px solid var(--rule2)}
tr.hid td{padding:10px 0 6px}
.hid-lbl{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.06em;text-align:left;padding:10px 0 2px 2px}
.hs{display:flex;flex-direction:column;gap:3px;align-items:center}
.hs .h{display:inline-flex;align-items:center;gap:5px;font-family:var(--hanja);font-size:16px;font-weight:600;color:var(--ink2);border-radius:var(--r1);padding:1px 8px;min-width:58px;justify-content:center}
.hs .h small{font-family:var(--font);font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:.02em}
.hs .h.wood{color:var(--wood)}.hs .h.fire{color:var(--fire)}.hs .h.earth{color:var(--earth)}.hs .h.metal{color:var(--metal)}.hs .h.water{color:var(--water)}
.hs .h.sar{background:var(--tiffany);color:var(--ink)}
.hs .h.sar small{color:var(--tiffany-deep)}
.hs .h.empty{color:var(--rule);font-weight:400}
.saryung{margin:8px 0 6px;font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saryung .badge{font-family:var(--font)}
.saryung .hz{font-family:var(--hanja);font-weight:600;color:var(--ink)}

/* ── 오행·대운 ── */
.lower{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;padding:14px 22px 6px;border-top:1px solid var(--rule2)}
.five{position:relative;width:220px;height:220px;margin:0 auto}
.five::before{content:"";position:absolute;inset:26px;border:1.5px dashed var(--tiffany-2);border-radius:50%}
.node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1.5px solid var(--rule);box-shadow:var(--sh1);font-family:var(--hanja);font-weight:600;line-height:1}
.node .c{font-size:22px}
.node .n{font-family:var(--font);font-size:10px;font-weight:600;margin-top:3px;color:var(--ink3)}
.node.center{width:82px;height:82px;left:69px;top:69px;border-width:2px}
.node.center .c{font-size:30px}
.node.center .n{font-size:11px}
.node.ring{width:56px;height:56px}
.node.ring.p0{left:82px;top:0}.node.ring.p1{left:164px;top:82px}.node.ring.p2{left:82px;top:164px}.node.ring.p3{left:0;top:82px}
.node.wood{color:var(--wood);border-color:var(--wood);background:var(--wood-bg)}
.node.fire{color:var(--fire);border-color:var(--fire);background:var(--fire-bg)}
.node.earth{color:var(--earth);border-color:var(--earth);background:var(--earth-bg)}
.node.metal{color:var(--metal);border-color:var(--metal);background:var(--metal-bg)}
.node.water{color:var(--water);border-color:var(--water);background:var(--water-bg)}
.node.zero{opacity:.45;background:#fff}
.five-count{display:flex;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.five-count span{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r1);background:var(--rule2);color:var(--ink2)}
.five-count span b{font-family:var(--hanja);margin-right:3px}
.five-count .wood b{color:var(--wood)}.five-count .fire b{color:var(--fire)}.five-count .earth b{color:var(--earth)}.five-count .metal b{color:var(--metal)}.five-count .water b{color:var(--water)}

.luck{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.lk{border:1px solid var(--rule);border-radius:var(--r3);padding:8px 2px 7px;text-align:center;background:#fff}
.lk .age{font-family:var(--mono);font-size:15px;font-weight:700;line-height:1.1}
.lk .yr{font-size:10px;color:var(--ink3);margin-top:1px}
.lk .g,.lk .j{display:block;font-family:var(--hanja);font-size:22px;font-weight:600;line-height:1.15}
.lk .g{margin-top:6px}
.lk .ko{display:block;font-size:10px;color:var(--ink3);margin-top:2px}
.lk.pre{border-style:dashed;background:var(--paper)}
.lk.pre .age{color:var(--ink3);font-size:12px;padding-top:2px}
/* 현재 대운: 옥색으로 채우면 오행색 간지(토 갈색 등)가 1.5:1 로 묻힌다. 아주 연한 옥색 바탕 + 굵은 옥색 테두리로 표시해
   간지는 흰 바탕과 같은 대비(큰 글자 3:1 이상)를 유지한다. */
.lk.cur{background:var(--tiffany-bg);border:2px solid var(--tiffany);padding:7px 1px 6px;box-shadow:0 0 0 3px var(--tiffany-bg)}
.lk.cur .age{color:var(--tiffany-deep)}
.lk.cur .yr,.lk.cur .ko{color:var(--tiffany-deep)}
.lk .wood{color:var(--wood)}.lk .fire{color:var(--fire)}.lk .earth{color:var(--earth)}.lk .metal{color:var(--metal)}.lk .water{color:var(--water)}

.actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px 20px;border-top:1px solid var(--rule2);margin-top:8px}
.actions .btn:last-child{margin-left:auto}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--r3);box-shadow:var(--sh2)}

/* ── 폰 ── */
@media(max-width:760px){
  .wrap{grid-template-columns:1fr;padding:12px 12px 40px;gap:14px}
  .card.input{position:static;padding:16px}
  .top{padding:0 14px}
  .top .status .who{display:none}
  .chart-head{flex-direction:column;padding:14px 16px}
  .birth{text-align:left}
  .birth .line{justify-content:flex-start}
  .pillars-wrap{padding:12px 12px 8px}
  table.pillars{border-spacing:5px 0;margin:0 -5px}
  .gz .c{font-size:28px}
  .hs .h{min-width:0;font-size:14px;padding:1px 5px}
  .lower{grid-template-columns:1fr;padding:12px 16px 4px;gap:14px}
  .luck{grid-template-columns:repeat(4,minmax(0,1fr))}
  .actions{padding:12px 16px 16px}
  .actions .btn{flex:1 1 40%}
  .actions .btn:last-child{margin-left:0}
  input[type=text],input[type=number]{font-size:16px}
}
@media(pointer:coarse){button,.btn{min-height:44px}}

/* ── 인쇄 ── */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .top,.card.input,.actions,.toast{display:none!important}
  .wrap{display:block;padding:0;max-width:none}
  .card.chart{border:0;box-shadow:none;border-radius:0}
  .print-head{display:block;font-size:11px;color:var(--tiffany-deep);font-weight:600;letter-spacing:.04em;padding:0 0 8px;border-bottom:1px solid var(--rule)}
  .chart-head{background:#fff;padding:12px 0}
  .gz,.node,.lk.cur,.hs .h.sar,.badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lower{grid-template-columns:250px 1fr;page-break-inside:avoid}
}