/* ==========================================================================
   2026-01-27 [Sprint 10]
   foundation.css
   --------------------------------------------------------------------------
   역할 (KR):
   - 전역 디자인 토큰(색/그림자/라운드/간격/레이아웃)을 정의하는 "기반 레이어"
   - 하드코딩 색/값 제거의 종착지: 모든 색/표현은 여기 토큰을 통해서만 사용
   - 다크모드 적용 시: 여기 토큰만 교체하면 전체 UI가 자연스럽게 전환되게 설계
   --------------------------------------------------------------------------
   Role (EN):
   - Defines global design tokens (colors/shadows/radius/layout primitives)
   - Single source of truth for styling values (removes hard-coded colors)
   - Future dark mode: swap tokens only, the rest follows automatically
   ========================================================================== */

:root{
    /* ========== Surfaces / Backgrounds ========== */
    --bg: #F9FAFB;                         /* Page background */
    --surface: #ffffff;                    /* Primary surface (cards/panels/buttons) */

    /* 2026-01-27 [Sprint 10] Secondary surface (used for subtle hover backgrounds) */
    --surface-2: #f3f4f6; /* Tailwind gray-100 equivalent */

    --surface-glass: rgba(255,255,255,.6); /* Glassy surface (kicker, etc.) */

    /* ========== Text ========== */
    --text: #111315;                       /* Primary text */
    --text-strong: #2c2f33;                /* Slightly stronger text (used in quote body) */
    --muted: #6b7075;                      /* Secondary text */

    /* ======================================================================
   2026-02-03 [Sprint 10]
   Extra text tone tokens (list/table UI)
   - Keep light UI identical to Tailwind gray-700 / gray-400 느낌
   ====================================================================== */
    --text-sub: #374151;     /* Tailwind gray-700 */
    --muted-weak: #9ca3af;   /* Tailwind gray-400 */


    /* ========== Borders ========== */
    --border: #e7e9ec;                     /* Default border */
    --border-hover: #dfe3e8;               /* Hover border (was hard-coded) */
    --dot-border: #e1e3e6;                 /* Traffic dot border (was hard-coded) */

    /* ========== Brand ========== */
    --brand: #44474A;                      /* Wynlo core brand */
    --brand-2: #5a5e62;                    /* Secondary brand */
    --brand-soft: rgba(68,71,74,.04);      /* Brand-tinted subtle background */

    /* ========== Shadows ========== */
    --shadow: 0 18px 50px rgba(17,19,21,.08);
    --shadow-sm: 0 10px 26px rgba(17,19,21,.08);
    --shadow-card: 0 10px 28px rgba(17,19,21,.06); /* Cards in features */

    /* ========== Radius scale ========== */
    --radius-lg: 22px;
    --radius-md: 16px;

    /* ========== Layout ========== */
    --max: 1100px;

    /* ========== Landing-specific visuals (tokenized) ========== */
    --hero-glow: radial-gradient(circle at 30% 30%, rgba(68,71,74,.10), rgba(68,71,74,0) 70%);

    --panel-top-bg: linear-gradient(
            180deg,
            rgba(255,255,255,.9),
            rgba(255,255,255,.6)
    );

    --traffic-dot-bg: #e9ebee;             /* Traffic dots fill (was hard-coded) */
    --bar-bg: #f1f3f5;                     /* Progress bar background (was hard-coded) */

    --bar-fill: linear-gradient(
            90deg,
            rgba(68,71,74,.85),
            rgba(68,71,74,.45)
    );

    --cta-bg: linear-gradient(
            180deg,
            rgba(68,71,74,.06),
            rgba(68,71,74,.02)
    );

    /* ==========================================================================
       2026-01-27 [Sprint 10]
       Auth-only tokens (login/signup background + text tone)
       - Scope: used only by auth pages via Tailwind classes (bg-wauthbg, text-wauth*)
       ========================================================================== */
    --auth-bg: #F9F9F9;                 /* warm light gray (beige-ish) */
    --auth-text: #232629;               /* charcoal (not pure black) */
    --auth-muted: rgba(35, 38, 41, .72);

    /* ADD: Quote detail "Change Status" 버튼(blue-600/700) 토큰화 - UI 동일 유지 */
    --wynlo-accent-bg: #2563eb;         /* Tailwind blue-600 */
    --wynlo-accent-hover-bg: #1d4ed8;   /* Tailwind blue-700 */
    --wynlo-accent-text: #ffffff;
    --wynlo-accent-border: #2563eb;

    /* Soft background for readonly / disabled-like inputs */
    --app-bg-soft: #f3f4f6;

    /* ==========================================================================
       2026-02-02 [Sprint 10]
       Semantic tokens for components (buttons, badges, inputs)
       - Keep current light UI exactly the same
       - Dark mode will override only these tokens
       ========================================================================== */

    /* Inputs */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-text: var(--text);
    --input-placeholder: var(--muted);

    /* "Soft" button (current target: transparent + border + hover surface-2) */
    --btn-bg: transparent;              /* ✅ 기본 배경 투명(주변 배경과 같게) */
    --btn-text: var(--text);
    --btn-border: var(--border);
    --btn-hover-bg: var(--surface-2);   /* ✅ hover 때만 살짝 채움 */
    --btn-hover-border: var(--border-hover);

    /* Status badge */
    --badge-radius: 10px;

    /* DRAFT (gray-100 / gray-700 / gray-200) */
    --badge-draft-bg: var(--surface-2);
    --badge-draft-text: #374151;   /* tailwind gray-700 */
    --badge-draft-border: #e5e7eb; /* tailwind gray-200 */

    /* SENT (blue-50 / blue-700 / blue-200) */
    --badge-sent-bg: rgba(59,130,246,.10);   /* blue tint */
    --badge-sent-text: #1d4ed8;              /* blue-700 */
    --badge-sent-border: rgba(59,130,246,.25);

    /* PAID/APPROVED (green-50 / green-700 / green-200) */
    --badge-paid-bg: rgba(16,185,129,.10);
    --badge-paid-text: #047857;              /* green-700 */
    --badge-paid-border: rgba(16,185,129,.25);

    /* CANCELLED (red-50 / red-700 / red-200) */
    --badge-cancel-bg: rgba(239,68,68,.10);
    --badge-cancel-text: #b91c1c;            /* red-700 */
    --badge-cancel-border: rgba(239,68,68,.25);

    /* ======================================================================
   2026-02-03 [Sprint 10]
   Danger button tokens (delete actions)
   - Keep light UI identical to: border-red-300 + text-red-600 + hover:bg-red-50
   ====================================================================== */
    --danger-border: #fca5a5; /* Tailwind red-300 */
    --danger-text: #dc2626;   /* Tailwind red-600 */
    --danger-hover-bg: rgba(239, 68, 68, .10); /* red-50 느낌 */


    /* ======================================================================
   2026-02-02 [Sprint 10]
   Primary button tokens (Settings "Save" button)
   - Keep current UI: gray-900 button + gray-800 hover
   - Dark mode will override these tokens later
   ====================================================================== */
    --btn-primary-bg: #111827;         /* Tailwind gray-900 */
    --btn-primary-hover-bg: #1f2937;   /* Tailwind gray-800 */
    --btn-primary-text: #ffffff;
    --btn-primary-border: #111827;

    /* ======================================================================
       2026-02-02 [Sprint 10]
       Dashboard / App semantic tokens
       - Light mode 결과(지금 화면) 유지
       - Dark mode에서는 여기만 갈아끼우면 됨
       ====================================================================== */

    /* Table head + hover */
    --table-head-bg: var(--surface-2);
    --row-hover-bg: var(--surface-2);

    /* Pills (badges) */
    --pill-radius: 10px;

    /* Muted pill (gray-50/gray-700/gray-200 느낌 유지) */
    --pill-muted-bg: rgba(17, 19, 21, .04);   /* 사실상 gray-50 느낌 */
    --pill-muted-border: rgba(17, 19, 21, .10);/* gray-200 근처 */
    --pill-muted-text: #374151;

    /* Info pill (blue-50/blue-700/blue-200 느낌 유지) */
    --pill-info-bg: rgba(59,130,246,.10);
    --pill-info-border: rgba(59,130,246,.25);
    --pill-info-text: #1d4ed8;

    /* Success pill (emerald/green tint) */
    --pill-success-bg: rgba(16,185,129,.10);
    --pill-success-border: rgba(16,185,129,.25);
    --pill-success-text: #047857;

    /* Danger pill (red tint) */
    --pill-danger-bg: rgba(239,68,68,.10);
    --pill-danger-border: rgba(239,68,68,.25);
    --pill-danger-text: #b91c1c;


    /* Mobile error toast */
    --mobile-error-toast-bg: var(--surface);
    --mobile-error-toast-text: var(--text);
    --mobile-error-toast-border: var(--border);
    --mobile-error-toast-shadow: var(--shadow-sm);
    --mobile-error-toast-icon-bg: #ff5a2f;
    --mobile-error-toast-icon-text: #ffffff;
    --mobile-error-toast-close: var(--muted);

    /* Modal / feedback */
    --modal-bg: var(--surface);
    --modal-text: var(--text);
    --modal-muted: var(--muted);
    --modal-border: var(--border);
    --modal-shadow: 0 20px 60px rgba(0,0,0,0.25);

    --modal-field-bg: var(--surface);
    --modal-field-text: var(--text);
    --modal-field-border: var(--border);
    --modal-field-placeholder: var(--muted);

    --modal-button-primary-bg: #44474A;
    --modal-button-primary-hover-bg: #2f3235;
    --modal-button-primary-text: #ffffff;
    --modal-button-primary-border: #44474A;

    --modal-button-ghost-bg: transparent;
    --modal-button-ghost-text: #44474A;
    --modal-button-ghost-border: rgba(68,71,74,0.25);
    --modal-button-ghost-hover-bg: rgba(68,71,74,0.06);

    --modal-button-disabled-bg: #E5E7EB;
    --modal-button-disabled-border: #E5E7EB;
    --modal-button-disabled-text: #9CA3AF;

    /* pagination */
    --pagination-bg: #ffffff;
    --pagination-text: #44474A;
    --pagination-border: rgba(0,0,0,0.10);
    --pagination-hover-bg: #f3f4f6;
    --pagination-hover-border: #dfe3e8;
    --pagination-hover-text: #111315;

    --pagination-active-bg: #44474A;
    --pagination-active-border: #44474A;
    --pagination-active-text: #ffffff;

    --pagination-disabled-bg: transparent;
    --pagination-disabled-border: rgba(68,71,74,0.14);
    --pagination-disabled-text: rgba(107,112,117,0.45);
}


/* Reset / Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family: 'SUIT Variable', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.4;
}

/* ==========================================================================
   Theme mode selector
   --------------------------------------------------------------------------
   auto  = follow system/browser theme
   light = force light mode
   dark  = force dark mode
   ========================================================================== */

/* ==========================================================================
   Force LIGHT mode
   --------------------------------------------------------------------------
   This must stay AFTER the SYSTEM dark media query.
   It guarantees that user-selected LIGHT wins even when the OS is dark.
   ========================================================================== */

html[data-theme="LIGHT"] {
    color-scheme: light;

    --bg: #F9FAFB;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --surface-glass: rgba(255,255,255,.6);

    --text: #111315;
    --text-strong: #2c2f33;
    --muted: #6b7075;
    --text-sub: #374151;
    --muted-weak: #9ca3af;

    --border: #e7e9ec;
    --border-hover: #dfe3e8;
    --dot-border: #e1e3e6;

    --brand: #44474A;
    --brand-2: #5a5e62;
    --brand-soft: rgba(68,71,74,.04);

    --shadow: 0 18px 50px rgba(17,19,21,.08);
    --shadow-sm: 0 10px 26px rgba(17,19,21,.08);
    --shadow-card: 0 10px 28px rgba(17,19,21,.06);

    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-text: var(--text);
    --input-placeholder: var(--muted);

    --btn-bg: transparent;
    --btn-text: var(--text);
    --btn-border: var(--border);
    --btn-hover-bg: var(--surface-2);
    --btn-hover-border: var(--border-hover);

    --btn-primary-bg: #111827;
    --btn-primary-hover-bg: #1f2937;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #111827;

    --table-head-bg: var(--surface-2);
    --row-hover-bg: var(--surface-2);

    --app-bg-soft: #f3f4f6;

    --pill-muted-bg: rgba(17, 19, 21, .04);
    --pill-muted-border: rgba(17, 19, 21, .10);
    --pill-muted-text: #374151;

    --badge-draft-bg: var(--surface-2);
    --badge-draft-text: #374151;
    --badge-draft-border: #e5e7eb;

    --mobile-error-toast-bg: var(--surface);
    --mobile-error-toast-text: var(--text);
    --mobile-error-toast-border: var(--border);
    --mobile-error-toast-shadow: var(--shadow-sm);
    --mobile-error-toast-close: var(--muted);

    --auth-bg: #F9F9F9;
    --auth-text: #232629;
    --auth-muted: rgba(35, 38, 41, .72);
}

html[data-theme="SYSTEM"] {
    color-scheme: light dark;
}

html[data-theme="DARK"] {
    color-scheme: dark;

    --bg: #111315;
    --surface: #181A1D;
    --surface-2: #222529;
    --surface-glass: rgba(24,26,29,.72);

    --text: #F4F5F6;
    --text-strong: #FFFFFF;
    --muted: #A8ADB3;
    --text-sub: #D4D7DB;
    --muted-weak: #7E858C;

    --border: #34383D;
    --border-hover: #454A50;
    --dot-border: #454A50;

    --brand: #E7E8EA;
    --brand-2: #C9CCD0;
    --brand-soft: rgba(255,255,255,.06);

    --shadow: 0 18px 50px rgba(0,0,0,.32);
    --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
    --shadow-card: 0 10px 28px rgba(0,0,0,.24);

    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-text: var(--text);
    --input-placeholder: var(--muted);

    --btn-bg: transparent;
    --btn-text: var(--text);
    --btn-border: var(--border);
    --btn-hover-bg: var(--surface-2);
    --btn-hover-border: var(--border-hover);

    --btn-primary-bg: #0F1115;
    --btn-primary-hover-bg: #1F2329;
    --btn-primary-text: #FFFFFF;
    --btn-primary-border: #2E333A;

    --table-head-bg: var(--surface-2);
    --row-hover-bg: var(--surface-2);

    --app-bg-soft: #222529;

    --pill-muted-bg: rgba(255,255,255,.06);
    --pill-muted-border: rgba(255,255,255,.12);
    --pill-muted-text: #D4D7DB;

    --badge-draft-bg: rgba(255,255,255,.06);
    --badge-draft-text: #D4D7DB;
    --badge-draft-border: rgba(255,255,255,.12);

    --mobile-error-toast-bg: var(--surface);
    --mobile-error-toast-text: var(--text);
    --mobile-error-toast-border: var(--border);
    --mobile-error-toast-shadow: var(--shadow-sm);
    --mobile-error-toast-close: var(--muted);

    --auth-bg: #111315;
    --auth-text: #F4F5F6;
    --auth-muted: #A8ADB3;

    --modal-bg: #181A1D;
    --modal-text: #F4F5F6;
    --modal-muted: #A8ADB3;
    --modal-border: #34383D;
    --modal-shadow: 0 20px 60px rgba(0,0,0,0.45);

    --modal-field-bg: #111315;
    --modal-field-text: #F4F5F6;
    --modal-field-border: #34383D;
    --modal-field-placeholder: #7E858C;

    --modal-button-primary-bg: #2A2D31;
    --modal-button-primary-hover-bg: #34383D;
    --modal-button-primary-text: #F4F5F6;
    --modal-button-primary-border: #454A50;

    --modal-button-ghost-bg: transparent;
    --modal-button-ghost-text: #F4F5F6;
    --modal-button-ghost-border: #34383D;
    --modal-button-ghost-hover-bg: #222529;

    --modal-button-disabled-bg: #2A2D31;
    --modal-button-disabled-border: #34383D;
    --modal-button-disabled-text: #7E858C;

    /* pagination */
    --pagination-bg: #181A1D;
    --pagination-text: #F4F5F6;
    --pagination-border: #34383D;
    --pagination-hover-bg: #222529;
    --pagination-hover-border: #454A50;
    --pagination-hover-text: #FFFFFF;

    --pagination-active-bg: #44474A;
    --pagination-active-border: #5A5E62;
    --pagination-active-text: #FFFFFF;

    --pagination-disabled-bg: transparent;
    --pagination-disabled-border: rgba(255,255,255,0.08);
    --pagination-disabled-text: #4B5158;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="SYSTEM"] {
        color-scheme: dark;

        --bg: #111315;
        --surface: #181A1D;
        --surface-2: #222529;
        --surface-glass: rgba(24,26,29,.72);

        --text: #F4F5F6;
        --text-strong: #FFFFFF;
        --muted: #A8ADB3;
        --text-sub: #D4D7DB;
        --muted-weak: #7E858C;

        --border: #34383D;
        --border-hover: #454A50;
        --dot-border: #454A50;

        --brand: #E7E8EA;
        --brand-2: #C9CCD0;
        --brand-soft: rgba(255,255,255,.06);

        --shadow: 0 18px 50px rgba(0,0,0,.32);
        --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
        --shadow-card: 0 10px 28px rgba(0,0,0,.24);

        --input-bg: var(--surface);
        --input-border: var(--border);
        --input-text: var(--text);
        --input-placeholder: var(--muted);

        --btn-bg: transparent;
        --btn-text: var(--text);
        --btn-border: var(--border);
        --btn-hover-bg: var(--surface-2);
        --btn-hover-border: var(--border-hover);

        --btn-primary-bg: #0F1115;
        --btn-primary-hover-bg: #1F2329;
        --btn-primary-text: #FFFFFF;
        --btn-primary-border: #2E333A;

        --table-head-bg: var(--surface-2);
        --row-hover-bg: var(--surface-2);

        --app-bg-soft: #222529;

        --pill-muted-bg: rgba(255,255,255,.06);
        --pill-muted-border: rgba(255,255,255,.12);
        --pill-muted-text: #D4D7DB;

        --badge-draft-bg: rgba(255,255,255,.06);
        --badge-draft-text: #D4D7DB;
        --badge-draft-border: rgba(255,255,255,.12);

        --mobile-error-toast-bg: var(--surface);
        --mobile-error-toast-text: var(--text);
        --mobile-error-toast-border: var(--border);
        --mobile-error-toast-shadow: var(--shadow-sm);
        --mobile-error-toast-close: var(--muted);

        --auth-bg: #111315;
        --auth-text: #F4F5F6;
        --auth-muted: #A8ADB3;

        --modal-bg: #181A1D;
        --modal-text: #F4F5F6;
        --modal-muted: #A8ADB3;
        --modal-border: #34383D;
        --modal-shadow: 0 20px 60px rgba(0,0,0,0.45);

        --modal-field-bg: #111315;
        --modal-field-text: #F4F5F6;
        --modal-field-border: #34383D;
        --modal-field-placeholder: #7E858C;

        --modal-button-primary-bg: #2A2D31;
        --modal-button-primary-hover-bg: #34383D;
        --modal-button-primary-text: #F4F5F6;
        --modal-button-primary-border: #454A50;

        --modal-button-ghost-bg: transparent;
        --modal-button-ghost-text: #F4F5F6;
        --modal-button-ghost-border: #34383D;
        --modal-button-ghost-hover-bg: #222529;

        --modal-button-disabled-bg: #2A2D31;
        --modal-button-disabled-border: #34383D;
        --modal-button-disabled-text: #7E858C;

        /* pagination */
        --pagination-bg: #181A1D;
        --pagination-text: #F4F5F6;
        --pagination-border: #34383D;
        --pagination-hover-bg: #222529;
        --pagination-hover-border: #454A50;
        --pagination-hover-text: #FFFFFF;

        --pagination-active-bg: #44474A;
        --pagination-active-border: #5A5E62;
        --pagination-active-text: #FFFFFF;

        --pagination-disabled-bg: transparent;
        --pagination-disabled-border: rgba(255,255,255,0.08);
        --pagination-disabled-text: #4B5158;
    }
}

/**
LOGO ADDED
**/
.logo-dark {
    display: none;
}

html[data-theme="DARK"] .logo-light {
    display: none;
}

html[data-theme="DARK"] .logo-dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="SYSTEM"] .logo-light {
        display: none;
    }

    html[data-theme="SYSTEM"] .logo-dark {
        display: inline-block;
    }
}

.sidebar-logo-symbol:not(.hidden),
.sidebar-logo-full:not(.hidden) {
    display: inline-flex;
    align-items: center;
}

.sidebar-logo-symbol img {
    width: 34px;
    height: 34px;
}

.sidebar-logo-full img {
    height: 24px;
}

a{ color: inherit; text-decoration: none; }

/* Layout primitive */
.container{
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

/* Base section rhythm */
section{ padding: 48px 0; }

/* Base headings */
h1{
    margin: 14px 0 12px;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.6px;
}

h2{
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.3px;
}