/*
 * neis.me 메인 허브 전용 스타일 (hub2, 2026-08-19 개편 → 2026-09-11 디자인 리뷰 반영)
 *
 * 인라인 <style> 을 별도 파일로 분리 (home.md §7). tokens.css 만 의존.
 * 분류 카드 + 글자 링크 문법 — /v1/index.php(링크사이트) 와 동일.
 */

.hub2-main { width: min(1180px, 100%); margin-inline: auto; padding: var(--space-5) var(--space-4) var(--space-10); }

/* 머리 — 인사말과 숫자 한 줄. 큰 타일은 두지 않는다. */
.hub2-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.hub2-head h1 { margin: 0 0 var(--space-1); color: var(--color-fg); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.hub2-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; color: var(--color-fg-muted); font-size: var(--fs-xs); }
.hub2-facts strong { color: var(--color-fg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.hub2-search { display: flex; align-items: center; gap: var(--space-2); min-width: 240px; padding: var(--space-2) var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.hub2-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-fg-subtle); }
.hub2-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-fg); font-family: inherit; font-size: var(--fs-sm); }
.hub2-search input:focus { outline: none; }
.hub2-search:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

/* 분류 바로가기 */
.hub2-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.hub2-nav a {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--space-3);
    color: var(--color-fg-muted); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none;
}
.hub2-nav a:hover { color: var(--color-primary-soft-fg); background: var(--color-primary-soft); text-decoration: none; }
.hub2-nav span { color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* 분류 카드 — 링크사이트와 같은 문법 */
.hub2-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); align-items: start; gap: var(--space-3); }
.hub2-group {
    display: flex; flex-direction: column; min-width: 0; padding: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.hub2-group[hidden] { display: none; }
.hub2-group-head { display: flex; align-items: baseline; gap: var(--space-2);
    padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.hub2-group-head h2 { flex: 1; min-width: 0; margin: 0; color: var(--color-fg);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.hub2-group-head span { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.hub2-group-desc { margin: 0 0 var(--space-2); color: var(--color-fg-muted); font-size: var(--fs-xs); }

/* 글자 링크 — 한 줄에 하나, 이름만 */
.hub2-links { display: flex; flex-direction: column; gap: 1px; }
.hub2-link {
    display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: var(--space-8);
    padding: 0 var(--space-2); color: var(--color-fg-muted); border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap;
}
.hub2-link:hover, .hub2-link:focus-visible { color: var(--color-primary-soft-fg); background: var(--color-primary-soft); text-decoration: none; }
.hub2-link[hidden] { display: none; }
.hub2-link-name { flex: 0 0 auto; }
.hub2-link--note { height: auto; padding-top: 5px; padding-bottom: 6px; flex-wrap: wrap; }
.hub2-link-hint { flex: 1 0 100%; color: var(--color-fg-muted); font-size: var(--fs-xs);
    font-weight: var(--fw-regular); line-height: 1.4; white-space: normal; }
.hub2-badge { flex: 0 0 auto; padding: 0 6px; color: var(--color-accent-soft-fg); background: var(--color-accent-soft);
    border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; }
.hub2-ext { flex: 0 0 auto; color: var(--color-fg-subtle); font-size: var(--fs-xs); }

.hub2-empty { padding: var(--space-8) var(--space-4); color: var(--color-fg-muted); text-align: center;
    background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.hub2-empty strong { display: block; margin-bottom: var(--space-1); color: var(--color-fg); }

/* 모바일 — tokens 스케일(sm=640px)에 맞춰 단일화 (2026-09-11) */
@media (max-width: 640px) {
    .hub2-head h1 { font-size: var(--fs-xl); }
    .hub2-board { grid-template-columns: minmax(0, 1fr); }
    .hub2-search { min-width: 100%; }
}