/* 레이아웃: 상단 고정 헤더(탭) -> 본문 한 열(최대 520px) -> 하단 고정 위기 버튼 */
:root{
  --bg:#eef1ee; --surface:#fbfcfa; --fg:#1f2a28; --muted:#5d6b68; --line:#cfd8d4;
  --accent:#2f6f66; --accent-fg:#ffffff; --sel:#dcebe6; --warn:#a4372b; --warn-bg:#f8e6e2; --ok:#2f6f66;
  --display:"Gowun Batang","Noto Serif KR","Batang",serif; --body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#141a19; --surface:#1c2423; --fg:#e4ece9; --muted:#9fb0ab; --line:#33403d;
  --accent:#6fb5a8; --accent-fg:#0f1514; --sel:#26413b; --warn:#f0a99f; --warn-bg:#3a2320; --ok:#6fb5a8; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.top{position:sticky;top:0;z-index:4;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
.brand{font-family:var(--display);font-size:20px}
nav{display:flex;gap:2px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;color:var(--muted);text-decoration:none;font-weight:500}
nav a[aria-current="page"]{background:var(--sel);color:var(--fg);font-weight:700}
main{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:22px;outline:none;
  padding:20px max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}
.loading{color:var(--muted);text-align:center}
h1{font-family:var(--display);font-size:28px;line-height:1.3;margin:0;text-wrap:balance}
h2{font-size:18px;margin:0}
h3{font-size:15px;margin:0}
p{margin:0}
.sub{margin-top:4px;color:var(--muted);font-size:15px}
.small{font-size:13px;color:var(--muted)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;font-size:17px;padding:0;margin-bottom:10px}
legend small{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.chips label,.seg label{position:relative}
.chips input,.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.chips span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:60px;padding:10px 8px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;font-weight:500}
.chips input:checked+span{background:var(--sel);border-color:var(--accent);font-weight:700}
.chips input:focus-visible+span,.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:4px;gap:4px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-weight:500}
.seg input:checked+span{background:var(--accent);color:var(--accent-fg);font-weight:700}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:16px}
.hint{font-size:14px;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:8px 12px}
.notice{font-size:14px;background:var(--sel);border-radius:10px;padding:8px 12px}
.result{background:var(--surface);border:1.5px solid var(--accent);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.result .kicker{font-size:13px;color:var(--accent);font-weight:700}
.action{font-family:var(--display);font-size:26px;line-height:1.35;margin:0;text-wrap:balance}
.why{color:var(--muted);font-size:14px}
.caution{font-size:13px;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:8px 12px}
.applied{display:flex;flex-wrap:wrap;gap:6px}
.applied span,.tag{font-size:12px;background:var(--sel);border-radius:99px;padding:2px 10px}
.res{display:flex;flex-direction:column;gap:8px}
.res-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.res-item b{font-size:12px;border:1px solid var(--accent);color:var(--accent);border-radius:99px;padding:1px 8px;font-weight:500;align-self:flex-start}
.res-item a{color:var(--accent);font-weight:700;word-break:break-all}
.num{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.timer{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap}
.alts{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.alts button{text-align:left;font-size:15px;min-height:48px;padding:8px 14px;display:flex;gap:8px;align-items:baseline}
.alts i{font-style:normal;font-size:12px;color:var(--accent);font-weight:700;flex:none}
button,.btn{font:inherit;min-height:52px;border-radius:14px;padding:0 18px;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700;flex:1 1 160px}
button.danger{border-color:var(--warn);color:var(--warn)}
button.more{width:100%;border-style:dashed;color:var(--accent);font-weight:500}
button.small-btn{min-height:44px;padding:0 14px;font-size:14px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.empty{color:var(--muted);text-align:center;padding:26px 12px;border:1.5px dashed var(--line);border-radius:18px}
.link-banner{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:3;margin:0 auto;max-width:520px;background:var(--sel);border:1px solid var(--accent);
  border-radius:12px;padding:8px 14px;font-size:14px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.link-banner[hidden]{display:none}
.crisis-bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--line);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.crisis-bar button{display:flex;width:100%;max-width:520px;margin:0 auto;border-color:var(--warn);color:var(--warn);background:var(--warn-bg);font-weight:700}
#overlay{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
#overlay[hidden]{display:none}
.sheet{background:var(--bg);width:100%;max-width:520px;max-height:92%;overflow:auto;border-radius:22px 22px 0 0;
  padding:22px max(16px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.sheet.crisis{background:var(--warn-bg);border-top:3px solid var(--warn)}
.contact{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.contact a.btn{background:var(--warn);color:var(--bg);border-color:var(--warn);font-weight:700;min-height:48px}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.field>span.l{font-weight:500;font-size:15px}
input[type=text],input[type=number],input[type=url],select,textarea{font:inherit;min-height:48px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);width:100%}
textarea{min-height:88px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.checks input,.toggle input{width:22px;height:22px;accent-color:var(--accent)}
.toggle{display:flex;align-items:flex-start;gap:12px;min-height:48px}
.toggle div{display:flex;flex-direction:column}
.err{color:var(--warn);font-size:14px}
.list{display:flex;flex-direction:column;gap:10px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.item .meta{display:flex;flex-wrap:wrap;gap:6px}
.item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.scroll{overflow-x:auto}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }