/* 복지 계산기 — 노인·취약계층 우선. 큰 글씨, 높은 대비, 큰 터치영역. */
:root{
  --ink:#14202e; --ink-soft:#3f5164; --line:#d7e0ea; --line-soft:#eef2f7;
  --bg:#ffffff; --bg-soft:#f4f8fc; --brand:#1666d4; --brand-dark:#0f4ea8;
  --good:#0a7d4d; --good-bg:#e7f6ee; --warn:#8a5a00;
  --card:#ffffff; --shadow:0 1px 3px rgba(20,40,70,.08),0 6px 20px rgba(20,40,70,.06);
  --r:16px; --fs:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-soft); color:var(--ink);
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:var(--fs); line-height:1.65; word-break:keep-all;
}
.wrap{max-width:680px; margin:0 auto; padding:20px 18px 80px}
header.top{text-align:center; padding:14px 0 6px}
header.top h1{font-size:29px; font-weight:800; margin:6px 0 4px; letter-spacing:-.01em}
header.top p{font-size:18px; color:var(--ink-soft); margin:0}
.badge{display:inline-block; background:#e9f1fc; color:var(--brand-dark);
  font-size:15px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:6px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px 20px; margin:16px 0}
.q{margin:26px 0 10px}
.q .lbl{font-size:22px; font-weight:800; margin-bottom:14px; display:block}
.q .hint{font-size:16px; color:var(--ink-soft); font-weight:500; margin-left:6px}

/* 큰 선택 버튼 */
.opts{display:flex; flex-wrap:wrap; gap:10px}
.opt{
  flex:1 1 auto; min-width:88px; text-align:center; cursor:pointer;
  background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:16px 14px; font-size:19px; font-weight:700; color:var(--ink);
  transition:.12s; user-select:none;
}
.opt:active{transform:scale(.98)}
.opt.on{border-color:var(--brand); background:#eaf2fd; color:var(--brand-dark)}
.opts.multi .opt.on::after{content:' ✓'}

input[type=number],select{
  width:100%; font-size:21px; padding:16px 16px; border:2px solid var(--line);
  border-radius:14px; background:#fff; color:var(--ink); font-weight:700;
  font-family:inherit; -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%233f5164' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:46px}
.sub{font-size:16px; color:var(--ink-soft); margin:8px 2px 0}

.cta{
  position:sticky; bottom:14px; width:100%; margin-top:28px; border:0; cursor:pointer;
  background:var(--brand); color:#fff; font-size:23px; font-weight:800;
  padding:20px; border-radius:16px; font-family:inherit;
  box-shadow:0 8px 24px rgba(22,102,212,.35);
}
.cta:active{background:var(--brand-dark)}
.cta[disabled]{background:#9db6d6; box-shadow:none}

/* 결과 */
.result-head{text-align:center; margin:8px 0 4px}
.result-head .big{font-size:34px; font-weight:800; color:var(--brand-dark)}
.result-head .big b{color:var(--good)}
.you{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; font-size:16px; color:var(--ink-soft); text-align:center; margin:10px 0 6px}
.grp-title{font-size:19px; font-weight:800; margin:26px 4px 6px; color:var(--ink)}
.svc{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px 18px; margin:12px 0; box-shadow:var(--shadow)}
.svc h3{font-size:21px; font-weight:800; margin:0 0 6px}
.svc .dept{font-size:15px; color:var(--ink-soft); font-weight:600}
.svc .sm{font-size:17px; color:var(--ink-soft); margin:10px 0 0; line-height:1.6}
.svc .why{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0}
.svc .why span{background:var(--good-bg); color:var(--good); font-size:14px;
  font-weight:700; padding:5px 11px; border-radius:999px}
.svc a.go{display:block; text-align:center; margin-top:14px; text-decoration:none;
  background:#eaf2fd; color:var(--brand-dark); font-weight:800; font-size:18px;
  padding:14px; border-radius:12px}
.svc a.go:active{background:#d7e7fb}
.more{display:block; width:100%; text-align:center; background:#fff; border:2px solid var(--line);
  border-radius:14px; padding:16px; font-size:18px; font-weight:700; color:var(--brand-dark);
  cursor:pointer; margin:14px 0}
.restart{display:block; text-align:center; margin:30px auto 0; color:var(--ink-soft);
  font-size:17px; background:none; border:0; text-decoration:underline; cursor:pointer}

.note{font-size:15px; color:var(--ink-soft); line-height:1.6; margin-top:22px;
  padding:16px; background:#fff; border:1px solid var(--line-soft); border-radius:12px}
.hidden{display:none}
.loading{text-align:center; padding:40px; font-size:19px; color:var(--ink-soft)}
footer{text-align:center; font-size:14px; color:#8598ab; margin-top:40px; line-height:1.7}
footer a{color:#8598ab}
@media(max-width:400px){:root{--fs:19px} header.top h1{font-size:26px}}