/* ============================================================
   H2GO Design System Themes — 5 Concept CSS Variable Overrides
   ============================================================
   로드 순서: colors_and_type.css → … → design-themes.css (last)
   body[data-design="..."] 속성으로 활성화. 기본(default)은 속성 없음.
   ============================================================ */

/* ─── 01. Neon Holo — 사이버펑크 디스패치 터미널 ─────────────── */
body[data-design="neon-holo"] {
    --bg-black:               #08030f;
    --bg-dark:                #14082a;
    --bg-card:                #1a0830;
    --h2-blue:                #ec4899;
    --h2-blue-light:          #a855f7;
    --h2-blue-dark:           #be185d;
    --go-gray:                #6d5db8;
    --go-gray-dark:           #4a3d8a;
    --text-primary:           #f5f3ff;
    --text-white:             #f5f3ff;
    --text-muted:             #a78bfa;
    --border-color:           rgba(168,85,247,0.35);
    --surface-soft:           rgba(168,85,247,0.08);
    --surface-soft-border:    rgba(168,85,247,0.22);
    --surface-overlay:        rgba(8,3,15,0.92);
    --surface-deep:           rgba(20,8,42,0.80);
    --surface-deep-strong:    rgba(10,4,26,0.92);
    --field-readonly:         rgba(20,8,42,0.80);
    --ambient-primary:        rgba(236,72,153,0.16);
    --ambient-secondary:      rgba(34,211,238,0.08);
    --ambient-grid:           rgba(168,85,247,0.08);
    --shadow-card:            0 1px 0 rgba(168,85,247,0.10) inset, 0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow-primary:    0 4px 20px rgba(236,72,153,0.38);
    --shadow-fab:             0 8px 24px rgba(236,72,153,0.40);
    --status-success:         #a3e635;
    --status-success-bg:      rgba(163,230,53,0.12);
    --status-success-bd:      rgba(163,230,53,0.38);
    --status-warn:            #fbbf24;
    --status-warn-bg:         rgba(251,191,36,0.12);
    --status-warn-bd:         rgba(251,191,36,0.38);
    --status-danger:          #f472b6;
    --status-danger-bg:       rgba(244,114,182,0.12);
    --status-danger-bd:       rgba(244,114,182,0.38);
    --status-info:            #22d3ee;
    --status-info-bg:         rgba(34,211,238,0.12);
    --status-info-bd:         rgba(34,211,238,0.30);
    --status-cancel:          #fb923c;
    --status-cancel-bg:       rgba(251,146,60,0.14);
    --status-cancel-bd:       rgba(251,146,60,0.40);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              4px;
    --radius-pill:            4px;
    --font-sans:              'Space Grotesk','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 01-L. Neon Holo Light ───────────────────────────────── */
body[data-design="neon-holo"].theme-light {
    --bg-black:               #f8f0ff;
    --bg-dark:                #f0e8ff;
    --bg-card:                #fff8ff;
    --h2-blue:                #be185d;
    --h2-blue-light:          #a855f7;
    --h2-blue-dark:           #831843;
    --go-gray:                #7c5cb8;
    --go-gray-dark:           #5a3a90;
    --text-primary:           #1a1228;
    --text-white:             #1a1228;
    --text-muted:             #7c5cb8;
    --border-color:           rgba(168,85,247,0.22);
    --surface-soft:           rgba(168,85,247,0.06);
    --surface-soft-border:    rgba(168,85,247,0.16);
    --surface-overlay:        rgba(248,240,255,0.96);
    --surface-deep:           rgba(235,224,252,0.94);
    --surface-deep-strong:    rgba(220,204,248,0.96);
    --field-readonly:         rgba(235,224,252,0.94);
    --ambient-primary:        rgba(190,24,93,0.08);
    --ambient-secondary:      rgba(168,85,247,0.06);
    --ambient-grid:           rgba(26,18,40,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 32px rgba(26,18,40,0.08);
    --shadow-glow-primary:    0 4px 16px rgba(190,24,93,0.24);
    --shadow-fab:             0 8px 24px rgba(190,24,93,0.28);
    --status-success:         #166534;
    --status-success-bg:      rgba(22,101,52,0.10);
    --status-success-bd:      rgba(22,101,52,0.32);
    --status-warn:            #92400e;
    --status-warn-bg:         rgba(146,64,14,0.10);
    --status-warn-bd:         rgba(146,64,14,0.28);
    --status-danger:          #be185d;
    --status-danger-bg:       rgba(190,24,93,0.10);
    --status-danger-bd:       rgba(190,24,93,0.28);
    --status-info:            #0369a1;
    --status-info-bg:         rgba(3,105,161,0.10);
    --status-info-bd:         rgba(3,105,161,0.24);
    --status-cancel:          #6b21a8;
    --status-cancel-bg:       rgba(107,33,168,0.08);
    --status-cancel-bd:       rgba(107,33,168,0.22);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              4px;
    --radius-pill:            4px;
}

/* ─── 03. Sunset Warm — 휴머니스트 따스함 ───────────────────── */
body[data-design="sunset-warm"] {
    --bg-black:               #f7efe4;
    --bg-dark:                #fdf8ef;
    --bg-card:                #fffbf5;
    --h2-blue:                #c45a3a;
    --h2-blue-light:          #e8a878;
    --h2-blue-dark:           #8f3a22;
    --go-gray:                #7a6759;
    --go-gray-dark:           #5a4a3c;
    --text-primary:           #2d201a;
    --text-white:             #2d201a;
    --text-muted:             #7a6759;
    --border-color:           #e6d8c4;
    --surface-soft:           rgba(196,90,58,0.06);
    --surface-soft-border:    rgba(196,90,58,0.15);
    --surface-overlay:        rgba(253,248,239,0.96);
    --surface-deep:           rgba(230,216,196,0.92);
    --surface-deep-strong:    rgba(210,196,178,0.96);
    --field-readonly:         rgba(230,216,196,0.92);
    --ambient-primary:        rgba(196,90,58,0.10);
    --ambient-secondary:      rgba(232,168,120,0.08);
    --ambient-grid:           rgba(58,40,26,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.90) inset, 0 10px 32px rgba(45,32,26,0.08);
    --shadow-glow-primary:    0 4px 16px rgba(196,90,58,0.24);
    --shadow-fab:             0 8px 24px rgba(196,90,58,0.28);
    --status-success:         #6b9e5a;
    --status-success-bg:      rgba(107,158,90,0.14);
    --status-success-bd:      rgba(107,158,90,0.40);
    --status-warn:            #b48a2a;
    --status-warn-bg:         rgba(180,138,42,0.14);
    --status-warn-bd:         rgba(180,138,42,0.40);
    --status-danger:          #c45a3a;
    --status-danger-bg:       rgba(196,90,58,0.10);
    --status-danger-bd:       rgba(196,90,58,0.32);
    --status-info:            #2c3e5a;
    --status-info-bg:         rgba(44,62,90,0.10);
    --status-info-bd:         rgba(44,62,90,0.26);
    --status-cancel:          #7a4a5c;
    --status-cancel-bg:       rgba(122,74,92,0.10);
    --status-cancel-bd:       rgba(122,74,92,0.30);
    --radius-sm:              8px;
    --radius-md:              12px;
    --radius-lg:              16px;
    --font-sans:              'Inter','Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono',monospace;
}

/* ─── 03-D. Sunset Warm Dark ──────────────────────────────── */
body[data-design="sunset-warm"].theme-dark {
    --bg-black:               #180d06;
    --bg-dark:                #21130a;
    --bg-card:                #2a1a10;
    --h2-blue:                #e07254;
    --h2-blue-light:          #f0a07a;
    --h2-blue-dark:           #a84830;
    --go-gray:                #a08070;
    --go-gray-dark:           #7a6050;
    --text-primary:           #f0e4d4;
    --text-white:             #f0e4d4;
    --text-muted:             #b09080;
    --border-color:           rgba(224,114,84,0.22);
    --surface-soft:           rgba(224,114,84,0.08);
    --surface-soft-border:    rgba(224,114,84,0.20);
    --surface-overlay:        rgba(24,13,6,0.94);
    --surface-deep:           rgba(33,19,10,0.88);
    --surface-deep-strong:    rgba(20,10,4,0.94);
    --field-readonly:         rgba(33,19,10,0.88);
    --ambient-primary:        rgba(224,114,84,0.12);
    --ambient-secondary:      rgba(240,160,122,0.07);
    --ambient-grid:           rgba(240,228,212,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.40);
    --shadow-glow-primary:    0 4px 18px rgba(224,114,84,0.34);
    --shadow-fab:             0 8px 24px rgba(224,114,84,0.38);
    --status-success:         #5a9448;
    --status-success-bg:      rgba(90,148,72,0.12);
    --status-success-bd:      rgba(90,148,72,0.36);
    --status-warn:            #d4a040;
    --status-warn-bg:         rgba(212,160,64,0.12);
    --status-warn-bd:         rgba(212,160,64,0.36);
    --status-danger:          #e07254;
    --status-danger-bg:       rgba(224,114,84,0.12);
    --status-danger-bd:       rgba(224,114,84,0.34);
    --status-info:            #7ab4e8;
    --status-info-bg:         rgba(122,180,232,0.10);
    --status-info-bd:         rgba(122,180,232,0.26);
    --status-cancel:          #b07880;
    --status-cancel-bg:       rgba(176,120,128,0.10);
    --status-cancel-bd:       rgba(176,120,128,0.26);
    --radius-sm:              8px;
    --radius-md:              12px;
    --radius-lg:              16px;
}

/* ─── 09. Urban Grid — 어반·오렌지·다크 ─────────────────────── */
body[data-design="urban-grid"] {
    --bg-black:               #0f1115;
    --bg-dark:                #13171d;
    --bg-card:                #1a1f27;
    --h2-blue:                #f55434;
    --h2-blue-light:          #ff7a5c;
    --h2-blue-dark:           #c03818;
    --go-gray:                #6e7587;
    --go-gray-dark:           #3f4754;
    --text-primary:           #e9ecf2;
    --text-white:             #e9ecf2;
    --text-muted:             #a8aebe;
    --border-color:           rgba(245,84,52,0.25);
    --surface-soft:           rgba(245,84,52,0.08);
    --surface-soft-border:    rgba(245,84,52,0.22);
    --surface-overlay:        rgba(15,17,21,0.93);
    --surface-deep:           rgba(19,23,29,0.84);
    --surface-deep-strong:    rgba(10,12,16,0.93);
    --field-readonly:         rgba(19,23,29,0.84);
    --ambient-primary:        rgba(245,84,52,0.12);
    --ambient-secondary:      rgba(245,84,52,0.06);
    --ambient-grid:           rgba(245,245,250,0.025);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow-primary:    0 4px 20px rgba(245,84,52,0.35);
    --shadow-fab:             0 8px 24px rgba(245,84,52,0.38);
    --status-success:         #2dd4bf;
    --status-success-bg:      rgba(45,212,191,0.10);
    --status-success-bd:      rgba(45,212,191,0.32);
    --status-warn:            #f59e0b;
    --status-warn-bg:         rgba(245,158,11,0.10);
    --status-warn-bd:         rgba(245,158,11,0.32);
    --status-danger:          #f55434;
    --status-danger-bg:       rgba(245,84,52,0.10);
    --status-danger-bd:       rgba(245,84,52,0.32);
    --status-info:            #a8aebe;
    --status-info-bg:         rgba(168,174,190,0.08);
    --status-info-bd:         rgba(168,174,190,0.24);
    --status-cancel:          #6e7587;
    --status-cancel-bg:       rgba(110,117,135,0.10);
    --status-cancel-bd:       rgba(110,117,135,0.28);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              3px;
    --radius-pill:            3px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 09-L. Urban Grid Light ──────────────────────────────── */
body[data-design="urban-grid"].theme-light {
    --bg-black:               #f5f3f0;
    --bg-dark:                #ebe8e3;
    --bg-card:                #ffffff;
    --h2-blue:                #d93018;
    --h2-blue-light:          #f05a3a;
    --h2-blue-dark:           #a02210;
    --go-gray:                #6a6e7a;
    --go-gray-dark:           #484c5c;
    --text-primary:           #1a1c22;
    --text-white:             #1a1c22;
    --text-muted:             #6a6e7a;
    --border-color:           rgba(26,28,34,0.14);
    --surface-soft:           rgba(217,48,24,0.06);
    --surface-soft-border:    rgba(217,48,24,0.14);
    --surface-overlay:        rgba(245,243,240,0.96);
    --surface-deep:           rgba(235,232,227,0.94);
    --surface-deep-strong:    rgba(222,218,211,0.96);
    --field-readonly:         rgba(235,232,227,0.94);
    --ambient-primary:        rgba(217,48,24,0.08);
    --ambient-secondary:      rgba(240,90,58,0.06);
    --ambient-grid:           rgba(26,28,34,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 24px rgba(26,28,34,0.07);
    --shadow-glow-primary:    0 4px 14px rgba(217,48,24,0.22);
    --shadow-fab:             0 8px 24px rgba(217,48,24,0.26);
    --status-success:         #166534;
    --status-success-bg:      rgba(22,101,52,0.10);
    --status-success-bd:      rgba(22,101,52,0.28);
    --status-warn:            #92400e;
    --status-warn-bg:         rgba(146,64,14,0.10);
    --status-warn-bd:         rgba(146,64,14,0.28);
    --status-danger:          #d93018;
    --status-danger-bg:       rgba(217,48,24,0.08);
    --status-danger-bd:       rgba(217,48,24,0.24);
    --status-info:            #0369a1;
    --status-info-bg:         rgba(3,105,161,0.08);
    --status-info-bd:         rgba(3,105,161,0.22);
    --status-cancel:          #6a6e7a;
    --status-cancel-bg:       rgba(106,110,122,0.08);
    --status-cancel-bd:       rgba(106,110,122,0.22);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              3px;
    --radius-pill:            3px;
}

/* ─── 10. Organic Garden — 유기농·세이지·서체 ───────────────── */
body[data-design="organic-garden"] {
    --bg-black:               #f6f1e6;
    --bg-dark:                #ede8d8;
    --bg-card:                #fefcf6;
    --h2-blue:                #5f8d59;
    --h2-blue-light:          #7aad74;
    --h2-blue-dark:           #3f6438;
    --go-gray:                #8a7861;
    --go-gray-dark:           #6a5c48;
    --text-primary:           #2d3a2e;
    --text-white:             #2d3a2e;
    --text-muted:             #6b7a64;
    --border-color:           rgba(45,58,46,0.14);
    --surface-soft:           rgba(95,141,89,0.06);
    --surface-soft-border:    rgba(95,141,89,0.16);
    --surface-overlay:        rgba(254,252,246,0.96);
    --surface-deep:           rgba(237,232,216,0.94);
    --surface-deep-strong:    rgba(220,214,197,0.96);
    --field-readonly:         rgba(237,232,216,0.94);
    --ambient-primary:        rgba(95,141,89,0.08);
    --ambient-secondary:      rgba(196,158,108,0.06);
    --ambient-grid:           rgba(45,58,46,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 28px rgba(45,58,46,0.06);
    --shadow-glow-primary:    0 4px 14px rgba(95,141,89,0.22);
    --shadow-fab:             0 8px 24px rgba(95,141,89,0.26);
    --status-success:         #3f6438;
    --status-success-bg:      rgba(63,100,56,0.10);
    --status-success-bd:      rgba(63,100,56,0.30);
    --status-warn:            #b48a2a;
    --status-warn-bg:         rgba(180,138,42,0.10);
    --status-warn-bd:         rgba(180,138,42,0.28);
    --status-danger:          #9a3020;
    --status-danger-bg:       rgba(154,48,32,0.08);
    --status-danger-bd:       rgba(154,48,32,0.24);
    --status-info:            #2c4a5c;
    --status-info-bg:         rgba(44,74,92,0.08);
    --status-info-bd:         rgba(44,74,92,0.22);
    --status-cancel:          #8a7861;
    --status-cancel-bg:       rgba(138,120,97,0.08);
    --status-cancel-bd:       rgba(138,120,97,0.24);
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              16px;
    --radius-pill:            999px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono',monospace;
}

/* ─── 10-D. Organic Garden Dark ───────────────────────────── */
body[data-design="organic-garden"].theme-dark {
    --bg-black:               #0a1208;
    --bg-dark:                #0f1a0e;
    --bg-card:                #162016;
    --h2-blue:                #7aad74;
    --h2-blue-light:          #9acc96;
    --h2-blue-dark:           #5a8254;
    --go-gray:                #8a9880;
    --go-gray-dark:           #647060;
    --text-primary:           #dce8d6;
    --text-white:             #dce8d6;
    --text-muted:             #8aaa82;
    --border-color:           rgba(122,173,116,0.20);
    --surface-soft:           rgba(122,173,116,0.08);
    --surface-soft-border:    rgba(122,173,116,0.18);
    --surface-overlay:        rgba(10,18,8,0.94);
    --surface-deep:           rgba(15,26,14,0.88);
    --surface-deep-strong:    rgba(8,14,6,0.94);
    --field-readonly:         rgba(15,26,14,0.88);
    --ambient-primary:        rgba(122,173,116,0.10);
    --ambient-secondary:      rgba(196,158,108,0.06);
    --ambient-grid:           rgba(220,232,214,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.42);
    --shadow-glow-primary:    0 4px 14px rgba(122,173,116,0.26);
    --shadow-fab:             0 8px 24px rgba(122,173,116,0.30);
    --status-success:         #5a8254;
    --status-success-bg:      rgba(90,130,84,0.12);
    --status-success-bd:      rgba(90,130,84,0.32);
    --status-warn:            #c4983a;
    --status-warn-bg:         rgba(196,152,58,0.10);
    --status-warn-bd:         rgba(196,152,58,0.28);
    --status-danger:          #ba4030;
    --status-danger-bg:       rgba(186,64,48,0.10);
    --status-danger-bd:       rgba(186,64,48,0.26);
    --status-info:            #4a8090;
    --status-info-bg:         rgba(74,128,144,0.08);
    --status-info-bd:         rgba(74,128,144,0.22);
    --status-cancel:          #8a9880;
    --status-cancel-bg:       rgba(138,152,128,0.08);
    --status-cancel-bd:       rgba(138,152,128,0.22);
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              16px;
    --radius-pill:            999px;
}

/* ============================================================
   Logo image color filters per design concept
   기준 색: H2 #29ABE2(hue≈200°), GO #6B6B6B(회색)
   hue-rotate는 H2 색상 기준으로 계산
   ============================================================ */

/* Default: 필터 없음 (원본 blue+gray) */

/* Neon Holo — 핑크/마젠타 H2 */
body[data-design="neon-holo"] .brand-logo-img {
    filter: hue-rotate(130deg) saturate(1.4);
}

/* Sunset Warm — 테라코타/오렌지 H2 */
body[data-design="sunset-warm"] .brand-logo-img {
    filter: hue-rotate(178deg) saturate(1.3) brightness(0.95);
}

/* Urban Grid — 코랄/오렌지 H2 */
body[data-design="urban-grid"] .brand-logo-img {
    filter: hue-rotate(168deg) saturate(1.5) brightness(1.0);
}

/* Organic Garden — 세이지 그린 H2 */
body[data-design="organic-garden"] .brand-logo-img {
    filter: hue-rotate(-78deg) saturate(0.75) brightness(0.9);
}

/* ============================================================
   Design System Picker UI
   ============================================================ */

.design-theme-switcher {
    position: relative;
}

.design-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    min-height: 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--w-medium);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.design-theme-btn:hover {
    border-color: var(--h2-blue);
    color: var(--text-primary);
    background: var(--ambient-primary);
}

.design-btn-swatches {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.design-btn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(128,128,128,0.20);
}

.design-theme-caret {
    margin-left: 1px;
    opacity: 0.5;
    transition: transform var(--dur-fast);
    flex-shrink: 0;
}
.design-theme-btn[aria-expanded="true"] .design-theme-caret {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Panel */
.design-theme-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 236px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card), 0 8px 32px rgba(0,0,0,0.22);
    z-index: 9999;
    padding: 6px;
    animation: dtPanelIn var(--dur-fast) var(--ease-out);
}
@keyframes dtPanelIn {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.design-theme-panel-header {
    font-size: 10px;
    font-weight: var(--w-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.design-theme-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--dur-fast);
    text-align: left;
}
.design-theme-item:hover {
    background: var(--surface-soft);
}
.design-theme-item.active {
    background: var(--ambient-primary);
}

.design-item-swatches {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.di-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,0.18);
    flex-shrink: 0;
}

.design-item-texts { flex: 1; min-width: 0; }

.design-item-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    line-height: 1.3;
}
.design-item-desc {
    display: none;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.design-item-check {
    flex-shrink: 0;
    color: var(--h2-blue);
    opacity: 0;
    transition: opacity var(--dur-fast);
}
.design-theme-item.active .design-item-check { opacity: 1; }

@media (max-width: 768px) {
    .design-theme-switcher {
        position: static;
    }

    .navbar-theme-tools {
        position: relative;
    }

    .design-theme-panel {
        left: auto;
        right: 0;
        min-width: min(236px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
    }
}