/* yggle.css — base.html 인라인 테마 추출본.
   레이어 1: 다크 yggle 디자인 시스템 (CSS 변수 정의 + 컴포넌트)
   레이어 2: Swiss × Burgundy 오버레이 (변수 재바인딩 + !important 오버라이드)
   순서가 캐스케이드를 결정하므로 두 레이어의 순서를 바꾸지 말 것. */
        /* ===== Design System ===== */
        :root {
            --brand-start: #2A82F5;
            --brand-end: #00E5B0;

            --bg-base:     #070D1A;
            --bg-surface:  #0D1829;
            --bg-card:     #111F33;
            --bg-elevated: #162540;

            --border-subtle:   rgba(42, 130, 245, 0.10);
            --border-default:  rgba(42, 130, 245, 0.20);
            --border-emphasis: rgba(42, 130, 245, 0.40);

            --text-primary:   #E8F4FF;
            --text-secondary: #7A9FC0;
            --text-muted:     #3D5A78;

            --accent-teal:  #00E5B0;
            --accent-blue:  #2A82F5;
            --accent-amber: #FFB547;
            --accent-red:   #FF4D6D;
            --accent-green: #4ADE80;

            --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
            --shadow-glow: 0 0 32px rgba(42, 130, 245, 0.12);

            --nav-height: 64px;
            --radius-card: 0.75rem;
        }

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

        body {
            font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            background-color: var(--bg-base);
            color: var(--text-primary);
            min-height: 100vh;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            color: var(--text-primary);
        }

        a { text-decoration: none; }

        /* ===== Scrollbar ===== */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg-surface); }
        ::-webkit-scrollbar-thumb { background: var(--border-emphasis); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

        /* ===== Brand Gradient Utilities ===== */
        .bg-yggle-gradient,
        .brand-gradient {
            background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
        }
        .text-yggle-gradient,
        .brand-gradient-text {
            background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
        }

        /* ===== Navigation ===== */
        .yggle-nav {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            height: var(--nav-height);
            background: rgba(7, 13, 26, 0.82);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--border-subtle);
        }

        .yggle-nav-inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-left { display: flex; align-items: center; gap: 2rem; }
        /* display는 Tailwind 유틸리티(hidden md:flex)가 제어 — 여기서 display:flex를 주면
           tw.css의 .hidden을 덮어써 모바일에서 데스크톱 메뉴가 사라지지 않음(햄버거가 밀려남). */
        .nav-links { align-items: center; gap: 0.125rem; }
        .nav-right { display: flex; align-items: center; gap: 0.875rem; }

        .nav-logo { display: flex; align-items: center; }
        .nav-logo img { height: 26px; width: auto; }

        /* 모바일 햄버거: 표시 여부는 Tailwind(flex md:hidden)가 제어하므로 여기선 display 금지.
           배경색 + 고대비 아이콘(currentColor=흰색 계열). CSS 변수라 라이트테마에서도 자동 대비. */
        .nav-hamburger {
            align-items: center;
            justify-content: center;
            width: 2.25rem;
            height: 2.25rem;
            padding: 0;
            background: var(--bg-elevated);
            color: var(--text-primary);
            border: 1px solid var(--border-emphasis);
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 1.05rem;
            line-height: 1;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .nav-hamburger:hover { background: var(--bg-card); border-color: var(--accent-blue); }
        .nav-hamburger:active { transform: scale(0.96); }

        .nav-link {
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 500;
            padding: 0.375rem 0.75rem;
            border-radius: 0.375rem;
            position: relative;
            transition: color 0.2s ease;
            white-space: nowrap;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0.75rem;
            right: 0.75rem;
            height: 1.5px;
            background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
            border-radius: 1px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.25s ease;
        }
        .nav-link:hover { color: var(--text-primary); }
        .nav-link:hover::after { transform: scaleX(1); }

        .nav-link-admin {
            color: var(--accent-amber) !important;
        }

        .nav-btn-login {
            background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
            color: #F1EEE6 !important;
            font-size: 0.8125rem;
            font-weight: 600;
            padding: 0.4375rem 1.125rem;
            border-radius: 0.5rem;
            transition: opacity 0.2s ease, transform 0.2s ease;
            white-space: nowrap;
        }
        .nav-btn-login:hover { opacity: 0.88; transform: translateY(-1px); }

        .nav-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            overflow: hidden;
            border: 1.5px solid var(--border-default);
            cursor: pointer;
            transition: border-color 0.2s ease;
        }
        .nav-avatar:hover { border-color: var(--accent-teal); }
        .nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

        .nav-username {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .nav-lang-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            cursor: pointer;
            padding: 0.375rem 0.5rem;
            border-radius: 0.375rem;
            transition: color 0.2s ease;
        }
        .nav-lang-btn:hover { color: var(--text-secondary); }

        /* Dropdown shared style */
        .yggle-dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 0.75rem;
            box-shadow: var(--shadow-card), var(--shadow-glow);
            overflow: hidden;
            z-index: 200;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5625rem 1rem;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            cursor: pointer;
            width: 100%;
            background: none;
            border: none;
            text-align: left;
            transition: background 0.15s ease, color 0.15s ease;
            white-space: nowrap;
        }
        .dropdown-item:hover { background: var(--border-subtle); color: var(--text-primary); }
        .dropdown-item .item-icon { width: 1rem; text-align: center; color: var(--text-muted); font-size: 0.75rem; }
        .dropdown-item.danger:hover { background: rgba(255, 77, 109, 0.08); color: var(--accent-red); }
        .dropdown-item.danger:hover .item-icon { color: var(--accent-red); }

        .dropdown-divider { height: 1px; background: var(--border-subtle); margin: 0.25rem 0; }

        /* ===== Mobile Menu ===== */
        .mobile-menu {
            background: rgba(7, 13, 26, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid var(--border-subtle);
            padding: 0.5rem 0;
        }

        /* ===== Cards ===== */
        .yggle-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-card);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .yggle-card:hover {
            border-color: var(--border-default);
            box-shadow: var(--shadow-card);
        }
        .yggle-card-glow:hover {
            box-shadow: var(--shadow-card), var(--shadow-glow);
        }

        /* ===== Inputs ===== */
        /* 체크박스/라디오는 제외 — background-color !important 가 네이티브 체크마크를 가림 */
        input:not([type="checkbox"]):not([type="radio"]), select, textarea {
            background-color: var(--bg-surface) !important;
            border-color: var(--border-default) !important;
            color: var(--text-primary) !important;
            border-radius: 0.5rem !important;
            font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
        }
        input[type="checkbox"], input[type="radio"] {
            accent-color: var(--accent-blue);
        }
        input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
        input:focus, select:focus, textarea:focus {
            border-color: var(--accent-blue) !important;
            box-shadow: 0 0 0 3px rgba(42, 130, 245, 0.12) !important;
            outline: none !important;
        }

        /* ===== Tailwind Override: Dark Mode ===== */
        .bg-white     { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
        .bg-gray-50   { background-color: var(--bg-base) !important; }
        .bg-gray-100  { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
        .bg-gray-200  { background-color: var(--bg-elevated) !important; }
        .bg-gray-700  { background-color: var(--bg-elevated) !important; }
        .bg-gray-800  { background-color: var(--bg-surface) !important; }
        .bg-gray-900  { background-color: var(--bg-base) !important; }

        .text-gray-900, .text-gray-800 { color: var(--text-primary) !important; }
        .text-gray-700, .text-gray-600 { color: var(--text-secondary) !important; }
        .text-gray-500, .text-gray-400 { color: var(--text-muted) !important; }
        .text-white   { color: var(--text-primary) !important; }

        .border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border-subtle) !important; }
        .border-gray-700 { border-color: var(--border-default) !important; }

        /* Accent text */
        .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700 { color: var(--brand-start) !important; }
        .text-green-400, .text-green-500, .text-green-600, .text-green-700 { color: var(--accent-teal) !important; }
        .text-teal-400, .text-teal-500, .text-teal-600 { color: var(--accent-teal) !important; }
        .text-indigo-400, .text-indigo-500, .text-indigo-600 { color: var(--brand-start) !important; }
        .text-purple-400, .text-purple-500, .text-purple-600 { color: var(--brand-start) !important; }
        .text-red-400, .text-red-500, .text-red-600 { color: var(--accent-red) !important; }
        .text-yellow-400, .text-yellow-500, .text-yellow-600 { color: var(--accent-amber) !important; }
        .text-orange-400, .text-orange-500, .text-orange-600 { color: var(--accent-amber) !important; }

        /* Colored bg badges */
        .bg-blue-50, .bg-blue-100   { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
        .bg-green-50, .bg-green-100 { background: rgba(49,94,61,0.10) !important; color: var(--accent-teal) !important; border-color: rgba(49,94,61,0.30) !important; }
        .bg-indigo-50, .bg-indigo-100 { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
        .bg-purple-50, .bg-purple-100 { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
        .bg-red-50, .bg-red-100     { background: rgba(138,42,42,0.08) !important; color: var(--accent-red) !important; border-color: rgba(138,42,42,0.30) !important; }
        .bg-yellow-50, .bg-yellow-100 { background: rgba(138,106,46,0.10) !important; color: var(--accent-amber) !important; border-color: rgba(138,106,46,0.30) !important; }
        .bg-teal-50, .bg-teal-100   { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
        .bg-orange-50, .bg-orange-100 { background: rgba(138,106,46,0.10) !important; color: var(--accent-amber) !important; border-color: rgba(138,106,46,0.30) !important; }

        /* Table */
        thead.bg-gray-50  { background-color: var(--bg-elevated) !important; }
        tbody.bg-white    { background-color: var(--bg-card) !important; }
        tbody tr:hover    { background-color: var(--bg-elevated) !important; }

        /* Nav/footer overrides */
        nav  { background: transparent !important; border-bottom: none !important; }
        footer { background-color: transparent !important; border-top: none !important; }

        /* Keep gradients on gradient buttons */
        button.bg-gradient-to-r, a.bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
            background-color: transparent !important;
        }

        /* Buttons */
        button:not(:disabled) { cursor: pointer; }
        button:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ===== Toast ===== */
        .yggle-toast {
            position: fixed;
            top: calc(var(--nav-height) + 0.875rem);
            right: 1rem;
            padding: 0.6875rem 1.125rem;
            border-radius: 0.625rem;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-primary);
            backdrop-filter: blur(12px);
            box-shadow: var(--shadow-card);
            z-index: 9999;
            border: 1px solid;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: opacity 0.25s ease, transform 0.25s ease;
            animation: toastSlideIn 0.25s ease;
        }
        .yggle-toast.success { background: rgba(0, 229, 176, 0.12); border-color: rgba(0, 229, 176, 0.25); }
        .yggle-toast.error   { background: rgba(255, 77, 109, 0.12); border-color: rgba(255, 77, 109, 0.25); }
        .yggle-toast.info    { background: rgba(42, 130, 245, 0.12); border-color: rgba(42, 130, 245, 0.25); }
        .yggle-toast.warning { background: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.25); }
        @keyframes toastSlideIn {
            from { opacity: 0; transform: translateX(0.75rem); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* ===== Footer ===== */
        .yggle-footer {
            background: var(--bg-surface);
            border-top: 1px solid var(--border-subtle);
            margin-top: 5rem;
            padding: 1.75rem 0;
        }
        .yggle-footer-inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
            text-align: center;
        }

        /* ===== Mono data values ===== */
        .mono { font-family: 'IBM Plex Mono', monospace; }
    /* ═════════ Swiss × Burgundy overlay — overrides the dark "yggle" theme above ═════════ */
    :root {
      /* Token rebinding: yggle dark → Swiss paper */
      --brand-start: #7A2A34;
      --brand-end:   #7A2A34;

      --bg-base:     #F1EEE6;
      --bg-surface:  #E6E2D6;
      --bg-card:     #FAF7EF;
      --bg-elevated: #E6E2D6;

      --border-subtle:   rgba(14, 11, 8, 0.08);
      --border-default:  #CFC8B8;
      --border-emphasis: #0E0B08;

      --text-primary:   #0E0B08;
      --text-secondary: #3B342C;
      --text-muted:     #766D60;

      --accent-teal:  #7A2A34;
      --accent-blue:  #7A2A34;
      --accent-amber: #8A6A2E;
      --accent-red:   #8A2A2A;
      --accent-green: #315E3D;

      --shadow-card: none;
      --shadow-glow: none;
      --radius-card: 0;

      --sw-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    html, body { background: var(--bg-base); color: var(--text-primary); }

    /* Brand gradient → solid burgundy */
    .bg-yggle-gradient, .brand-gradient {
      background: var(--brand-start) !important;
    }
    .text-yggle-gradient, .brand-gradient-text {
      background: none !important;
      -webkit-text-fill-color: var(--brand-start) !important;
      color: var(--brand-start) !important;
    }

    /* Nav: translucent dark → paper with solid ink bottom rule */
    .yggle-nav {
      background: var(--bg-base) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom: 1px solid var(--border-emphasis) !important;
    }

    /* Logo wordmark — "yggle.org" with burgundy dot */
    .nav-logo {
      display: inline-flex; align-items: baseline; gap: 0;
      font-family: 'Pretendard Variable', Pretendard, sans-serif;
      font-size: 22px; line-height: 1; letter-spacing: -1.2px;
      white-space: nowrap;
    }
    .nav-logo .sw-wm     { font-weight: 700; color: var(--text-primary); }
    .nav-logo .sw-wm-dot { font-weight: 700; color: var(--brand-start); }
    .nav-logo .sw-wm-tld { font-weight: 600; color: var(--text-muted); }

    /* Nav link underline: gradient → solid burgundy */
    .nav-link::after {
      background: var(--brand-start) !important;
    }

    /* Login button: gradient → solid ink */
    .nav-btn-login {
      background: var(--text-primary) !important;
      color: var(--bg-base) !important;
      border-radius: 0 !important;
    }
    .nav-btn-login:hover { opacity: 0.88; }

    /* Cards */
    .yggle-card {
      background: var(--bg-card) !important;
      border: 1px solid var(--border-default) !important;
      border-radius: 0 !important;
    }
    .yggle-card:hover { border-color: var(--border-emphasis) !important; box-shadow: none !important; }

    /* Inputs — flat, ink focus */
    /* 체크박스/라디오는 제외 — background-color !important 가 네이티브 체크마크를 가림 */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
      background-color: var(--bg-card) !important;
      border: 1px solid var(--border-default) !important;
      color: var(--text-primary) !important;
      border-radius: 0 !important;
    }
    input[type="checkbox"], input[type="radio"] {
      accent-color: var(--accent-blue);
    }
    input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--brand-start) !important;
      box-shadow: 0 0 0 2px rgba(122,42,52,0.08) !important;
      outline: none !important;
    }

    /* Tailwind utility re-overrides (yggle layer had these mapped dark) */
    .bg-white     { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
    .bg-gray-50   { background-color: var(--bg-base) !important; }
    .bg-gray-100  { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
    .bg-gray-200, .bg-gray-700, .bg-gray-800 { background-color: var(--bg-surface) !important; }
    .bg-gray-900  { background-color: var(--bg-base) !important; }
    .text-white   { color: var(--text-primary) !important; }

    .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700 { color: var(--brand-start) !important; }
    .text-green-400, .text-green-500, .text-green-600, .text-green-700 { color: var(--accent-green) !important; }
    .text-teal-400, .text-teal-500, .text-teal-600 { color: var(--brand-start) !important; }
    .text-indigo-400, .text-indigo-500, .text-indigo-600 { color: var(--brand-start) !important; }
    .text-purple-400, .text-purple-500, .text-purple-600 { color: var(--brand-start) !important; }
    .text-red-400, .text-red-500, .text-red-600 { color: var(--accent-red) !important; }
    .text-yellow-400, .text-yellow-500, .text-yellow-600 { color: var(--accent-amber) !important; }

    .bg-blue-50, .bg-blue-100   { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
    .bg-green-50, .bg-green-100 { background: rgba(49,94,61,0.10) !important; color: var(--accent-green) !important; border-color: rgba(49,94,61,0.30) !important; }
    .bg-indigo-50, .bg-indigo-100,
    .bg-purple-50, .bg-purple-100,
    .bg-teal-50, .bg-teal-100 { background: rgba(122,42,52,0.08) !important; color: var(--brand-start) !important; border-color: rgba(122,42,52,0.25) !important; }
    .bg-red-50, .bg-red-100     { background: rgba(138,42,42,0.08) !important; color: var(--accent-red) !important; border-color: rgba(138,42,42,0.30) !important; }
    .bg-yellow-50, .bg-yellow-100 { background: rgba(138,106,46,0.10) !important; color: var(--accent-amber) !important; border-color: rgba(138,106,46,0.30) !important; }
    .bg-orange-50, .bg-orange-100 { background: rgba(138,106,46,0.10) !important; color: var(--accent-amber) !important; border-color: rgba(138,106,46,0.30) !important; }

    /* ── Saturated Tailwind button backgrounds → Swiss palette with paper text ── */
    /* Primary (burgundy) */
    .bg-blue-500, .bg-blue-600, .bg-blue-700,
    .bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
    .bg-purple-500, .bg-purple-600, .bg-purple-700,
    .bg-violet-500, .bg-violet-600, .bg-violet-700,
    .bg-teal-500, .bg-teal-600, .bg-teal-700,
    .bg-cyan-500, .bg-cyan-600, .bg-cyan-700,
    .bg-sky-500, .bg-sky-600, .bg-sky-700,
    .bg-fuchsia-500, .bg-fuchsia-600,
    .bg-pink-500, .bg-pink-600, .bg-pink-700 {
      background-color: var(--brand-start) !important;
      background-image: none !important;
      color: #F1EEE6 !important;
      border-color: var(--brand-start) !important;
    }
    /* Success (sage) */
    .bg-green-500, .bg-green-600, .bg-green-700,
    .bg-emerald-500, .bg-emerald-600, .bg-emerald-700,
    .bg-lime-500, .bg-lime-600 {
      background-color: var(--accent-green) !important;
      background-image: none !important;
      color: #F1EEE6 !important;
      border-color: var(--accent-green) !important;
    }
    /* Danger (dark red) */
    .bg-red-500, .bg-red-600, .bg-red-700,
    .bg-rose-500, .bg-rose-600, .bg-rose-700 {
      background-color: var(--accent-red) !important;
      background-image: none !important;
      color: #F1EEE6 !important;
      border-color: var(--accent-red) !important;
    }
    /* Warning (ocher) */
    .bg-yellow-500, .bg-yellow-600, .bg-yellow-700,
    .bg-amber-500, .bg-amber-600, .bg-amber-700,
    .bg-orange-500, .bg-orange-600, .bg-orange-700 {
      background-color: var(--accent-amber) !important;
      background-image: none !important;
      color: #F1EEE6 !important;
      border-color: var(--accent-amber) !important;
    }
    /* Neutral / dark button → solid ink (gray-700/800/900 used as buttons).
       Scoped to button & anchor so panel/skeleton uses of gray-* keep the
       earlier bg-surface remap. */
    button.bg-gray-600, button.bg-gray-700, button.bg-gray-800, button.bg-gray-900,
    a.bg-gray-600, a.bg-gray-700, a.bg-gray-800, a.bg-gray-900 {
      background-color: var(--text-primary) !important;
      color: var(--bg-base) !important;
      border-color: var(--text-primary) !important;
    }

    /* Hover shades — hold the palette */
    .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover,
    .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover,
    .hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover, .hover\:bg-purple-800:hover,
    .hover\:bg-violet-700:hover,
    .hover\:bg-teal-600:hover, .hover\:bg-teal-700:hover,
    .hover\:bg-cyan-700:hover,
    .hover\:bg-sky-700:hover,
    .hover\:bg-pink-600:hover, .hover\:bg-pink-700:hover,
    .hover\:bg-fuchsia-600:hover {
      background-color: #4A1420 !important;
      color: #F1EEE6 !important;
    }
    .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-green-800:hover,
    .hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover {
      background-color: #1F3F27 !important;
      color: #F1EEE6 !important;
    }
    .hover\:bg-red-600:hover, .hover\:bg-red-700:hover, .hover\:bg-red-800:hover,
    .hover\:bg-rose-600:hover, .hover\:bg-rose-700:hover {
      background-color: #5A1A1A !important;
      color: #F1EEE6 !important;
    }
    .hover\:bg-yellow-600:hover, .hover\:bg-yellow-700:hover,
    .hover\:bg-amber-600:hover, .hover\:bg-amber-700:hover,
    .hover\:bg-orange-600:hover, .hover\:bg-orange-700:hover {
      background-color: #5F4720 !important;
      color: #F1EEE6 !important;
    }
    button.hover\:bg-gray-700:hover, button.hover\:bg-gray-800:hover, button.hover\:bg-gray-900:hover,
    a.hover\:bg-gray-700:hover, a.hover\:bg-gray-800:hover, a.hover\:bg-gray-900:hover {
      background-color: #3B342C !important;
      color: var(--bg-base) !important;
    }

    /* Radii flatten — Swiss discipline */
    .rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
      border-radius: 0 !important;
    }
    .rounded-full { border-radius: 9999px !important; }

    /* Buttons keep their intended rounding — interactive controls get soft corners
       even while cards/panels stay Swiss-flat. Specificity-raised with `button.`
       so this wins over the generic flatten rule above. */
    button.rounded-sm                   { border-radius: 0.25rem  !important; }
    button.rounded,
    button.rounded-md                   { border-radius: 0.375rem !important; }
    button.rounded-lg                   { border-radius: 0.5rem   !important; }
    button.rounded-xl                   { border-radius: 0.625rem !important; }
    button.rounded-2xl                  { border-radius: 0.75rem  !important; }
    button.rounded-3xl                  { border-radius: 1rem     !important; }
    /* Buttons without an explicit rounded-* class still get a subtle default,
       unless they opt out via rounded-none or are a pill (rounded-full). */
    button                              { border-radius: 0.375rem; }
    button.rounded-none                 { border-radius: 0        !important; }
    button.rounded-full                 { border-radius: 9999px   !important; }
    /* Navbar / dropdown internals must stay flat to preserve the Swiss grid. */
    .nav-btn-login,
    .yggle-dropdown button.dropdown-item,
    .mobile-menu button.dropdown-item   { border-radius: 0 !important; }

    /* Shadows off */
    .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
      box-shadow: none !important;
      border: 1px solid var(--border-subtle);
    }

    /* Table */
    thead.bg-gray-50  { background-color: var(--bg-surface) !important; }
    tbody.bg-white    { background-color: var(--bg-card) !important; }
    tbody tr:hover    { background-color: rgba(14,11,8,0.04) !important; }
    thead th { font-family: var(--sw-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }

    /* Mono reclass to JetBrains */
    .mono { font-family: var(--sw-mono); }
    code, pre, kbd, samp { font-family: var(--sw-mono); }

    /* Dropdown menus */
    .yggle-dropdown {
      background: var(--bg-card) !important;
      border: 1px solid var(--border-default) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .dropdown-item:hover { background: rgba(14,11,8,0.04) !important; color: var(--text-primary) !important; }
    .dropdown-divider { background: var(--border-default) !important; }

    /* Mobile menu */
    .mobile-menu {
      background: var(--bg-base) !important;
      backdrop-filter: none !important;
      border-top: 1px solid var(--border-default) !important;
    }

    /* Footer */
    .yggle-footer {
      background: var(--bg-surface) !important;
      border-top: 1px solid var(--border-default) !important;
    }

    /* Toast retint — solid ink-on-paper with accent border */
    .yggle-toast {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--border-default) !important;
      border-radius: 0 !important;
      backdrop-filter: none !important;
    }
    .yggle-toast.success { border-color: var(--accent-green) !important; }
    .yggle-toast.error   { border-color: var(--accent-red) !important; }
    .yggle-toast.info    { border-color: var(--brand-start) !important; }
    .yggle-toast.warning { border-color: var(--accent-amber) !important; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 0; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* Admin link retint */
    .nav-link-admin { color: var(--accent-amber) !important; }

/* ===== 페이지 전환 (View Transitions — 점진적 향상, 미지원 브라우저는 일반 전환) ===== */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}