/* 어느 사이트에나 필요한 규칙만 둔다. 색·모양·배치는 theme.css 에 쓴다 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;word-break:keep-all;overflow-wrap:anywhere}
img,svg{max-width:100%}
/* 주소는 하나이고 같은 HTML 을 나눠 보여 준다. 1024px 이상이 PC 화면이다 */
.pc-only{display:none!important}
@media(min-width:1024px){.pc-only{display:revert!important}.m-only{display:none!important}}
a[target="_blank"]::after{content:"↗";margin-left:.2em;font-weight:500}
/* 움직임을 줄이도록 설정한 사람에게는 움직이지 않는다 */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 동네지원금 · 확정 시안 D4 + 첫 화면 (2026-11-06) · 포레스트 색 · IBM Plex Sans KR
   결정 카드는 사이트_11 CLAUDE.md. 밝은 화면 하나로 간다(어두운 화면은 만들지 않음). */
:root{--bg:#f5f3ec;--ink:#1a1f1b;--sub:#5a5e57;--line:#e4e0d4;--card:#fff;--brand:#1f4a38;--brand2:#e7ece4;--brand3:#c8d6c8;--hot:#9e3a20;--tag:#efe3c2;color-scheme:light}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;line-height:1.55}
button,select,input{font:inherit;color:inherit}
a{color:inherit}
.in{max-width:1200px;margin:0 auto;padding-left:16px;padding-right:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 머리글·바닥글 */
.hd{background:var(--card);border-bottom:1px solid var(--line)}
.hd .in{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.03em;display:flex;gap:8px;align-items:center}
.logo svg{flex:0 0 auto;display:block}
.hd nav{display:flex;gap:18px;font-size:14px;color:var(--sub);margin-left:auto}
/* 공통 규칙 .pc-only{display:revert} 가 flex 를 덮어 메뉴가 붙어 보였다(2026-11-06) → PC 에서 다시 flex */
@media(min-width:1024px){.hd .in>nav.pc-only{display:flex!important}}
.hd nav a{text-decoration:none} .hd nav a:hover{color:var(--brand)}
/* 휴대폰 메뉴 줄: 로고 아래 옆으로 미는 한 줄 */
.mnav{border-top:1px solid var(--line)}
.mnav .in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.mnav .in::-webkit-scrollbar{display:none}
.mnav a{flex:0 0 auto;font-size:14px;text-decoration:none;color:var(--ink);background:var(--brand2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.ft{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;padding-bottom:40px;font-size:13px;color:var(--sub)}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}
.ft p{margin:4px 0}

/* 띠: 문장으로 고르기 */
.ask{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 10%,var(--brand3) 0 90px,transparent 91px),radial-gradient(circle at 4% 110%,#fff7 0 70px,transparent 71px),var(--brand2)}
.ask .in{display:grid;gap:0 24px;padding-top:14px;padding-bottom:14px}
@media(min-width:1024px){.ask .in{grid-template-columns:1fr 240px;align-items:center}}
.illo{display:none;width:240px;height:auto} @media(min-width:1024px){.illo{display:block;grid-row:1/8;grid-column:2}}
.crumb{font-size:13px;color:var(--sub);margin:0 0 6px} .crumb a{text-decoration:none} .crumb a:hover{color:var(--brand)}
.ask h1{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--sub)}
.ask h1 em{font-style:normal;color:var(--brand)}
.here{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand);background:#fff;color:var(--ink);border-radius:999px;padding:5px 6px 5px 12px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:8px}
.here span{background:var(--brand);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px}
.sentence{margin:0;font-size:clamp(23px,3.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.6}
.sentence u{text-decoration:none;color:var(--brand);border-bottom:3px solid var(--brand);padding:0 2px;white-space:nowrap}
.pick{display:grid;gap:6px;margin-top:8px}
.pick .row{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.pick .row::-webkit-scrollbar{display:none}
@media(min-width:1024px){.pick .row{flex-wrap:wrap}}
.pick b{flex:0 0 auto;font-size:13px;color:var(--sub);width:2.4em}
.pick button{flex:0 0 auto;border:1px solid var(--brand3);background:#fff;border-radius:999px;padding:7px 13px;font-size:15px;cursor:pointer;white-space:nowrap}
.pick button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.hit{margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:15px}
.hit b{font-size:30px;color:var(--brand);font-variant-numeric:tabular-nums}
.hit button{border:1px solid var(--brand);color:var(--brand);background:#fff;padding:5px 12px;border-radius:999px;font-size:13px;cursor:pointer}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--sub);padding-top:12px}
.facts b{color:var(--ink);font-variant-numeric:tabular-nums}

/* 분야 단추·도구 */
.chips{display:flex;gap:6px;overflow-x:auto;padding:12px 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
@media(min-width:1024px){.chips{flex-wrap:wrap;overflow:visible}}
.chips button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 13px;font-size:14px;cursor:pointer;white-space:nowrap}
.chips button em{font-style:normal;color:var(--sub);margin-left:4px;font-variant-numeric:tabular-nums}
.chips button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff} .chips button[aria-pressed=true] em{color:#fff}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:10px;padding-bottom:12px}
.tools input,.tools select{border:1px solid var(--line);background:var(--card);padding:9px 12px;border-radius:12px}
.tools input{flex:1;min-width:160px}
.tools small{color:var(--sub);margin-left:auto}

/* 지원금 카드 */
.list{display:grid;gap:10px;padding-bottom:20px}
@media(min-width:1024px){.list{grid-template-columns:1fr 1fr;align-items:start}}
.card{background:var(--card);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px var(--line);padding:14px 16px;cursor:pointer;display:grid;grid-template-columns:48px 1fr;gap:0 12px;scroll-margin-top:12px}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 1px var(--brand3)}
.card[hidden]{display:none}
.card .ic{grid-row:1/6;width:48px;height:48px;border-radius:14px;background:var(--fc,var(--brand2));display:grid;place-items:center;font-size:24px}
.card>*:not(.ic):not(.more){grid-column:2}
.card .t{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--sub)}
.o{font-weight:700;color:var(--brand)}
.card h3{margin:4px 0 2px;font-size:18px;line-height:1.4}
.card p{margin:0;font-size:15px;color:var(--sub)}
.won{margin-top:6px;font-size:17px;font-weight:700;color:var(--brand)}
.won small{font-size:12px;font-weight:400;color:var(--sub);margin-left:4px}
.tg{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.tg span{font-size:12.5px;background:var(--brand2);color:var(--ink);border-radius:999px;padding:1px 9px}
.tg span.only{background:var(--tag)}
.tg span.cash{background:var(--brand);color:#fff;font-weight:700}
.dd.soon{color:var(--hot);font-weight:700}
.open-hint{font-size:13px;color:var(--brand);margin-top:6px}
.card.open .open-hint{display:none}
.more{grid-column:1/-1;display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:15px;cursor:auto}
.card.open .more{display:block}
.more h4{margin:12px 0 4px;font-size:14px;color:var(--sub)} .more h4:first-child{margin-top:0}
.more .tx{white-space:pre-line;margin:0}
.more dl{display:grid;grid-template-columns:4.5em 1fr;gap:4px 8px;margin:10px 0 0}
.more dt{color:var(--sub)} .more dd{margin:0;overflow-wrap:anywhere}
.more .go{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.more .go a{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:9px 16px;border-radius:12px;font-weight:700}
.more .go a.sub{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.empty{grid-column:1/-1;background:var(--card);border-radius:16px;padding:24px;text-align:center;color:var(--sub)}

/* 동네 고르기 (첫 화면·동네 바꾸기 창) */
.findwrap{max-width:620px;display:flex;flex-direction:column;align-items:flex-end;margin-top:16px}
.find{position:relative;width:100%}
.find input{width:100%;font-size:19px;padding:15px 18px;border-radius:16px;border:2px solid var(--brand);background:#fff}
.sug{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.14);overflow:hidden;z-index:5}
.sug a{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;text-decoration:none;border-top:1px solid var(--line)}
.sug a:first-child{border-top:0} .sug a small{color:var(--sub)} .sug a>small{white-space:nowrap;color:var(--brand);font-weight:700}
.sug a:hover,.sug a:focus{background:var(--brand2)}
.loc{margin-top:10px;border:1px solid var(--brand3);background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.locmsg{font-size:14px;color:var(--sub);background:#fff;border-radius:12px;padding:10px 12px;margin:8px 0 0;max-width:620px}
.recent{margin:12px 0 0;font-size:15px;color:var(--sub)} .recent:empty{display:none}
.recent a{display:inline-block;margin-left:6px;font-weight:700;color:var(--brand);text-decoration:none;border:1px solid var(--brand3);border-radius:999px;padding:4px 12px;background:#fff}
.recent a small{font-weight:400;color:var(--sub)}
.sido{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:1024px){.sido{grid-template-columns:repeat(8,1fr)}}
.sido button{border:0;background:var(--card);box-shadow:0 0 0 1px var(--line);border-radius:14px;padding:12px 4px;font-size:17px;font-weight:700;cursor:pointer}
.sido button small{display:block;font-weight:400;font-size:12px;color:var(--sub)}
.sido button[aria-pressed=true]{background:var(--brand);color:#fff;box-shadow:none} .sido button[aria-pressed=true] small{color:#fff}
.sido .u,.sido .al{font-style:normal}
.gun{margin-top:12px;background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:16px}
.gun[hidden]{display:none}
.gun h3{margin:0 0 10px;font-size:18px} .gun h3 small{font-weight:400;color:var(--sub)}
.gun div{display:flex;flex-wrap:wrap;gap:8px}
.gun a,.near a{display:inline-flex;gap:6px;align-items:baseline;text-decoration:none;border:1px solid var(--brand3);border-radius:999px;padding:8px 14px;font-size:16px;background:var(--card)}
.gun a small,.near a small{color:var(--sub);font-size:13px}
.gun a.on{background:var(--brand2);border-color:var(--brand);font-weight:700}
.gun a:hover,.near a:hover{border-color:var(--brand)}
/* 휴대폰: 시·도는 작은 알약으로 16개가 다 보이게, 시·군·구는 시·도를 누르면 아래로 펼쳐진다 */
@media(max-width:1023px){
  .sido{display:flex;flex-wrap:wrap;gap:6px 5px}
  .sido button{flex:0 0 auto;display:flex;gap:4px;align-items:baseline;padding:8px 9px;border-radius:999px;font-size:15px}
  .sido button small{display:inline;font-size:12px}
  .sido .u,.sido .al{display:none}
}

/* 동네 바꾸기 창 */
dialog.pickdlg{border:0;border-radius:20px;padding:18px;width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px);background:var(--bg);color:var(--ink)}
dialog.pickdlg::backdrop{background:rgba(0,0,0,.35)}
@media(max-width:600px){dialog.pickdlg{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0}}
.dlg-head{display:flex;justify-content:space-between;align-items:center;font-size:19px}
.dlg-head button{border:0;background:none;font-size:24px;cursor:pointer;padding:4px 8px}
.pickdlg .findwrap{max-width:none;margin-top:10px} .pickdlg .sido{margin-top:14px}

/* 동네 페이지 아래 */
.nara{display:block;margin:0 0 24px;padding:16px 18px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-decoration:none;font-weight:700}
.nara small{display:block;font-weight:400;color:var(--sub);font-size:14px}
.near{padding-bottom:10px} .near h2{font-size:20px;margin:0 0 10px} .near div{display:flex;flex-wrap:wrap;gap:8px}
.near .all{display:inline-block;margin-top:12px;font-weight:700;color:var(--brand);text-decoration:none}
.sec{padding-top:26px}
.sec h2{font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
.sec>p{color:var(--sub);margin:-6px 0 12px}
.note{color:var(--sub);font-size:14px}

/* 첫 화면 */
.hero .in{padding-top:26px;padding-bottom:26px}
.hero h1{margin:0;font-size:clamp(28px,4.4vw,46px);line-height:1.3;letter-spacing:-.03em;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--brand)}
@supports (background-clip:text) or (-webkit-background-clip:text){
.hero h1 em{background:linear-gradient(110deg,var(--brand) 0 42%,color-mix(in srgb,var(--brand) 40%,#fff) 50%,var(--brand) 58% 100%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 3.6s ease-in-out .6s infinite}}
@keyframes shine{0%,62%{background-position:100% 0}100%{background-position:0 0}}
.hero p{margin:8px 0 0;color:var(--sub);font-size:16px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:1024px){.topics{grid-template-columns:repeat(6,1fr)}}
.topics a{display:block;text-decoration:none;background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:16px}
.topics a:hover{box-shadow:0 0 0 1px var(--brand)}
.topics i{font-style:normal;font-size:30px;display:block}
.topics b{display:block;font-size:17px;margin-top:6px;line-height:1.35}
.topics small{color:var(--sub);font-size:14px}
.topics em{font-style:normal;font-weight:700;color:var(--brand)}
.top{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:1024px){.top{grid-template-columns:1fr 1fr}}
.top li{background:var(--card);border-radius:14px;box-shadow:0 0 0 1px var(--line);display:grid;grid-template-columns:2em 1fr;gap:0 8px;padding:12px 16px}
.top li b{font-size:20px;color:var(--brand);grid-row:1/3}
.top li a{font-weight:700;text-decoration:none} .top li a:hover{color:var(--brand)} .top li small{color:var(--sub);font-size:14px}

/* 글 페이지(소개·약관) */
.doc{max-width:760px;margin:0 auto;padding:24px 16px}
.doc h1{font-size:28px;letter-spacing:-.02em;margin:0 0 12px}
.doc .box{background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:14px 18px;margin:12px 0}
.doc .box h2{font-size:18px;margin:0 0 6px}
.doc table{width:100%;border-collapse:collapse;font-size:15px} .doc td,.doc th{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}