/*
 * neis.me 첫 화면 전용 스타일 (hub, 2026-10-15 "한눈에 찾기" 개편)
 *
 * 2026-10-14 포털형(아이콘 타일 31개)은 상자가 전부 같은 크기·같은 연두색이라 훑어봐도
 * 무엇이 무엇인지 들어오지 않았다(사용자 지적). 그래서:
 *   - 분류 4개를 "패널" 로 묶고 패널마다 색(data-tone)을 달리해 묶음부터 눈에 들어오게
 *   - 항목은 상자 대신 "아이콘 + 이름 + 한 줄 설명" 행(row) — 이름만으로 모를 때 설명이 바로 옆에
 *   - 자주 쓰는 도구는 큰 타일 6개 대신 작은 알약 줄로 (첫 화면 높이를 줄인다)
 * tokens.css 만 의존. 색은 전부 토큰(기본색·info·warn·accent 의 soft 계열).
 */

/* ─── 분류 색 (menu.php 의 tone — 다크에서 amber 와 brass 가 비슷해 쉬어가기는 rose 를 쓴다) ─── */
[data-tone="green"] { --tone-bg: var(--color-primary-soft); --tone-fg: var(--color-primary-soft-fg); --tone-line: var(--color-primary); }
[data-tone="blue"]  { --tone-bg: var(--color-info-soft);    --tone-fg: var(--color-info);            --tone-line: var(--color-info); }
[data-tone="amber"] { --tone-bg: var(--color-warn-soft);    --tone-fg: var(--color-warn);            --tone-line: var(--color-warn); }
[data-tone="brass"] { --tone-bg: var(--color-accent-soft);  --tone-fg: var(--color-accent-soft-fg);  --tone-line: var(--color-accent); }
[data-tone="rose"]  { --tone-bg: var(--color-danger-soft);  --tone-fg: var(--color-danger);          --tone-line: var(--color-danger); }

/* ─── 히어로 (작게 — 본문이 첫 화면 안에 들어오도록) ─── */
.hub-hero {
    background: var(--gradient-hero);
    border-bottom: 1px solid var(--color-border);
}
.hub-hero__inner {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--space-10) var(--space-4) var(--space-6);
    text-align: center;
}
.hub-hero__title {
    margin: 0 0 var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-tight);
    line-height: var(--line-tight);
}
.hub-hero__lead {
    margin: 0 auto var(--space-5);
    max-width: 520px;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--line-base);
}

/* 검색 */
.hub-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 520px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}
.hub-search svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-fg-subtle); }
.hub-search input {
    flex: 1; min-width: 0;
    border: 0; background: none;
    color: var(--color-fg);
    font-family: inherit; font-size: var(--fs-base);
}
.hub-search input::placeholder { color: var(--color-fg-subtle); }
.hub-search input:focus { outline: none; }
.hub-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md), var(--shadow-focus);
}
.hub-search__kbd {
    flex: 0 0 auto;
    padding: 2px var(--space-2);
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.hub-hero__facts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
    margin: var(--space-4) 0 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
}
.hub-hero__facts strong { color: var(--color-fg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.hub-hero__dot { color: var(--color-fg-subtle); }

/* ─── 본문 ─── */
.hub-body { width: min(1180px, 100%); margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-16); }

/* 자주 쓰는 도구 · 최근 쓴 도구 — 알약 한 줄 */
.hub-strip { margin-bottom: var(--space-6); }
.hub-strip__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.hub-strip__head h2 {
    flex: 1; margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
}
.hub-recent__clear {
    padding: 0; color: var(--color-fg-subtle); background: none; border: 0;
    font-family: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.hub-recent__clear:hover { color: var(--color-fg); text-decoration: underline; }
.hub2-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hub2-chip, .hub-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 7px var(--space-3) 7px var(--space-2);
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.hub2-chip:hover, .hub2-chip:focus-visible, .hub-pill:hover, .hub-pill:focus-visible {
    color: var(--color-fg);
    background: var(--color-surface);
    border-color: var(--color-border-strong, var(--color-fg-subtle));
    text-decoration: none;
}
.hub-pill__icon {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--radius-full);
    background: var(--tone-bg, var(--color-primary-soft));
    color: var(--tone-fg, var(--color-primary-soft-fg));
}
.hub-pill__icon .hub-ic { width: 15px; height: 15px; }
.hub-pill__count { color: var(--color-fg-subtle); font-size: var(--fs-xs); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }

/* ─── 분류 패널 2×2 ─── */
.hub-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}
.hub-group {
    min-width: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--tone-line, var(--color-primary));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.hub-group[hidden] { display: none; }
.hub-group__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-3);
}
.hub-group__mark {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
    background: var(--tone-line, var(--color-primary));
}
.hub-group__titles { flex: 1; min-width: 0; }
.hub-group__head h2 { margin: 0; color: var(--color-fg); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.hub-group__desc { margin: 2px 0 0; color: var(--color-fg-muted); font-size: var(--fs-xs); }
.hub-group__count { flex: 0 0 auto; color: var(--color-fg-subtle); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* 항목 행 — 패널 안에서 2열 */
.hub-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 0 var(--space-2) var(--space-3);
}
.hub-row {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.hub-row:hover, .hub-row:focus-visible {
    background: var(--color-surface);
    color: var(--color-fg);
    text-decoration: none;
}
.hub-row[hidden] { display: none; }
.hub-row__icon {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: var(--tone-bg, var(--color-primary-soft));
    color: var(--tone-fg, var(--color-primary-soft-fg));
}
.hub-row__icon .hub-ic { width: 20px; height: 20px; stroke-width: 1.8; }
.hub-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-row__name {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--letter-tight);
    line-height: var(--line-tight);
}
.hub-row__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-row__ext { color: var(--color-fg-subtle); font-size: var(--fs-xs); }
.hub-row__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: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 16px;
}
.hub-row__hint {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 삭제 예정 항목은 한 톤 내린다 */
.hub-row--muted { opacity: .62; }
.hub-row--muted:hover { opacity: 1; }

/* ─── 검색 결과 없음 ─── */
.hub-empty {
    margin-bottom: var(--space-6);
    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, var(--color-border));
    border-radius: var(--radius-lg);
}
.hub-empty strong { display: block; margin-bottom: var(--space-1); color: var(--color-fg); }

/* ─── 좁은 화면 ─── */
@media (max-width: 900px) {
    .hub-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hub-hero__inner { padding: var(--space-6) var(--space-4) var(--space-5); }
    .hub-hero__title { font-size: var(--fs-xl); }
    .hub-hero__lead { display: none; }
    .hub-search__kbd { display: none; }
    .hub-body { padding-top: var(--space-5); }
    .hub-strip__head h2 { font-size: 11px; }
    .hub2-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
    .hub2-chips::-webkit-scrollbar { display: none; }
    .hub2-chip, .hub-pill { flex: 0 0 auto; }
    .hub-board { gap: var(--space-4); }
    .hub-rows { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: var(--space-1); }
    .hub-row { padding: var(--space-2) var(--space-3); }
    .hub-row__hint { white-space: normal; }
}

/* ─── 접근성: 모션 줄임 ─── */
@media (prefers-reduced-motion: reduce) {
    .hub-row, .hub2-chip, .hub-pill { transition: none; }
}