/* 홈 (main/index.html) 전용 — 브랜드: 청록 #1d4ed8 · 금색 별 #f59e0b · 잉크 #0b1f4d */
:root{--hm-teal:#1d4ed8;--hm-gold:#f59e0b;--hm-ink:#0b1f4d;--hm-tint:rgba(29,78,216,.08)}
:root[data-theme="dark"]{--hm-teal:#60a5fa;--hm-ink:#e6edf3;--hm-tint:rgba(45,212,191,.10)}
.hm-search{margin:.6rem 0 0}
.hm-search .sbox-hero{max-width:820px;margin:0 auto;border-width:2px;border-color:var(--hm-teal)}
.hm-search .nt{max-width:820px;margin-left:auto;margin-right:auto}   /* 뉴스 티커 — 검색창과 같은 폭 (2026-10-11) */
.hm-search .sbox-hero .btn.primary{background:var(--hm-teal);border-color:var(--hm-teal);box-shadow:0 6px 16px rgba(29,78,216,.25)}
.hm-try{text-align:center;margin:.55rem 0 0}
.hm-try a{display:inline-block;margin:0 .2rem;padding:.08rem .55rem;border-radius:999px;background:var(--hm-tint);color:var(--hm-teal);font-weight:600}
.hm-try a:hover{text-decoration:none;background:rgba(29,78,216,.16)}
.hm-hero h1{color:var(--hm-ink)}
.hm-hero h1 em{color:var(--hm-teal)}
.hm-kicker{font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--hm-teal);margin:0 0 .6rem}
.hm-star{color:var(--hm-gold)}
.hm-hero .thb-points li::before{background-color:var(--hm-teal)}
.hm-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1.2rem;max-width:560px}
.hm-nums a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;color:var(--text)}
.hm-nums a:hover{border-color:var(--hm-teal);text-decoration:none}
.hm-nums b{display:block;font-size:1.5rem;font-weight:800;color:var(--hm-teal);font-variant-numeric:tabular-nums;line-height:1.1}
.hm-nums span{font-size:.78rem;color:var(--muted)}
.hm-finder .chips input:checked+label{border-color:var(--hm-teal);background:var(--hm-tint);color:var(--hm-teal)}
.hm-finder .chips input:focus-visible+label{outline-color:var(--hm-teal)}
.hm-finder .btn.primary{background:var(--hm-teal);border-color:var(--hm-teal);box-shadow:0 6px 16px rgba(29,78,216,.25)}
.hm-check{display:flex;gap:.5rem;align-items:flex-start;margin:1rem 0 0;font-size:.86rem;cursor:pointer}
.hm-check input{width:auto;margin-top:.2rem;accent-color:var(--hm-teal)}
.answer{border-left-color:var(--hm-teal)}
.hm-regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.hm-region{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;transition:border-color .15s}
.hm-region:hover{border-color:var(--hm-teal)}
.hm-region-h{display:block;color:var(--text)}
.hm-region-h:hover{text-decoration:none}
.hm-region-h h3{margin:0 0 .3rem;font-size:1.05rem}
.hm-region-h .low{font-size:1.45rem;font-weight:800;color:var(--hm-teal);font-variant-numeric:tabular-nums}
.hm-region-h .low small{font-size:.75rem;color:var(--muted);font-weight:500;margin-left:.3rem}
.hm-states{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.hm-states a{font-size:.75rem;font-weight:700;padding:.1rem .45rem;border-radius:6px;background:var(--soft);color:var(--text)}
.hm-states a small{font-weight:400;color:var(--muted)}
.hm-states a:hover{background:var(--hm-tint);color:var(--hm-teal);text-decoration:none}
.hm-facets .chip{font-size:.82rem;padding:.25rem .65rem}
.hm-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.hm-trust .card h3{margin:.2rem 0 .4rem;font-size:1.02rem}
.hm-trust .card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.hm-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--hm-ink);color:var(--hm-gold);font-weight:800}
:root[data-theme="dark"] .hm-ic{background:#13323a}
.how-steps .card .n{background:var(--hm-teal)}
@media(max-width:560px){.hm-nums b{font-size:1.2rem}.hm-try a{margin:.15rem}}

/* 누가 쓰나 — 역할 5개 (main/index.html, /roles 로) */
.hm-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:.6rem}
.hm-roles .card{display:flex;gap:.65rem;align-items:center;margin:0;padding:.75rem .9rem;color:var(--text);text-decoration:none;min-height:44px;min-width:0}
.hm-roles .card:hover{border-color:var(--brand)}
.hm-roles-ic{color:var(--brand);flex:none;display:inline-flex}
.hm-roles-t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hm-roles-t b{font-weight:650;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.hm-roles-b{font-size:.75rem;font-weight:600;color:#7a4a00}
.hm-roles-b.now{color:#0f6b3a}
:root[data-theme="dark"] .hm-roles-b{color:#f1cf8f}
:root[data-theme="dark"] .hm-roles-b.now{color:#9fe0b8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hm-roles-b{color:#f1cf8f}:root:not([data-theme="light"]) .hm-roles-b.now{color:#9fe0b8}}
/* "Who is JOBnaru™ for?" — 검색 바로 아래, 눈에 띄게 (2026-10-11) */
.hm-roles-h h2 a{color:inherit}.hm-roles-h h2 a:hover{color:var(--accent);text-decoration:none}
.hm-roles-h .btn{white-space:nowrap;flex:0 0 auto}
/* 첫 화면에 아래 광고가 조금 보이게 — 가운데 여백을 줄인다 (2026-10-15 운영자) */
.hm-hero{padding:.5rem 0 .6rem;gap:1.6rem}
.hm-hero .hm-kicker{margin-bottom:.35rem}
.hm-hero h1{margin-bottom:.5rem}
.hm-hero .lede{margin-bottom:.65rem;line-height:1.55}
.hm-hero .thb-points{gap:.28rem}
.hm-hero .hm-nums{margin-top:.8rem}
.hm-try{margin:.4rem 0 .35rem}      /* 칩과 아래 카드 사이 5px 정도 (2026-10-15 운영자) */
.hm-finder{padding-top:1rem;padding-bottom:1rem}
.hm-finder label.lb{margin:.6rem 0 .3rem}
.hm-finder .go{margin-top:.8rem;padding:.7rem 1rem}
.hm-finder .fine{margin-top:.45rem}

/* 샘플 질문 칩 — 늘 한 줄 (넘치면 뒤에서부터 숨김, index.html 스크립트) (2026-10-15 운영자) */
.hm-try{display:flex;flex-wrap:nowrap;justify-content:center;gap:.35rem;overflow:hidden;white-space:nowrap}
.hm-try a{flex:none;margin:0}