/* css/tokens.css */
/* 색·그림자·글꼴 토큰. 색은 여기서만 정하고, 나머지 파일은 var(--…) 로만 쓴다 */
:root {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #e3e3e8;
  --brand: #0071e3;
  --brand-soft: #e8f1fc;
  --hot: #d9480f;
  --hot-soft: #fff1e8;
  --warn: #a35a00;
  --warn-soft: #fff5df;
  --ok: #1a7f37;
  --ok-soft: #e7f6eb;
  --fill: rgba(118, 118, 128, .12);
  --glass: rgba(245, 245, 247, .78);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --shadow-hi: 0 2px 4px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .09);
  --on-brand: #ffffff;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --panel: #1c1c1e; --ink: #f5f5f7; --muted: #a1a1a6; --line: #38383a;
    --brand: #2997ff; --brand-soft: #0f2a47; --hot: #ff8a4c; --hot-soft: #3a1e10;
    --warn: #ffc65c; --warn-soft: #3a2c0e; --ok: #4ed46a; --ok-soft: #10301a;
    --fill: rgba(118, 118, 128, .24); --glass: rgba(0, 0, 0, .72); --shadow: 0 0 0 1px rgba(255, 255, 255, .06); --shadow-hi: 0 0 0 1px rgba(255, 255, 255, .12);
    --on-brand: #ffffff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --panel: #1c1c1e; --ink: #f5f5f7; --muted: #a1a1a6; --line: #38383a;
  --brand: #2997ff; --brand-soft: #0f2a47; --hot: #ff8a4c; --hot-soft: #3a1e10;
  --warn: #ffc65c; --warn-soft: #3a2c0e; --ok: #4ed46a; --ok-soft: #10301a;
  --fill: rgba(118, 118, 128, .24); --glass: rgba(0, 0, 0, .72); --shadow: 0 0 0 1px rgba(255, 255, 255, .06); --shadow-hi: 0 0 0 1px rgba(255, 255, 255, .12);
  --on-brand: #ffffff; color-scheme: dark;
}

/* css/base.css */
/* 기본: 상자 크기, 본문 글꼴, 본문 폭(.wrap), 입력칸, 초점 표시 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
/* 휴대폰 상태 표시줄 뒤 띠 — 머리띠와 같은 어두운 색 */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: #05070d; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.view { min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
select, input[type=search], input[type=text], input[type=number], input[type=date], textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; min-width: 0; color: var(--ink); transition: box-shadow .15s, border-color .15s; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
/* 한 부분이 고장 났을 때 그 자리에 띄우는 안내 */
.broken { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }

/* css/components.css */
/* 여러 화면이 함께 쓰는 부품: 버튼, 칩, 태그, 제목, 안내, 빈 상자 */
.btn { cursor: pointer; border: 0; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; background: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .btn:hover { filter: brightness(1.08); } }
.btn.ghost { background: var(--fill); color: var(--brand); }
.lnk { all: unset; cursor: pointer; font-size: 13px; color: var(--brand); font-weight: 500; }
.switch { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--brand); }
.msg { font-size: 13px; color: var(--muted); }
.msg.err { color: var(--hot); }

.chips { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; padding-bottom: 2px; padding-right: 30px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; cursor: pointer; white-space: nowrap; border: 0; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500; background: var(--fill); color: var(--ink); }
.chip small { margin-left: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .chip:hover { background: var(--brand-soft); } }
.chip[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .8; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; grid-column: 1; }
.tag { padding: 2px 8px; border-radius: 6px; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.tag.f { background: var(--fill); color: var(--muted); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.chk { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--hot-soft); color: var(--hot); }
.tag.rep { background: var(--ink); color: var(--bg); }
.tag.ad { background: var(--warn-soft); color: var(--warn); }
.adzone { display: grid; gap: 10px; margin-bottom: 8px; padding: 4px 0 14px; border-bottom: 1px dashed var(--line); }
.adzone .sec { margin-top: 6px; }
.why { grid-column: 1 / -1; font-size: 13px; color: var(--brand); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.why span::before { content: "✓ "; }

.sec { margin: 26px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.025em; }
.sec small { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin-left: 6px; }
.notice { margin-bottom: 14px; padding: 0 2px; font-size: 14px; color: var(--muted); }
.empty { display: grid; gap: 12px; justify-items: center; padding: 32px 16px; text-align: center; color: var(--muted); background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }

/* css/hero.css */
/* 머리띠: 어두운 바탕 + 돌아가는 레이더 + 요약 숫자(KPI). 밝은/어두운 모드 모두 같은 모습 */
header.top { position: relative; overflow: hidden; color: #f5f5f7; background: radial-gradient(120% 140% at 85% 0%, #0b2a52 0%, #05070d 55%, #000 100%); }
header.top .wrap { position: relative; z-index: 1; padding-block: 48px 36px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.org { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(245, 245, 247, .62); }
.beta { font-size: 11px; font-weight: 600; color: #ffd27a; background: rgba(255, 210, 122, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .35); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; }
header.top h1 { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 7vw, 68px); line-height: 1.05; letter-spacing: -0.03em; color: #ffffff; text-wrap: balance; }
.slogan { margin: 2px 0 10px; font-family: var(--font-body); font-size: clamp(19px, 3vw, 26px); font-weight: 700; letter-spacing: -0.01em; color: #7cb8ff; background: linear-gradient(90deg, #4da3ff, #a78bfa 55%, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.meta { font-size: 13px; color: rgba(245, 245, 247, .55); }
.join { display: inline-flex; padding: 10px 20px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; font-size: 14px; }

.kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi { all: unset; cursor: pointer; border-radius: 18px; padding: 12px 18px; min-width: 112px; color: #f5f5f7; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (hover: hover) { .kpi:hover { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transform: translateY(-1px); } }
.kpi b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #ffffff; }
.kpi span { font-size: 12px; color: rgba(245, 245, 247, .62); }
.kpi.good b { color: #4da3ff; }
.kpi.hot b { color: #ff8a4c; }

.radar { position: absolute; width: 660px; aspect-ratio: 1; right: -150px; top: 50%; transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at center, transparent 0 65px, rgba(77, 163, 255, .22) 66px 67px),
    linear-gradient(transparent calc(50% - .5px), rgba(77, 163, 255, .2) 50%, transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(77, 163, 255, .2) 50%, transparent calc(50% + .5px));
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(77, 163, 255, .42), rgba(77, 163, 255, 0) 75deg, transparent); animation: sweep 7s linear infinite; }
.radar b { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 50%; background: #7cc0ff; box-shadow: 0 0 14px 4px rgba(77, 163, 255, .7); opacity: 0; animation: blip 7s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0% { opacity: 0; } 5% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } }

/* css/layout.css */
/* 화면 뼈대: 회사 요약 띠 → 탭 → 고정 필터띠 → (왼쪽 지역 막대 + 목록) → 바닥글 */
.taxwarn { color: var(--hot); font-size: 14px; }
.taxwarn .wrap { padding-block: 12px; margin-bottom: 10px; background: var(--hot-soft); border-radius: 18px; }
.cobar { margin-top: 18px; }
.cobar .wrap { padding-block: 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.cobar b { color: var(--ink); }
.cobar .sum { flex: 1 1 300px; min-width: 0; }

nav.tabs .wrap { padding-block: 22px 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
nav.tabs .wrap::-webkit-scrollbar { display: none; }
nav.tabs .wrap::after { content: ""; flex: 0 0 max(16px, env(safe-area-inset-right, 0px)); }
/* 큰 메뉴: 넓은 화면에선 알약 모양 글자 메뉴(아이콘 숨김), 휴대폰에선 아래 고정 막대(responsive.css) */
.tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--muted); white-space: nowrap; }
.tab svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .tab:hover { color: var(--ink); } }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
/* 작은 메뉴 (공고: 맞춤·진행·창업·예상·관심 / 자금·제도: 금융·상시 / 협회: 소개·게시판·회원 관리) */
nav.tabs .subnav { padding-block: 0 12px; }
nav.tabs .subnav .chip { font-size: 14px; padding: 7px 14px; }

.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.bar .wrap { padding-block: 10px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.row > * { min-width: 0; max-width: 100%; }
#q { flex: 1 1 240px; }
#ministry { flex: 0 1 220px; }
#sort { flex: 0 1 150px; }
.lbl { flex: none; width: 34px; font-size: 12px; font-weight: 600; color: var(--muted); }

main .wrap { padding-block: 22px 56px; display: grid; gap: 24px; grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
main.solo .wrap { grid-template-columns: minmax(0, 1fr); }
main.solo aside { display: none; }
aside { position: sticky; top: 200px; padding: 16px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
aside h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rg { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 14px; }
.rg button { all: unset; cursor: pointer; display: contents; }
.rg span { padding: 2px 6px; border-radius: 6px; }
.rg .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.rg button[aria-pressed="true"] span { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.rg .barline { grid-column: 1 / -1; height: 3px; background: var(--fill); border-radius: 2px; margin: 0 6px 5px; }
.rg .barline i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }

.count { margin-bottom: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.list { display: grid; gap: 14px; }
.moreBtn { display: block; margin: 16px auto 0; padding: 11px 26px; border: 0; border-radius: 999px; background: var(--fill); color: var(--brand); font-weight: 600; cursor: pointer; }

footer { color: var(--muted); font-size: 12px; }
footer .wrap { padding-block: 8px 40px; display: grid; gap: 4px; line-height: 1.6; }

/* css/cards.css */
/* 공고 카드: 태그 → 제목 → 기관 → 추천 이유 → 조건 표(facts) → 자세히 보기·관심 공고. 오른쪽 위 D-day */
.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 18px 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
@media (hover: hover) { .card:hover { box-shadow: var(--shadow-hi); transform: translateY(-1px); } }
.card.no { opacity: .55; }
.card h3 { grid-column: 1; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.015em; }
.card h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .card h3 a:hover { color: var(--brand); text-decoration: underline; } }
.who { grid-column: 1; font-size: 13px; color: var(--muted); }
.rechk { color: var(--ok); font-weight: 600; }

.facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.facts div { display: flex; gap: 5px; align-items: baseline; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.facts .none { color: var(--muted); font-weight: 400; }

.dday { grid-row: 1 / span 3; grid-column: 2; display: grid; align-content: start; gap: 2px; min-width: 78px; text-align: right; }
.dday b { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dday span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dday.hot b { color: var(--hot); }
.dday.warn b { color: var(--warn); }
.dday.open b { color: var(--muted); font-size: 15px; font-family: var(--font-body); font-weight: 500; }
.dday.exp b { color: var(--brand); font-size: 19px; }

.acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.star { all: unset; cursor: pointer; font-size: 13px; color: var(--muted); }
.star[aria-pressed="true"] { color: var(--warn); font-weight: 700; }
.acts .row { gap: 14px; }
.sharebox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.sharebox .btn { font-size: 13px; padding: 7px 14px; text-decoration: none; }
#focusBox:not(:empty) { margin-bottom: 18px; }
.more-info { grid-column: 1 / -1; display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 14px; }
.more-info p { margin: 0; }
.more-info b { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }

/* css/forms.css */
/* 회원 가입 화면: 소개 띠(join-hero) → 1단계 회사 정보 폼 → 2단계 가입 신청 */
.join-hero { color: #f5f5f7; background: radial-gradient(120% 160% at 90% 0%, #0b2a52 0%, #05070d 60%, #000 100%); border-radius: 24px; padding: 28px 28px 24px; display: grid; gap: 10px; }
.join-hero h2 { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.03em; }
.join-hero p { margin: 0; color: rgba(245, 245, 247, .75); max-width: 60ch; }
.join-hero b { color: #ffffff; }
.steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.steps li { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 7px 14px 7px 8px; font-weight: 600; font-size: 14px; }
.steps li small { color: rgba(245, 245, 247, .6); font-weight: 400; }
.steps span, .step-h span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; flex: none; }
.step-h { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 12px; }
#memberView .step-h { margin-top: 4px; }

.form { display: grid; gap: 14px; }
fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
legend { padding: 2px 10px; border-radius: 10px; background: var(--panel); font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
legend small { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-left: 6px; }
.fld { display: grid; gap: 4px; font-size: 13px; color: var(--muted); align-content: start; min-width: 0; }
.fld.wide { grid-column: 1 / -1; }
.fld .req { color: var(--hot); }
.fld .hint { font-size: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; gap: 6px; align-items: center; padding: 6px 13px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 13px; cursor: pointer; }
.checks label:has(input:checked) { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.checks input { accent-color: var(--brand); }
.radios label:has(input[value="yes"]:checked) { background: var(--hot-soft); color: var(--hot); }
.meter { display: grid; gap: 8px; padding: 16px 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.meter .track { height: 6px; background: var(--fill); border-radius: 4px; overflow: hidden; }
.meter .track i { display: block; height: 100%; background: var(--brand); }
.meter .miss { font-size: 13px; color: var(--muted); }
.prep { font-size: 14px; display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.prep li span { color: var(--muted); font-size: 13px; }
.formacts { display: flex; gap: 8px; flex-wrap: wrap; }
.privacy { font-size: 12px; color: var(--muted); }

.mstatus:empty { display: none; }
.mstatus { margin-bottom: 12px; padding: 12px 14px; border-radius: 18px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.mstatus.static { background: var(--panel); color: var(--ink); font-weight: 500; box-shadow: var(--shadow); }
/* 협회 탭: 카페 게시판 바로가기 카드, 오픈채팅 버튼 */
a.alink { color: inherit; text-decoration: none; cursor: pointer; }
@media (hover: hover) { a.alink:hover { box-shadow: var(--shadow-hi); } a.alink:hover h3 { color: var(--brand); } }
.btn.kakao { background: #fee500; color: #191919; }
/* 요금제 카드 */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 12px; }
.plan { display: grid; gap: 8px; align-content: start; padding: 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.plan.best { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.plan .tag { justify-self: start; }
.plan h3 { margin: 4px 0 0; font-size: 20px; letter-spacing: -0.02em; }
.plan .price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.plan .who { font-size: 13px; color: var(--muted); }
.plan ul { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.plan .btn { justify-self: start; }
/* 정책 설문 결과 막대 */
.svres { display: grid; gap: 14px; }
.svq { display: grid; gap: 8px; padding: 18px 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.svq h3 { margin: 0 0 4px; font-size: 16px; }
.sbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 14px; }
.sbar b { font-variant-numeric: tabular-nums; }
.sbar .track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.sbar .track i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
/* 공고 오류 신고 칸 */
.reportbox { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); font-size: 14px; }
/* 홈의 3문항 빠른 시작 */
.qs { display: grid; gap: 16px; padding: 22px 24px; margin-bottom: 8px; background: var(--panel); border-radius: 18px; box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.qs h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.qs-q { display: grid; gap: 8px; }
.qs-q small { color: var(--muted); font-weight: 400; }
.wrapchips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* 로봇 걸러내기용 숨은 칸 */
.agree span:first-child { color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }

/* css/finance.css */
/* 금융지원 탭: 직접대출·보증서 대출 설명(paths) + 상시 금융 상품 카드(prods) */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.path { display: grid; gap: 6px; padding: 18px 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.path h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.path .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.path .flow span { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 4px 11px; }
.path .flow i { font-style: normal; color: var(--muted); }
.path p { margin: 0; font-size: 13px; color: var(--muted); }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.prod { display: grid; gap: 6px; align-content: start; padding: 16px 18px; font-size: 13px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.prod.best { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.prod.off { opacity: .5; }
.prod h4 { margin: 0; font-size: 15px; line-height: 1.4; }
.prod .lim { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.prod dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
.prod dt { color: var(--muted); font-size: 12px; }
.prod dd { margin: 0; }
.prod .src { font-size: 12px; color: var(--muted); }
.prod a { color: var(--brand); font-weight: 500; }

/* css/board.css */
/* 게시판(글·댓글·글쓰기) + 회원 관리 표 */
.post-form { display: grid; gap: 10px; margin-bottom: 12px; padding: 14px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.post-form textarea { width: 100%; resize: vertical; }
.post { display: grid; gap: 6px; padding: 16px 20px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.post.pin { box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow); }
.post h3 { margin: 0; font-size: 16px; }
.post h3 button { all: unset; cursor: pointer; }
@media (hover: hover) { .post h3 button:hover { color: var(--brand); text-decoration: underline; } }
.post .by { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post .by img { width: 18px; height: 18px; border-radius: 50%; }
.post .body { white-space: pre-wrap; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 8px; overflow-wrap: anywhere; }
.cmts { display: grid; gap: 6px; font-size: 13px; background: var(--bg); border-radius: 14px; padding: 8px 10px; }
.cmt { display: grid; gap: 2px; }
.cmt .by { font-size: 12px; }
.cmt p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cform { display: flex; gap: 6px; }
.cform input { flex: 1 1 0; }

.tw { overflow-x: auto; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.mtable { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.mtable th, .mtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.mtable th { color: var(--muted); font-weight: 500; }

/* css/expo.css */
/* 박람회 탭: 왼쪽 날짜 칸 + 오른쪽 내용의 일정 카드 / 상시 지원 탭: 혜택 한 줄 강조 */
.elist { display: grid; gap: 10px; }
.ecard { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 18px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); }
.ecard.mine { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.edate { display: grid; gap: 2px; text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--fill); }
.edate b { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.edate span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.edate span.now { color: var(--ok); font-weight: 700; }
.ebody { display: grid; gap: 6px; min-width: 0; }
.ebody h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.ebody h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .ebody h3 a:hover { color: var(--brand); text-decoration: underline; } }
.ebody .tags, .ebody .why { grid-column: auto; }
.prod .ben { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); }
@media (max-width: 640px) {
  .ecard { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .edate b { font-size: 18px; }
}

/* css/tour.css */
/* 처음 온 사람 둘러보기: 화면을 어둡게 하고 설명할 곳만 밝게 비춘 뒤, 말풍선으로 설명 */
#tour { position: fixed; inset: 0; z-index: 100; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); pointer-events: none;
  transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.tour-hole::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 2px solid #4da3ff; animation: tourPulse 1.6s ease-out infinite; }
.tour-tip { position: fixed; padding: 18px 20px 16px; border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transition: top .35s, left .35s; }
.tour-tip.in { animation: tourIn .35s cubic-bezier(.2, .8, .2, 1); }
.tour-tip h3 { margin: 2px 0 6px; font-size: 18px; letter-spacing: -0.02em; }
.tour-tip p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tour-step { font-size: 12px; font-weight: 700; color: var(--brand); }
.tour-dots { display: flex; gap: 5px; margin: 12px 0 2px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--fill); transition: width .25s, background .25s; }
.tour-dots i.on { width: 18px; background: var(--brand); }
.tour-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tour-acts .lnk { margin-right: auto; color: var(--muted); }
@keyframes tourPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes tourIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-tip { transition: none; } .tour-hole::after, .tour-tip.in { animation: none; } }

/* css/responsive.css */
/* 화면 폭별 조정 — 항상 마지막에 읽는다 */
@media (max-width: 820px) {
  main .wrap { grid-template-columns: minmax(0, 1fr); }
  aside { display: none; }
}
/* 휴대폰: 머리 부분을 줄이고 공고가 첫 화면에 보이게 */
@media (max-width: 640px) {
  header.top .wrap { padding-block: 26px 18px; gap: 12px; }
  header.top h1 { font-size: 38px; }
  .meta { font-size: 12px; }
  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .kpi { min-width: 0; padding: 9px 4px; border-radius: 14px; text-align: center; }
  .kpi b { font-size: 19px; }
  .kpi span { font-size: 11px; display: block; line-height: 1.25; }
  .radar { width: 420px; right: -170px; top: -60px; transform: none; opacity: .7; }
  .cobar { margin-top: 0; }
  .cobar .wrap { padding-block: 12px; font-size: 13px; border-radius: 0; box-shadow: none; }
  .cobar .btn { padding: 7px 14px; font-size: 13px; }
  /* 큰 메뉴 → 화면 아래 고정 막대 (아이콘 + 글자) */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  nav.tabs .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; overflow: visible;
    padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); }
  nav.tabs .mainnav::after { display: none; }
  .tab { flex-direction: column; gap: 2px; padding: 4px 0; border-radius: 12px; font-size: 11px; font-weight: 600; justify-content: center; }
  .tab svg { display: block; }
  .tab[aria-selected="true"] { background: transparent; color: var(--brand); }
  nav.tabs .subnav { padding-block: 12px 4px; }
  .bar { position: static; }
  .bar .wrap { gap: 6px; }
  #q { flex: 1 1 100%; }
  #ministry, #sort { flex: 1 1 0; }
  .lbl { display: none; }
  main .wrap { padding-block: 14px 40px; }
  .card { padding: 14px 16px; }
  .card h3 { font-size: 16px; }
  .dday { min-width: 60px; }
  .dday b { font-size: 19px; }
  .sec { font-size: 22px; }
  .paths, .prods { grid-template-columns: minmax(0, 1fr); }
  .join-hero { padding: 22px 20px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .card:hover, .kpi:hover { transform: none; }
  .radar .sweep, .radar b { animation: none; }
  .radar b { opacity: .6; }
}