:root{--bg:#f6f3ee;--card:#fff;--ink:#1d1c1a;--sub:#5f5a52;--line:#e6e0d6;--navy:#1f2a44;--gold:#b8893a;--gold2:#f3e7cf;
 --목:#3a8f5a;--화:#d2553b;--토:#b9872f;--금:#8c8f96;--수:#2f6fb1}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;line-height:1.55;font-size:16px}
.wrap{max-width:560px;margin:0 auto;padding:0 14px 60px}
header{padding:26px 0 10px}
.brand{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.08em}
h1{font-size:24px;margin:4px 0 6px;line-height:1.3}
.lead{color:var(--sub);margin:0;font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px;margin:14px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card h2{font-size:17px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.card h2 small{font-weight:400;color:var(--sub);font-size:13px}
label{display:block;font-size:13px;color:var(--sub);margin:10px 0 4px}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
input,select{width:100%;font-size:17px;padding:12px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:48px}
input:focus,select:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;min-height:48px;border:0;background:#fff;font-size:16px;color:var(--sub);cursor:pointer}
.seg button.on{background:var(--navy);color:#fff;font-weight:700}
.chk{display:flex;align-items:center;gap:8px;font-size:15px;margin-top:10px;color:var(--ink)}
.chk input{width:22px;height:22px;min-height:0;margin:0}
.btn{display:block;width:100%;min-height:54px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:18px;font-weight:700;margin-top:16px;cursor:pointer}
.btn.gold{background:var(--gold)}
.btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--navy);font-size:16px;min-height:48px}
.hint{font-size:12.5px;color:var(--sub);margin:8px 0 0}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-top:6px}
.pil{border:1px solid var(--line);border-radius:12px;padding:8px 4px;background:#fcfbf8}
.pil .lab{font-size:12px;color:var(--sub)}
.pil .hz{font-size:30px;font-weight:700;line-height:1.15;margin:4px 0 2px}
.pil .ko{font-size:13px;color:var(--sub)}
.pil .god{font-size:11.5px;margin-top:4px;color:var(--navy);font-weight:600}
.pil.me .hz{color:var(--gold)}
.e-목{color:var(--목)}.e-화{color:var(--화)}.e-토{color:var(--토)}.e-금{color:var(--금)}.e-수{color:var(--수)}
.tag{display:inline-block;background:var(--gold2);color:#6d4d14;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.big{font-size:19px;font-weight:700;margin:4px 0 8px}
ul.clean{margin:8px 0 0;padding-left:18px}ul.clean li{margin:4px 0}
.bars{margin-top:8px}.bar{display:grid;grid-template-columns:52px 1fr 44px;align-items:center;gap:8px;margin:6px 0;font-size:14px}
.bar .tr{height:14px;background:#efece6;border-radius:7px;overflow:hidden}.bar .fl{height:100%;border-radius:7px}
.bar .pc{text-align:right;color:var(--sub);font-variant-numeric:tabular-nums}
.note{font-size:13.5px;color:var(--sub);background:#faf8f4;border-radius:10px;padding:10px 12px;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
th,td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:center}th{color:var(--sub);font-weight:600;font-size:12.5px}
td .hz{font-size:18px;font-weight:700}
.warn{background:#fff6e5;border:1px solid #f0d9a8;color:#6d4d14;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:10px}
.cta{position:sticky;bottom:12px;margin-top:18px}
.foot{font-size:12px;color:#8a847a;margin-top:26px;line-height:1.6}
.foot a{color:inherit}
.share{display:flex;gap:8px;margin-top:10px}.share .btn{margin-top:0;display:flex;align-items:center;justify-content:center;text-decoration:none}
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
@media (prefers-reduced-motion:no-preference){.card{animation:up .25s ease both}@keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* 결과 표시(공통) */
#result{display:none}#result.on{display:block}
/* ── PC 웹페이지(넓은 화면): 왼쪽 입력 고정 + 오른쪽 결과 2단 ── */
@media (min-width:1024px){
  body{font-size:16.5px}
  .wrap{max-width:1240px;padding:0 32px 80px;display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:28px;align-items:start}
  header{grid-column:1/-1;padding:40px 0 18px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:32px;row-gap:4px}
  header .brand{flex-basis:100%}
  header h1{font-size:34px}header h1 br{display:none}header .lead{max-width:460px;text-align:right;margin-bottom:6px}
  .wrap>section.card:first-of-type{position:sticky;top:20px;margin-top:0}
  #result.on{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
  #result .card{margin:0}
  #result .card.wide,#result .foot{grid-column:1/-1}
  .pillars{gap:10px}.pil .hz{font-size:40px}.pil{padding:12px 6px}
  .btn{cursor:pointer}.btn:hover{filter:brightness(1.07)}.btn.line:hover{background:#f4f1ea}
  .card{padding:22px 22px}
  .cal .c{min-height:58px;font-size:16px}
  .bar{grid-template-columns:96px 1fr 44px}
}
@media (min-width:1024px) and (max-height:760px){.wrap>section.card:first-of-type{position:static}}
/* 입력 전 PC 화면 오른쪽 빈칸 안내 */
.empty-hint{display:none}
@media (min-width:1024px){#result:not(.on)+.empty-hint,.empty-hint.show{display:block}}