:root {
--font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro KR', 'SF Pro Text', 'Segoe UI', sans-serif;
--space-5: 20px;
--theme-gradient: radial-gradient(ellipse 130% 110% at 50% 0%, #26466F 0%, #0E1A2A 48%, #050B14 100%);
--tertiary-bg: #192336;
--quaternary-bg: #233049;
--quinary-bg: #2E3D5C;
--quinary-label: rgba(158, 176, 212, 0.15);
--separator-opaque: #192336;
--accent-blue-deep: #1B64C4;
--accent-green-deep: #30DB5B;
--accent-red-deep: #FF6961;
--accent-brand: #D4AF37;
--accent-brand-deep: #B8903F;
--accent-blue-rgb: 47, 128, 237;
--glass-bg-light: rgba(14, 21, 36, 0.78);
--glass-bg-mid: rgba(14, 21, 36, 0.60);
--glass-bg-thin: rgba(14, 21, 36, 0.44);
--glass-blur: blur(30px) saturate(200%);
--ipad-gold: #FFD60A;
--ipad-bg: #000000;
--ipad-sidebar: rgba(28, 28, 30, 0.78);
--ipad-card: rgba(28, 28, 30, 0.78);
--ipad-card-hover: rgba(58, 58, 60, 0.92);
--ipad-border: rgba(255, 255, 255, 0.10);
--ipad-text: #FFFFFF;
--ipad-text-sub: #8E8E93;
--ipad-tab-bar-bg: rgba(28, 28, 30, 0.78);
--ipad-tab-active: rgba(255, 255, 255, 0.15);
--ipad-surface: rgba(255, 255, 255, 0.05);
--ipad-surface-hover: rgba(255, 255, 255, 0.10);
--type-body: 12px;
--type-headline: 18px;
--bg-main: color-mix(in srgb, var(--system-bg) 10%, transparent);
--primary-bg: var(--bg-main);
--bg-drawer: #1C1C1E;
--bg-surface: rgb(18, 18, 18, 0.7);
--bg-surface-active: rgb(18, 18, 18, 0.9);
--text-main: #FFFFFF;
--text-muted: #EBEBF5;
--text-dim: #8E8E93;
--border-light: rgba(255, 255, 255, 0.10);
--border-dim: rgba(255, 255, 255, 0.05);
--border-gold: rgba(255, 214, 10, 0.30);
--danger: #FF453A;
--danger-alt: #FF6961;
--success: #30D158;
--info: #70D7FF;
--link: #0A84FF;
--link-dim: #64D2FF;
--ipad-text-dim: #8E8E93;
--ipad-border-hover: rgba(255, 214, 10, 0.35);
--royal-surface-glass: rgba(255, 255, 255, 0.08);
--royal-surface-glass-hover: rgba(255, 255, 255, 0.14);
--royal-border-glass: rgba(255, 255, 255, 0.10);
--royal-text-primary: #FFFFFF;
--royal-text-secondary: #EBEBF5;
--royal-text-gold: #FFD60A;
--app-card-bg: rgba(255, 255, 255, 0.05);
--royal-text-muted: #8E8E93;
--royal-bg-body: #000000;
--royal-bg-dark: #080C10;
--royal-border-glass-hover: rgba(255, 214, 10, 0.35);
--bg-surface-alt: rgba(255, 255, 255, 0.08);
--sf-size: 48px;
--tint-rgb: 162, 132, 94;
--tint-surface: rgba(162, 132, 94, 0.06);
--tint-surface-strong: rgba(var(--tint-rgb), 0.12);
--tint-glow: rgba(162, 132, 94, 0.18);
--close: "\2715";
--minimize: "\2212";
--maximize: "+";
--type-mult-xs:0.82;
--type-mult-sm:0.88;
--type-mult-md:0.94;
--type-mult-lg:1.00;
--type-mult-xl:1.12;
--type-mult-xxl:   1.24;
--type-mult-xxxl:  1.35;
--type-mult-ax1:   1.62;
--type-mult-ax2:   1.92;
--type-mult-ax3:   2.25;
--type-mult-ax4:   2.62;
--type-mult-ax5:   3.07;
--radius-appicon: 22.37%;
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2xl: 36px;
--radius-pill: 999px;
--radius-button: 8px;
--radius-button-pill: 999px;
--radius-button-rounded: 12px;
--radius-card: 24px;
--radius-card-hig: 10px;
--radius-sheet: 18px;
--radius-sheet-hig: 10px;
--radius-alert: 14px;
--radius-textfield: 10px;
--radius-segmented: 9px;
--radius-toggle: 999px;
--radius-context-menu: 13px;
--radius-popover: 16px;
--radius-window: 12px;--radius-card-hig: 10px;
--radius-sheet-hig:10px;
--radius-sheet:18px;
--radius-alert:14px;
--radius-textfield:10px;
--radius-segmented:9px;
--radius-toggle:   999px;
--radius-context-menu: 13px;
--radius-popover:  16px;
--radius-button:   8px;
--radius-caption:  4px;
--radius-avatar:   50%;
--statusbar-h-iphone:  56px;
--statusbar-h-ipad:24px;
--statusbar-h: 56px;
--navbar-h-compact:44px;
--navbar-h-large:  98px;
--navbar-h:var(--navbar-h-compact);
--ipad-navbar-h:   50px;
--tab-bar-h-iphone: 49px;
--tab-bar-h-ipad:   50px;
--toolbar-h:   49px;
--segmented-h: 28px;
--textfield-h: 44px;
--slider-h:44px;
--stepper-h:   44px;
--pagecontrol-h:   44px;
--button-h-small:  28px;
--button-h-medium: 36px;
--button-h-large:  44px;
--sheet-h-mini:154px;
--sheet-h-medium:  437px;
--sheet-h-large:   803px;
--sheet-h-fullscreen:  874px;
--sheet-h-default: var(--sheet-h-medium);
--alert-h-iphone:  178px;
--alert-h-ipad:178px;
--alert-radius:14px;
--keyboard-h-iphone:   291px;
--keyboard-h-ipad: 834px;
--progressbar-h:   4px;
--progressind-h:   44px;
--safe-top-iphone: 47px;
--safe-top-iphone-classic: 24px;
--safe-top-iphone-large:   56px;
--safe-top-ipad:   24px;
--safe-bottom-iphone:  34px;
--safe-bottom-ipad:20px;
--spring-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
--duration-spring: 600ms;
--glass-blur-thin: blur(20px) saturate(180%);
--glass-blur-thick:blur(40px) saturate(180%);
--glass-blur-ultra-thick:  blur(50px) saturate(200%);
--glass-blur-default:  var(--glass-blur-regular);
--space-1: 4px;
--space-2: 6px;
--space-3: 8px;
--space-4: 10px;
--space-6: 12px;
--space-7: 14px;
--space-8: 16px;
--space-9: 18px;
--space-10: 20px;
--space-11: 25px;
--space-12: 30px;
--space-13: 35px;
--space-14: 40px;
--space-15: 45px;
--space-16: 50px;
--icon-size-small: 16px;
--icon-size-medium:20px;
--icon-size-large: 24px;
--icon-size-xlarge:32px;
--icon-size-xxlarge:   40px;
--glass-ultra-thin: rgba(255, 255, 255, 0.45);
--glass-ultra-thin-dark:   rgba(28, 28, 30, 0.55);
--glass-thin-dark: rgba(28, 28, 30, 0.70);
--glass-regular-dark:  rgba(28, 28, 30, 0.82);
--glass-thick-dark:rgba(28, 28, 30, 0.92);
--glass-blur-ultra-thin:   blur(16px) saturate(180%);
--glass-blur-thin: blur(20px) saturate(180%);
--glass-blur-regular:  blur(30px) saturate(180%);
--glass-blur-thick:blur(40px) saturate(200%);
--mac-light-size:  12px;
--mac-light-gap:   8px;
--mac-menubar-h:   30px;
--mac-titlebar-h:  38px;
--mac-titlebar-h-large:52px;
--mac-light-close: #FF5F57;
--mac-light-minimize:  #FEBC2E;
--mac-light-maximize:  #28C840;
--mac-light-close-dark:#FF6058;
--mac-light-minimize-dark: #FFBD2E;
--mac-light-maximize-dark: #28CA42;
--mac-viewport-template-dark:  1440px 900px;
--mac-viewport-template-light:  1440px 900px;
--mac-window-min-w:400px;
--mac-window-min-h:640px;
--mac-window-default-w:900px;
--mac-window-default-h:1200px;
--mac-window-max-w:100%;
--mac-window-max-h:100%;
--mac-toolbar-h:   52px;
--mac-toolbar-h-large: 64px;
--mac-toolbar-bg:  rgba(255, 255, 255, 0.72);
--mac-sidebar-min-w:   180px;
--mac-sidebar-ideal-w: 240px;
--mac-sidebar-max-w:   320px;
--mac-sidebar-icon-size:   18px;
--mac-sidebar-row-h:   32px;
--mac-sidebar-bg:  var(--glass-ultra-thin);
--mac-font-display:"SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
--mac-font-text:   "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
--mac-font-rounded:"SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
--mac-font-mono:   "SF Mono", ui-monospace, monospace;
--mac-type-largetitle: 26pt;
--mac-type-title1: 22pt;
--mac-type-title2: 17pt;
--mac-type-title3: 15pt;
--mac-type-headline:   13pt;
--mac-type-body:   13pt;
--mac-type-callout:12pt;
--mac-type-subhead:11pt;
--mac-type-footnote:   10pt;
--mac-type-caption1:   10pt;
--mac-type-caption2:   9pt;
--glass-blur:  rgba(255, 255, 255, 0.72);
--radius-window:   10px;
--font-system: -apple-system, BlinkMacSystemFont,"SF Pro KR", "Apple SD Gothic Neo", "Helvetica Neue", system-ui, sans-serif;
--glass-regular:   rgba(255, 255, 255, 0.72);

--tabbar-h-iphone: 49px;
--tabbar-h-ipad: 50px;
--tabbar-h: var(--tabbar-h-iphone);
--toolbar-h: 49px;

--segmented-h: 28px;

--status-bar-h: env(safe-area-inset-top, 0);
--home-bar-h: env(safe-area-inset-bottom, 0);
--header-h: var(--navbar-h-compact);

--safe-left-ipad-landscape: 0;
--safe-right-ipad-landscape: 0;

--ipad-split-sidebar-w: 280px;
--ipad-split-detail-w: 360px;
--ipad-sidebar-w: var(--ipad-split-sidebar-w);
--ipad-detail-w: var(--ipad-split-detail-w);

--viewport-iphone-16pro: 402px 874px;
--viewport-iphone-16: 393px 852px;
--viewport-iphone-15: 393px 852px;
--viewport-iphone-14: 390px 844px;
--viewport-ipad-11: 834px 1210px;
--viewport-ipad-13: 1024px 1366px;
--viewport-ipad-mini: 744px 1133px;

--tint-surface-thin: rgba(120, 120, 128, 0.18);
--tint-surface-regular: rgba(120, 120, 128, 0.32);
--tint-surface-thick: rgba(120, 120, 128, 0.50);
--tint-surface-ultra-thick: rgba(120, 120, 128, 0.70);

--type-largetitle: 34px;
--type-title1: 28px;
--type-title2: 22px;
--type-title3: 20px;
--type-headline: 17px;
--type-callout: 16px;
--type-subhead: 15px;
--type-footnote: 13px;
--type-caption1: 12px;
--type-caption2: 11px;

--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-heavy: 800;

--spring-soft: cubic-bezier(0.36, 1.10, 0.30, 1.00);
--spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1.00);
--spring-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--spring-ios: cubic-bezier(0.32, 0.72, 0.00, 1.00);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

--duration-fast: 200ms;
--duration-base: 350ms;
--duration-slow: 500ms;
--duration-spring: 600ms;

--white: #FFFFFF;
--label-on-gold: #0a0a0a;
--photo-placeholder: rgba(0, 0, 0, 0.3);
--dynamic-island-bg: #000000;
--capsule-radius: 999px;
--z-toast: 9999;
--z-modal: 2000;
--z-drawer: 1500;
--glass-bg-dark: rgba(45, 45, 45, 0.8);

--system-bg: transparent;
--theme-gradient: linear-gradient(145deg, #FFFFFF 0%, #F2F2F7 52%, #E5E5EA 100%);
--secondary-bg: #FFFFFF;
--tertiary-bg: #E5E5EA;
--quaternary-bg: #D1D1D6;
--quinary-bg: #E9E9EB;
--tint-bg: #FFFFFF;

--label: #000000;
--secondary-label: #3C3C43;
--tertiary-label: rgba(60, 60, 67, 0.6);
--quaternary-label: rgba(60, 60, 67, 0.3);
--quinary-label: rgba(60, 60, 67, 0.18);

--fill-primary: rgba(120, 120, 128, 0.2);
--fill-secondary: rgba(120, 120, 128, 0.16);
--fill-tertiary: rgba(118, 118, 128, 0.12);
--fill-quaternary: rgba(116, 116, 128, 0.08);

--separator: rgba(60, 60, 67, 0.15);
--separator-opaque: #C6C6C8;
--hairline: 1px solid var(--separator);

--accent-blue: #007AFF;
--accent-blue-rgb: 0, 122, 255;
--accent-blue-deep: #0040DD;
--accent-cyan: #64D2FF;
--accent-green: #34C759;
--accent-green-rgb: 52, 199, 89;
--accent-green-deep: #248A3D;
--accent-yellow: #FFCC00;
--accent-yellow-rgb: 255, 204, 0;
--accent-orange: #FF9500;
--accent-orange-rgb: 255, 149, 0;
--accent-red: #FF3B30;
--accent-red-rgb: 255, 59, 48;
--accent-red-deep: #D70015;
--accent-pink: #FF375F;
--accent-pink-rgb: 255, 55, 95;
--accent-purple: #AF52DE;
--accent-purple-rgb: 175, 82, 222;
--accent-indigo: #5856D6;
--accent-indigo-rgb: 88, 86, 214;
--accent-teal: #5AC8FA;
--accent-teal-rgb: 90, 200, 250;
--accent-mint: #00C7BE;
--accent-mint-rgb: 0, 199, 190;
--accent-brown: #A2845E;
--accent-brown-rgb: 162, 132, 94;

--RoyalGold-50: #FDF8ED;
--RoyalGold-100: #FBF0D9;
--RoyalGold-200: #F7E1B3;
--RoyalGold-300: #F3D28D;
--RoyalGold-400: #EFC367;
--RoyalGold-500: #C5A059;
--RoyalGold-600: #B8903F;
--RoyalGold-700: #A07830;
--RoyalGold-800: #886025;
--RoyalGold-900: #70481C;
--RoyalGold-500-rgb: 197, 160, 89;
--RoyalGold-glow: 0 0 12px rgba(197, 160, 89, 0.4);

--accent-gold: #C9A74E;
--accent-gold-rgb: 201, 167, 78;
--accent-gold-gradient: linear-gradient(135deg, #fcd34d, #f59e0b, #d97706);
--accent-brand: var(--accent-gold);
--accent-brand-deep: var(--accent-gold-deep, #B8903F);

--tint-elevation: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);

--glass-bg-light: rgba(255, 255, 255, 0.72);
--glass-bg-mid: rgba(255, 255, 255, 0.55);
--glass-bg-thin: rgba(255, 255, 255, 0.35);
--glass-bg-thin1: rgba(255, 255, 255, 0.15);
--glass-bg: rgba(39, 39, 39, 0.10);
--glass-border: rgba(255, 255, 255, 0.5);
--glass-highlight: rgba(255, 255, 255, 0.6);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.04);
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.20);

--system-gray-1-light: #F2F2F7;
--system-gray-2-light: #E5E5EA;
--system-gray-3-light: #D1D1D6;
--system-gray-4-light: #C7C7CC;
--system-gray-5-light: #AEAEB2;
--system-gray-6-light: #8E8E93;

--bg-main: var(--system-bg);
--bg-drawer: #FFFFFF;
--bg-surface: rgba(0, 0, 0, 0.7);
--bg-surface-active: rgba(0, 0, 0, 0.9);
--bg-surface-alt: rgba(0, 0, 0, 0.05);
--text-main: var(--label);
--text-muted: var(--secondary-label);
--text-dim: var(--tertiary-label);
--border-light: rgba(60, 60, 67, 0.10);
--border-dim: rgba(60, 60, 67, 0.06);
--border-gold: rgba(0, 122, 255, 0.25);
--danger: #FF3B30;
--danger-alt: #D70015;
--success: #34C759;
--info: #5AC8FA;
--link: #007AFF;
--link-dim: #409CFF;

--ipad-gold: var(--accent-gold);
--ipad-bg: var(--system-bg);
--ipad-sidebar: rgba(255, 255, 255, 0.78);
--ipad-card: rgba(255, 255, 255, 0.85);
--ipad-card-hover: rgba(255, 255, 255, 0.95);
--ipad-border: rgba(60, 60, 67, 0.12);
--ipad-text: #1C1C1E;
--ipad-text-dim: #6E6E73;
--ipad-text-sub: #6E6E73;
--ipad-tabbar-bg: rgba(255, 255, 255, 0.78);
--ipad-tab-active: rgba(0, 122, 255, 0.12);
--ipad-surface: rgba(0, 0, 0, 0.04);
--ipad-surface-hover: rgba(0, 0, 0, 0.08);
--ipad-border-hover: rgba(0, 122, 255, 0.30);

--royal-surface-glass: rgba(255, 255, 255, 0.65);
--royal-surface-glass-hover: rgba(255, 255, 255, 0.85);
--royal-border-glass: rgba(60, 60, 67, 0.12);
--royal-border-glass-hover: rgba(0, 122, 255, 0.30);
--royal-text-primary: #1C1C1E;
--royal-text-secondary: #6E6E73;
--royal-text-muted: #8E8E93;
--royal-text-gold: var(--accent-blue);
--royal-bg-body: var(--system-bg);
--royal-bg-dark: var(--secondary-bg);
--app-card-bg: rgba(0, 0, 0, 0.03);

--accent: var(--accent-blue);
--bg: var(--system-bg);
--muted: var(--tertiary-label);
--text: var(--label);
--app-color: #FFD60A;
  --g-bg:var(--system-bg);--g-s1:var(--secondary-bg);--g-fg:var(--label);
            --g-dim:var(--secondary-label);--g-dim2:var(--tertiary-label);
            --g-ac:var(--accent-blue);--g-gr:var(--accent-green);--g-rd:var(--accent-red);
            --g-ye:#ffcc00;--g-purple:#5856d6;--g-teal:#00a7a7;--g-orange:#ff9500;
            --g-border:var(--separator);--g-br2:rgba(255,255,255,.12);
            --g-rad:10px;--g-rad2:14px;--g-left:340px;
}
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

    /* ── [사용자 에이전트 스타일시트(User-Agent Stylesheet) 리셋 & 표준화] ── */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    html, body {
        width: 100%;
        min-width: 320px;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: var(--font-system);
        background: var(--system-bg);
        color: var(--label);
        line-height: 1.4;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* 기본 요소 리셋 */
    div, section, article, aside, main, header, footer, nav {
        display: block;
        box-sizing: border-box;
    }

    input, button, select, textarea {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        background: transparent;
        border: none;
        outline: none;
        box-sizing: border-box;
    }

    button {
        cursor: pointer;
        user-select: none;
    }

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

    ul, ol, li {
        list-style: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    img, svg, picture, video, canvas {
        display: block;
        max-width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }

        .hdr{
            height:52px;background:var(--glass-bg-light);backdrop-filter:var(--glass-blur);
            -webkit-backdrop-filter:var(--glass-blur);border-bottom:.5px solid var(--ipad-border);
            display:flex;align-items:center;justify-content:space-between;padding:0 18px;
            position:fixed;top:0;left:0;right:0;
        }
        .hdr-l{display:flex;align-items:center;gap:12px}
        .hdr-back{display:none;align-items:center;gap:5px;color:var(--secondary-label);text-decoration:none;
            font-size:.8rem;font-weight:600;padding:6px 11px;border-radius:999px;
            border:.5px solid var(--g-br2);background:var(--secondary-bg);cursor:pointer;transition:all .15s}
        .hdr-back:hover{color:var(--label);border-color:var(--accent-blue)}
        .hdr-back.show{display:flex}
        .hdr-brand{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;color:var(--label)}
        .hdr-brand small{color:var(--secondary-label);font-weight:400;font-size:.72rem;margin-left:4px}
        .hdr-r{display:flex;align-items:center;gap:10px}
        .hdr-clock{font-size:.82rem;color:var(--secondary-label);font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;white-space:nowrap}
        .hdr-lang{padding:5px 10px;border:.5px solid var(--g-br2);border-radius:999px;font-size:.73rem;
            background:var(--secondary-bg);color:var(--label);cursor:pointer;outline:none;font-family:inherit}
        .hdr-lang:focus{border-color:var(--accent-blue)}

        .app-root{position:fixed;top:52px;left:0;right:0;bottom:0;overflow:hidden}
        .app-view{height:100%}
        .app-view.active{display:flex;flex-direction:column}

        .dash-scroll{flex:1 1 auto;width:100%;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;padding:24px 20px}
        .dash-scroll::-webkit-scrollbar{width:6px;height:6px}
        .dash-scroll::-webkit-scrollbar-track{background:transparent}
        .dash-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
        .dash-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
        .dash-max{max-width:1100px;margin:0 auto}
        .dash-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
        .dash-stats .dash-stat{min-width:100px;display: grid;align-items: center;grid-auto-flow: column}
        .dash-stat{padding:5px;text-align:center}
        .dash-stat .ds-lbl{font-size:var(--type-caption1);font-weight:var(--weight-semibold);color:var(--tertiary-label);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
        .dash-stat .ds-val{font-size:1.6rem;font-weight:var(--weight-heavy);font-family:'IBM Plex Mono',monospace}
        .dash-stat .ds-sub{font-size:.7rem;color:var(--tertiary-label);margin-top:2px}
        .dash-stat.s-blue .ds-val{color:var(--accent-blue)}
        .dash-stat.s-green .ds-val{color:var(--accent-green)}
        .dash-stat.s-yellow .ds-val{color:var(--g-ye)}
        .dash-stat.s-red .ds-val{color:var(--accent-red)}
        .dash-stat.s-purple .ds-val{color:var(--accent-purple)}
        .dash-sec {
            font-size: var(--type-caption1);
            font-weight: var(--weight-semibold);
            color: var(--tertiary-label);
            text-transform: uppercase;
            letter-spacing: .5px;
            margin: 0 0 12px 2px;
        }

        .dash-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

            .dash-card {
                padding: 10px 10px;
                cursor: pointer;
                transition: all .2s;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                text-decoration: none;
                color: inherit;
                position: relative;
            }

            .dash-card:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-xl);
            }

            .dash-card .dc-icon {
                font-size: 2rem;
                line-height: 1;
            }

            .dash-card .dc-title {
                font-size: .95rem;
                font-weight: var(--weight-bold);
                color: var(--label);
            }

            .dash-card .dc-desc {
                font-size: .75rem;
                color: var(--secondary-label);
                line-height: 1.4;
            }

            .dash-card .dc-arrow {
                position: absolute;
                bottom: 14px;
                right: 16px;
                color: var(--tertiary-label);
                font-size: .9rem;
                transition: color .2s;
            }

            .dash-card:hover .dc-arrow {
                color: var(--accent-blue);
            }

            .dash-data-card {
                cursor: default;
                background: rgba(255, 255, 255, .04);
                border: .5px solid rgba(255, 255, 255, .06);
            }

            .dash-data-card .dc-title {
                font-size: .9rem;
                color: var(--accent-blue);
                margin-bottom: 6px;
            }

            .dash-data-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 3px 0;
                border-bottom: .5px solid rgba(255, 255, 255, .04);
                font-size: .72rem;
            }

            .dash-data-name {
                font-weight: 600;
                color: var(--label);
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 6px;
            }

            .dash-data-sub {
                color: var(--secondary-label);
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 6px;
                text-align: center;
            }

            .dash-data-date {
                color: var(--tertiary-label);
                flex: 0 0 auto;
                text-align: right;
                white-space: nowrap;
            }

            .text-error {
                color: var(--danger);
            }

            .text-muted {
                color: var(--text-muted);
            }

            .mt-article-title {
                font-size: .85rem;
                font-weight: 700;
                color: var(--accent-brand);
                margin: 8px 0 4px;
            }

            .mt-contract-article {
                padding: 8px;
                margin-bottom: 8px;
                background: rgba(255, 255, 255, .04);
                border-radius: 8px;
            }

            .guest-layout {
                display: flex;
                flex: 1;
                overflow: hidden;
            }

            .guest-left {
                width: var(--g-left);
                flex-shrink: 0;
                background: var(--glass-bg-light);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                border-right: .5px solid var(--ipad-border);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .glp-top {
                padding: 12px;
                border-bottom: .5px solid var(--g-border);
                flex-shrink: 0
            }

            .glp-title {
                font-size: .8rem;
                font-weight: 700;
                color: var(--accent-blue);
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .gupload {
                border: 1px dashed var(--g-br2);
                border-radius: var(--g-rad2);
                padding: 10px 12px;
                cursor: pointer;
                transition: all .18s;
                display: flex;
                align-items: center;
                gap: 9px;
                background: var(--secondary-bg);
                position: relative;
                overflow: hidden;
                margin-bottom: 8px;
            }

            .gupload:hover {
                border-color: var(--accent-blue);
                background: rgba(0, 122, 255, .05);
            }

            .gupload input {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
            }

            .gupload .upico {
                font-size: 1.1rem;
                flex-shrink: 0
            }

            .gupload .upmain {
                font-size: .78rem;
                font-weight: 600;
                color: var(--label);
            }

            .gupload .upsub {
                font-size: .68rem;
                color: var(--secondary-label);
                margin-top: 1px;
            }

            .gupload.done {
                border-color: var(--g-gr);
                border-style: solid;
                background: rgba(48, 209, 88, .04);
            }

            .gsearch {
                display: flex;
                gap: 6px;
            }

            .gsearch input {
                flex: 1;
                padding: 7px 10px;
                border-radius: 6px;
                border: .5px solid var(--g-br2);
                background: var(--secondary-bg);
                color: var(--label);
                font-size: .78rem;
                outline: none;
                font-family: inherit;
            }

            .gsearch input:focus {
                border-color: var(--g-purple);
            }

            .gdatenav {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 8px 10px;
                border-bottom: .5px solid var(--g-border);
                flex-shrink: 0
            }

            .gdbtn {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: .5px solid var(--g-br2);
                background: var(--secondary-bg);
                color: var(--label);
                font-weight: 800;
                cursor: pointer;
                font-family: inherit;
            }

            .gdbtn:hover {
                border-color: var(--accent-blue);
                color: var(--accent-blue);
            }

            .gdcur {
                flex: 1;
                text-align: center;
                font-weight: 800;
                font-size: .82rem;
                font-family: 'IBM Plex Mono', monospace;
                color: var(--label);
            }

            .gdtoday {
                padding: 7px 10px;
                border-radius: 999px;
                border: .5px solid var(--g-br2);
                background: var(--secondary-bg);
                color: var(--accent-blue);
                font-size: .72rem;
                font-weight: 800;
                cursor: pointer;
                font-family: inherit;
            }

            .gstrip {
                display: flex;
                gap: 5px;
                padding: 7px 10px;
                overflow-x: auto;
                border-bottom: .5px solid var(--g-border);
                flex-shrink: 0
            }

            .gstrip::-webkit-scrollbar {
                height: 2px;
            }

            .gpill {
                padding: 5px 10px;
                border-radius: 999px;
                border: .5px solid var(--g-br2);
                font-size: .7rem;
                font-weight: 800;
                cursor: pointer;
                white-space: nowrap;
                background: var(--secondary-bg);
                color: var(--secondary-label);
                font-family: 'IBM Plex Mono', monospace;
                flex-shrink: 0;
                transition: all .13s;
            }

            .gpill.on {
                background: var(--g-purple);
                border-color: var(--g-purple);
                color: #fff;
            }

            .grescnt {
                font-size: .68rem;
                color: var(--secondary-label);
                padding: 5px 10px;
                border-bottom: .5px solid var(--g-border);
                flex-shrink: 0
            }

            .greslist {
                flex: 1;
                overflow-y: auto;
                padding: 8px;
            }

            .greslist::-webkit-scrollbar {
                width: 3px;
            }

            .greslist::-webkit-scrollbar-thumb {
                background: var(--g-br2);
                border-radius: 2px;
            }

            .grrow {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 9px 10px;
                border-radius: var(--g-rad2);
                border: .5px solid var(--g-border);
                background: var(--secondary-bg);
                margin-bottom: 6px;
                cursor: pointer;
                transition: all .13s;
            }

            .grrow:hover {
                border-color: var(--g-purple);
                background: rgba(88, 86, 214, .06);
            }

            .grrow.sel {
                border-color: var(--g-purple);
                background: rgba(88, 86, 214, .15);
            }

            .grrow.registered {
                border-color: rgba(48, 209, 88, .3);
                background: rgba(48, 209, 88, .04);
            }

            .grnum {
                width: 24px;
                height: 24px;
                border-radius: 5px;
                background: var(--tertiary-bg);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .68rem;
                font-weight: 700;
                color: var(--secondary-label);
                font-family: 'IBM Plex Mono', monospace;
                flex-shrink: 0
            }

            .grrow.sel .grnum {
                background: var(--g-purple);
                color: #fff;
            }

            .grrow.registered .grnum {
                background: rgba(48, 209, 88, .2);
                color: var(--g-gr);
            }

            .grinfo {
                flex: 1;
                min-width: 0;
            }

            .grname {
                font-weight: 700;
                font-size: .82rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .grmeta {
                display: flex;
                gap: 6px;
                color: var(--secondary-label);
                font-size: .68rem;
                margin-top: 1px;
                flex-wrap: wrap
            }

            .gsbadge {
                display: inline-flex;
                align-items: center;
                padding: 1px 6px;
                border-radius: 8px;
                font-size: .63rem;
                font-weight: 700;
            }

            .gs-CONFIRMED {
                background: rgba(48, 209, 88, .15);
                color: var(--g-gr);
                border: 1px solid rgba(48, 209, 88, .35);
            }

            .gs-PENDING {
                background: rgba(255, 204, 0, .15);
                color: var(--g-ye);
                border: 1px solid rgba(255, 204, 0, .35);
            }

            .gs-OPEN {
                background: rgba(90, 200, 250, .12);
                color: var(--g-teal);
                border: 1px solid rgba(90, 200, 250, .3);
            }

            .gs-CLOSED {
                background: rgba(120, 120, 128, .16);
                color: var(--secondary-label);
            }

            .gs-CANCELLED {
                background: rgba(255, 69, 58, .12);
                color: var(--g-rd);
                border: 1px solid rgba(255, 69, 58, .3);
            }

            .gregmark {
                font-size: .65rem;
                color: var(--g-gr);
                font-weight: 700;
            }

            .gnodata {
                text-align: center;
                padding: 24px;
                color: var(--secondary-label);
                font-size: .8rem;
            }

            .guest-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: var(--system-bg);
            }

            .grscroll {
                flex: 1;
                overflow-y: auto;
                padding: 16px 18px;
            }

            .grscroll::-webkit-scrollbar {
                width: 4px;
            }

            .grscroll::-webkit-scrollbar-thumb {
                background: var(--g-br2);
                border-radius: 2px;
            }

            .gbb {
                display: none;
                background: var(--secondary-bg);
                border: .5px solid var(--g-br2);
                border-left: 3px solid var(--accent-blue);
                border-radius: var(--g-rad2);
                padding: 11px 14px;
                margin-bottom: 14px;
            }

            .gbb.show {
                display: block;
            }

            .gbb-hd {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 7px;
            }

            .gbb-lbl {
                font-size: .67rem;
                color: var(--secondary-label);
                font-weight: 700;
                letter-spacing: 1px;
                text-transform: uppercase;
            }

            .gbb-clr {
                cursor: pointer;
                color: var(--g-rd);
                font-size: .78rem;
                font-weight: 600;
            }

            .gbb-chips {
                display: flex;
                gap: 6px;
                flex-wrap: wrap
            }

            .gchip {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: var(--tertiary-bg);
                border: 1px solid var(--g-br2);
                padding: 3px 9px;
                border-radius: 5px;
                font-size: .74rem;
            }

            .gchip-l {
                color: var(--secondary-label);
                font-size: .64rem;
            }

            .gchip-v {
                color: var(--label);
                font-weight: 600;
                font-family: 'IBM Plex Mono', monospace;
            }

            .gwalk {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                background: var(--secondary-bg);
                border: .5px solid var(--g-br2);
                border-radius: var(--g-rad);
                margin-bottom: 14px;
                cursor: pointer;
                transition: all .15s;
                font-size: .8rem;
                font-weight: 600;
                color: var(--secondary-label);
            }

            .gwalk:hover {
                border-color: var(--g-gr);
                color: var(--g-gr);
            }

            .gwalk.on {
                border-color: var(--g-gr);
                border-width: 2px;
                background: rgba(48, 209, 88, .07);
                color: var(--g-gr);
            }

            .gcard {
                background: var(--glass-bg-light);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                border: .5px solid var(--ipad-border);
                border-radius: var(--g-rad2);
                padding: 12px 14px;
                margin-bottom: 9px;
            }

            .gcard-hd {
                font-size: .82rem;
                font-weight: 800;
                color: var(--accent-blue);
                margin-bottom: 9px;
                display: flex;
                align-items: center;
                gap: 6px;
                padding-bottom: 7px;
                border-bottom: .5px solid var(--g-border);
            }

            .gfrow {
                display: flex;
                gap: 8px;
                margin-bottom: 7px;
                flex-wrap: wrap
            }

            .gfield {
                flex: 1;
                min-width: 110px;
            }

            .gfield label {
                display: block;
                font-size: .67rem;
                color: var(--secondary-label);
                margin-bottom: 3px;
                font-weight: 700;
                letter-spacing: .3px;
                text-transform: uppercase;
            }

            .gfield input, .gfield select {
                width: 100%;
                padding: 7px 9px;
                border-radius: var(--g-rad);
                border: .5px solid var(--g-br2);
                background: var(--system-bg);
                color: var(--label);
                font-size: .82rem;
                font-family: inherit;
                outline: none;
            }

            .gfield input:focus, .gfield select:focus {
                border-color: var(--accent-blue);
            }

            .gdual {
                display: flex;
                gap: 7px;
            }

            .gdual .gfield {
                flex: 1;
            }

            .kinp {
                border-left: 3px solid var(--g-ye);
            }

            .einp {
                border-left: 3px solid var(--g-teal);
            }

            .ggc {
                background: var(--fill-quaternary);
                border: .5px solid var(--g-border);
                border-radius: var(--g-rad2);
                padding: 8px 10px;
                margin-bottom: 6px;
            }

            .ggline {
                display: grid;
                grid-template-columns:24px 1fr 1fr .9fr 1fr;
                gap: 7px;
                align-items: end
            }

            .ggcn {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--accent-blue);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .65rem;
                font-weight: 700;
            }

            .grbtm {
                flex-shrink: 0;
                padding: 12px 18px;
                border-top: .5px solid var(--g-border);
                background: var(--glass-bg-light);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                display: flex;
                gap: 8px;
                align-items: center
            }

            .gbtn {
                padding: 11px 22px;
                border-radius: 999px;
                border: none;
                font-size: .84rem;
                font-weight: 800;
                cursor: pointer;
                font-family: inherit;
            }

            .gbtn-save {
                background: var(--accent-blue);
                color: #fff;
                flex: 1;
            }

            .gbtn-save:hover {
                filter: brightness(1.1)
            }

            .gbtn-reset {
                background: var(--fill-secondary);
                color: var(--label);
                border: 1px solid var(--g-br2);
            }

            .gregsec {
                margin-bottom: 14px;
            }

            .gregltitle {
                font-size: .7rem;
                font-weight: 700;
                color: var(--secondary-label);
                letter-spacing: .8px;
                text-transform: uppercase;
                margin-bottom: 7px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .gregitem {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 9px 11px;
                border-radius: var(--g-rad2);
                background: var(--secondary-bg);
                border: .5px solid var(--g-border);
                margin-bottom: 5px;
                cursor: pointer;
            }

            .gregitem:hover {
                background: var(--tertiary-bg);
            }

            .griname {
                font-weight: 600;
                font-size: .84rem;
            }

            .grien {
                color: var(--g-teal);
                font-size: .74rem;
                margin-left: 4px;
            }

            .griright {
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .gritime {
                color: var(--secondary-label);
                font-size: .7rem;
                font-family: 'IBM Plex Mono', monospace;
            }

            .gripax {
                color: var(--accent-blue);
                font-size: .7rem;
                font-weight: 600;
            }

            .grtag {
                display: inline-flex;
                align-items: center;
                gap: 2px;
                padding: 2px 6px;
                border-radius: 7px;
                font-size: .62rem;
                font-weight: 700;
                margin-left: 4px;
            }

            .grtag-r {
                background: rgba(88, 86, 214, .13);
                border: 1px solid rgba(88, 86, 214, .35);
                color: var(--g-purple);
            }

            .grtag-w {
                background: rgba(48, 209, 88, .1);
                border: 1px solid rgba(48, 209, 88, .3);
                color: var(--g-gr);
            }

            .gemptyreg {
                text-align: center;
                padding: 20px;
                color: var(--secondary-label);
                font-size: .78rem;
            }

            .gtoast {
                position: fixed;
                top: 62px;
                right: 16px;
                padding: 10px 16px;
                border-radius: var(--g-rad);
                font-weight: 600;
                font-size: .8rem;
                transform: translateX(130%);
                transition: transform .2s ease;
                box-shadow: var(--shadow-lg);
                max-width: 250px;
            }

            .gtoast.show {
                transform: translateX(0);
            }

            .gtoast.success {
                background: var(--g-gr);
                color: #000;
            }

            .gtoast.error {
                background: var(--g-rd);
                color: #fff;
            }

            .gtoast.info {
                background: var(--accent-blue);
                color: #fff;
            }

        @media(max-width:768px){
                .guest-layout {
                    flex-direction: column
                }

                .guest-left {
                    width: 100%;
                    height: 360px;
                    border-right: none;
                    border-bottom: 1px solid var(--g-border);
                }

                .guest-right {
                    height: auto;
                }

                .grscroll {
                    overflow: visible;
                }

                .gfrow {
                    flex-direction: column
                }

                .gdual {
                    flex-direction: column
                }

                .gfield {
                    min-width: 100%;
                }

                .ggline {
                    grid-template-columns:24px 1fr
                }

                .ggline .gfield:nth-child(n+4) {
                    grid-column: 2
                }
            }
            /* 배경 스택: mesh(-1) < login-bg(0) < backdrop(2) */

            .bg {
                position: fixed;
                inset: 0;
                z-index: 0;
                overflow: hidden;
                pointer-events: none;
                background-size: cover;
                background-position: center;
            }

            .bg-layer {
                opacity: 0;
                background-size: cover;
                background-position: center;
                transition: opacity 1.5s ease;
            }

            .bg-layer.active {
                opacity: 1;
            }

            .bg::after {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 2; /* zi-2 */
                background: rgba(5, 11, 20, 0.15);
                backdrop-filter: blur(14px) saturate(120%);
                -webkit-backdrop-filter: blur(14px) saturate(120%);
                pointer-events: none;
            }

            .mesh-gradient {
                position: fixed;
                inset: 0;
                z-index: -1; /* 맨 아래 배경 */
                background: linear-gradient(rgba(5, 11, 20, 0.35), rgba(5, 11, 20, 0.35)), var(--theme-gradient);
                backdrop-filter: blur(14px) saturate(140%);
                -webkit-backdrop-filter: blur(14px) saturate(140%);
                overflow: hidden;
                pointer-events: none;
            }

            .mesh-blob {
                position: absolute;
                width: 800px;
                height: 800px;
                border-radius: 50%;
                filter: blur(20px);
                opacity: .6;
                mix-blend-mode: normal;
                animation: meshMove 25s infinite alternate ease-in-out;
                will-change: transform
            }

            .blob-1 {
                background: radial-gradient(circle, rgba(47, 128, 237, 0.7));
                top: -200px;
                left: -200px;
                animation-duration: 30s
            }

            .blob-2 {
                background: radial-gradient(circle, rgba(255, 105, 97, 0.7));
                bottom: -300px;
                right: -100px;
                animation-duration: 35s;
                animation-delay: -5s
            }

            .blob-3 {
                background: radial-gradient(circle, rgba(48, 217, 88, 0.7));
                top: 10%;
                right: 10%;
                animation-duration: 28s;
                animation-delay: -10s
            }

            .blob-4 {
                background: radial-gradient(circle, rgba(197, 160, 89, 0.7));
                bottom: 10%;
                left: 10%;
                animation-duration: 32s;
                animation-delay: -15s
            }

            @keyframes meshMove {
                0% {
                    transform: translate(0, 0) scale(1) rotate(0);
                }
                33% {
                    transform: translate(100px, 150px) scale(1.2) rotate(45deg);
                }
                66% {
                    transform: translate(-150px, 50px) scale(.8) rotate(-45deg);
                }
                100% {
                    transform: translate(0, 0) scale(1) rotate(0);
                }
            }

            .login-spinner {
                display: inline-block;
                width: 14px;
                height: 14px;
                border: 2px solid rgba(255, 255, 255, 0.22);
                border-top-color: #fff;
                border-radius: 50%;
                animation: spin .8s linear infinite;
                margin-right: 8px;
                vertical-align: -2px;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }
            /* ── z-index 계층 ── */

            .zi-0 {
                position: fixed;
                z-index: 0;
            }

            /* login-bg base */

            .zi-1 {
                position: fixed;
                z-index: 1;
            }

            /* mesh-gradient */

            .zi-2 {
                position: fixed;
                z-index: 2;
            }

            /* login-bg::after */

            .zi-10 {
                position: fixed;
                z-index: 10;
            }

            /* topbar */

            .zi-50 {
                position: fixed;
                z-index: 50;
            }

            /* sub results */

            .zi-100 {
                position: fixed;
                z-index: 100;
            }

            /* mac-menubar */

            .zi-150 {
                position: fixed;
                z-index: 150;
            }

            /* dropdown/menu */

            .zi-200 {
                position: fixed;
                z-index: 200;
            }

            /* modal overlay */

            .zi-250 {
                position: fixed;
                z-index: 250;
            }

            /* register overlay */

            .zi-300 {
                position: fixed;
                z-index: 300;
            }

            /* docs modal */

            .zi-350 {
                position: fixed;
                z-index: 350;
            }

            /* docs panel */

            .zi-400 {
                position: fixed;
                z-index: 400;
            }

            /* global toast */

            .zi-450 {
                position: fixed;
                z-index: 450;
            }

            /* popup toast */

            .zi-500 {
                position: fixed;
                z-index: 500;
            }

            /* document toast */

            .zi-550 {
                position: fixed;
                z-index: 550;
            }

            /* card print overlay */

            .zi-600 {
                position: fixed;
                z-index: 600;
            }

            /* topbar layer2 */

            .zi-650 {
                position: fixed;
                z-index: 650;
            }

            /* popup/dropdown layer2 */

            .zi-700 {
                position: fixed;
                z-index: 700;
            }

            /* dynamic sheet */

            .zi-750 {
                position: fixed;
                z-index: 750;
            }

            /* apple modal overlay */

            .zi-800 {
                position: fixed;
                z-index: 800;
            }

            /* apple toast */

            .zi-999 {
                position: fixed;
                z-index: 999;
            }

            /* topmost */

            .dynamic-type-sheet {
                position: fixed;
                inset: 0;
                pointer-events: none;
            }

            .dynamic-type-sheet[hidden] {
                display: none;
            }

            .dynamic-type-sheet.open {
                pointer-events: auto;
            }

            .dynamic-type-sheet-backdrop {
                position: absolute;
                background: rgba(0, 0, 0, 0);
                transition: background var(--duration-base, 350ms) var(--ease-in-out, ease);
            }

            .dynamic-type-sheet.open .dynamic-type-sheet-backdrop {
                background: rgba(0, 0, 0, 0.35);
            }

            .dynamic-type-sheet-card {
                left: 50%;
                bottom: 0;
                transform: translate(-50%, 100%);
                width: min(560px, 100%);
                background: var(--glass-bg-light, rgba(255, 255, 255, 0.72));
                backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
                -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
                border-radius: var(--radius-xl, 28px) var(--radius-xl, 28px) 0 0;
                box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.14));
                padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-6, 24px);
                transition: transform var(--duration-base, 350ms) var(--spring-ios, cubic-bezier(0.32, 0.72, 0.00, 1.00));
            }

            .dynamic-type-sheet.open .dynamic-type-sheet-card {
                transform: translate(-50%, 0);
            }

            .dynamic-type-sheet-handle {
                width: 40px;
                height: 5px;
                background: var(--quaternary-label, rgba(60, 60, 67, 0.3));
                border-radius: var(--capsule-radius, 999px);
                margin: 0 auto var(--space-4, 16px);
            }

            .dynamic-type-sheet-title {
                font-size: var(--type-title3, 20px);
                font-weight: var(--weight-bold, 700);
                color: var(--label, #000);
                margin: 0 0 var(--space-4, 16px);
                text-align: center;
            }

            .dynamic-type-slider {
                -webkit-appearance: none;
                appearance: none;
                width: 100%;
                height: 6px;
                border-radius: 3px;
                background: linear-gradient(to right,
                var(--accent-blue, #007AFF) 0%,
                var(--accent-blue, #007AFF) var(--type-progress, 50%),
                var(--fill-tertiary, rgba(118, 118, 128, 0.12)) var(--type-progress, 50%),
                var(--fill-tertiary, rgba(118, 118, 128, 0.12)) 100%);
                margin: 16px 0 24px;
                cursor: pointer;
            }

            .dynamic-type-slider::-webkit-slider-thumb {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: var(--ipad-text, #FFFFFF);
                border: 0.5px solid var(--separator, rgba(60, 60, 67, 0.15));
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                transition: transform 200ms var(--spring-bouncy, cubic-bezier(0.34, 1.56, 0.64, 1));
            }

            .dynamic-type-slider::-webkit-slider-thumb:hover {
                transform: scale(1.1);
            }

            .dynamic-type-sample {
                padding: 16px 20px;
                background: var(--secondary-bg, #fff);
                border-radius: var(--radius-md, 14px);
                margin-bottom: 16px;
            }

            .dynamic-type-sample-text {
                font-size: calc(17px * var(--type-mult, 1));
                font-weight: 500;
                transition: font-size 300ms var(--spring-ios, cubic-bezier(0.32, 0.72, 0.00, 1.00));
                line-height: 1.4;
            }

            .dynamic-type-stages {
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                color: var(--tertiary-label, rgba(60, 60, 67, 0.6));
                padding: 0 4px;
            }

            .dynamic-type-stages button {
                background: none;
                border: none;
                padding: 0;
                font: inherit;
                color: inherit;
                align-items: center;
                justify-content: center;
                min-width: 28px;
                border-radius: 6px;
                transition: background 150ms, transform 100ms;
            }

            .dynamic-type-stages button:hover {
                background: var(--fill-secondary, rgba(120, 120, 128, 0.16));
            }

            .dynamic-type-stages button:active {
                transform: scale(0.92);
            }

            .dynamic-type-stages button.active {
                background: var(--accent-blue, #007AFF);
                color: #fff;
            }

            .dynamic-type-stages button.active span b {
                color: #fff;
            }

            .dynamic-type-reset {
                display: block;
                margin: 0 auto;
                padding: 8px 20px;
                background: var(--fill-tertiary, rgba(118, 118, 118, 0.12));
                color: var(--accent-blue, #007AFF);
                border-radius: var(--radius-pill, 999px);
                font-size: 14px;
                transition: background 150ms;
            }

            .dynamic-type-reset:hover {
                background: var(--fill-secondary, rgba(120, 120, 128, 0.16));
            }

            .dynamic-type-reset:active {
                transform: scale(0.96);
            }

            @keyframes toastIn {
                from {
                    opacity: 0;
                    transform: translateY(-12px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .webp-toast-msg {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 20px;
                border-radius: var(--radius-lg, 14px);
                color: var(--label, #000);
                font-weight: 600;
                font-family: var(--font-system, -apple-system, BlinkMacSystemFont, sans-serif);
                font-size: 0.9rem;
                animation: toastIn .3s var(--spring-ios, cubic-bezier(0.32, 0.72, 0.00, 1.00));
                box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.10));
                backdrop-filter: blur(20px) saturate(180%);
                -webkit-backdrop-filter: blur(20px) saturate(180%);
            }

            .toast-ok {
                background: rgba(52, 199, 89, 0.92);
                color: #fff;
            }

            .toast-err {
                background: rgba(255, 59, 48, 0.92);
                color: #fff;
            }

            .toast-warn {
                background: rgba(255, 149, 0, 0.92);
                color: #fff;
            }

            .doc-modal-overlay {
                background: rgba(0, 0, 0, 0.45);
                backdrop-filter: blur(24px) saturate(180%);
                -webkit-backdrop-filter: blur(24px) saturate(180%);
                display: none;
                padding: 24px;
            }

            .doc-modal-overlay.active,
            .doc-modal-overlay.open {
                display: flex;
            }

            @keyframes fadeInDoc {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            .doc-modal-box {
                background: var(--secondary-bg, #FFFFFF);
                border: 0.5px solid var(--separator, rgba(60, 60, 67, 0.15));
                border-radius: var(--radius-2xl, 36px);
                box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.14));
                width: 100%;
                max-width: 35%;
                max-height: 100vh;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .doc-modal-head {
                justify-content: space-between;
                padding: 20px 28px;
                border-bottom: 0.5px solid var(--separator, rgba(60, 60, 67, 0.15));
                flex-shrink: 0;
            }

            .doc-modal-head h5 {
                margin: 0;
                font-size: 1.1rem;
                font-weight: 800;
                letter-spacing: -0.3px;
                gap: 10px;
            }

            .icon-gold {
                color: var(--accent-yellow, #FFCC00);
            }

            .doc-modal-close {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: none;
                background: var(--fill-tertiary, rgba(118, 118, 128, 0.12));
                line-height: 1;
                display: grid;
                place-items: center;
                transition: background .15s ease;
            }

            .doc-modal-close:hover {
                background: var(--fill-secondary, rgba(120, 120, 128, 0.16));
            }

            .doc-modal-close:active {
                transform: scale(0.94);
            }

            .doc-modal-body {
                padding: 28px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .doc.webp-canvas-wrap {
                display: flex;
                justify-content: center;
                background: var(--tertiary-bg, #E5E5EA);
                border-radius: var(--radius-xl, 28px);
                padding: 16px;
            }

            .doc.webp-canvas {
                max-width: 100%;
                height: auto;
                border-radius: var(--radius-lg, 20px);
                background: var(--ipad-text, #FFFFFF);
                box-shadow: var(--shadow-md, 0 2px 6px rgba(0, 0, 0, 0.08));
            }

            .doc.webp-reverse-wrap {
                margin-top: 12px;
                display: none;
            }

            .doc.webp-reverse-label {
                display: inline-flex;
                gap: 8px;
                font-size: 0.85rem;
                font-weight: 700;
                color: var(--secondary-label, #3C3C43);
                margin-bottom: 8px;
            }

            .doc.webp-reverse-img {
                width: 100%;
                border: 0.5px solid var(--separator, rgba(60, 60, 67, 0.15));
            }

            .webp-state {
                display: flex;
                gap: 12px;
                padding: 48px 24px;
                color: var(--tertiary-label, rgba(60, 60, 67, 0.6));
            }

            [hidden] + .webp-state,
            .webp-state[hidden] {
                display: none;
            }

            .webp-state-icon {
                font-size: 2rem;
                opacity: 0.6;
            }

            .webp-state-text {
                margin: 0;
                font-size: 0.95rem;
                font-weight: 600;
            }

            .webp-state--error .webp-state-icon {
                color: var(--accent-red, #FF3B30);
            }

            .webp-state--error .webp-state-text {
                color: var(--accent-red, #FF3B30);
            }

            .webp-state--empty .webp-state-icon {
                color: var(--tertiary-label, rgba(60, 60, 67, 0.6));
            }

            .doc.webp-actions {
                gap: 20%;
                padding: 4px;
                border-top: 1px solid var(--separator, rgba(60, 60, 67, 0.15));
                justify-content: flex-end;
            }

            .webp-btn {
                height: 42px;
                padding: 0 18px;
                border-radius: var(--radius-pill, 999px);
                border: none;
                font-size: 0.95rem;
                letter-spacing: -0.2px;
                display: inline-flex;
                gap: 8px;
                transition: transform .15s var(--spring-ios, cubic-bezier(0.32, 0.72, 0.00, 1.00)),
                opacity .15s ease,
                background .15s ease;
            }

            .webp-btn:active {
                transform: scale(0.96);
                opacity: 0.88;
            }

            .webp-btn--print {
                background: var(--fill-secondary, rgba(120, 120, 128, 0.16));
                color: var(--label, #000);
            }

            .webp-btn--save {
                background: var(--accent-blue, #007AFF);
                color: #fff;
            }

            .webp-btn--save:hover {
                opacity: 0.92;
            }

            .webp-btn--close {
                background: var(--fill-tertiary, rgba(118, 118, 128, 0.12));
                color: var(--label, #000);
            }

            .doc-viewer-empty {
                text-align: center;
                padding: 40px 20px;
                color: var(--royal-text-muted);
            }

            .doc-viewer-empty i {
                font-size: 2.5rem;
                opacity: 0.3;
                margin-bottom: 10px;
                display: block;
            }

            .doc-viewer-empty p {
                margin: 0;
            }

            .doc-viewer-docs-grid {
                display: grid;
                grid-template-columns:1fr;
                gap: 8px;
                margin-top: 4px;
            }

            .doc-viewer-doc-card {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                border: 1px solid var(--royal-border-glass, rgba(197, 160, 89, 0.2));
                border-radius: 10px;
                background: var(--ipad-text, #FFFFFF);
                cursor: pointer;
                transition: all 0.15s;
            }

            .doc-viewer-doc-card:hover {
                border-color: var(--RoyalGold-500, #C5A059);
                background: rgba(197, 160, 89, 0.04);
                box-shadow: 0 2px 8px rgba(197, 160, 89, 0.08);
            }

            .doc-viewer-doc-card .doc-thumb {
                width: 44px;
                height: 44px;
                border-radius: 6px;
                overflow: hidden;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(197, 160, 89, 0.06);
            }

            .doc-viewer-doc-card .doc-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .doc-viewer-doc-card .doc-thumb i {
                font-size: 1.3rem;
            }

            .doc-viewer-doc-card .doc-card-info {
                flex: 1;
                min-width: 0;
            }

            .doc-viewer-doc-card .doc-card-name {
                font-weight: 700;
                font-size: 0.82rem;
                color: var(--royal-text-primary);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .doc-viewer-doc-card .doc-card-meta {
                font-size: 0.68rem;
                color: var(--royal-text-secondary);
                margin-top: 2px;
            }

            .doc-viewer-doc-card .doc-card-actions {
                display: flex;
                gap: 4px;
                flex-shrink: 0;
            }

            .doc-viewer-tabs {
                display: flex;
                gap: 4px;
                margin-bottom: 12px;
                flex-wrap: wrap;
            }

            .doc-viewer-tab {
                padding: 5px 5px;
                border-radius: 8px;
                font-size: 0.78rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s;
                background: var(--glass-bg-light, rgba(14, 21, 36, 0.78));
                color: var(--royal-text-secondary);
                border: 1px solid rgba(39, 39, 39, 0.4);
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }

            .doc-viewer-tab:hover {
                background: rgba(197, 160, 89, 0.1);
                color: var(--royal-text-primary);
            }

            .doc-viewer-tab.active {
                background: var(--royal-surface-glass, rgba(255, 255, 255, 0.1));
                color: var(--RoyalGold-500, #C5A059);
                border-color: var(--royal-border-glass);
                box-shadow: 0 2px 8px rgba(197, 160, 89, 0.15);
            }

            .doc-viewer-tab .tab-badge {
                display: inline-block;
                background: rgba(197, 160, 89, 0.18);
                color: var(--RoyalGold-500, #C5A059);
                border-radius: 10px;
                padding: 1px 6px;
                font-size: 0.65rem;
                font-weight: 700;
                min-width: 16px;
                text-align: center;
            }

            .doc-viewer-tab.active .tab-badge {
                background: var(--RoyalGold-500, #C5A059);
                color: #fff;
            }

            .doc-upload-zone {
                border: 2px dashed rgba(197, 160, 89, 0.35);
                border-radius: 12px;
                padding: 24px;
                text-align: center;
                cursor: pointer;
                transition: all 0.2s;
                background: rgba(197, 160, 89, 0.04);
            }

            .doc-upload-zone:hover {
                border-color: var(--RoyalGold-500, #C5A059);
                background: rgba(197, 160, 89, 0.08);
            }

            .doc-upload-zone i {
                font-size: 2rem;
                color: var(--RoyalGold-500);
                margin-bottom: 8px;
                display: block;
            }

            .doc-upload-zone p {
                margin: 4px 0;
                font-size: 0.85rem;
                color: var(--royal-text-secondary);
            }

            .doc-upload-zone .upload-hint {
                font-size: 0.72rem;
                color: var(--royal-text-muted);
            }

            .doc-list {
                margin-top: 16px;
            }

            .doc-list-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 14px;
                border: 1px solid var(--royal-border-glass, rgba(197, 160, 89, 0.2));
                border-radius: 10px;
                margin-bottom: 8px;
                background: rgba(255, 255, 255, 0.5);
                transition: all 0.15s;
            }

            .doc-list-item:hover {
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(197, 160, 89, 0.4);
            }

            .doc-icon {
                font-size: 1.4rem;
                flex-shrink: 0;
            }

            .doc-icon.icon.webp {
                color: #dc3545;
            }

            .doc-icon.icon-img {
                color: #0ea5e9;
            }

            .doc-icon.icon-doc {
                color: #6366f1;
            }

            .doc-icon.icon-default {
                color: #94a3b8;
            }

            .doc-info {
                flex: 1;
                min-width: 0;
            }

            .doc-name {
                font-weight: 700;
                font-size: 0.85rem;
                color: var(--royal-text-primary);
            }

            .doc-meta {
                font-size: 0.72rem;
                color: var(--royal-text-secondary);
                margin-top: 2px;
            }

            .doc-actions {
                display: flex;
                gap: 6px;
                flex-shrink: 0;
            }

            .doc-btn {
                padding: 4px 10px;
                font-size: 0.7rem;
                border-radius: 6px;
                border: 1px solid;
                cursor: pointer;
                background: rgba(39, 39, 39, 0.4);
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-weight: 600;
                transition: all 0.15s;
            }

            .doc-btn-view {
                color: #38bdf8;
                border-color: rgba(56, 189, 248, 0.3);
            }

            .doc-btn-view:hover {
                background: rgba(56, 189, 248, 0.1);
            }

            .doc-btn-del {
                color: #ef4444;
                border-color: rgba(239, 68, 68, 0.3);
            }

            .doc-btn-del:hover {
                background: rgba(239, 68, 68, 0.1);
            }

            .doc-empty {
                text-align: center;
                padding: 30px 10px;
                color: var(--royal-text-muted);
            }

            .doc-empty i {
                font-size: 2rem;
                opacity: 0.3;
                margin-bottom: 8px;
                display: block;
            }

            .doc-upload-form {
                margin-top: 12px;
                display: none;
            }

            .doc-upload-form.active {
                display: block;
            }

            .doc-upload-form select,
            .doc-upload-form input[type="text"] {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid var(--royal-border-glass-hover);
                border-radius: 8px;
                font-size: 0.85rem;
                margin-bottom: 8px;
                background: var(--ipad-text, #FFFFFF);
                color: var(--royal-text-primary);
            }

            .doc-upload-form select:focus,
            .doc-upload-form input[type="text"]:focus {
                outline: none;
                border-color: var(--RoyalGold-500);
            }

            .doc-upload-form .btn-submit {
                padding: 8px 20px;
                background: var(--RoyalGold-gradient);
                color: #fff;
                border: none;
                border-radius: 8px;
                font-weight: 700;
                cursor: pointer;
                font-size: 0.85rem;
            }

            .doc-upload-form .btn-submit:hover {
                opacity: 0.9;
            }

            .doc-upload-form .btn-cancel {
                padding: 8px 14px;
                background: rgba(39, 39, 39, 0.4);
                border: 1px solid var(--royal-border-glass);
                border-radius: 8px;
                font-weight: 600;
                cursor: pointer;
                font-size: 0.85rem;
                color: var(--royal-text-secondary);
            }

            :root, * {
                -webkit-tap-highlight-color: rgba(39, 39, 39, 0.4);
                box-sizing: border-box;
            }


            body {
                background-color: transparent;
                color: var(--label);
                font-family: var(--font-system), sans-serif;
                font-size: var(--type-body);
                line-height: 1.42;
                font-weight: var(--weight-regular);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeLegibility;
                font-feature-settings: "ss01", "ss02", "cv01", "cv11";
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-size: cover;
                transition: background-color var(--duration-slow, 500ms) var(--spring-soft),
                color var(--duration-slow, 500ms) var(--spring-soft),
                background-image var(--duration-slow, 1500ms) var(--spring-soft);
            }

            [data-color-scheme="auto"]:not([data-theme]) body,
            [data-color-scheme="auto"][data-theme="dark"] body
            a {
                color: var(--accent-brand);
                text-decoration: none;
            }

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

            .member-card,
                -webkit-backdrop-filter: var(--glass-blur);
                border: 0.5px solid var(--glass-border);
                border-radius: var(--radius-card);
                box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
                margin-bottom: var(--space-5);
                position: relative;
                transition: transform var(--duration-base) var(--spring-soft),
                box-shadow var(--duration-base) var(--spring-soft);
            }

            .member-card::before,
            .glass-card::before {
                content: "";
                position: absolute;
                border-radius: inherit;
                background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.00) 30%,
                rgba(255, 255, 255, 0.00) 100%);
                mix-blend-mode: overlay;
            }

            .primary-member {
                padding: var(--space-5) var(--space-5);
                display: flex;
                gap: var(--space-4);
            }

            .primary-member .avatar-circle {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: var(--accent-blue, #007AFF);
                justify-content: center;
                color: #fff;
                font-weight: var(--weight-heavy);
                font-size: 22px;
                box-shadow: 0 4px 14px rgba(0, 122, 255, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
            }

            .primary-member .info-main {
                flex: 1;
                min-width: 0;
            }

            .primary-member .name {
                font-size: var(--type-title3);
                font-weight: var(--weight-bold);
                display: block;
                color: var(--label);
                letter-spacing: -0.4px;
            }

            .primary-member .sub {
                font-size: var(--type-footnote);
                color: var(--tertiary-label);
                margin-top: 2px;
            }

            .sub-avatar-strip {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-5);
                padding: var(--space-4) var(--space-5) var(--space-5);
                background: var(--fill-quaternary);
                border-top: var(--hairline);
            }

            .avatar-item {
                width: 56px;
            }

            .avatar-box {
                width: 50px;
                height: 50px;
                background: var(--tertiary-bg);
                margin-bottom: var(--space-2);
                border: 0.5px solid var(--separator);
                font-size: 16px;
                font-weight: var(--weight-semibold);
                transition: transform var(--duration-fast) var(--spring-bouncy);
            }

            .avatar-box:active {
                transform: scale(0.92);
            }

            .nmw-body {
                padding: 16px;
            }

            .nmw-columns {
                display: flex;
                gap: 16px;
                min-height: 0;
            }

            .nmw-col-title {
                font-size: 12px;
                font-weight: 800;
                color: #C5A059;
                text-transform: uppercase;
                letter-spacing: .08em;
                margin-bottom: 12px;
                padding-bottom: 6px;
                border-bottom: 2px solid rgba(197, 160, 89, 0.2);
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .nmw-fgroup {
                margin-bottom: 12px;
            }

            .nmw-fgroup label {
                display: block;
                font-size: 11px;
                font-weight: 700;
                color: #888;
                letter-spacing: .05em;
                margin-bottom: 4px;
                text-transform: uppercase;
            }

            .nmw-fgroup input, .nmw-fgroup select {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 7px;
                font-size: 13px;
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
                box-sizing: border-box;
            }

            .nmw-fgroup input:focus, .nmw-fgroup select:focus {
                outline: none;
                border-color: #C5A059;
            }

            .nmw-row {
                display: flex;
                gap: 10px;
            }

            .nmw-row > * {
                flex: 1;
                min-width: 0;
            }

            .nmw-photo-box {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px;
                background: transparent;
                border-radius: 10px;
                border: 1px dashed rgba(197, 160, 89, 0.4);
                cursor: pointer;
            }

            .nmw-photo-icon {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.06);
                display: flex;
                align-items: center;
                justify-content: center;
                border: 2px solid rgba(197, 160, 89, 0.2);
                flex-shrink: 0;
                overflow: hidden;
            }

            .nmw-photo-icon img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .nmw-actions {
                display: flex;
                gap: 10px;
                margin-top: 6px;
                justify-content: flex-end;
            }

            .dup-ok {
                color: #28a745;
                font-size: 12px;
                font-weight: 600;
            }

            .dup-fail {
                color: #dc3545;
                font-size: 12px;
                font-weight: 600;
            }

            .dup-wait {
                color: #888;
                font-size: 12px;
            }

            @media (max-width: 1000px) {
                .nmw-row {
                    flex-direction: column;
                }
            }

            .avatar-name {
                font-size: var(--type-caption1);
                font-weight: var(--weight-medium);
                color: var(--secondary-label);
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
            }

            .apple-header {
                height: calc(5.5% + var(--status-bar-h));
                padding: var(--status-bar-h) var(--space-4) 0;
                justify-content: space-between;
                background: var(--glass-bg-light);
                border-bottom: var(--hairline);
                position: fixed;
                display: flex;
                top: 0;
                left: 0;
                right: 0;
                -webkit-app-region: drag;
            }

            /* 드래그 영역 안의 클릭 요소는 no-drag로 재설정해야 클릭이 동작함 */

            .apple-header .hdr-icon-btn,
            .apple-header .theme-dropdown,
            .apple-header .theme-dropdown-menu,
            .apple-header .search-input-group,
            .apple-header input,
            .apple-header select,
            .apple-header button,
            .apple-header a,
            .macos-traffic-light,
            .macos-traffic-light button {
                -webkit-app-region: no-drag;
            }

            .apple-header .search-input-group {
                width: 100px;
                min-width: 80px;
            }

            .apple-header .search-input-group input {
                width: 100%;
            }

            .ipad-floating-tab-bar {
                bottom: calc(var(--space-3) + var(--home-bar-h));
                left: 50%;
                transform: translateX(-50%);
                gap: var(--space-1);
                padding: var(--space-2);
                border: 0.5px solid var(--glass-border);
                border-radius: var(--radius-pill);
                box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
            }

            .ipad-tab-item {
                gap: var(--space-2);
                padding: var(--space-2) var(--space-4);
                font-size: var(--type-footnote);
                font-weight: var(--weight-semibold);
                text-decoration: none;
                transition: all var(--duration-fast) var(--spring-soft);
            }

            .ipad-tab-item:hover {
                background: var(--fill-quaternary);
                color: var(--label);
            }

            .ipad-tab-item.active {
                background: var(--accent-brand);
                color: #fff;
                box-shadow: 0 2px 8px rgba(0, 122, 255, 0.30);
            }

            .ipad-tab-item i {
                font-size: 16px;
            }

            .dynamic-island {
                width: 126px;
                height: 37px;
                background: var(--dynamic-island-bg);
                border-radius: var(--capsule-radius);
                position: relative;
            }

            .dynamic-island .island-content {
                position: absolute;
                justify-content: center;
                font-size: var(--type-caption2);
            }

            .btn-apple {
                display: inline-flex;
                padding: var(--space-3) var(--space-5);
                background: var(--accent-brand);
                border: none;
                border-radius: var(--radius-pill);
                font-size: var(--type-headline);
                letter-spacing: -0.2px;
                cursor: pointer;
                transition: transform var(--duration-fast) var(--spring-soft),
                opacity var(--duration-fast) var(--ease-in-out);
                box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
            }

            .btn-apple:hover {
                opacity: 0.92;
            }

            .btn-apple:active {
                transform: scale(0.97);
                opacity: 0.85;
            }

            .btn-apple-secondary {
                background: var(--fill-secondary);
                color: var(--label);
                box-shadow: none;
            }

            .btn-apple-ghost {
                background: transparent;
                color: var(--accent-brand);
            }

            .list-apple {
                background: var(--glass-bg-light);
                border-radius: var(--radius-md);
                margin: var(--space-3) 0;
            }

            .list-apple-item {
                display: flex;
                gap: var(--space-3);
                padding: var(--space-3) var(--space-4);
                transition: background-color var(--duration-fast) var(--ease-in-out);
            }

            .list-apple-item:last-child {
                border-bottom: none;
            }

            .list-apple-item:active {
                background: var(--fill-quaternary);
            }

            @media (prefers-reduced-motion: reduce) {
                *, *::before, *::after {
                    animation-duration: 0.01ms;
                    transition-duration: 0.01ms;
                }
            }

            .home-indicator {
                position: fixed;
                bottom: var(--space-1);
                width: 134px;
                height: 5px;
                background: var(--label);
                border-radius: var(--capsule-radius);
                opacity: 0.5;
            }

            [data-color-scheme="auto"] .home-indicator {
                background: var(--ipad-text, #FFFFFF);
            }

            [data-color-scheme="auto"] .stat-box,
            [data-color-scheme="auto"] .member-card,
            [data-color-scheme="auto"] .glass-card,
            [data-color-scheme="light"] .stat-box,
            [data-color-scheme="light"] .member-card,
            [data-color-scheme="light"] .glass-card {
                background: var(--ipad-card);
                border-color: var(--ipad-border);
                color: var(--ipad-text);
            }

            [data-color-scheme="light"] .stat-box,
            [data-color-scheme="light"] .member-card,
            [data-color-scheme="light"] .glass-card {
                box-shadow: var(--shadow-md);
            }

            [data-color-scheme="light"] .view-header h1 {
                color: var(--label);
                background: none;
                -webkit-background-clip: border-box;
                -webkit-text-fill-color: var(--label);
            }

            [data-color-scheme="auto"] .view-header h1 {
                color: #fff;
                -webkit-text-fill-color: #fff;
            }

            [data-color-scheme="light"] .main-lang-switch {
                background: var(--fill-tertiary);
                border-color: var(--separator);
            }

            [data-color-scheme="light"] .main-lang-switch button {
                color: var(--secondary-label);
            }

            [data-color-scheme="light"] .main-lang-switch button.active {
                background: var(--secondary-bg);
                color: var(--label);
                box-shadow: var(--shadow-sm);
            }

            .spa-drawer {
                background: var(--bg-drawer);
                border-right: 1px solid var(--ipad-border);
            }

            [data-color-scheme="light"] .ipad-floating-tab-bar {
                background: var(--ipad-tab-bar-bg);
                border-color: var(--ipad-border);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
            }

            [data-color-scheme="light"] .ipad-tab-item {
                color: var(--secondary-label);
            }

            [data-color-scheme="light"] .ipad-tab-item:hover {
                background: var(--fill-quaternary);
                color: var(--label);
            }

            [data-color-scheme="light"] .ipad-tab-item.active {
                background: var(--accent-brand);
                color: #fff;
            }

            [data-color-scheme="light"] .hdr-segmented {
                background: var(--fill-tertiary);
            }

            [data-color-scheme="light"] .hdr-seg-item {
                color: var(--secondary-label);
            }

            [data-color-scheme="light"] .hdr-seg-item.active {
                background: var(--secondary-bg);
                box-shadow: var(--shadow-sm);
            }

            [data-color-scheme="light"] .tint-sheet-card {
                background: rgba(255, 255, 255, 0.92);
                border: 1px solid var(--ipad-border);
            }

            .sf {
                display: inline-block;
                width: var(--sf-size, 20px);
                height: var(--sf-size, 20px);
                color: currentColor;
                vertical-align: middle;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.75;
                stroke-linecap: round;
                stroke-linejoin: round;
                transition: transform var(--duration-fast) var(--spring-soft);
            }

            .sf--xs {
                --sf-size: 14px;
            }

            .sf--sm {
                --sf-size: 16px;
            }

            .sf--md {
                --sf-size: 20px;
            }

            .sf--lg {
                --sf-size: 28px;
            }

            .sf--xl {
                --sf-size: 36px;
            }

            .sf--2xl {
                --sf-size: 48px;
            }

            .sf--filled {
                fill: currentColor;
                stroke: none;
            }

            .sf-hierarchical {
                fill: currentColor;
                stroke: none;
                opacity: 0.95;
            }

            [data-tint="purple"] {
                --tint-rgb: 175, 82, 222;
                --tint-surface: rgba(175, 82, 222, 0.06);
                --tint-glow: rgba(175, 82, 222, 0.18);
            }

            [data-tint="pink"] {
                --tint-rgb: 255, 55, 95;
                --tint-surface: rgba(255, 55, 95, 0.06);
                --tint-glow: rgba(255, 55, 95, 0.18);
            }

            [data-tint="red"] {
                --tint-rgb: 255, 59, 48;
                --tint-surface: rgba(255, 59, 48, 0.06);
                --tint-glow: rgba(255, 59, 48, 0.18);
            }

            [data-tint="orange"] {
                --tint-rgb: 255, 149, 0;
                --tint-surface: rgba(255, 149, 0, 0.06);
                --tint-glow: rgba(255, 149, 0, 0.18);
            }

            [data-tint="yellow"] {
                --tint-rgb: 255, 204, 0;
                --tint-surface: rgba(255, 204, 0, 0.06);
                --tint-glow: rgba(255, 204, 0, 0.18);
            }

            [data-tint="green"] {
                --tint-rgb: 52, 199, 89;
                --tint-surface: rgba(52, 199, 89, 0.06);
                --tint-glow: rgba(52, 199, 89, 0.18);
            }

            [data-tint="teal"] {
                --tint-rgb: 90, 200, 250;
                --tint-surface: rgba(90, 200, 250, 0.06);
                --tint-glow: rgba(90, 200, 250, 0.18);
            }

            [data-tint="indigo"] {
                --tint-rgb: 88, 86, 214;
                --tint-surface: rgba(88, 86, 214, 0.06);
                --tint-glow: rgba(88, 86, 214, 0.18);
            }

            [data-tint="mint"] {
                --tint-rgb: 0, 199, 190;
                --tint-surface: rgba(0, 199, 190, 0.06);
                --tint-glow: rgba(0, 199, 190, 0.18);
            }

            [data-tint="brown"] {
                --tint-rgb: 162, 132, 94;
                --tint-surface: rgba(162, 132, 94, 0.06);
                --tint-glow: rgba(162, 132, 94, 0.18);
            }

            [data-tint][data-color-scheme="light"] body,
            [data-tint][data-color-scheme="auto"]:not([data-theme]) body,
            [data-tint][data-color-scheme="auto"][data-theme="dark"] body,
            [data-tint] .glass-card,
            [data-tint] .member-card,
            [data-tint] .stat-box,
            [data-tint] .list-apple {
                background: var(--tint-surface);
                border-color: rgba(var(--tint-rgb), 0.20);
            }

            [data-tint] .spa-drawer,
            [data-tint] .apple-header {
                background: var(--glass-bg-light);
            }

            .macos-window {
                position: relative;
                background: var(--glass-bg-light);
                border-radius: var(--radius-window);
                border: 0.5px solid var(--ipad-border);
                box-shadow: var(--shadow-xl);
            }

            .macos-titlebar {
                height: 38px;
                display: flex;
                gap: 8px;
                padding: 0 12px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%);
                border-bottom: 0.5px solid var(--ipad-border);
                user-select: none;
                -webkit-user-select: none;
            }

            .macos-traffic-light {
                display: inline-flex;
            }

            .macos-traffic-light button {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                border: 0.5px solid rgba(0, 0, 0, 0.12);
                padding: 0;
                transition: filter var(--duration-fast) var(--ease-in-out);
                background-clip: padding-box;
            }

            .macos-traffic-light button:hover {
                filter: brightness(0.85);
            }

            .macos-traffic-light button:active {
                filter: brightness(0.65);
            }

            .macos-light--close {
                background: #FF5F57;
            }

            .macos-light--minimize {
                background: #FEBC2E;
            }

            .macos-light--maximize {
                background: #28C840;
            }

            [data-color-scheme="auto"] .macos-light--close {
                background: #FF6058;
            }

            [data-color-scheme="auto"] .macos-light--minimize {
                background: #FFBD2E;
            }

            [data-color-scheme="auto"] .macos-light--maximize {
                background: #28CA42;
            }

            .macos-traffic-light button::after {
                position: absolute;
                display: flex;
                color: rgba(0, 0, 0, 0.6);
                font-size: 8px;
                font-weight: var(--weight-bold);
                line-height: 1;
                opacity: 0;
                transition: opacity var(--duration-fast, 150ms) var(--ease-in-out, ease);
            }

            .macos-traffic-light button:hover::after {
                opacity: 1;
            }

            .macos-light--close:hover::after {
                content: "\2715";
            }

            .macos-light--minimize:hover::after {
                content: "\2212";
            }

            .macos-light--maximize:hover::after {
                content: "+";
            }

            .macos-title {
                flex: 1;
                font-size: var(--type-footnote);
                font-weight: var(--weight-semibold);
                color: var(--secondary-label);
            }

            .macos-window-body {
                padding: var(--space-4);
            }

            .ipad-split-view {
                display: grid;
                grid-template-columns: 360px 1fr;
                height: calc(100vh - var(--header-h, 56px) - var(--tab-bar-h, 56px));
                background: var(--system-bg);
            }

            .ipad-split-view--with-detail {
                grid-template-columns: 280px 1fr 360px;
            }

            .ipad-split-sidebar {
                background: var(--ipad-sidebar);
                border-right: 0.5px solid var(--ipad-border);
                padding: var(--space-3) 0;
            }

            .ipad-split-content {
                padding: var(--space-5);
            }

            .ipad-split-detail {
                display: flex;
                position: relative;
                background: var(--bg-drawer);
                border-left: 0.5px solid var(--ipad-border);
                padding: var(--space-4);
            }

            .ipad-nav-item {
                gap: var(--space-3);
                padding: var(--space-2) var(--space-4);
                margin: 0 var(--space-2);
                border-radius: var(--radius-md);
                color: var(--label);
                font-size: var(--type-subhead);
                font-weight: var(--weight-medium);
                transition: background-color var(--duration-fast) var(--ease-in-out);
            }

            .ipad-nav-item:hover {
                background: var(--fill-quaternary);
            }

            .ipad-nav-item.active {
                background: var(--accent-brand);
                color: #fff;
                font-weight: var(--weight-semibold);
                box-shadow: 0 1px 3px rgba(0, 122, 255, 0.30);
            }

            .ipad-nav-item.active .sf {
                color: #fff;
            }

            .ipad-nav-item .sf {
                color: var(--accent-brand);
            }

            [data-color-scheme="auto"] .ipad-nav-item .sf {
                color: var(--accent-brand);
            }

            .ipad-nav-section {
                padding: var(--space-3) var(--space-5) var(--space-1);
                font-size: var(--type-caption1);
                color: var(--tertiary-label);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            @media (max-width: 1024px) {
                .ipad-split-view--with-detail {
                    grid-template-columns: 280px 1fr;
                }

                .ipad-split-detail {
                    display: none;
                }
            }
            @media (max-width: 1000px) {
                .ipad-split-view,
                .ipad-split-view--with-detail {
                    grid-template-columns: 1fr;
                }

                .ipad-split-sidebar {
                    display: none;
                }
            }

            .ipad-stack-toolbar {
                position: sticky;
                justify-content: space-between;
                padding: var(--space-3) var(--space-4);
                background: var(--glass-bg-light);
                margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
            }

            .ipad-stack-title {
                font-size: var(--type-title3);
                font-weight: var(--weight-bold);
                color: var(--label);
                letter-spacing: -0.4px;
            }

            .ipad-stack-actions {
                gap: var(--space-2);
            }

            .theme-dropdown {
                position: relative;
                display: inline-block;
            }

            .theme-dropdown-menu {
                position: absolute;
                top: calc(100% + 8px);
                min-width: 180px;
                border: 0.5px solid var(--ipad-border);
                box-shadow: var(--shadow-lg);
                padding: var(--space-1);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-8px) scale(0.96);
                transform-origin: top right;
                transition: opacity var(--duration-fast) var(--ease-in-out),
                transform var(--duration-fast) var(--spring-soft),
                visibility var(--duration-fast) var(--ease-in-out);
            }

            .theme-dropdown.open .theme-dropdown-menu {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0) scale(1);
            }

            .theme-dropdown-menu[hidden] {
                display: none;
            }

            .theme-dropdown-item {
                display: flex;
                gap: var(--space-3);
                width: 100%;
                padding: var(--space-2) var(--space-3);
                background: transparent;
                border: none;
                border-radius: var(--radius-sm);
                font-size: var(--type-subhead);
                font-weight: var(--weight-medium);
                text-align: left;
                transition: background-color var(--duration-fast) var(--ease-in-out);
                font-family: inherit;
            }

            .theme-dropdown-item:hover {
                background: var(--fill-quaternary);
            }

            .theme-dropdown-item.active {
                background: var(--accent-brand);
                color: #fff;
                font-weight: var(--weight-semibold);
            }

            .theme-dropdown-item.active .sf {
                color: #fff;
            }

            .theme-dropdown-item .sf {
                color: var(--accent-brand);
            }

            [data-color-scheme="auto"] .theme-dropdown-item .sf {
                color: var(--accent-brand);
            }

            [data-color-scheme="auto"] .theme-dropdown-item.active .sf {
                color: #fff;
            }

            .header-col {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                min-width: 0;
            }

            .header-col--center {
                justify-content: center;
            }

            .header-col--right {
                justify-content: flex-end;
                flex-wrap: wrap;
            }

            .header-col--left > * {
                flex-shrink: 0;
            }

            .spa-title {
                font-size: var(--type-headline);
                color: var(--label);
                letter-spacing: -0.2px;
            }

            .welcome-main {
                font-size: var(--type-subhead);
                color: var(--secondary-label);
            }

            .welcome-main .fw-bold {
                color: var(--label);
                font-weight: var(--weight-semibold);
            }

            .welcome-date {
                font-size: var(--type-caption1);
                color: var(--tertiary-label);
                margin-left: var(--space-2);
            }

            .hdr-icon-btn {
                width: 60px;
                background: transparent;
                border-radius: 35%;
                display: inline-flex;
                justify-content: center;
                transition: background-color var(--duration-fast) var(--ease-in-out),
                transform var(--duration-fast) var(--spring-soft);
                position: relative;
            }

            .hdr-icon-btn:hover {
                background: var(--fill-quaternary);
            }

            .hdr-icon-btn:active {
                transform: scale(0.92);
                background: var(--fill-tertiary);
            }

            .hdr-icon-btn--accent {
                color: var(--accent-brand);
            }

            .hdr-pill {
                gap: var(--space-2);
                height: 32px;
                padding: 0 var(--space-4);
                border-radius: var(--radius-pill);
                font-size: var(--type-footnote);
                transition: transform var(--duration-fast) var(--spring-soft),
                opacity var(--duration-fast) var(--ease-in-out);
            }

            .hdr-pill--in {
                background: var(--accent-green);
                color: #fff;
            }

            .hdr-pill--out {
                background: var(--accent-red);
                color: #fff;
            }

            .hdr-pill:active {
                transform: scale(0.96);
            }

            .hdr-segmented {
                background: var(--fill-tertiary);
                border-radius: var(--radius-md);
                padding: 2px;
                gap: 0;
            }

            .hdr-seg-item {
                background: transparent;
                padding: var(--space-1) var(--space-3);
                font-size: var(--type-caption1);
                color: var(--secondary-label);
                border-radius: 11px;
                transition: all var(--duration-fast) var(--spring-soft);
                min-width: 32px;
            }

            .hdr-seg-item:hover {
                color: var(--label);
            }

            .hdr-seg-item.active {
                background: var(--secondary-bg);
                color: var(--label);
                box-shadow: var(--shadow-sm);
            }

            [data-color-scheme="auto"] .hdr-seg-item.active {
                background: var(--quaternary-bg);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
            }

            .tint-dot {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--accent-brand);
                border: 2px solid var(--secondary-bg);
                box-shadow: 0 0 0 1px var(--separator);
                transition: background var(--duration-base) var(--spring-soft);
            }

            .tint-dot[data-current-tint="blue"] {
                background: #007AFF;
            }

            .tint-dot[data-current-tint="purple"] {
                background: #AF52DE;
            }

            .tint-dot[data-current-tint="pink"] {
                background: #FF375F;
            }

            .tint-dot[data-current-tint="red"] {
                background: #FF3B30;
            }

            .tint-dot[data-current-tint="orange"] {
                background: #FF9500;
            }

            .tint-dot[data-current-tint="yellow"] {
                background: #FFCC00;
            }

            .tint-dot[data-current-tint="green"] {
                background: #34C759;
            }

            .tint-dot[data-current-tint="teal"] {
                background: #5AC8FA;
            }

            .tint-dot[data-current-tint="indigo"] {
                background: #5856D6;
            }

            .tint-dot[data-current-tint="mint"] {
                background: #00C7BE;
            }

            .tint-dot[data-current-tint="brown"] {
                background: #A2845E;
            }

            .tint-sheet {
                position: fixed;
                inset: 0;
                z-index: 700; /* zi-700 */
            }

            .tint-sheet[hidden] {
                display: none;
            }

            .tint-sheet.open {
                pointer-events: auto;
            }

            .tint-sheet-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0);
                transition: background var(--duration-base) var(--ease-in-out);
            }

            .tint-sheet.open .tint-sheet-backdrop {
                background: rgba(0, 0, 0, 0.35);
            }

            .tint-sheet-card {
                position: absolute;
                bottom: 0;
                transform: translate(-50%, 100%);
                width: min(560px, 100%);
                background: var(--glass-bg-light);
                border-radius: var(--radius-xl) var(--radius-xl) 0 0;
                box-shadow: var(--shadow-xl);
                padding: var(--space-3) var(--space-5) var(--space-6);
                transition: transform var(--duration-base) var(--spring-soft);
            }

            .tint-sheet.open .tint-sheet-card {
                transform: translate(-50%, 0);
            }

            .tint-sheet-handle {
                width: 40px;
                height: 5px;
                background: var(--quaternary-label);
                border-radius: var(--capsule-radius);
                margin: 0 auto var(--space-4);
            }

            .tint-sheet-title {
                font-size: var(--type-title3);
                font-weight: var(--weight-bold);
                margin: 0 0 var(--space-4);
                text-align: center;
            }

            .tint-grid {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: var(--space-4);
            }

            .tint-swatch {
                aspect-ratio: 1 / 1;
                border: none;
                background: var(--c);
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: transform var(--duration-fast) var(--spring-bouncy);
                position: relative;
            }

            .tint-swatch:hover {
                transform: scale(1.08);
            }

            .tint-swatch:active {
                transform: scale(0.92);
            }

            .tint-swatch.active::after {
                content: "✓";
                position: absolute;
                display: flex;
                color: #fff;
            }

            .ipad-sym {
                width: 22px;
                height: 22px;
                display: inline-block;
            }

            .ipad-sym--home {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/></svg>") center/contain no-repeat;
            }

            .ipad-sym--search {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") center/contain no-repeat;
            }

            .ipad-sym--card {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='3'/><path d='M2 10h20'/><path d='M6 15h4'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='3'/><path d='M2 10h20'/><path d='M6 15h4'/></svg>") center/contain no-repeat;
            }

            .ipad-sym--bank {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6'/><path d='M5 10v9h14v-9'/><path d='M8 14v5M12 14v5M16 14v5'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6'/><path d='M5 10v9h14v-9'/><path d='M8 14v5M12 14v5M16 14v5'/></svg>") center/contain no-repeat;
            }

            .ipad-sym--adduser {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='4'/><path d='M2 21c0-4 3-6 7-6s7 2 7 6'/><path d='M19 8v6M16 11h6'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='4'/><path d='M2 21c0-4 3-6 7-6s7 2 7 6'/><path d='M19 8v6M16 11h6'/></svg>") center/contain no-repeat;
            }

            .ipad-sym--list {
                background: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 9h8M8 13h8M8 17h5'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 9h8M8 13h8M8 17h5'/></svg>") center/contain no-repeat;
            }

            .spa-notif-badge {
                top: 4px;
                right: 4px;
                min-width: 16px;
                height: 16px;
                background: var(--accent-red);
                border-radius: var(--capsule-radius);
                font-size: 10px;
                font-weight: 700;
                padding: 0 4px;
            }

            [data-time-of-day="dawn"] body,
            [data-time-of-day="morning"] body,
            [data-time-of-day="day"] body,
            [data-time-of-day="sunset"] body,
            [data-time-of-day="night"] body,
            [data-color-scheme="auto"]:not([data-theme])[data-time-of-day="dawn"] body,
            [data-color-scheme="auto"]:not([data-theme])[data-time-of-day="morning"] body,
            [data-color-scheme="auto"]:not([data-theme])[data-time-of-day="day"] body,
            [data-color-scheme="auto"]:not([data-theme])[data-time-of-day="sunset"] body,
            [data-color-scheme="auto"]:not([data-theme])[data-time-of-day="night"] body,
            [data-color-scheme="auto"][data-theme="dark"][data-time-of-day="dawn"] body,
            [data-color-scheme="auto"][data-theme="dark"][data-time-of-day="morning"] body,
            [data-color-scheme="auto"][data-theme="dark"][data-time-of-day="day"] body,
            [data-color-scheme="auto"][data-theme="dark"][data-time-of-day="sunset"] body,
            [data-color-scheme="auto"][data-theme="dark"][data-time-of-day="night"] body,
            [data-theme="RoyalGold"][data-time-of-day] body,
            [data-theme="RoyalNavy"][data-time-of-day] body,
            #spaRoot,
            .spa-main,
            .stat-grid {
                display: grid;
                gap: 10px;
                margin-bottom: 24px;
            }

            .stat-item {
                background: var(--fill-quaternary);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-md, 14px);
                padding: var(--space-3) var(--space-2);
                position: relative;
                transition: all 0.2s;
            }

            .stat-item .icon {
                font-size: 1.1rem;
                margin-bottom: 0;
                opacity: 0.85;
            }

            .stat-item .stat-content {
                display: flex;
                gap: 2px;
                min-height: 0;
            }

            .stat-item .value {
                font-family: "SF Mono", Consolas, monospace;
                font-size: clamp(0.9rem, 5.5cqi, 1.4rem);
                font-weight: 900;
            }

            .stat-item .label {
                font-size: clamp(0.55rem, 2.8cqi, 0.72rem);
                color: #94a3b8;
                font-weight: 700;
                letter-spacing: 0.3px;
            }

            .stat-arrow {
                font-size: 10px;
                color: #666;
                position: absolute;
                top: 4px;
                right: 8px;
            }

            .stat-clickable {
                cursor: pointer;
            }

            .stat-clickable:hover {
                border-color: var(--RoyalGold-500, #C9A74E);
            }

            .hdr-dropdown {
                padding: 0 10px;
                background: var(--fill-tertiary);
                border-radius: var(--radius-md);
                color: var(--label);
                font-size: var(--type-footnote);
                font-weight: var(--weight-semibold);
                outline: none;
                transition: background 0.15s ease;
            }

            .hdr-dropdown:hover {
                background: var(--fill-secondary);
            }

            .hdr-dropdown:focus {
                background: var(--fill-secondary);
                border-color: var(--accent-brand);
            }

            .main-lang-switch {
                height: 100vh;
            }

            .main-lang-switch option {
                color: var(--label);
                background: var(--secondary-bg);
            }

            .clock-btn {
                display: inline-flex;
                height: 32px;
                padding: 0 14px;
                border: none;
                border-radius: var(--radius-pill);
                transition: transform 0.15s var(--spring-soft), opacity 0.15s;
            }

            .clock-btn.clock-in {
                background: var(--accent-green);
                color: #fff;
            }

            .clock-btn.clock-out {
                background: var(--accent-red);
                color: #fff;
            }

            .clock-btn:active {
                transform: scale(0.96);
            }

            .clock-btn[hidden] {
                display: none;
            }

            .spa-notif {
                width: 36px;
                height: 36px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                color: var(--accent-brand);
                transition: background 0.15s ease;
            }

            .spa-notif:hover {
                background: var(--fill-quaternary);
            }

            .spa-notif-dropdown {
                position: fixed;
                top: 56px;
                right: 12px;
                width: 320px;
                max-height: 420px;
                background: var(--glass-bg-light);
                backdrop-filter: var(--glass-blur-regular);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-xl);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
                /* zi-650 */
                opacity: 0;
                transform: translateY(-8px) scale(0.96);
                transition: opacity 0.2s var(--spring-soft), transform 0.25s var(--spring-soft);
            }

            .spa-notif-dropdown.open {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }

            .spa-notif-item {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: var(--space-3) var(--space-4);
                cursor: pointer;
                border-bottom: 0.5px solid var(--separator);
                transition: background 0.15s;
            }

            .spa-notif-item:hover {
                background: var(--fill-quaternary);
            }

            .spa-notif-item .n-icon {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 13px;
            }

            .spa-notif-item .n-text {
                flex: 1;
                min-width: 0;
            }

            .spa-notif-item .n-title {
                font-size: 13px;
                font-weight: var(--weight-semibold);
                color: var(--label);
            }

            .spa-notif-item .n-desc {
                font-size: 11px;
                color: var(--secondary-label);
                margin-top: 2px;
            }

            .spa-notif-empty {
                padding: 32px 16px;
                text-align: center;
                color: var(--tertiary-label);
                font-size: 13px;
            }

            .guest-live-section {
                background: var(--glass-bg-light);
                backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
                -webkit-backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
                border-radius: var(--radius-md, 14px);
                padding: var(--space-3) var(--space-4);
                margin-bottom: 12px;
            }

            .guest-live-section .guest-live-header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--label, #fff);
            }

            .guest-live-section .guest-live-badge {
                background: var(--accent-green, #34C759);
                color: #fff;
                font-size: 0.7rem;
                font-weight: 800;
                padding: 2px 8px;
                border-radius: 8px;
                min-width: 20px;
            }

            .guest-live-section .guest-live-list {
                background: rgba(46, 204, 113, 0.08);
                padding: 6px;
                min-height: 28px;
            }

            .guest-live-section .guest-live-list .guest-live-row {
                padding: 5px 8px;
                background: var(--fill-quaternary);
                border-radius: 6px;
                margin-bottom: 3px;
                font-size: 0.8rem;
                color: var(--label, #fff);
            }

            .guest-live-section .guest-live-list .guest-live-row:last-child {
                margin-bottom: 0;
            }

            .guest-live-section .guest-live-list .guest-live-time {
                color: var(--tertiary-label, #94a3b8);
            }

            .guest-live-section .guest-live-empty {
                font-size: 0.75rem;
                padding: 4px;
            }

            .section-title {
                font-size: 1.1rem;
                margin-bottom: 16px;
                color: var(--royal-text-gold, #c9a74e);
                gap: 10px;
            }

            .section-title i {
                color: var(--royal-text-gold, #c9a74e);
                font-size: 0.9rem;
            }

            .dept-compact {
                display: flex;
                justify-content: space-evenly;
                gap: 8px;
                margin-bottom: 24px;
            }

            .dept-row {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: var(--space-2) var(--space-3);
                background: var(--glass-bg-light);
                border-radius: var(--radius-md, 14px);
                transition: all 0.15s var(--spring-soft);
            }

            .dept-row:hover {
                border-color: rgba(201, 167, 78, 0.3);
                background: rgba(201, 167, 78, 0.04);
            }

            .dept-row-top {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .dept-row-icon {
                width: 28px;
                text-align: center;
                font-size: 1rem;
            }

            .dept-row-name {
                flex: 1;
                font-weight: 700;
                color: var(--label, #fff);
            }

            .dept-row-count {
                font-size: 0.8rem;
                color: var(--tertiary-label, #94a3b8);
            }

            .dept-row-members {
                display: flex;
                align-items: center;
                gap: 4px;
                padding-left: 38px;
            }

            .dept-avatar {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: var(--accent-blue, #007AFF);
                color: #fff;
                font-size: 0.7rem;
                font-weight: 800;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 2px solid var(--system-bg, #000);
                margin-left: -6px;
            }

            .dept-avatar:first-child {
                margin-left: 0;
            }

            .dept-more {
                font-size: 0.7rem;
                color: var(--tertiary-label, #94a3b8);
                margin-left: 4px;
            }

            .shortcut-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                margin-bottom: 24px;
            }

            .shortcut-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                padding: var(--space-3) var(--space-2);
                color: var(--label, #fff);
                background: var(--glass-bg-light);
                border: 0.5px solid var(--separator);
                transition: transform 0.3s var(--spring-soft, cubic-bezier(0.2, 1, 0.2, 1)),
                background 0.2s, border-color 0.2s;
            }

            .shortcut-card:hover {
                transform: scale(1.05);
                background: var(--glass-bg-light, rgba(14, 21, 36, 0.78));
            }

            .shortcut-icon {
                width: 56px;
                height: 56px;
                border-radius: var(--radius-md, 14px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
            }

            .shortcut-info {
                text-align: center;
            }

            .shortcut-name {
                font-size: 0.85rem;
                font-weight: 700;
                color: var(--label, #fff);
            }

            .shortcut-desc {
                font-size: 0.7rem;
                color: var(--tertiary-label, #94a3b8);
                margin-top: 2px;
            }

            .admin-section {
                background: rgba(201, 167, 78, 0.04);
                padding: var(--space-4);
            }

            .d-flex {
                display: flex;
            }

            .flex-wrap {
                flex-wrap: wrap;
            }

            .gap-2 {
                gap: 0.5rem;
            }

            .fw-bold {
                font-weight: 700;
            }

            .home-cal-week {
                margin-bottom: 24px;
            }

            .week-calendar {
                margin-bottom: 0;
            }

            .week-nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;
                gap: 10px;
            }

            .week-nav-btn {
                background: var(--fill-quaternary, rgba(255, 255, 255, 0.03));
                border-radius: 10px;
                padding: 8px 16px;
                font-size: 0.85rem;
                font-weight: 700;
                transition: all 0.2s var(--spring-soft);
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-family: inherit;
            }

            .week-nav-btn:hover {
                border-color: var(--ipad-border-hover, rgba(197, 160, 89, 0.35));
                background: var(--fill-tertiary, rgba(255, 255, 255, 0.06));
            }

            .week-range {
                font-size: 0.95rem;
                font-weight: 700;
                letter-spacing: 0.5px;
            }

            .week-legend {
                display: flex;
                gap: 16px;
                margin-bottom: 10px;
                padding: 0 4px;
            }

            .legend-item {
                font-size: 0.72rem;
                color: var(--tertiary-label, #94a3b8);
            }

            .legend-dot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 4px;
            }

            .dot-work {
                background: #4ade80;
            }

            .dot-off {
                background: #f87171;
            }

            .dot-absent {
                background: #ef4444;
            }

            .week-grid {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 6px;
                width: 100%;
            }

            .week-day {
                background: var(--fill-quaternary, rgba(255, 255, 255, 0.03));
                border-radius: var(--radius-md, 14px);
                padding: 10px 8px;
                min-height: 60px;
                transition: all 0.15s;
            }

            .week-day:hover,
            .week-day.today {
                border-color: var(--ipad-gold, #c9a74e);
                box-shadow: 0 0 14px rgba(201, 167, 78, 0.18);
            }

            .week-day-header {
                border-bottom: 1px solid var(--ipad-border, rgba(255, 255, 255, 0.06));
                padding-bottom: 4px;
                margin-bottom: 4px;
            }

            .week-day-section {
                font-size: 0.72rem;
            }

            .week-day-section .section-label {
                opacity: 0.7;
                margin-bottom: 2px;
            }

            .week-day-section .work-label {
                color: #4ade80;
            }

            .week-day-section .off-label {
                color: #f87171;
            }

            .day-name {
                color: #c9a74e;
                font-weight: 700;
                font-size: 0.78rem;
            }

            .day-date {
                color: #94a3b8;
                font-weight: 400;
                font-size: 0.7rem;
                margin-left: 4px;
            }

            .sched-row {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 2px 0;
                font-size: 0.72rem;
            }

            .sched-dot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .sched-dot-off {
                opacity: 0.5;
            }

            .sched-name {
                color: var(--label, #fff);
            }

            .sched-name-off {
                color: #f87171;
                opacity: 0.7;
            }

            .sched-name.regular-off {
                color: #fbbf24;
            }

            .sched-note {
                color: var(--tertiary-label, #94a3b8);
                font-size: 0.7rem;
                margin-left: 4px;
            }

            .sched-badge {
                font-size: 0.7rem;
                padding: 1px 6px;
                border-radius: 4px;
                font-weight: 700;
                cursor: default;
                flex-shrink: 0;
                line-height: 1.4;
            }

            .sched-badge.badge-work {
                background: rgba(74, 222, 128, 0.15);
                color: #4ade80;
            }

            .sched-badge.badge-off {
                background: rgba(248, 113, 113, 0.15);
                color: #f87171;
            }

            .sched-badge.badge-absent {
                background: rgba(239, 68, 68, 0.25);
                color: #f87171;
                border: 1px solid rgba(239, 68, 68, 0.4);
            }

            .sched-badge.badge-clickable {
                cursor: pointer;
                transition: all 0.15s;
            }

            .sched-badge.badge-clickable:hover {
                transform: scale(1.08);
                box-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
            }

            .sched-badge.badge-readonly {
                opacity: 0.5;
                cursor: default;
            }

            .pop-stat-item {
                background: var(--glass-bg-light);
                padding: var(--space-3) var(--space-2);
                position: relative;
                transition: all 0.2s;
            }

            .pop-stat-item .icon {
                font-size: 1.1rem;
                margin-bottom: 4px;
                opacity: 0.85;
            }

            .pop-stat-item .value {
                font-size: 1.05rem;
                font-weight: 900;
                color: var(--label, #fff);
            }

            .pop-stat-item .label {
                font-size: 0.62rem;
                color: var(--tertiary-label, #94a3b8);
                margin-top: 2px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }

            .pop-stat-clickable {
                cursor: pointer;
            }

            .pop-stat-clickable:hover {
                border-color: var(--RoyalGold-500, #C9A74E);
                background: rgba(201, 167, 78, 0.08);
            }

            .pop-stat-arrow {
                font-size: 10px;
                color: #666;
                position: absolute;
                top: 4px;
                right: 8px;
            }

            .m-stat-card {
                background: var(--glass-bg-light);
            }

            .m-stat-card:hover {
                background: rgba(201, 167, 78, 0.08);
            }

            .m-stat-card.paid {
                border-color: rgba(74, 222, 128, 0.3);
                color: #4ade80;
            }

            .m-stat-card.unpaid {
                border-color: rgba(248, 113, 113, 0.3);
                color: #f87171;
            }

            .m-stat-label {
                font-size: 0.7rem;
                color: var(--tertiary-label, #94a3b8);
                font-weight: 700;
                margin-bottom: 4px;
            }

            .m-stat-value {
                font-size: 1.1rem;
                font-weight: 900;
                color: var(--label, #fff);
            }

            .m-stat-type-pill {
                flex: 0 0 auto;
                background: var(--fill-quaternary);
                border: 0.5px solid rgba(255, 255, 255, 0.08);
                border-radius: 20px;
                padding: 6px 14px;
                font-size: 0.78rem;
            }

            .m-stat-type-pill:hover {
                border-color: var(--RoyalGold-500, #C9A74E);
                background: rgba(201, 167, 78, 0.08);
            }

            .m-stat-type-pill strong {
                color: #c9a74e;
                margin-left: 4px;
            }

            .mb-4 {
                margin-bottom: 1.5rem;
            }

            .ios-badge {
                display: inline-block;
                padding: 1px 6px;
                border-radius: 6px;
                font-size: 9px;
                font-weight: 700;
                background: var(--app-card-bg, rgba(255, 255, 255, 0.05));
                color: rgba(255, 255, 255, 0.8);
            }

            .badge-item {
                display: inline-block;
                background: rgba(34, 197, 94, 0.12);
                color: #22c55e;
                padding: 3px 10px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.3px;
            }

            .login-gate {
                opacity: 0.5;
            }

            .login-gate:hover {
                opacity: 0.8;
            }

            .guest-live-list {
                background: rgba(46, 204, 113, 0.08);
                border-radius: 8px;
                padding: 6px;
                min-height: 28px;
            }

            .guest-live-list .guest-live-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 8px;
                background: var(--fill-quaternary);
                border-radius: 6px;
                margin-bottom: 3px;
                font-size: 0.8rem;
                color: var(--label, #fff);
            }

            .guest-live-list .guest-live-row:last-child {
                margin-bottom: 0;
            }

            .guest-live-time {
                color: var(--tertiary-label, #94a3b8);
                font-size: 0.7rem;
            }

            .guest-live-empty {
                text-align: center;
                color: var(--tertiary-label, #94a3b8);
                font-size: 0.75rem;
                padding: 4px;
            }

            .guest-live-badge {
                background: var(--accent-green, #34C759);
                color: #fff;
                font-size: 0.7rem;
                font-weight: 800;
                padding: 2px 8px;
                border-radius: 8px;
                min-width: 20px;
                text-align: center;
            }

            .guest-live-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 8px;
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--label, #fff);
            }

            .spa-modal-overlay {
                position: fixed;
                background: rgba(0, 0, 0, 0.45);
                backdrop-filter: blur(24px) saturate(180%);
                -webkit-backdrop-filter: blur(24px) saturate(180%);
                /* zi-750 */
                display: flex;
                justify-content: center;
                padding: 24px;
            }

            .ipad-nav-link span {
                flex: 1 1 auto;
                min-width: 0;
            }

            .mac-login-overlay {
                position: fixed;
                inset: 0;
                /* zi-2 */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mac-login-overlay.hidden {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.4s ease, visibility 0.4s ease;
            }

            .mac-login-card {
                text-align: center;
                color: var(--label);
                max-width: 900px;
                max-height: 100dvh;
                scrollbar-width: none;
                -ms-overflow-style: none;
                border-radius: 48px;
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(40px) saturate(200%);
                -webkit-backdrop-filter: blur(40px) saturate(200%);
                border: 1px solid rgba(255, 255, 255, 0.12);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 2rem;
                text-decoration: none;
                transition: all 0.6s var(--spring-ios);
                position: relative;
                box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
                animation: cardIn 1.2s var(--spring-ios) both;
                overflow: hidden;
            }

            .mac-login-card::-webkit-scrollbar {
                display: none;
            }

            @keyframes macLoginFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
            }

            .mac-login-welcome {
                color: var(--label);
                font-size: var(--mac-type-body);
                font-weight: 500;
                margin-bottom: 32px;
                opacity: 0.8;
            }

            .mac-login-switcher {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px 24px;
                margin-bottom: 0;
                padding: 8px 0;
            }

            .mac-login-user {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                width: 80px;
                cursor: pointer;
                transition: transform 0.2s var(--spring-ios);
            }

            .mac-login-user:hover {
                transform: translateY(-3px);
            }

            .mac-login-user:active {
                transform: scale(0.95);
            }

            .mac-login-user-avatar {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--fill-primary), var(--fill-quaternary));
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                transition: all 0.2s var(--spring-ios);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }

            .mac-login-user.active .mac-login-user-avatar {
                box-shadow: 0 0 0 3px var(--accent-blue), 0 4px 16px rgba(0, 0, 0, 0.25);
            }

            .mac-login-user-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .mac-login-user-avatar i {
                font-size: 28px;
                color: var(--secondary-label);
            }

            .mac-login-user-name {
                font-size: var(--mac-type-caption1);
                color: var(--label);
                font-weight: 500;
                text-align: center;
                line-height: 1.2;
                max-width: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            #macLoginForm {
                animation: macLoginFadeIn 0.35s ease both;
            }

            .mac-login-avatar {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--fill-primary), var(--fill-quaternary));
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
                margin: 0 auto 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .mac-login-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .mac-login-avatar i {
                font-size: 36px;
                color: var(--secondary-label);
            }

            .mac-login-name {
                font-size: var(--mac-type-title2);
                font-weight: 600;
                margin-bottom: 24px;
            }

            .mac-login-hint {
                font-size: var(--mac-type-footnote);
                color: var(--secondary-label);
                margin-bottom: 10px;
                min-height: 1.3em;
                transition: color 0.2s ease;
            }

            .mac-login-hint.error {
                color: var(--accent-red);
            }

            .mac-login-input-wrap {
                position: relative;
                width: 240px;
                margin: 0 auto 16px;
            }

            .mac-login-input {
                width: 100%;
                padding: 10px 40px 10px 16px;
                border-radius: 10px;
                border: 1px solid var(--separator);
                background: var(--fill-primary);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                color: var(--label);
                font-size: var(--mac-type-body);
                text-align: center;
                outline: none;
                transition: all 0.2s ease;
                letter-spacing: 0.3em;
            }

            .mac-login-input::placeholder {
                color: var(--tertiary-label);
                letter-spacing: 0;
            }

            .mac-login-input:focus {
                background: var(--fill-secondary);
                border-color: var(--accent-blue);
                box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
            }

            .mac-login-input::-ms-reveal,
            .mac-login-input::-ms-clear {
                display: none;
            }

            .mac-login-toggle {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                background: none;
                border: none;
                color: var(--secondary-label);
                cursor: pointer;
                font-size: 13px;
                padding: 4px;
                transition: color 0.15s ease;
            }

            .mac-login-toggle:hover {
                color: var(--label);
            }

            .mac-login-actions {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 4px;
            }

            .mac-login-btn {
                padding: 8px 20px;
                border-radius: 8px;
                border: none;
                background: var(--fill-secondary);
                color: var(--label);
                font-size: var(--mac-type-body);
                font-weight: 500;
                cursor: pointer;
                transition: all 0.15s ease;
            }

            .mac-login-btn:hover {
                background: var(--fill-primary);
            }

            .mac-login-btn:active {
                transform: scale(0.97);
            }

            .mac-login-back {
                margin-top: 18px;
                background: none;
                border: none;
                color: var(--secondary-label);
                font-size: var(--mac-type-footnote);
                cursor: pointer;
                transition: color 0.15s ease;
            }

            .mac-login-back:hover {
                color: var(--label);
            }

            .mac-login-shutdown {
                position: absolute;
                bottom: 32px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                color: var(--secondary-label);
                font-size: var(--mac-type-caption1);
                cursor: pointer;
                background: none;
                border: none;
                transition: color 0.15s ease;
            }

            .mac-login-shutdown:hover {
                color: var(--label);
            }

            .mac-login-shutdown i {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                background: var(--fill-primary);
                transition: background 0.15s ease;
            }

            .mac-login-shutdown:hover i {
                background: var(--fill-secondary);
            }

            @media (max-height: 1000px) {
                .mac-login-card {
                    padding: 20px 16px;
                }

                .mac-login-user-avatar {
                    width: 56px;
                    height: 56px;
                }

                .mac-login-user {
                    width: 68px;
                    gap: 4px;
                }

                .mac-login-switcher {
                    gap: 12px 16px;
                }

                .mac-login-avatar {
                    width: 80px;
                    height: 80px;
                    margin-bottom: 14px;
                }

                .mac-login-name {
                    margin-bottom: 16px;
                }
            }

            /* ── Auto-update indicator & toast ─────────────────────────────── */

            .menubar-update {
                padding: 4px 8px;
                border-radius: 6px;
                transition: background 0.15s ease;
                user-select: none;
            }

            .menubar-update:hover {
                background: var(--app-card-bg, rgba(255, 255, 255, 0.05));
            }

            .menubar-update:active {
                background: var(--glass-bg-mid, rgba(14, 21, 36, 0.60));
            }

            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }

            .update-toast .fa-spin {
                display: inline-block;
            }

            .menubar-divider {
                height: 1px;
                background: var(--separator, rgba(60, 60, 67, 0.15));
                margin: 4px 0;
            }

            .shortcut {
                opacity: .5;
                margin-left: auto;
                font-size: var(--type-caption1);
                color: var(--tertiary-label);
            }

            /* ══════════════════════════════════════════
   누락 클래스 추가 (Apple theme 일관)
   ══════════════════════════════════════════ */

            /* ── register.js ── */

            .reg-page {
                width: 100%;
                min-height: 100vh;
                box-sizing: border-box;
                color: var(--label);
                font-family: var(--font-system);
            }

            .reg-grid-row {
                display: grid;
                grid-auto-flow: column;
                gap: var(--space-1) var(--space-1);
                padding: var(--space-1) 0;
            }

            .reg-card {
                background: var(--app-card-bg);
                border: .5px solid var(--royal-border-glass);
                border-radius: var(--radius-card);
                box-shadow: var(--shadow-md);
                padding: var(--space-3) var(--space-4);
            }

            .reg-compact-grid {
                display: grid;
                grid-template-columns:1fr auto;
                gap: var(--space-5);
                align-items: flex-start
            }

            .reg-page {
                position: relative;
                min-height: 100%;
            }

            .reg-page .reg-compact-grid {
                display: grid;
                grid-template-columns: 1fr 0.7fr;
                gap: var(--space-1);
                align-items: flex-start;
            }

            @media (max-width: 1000px) {
                .reg-page .reg-compact-grid {
                    grid-template-columns: 1fr;
                }
            }

            .reg-frow {
                display: flex;
                flex-wrap: wrap;
                gap: 8px 10px;
                align-items: stretch;
                justify-content: flex-start;
            }

            .reg-payment-box {
                background: var(--secondary-bg);
                border: 1px solid var(--separator);
                border-radius: var(--radius-md, 14px);
                padding: var(--space-1);
                margin-bottom: var(--space-1);
            }

            .reg-payment-box .reg-pb-title {
                font-size: var(--type-caption1, 12px);
                font-weight: 600;
                color: var(--accent-blue, #c9a74e);
                margin-bottom: 2px;
            }

            .reg-photo-box {
                width: 120px;
                height: 140px;
                border-radius: var(--radius-sm, 10px);
                border: 1px solid var(--separator);
                overflow: hidden;
                cursor: pointer;
                background: var(--photo-placeholder, rgba(0, 0, 0, 0.3));
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .reg-photo-box i.fa-user {
                color: var(--tertiary-label);
                font-size: 56px;
            }

            .reg-photo-box img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .reg-photo-actions {
                display: flex;
                gap: 3px;
                margin-top: var(--space-1);
            }

            .reg-sub-tab-nav {
                display: flex;
                gap: 3px;
                margin-bottom: 10px;
                border-bottom: 1px solid var(--separator);
            }

            .reg-sub-tab-btn {
                flex: 1;
                padding: var(--space-1);
                background: var(--secondary-bg);
                border: 1px solid var(--separator);
                border-bottom: none;
                border-radius: var(--radius-sm, 10px) var(--radius-sm, 10px) 0 0;
                color: var(--tertiary-label);
                font-size: var(--type-caption2, 11px);
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                transition: all 0.2s;
            }

            .reg-sub-tab-btn:hover {
                background: rgba(var(--accent-blue-rgb, 201, 167, 78), 0.08);
                color: var(--accent-blue, #c9a74e);
            }

            .reg-sub-tab-btn.active {
                background: rgba(var(--accent-blue-rgb, 201, 167, 78), 0.12);
                color: var(--accent-blue, #c9a74e);
                border-color: rgba(var(--accent-blue-rgb, 201, 167, 78), 0.3);
                font-weight: 700;
            }

            .reg-sub-tab-btn.done {
                background: rgba(52, 211, 153, 0.08);
                color: var(--success, #34d399);
                border-color: rgba(52, 211, 153, 0.2);
            }

            .reg-sub-tab-btn.done.active {
                background: rgba(52, 211, 153, 0.15);
            }

            .reg-sub-tab-panel {
                display: none;
            }

            .reg-sub-tab-panel.active {
                display: block;
            }

            .reg-info-top {
                display: flex;
                gap: var(--space-2);
                margin-bottom: var(--space-2);
            }

            .reg-info-top .reg-info-photo-col {
                width: 120px;
                flex-shrink: 0;
            }

            .reg-info-top .reg-info-fields {
                flex: 1;
            }

            .reg-sub-photo {
                width: 56px;
                height: 56px;
                border-radius: var(--radius-sm, 10px);
                border: 1px solid var(--separator);
                overflow: hidden;
                cursor: pointer;
                background: var(--photo-placeholder, rgba(0, 0, 0, 0.3));
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .reg-sub-photo i.fa-user {
                color: var(--tertiary-label);
                font-size: 18px;
            }

            .reg-sub-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .reg-sub-meta-row {
                display: flex;
                gap: var(--space-2);
                align-items: center;
                margin-bottom: var(--space-2);
            }

            .reg-sub-num-readonly {
                background: var(--fill-tertiary, rgba(0, 0, 0, 0.1));
                color: var(--accent-blue, #c9a74e);
                font-size: var(--type-caption2, 11px);
            }

            .reg-sub-done-row {
                text-align: right;
                margin-top: var(--space-1);
            }

            .reg-sub-panel-col {
                padding-top: var(--space-1);
            }

            .reg-member-num-readonly {
                background: var(--fill-tertiary, rgba(0, 0, 0, 0.1));
                color: var(--accent-blue, #c9a74e);
            }

            .reg-section-title {
                font-size: 1rem;
                font-weight: 700;
                color: var(--accent-blue, #c9a74e);
                margin-bottom: 10px;
                border-bottom: 1px solid var(--separator);
                padding-bottom: 6px;
            }

            .reg-fg {
                flex: 1 1 160px;
                width: auto;
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: nowrap;
            }

            .reg-fg > label {
                flex-shrink: 0;
                font-size: 12px;
                white-space: nowrap;
            }

            .reg-fg > input {
                flex: 1;
                min-width: 0;
            }

            .reg-fg > select {
                flex: 0 0 auto;
                width: auto;
                min-width: 85px;
                max-width: 130px;
            }

            .reg-fg.w-xs {
                flex: 0 0 auto;
                width: 90px;
            }

            .reg-fg.w-sm {
                flex: 0 0 auto;
                width: 120px;
            }

            .reg-fg.w-md {
                flex: 0 0 auto;
                width: 160px;
            }

            .reg-fg.w-lg {
                flex: 0 0 auto;
                width: 220px;
            }

            .reg-fg.w-full {
                flex: 1 1 100%;
                width: 100%;
            }

            .reg-grid-3 {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px 10px;
            }

            .reg-grid-4 {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 8px 10px;
            }

            .reg-grid-3 .reg-fg, .reg-grid-4 .reg-fg {
                flex: initial;
                width: 100%;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .reg-grid-3 .reg-fg > label, .reg-grid-4 .reg-fg > label {
                flex-shrink: 0;
                font-size: 12px;
                white-space: nowrap;
            }

            .reg-grid-3 .reg-fg > input, .reg-grid-4 .reg-fg > input {
                flex: 1;
                min-width: 0;
            }

            .reg-grid-3 .reg-fg > select, .reg-grid-4 .reg-fg > select {
                flex: 0 0 auto;
                width: auto;
                min-width: 85px;
                max-width: 130px;
            }

            .reg-num-row, .reg-name-row {
                display: flex;
                gap: 4px;
                align-items: center;
            }

            .reg-num-row input, .reg-name-row input {
                flex: 1;
                min-width: 0;
            }

            .reg-dup-result {
                font-size: 10px;
                margin: 0;
                min-height: 0;
                white-space: nowrap;
            }

            .reg-inline-tools {
                display: flex;
                gap: 4px;
                align-items: center;
                flex: 0 0 auto;
                flex-wrap: wrap;
            }

            .reg-inline-tools .btn {
                flex: 0 0 auto;
            }

            .reg-line-membership .reg-fg.w-lg {
                flex: 1 1 220px;
            }

            .reg-btn-row {
                display: flex;
                gap: 8px;
                margin-top: 14px;
            }

            .reg-btn-row button {
                flex: 1;
            }

            .reg-btn-row button:last-child {
                flex: 1.5;
            }

            input, select, textarea {
                background: var(--fill-tertiary);
                border-color: var(--separator);
                color: var(--label);
            }

            input::placeholder, textarea::placeholder {
                color: var(--tertiary-label);
            }

            /* ── card_print.js ── */

            .pw-member-name {
                font-weight: var(--weight-bold);
                color: var(--royal-text-gold);
            }

            .pw-btn-photo-save, .pw-btn-qr-save, .pw-btn-card-save, .pw-btn-data-save, .pw-btn-back-save, .pw-btn-print {
            }

            /* ── stat-utils.js ── */

            .acc-stat-card {
                background: var(--app-card-bg);
                border: .5px solid var(--royal-border-glass);
                border-radius: var(--radius-md);
                padding: var(--space-4);
                text-align: center;
                box-shadow: var(--shadow-md);
            }

            .acc-stat-label {
                font-size: var(--type-caption1);
                color: var(--tertiary-label);
                font-weight: var(--weight-semibold);
                margin-bottom: var(--space-1);
            }

            .acc-stat-value {
                font-size: var(--type-headline);
                font-weight: var(--weight-heavy);
                letter-spacing: -.5px;
            }

            .acc-stat-sub {
                font-size: var(--type-caption2);
                color: var(--quaternary-label);
                margin-top: var(--space-1);
            }

            .set-stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--space-2);
                padding: var(--space-3);
                background: var(--fill-quaternary);
                border-radius: var(--radius-sm);
            }

            .pop-guest-name-track {
                font-size: var(--type-largetitle);
                font-weight: var(--weight-heavy);
                min-height: 1.6em;
                text-align: center;
            }

            .pop-pop-guest-name-track-empty {
                opacity: .6;
            }

            /* ── _mobRow.js ── */

            .detail-info-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--space-3) 0;
                border-bottom: .5px solid var(--royal-border-glass);
            }

            .detail-info-row.full {
                flex-direction: column;
                align-items: stretch
            }

            .detail-info-label {
                font-size: var(--type-caption1);
                font-weight: var(--weight-semibold);
                color: var(--tertiary-label);
                margin-right: var(--space-5);
                flex-shrink: 0
            }

            .detail-info-input {
                background: var(--fill-quaternary);
                border: .5px solid var(--royal-border-glass);
                border-radius: var(--radius-xs);
                padding: var(--space-2) var(--space-3);
                color: var(--label);
                font-size: var(--type-caption1);
                flex: 1;
                min-width: 0;
            }

            .detail-info-value {
                font-size: var(--type-caption1);
                color: var(--label);
                text-align: right;
                flex: 1;
            }

            .detail-info-value.highlight {
                color: var(--royal-text-gold);
                font-weight: var(--weight-bold);
            }

            /* ── doc_modal /.webp_form_buttons /.webp_form_viewer ── */

            .doc-form-buttons {
                margin-top: var(--space-5);
                padding: var(--space-4);
                background: var(--app-card-bg);
                border: .5px solid var(--royal-border-glass);
                border-radius: var(--radius-md);
            }

            .doc-form-label {
                font-size: var(--type-subhead);
                font-weight: var(--weight-bold);
                color: var(--tertiary-label);
                margin-bottom: var(--space-4);
                display: flex;
                align-items: center;
                gap: var(--space-2);
            }

            .doc-modal-box--viewer {
                max-width: 70%;
                max-height: 90vh;
            }

            .doc.webp-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--space-5);
            }

            /* ── member.js ── */

            .member-page {
                width: 100%;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                flex: 1;
                box-sizing: border-box;
                overflow: hidden;
            }

            /* ── menubar.js ── */

            .has-menubar {
                padding-top: var(--mac-menubar-h);
            }

            .search-result-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--space-3) var(--space-4);
                cursor: pointer;
                border-radius: var(--radius-sm);
                transition: background var(--duration-fast) var(--ease-in-out);
            }

            .search-result-item:hover {
                background: var(--royal-surface-glass-hover);
            }

            /* ── index.html ── */

            .noise-overlay {
                position: fixed;
                inset: 0;
                pointer-events: none;
                opacity: .03;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
                background-repeat: repeat
            }

            .avatar-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--radius-avatar);
            }

            /* ── membership-types.js ── */

            .type-cb {
                width: 13px;
                height: 13px;
                accent-color: var(--accent-gold);
                cursor: pointer;
            }

            /* doc placeholder — Apple */

            .doc-placeholder {
                padding: 32px 20px;
                text-align: center;
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-card);
            }

            .doc-placeholder-title {
                font-size: 1.1rem;
                font-weight: 700;
                color: var(--label);
            }

            .doc-placeholder-desc {
                margin-top: 6px;
                color: var(--secondary-label);
                font-size: 0.85rem;
            }

            /* ── membership-types Apple (theme.css 연동) ── */

            .mt-wrap {
                background: transparent;
                color: var(--label);
                font-family: var(--font-system);
                padding: 12px;
                min-height: 100%;
                box-sizing: border-box;
            }

            .mt-layout {
                display: grid;
                grid-template-columns:1fr 260px;
                gap: 14px;
                align-items: start;
            }

            .mt-card {
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-card);
                padding: 14px;
                margin-bottom: 14px;
                box-shadow: var(--glass-shadow);
            }

            .mt-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 11px;
            }

            .mt-table th {
                background: var(--fill-quaternary);
                padding: 5px 7px;
                text-align: left;
                color: var(--secondary-label);
                font-weight: 600;
                border-bottom: 0.5px solid var(--separator);
            }

            .mt-table td {
                padding: 4px 7px;
                border-bottom: 0.5px solid var(--separator);
                color: var(--label);
            }

            .editable {
                border: 1px dashed var(--accent-gold);
                background: rgba(201, 167, 78, 0.08);
                border-radius: 4px;
                cursor: pointer;
                position: relative;
                padding: 2px 6px 2px 4px !important;
            }

            .editable:hover {
                background: rgba(201, 167, 78, 0.18);
                border-style: solid;
            }

            .editable::after {
                content: "✎ 클릭";
                font-size: 9px;
                color: var(--accent-gold);
                margin-left: 6px;
                opacity: 0.9;
                font-weight: 700;
            }

            .editable:hover::after {
                opacity: 1;
            }

            .mt-group-card {
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-card);
                padding: 12px;
            }

            .mt-group-item {
                background: var(--secondary-bg);
                border: 0.5px solid var(--separator);
                border-radius: var(--radius-button);
                padding: 7px 9px;
                display: flex;
                justify-content: space-between;
            }

            /* ══════════════════════════════════════════════════════════════
               1. 기본 레이아웃 & 컨테이너 (Default Desktop Base)
               ══════════════════════════════════════════════════════════════ */
            html, body {
                min-width: 320px;
                height: 100%;
                overflow: hidden;
            }

            #spa-app, .app-root, .mt-wrap {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            #spa-app {
                height: calc(100vh - var(--mac-menubar-h));
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                display: flex;
                flex-direction: column;
            }

            #spa-app > .dash-scroll, #spa-app .dash-scroll {
                height: 100%;
            }

            .app-root {
                height: calc(100vh - 52px);
            }

            /* ══════════════════════════════════════════════════════════════
               2. 가로 1000px 이하 모바일/태블릿 반응형 통합 규칙
                  (Mobile / Tablet Responsive Breakpoint <= 1000px)
               ══════════════════════════════════════════════════════════════ */
            @media (max-width: 1000px) {
                /* [메뉴바 2단 전환] 위: 시스템 컨트롤 / 아래: 사용자 및 네비게이션 */
                :root {
                    --mac-menubar-h: 60px;
                }

                #mac-menubar.apple-header {
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    height: auto;
                    gap: 2px;
                    padding: 6px 8px 2px;
                }

                #mac-menubar > .header-col {
                    width: 100%;
                    flex-wrap: wrap;
                }

                #mac-menubar > .header-col:nth-child(2) {
                    order: 1;
                }

                #mac-menubar > .header-col:nth-child(1) {
                    order: 2;
                }

                /* [대시보드] 1열 그리드 및 통계 카드 2열/중앙 정렬 */
                .dash-grid {
                    grid-template-columns: 1fr !important;
                }

                .dash-stats {
                    justify-content: center;
                }

                .dash-stats .dash-stat {
                    min-width: 100px;
                    flex: 1 1 calc(50% - 12px);
                }

                /* [회원권 관리] 단일 열 및 툴바 래핑 */
                .mt-layout {
                    grid-template-columns: 1fr !important;
                }

                .mt-form-grid {
                    grid-template-columns: 1fr !important;
                }

                .mt-toolbar {
                    flex-wrap: wrap;
                }

                .mt-card {
                    padding: 10px;
                }

                /* [회원 관리 분할 뷰] 세로 스택 전환 */
                .admin-split-view {
                    flex-direction: column !important;
                }

                .admin-split-sidebar {
                    width: 100% !important;
                    min-width: 100% !important;
                    max-height: 240px;
                }

                .admin-split-content {
                    width: 100% !important;
                }

                .ipad-split-view,
                .ipad-split-view--with-detail {
                    grid-template-columns: 1fr !important;
                }

                .ipad-split-sidebar,

                /* [신규 등록 & 폼 레이아웃] 단일 열 전환 */
                .reg-page .reg-compact-grid {
                    grid-template-columns: 1fr !important;
                }

                .nmw-row {
                    flex-direction: column;
                }

                .gfrow, .gdual {
                    flex-direction: column;
                }

                .ggline {
                    grid-template-columns: 24px 1fr;
                }

                .ggline .gfield:nth-child(n+4) {
                    grid-column: 2;
                }

                /* [게스트 레이아웃] */
                .guest-layout {
                    flex-direction: column;
                }

                /* [주간 일정] */
                .week-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                }
            }

            /* ══════════════════════════════════════════════════════════════
               3. 높이 반응형 규칙 (Height Breakpoints)
               ══════════════════════════════════════════════════════════════ */
            @media (max-height: 700px) {
                .dash-stats {
                    gap: 8px;
                    margin-bottom: 12px;
                }

                .dash-card {
                    padding: 10px;
                }

            }

            @media (max-height: 600px) {
                .dash-scroll {
                    padding: 12px;
                }

                .mt-wrap {
                    padding: 8px;
                }

                .mac-login-card {
                    padding: 20px 16px;
                }

            }

            /* ══════════════════════════════════════════════════════════════
               4. 텍스트 한 줄 유지 & 테이블 레이아웃
               ══════════════════════════════════════════════════════════════ */
            .ds-lbl, .dc-title, .dc-desc, .mt-h5, .mt-h6, .gname, .doc-card-name, .welcome-main, .hdr-btn-label {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
            }

            .mt-table {
                table-layout: fixed;
            }

            .mt-table th, .mt-table td {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 160px;
            }

            .mt-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .doc-card-name, .gname, #menubarUserName {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* 긴 한글·영문 혼합은 keep-all로 단어 단위 유지 */
            .member-card, .mt-card, .glass-card {
                overflow-wrap: break-word;
                word-break: keep-all;
            }

            /* ══════════════════════════════════════════════════════════════
               5. 시스템 유틸리티 & 상태 클래스
               ══════════════════════════════════════════════════════════════ */
            .bg-layer {
                background-image: var(--bg-image);
            }

            .sr-only {
                position: absolute;
                left: -9999px;
                top: -9999px;
            }

            .user-area {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .welcome-main {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-weight: 700;
            }

            .auto-scale {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: clip;
            }

            .reg-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.8);
                align-items: center;
                justify-content: center;
            }

            .reg-overlay.show {
                display: flex;
            }

            .mt-add-body.hidden {
                display: none;
            }

            .mt-add-body.show {
                display: block;
            }
            /* ===========================================================
               [Royal Club Admin: member_detail.js 전용 클래스]
               =========================================================== */

            .spa-page {
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 0;
            }

            .docs-page {
                background: var(--primary-bg, #0a0a14);
                color: var(--text-main, #FFFFFF);
            }

            .topic-results {
                margin-bottom: 8px;
                font-size: 0.72rem;
                color: var(--tertiary-label, rgba(255,255,255,0.6));
            }

            .py-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 6px 18px;
                font-size: 0.72rem;
                font-weight: 600;
                border-radius: 6px;
                border: 1px solid var(--border-light, rgba(255,255,255,0.10));
                background: var(--quinary-bg, #2E3D5C);
                color: var(--text-main, #FFFFFF);
                cursor: pointer;
                transition: all 0.15s;
                font-family: inherit;
            }

            .py-btn:hover {
                background: var(--quaternary-bg, #233049);
                border-color: var(--border-gold, rgba(255,214,10,0.30));
            }

            .py-btn:active {
                transform: scale(0.97);
            }

            .py-line-edit {
                font-size: 0.72rem;
                padding: 3px 6px;
                border-radius: 6px;
                border: 1px solid var(--border-light, rgba(255,255,255,0.10));
                background: var(--secondary-bg, #FFFFFF);
                color: var(--text-main, #FFFFFF);
                font-family: inherit;
                outline: none;
                min-width: 100px;
                max-width: 100%;
            }

            .py-line-edit:focus {
                border-color: var(--accent-blue-deep, #1B64C4);
                box-shadow: 0 0 0 2px rgba(27, 100, 196, 0.2);
            }

            .py-line-edit[readonly] {
                opacity: 0.7;
                cursor: not-allowed;
            }

            /* Font Awesome Icon Base Styles */

            .fas {
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
            }

            .fa-qrcode::before {
                content: "\f02d";
            }

            .fa-signature::before {
                content: "\f5b6";
            }

            .fa-check::before {
                content: "\f00c";
            }