/* 사주백수 — 명패/부적 디자인 패스 */
:root{--navy:#1C2B4A;--gold:#C9A227;--ink:#1A1A1A;--ivory:#F5EFE3;--line:#E5E1D8}
*{margin:0;padding:0;box-sizing:border-box}html{word-break:keep-all;background:#FFFFFF}
body{min-width:320px;background:#FFFFFF;color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.72;text-rendering:optimizeLegibility}button,input,select{font:inherit}.wrap{width:100%;max-width:500px;margin:0 auto;padding:22px 22px 72px}
header.site{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0 12px;border-bottom:1px solid var(--line)}header.site a{color:var(--navy);font-family:"Gowun Batang",serif;font-size:20px;font-weight:700;letter-spacing:.08em;text-decoration:none}header.site .dot{color:var(--gold)}
h1{max-width:410px;margin:34px 0 12px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:clamp(31px,8vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.32;text-wrap:balance}p.sub{max-width:420px;margin-bottom:30px;color:var(--ink);font-size:15px;opacity:.72}
.tests{display:flex;flex-direction:column;gap:0;margin-top:22px;border-top:2px solid var(--navy)}a.test-card{position:relative;display:block;padding:20px 38px 20px 4px;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color .18s ease,padding .18s ease}a.test-card::after{content:"→";position:absolute;top:50%;right:4px;color:var(--navy);font-size:19px;transform:translateY(-50%)}a.test-card:hover,a.test-card:focus-visible{padding-left:12px;background:var(--ivory);outline:2px solid var(--navy);outline-offset:-2px}a.test-card .t{color:var(--navy);font-family:"Gowun Batang",serif;font-size:18px;font-weight:700}a.test-card .d{margin-top:4px;color:var(--ink);font-size:13px;opacity:.68}a.test-card.soon{pointer-events:none;opacity:.42}.tag{display:inline-block;margin-left:7px;padding:1px 6px;border:1px solid var(--navy);color:var(--navy);font-size:10px;vertical-align:3px}
form{margin-top:12px;padding-top:4px;border-top:1px solid var(--navy)}label{display:block;margin:22px 0 8px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:15px;font-weight:700;letter-spacing:.02em}input,select{width:100%;min-height:52px;padding:13px 14px;border:1px solid var(--line);border-bottom-color:var(--navy);background:#FFFFFF;color:var(--ink);font-size:16px;transition:border-color .16s ease,background-color .16s ease}input:hover,select:hover{border-color:var(--navy)}input:focus,select:focus,input:focus-visible,select:focus-visible{border-color:var(--navy);background:var(--ivory);outline:2px solid var(--navy);outline-offset:2px}input::placeholder{color:var(--ink);opacity:.38}.hint{margin-top:10px;color:var(--ink);font-size:12px;line-height:1.65;opacity:.58}
button.cta{width:100%;min-height:58px;margin-top:30px;padding:16px 18px;border:1px solid var(--gold);background:var(--gold);color:var(--navy);cursor:pointer;font-family:"Gowun Batang",serif;font-size:18px;font-weight:700;letter-spacing:.02em;transition:background-color .16s ease,color .16s ease}button.cta:hover,button.cta:focus-visible{background:var(--navy);color:var(--ivory);outline:2px solid var(--gold);outline-offset:2px}button.cta:disabled{cursor:wait;opacity:.58}button.ghost{width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--navy);background:#FFFFFF;color:var(--navy);cursor:pointer;font-size:14px;font-weight:700}button.ghost:hover,button.ghost:focus-visible{background:var(--navy);color:var(--ivory);outline:2px solid var(--navy);outline-offset:2px}
#result{display:none;margin-top:12px}#result.on{display:block}.label-hero{position:relative;overflow:hidden;padding:54px 26px 46px;border:1px solid var(--gold);background:var(--navy);color:var(--ivory);text-align:center}.label-hero::before,.label-hero::after{content:"";position:absolute;width:54px;height:54px;pointer-events:none}.label-hero::before{top:13px;left:13px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}.label-hero::after{right:13px;bottom:13px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold)}.label-hero .emb{margin:0 auto 18px;line-height:0}.label-hero .emb svg{width:52px;height:52px}.label-hero .who{font-family:"Gowun Batang",serif;font-size:14px;letter-spacing:.08em;opacity:.76}.label-hero .big{margin:14px auto 12px;color:var(--gold);font-family:"Gowun Batang",serif;font-size:clamp(39px,11vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.18;text-wrap:balance}.label-hero .one{max-width:370px;margin:0 auto;font-size:15px;line-height:1.65}.score{margin:8px 0 2px;color:var(--gold);font-family:"Gowun Batang",serif;font-size:58px;font-weight:700;line-height:1.1}.gauge{height:10px;max-width:300px;margin:19px auto 3px;border:1px solid var(--ivory)}.gauge i{display:block;width:0;height:100%;background:var(--gold);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}.tags span{padding:4px 8px;border:1px solid var(--ivory);color:var(--ivory);font-size:11px;letter-spacing:.02em}
.quip{margin-top:16px;padding:15px 16px;border-top:1px solid var(--navy);border-bottom:1px solid var(--line);color:var(--ink);font-family:"Gowun Batang",serif;font-size:14px}.sec{margin-top:30px;padding-top:14px;border-top:1px solid var(--line)}.sec h3{margin-bottom:8px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:17px;font-weight:700}.sec p{font-size:15px}.chemi{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:30px;border:1px solid var(--line)}.chemi>div{padding:16px}.chemi>div+div{border-left:1px solid var(--line)}.chemi b{display:block;margin-bottom:6px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:14px}.chemi p{font-size:14px}
body .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;border:1px solid var(--navy);background:var(--navy)}body .pillar{position:relative;min-height:158px;padding:18px 4px 16px;border:0;border-right:1px solid var(--line);background:var(--ivory);text-align:center}body .pillar:last-child{border-right:0}body .pillar::before,body .pillar::after{content:"";position:absolute;width:12px;height:12px}body .pillar::before{top:6px;left:6px;border-top:1px solid var(--navy);border-left:1px solid var(--navy)}body .pillar::after{right:6px;bottom:6px;border-right:1px solid var(--navy);border-bottom:1px solid var(--navy)}body .pillar .h{color:var(--navy);font-family:"Gowun Batang",serif;font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.68}body .pillar .g{margin-top:7px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:32px;font-weight:700;line-height:1.22}body .pillar.day{border:0;border-right:1px solid var(--line);background:var(--navy)}body .pillar.day .h{color:var(--ivory);opacity:.72}body .pillar.day .g{color:var(--gold)}body .pillar.day::before,body .pillar.day::after{border-color:var(--gold)}body .pillar .na{margin-top:18px;color:var(--ink);font-size:12px;line-height:1.45;opacity:.48}
body .ohaeng{margin-top:30px}body .ohaeng .row5{display:flex;align-items:center;gap:10px;margin-top:11px}body .ohaeng .nm{width:34px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:14px;font-weight:700}body .ohaeng .bar{flex:1;height:10px;border:1px solid var(--line)}body .ohaeng .bar i{display:block;height:100%;background:var(--navy)}body .ohaeng .row5.top .bar i{background:var(--gold)}body .ohaeng .ct{width:22px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:14px;text-align:right}
#result.on .label-hero{animation:up .5s ease both}#result.on .quip{animation:up .5s .1s ease both}#result.on .sec,#result.on .chemi{animation:up .5s .15s ease both}#result.on .sec:nth-of-type(3){animation-delay:.25s}#result.on .sec:nth-of-type(4){animation-delay:.35s}#result.on .actions{animation:up .5s .45s ease both}@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:32px;padding-top:18px;border-top:1px solid var(--navy)}.actions .cta{margin-top:0}img#cardprev{display:block;width:100%;margin-top:16px;border:1px solid var(--navy)}.next{margin-top:42px;padding-top:16px;border-top:2px solid var(--navy)}.next h3{margin-bottom:8px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:15px}canvas{display:none}footer{margin-top:54px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink);font-size:11px;opacity:.52}footer a{color:var(--ink)}.notice{margin-top:28px;padding:14px;border:1px solid var(--line);color:var(--ink);font-size:12px;opacity:.65}
@media (max-width:380px){.wrap{padding-right:16px;padding-left:16px}.label-hero{padding-right:18px;padding-left:18px}body .pillar{min-height:146px;padding-right:2px;padding-left:2px}body .pillar .g{font-size:28px}.chemi{grid-template-columns:1fr}.chemi>div+div{border-top:1px solid var(--line);border-left:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto}#result.on .label-hero,#result.on .quip,#result.on .sec,#result.on .chemi,#result.on .actions{animation:none}a.test-card,.gauge i,input,select,button.cta{transition:none}a.test-card:hover,a.test-card:focus-visible{padding-left:4px}}