/* Heimdallr 독립 사이트 공통 스타일 — 화면 · 설명서와 같은 색(노랑) · 글꼴(나눔고딕 + Outfit) */
:root{
  --bg:#f5f5f2; --paper:#ffffff; --ink:#1b1b19; --muted:#62625b; --line:#e3e3dd; --soft:#efefe9;
  --brand:#ffc300; --brand-soft:#fff4cc; --brand-ink:#1b1b19; --link:#7a5d00; --warn:#b23a30; --warn-soft:#f8e7e4; --good:#4f8a55; --good-soft:#e6f0e2;
  --G:#3f5fae; --B:#5f7a2e; --E:#c8683a; --C:#8a5fb3;
  --f-body:'Nanum Gothic','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --f-disp:'Outfit','Nanum Gothic',sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#121211; --paper:#1b1b19; --ink:#f1f1ec; --muted:#a7a79f; --line:#30302c; --soft:#252522;
  --brand-soft:#352b0b; --link:#ffd24d; --warn:#e5675b; --warn-soft:#3a2320; --good:#7cc08a; --good-soft:#1f3324; --G:#7d9bef; --B:#a6c26b; --E:#e0956b; --C:#b493dc; color-scheme:dark; } }
:root[data-theme="dark"]{ --bg:#121211; --paper:#1b1b19; --ink:#f1f1ec; --muted:#a7a79f; --line:#30302c; --soft:#252522;
  --brand-soft:#352b0b; --link:#ffd24d; --warn:#e5675b; --warn-soft:#3a2320; --good:#7cc08a; --good-soft:#1f3324; --G:#7d9bef; --B:#a6c26b; --E:#e0956b; --C:#b493dc; color-scheme:dark; }
*{box-sizing:border-box;}
[hidden]{display:none!important;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15.5px; line-height:1.7;
  padding:32px max(16px, env(safe-area-inset-right, 0px)) 72px max(16px, env(safe-area-inset-left, 0px));}
a{color:var(--link);} a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--link); outline-offset:2px;}
.wrap{max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:28px;}
.wrap.narrow{max-width:760px;}
header.top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.name{font-family:var(--f-disp); font-weight:800; font-size:clamp(36px, 7vw, 52px); line-height:1; letter-spacing:-.03em; margin:0; text-decoration:none; color:var(--ink);}
.name::after{content:""; display:inline-block; width:.22em; height:.22em; background:var(--brand); margin-left:.06em;}
.sub{color:var(--muted); font-weight:700; font-size:14px; margin:8px 0 0;}
.en{font-family:var(--f-disp);}
.btns{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pill{font:inherit; font-size:14px; font-weight:700; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.pill:hover{border-color:var(--ink);}
.pill.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.pill.soft{background:var(--brand-soft); border-color:transparent;}
.pill:disabled{opacity:.5; cursor:not-allowed;}
h1{font-size:28px; margin:0; letter-spacing:-.02em; line-height:1.3;}
h2{font-size:21px; margin:0; letter-spacing:-.01em; align-self:flex-start; text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:.42em; text-underline-offset:-.3em; text-decoration-skip-ink:none;}
h3{font-size:16.5px; margin:4px 0 0;}
p{margin:0; max-width:70ch;} .muted{color:var(--muted);} .small{font-size:13.5px;}
.card{background:var(--paper); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; min-width:0;}
.gbox{background:var(--soft); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;}
.grid4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;}
@media (max-width:960px){ .grid4{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:720px){ .grid2, .grid3, .grid4{grid-template-columns:1fr;} }
.pick a{display:flex; flex-direction:column; gap:8px; background:var(--paper); border-radius:18px; padding:22px; text-decoration:none; color:var(--ink); border:2px solid transparent; min-width:0;}
.pick a:hover{border-color:var(--brand);}
.pick .no{font-family:var(--f-disp); font-weight:800; width:32px; height:32px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center;}
.pick b{font-size:19px;} .pick span.d{font-size:14px; color:var(--muted); line-height:1.6;}
table{border-collapse:collapse; width:100%; font-size:14px;}
th, td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-size:12.5px; color:var(--muted); background:var(--soft); white-space:nowrap;}
tr:last-child td{border-bottom:none;}
.tbl{overflow-x:auto; background:var(--paper); border-radius:12px;}
.gbox .tbl{background:var(--paper);}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--f-disp);}
select, input[type=text], input[type=password], textarea{font:inherit; font-size:14.5px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); max-width:100%;}
label{font-weight:700; font-size:14px;}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:0;}
.tag{display:inline-block; font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--soft); color:var(--muted); margin-left:4px;}
.tag.on{background:var(--brand-soft); color:var(--ink);}
.bar{height:8px; border-radius:4px; background:var(--soft); overflow:hidden;} .bar i{display:block; height:100%; background:var(--brand);}
.kpi{display:flex; flex-direction:column; gap:2px;} .kpi b{font-family:var(--f-disp); font-size:26px; line-height:1.1;} .kpi span{font-size:13px; color:var(--muted);}
.note{border-radius:12px; padding:12px 14px; background:var(--brand-soft); font-size:14px;}
.note.warn{background:var(--warn-soft);} .note.good{background:var(--good-soft);}
ul.plain{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.answer{font-size:15px; line-height:1.75;} .answer h3, .answer h4{margin:12px 0 4px;} .answer ul{margin:4px 0; padding-left:20px;}
.spinner{display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .spinner{animation:none;} }
/* 단계 표시(새 데이터 넣기) */
.flow{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.flow .st{font-family:var(--f-body); font-weight:700; font-size:13.5px; padding:6px 12px; border-radius:999px; background:var(--soft); color:var(--muted);}
.flow .st.done{background:var(--brand-soft); color:var(--ink);} .flow .st.cur{background:var(--brand); color:var(--brand-ink);}
.flow i{font-style:normal; color:var(--muted);}
.choice{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
@media (max-width:720px){ .choice{grid-template-columns:repeat(2, minmax(0,1fr));} }
.choice label{display:flex; flex-direction:column; gap:4px; background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:12px; cursor:pointer; font-weight:400;}
.choice label b{font-size:15px;} .choice label span{font-size:13px; color:var(--muted); line-height:1.5;}
.choice input{position:absolute; opacity:0; pointer-events:none;}
.choice label:has(input:checked){border-color:var(--brand); background:var(--brand-soft);}
.choice label:has(input:focus-visible){outline:2px solid var(--link); outline-offset:2px;}
/* 문의 창 */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;}
.modal[hidden]{display:none;}
.modal .box{background:var(--paper); border-radius:18px; padding:22px; max-width:440px; width:100%; display:flex; flex-direction:column; gap:12px;}
.modal .mail{font-family:var(--f-disp); font-weight:700; font-size:17px; word-break:break-all;}
footer{color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:14px;}
.fab{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:40;}