/* ============================================================================
   tools-hub.css — 러닝 도구 허브 (/Tools)

   흩어져 있던 계산기·날씨·훈련 페이지를 한 화면에서 고르게 하는 곳.
   개별 페이지 주소는 그대로 두고(검색 유입 보존) 허브가 그 페이지들을 묶어 준다.

   아이콘을 쓰지 않는다. 이모지는 기기마다 모양이 달라 톤이 무너지고,
     20개짜리 목록에서는 오히려 제목을 읽는 걸 방해한다. 위계는 활자와 여백으로만.
   색은 테마 토큰. 단, 글자가 얹히는 배경에는 틴트 토큰(-50 계열)을 쓰지 않는다 —
     다크에서 라이트 값으로 남는 경우가 있다. [[home-refine-layer]]
   ========================================================================== */

.th-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 20px 72px;
}

/* ── 경로 ── */
.th-crumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ro-text-sub);
    margin-bottom: 28px;
}
.th-crumb a { color: var(--ro-text-sub); text-decoration: none; }
.th-crumb a:hover { color: var(--ro-primary-600); text-decoration: underline; }
.th-crumb strong { color: var(--ro-text); font-weight: 700; }

/* ── 머리 ── */
.th-hero {
    padding: 8px 0 40px;
    border-bottom: 1px solid var(--ro-border);
    margin-bottom: 44px;
}
.th-hero__kicker {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #2960CC;           /* 고정색 + 흰 글자 — 테마와 무관하게 대비 5.77 */
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.th-hero__title {
    margin: 0 0 14px;
    font-size: clamp(28px, 4.6vw, 46px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--ro-text);
}
.th-hero__title em {
    font-style: normal;
    color: var(--ro-accent-700, #416106);
}
.th-hero__sub {
    margin: 0;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ro-text-sub);
}

/* ── 즉시 검색 ── */
.th-find { margin-top: 26px; max-width: 460px; }
.th-find[hidden] { display: none; }
.th-find__lbl {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ro-text-sub);
}
.th-find__in {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 13px;
    border: 1px solid var(--ro-border);
    background: var(--ro-surface);
    color: var(--ro-text);
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
}
.th-find__in::placeholder { color: var(--ro-text-muted); font-weight: 500; }
.th-find__in:focus {
    outline: none;
    border-color: #2960CC;
    box-shadow: 0 0 0 3px rgba(41, 96, 204, 0.18);
}
.th-find__none {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--ro-text-sub);
}
.th-find__none[hidden] { display: none; }

/* ── 묶음 ── */
.th-grp { margin-bottom: 48px; }
.th-grp[hidden] { display: none; }
.th-grp__head { margin-bottom: 18px; }
.th-grp__title {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--ro-text);
}
.th-grp__lead {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ro-text-sub);
}

/* ── 카드 ──
   아이콘이 없으므로 제목이 곧 시각 요소다. 크게, 굵게, 촘촘하게. */
.th-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.th-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--ro-border);
    background: var(--ro-surface);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.18s ease, border-color 0.18s ease;
}
.th-card[hidden] { display: none; }
.th-card:hover {
    transform: translateY(-3px);
    border-color: #2960CC;
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, 0.24);
    color: inherit;
}
.th-card:focus-visible {
    outline: 3px solid #2960CC;
    outline-offset: 2px;
}
.th-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.th-card__title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ro-text);
}
.th-card__badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(111, 163, 12, 0.18);
    color: var(--ro-accent-700, #416106);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.th-card__desc {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ro-text-sub);
}
.th-card__go {
    margin-top: auto;
    padding-top: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ro-primary-600);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.th-card:hover .th-card__go,
.th-card:focus-visible .th-card__go { opacity: 1; transform: none; }

/* 다크에선 배지 글자를 밝은 그린으로(어두운 올리브는 안 보인다) */
html[data-theme="dark"] .th-card__badge { color: #A8D355; }
html[data-theme="dark"] .th-hero__title em { color: #A8D355; }
html[data-theme="dark"] .th-card { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.8); }

/* ── 다음 단계 ── */
.th-next {
    margin-top: 8px;
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--ro-border);
    background: var(--ro-surface);
}
.th-next__title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ro-text);
}
.th-next__links { display: flex; flex-wrap: wrap; gap: 8px; }
.th-next__links a {
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--ro-border);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--ro-text);
    text-decoration: none;
}
.th-next__links a:hover { border-color: #2960CC; color: var(--ro-text); }

/* ── 좁은 화면 ── */
@media (max-width: 640px) {
    .th-wrap { padding: 16px 16px 56px; }
    .th-hero { padding-bottom: 30px; margin-bottom: 34px; }
    .th-hero__sub { font-size: 14.5px; }
    .th-grid { grid-template-columns: 1fr; }
    .th-card { padding: 17px; }
    /* 모바일엔 호버가 없다 — 화살표를 항상 보이게 */
    .th-card__go { opacity: 1; transform: none; }
    .th-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .th-card, .th-card__go { transition: none; }
    .th-card:hover { transform: none; }
}