@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   Co-Fleeter Design System v3 — institutional maritime fintech
   Brand: #5271FF (cobalt-periwinkle) · #19A9DD (cyan)
   Type:  Pretendard Variable (KR/EN) · JetBrains Mono (data)
   Theme: token swap via body.dark-mode (persisted: localStorage 'theme')
   NOTE:  every pre-v3 class name & custom-property name is preserved —
          app.js / auth / toast / search rely on them as JS hooks.
   ============================================================ */

:root {
    /* Color palette — light (default) */
    --color-bg-dark: #f5f7fc;              /* app canvas */
    --color-bg-card: #ffffff;
    --color-primary: #5271FF;
    --color-primary-hover: #4158d0;
    --color-secondary: #19A9DD;
    --color-secondary-hover: #148cb5;
    --color-accent: #b26a04;               /* amber, text-safe on light */
    --color-accent-raw: #f59e0b;
    --color-danger: #dc2626;
    --color-success: #0a8a5f;
    --color-text-main: #0b1220;
    --color-text-muted: #5b6b85;
    --color-text-faint: #94a3b8;           /* decorative only — not for reading text */
    --color-border: rgba(15, 27, 55, 0.10);
    --color-border-strong: rgba(15, 27, 55, 0.17);
    --color-wordmark: #1a46d4;

    --btn-primary-fg: #ffffff;
    --glow-primary: 0 1px 2px rgba(11, 18, 32, 0.07);
    --glow-inset: none;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 3px rgba(11, 18, 32, 0.03);
    --shadow-md: 0 8px 24px -14px rgba(11, 18, 32, 0.16), 0 2px 6px rgba(11, 18, 32, 0.04);
    --shadow-lg: 0 8px 24px -14px rgba(11, 18, 32, 0.16), 0 2px 6px rgba(11, 18, 32, 0.04);

    --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Dynamic backgrounds */
    --bg-header: #ffffff;
    --bg-input: #ffffff;
    --bg-inset: #f1f4fb;                   /* sunken panels inside cards */
    --bg-glass: rgba(15, 27, 55, 0.03);
    --bg-glass-hover: rgba(15, 27, 55, 0.055);
    --bg-overlay: rgba(9, 14, 26, 0.55);
    --color-hero-gradient: radial-gradient(58% 46% at 18% -6%, rgba(82, 113, 255, 0.14), transparent 62%),
        radial-gradient(46% 40% at 88% 4%, rgba(25, 169, 221, 0.12), transparent 60%),
        linear-gradient(#f7f9fe, #eef2fb);
    --color-login-gradient: radial-gradient(circle at top right, #f1f5f9 0%, #e2e8f0 100%);
    --glass-panel: rgba(255, 255, 255, 0.94);
    --text-hero-title: linear-gradient(120deg, #1b2a6b 0%, #5271FF 58%, #19A9DD 115%);
    --text-hero-subtitle: #1a46d4;
    --shadow-hero: none;
    --grad-brand: linear-gradient(135deg, #19A9DD 0%, #5271FF 62%);
}

body.dark-mode {
    --color-bg-dark: #04070e;
    --color-bg-card: #0a1220;
    --color-primary: #8399ff;
    --color-primary-hover: #aeb9ff;
    --color-secondary: #3cbdeb;
    --color-secondary-hover: #6fd0f2;
    --color-accent: #f6bd5c;
    --color-accent-raw: #f6bd5c;
    --color-danger: #ff7f82;
    --color-success: #37d6a3;
    --color-text-main: #e9eff8;
    --color-text-muted: #9fb0c9;
    --color-text-faint: #5d6c84;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.17);
    --color-wordmark: #90a4ff;

    --btn-primary-fg: #0a1220;
    --glow-primary: 0 1px 2px rgba(0, 0, 0, 0.5);
    --glow-inset: none;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.45);

    --bg-header: #05090f;
    --bg-input: rgba(255, 255, 255, 0.045);
    --bg-inset: #080e18;
    --bg-glass: rgba(255, 255, 255, 0.045);
    --bg-glass-hover: rgba(255, 255, 255, 0.085);
    --bg-overlay: rgba(2, 5, 12, 0.68);
    --color-hero-gradient: radial-gradient(58% 46% at 18% -6%, rgba(131, 153, 255, 0.12), transparent 62%),
        radial-gradient(46% 40% at 88% 4%, rgba(60, 189, 235, 0.10), transparent 60%),
        linear-gradient(#05080f, #04070e);
    --color-login-gradient: radial-gradient(circle at top right, #080e18 0%, #04070e 100%);
    --glass-panel: rgba(10, 16, 28, 0.94);
    --text-hero-title: linear-gradient(120deg, #eaf1ff 0%, #bcd2ff 50%, #8fe0ff 100%);
    --text-hero-subtitle: #90a4ff;
    --shadow-hero: none;
}

/* ---------- Reset & base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---------- Scrollbars ----------
   The window and the sidebar hide their scrollbars entirely — mouse wheel,
   trackpad, touch and keyboard scrolling all still work; only the fat default
   OS scrollbar visual is gone. Inner scroll areas (tables, dropdowns,
   textareas) keep a slim, theme-following scrollbar for affordance. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--color-primary-hover);
}

button {
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

::selection {
    background: rgba(82, 113, 255, 0.18);
}

/* Keyboard focus — visible everywhere, on both themes */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
}

/* Native <select> popup options: force theme-matched colors. Dark mode otherwise
   inherits near-white text onto the white OS popup list, so the options (e.g. the
   EUA chart year filter) look disabled/invisible even though they work. */
select option {
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
}

/* ---------- Utilities (original set) ---------- */
.hidden { display: none !important; }
.flex { display: flex; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.self-center { align-self: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.col-span-2 { grid-column: span 2 / span 2; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-muted { color: var(--color-text-muted); }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }

/* ---------- Utility compat layer ----------
   app.js templates were written with Tailwind-style utilities that were
   never defined. Defined here, theme-aware (classes authored dark-first,
   e.g. text-white / bg-white\/5, map to tokens — NOT literal colors). */
.text-xxs { font-size: 0.6875rem; }
.text-\[10px\] { font-size: 0.6875rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; letter-spacing: -0.01em; }
.text-2xl { font-size: 1.5rem; letter-spacing: -0.02em; }
.text-3xl { font-size: 1.875rem; letter-spacing: -0.025em; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-extrabold { font-weight: 800; }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.leading-relaxed { line-height: 1.65; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-brand { color: var(--color-wordmark); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-accent); }
.text-info { color: var(--color-secondary); }
.text-white { color: var(--color-text-main); }
.text-gray-400 { color: var(--color-text-muted); }
.text-yellow-400 { color: var(--color-accent); }
.hover\:text-white:hover { color: var(--color-text-main); }
.hover\:text-red-400:hover { color: var(--color-danger); }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-white\/5:hover { background-color: var(--bg-glass); }

.bg-transparent { background-color: transparent; }
.bg-white\/5 { background-color: var(--bg-glass); }
.bg-white\/10 { background-color: var(--bg-glass-hover); }
.bg-black\/10 { background-color: var(--bg-glass); }
.bg-black\/20 { background-color: var(--bg-glass); }
.bg-black\/40 { background-color: var(--bg-overlay); }
.bg-black\/80 { background-color: var(--bg-overlay); }
.bg-gray-700 { background-color: var(--bg-inset); }
.bg-gray-800 { background-color: var(--bg-input); }
.bg-gray-900 { background-color: var(--bg-inset); }
.bg-primary\/10 { background-color: rgba(82, 113, 255, 0.10); }
.bg-primary\/20 { background-color: rgba(82, 113, 255, 0.16); }
.bg-success\/20 { background-color: rgba(16, 185, 129, 0.14); }
.bg-warning\/20 { background-color: rgba(245, 158, 11, 0.16); }
.bg-gradient,
.bg-gradient-to-r { background-image: none; background-color: var(--bg-glass); }

.border { border: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-b-2 { border-bottom: 2px solid var(--color-border); }
.border-l-8 { border-left: 8px solid var(--color-border); }
.border-none { border: none; }
.border-dashed { border-style: dashed; }
.border-transparent { border-color: transparent; }
.border-primary { border-color: var(--color-primary); }
.border-danger { border-color: var(--color-danger); }
.border-success { border-color: var(--color-success); }
.border-white { border-color: var(--color-border-strong); }
.border-gray-600, .border-gray-700, .border-gray-800 { border-color: var(--color-border-strong); }
.border-white\/10, .border-white\/5 { border-color: var(--color-border); }
.border-collapse { border-collapse: collapse; }
.rounded { border-radius: var(--radius-md); }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-6 { padding: 1.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.w-16 { width: 4rem; }
.w-32 { width: 8rem; }
.w-96 { width: 24rem; max-width: 100%; }
.w-\[30\%\] { width: 30%; }
.w-\[40\%\] { width: 40%; }
.w-\[500px\] { width: 500px; max-width: 100%; }
.max-w-\[120px\] { max-width: 120px; }
.max-w-\[95\%\] { max-width: 95%; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-full { max-width: 100%; }
.h-8 { height: 2rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.min-h-\[400px\] { min-height: 400px; }

.fixed { position: fixed; }
.sticky { position: sticky; }
.relative { position: relative; }
.block { display: block; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.opacity-50 { opacity: 0.5; }
.grayscale { filter: grayscale(1); }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.accent-primary { accent-color: var(--color-primary); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-md); }
.ring-2 { box-shadow: 0 0 0 2px var(--color-primary); }

.animate-pulse { animation: cf-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes cf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Numeric alignment helper */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: rgba(11, 18, 32, 0.14);
    color: var(--btn-primary-fg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-outline {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-main);
    box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-success {
    background-color: var(--color-success);
    border-color: rgba(11, 18, 32, 0.12);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-sm);
}

.btn-success:hover { filter: brightness(1.07); }

.btn-danger {
    background-color: var(--color-danger);
    border-color: rgba(11, 18, 32, 0.12);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-sm);
}

.btn-danger:hover { filter: brightness(1.07); }

body.dark-mode .btn-success,
body.dark-mode .btn-danger {
    color: #0a1220;
}

.btn-xs { padding: 0.28rem 0.55rem; font-size: 0.75rem; border-radius: var(--radius-sm); }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.85rem 1.8rem; font-size: 1rem; }
.btn-icon { gap: 0.45rem; }
.btn svg { width: 17px; height: 17px; }

/* ---------- Inputs ---------- */
.input-group {
    margin-bottom: 1rem;
    text-align: left;
}

.input-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
}

.input-field {
    width: 100%;
    padding: 0.62rem 0.85rem;
    background-color: var(--bg-input);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-main);
    font-size: 1rem;
    font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.15);
}

.input-field::placeholder {
    color: var(--color-text-faint);
}

select.input-field {
    cursor: pointer;
}

/* Password field with an inline show/hide (eye) toggle */
.password-wrap {
    position: relative;
}
.password-wrap .input-field {
    padding-right: 2.6rem;   /* reserve room so text never sits under the eye */
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.password-toggle:hover {
    color: var(--color-text-main);
    background-color: rgba(127, 127, 127, 0.12);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.password-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* ---------- Cards & panels ---------- */
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.panel {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel-pad { padding: 1.1rem 1.15rem; }

.p-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.p-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.p-sub {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}

/* Page header (route heading pattern) */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.page-head h2,
.page-head .page-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.page-head .page-sub,
.page-sub {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: 3px;
}

/* KPI stat cards — institutional: no icon chips, no sparklines (client rule) */
.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.kpi {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.95rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.kpi .lbl {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi .val {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.kpi .val small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.kpi .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kpi .note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.t-up, .t-good { color: var(--color-success); }
.t-down, .t-bad { color: var(--color-danger); }

/* CII grade pills */
.rate-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 0.14rem 0.5rem;
    border-radius: 6px;
    line-height: 1.4;
}

.rate-a { background: rgba(16, 185, 129, 0.14); color: #0a8a5f; }
.rate-b { background: rgba(82, 113, 255, 0.14); color: #4158d0; }
.rate-c { background: rgba(245, 158, 11, 0.16); color: #b26a04; }
.rate-d { background: rgba(249, 115, 22, 0.16); color: #c2410c; }
.rate-e { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

body.dark-mode .rate-a { color: #4fdca0; }
body.dark-mode .rate-b { color: #aeb9ff; }
body.dark-mode .rate-c { color: #f6c05c; }
body.dark-mode .rate-d { color: #fb9a4b; }
body.dark-mode .rate-e { color: #ff8f92; }

/* Segmented control & filter chips */
.seg {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
}

.seg button {
    border: none;
    background: transparent;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
}

.seg button.on {
    background: var(--color-text-main);
    color: var(--color-bg-card);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 0.32rem 0.62rem;
    background: var(--color-bg-card);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.chip.on {
    background: rgba(82, 113, 255, 0.10);
    border-color: transparent;
    color: var(--color-primary-hover);
}

/* Status dot + label */
.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

/* ---------- Login (modal internals) ---------- */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-login-gradient);
    position: relative;
    overflow: hidden;
}

.bg-shape {
    position: absolute;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.25;
}

.shape-1 {
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--color-primary);
    border-radius: 50%;
}

.shape-2 {
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: var(--color-secondary);
    border-radius: 50%;
}

.login-box {
    width: 100%;
    max-width: 420px;
    z-index: 1;
    background-color: var(--color-bg-card);
    padding: 2rem 1.75rem 1.75rem;
}

.brand-title {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-wordmark);
    margin-bottom: 0.35rem;
}

/* ---------- App shell (dashboard) ---------- */
/* The top bar sits ABOVE the grid at full viewport width (brand at the far-left
   screen edge); sidebar + main start below it. --tb-h is the topbar height. */
:root { --tb-h: 54px; }

.dashboard-grid {
    display: grid;
    /* Sidebar width is user-adjustable (drag handle) and persisted; the CSS
       variable is set from localStorage before first paint. */
    grid-template-columns: var(--cf-sb-w, 248px) 1fr;
    min-height: calc(100vh - var(--tb-h));
}

/* Drag handle on the sidebar's right edge (desktop). Fixed-positioned so the
   sidebar's own scroll doesn't move it; tracks the width variable. */
.sb-resizer {
    position: fixed;
    top: var(--tb-h);
    left: calc(var(--cf-sb-w, 248px) - 3px);
    width: 7px;
    height: calc(100vh - var(--tb-h));
    cursor: col-resize;
    z-index: 70;
    background: transparent;
}
.sb-resizer:hover,
body.sb-resizing .sb-resizer {
    background: linear-gradient(to right, transparent 2px, var(--color-primary) 2px, var(--color-primary) 4px, transparent 4px);
}
body.sb-resizing { cursor: col-resize; user-select: none; }

/* Sidebar pull tab (desktop): rides the sidebar boundary — the screen's left
   edge when collapsed — and stays invisible until the mouse comes to it (or
   hovers the sidebar/resizer). Click toggles open/closed. */
.sb-edge-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: calc(var(--cf-sb-w, 248px) - 1px);
    width: 20px;
    height: 76px;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-left: none;
    border-radius: 0 9px 9px 0;
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 75;
    opacity: 0;
    transition: opacity 0.18s ease, left 0.18s ease, color 0.15s;
}
.sb-edge-toggle:hover,
.sb-edge-toggle:focus-visible,
.sb-resizer:hover ~ .sb-edge-toggle,
.sidebar:hover ~ .sb-edge-toggle {
    opacity: 1;
    color: var(--color-primary);
}
.sb-edge-toggle svg { width: 14px; height: 14px; }
body.sb-collapsed .sb-edge-toggle { left: 0; }
body.sb-collapsed .sb-edge-toggle svg { transform: rotate(180deg); }
@media (max-width: 768px) { .sb-edge-toggle { display: none; } }

/* Desktop collapse toggle (the top-bar hamburger). Mobile (≤768px) keeps its
   off-canvas drawer behaviour instead — these rules only apply on desktop. */
@media (min-width: 769px) {
    body.sb-collapsed .dashboard-grid { grid-template-columns: 1fr; }
    body.sb-collapsed .sidebar { display: none; }
    body.sb-collapsed .sb-resizer { display: none; }
}
@media (max-width: 768px) {
    .sb-resizer { display: none; }
}

.sidebar {
    background-color: var(--bg-header);
    border-right: 1px solid var(--color-border);
    padding: 1.15rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--tb-h);  /* starts below the full-width top bar */
    height: calc(100vh - var(--tb-h));
    overflow-y: auto;
    z-index: 60;
}

/* Cobalt wordmark, no logo mark (client rule) */
.sb-wordmark {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--color-wordmark);
    line-height: 1.1;
    padding: 0.35rem 0.6rem 0;
}

.sb-version {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 2px 0.65rem 0;
    margin-bottom: 1.1rem;
}

.sb-group-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    padding: 0.85rem 0.65rem 0.25rem;
    user-select: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.52rem 0.65rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    margin-bottom: 1px;
    transition: background-color 0.13s, color 0.13s;
    font-size: 0.875rem;
    font-weight: 500;
}

.nav-link span { display: none; }

.nav-link:hover {
    background-color: var(--bg-glass);
    color: var(--color-text-main);
    box-shadow: none;
}

.nav-link.active {
    background-color: rgba(82, 113, 255, 0.10);
    color: var(--color-primary-hover);
    font-weight: 600;
    box-shadow: inset 2px 0 0 0 var(--color-primary);
}

body.dark-mode .nav-link.active {
    color: var(--color-primary);
}

.sb-user-card {
    background: var(--bg-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.6rem;
}

/* Topbar */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 54px;
    padding: 0 1.5rem;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.tb-route {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Equal flexible side blocks keep the search box at the exact topbar center;
   when space runs short the search is pushed (never overlapped). */
.tb-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
}

/* Brand block pinned in the top bar — moved out of the sidebar so the wordmark
   and version stay visible when the sidebar is collapsed or drawn away. */
.tb-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    cursor: pointer;
    flex: none;
    user-select: none;
}
.tb-brand-name {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--color-wordmark);
    white-space: nowrap;
}
.tb-brand-version {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Mobile: sides shrink to content so the search box can take the full row */
@media (max-width: 640px) {
    .tb-left,
    .tb-meta { flex: 0 0 auto; }
    .tb-brand-name { font-size: 1rem; }
}

.tb-meta {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tb-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    padding: 0;
}

.tb-btn:hover { color: var(--color-text-main); border-color: var(--color-primary); }
.tb-btn svg { width: 16px; height: 16px; }

/* Mobile-only drawer opener; desktop toggles the sidebar via the left-edge
   pull tab (.sb-edge-toggle) instead. Shown ≤768px by the mobile block below. */
.tb-menu-btn { display: none; }

/* Inline top-bar search box (replaces the old centered modal). The results drop down
   directly under the box; the whole thing lives in the top bar so search is always
   visible and larger, never a separate popup window. */
.tb-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 380px;
    min-width: 120px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.tb-search:hover { border-color: var(--color-primary); }
.tb-search:focus-within {
    color: var(--color-text-main);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.12);
}

.tb-search-ic { width: 15px; height: 15px; flex: none; }

.tb-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.1rem 0;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--color-text-main);
}
.tb-search-input::placeholder { color: var(--color-text-muted); opacity: 1; }

.tb-search-kbd { flex: none; margin-left: 2px; }

.tb-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(480px, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 60;
}
.tb-search-results.hidden { display: none; }
.tb-search-results .search-hint {
    flex-direction: column;
    gap: 8px;
    border-top: none;
    padding: 12px 14px;
}

@media (max-width: 900px) {
    .tb-search-kbd { display: none; }
    .tb-search { flex-basis: 260px; }
}
@media (max-width: 768px) {
    .tb-search { flex-basis: 220px; min-width: 120px; }
    #tb-clock { white-space: nowrap; }
}
@media (max-width: 640px) {
    /* Reclaim room so search + controls stay on one line: the dual UTC/KST clock and the
       route label are dropped (the page's own H2 already says where you are). */
    #tb-clock { display: none; }
    .tb-route { display: none; }
    .tb-search { flex: 1 1 auto; margin-left: 0; }
}

/* Data provenance caption under charts/tables (terminal signature) */
.p-src {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    margin-top: 12px;
    padding-top: 9px;
    letter-spacing: 0.02em;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 55;
}

.main-content {
    background-color: var(--color-bg-dark);
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.main-content > #content-area {
    flex: 1 0 auto;
    padding: 1.5rem 1.75rem;
    min-width: 0;
}

.main-content > [data-site-footer] {
    padding: 0 1.75rem;
}

/* ---------- Alerts ---------- */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--color-danger);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--color-success);
}

/* ---------- Toast ---------- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast-show { opacity: 1; transform: translateX(0); }
.toast-hide { opacity: 0; transform: translateX(400px); }

.toast-icon {
    font-size: 1.125rem;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
}

.toast-message {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.45;
}

.toast-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toast-close:hover { color: var(--color-text-main); }

.toast-success { border-left: 3px solid var(--color-success); }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error { border-left: 3px solid var(--color-danger); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-warning { border-left: 3px solid var(--color-accent-raw); }
.toast-warning .toast-icon { color: var(--color-accent); }
.toast-info { border-left: 3px solid var(--color-primary); }
.toast-info .toast-icon { color: var(--color-primary); }

/* ---------- Loading ---------- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.loading-spinner { text-align: center; }

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 14px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.skeleton-container { padding: 1rem; }

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-glass-hover) 50%, var(--bg-glass) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-line:last-child { width: 60%; }

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Validation ---------- */
.input-valid { border-color: var(--color-success) !important; }
.input-invalid { border-color: var(--color-danger) !important; }

.input-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    pointer-events: none;
}

.input-valid + .input-validation-icon { color: var(--color-success); }
.input-invalid + .input-validation-icon { color: var(--color-danger); }

.input-error-message {
    color: var(--color-danger);
    font-size: 0.8125rem;
    margin-top: 4px;
    display: block;
}

.password-strength { margin-top: 8px; font-size: 0.8125rem; }

.password-strength-bar {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.password-strength-fill {
    height: 100%;
    transition: width 0.3s, background-color 0.3s;
}

.strength-very-weak .password-strength-fill { width: 20%; background-color: var(--color-danger); }
.strength-weak .password-strength-fill { width: 40%; background-color: #f97316; }
.strength-fair .password-strength-fill { width: 60%; background-color: var(--color-accent-raw); }
.strength-good .password-strength-fill { width: 80%; background-color: #84cc16; }
.strength-strong .password-strength-fill { width: 100%; background-color: var(--color-success); }

/* ---------- Data tables ---------- */
.admin-table-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.875rem;
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-bg-card);
}

.data-table th {
    padding: 0.6rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background-color: var(--bg-glass); }

.cell-numeric {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.cell-error {
    color: var(--color-danger);
    font-weight: bold;
    background: rgba(239, 68, 68, 0.08);
}

.cell-empty {
    color: var(--color-text-faint);
    font-style: italic;
}

/* Generic table hygiene inside cards (templates use bare <table>) */
.card table th {
    color: var(--color-text-muted);
}

/* ---------- Board list (zoom-adaptive layout + image thumbnails) ----------
   table-layout:fixed keeps columns stable and wraps long bilingual titles
   instead of blowing the table past the card; the wrap adds an x-scroll
   safety net. Breakpoints track browser zoom (zoom shrinks the CSS viewport),
   so the row reflows sensibly as the user zooms in/out. */
.board-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.875rem;
}
.board-table th,
.board-table td { padding: 0.6rem 0.5rem; vertical-align: middle; text-align: left; }
.board-table thead th {
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
.board-table tbody tr { border-bottom: 1px solid var(--color-border); }
.board-table tbody tr:last-child { border-bottom: none; }

.board-table .bt-col-no      { width: 3.2rem; text-align: right; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.board-table .bt-col-author  { width: 8.5rem; }
.board-table .bt-col-date    { width: 10rem; color: var(--color-text-muted); white-space: nowrap; }
.board-table .bt-col-views   { width: 4.5rem; text-align: center; color: var(--color-text-muted); }
.board-table .bt-col-replies { width: 4.5rem; text-align: center; }
.board-table .bt-col-action  { width: 6rem;  text-align: center; }

/* Admin-pinned notices sit above the list with a badge and a subtle tint */
.board-notice-row { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.board-notice-row .bt-title-text { font-weight: 700; }
.bt-notice-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6875rem;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    vertical-align: 1px;
}

.bt-title-wrap { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.bt-title-main { flex: 1; min-width: 0; }
.bt-title-text { display: block; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.bt-meta { display: none; margin-top: 0.2rem; font-size: 0.75rem; color: var(--color-text-muted); }

.bt-thumbs { display: flex; flex: 0 0 auto; gap: 0.25rem; align-items: center; }
.bt-thumb {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: var(--bg-inset);
    display: block;
}
.bt-thumb-more {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 44px; padding: 0 0.35rem;
    font-size: 0.6875rem; font-weight: 600;
    color: var(--color-text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Featured news picks: up to 3 admin-designated cards above the board list */
.board-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.card.bf-card {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card.bf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 18px rgba(2, 8, 23, 0.12)); }
.bf-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: var(--bg-inset);
    border-bottom: 1px solid var(--color-border);
}
.bf-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    color: var(--color-text-muted);
}
.bf-body { padding: 0.7rem 0.85rem; }
.bf-title {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bf-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-text-muted); }
@media (max-width: 760px) {
    .board-featured-grid { grid-template-columns: 1fr; }
    .bf-img { height: 120px; }
}

/* Detail-view image gallery (previews render inline; click opens full image) */
.board-img-link { display: inline-block; line-height: 0; }
.board-img-preview {
    max-width: 200px; max-height: 200px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    object-fit: cover;
    cursor: zoom-in;
}

/* Narrow / zoomed-in: drop the Author + Date columns, surface them under the title */
@media (max-width: 760px) {
    .board-table .bt-col-author,
    .board-table .bt-col-date { display: none; }
    .board-table .bt-meta { display: block; }
}
/* Very narrow / heavy zoom-in: also drop the Action button (whole row is clickable) */
@media (max-width: 480px) {
    .board-table .bt-col-action,
    .board-table .bt-col-views { display: none; }
    .board-table .bt-col-replies { width: 3.2rem; }
    .bt-thumb { width: 38px; height: 38px; }
    .bt-thumb-more { height: 38px; }
}

/* ---------- Accordion ---------- */
.section-header {
    background-color: var(--bg-glass);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.section-header:hover { background-color: var(--bg-glass-hover); }

.section-content {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border-strong);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

.bg-primary { background-color: rgba(82, 113, 255, 0.13); color: #4158d0; }
.bg-secondary { background-color: rgba(25, 169, 221, 0.14); color: #0e7fa8; }
.bg-danger { background-color: rgba(239, 68, 68, 0.13); color: #b91c1c; }
.bg-success { background-color: rgba(16, 185, 129, 0.14); color: #0a8a5f; }
.bg-warning { background-color: rgba(245, 158, 11, 0.16); color: #b26a04; }

body.dark-mode .bg-primary { color: #aeb9ff; }
body.dark-mode .bg-secondary { color: #7fd6f5; }
body.dark-mode .bg-danger { color: #ff8f92; }
body.dark-mode .bg-success { color: #4fdca0; }
body.dark-mode .bg-warning { color: #f6c05c; }

/* ---------- Global search (Ctrl/Cmd+K) ---------- */
.search-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(3px);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}

.search-modal {
    width: 100%;
    max-width: 580px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-bottom: 1px solid var(--color-border);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.85rem 0;
    font-size: 1rem;
    color: var(--color-text-main);
    font-family: var(--font-sans);
}

.search-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    padding: 4px 8px;
}

.search-close:hover { color: var(--color-text-main); }

.search-results {
    max-height: 46vh;
    overflow-y: auto;
    padding: 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--bg-glass);
}

.search-result-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: rgba(82, 113, 255, 0.10);
    color: var(--color-primary);
    font-size: 0.875rem;
    flex: none;
}

.search-result-content { min-width: 0; flex: 1; }

.search-result-title {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: rgba(82, 113, 255, 0.18);
    color: inherit;
    border-radius: 2px;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-type {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
    flex: none;
}

.search-hint {
    display: flex;
    gap: 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.search-hint kbd,
kbd {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.06rem 0.35rem;
    background: var(--bg-glass);
    color: var(--color-text-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 264px;
        transform: translateX(-102%);
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: var(--shadow-md);
        display: flex;
        height: 100vh;
        height: 100dvh;
    }

    body.sb-open .sidebar { transform: none; }
    body.sb-open .sidebar-backdrop { display: block; }

    .tb-menu-btn { display: grid; }

    .main-content > #content-area { padding: 1rem; }
    .main-content > [data-site-footer] { padding: 0 1rem; }

    .kpis { grid-template-columns: repeat(2, 1fr); }

    .toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

    .toast { transform: translateY(-100px); }
    .toast-show { transform: translateY(0); }
}

@media (max-width: 1180px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Date-picker icon: invert only on dark backgrounds */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 1000;
}

/* Equal flexible side blocks keep the nav at the exact viewport center;
   when space runs short the nav is pushed (never overlapped). */
.landing-header > :first-child,
.landing-header > :last-child {
    flex: 1 1 0;
    min-width: 0;
}

.landing-header > :last-child {
    justify-content: flex-end;
}

.landing-main {
    padding-top: 68px;
}

.landing-section {
    padding: 96px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 90px;
}

/* Hero */
.section-hero {
    min-height: 78vh;
    text-align: center;
    align-items: center;
    background: var(--color-hero-gradient);
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin-bottom: 0.4rem;
    background: var(--text-hero-title);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
    text-wrap: balance;
}

.hero-subtitle {
    /* Brand line sits BELOW the headline in the hierarchy — the message leads,
       the wordmark supports (it is already in the header). */
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-top: 0.35rem;
    color: var(--text-hero-subtitle);
    text-shadow: none;
    z-index: 1;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.16;
    z-index: 0;
}

.hero-chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

body.dark-mode .hero-chart { opacity: 0.75; }

.hero-shape-1 {
    top: -12%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: var(--color-secondary);
}

.hero-shape-2 {
    bottom: -12%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: var(--color-primary);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.04em; /* 0.15em tracked-out Hangul reads loose, not deliberate */
    text-transform: uppercase;
    color: var(--color-secondary-hover);
    font-weight: 600;
    margin-bottom: 1.4rem;
    z-index: 1;
}

body.dark-mode .hero-eyebrow { color: var(--color-secondary); }

.hero-eyebrow svg { width: 15px; height: 15px; }

.hero-lead {
    max-width: 620px;
    margin: 1.6rem auto 0;
    font-size: clamp(1rem, 2.4vw, 1.14rem);
    color: var(--color-text-muted);
    line-height: 1.7;
    z-index: 1;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-top: 2.3rem;
    z-index: 1;
}

.hero-scroll {
    margin-top: 3rem;
    color: var(--color-text-faint);
    display: inline-flex;
    z-index: 1;
    animation: hero-bounce 2s ease-in-out infinite;
}

.hero-scroll svg { width: 26px; height: 26px; }

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

/* Section scaffolding */
.section-title {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    text-align: center;
    margin-bottom: 2.75rem;
    color: var(--color-text-main);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.section-title svg {
    width: 24px;
    height: 24px;
    vertical-align: -3px;
    margin-right: 0.5rem;
    color: var(--color-secondary);
}

.content-block {
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
}

/* Brand mark (landing/login keep a small gradient ship mark) */
.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-brand);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(82, 113, 255, 0.45);
    flex: none;
}

.brand-logo svg { width: 20px; height: 20px; }

/* Landing header wordmark — identical treatment to the app sidebar (.sb-wordmark):
   cobalt, heavy, tight tracking, NO logo mark (client rule) */
.brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-wordmark);
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.footer-wordmark {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-wordmark);
    letter-spacing: -0.03em;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.landing-nav a {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    position: relative;
}

.landing-nav a:hover { color: var(--color-text-main); text-shadow: none; }

.landing-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.2s;
}

.landing-nav a:hover::after { width: 100%; }

/* Feature cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
}

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    background: rgba(82, 113, 255, 0.10);
    color: var(--color-primary);
}

body.dark-mode .feature-icon { background: rgba(131, 153, 255, 0.14); }

.feature-icon svg { width: 21px; height: 21px; }

.feature-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.45rem;
    color: var(--color-text-main);
    letter-spacing: -0.015em;
}

.feature-card p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* Vision */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start; /* 1-line vision card must not stretch to match the 7-line goals card */
}

.vision-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.1rem;
    box-shadow: var(--shadow-sm);
}

.vision-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.vision-head .feature-icon { margin-bottom: 0; }

.vision-item h3 {
    color: var(--color-text-main);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.vision-item p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
}

/* Standards */
.standards-grid { display: grid; gap: 2rem; }

.standard-category { margin-bottom: 2rem; }

.standard-category h3 {
    font-size: 1.25rem;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border-strong);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}

.standard-list { list-style: none; }

.standard-list li {
    margin-bottom: 0.7rem;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.standard-code {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-main);
    text-decoration: none;
    margin-right: 0.5rem;
}

/* Contact */
.contact-container {
    max-width: 760px;
    margin: 0 auto;
    background: var(--color-bg-card);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Collapse the two-column contact form on narrow screens; !important beats the
   inline grid-column:span 2 on the full-width fields so they don't spawn an
   implicit second track in the single-column layout. */
@media (max-width: 640px) {
    .contact-container {
        padding: 1.5rem;
    }

    #contact-form {
        grid-template-columns: 1fr;
    }

    #contact-form > div {
        grid-column: auto !important;
    }
}

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    padding: 16px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 100%;
    max-width: 440px;
    transform: scale(0.97);
    transition: transform 0.25s;
    position: relative;
}

.modal-overlay.active .modal-content { transform: scale(1); }

/* The privacy modal's .modal-content is a bare sizing wrapper — unlike the login modal,
   whose inner .login-box.card supplies the panel. Without a surface of its own it renders
   transparent, so the page behind (e.g. the open register form) bleeds through and the text
   loses all contrast. Give it an opaque card surface with padding and a capped, scrollable
   height. */
#privacy-modal .modal-content {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2.25rem;
    max-height: 90vh;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover { color: var(--color-text-main); }

/* Login modal: the visible card (.login-box) is 420px but its wrapper (.modal-content)
   was 440px and left-aligned, so the absolute close button — positioned against the
   wrapper — hung off the card's right edge. Match the wrapper to the card so the X lands
   balanced in the card's top-right corner. */
#login-modal .modal-content { max-width: 420px; }

/* Register form: consent checkboxes have multi-line labels. `items-center` floated the
   box in the vertical middle of the wrapped text; align it to the FIRST line instead so
   the list reads balanced. */
#register-form label.items-center { align-items: flex-start; }
#register-form label.items-center input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }

/* Register form: two-column layout. Single-column, the dialog ran taller than the
   viewport (users had to zoom out). When the register form is the visible one, widen
   the modal and place the six text fields on a 2-col grid — consents, submit and the
   sign-in link span the full width. Falls back gracefully (narrow single column) in
   engines without :has(). */
#login-modal .modal-content:has(#register-form:not(.hidden)) { max-width: 720px; }
#login-modal .modal-content:has(#register-form:not(.hidden)) .login-box { max-width: none; }
#register-form:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: start;
}
#register-form > .input-group.text-left,   /* consent checkbox block */
#register-form > button,
#register-form > .mt-4 { grid-column: 1 / -1; }
/* Password + its confirmation sit on ONE row: the phone field spans the full
   width so the pair starts a fresh row together. */
#register-form:not(.hidden) .input-group:has(#reg-phone) { grid-column: 1 / -1; }
/* Keep the whole dialog reachable on short screens */
#login-modal .modal-content { max-height: 92vh; overflow-y: auto; }
@media (max-width: 640px) {
    #register-form:not(.hidden) { grid-template-columns: 1fr; }
}

/* ---------- Footers ---------- */
.landing-footer {
    text-align: center;
    padding: 3rem 5% 2.5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.landing-footer .brand-logo { width: 34px; height: 34px; }
.landing-footer .brand-logo svg { width: 18px; height: 18px; }

.footer-copy { font-size: 0.875rem; font-weight: 500; }
.footer-tag { font-size: 0.875rem; opacity: 0.75; }

.footer-links,
.footer-company {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 0.8rem;
    max-width: 680px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer-links a,
.footer-company a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-links a:hover,
.footer-company a:hover { color: var(--color-primary); }

.footer-links a.footer-strong {
    color: var(--color-text-main);
    font-weight: 600;
}

.footer-sep { color: var(--color-border-strong); user-select: none; }

/* Full footer inside the logged-in shell: breathing room above the border */
.main-content .landing-footer { margin-top: 2rem; }

.app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 2rem;
    padding: 1rem 0 1.1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.app-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
}

.app-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.app-footer a:hover { color: var(--color-primary); }

/* ---------- Standalone content pages ---------- */
.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.legal-header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2rem;
}

.legal-back {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

.legal-back:hover { color: var(--color-primary); }

.legal-header h1 {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.legal-updated {
    margin-top: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.legal-content {
    flex: 1 0 auto;
    color: var(--color-text-main);
    line-height: 1.7;
}

.legal-content section { margin-bottom: 2rem; }

.legal-content h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}

.legal-content p {
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 0.75rem 1.25rem;
    color: var(--color-text-muted);
}

.legal-content li { margin-bottom: 0.4rem; }

.legal-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-content a:hover { text-decoration: underline; }

/* Anchor-styled buttons keep their own foreground — the generic content-link
   color above would otherwise paint primary-on-primary (invisible label). */
.legal-content a.btn-primary { color: var(--btn-primary-fg); }
.legal-content a.btn:hover { text-decoration: none; }

.legal-content strong { color: var(--color-text-main); }

.legal-note {
    background: var(--bg-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.legal-fill {
    color: var(--color-accent);
    font-style: italic;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.legal-table th {
    width: 34%;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.legal-table td { color: var(--color-text-main); }

.legal-cta { margin-top: 1rem; }
.legal-cta .btn { margin-top: 0.5rem; }

.cookie-pref {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.5rem 1rem;
}

.cookie-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cookie-row:last-of-type { border-bottom: none; }
.cookie-row small { color: var(--color-text-muted); }
.cookie-pref .btn { margin: 1rem 0 0.5rem; }

.cookie-msg {
    color: var(--color-success);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* ---------- Motion ---------- */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: no-preference) {
    [data-hero] {
        opacity: 0;
        transform: translateY(18px);
        animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .hero-eyebrow[data-hero] { animation-delay: 0.05s; }
    .hero-title[data-hero] { animation-delay: 0.15s; }
    .hero-subtitle[data-hero] { animation-delay: 0.25s; }
    .hero-lead[data-hero] { animation-delay: 0.35s; }
    .hero-actions[data-hero] { animation-delay: 0.45s; }
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.js-reveal .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 820px) {
    .landing-nav { display: none; }
    .landing-header { padding: 0 4%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-scroll { animation: none; }

    .js-reveal .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Mobile responsiveness — dashboard SPA (자율형/responsive pass)
   The SPA renders most grids with INLINE grid-template-columns,
   which beats any class rule — hence the !important overrides,
   the same convention the landing contact form uses at 640px.
   ============================================================ */
/* Calculator fuel table — zoom-adaptive at EVERY width, not just mobile: EU mode
   renders 8 input columns, which crush into unusable slivers whenever the content
   column narrows (zoom-in, resized sidebar). Give the table a real minimum width
   and let its card scroll horizontally instead. */
#calc-form .card { overflow-x: auto; }
#calc-form table { min-width: 680px; }

/* Long resource codes/descriptions/URLs wrap instead of pushing the card wide */
#content-area .standard-code { overflow-wrap: anywhere; }

@media (max-width: 768px) {
    /* Wide tables: let cards scroll horizontally instead of clipping.
       (Several table cards carry inline overflow:hidden for corner
       rounding — override just the x axis.) */
    #content-area .card { overflow-x: auto !important; }
    #content-area .data-table { min-width: 560px; }
    .admin-table-container { overflow-x: auto; }

    /* Calculator result actions (PDF / Email / Excel) wrap to rows
       instead of cramming into one line. */
    #calc-result .flex { flex-wrap: wrap; }
    #calc-result .btn { min-width: 130px; }
}

/* Deep zoom / phone width: the top bar pieces (brand + search + controls) must
   shrink instead of pushing the page wider — the search box gives up its floor. */
@media (max-width: 480px) {
    .app-topbar { padding: 0 0.75rem; gap: 8px; }
    .tb-left { gap: 8px; }
    .tb-meta { gap: 6px; }
    .tb-search { min-width: 0; margin-left: 0; }
}

@media (max-width: 640px) {
    /* Collapse SPA grids to one column: target both the utility class and
       any inline grid template so the inline styles cannot win. KPI tiles
       (.kpis) and auto-fit grids already collapse on their own. */
    #content-area .grid,
    #content-area div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #content-area .col-span-2 { grid-column: auto !important; }
}

/* ---------- Glossary: hover explanations for domain abbreviations ---------- */
.gl-term {
    border-bottom: 1px dotted var(--color-text-muted);
    cursor: help;
}
body.gl-off .gl-term {
    border-bottom: none;
    cursor: inherit;
}
.gl-tip {
    position: fixed;
    z-index: 3000;
    max-width: 300px;
    background: var(--color-bg-card);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(2, 8, 23, 0.18);
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.gl-tip.show { opacity: 1; }
.gl-tip-full { font-weight: 700; margin-bottom: 2px; }
.gl-tip-desc { color: var(--color-text-muted); }

/* ============================================================
   PRODUCT TYPE SYSTEM (2026-07) — base-role rules
   Scale: 11 / 12 / 13 / 14 / 16 / 18 / 20 / 24 / 26(display) / 30px.
   Every font-size above is snapped to this scale; these rules give
   the roles that previously fell back to browser defaults a home.
   ============================================================ */

/* Korean must never break mid-word; long tokens still wrap. */
body { word-break: keep-all; overflow-wrap: break-word; }

/* Form controls inherit the app scale instead of the 13.33px UA default
   (admin tabs, language toggle, bare selects). Component classes override. */
button, select { font-size: 0.875rem; }

/* Card/section title role: one size regardless of which utility the
   markup carries. Page titles (1.5rem) stay a clear step above. */
.card h3 { font-size: 1rem; font-weight: 700; }

/* Data tables: numerals align in columns. */
.data-table td { font-variant-numeric: tabular-nums; }

/* Segmented control (calculator CII/EU mode switch). */
.seg { display: inline-flex; background: var(--bg-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg .seg-btn { border: none; background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: 0.875rem; padding: 0.4rem 1rem; border-radius: calc(var(--radius-md) - 3px); cursor: pointer; }
.seg .seg-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 4px rgba(82, 113, 255, 0.35); }

/* --- Product-level responsive fixes (2026-07) --- */

/* The language toggle carries text ("Eng"/"Kor") but .tb-btn is a fixed 34px icon
   square, so the label clipped to a sliver on narrow screens. Let it size to content. */
.tb-btn[data-lang-toggle] { width: auto; min-width: 34px; padding: 0 9px; flex: none; font-weight: 600; }

/* Dual UTC/KST clock: never wrap mid-value; below 1100px there is no honest room
   for two timestamps next to search + controls, so it steps aside entirely. */
#tb-clock { white-space: nowrap; }
@media (max-width: 1100px) { #tb-clock { display: none; } }

/* Every data table inside a content card scrolls horizontally on phones instead of
   squashing its headers into one-character-per-line columns (trading order book,
   trade history, RFQ tables — same treatment .data-table already gets). */
@media (max-width: 768px) {
    #content-area .card table { min-width: 560px; }
}