/* Mayalibrarywiki Tools — shared design system.
 * Loaded after each page's own <style>. Component defaults are wrapped in
 * :where() (zero specificity) so a page rule always wins; generated site
 * chrome (.site-*) uses normal specificity so page CSS cannot distort it.
 * Source of truth: /site.css. Design notes: _workspace/docs/DESIGN_SYSTEM.md
 */

/* ---------- 1. Tokens ---------- */
:root {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "D2Coding", monospace;

    --bg: #f5f5f2;
    --surface: #ffffff;
    --surface-2: #f9f9f7;
    --surface-3: #f0f0ec;
    --line: #e5e4df;
    --line-strong: #d3d1ca;

    --ink: #191917;
    --ink-2: #45443f;
    --ink-3: #6b6a63;
    --ink-4: #9a9890;

    --accent: #2557d6;
    --accent-hover: #1d47b5;
    --accent-ink: #1c449f;
    --accent-soft: #eef3fd;
    --accent-line: #cddaf7;
    --focus-ring: 0 0 0 3px rgba(37, 87, 214, 0.2);

    --ok: #12784a;
    --ok-soft: #e8f4ec;
    --bad: #c0392b;
    --bad-soft: #fbeceb;
    --warn: #8a5800;
    --warn-soft: #fbf3df;
    --line-hover: #bdbbb3;
    --ok-line: #b9dcc6;
    --bad-line: #e7b9b3;
    --warn-line: #efdcae;

    --r-sm: 8px;
    --r: 10px;
    --r-lg: 14px;
    --shadow-card: 0 1px 2px rgba(25, 25, 23, 0.04);
    --shadow-pop: 0 10px 30px rgba(25, 25, 23, 0.12), 0 2px 6px rgba(25, 25, 23, 0.06);

    /* Site chrome. Three groups so themed pages can tune them separately:
       --bar-*   top bar
       --crumb-* breadcrumb (sits on the page background)
       --panel-* related tools, usage guide (cards below the tool) */
    --bar-bg: var(--surface);
    --bar-ink: var(--ink);
    --bar-ink-2: var(--ink-2);
    --bar-line: var(--line);
    --bar-hover: var(--surface-3);
    --crumb-ink: var(--ink-3);
    --crumb-ink-2: var(--ink-2);
    --panel-surface: var(--surface);
    --panel-surface-2: var(--surface-2);
    --panel-ink: var(--ink);
    --panel-ink-2: var(--ink-2);
    --panel-ink-3: var(--ink-3);
    --panel-line: var(--line);
    --panel-hover: var(--surface-3);
    --panel-accent: var(--accent);
    --panel-shadow: var(--shadow-card);
}

/* Themed pages with a dark page background (games, some tests). A page with
   light cards on a dark background can reset --panel-* in its own CSS with
   body[data-skin="themed"] { ... } (higher specificity than this rule). */
[data-theme="dark"] {
    --bar-bg: rgba(12, 12, 18, 0.72);
    --bar-ink: #f3f2ee;
    --bar-ink-2: #d6d4cd;
    --bar-line: rgba(255, 255, 255, 0.14);
    --bar-hover: rgba(255, 255, 255, 0.1);
    --crumb-ink: rgba(255, 255, 255, 0.66);
    --crumb-ink-2: rgba(255, 255, 255, 0.9);
    --panel-surface: rgba(255, 255, 255, 0.06);
    --panel-surface-2: rgba(255, 255, 255, 0.04);
    --panel-ink: #f3f2ee;
    --panel-ink-2: #d6d4cd;
    --panel-ink-3: #a9a79f;
    --panel-line: rgba(255, 255, 255, 0.14);
    --panel-hover: rgba(255, 255, 255, 0.1);
    --panel-accent: #9db8ff;
    --panel-shadow: none;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:where([data-skin="site"]) {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    overflow-wrap: break-word;
}

:where(button, input, select, textarea) { font-family: inherit; }

:where([data-skin="site"]) :where(a) { color: var(--accent); text-underline-offset: 0.2em; }

:where([data-skin="site"]) ::selection { background: rgba(37, 87, 214, 0.18); }

:where([data-skin="site"]) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Site chrome (generated) ---------- */
.site-topbar {
    position: relative;
    z-index: 20;
    margin: 0;
    padding: 0;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-line);
    font-family: var(--font);
    line-height: 1.4;
    text-align: left;
    word-break: keep-all;
}
[data-theme="dark"] .site-topbar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme="dark"] .site-topbar a:focus-visible { outline-color: #9db8ff; }
.site-topbar .site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1120px;
    height: 56px;
    margin: 0 auto;
    padding: 0 20px;
}
.site-topbar .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--bar-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}
.site-topbar .site-brand img {
    display: block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}
.site-topbar .site-brand span { overflow: hidden; text-overflow: ellipsis; }
.site-topbar .site-topnav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.site-topbar .site-topnav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--bar-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.site-topbar .site-topnav a:hover { background: var(--bar-hover); color: var(--bar-ink); }
.site-topbar .site-topnav svg { width: 16px; height: 16px; flex: 0 0 auto; }
.site-topbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
    .site-topbar .site-topbar-inner { padding: 0 12px 0 16px; }
    .site-topbar .site-topnav .site-topnav-optional { display: none; }
    .site-topbar .site-topnav a { padding: 0 10px; }
}

.site-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--crumb-ink);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    word-break: keep-all;
}
.site-breadcrumb a { color: inherit; text-decoration: none; }
.site-breadcrumb a:hover { color: var(--crumb-ink-2); text-decoration: underline; text-underline-offset: 0.2em; }
.site-breadcrumb > span[aria-hidden="true"] { color: var(--crumb-ink); opacity: 0.6; }
.site-breadcrumb span { min-width: 0; overflow-wrap: anywhere; }
.site-breadcrumb [aria-current="page"] { color: var(--crumb-ink-2); font-weight: 600; }
.site-breadcrumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Related tools and usage guide share the main card surface. */
.site-related-tools,
.site-usage-guide {
    margin: 20px 0;
    padding: 28px 32px;
    background: var(--panel-surface);
    border: 1px solid var(--panel-line);
    border-radius: var(--r-lg);
    box-shadow: var(--panel-shadow);
    color: var(--panel-ink);
    font-family: var(--font);
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
    min-width: 0;
}
.site-related-tools > h2 {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--panel-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
}
.site-related-tools > h2::before, .site-related-tools > h2::after { content: none; }
.site-related-tools .site-related-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-related-tools .site-related-list > li { margin: 0; padding: 0; min-width: 0; list-style: none; background: none; border: 0; }
.site-related-tools .site-related-list > li::before, .site-related-tools .site-related-list > li::marker { content: none; }
.site-related-tools .site-related-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 52px;
    margin: 0;
    padding: 10px 14px;
    background: var(--panel-surface-2);
    border: 1px solid var(--panel-line);
    border-radius: var(--r);
    box-shadow: none;
    color: var(--panel-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    transform: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.site-related-tools .site-related-link:hover { border-color: var(--panel-accent); background: var(--panel-surface); }
.site-related-tools .site-related-icon { flex: 0 0 auto; width: auto; min-width: 22px; font-size: 18px; line-height: 1; text-align: center; white-space: nowrap; }
.site-related-tools .site-related-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.site-related-tools .site-related-arrow { flex: 0 0 auto; color: var(--panel-ink-3); font-size: 18px; line-height: 1; }
.site-related-tools .site-related-link:hover .site-related-arrow { color: var(--panel-accent); }
.site-related-tools .site-related-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--panel-line);
    color: var(--panel-ink-3);
    font-size: 14px;
    line-height: 1.6;
}
.site-related-tools .site-related-footer a { color: var(--panel-ink-2); font-weight: 600; text-decoration: none; }
.site-related-tools .site-related-footer a::after { content: " →"; color: var(--panel-ink-3); }
.site-related-tools .site-related-footer a:hover { color: var(--panel-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.site-related-tools a:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }

.site-usage-guide { font-size: 15.5px; line-height: 1.8; }
.site-usage-guide h2,
.site-usage-guide h3 {
    padding: 0;
    background: none;
    border: 0;
    color: var(--panel-ink);
    font-family: inherit;
    letter-spacing: -0.01em;
    line-height: 1.45;
    text-align: left;
}
.site-usage-guide h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.site-usage-guide h3 { margin: 28px 0 8px; font-size: 16.5px; font-weight: 700; }
.site-usage-guide h2 + * { margin-top: 12px; }
.site-usage-guide p { margin: 10px 0; color: var(--panel-ink-2); }
.site-usage-guide ul, .site-usage-guide ol { margin: 10px 0; padding-left: 1.3em; color: var(--panel-ink-2); }
.site-usage-guide li { margin: 6px 0; padding: 0; }
.site-usage-guide li::marker { color: var(--panel-ink-3); }
.site-usage-guide strong { color: var(--panel-ink); font-weight: 700; }
.site-usage-guide a { color: var(--panel-accent); text-decoration: underline; text-underline-offset: 3px; }
.site-usage-guide a:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.site-usage-guide code { padding: 1px 6px; border-radius: 6px; background: var(--panel-hover); color: var(--panel-ink); font-family: var(--font-mono); font-size: 0.9em; }
.site-usage-guide .site-guide-table { max-width: 100%; margin: 14px 0; overflow-x: auto; border: 1px solid var(--panel-line); border-radius: var(--r); }
.site-usage-guide table { width: 100%; border-collapse: collapse; color: var(--panel-ink-2); font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.site-usage-guide th, .site-usage-guide td { padding: 10px 14px; border-bottom: 1px solid var(--panel-line); text-align: left; vertical-align: top; }
.site-usage-guide tr:last-child > td { border-bottom: 0; }
.site-usage-guide th { background: var(--panel-surface-2); color: var(--panel-ink); font-weight: 600; white-space: nowrap; }
.site-usage-guide caption { padding: 12px 14px 0; caption-side: top; color: var(--panel-ink); font-weight: 700; text-align: left; }
.site-usage-guide dl { margin: 12px 0; }
.site-usage-guide dt { margin-top: 14px; color: var(--panel-ink); font-weight: 700; }
.site-usage-guide dd { margin: 4px 0 0; color: var(--panel-ink-2); }

@media (max-width: 560px) {
    .site-related-tools, .site-usage-guide { padding: 22px 18px; border-radius: 12px; }
    .site-related-tools .site-related-list { grid-template-columns: minmax(0, 1fr); }
    .site-usage-guide { font-size: 15px; }
    .site-usage-guide th, .site-usage-guide td { padding: 8px 10px; }
}

@media print {
    .site-topbar, .site-breadcrumb, .site-related-tools { display: none !important; }
}

/* ---------- 4. Tool page shell (unified pages: data-skin="site") ---------- */
:where([data-skin="site"]) :where(.container) {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 20px 8px;
}

:where([data-skin="site"]) :where(.main-card) {
    margin: 0;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}

:where([data-skin="site"]) :where(.main-card > header, .main-card > .header, .container > header) {
    margin: 0 0 28px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

:where([data-skin="site"]) :where(.main-card > header h1, .main-card > .header h1, .container > header h1, .page-title) {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

:where([data-skin="site"]) :where(.subtitle) {
    margin: 0;
    color: var(--ink-3);
    font-size: 16px;
    line-height: 1.65;
}

:where([data-skin="site"]) :where(.container > footer, body > footer) {
    margin: 0;
    padding: 20px 0 40px;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}
:where([data-skin="site"]) :where(.container > footer, body > footer) :where(a) { color: var(--ink-2); text-decoration: none; }
:where([data-skin="site"]) :where(.container > footer, body > footer) :where(a:hover) { color: var(--ink); text-decoration: underline; }

/* Section headings inside the card. */
:where([data-skin="site"]) :where(.section-title) {
    margin: 32px 0 12px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
:where([data-skin="site"]) :where(.section-desc) { margin: -4px 0 12px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }

/* ---------- 5. Form controls ---------- */
:where([data-skin="site"]) :where(.input-label, .option-label, .form-label, .field-label) {
    display: block;
    margin: 0 0 8px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

:where([data-skin="site"]) :where(.input-field, .text-input, .select-field, .form-input, .form-select) {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:where([data-skin="site"]) :where(.input-field, .text-input, .select-field, .form-input, .form-select):hover { border-color: var(--line-hover); }
:where([data-skin="site"]) :where(.input-field, .text-input, .select-field, .form-input, .form-select):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
:where([data-skin="site"]) :where(.input-hint, .field-hint, .option-hint) { margin-top: 6px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
:where([data-skin="site"]) :where(.input-unit, .unit-label) { color: var(--ink-3); font-size: 14px; font-weight: 600; }
:where([data-skin="site"]) :where(.error-msg) { color: var(--bad); font-size: 13.5px; font-weight: 500; }
:where([data-skin="site"]) ::placeholder { color: var(--ink-4); opacity: 1; }

/* Segmented control (toggle-group / mode tabs). */
:where([data-skin="site"]) :where(.toggle-group, .mode-tabs, .tab-group) {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
:where([data-skin="site"]) :where(.toggle-btn, .mode-tab) {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    color: var(--ink-3);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where([data-skin="site"]) :where(.toggle-btn, .mode-tab):hover { color: var(--ink); }
:where([data-skin="site"]) :where(.toggle-btn.active, .mode-tab.active) {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(25, 25, 23, 0.08), 0 0 0 1px rgba(25, 25, 23, 0.04);
}

/* Preset chips (quick amount buttons). */
:where([data-skin="site"]) :where(.quick-btns, .quick-buttons, .preset-buttons) { display: flex; flex-wrap: wrap; gap: 6px; }
:where([data-skin="site"]) :where(.quick-btn, .preset-btn) {
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
:where([data-skin="site"]) :where(.quick-btn, .preset-btn):hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
:where([data-skin="site"]) :where(.quick-btn.active, .preset-btn.active) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- 6. Buttons ---------- */
:where([data-skin="site"]) :where(.calculate-btn, .calc-btn, .btn-calc, .btn-primary, .primary-btn, .download-btn, .btn-download) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--r);
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
:where([data-skin="site"]) :where(.calculate-btn) { width: 100%; margin-top: 20px; padding: 15px 20px; font-size: 17px; }
:where([data-skin="site"]) :where(.calculate-btn, .calc-btn, .btn-calc, .btn-primary, .primary-btn, .download-btn, .btn-download):hover { background: var(--accent-hover); }
:where([data-skin="site"]) :where(.calculate-btn, .calc-btn, .btn-calc, .btn-primary, .primary-btn, .download-btn, .btn-download):disabled,
:where([data-skin="site"]) :where(.calculate-btn, .calc-btn, .btn-calc, .btn-primary, .primary-btn, .download-btn, .btn-download):disabled:hover {
    background: var(--surface-3);
    border-color: var(--line);
    color: var(--ink-3);
    cursor: not-allowed;
}
:where([data-skin="site"]) :where(.btn-secondary, .secondary-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    box-shadow: none;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
:where([data-skin="site"]) :where(.btn-secondary, .secondary-btn):hover { background: var(--surface-3); border-color: var(--line-hover); }
:where([data-skin="site"]) :where(.btn-danger) { background: var(--surface); border: 1px solid var(--bad-line); color: var(--bad); }
:where([data-skin="site"]) :where(.btn-danger):hover { background: var(--bad-soft); }

/* ---------- 7. Results ---------- */
:where([data-skin="site"]) :where(.result-section, .result-area) { margin-top: 28px; }
:where([data-skin="site"]) :where(.result-title) { margin: 0 0 12px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
:where([data-skin="site"]) :where(.result-main, .result-hero, .result-highlight) {
    padding: 22px 24px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    color: var(--ink);
    text-align: left;
}
:where([data-skin="site"]) :where(.result-label) { color: var(--accent-ink); font-size: 14px; font-weight: 600; line-height: 1.5; opacity: 1; }
:where([data-skin="site"]) :where(.result-amount, .result-value, .result-number) {
    margin: 4px 0 2px;
    color: var(--ink);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
:where([data-skin="site"]) :where(.result-sub, .result-desc) { color: var(--ink-3); font-size: 14px; line-height: 1.6; opacity: 1; }

:where([data-skin="site"]) :where(.summary-grid, .stats-grid) { display: grid; gap: 8px; }
:where([data-skin="site"]) :where(.summary-item, .summary-card, .stat-card, .stat-item) {
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-align: left;
}
:where([data-skin="site"]) :where(.summary-item, .summary-card, .stat-card, .stat-item) :where(.label, .summary-label, .stat-label) { margin: 0 0 2px; color: var(--ink-3); font-size: 13px; font-weight: 500; line-height: 1.5; }
:where([data-skin="site"]) :where(.summary-item, .summary-card, .stat-card, .stat-item) :where(.value, .summary-value, .stat-value) { color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
:where([data-skin="site"]) :where(.value.highlight) { color: var(--accent-ink); }
:where([data-skin="site"]) :where(.value.good) { color: var(--ok); }
:where([data-skin="site"]) :where(.value.bad) { color: var(--bad); }

/* Detail rows (label … value). */
:where([data-skin="site"]) :where(.detail-row) { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
:where([data-skin="site"]) :where(.detail-label, .detail-name) { color: var(--ink-3); }
:where([data-skin="site"]) :where(.detail-value) { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Gauge. */
:where([data-skin="site"]) :where(.gauge-labels) { color: var(--ink-3); font-size: 12.5px; }

/* ---------- 8. Notes, tips and source blocks ---------- */
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) {
    margin: 24px 0 0;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(h3, h4) { margin: 0 0 8px; color: var(--ink); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(ul, ol) { margin: 6px 0 0; padding-left: 1.2em; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(ul) { list-style: disc; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(ol) { list-style: decimal; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(li) { margin: 4px 0; padding: 0; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(li)::marker { color: var(--ink-4); }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(p) { margin: 6px 0; }
:where([data-skin="site"]) :where(.tip-box, .info-box, .notice-box) :where(strong, b) { color: var(--ink); }

:where([data-skin="site"]) :where(.mode-notice, .info-banner) {
    padding: 11px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    color: var(--accent-ink);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
:where([data-skin="site"]) :where(.disclaimer) { color: var(--ink-3); font-size: 13px; line-height: 1.65; }

/* Review date and official sources (계산 기준과 공식 출처 / 작동 기준과 검토일). */
.site-basis {
    margin: 32px 0 0;
    padding: 20px 22px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    box-shadow: none;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.75;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.site-basis > h2, .site-basis > h3, .site-basis > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.45;
    text-align: left;
}
.site-basis > h2::before, .site-basis > h3::before, .site-basis > h4::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-basis > h2::after, .site-basis > h3::after, .site-basis > h4::after { content: none; }
.site-basis p { margin: 8px 0; padding: 0; color: var(--ink-2); font-size: inherit; line-height: inherit; }
.site-basis p:last-child { margin-bottom: 0; }
.site-basis ul, .site-basis ol { margin: 8px 0; padding-left: 1.2em; list-style: disc; }
.site-basis ol { list-style: decimal; }
/* When a page puts the source block right under its title. */
.main-card > header + .site-basis, .main-card > .header + .site-basis, .container > header + .site-basis { margin: 0 0 28px; }
.site-basis li { margin: 4px 0; padding: 0; color: var(--ink-2); font-size: inherit; background: none; }
.site-basis li::before { content: none; }
.site-basis li::marker { color: var(--ink-4); }
.site-basis strong { color: var(--ink); }
.site-basis time {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.site-basis a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.site-basis a:hover { text-decoration-color: var(--accent); }
.site-basis a[target="_blank"]::after { content: " ↗"; font-weight: 500; text-decoration: none; }
[data-theme="dark"] .site-basis { background: var(--panel-surface-2); border-color: var(--panel-line); border-left-color: var(--panel-accent); color: var(--panel-ink-2); }
[data-theme="dark"] .site-basis > h2, [data-theme="dark"] .site-basis > h3, [data-theme="dark"] .site-basis strong, [data-theme="dark"] .site-basis time { color: var(--panel-ink); }
[data-theme="dark"] .site-basis p, [data-theme="dark"] .site-basis li { color: var(--panel-ink-2); }
[data-theme="dark"] .site-basis a { color: var(--panel-accent); }

/* ---------- 9. Tables ---------- */
:where([data-skin="site"]) :where(.table-wrap, .table-wrapper, .table-scroll) { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
:where([data-skin="site"]) :where(.ref-table, .rate-table, .info-table, .compare-table, .cmp-table, .bracket-table, .schedule-table, .grade-table, .data-table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}
:where([data-skin="site"]) :where(.ref-table, .rate-table, .info-table, .compare-table, .cmp-table, .bracket-table, .schedule-table, .grade-table, .data-table) :where(th) {
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 600;
}
:where([data-skin="site"]) :where(.ref-table, .rate-table, .info-table, .compare-table, .cmp-table, .bracket-table, .schedule-table, .grade-table, .data-table) :where(td) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
:where([data-skin="site"]) :where(.ref-table, .rate-table, .info-table, .compare-table, .cmp-table, .bracket-table, .schedule-table, .grade-table, .data-table) :where(tbody tr:last-child td) { border-bottom: 0; }
:where([data-skin="site"]) :where(.highlight-row, .active-bracket, tr.hl) :where(td) { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

/* ---------- 10. FAQ ---------- */
:where([data-skin="site"]) :where(.faq-section) { margin-top: 40px; }
:where([data-skin="site"]) :where(.faq-section) > :where(h2, h3, .faq-title) {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.4;
    text-align: left;
}
:where([data-skin="site"]) :where(.faq-item) {
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
:where([data-skin="site"]) :where(.faq-question, .faq-q) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 2px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}
:where([data-skin="site"]) :where(.faq-question, .faq-q):hover { color: var(--accent-ink); background: transparent; }
:where([data-skin="site"]) :where(.faq-question, .faq-q) :where(.arrow, .faq-arrow, .faq-icon) { flex: 0 0 auto; color: var(--ink-4); font-size: 11px; }
:where([data-skin="site"]) :where(.faq-answer, .faq-a) { color: var(--ink-2); font-size: 15px; line-height: 1.75; }
:where([data-skin="site"]) :where(.faq-answer, .faq-a) :where(p) { color: inherit; font-size: inherit; line-height: inherit; }
/* FAQ built with <details>/<summary>. */
:where([data-skin="site"]) :where(.faq-item > summary, .faq-item > details > summary) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    list-style: none;
    cursor: pointer;
}
:where([data-skin="site"]) :where(.faq-item > summary, .faq-item > details > summary)::-webkit-details-marker { display: none; }
:where([data-skin="site"]) :where(.faq-item > summary, .faq-item > details > summary):hover { color: var(--accent-ink); }
:where([data-skin="site"]) :where(.faq-item > summary, .faq-item > details > summary)::after { content: "▾"; flex: 0 0 auto; color: var(--ink-4); font-size: 12px; transition: transform 0.15s ease; }
:where([data-skin="site"]) :where(details.faq-item[open] > summary, .faq-item > details[open] > summary)::after { transform: rotate(180deg); }
:where([data-skin="site"]) :where(details.faq-item > .faq-answer, .faq-item > details > .faq-answer) { padding: 0 2px 16px; }

/* ---------- 11. File tools ---------- */
:where([data-skin="site"]) :where(.upload-area, .drop-zone, .dropzone, .upload-zone) {
    padding: 40px 24px;
    background: var(--surface-2);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    color: var(--ink-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
:where([data-skin="site"]) :where(.upload-area, .drop-zone, .dropzone, .upload-zone):hover,
:where([data-skin="site"]) :where(.upload-area.dragover, .drop-zone.dragover, .dropzone.dragover, .upload-zone.dragover, .upload-area.drag-over, .drop-zone.drag-over, .upload-area.dragging, .drop-zone.dragging, .dropzone.dragging, .upload-zone.dragging) {
    background: var(--accent-soft);
    border-color: var(--accent);
}
:where([data-skin="site"]) :where(.upload-icon) {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232557d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / 24px no-repeat;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
:where([data-skin="site"]) :where(.upload-text) { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
:where([data-skin="site"]) :where(.upload-hint) { margin-top: 4px; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }

:where([data-skin="site"]) :where(.progress-bar, .progress-bar-bg, .progress-track) { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
:where([data-skin="site"]) :where(.progress-fill) { height: 100%; background: var(--accent); border-radius: 999px; }
/* On many pages .progress-bar is the fill inside a track element. */
:where([data-skin="site"]) :where(.progress-bar-bg, .progress-bar-container, .progress-bar-wrap, .progress-track) > :where(.progress-bar) { height: 100%; background: var(--accent); }
:where([data-skin="site"]) :where(input[type="range"]) { accent-color: var(--accent); }
:where([data-skin="site"]) :where(.progress-text) { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

:where([data-skin="site"]) :where(.toast) {
    padding: 11px 18px;
    background: #22221f;
    border-radius: var(--r);
    box-shadow: var(--shadow-pop);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- 12. Directory pages (home, hubs, full list) ---------- */
.dir-page { background: var(--bg); }
.dir-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.dir-hero { padding: 56px 0 36px; }
.dir-hero-compact { padding: 36px 0 24px; }
.dir-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}
.dir-kicker .dir-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dir-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.18;
}
.dir-hero-compact h1 { font-size: 34px; letter-spacing: -0.03em; }
.dir-lead { max-width: 640px; margin: 14px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.7; }

/* Search with instant results. */
.dir-search { position: relative; max-width: 680px; margin: 28px 0 0; }
.dir-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dir-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 8px 0 18px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(25, 25, 23, 0.05), 0 4px 14px rgba(25, 25, 23, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dir-search-box:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.dir-search-box > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ink-3); }
.dir-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ink);
    font-size: 17px;
}
.dir-search-input::placeholder { color: var(--ink-4); }
.dir-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dir-search-input:focus-visible { outline: none; }
.dir-search-key {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
}
.dir-search-box:focus-within .dir-search-key { display: none; }
.dir-search-submit {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 18px;
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.dir-search-submit:hover { background: var(--accent-hover); }
.dir-search-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(440px, 60vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    list-style: none;
}
.dir-search-results[hidden] { display: none; }
.dir-search-results li { margin: 0; padding: 0; }
.dir-search-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.dir-search-option[aria-selected="true"], .dir-search-option:hover { background: var(--surface-3); }
.dir-search-option .dir-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
.dir-search-option-text { display: flex; flex-direction: column; min-width: 0; }
.dir-search-option-name { font-size: 15px; font-weight: 600; line-height: 1.4; }
.dir-search-option-name mark { background: transparent; color: var(--accent-ink); font-weight: 800; }
.dir-search-option-cat { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.dir-search-more {
    display: block;
    margin: 4px 0 0;
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.dir-search-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.dir-search-empty { padding: 14px 12px; color: var(--ink-3); font-size: 14px; }

.dir-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dir-quick-label { margin-right: 4px; color: var(--ink-3); font-size: 14px; }
.dir-quick a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.dir-quick a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Sections. */
.dir-page .dir-section { padding: 28px 0; }
.dir-page .dir-section + .dir-section { border-top: 1px solid var(--line); }
.dir-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.dir-section-title { margin: 0; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.dir-section-note { margin: 4px 0 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }
.dir-section-link { flex: 0 0 auto; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dir-section-link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Category tiles. */
.dir-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dir-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dir-cat:hover { border-color: var(--line-strong); box-shadow: 0 4px 16px rgba(25, 25, 23, 0.06); }
.dir-cat-head { display: flex; align-items: center; gap: 12px; }
.dir-cat-name { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.dir-cat-name a { color: var(--ink); text-decoration: none; }
.dir-cat-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dir-cat-name a:focus-visible { outline: none; }
.dir-cat:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.dir-cat-count { color: var(--ink-3); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dir-cat-desc { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.dir-cat-examples { display: flex; flex-direction: column; gap: 2px; margin: auto 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.dir-cat-examples li { margin: 0; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-cat-examples a { position: relative; z-index: 1; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; text-decoration: none; }
.dir-cat-examples a::before { content: "·"; margin-right: 6px; color: var(--ink-4); }
.dir-cat-examples a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Icon tile with category tint. */
.dir-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tint-bg, var(--surface-3));
    font-size: 20px;
    line-height: 1;
}
[data-category="tax"] { --tint-bg: #e9eefb; --tint-ink: #2350c8; }
[data-category="work"] { --tint-bg: #e6f3ea; --tint-ink: #17703f; }
[data-category="housing"] { --tint-bg: #f8ebe3; --tint-ink: #a4481f; }
[data-category="investing"] { --tint-bg: #e3f0f6; --tint-ink: #12668f; }
[data-category="auto"] { --tint-bg: #eceef2; --tint-ink: #3d4756; }
[data-category="spending"] { --tint-bg: #fbf1dd; --tint-ink: #8f5c0a; }
[data-category="media"] { --tint-bg: #f6e8f1; --tint-ink: #9a2f72; }
[data-category="it"] { --tint-bg: #eaeafb; --tint-ink: #4144b0; }
[data-category="daily"] { --tint-bg: #e2f2ef; --tint-ink: #0f6b62; }
[data-category="health"] { --tint-bg: #fbeaea; --tint-ink: #b23a3a; }
[data-category="fun"] { --tint-bg: #f3e9fb; --tint-ink: #7a3fb0; }

/* Tool lists. */
.dir-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dir-tool-grid > li { margin: 0; padding: 0; min-width: 0; }
.dir-tool-grid > li.hidden, .dir-tool.hidden { display: none; }
.tool-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    min-width: 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-card:hover { border-color: var(--line-strong); box-shadow: 0 4px 16px rgba(25, 25, 23, 0.06); }
.tool-card:hover .tool-name { color: var(--accent-ink); }
.tool-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-card .tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-card .tool-name { margin: 0; color: var(--ink); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; transition: color 0.15s ease; }
.tool-card .tool-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.dir-tool-grid-compact .tool-card { align-items: center; padding: 12px 14px; border-radius: var(--r); }
.dir-tool-grid-compact .dir-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
.dir-tool-grid-compact .tool-desc { -webkit-line-clamp: 1; line-clamp: 1; }
.dir-tool-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dir-tool-grid-wide .tool-card { padding: 18px 20px; }
.dir-tool-grid-wide .tool-desc { -webkit-line-clamp: 3; line-clamp: 3; }

/* Full directory grouped by category. */
.dir-jump {
    position: sticky;
    top: 0;
    z-index: 15;
    margin: 0 -20px 8px;
    padding: 10px 20px;
    background: rgba(245, 245, 242, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.dir-jump-list { display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.dir-jump-list::-webkit-scrollbar { display: none; }
.dir-jump-list li { flex: 0 0 auto; margin: 0; padding: 0; }
.dir-jump a, .dir-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.dir-jump a:hover, .dir-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.dir-tab.active, .dir-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.dir-jump a span, .dir-tab span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.dir-tab.active span, .dir-tab[aria-selected="true"] span { color: rgba(255, 255, 255, 0.7); }

.dir-group { padding: 26px 0 8px; scroll-margin-top: 64px; }
.dir-group.hidden { display: none; }
.dir-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.dir-group-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.4; }
.dir-group-title a { color: inherit; text-decoration: none; }
.dir-group-title a:hover { color: var(--accent-ink); }
.dir-group-title .dir-icon { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
.dir-group-count { color: var(--ink-3); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Toolbar on hubs and the full list. */
.dir-filter { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.dir-filter .dir-search { margin: 0; max-width: none; }
.dir-filter .dir-search-box { height: 52px; }
.dir-result-info { min-height: 1.4em; margin: 0; color: var(--ink-3); font-size: 14px; }
.dir-result-info .highlight-count { color: var(--ink); font-weight: 700; }
.dir-no-results { display: none; padding: 48px 0; color: var(--ink-3); text-align: center; }
.dir-clear {
    flex: 0 0 auto;
    display: none;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    background: var(--surface-3);
    border: 0;
    border-radius: 50%;
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dir-clear:hover { background: var(--line); }

.dir-other { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dir-other li { margin: 0; padding: 0; }
.dir-other a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.dir-other a:hover { border-color: var(--line-strong); color: var(--ink); }
.dir-other .dir-icon { width: 28px; height: 28px; font-size: 15px; border-radius: 50%; }

.dir-ad { padding: 28px 0 8px; text-align: center; }

.site-footer {
    margin-top: 32px;
    padding: 36px 0 44px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.7;
}
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 32px; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.site-footer-brand img { width: 26px; height: 26px; border-radius: 50%; }
.site-footer p { margin: 10px 0 0; }
.site-footer-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.site-footer-cats li { margin: 0; padding: 0; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.site-footer-bottom nav { display: flex; gap: 16px; }

@media (max-width: 960px) {
    .dir-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dir-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .dir-hero { padding: 36px 0 24px; }
    .dir-hero h1 { font-size: 32px; letter-spacing: -0.03em; }
    .dir-hero-compact h1 { font-size: 28px; }
    .dir-lead { font-size: 16px; }
    .dir-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dir-cat { padding: 14px; }
    .dir-cat-desc, .dir-cat-examples { display: none; }
    .dir-tool-grid, .dir-tool-grid-wide { grid-template-columns: minmax(0, 1fr); }
    .site-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .site-footer-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .dir-wrap { padding: 0 16px; }
    .dir-jump { margin: 0 -16px 8px; padding: 10px 16px; }
    .dir-search-box { height: 54px; padding-left: 14px; }
    .dir-search-key { display: none; }
    .dir-search-submit { padding: 0 14px; }
    .dir-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dir-cat-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dir-cat-head .dir-icon { width: 36px; height: 36px; font-size: 18px; }
    .dir-cat-name { font-size: 15.5px; }
}

/* ---------- 13. Small screens for tool pages ---------- */
@media (max-width: 560px) {
    :where([data-skin="site"]) :where(.container) { padding: 12px 12px 8px; }
    :where([data-skin="site"]) :where(.main-card) { padding: 24px 18px; border-radius: 12px; }
    :where([data-skin="site"]) :where(.main-card > header h1, .main-card > .header h1, .container > header h1, .page-title) { font-size: 24px; }
    :where([data-skin="site"]) :where(.subtitle) { font-size: 15px; }
    :where([data-skin="site"]) :where(.result-amount, .result-value, .result-number) { font-size: 28px; }
    .site-basis { padding: 16px 16px 14px; }
}

/* Hub title with its category tile. */
.dir-hub-title { display: flex; align-items: center; gap: 14px; }
.dir-hub-title .dir-icon { width: 48px; height: 48px; font-size: 24px; border-radius: 12px; }
@media (max-width: 520px) { .dir-hub-title .dir-icon { width: 40px; height: 40px; font-size: 20px; } }

/* Category chips wrap on wide screens; scroll sideways on phones. */
@media (min-width: 721px) {
    .dir-jump-list { flex-wrap: wrap; overflow: visible; }
}

/* Narrow phones: the in-card 300x250 ad frame (300px + 10px padding + border)
   was wider than the card's content box. Drop the frame padding/border and
   give shared-skin cards slightly smaller side padding. Ad code is untouched. */
@media (max-width: 400px) {
    div:has(> ins.adsbygoogle[style*="300px"]) { padding: 0 !important; border-color: transparent !important; }
    :where([data-skin="site"]) :where(.main-card) { padding-left: 16px; padding-right: 16px; }
}

/* Guide tables: let Korean words break inside cells on phones instead of
   pushing the table wider than the card. */
@media (max-width: 560px) {
    .site-usage-guide table { word-break: normal; overflow-wrap: anywhere; }
}