/**
 * Design Language Pack — Component Patterns v1.0
 *
 * design-tokens.css 뒤에 로드.
 * 프레임워크 없는 vanilla HTML/CSS 프로젝트용 컴포넌트 클래스.
 * Tailwind 프로젝트에서는 이 파일 대신 tailwind-dark.css 오버라이드 사용.
 */

/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET + BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background var(--duration-slow) var(--ease-spring),
                color var(--duration-slow) var(--ease-spring);
}

/* noise texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: var(--noise-opacity);
    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)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px;
}

/* scrollbar */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-emphasis); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* links */
a { color: var(--color-accent); text-decoration: none; transition: opacity var(--duration-fast) ease; }
a:hover { opacity: var(--hover-opacity); }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════ */
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

.mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    border: none;
    border-radius: var(--btn-radius);
    font-family: var(--font-sans);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--duration-fast) ease,
                transform var(--duration-instant) ease,
                box-shadow var(--duration-normal) var(--ease-spring);
}
.btn:hover { opacity: var(--hover-opacity); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}

.btn-primary { background: var(--color-accent); color: #fff; }
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-elevated); }
.btn-danger { background: var(--danger-bg); color: var(--color-danger); }

.btn-sm { height: var(--btn-height-sm); padding: 0 var(--btn-padding-x-sm); font-size: var(--text-xs); }
.btn-lg { height: var(--btn-height-lg); padding: 0 var(--space-6); font-size: var(--text-base); }

/* ═══════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: border-color var(--duration-normal) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-spring);
}
.card:hover {
    border-color: var(--border-emphasis);
    box-shadow: var(--shadow-sm);
}
.card-header {
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}
.card-body { padding: var(--card-padding); }
.card-footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-subtle);
}

/* gradient top-line on hover */
.card-accent {
    position: relative;
}
.card-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-spring);
}
.card-accent:hover::before { opacity: 1; }
.card-accent:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(var(--hover-lift));
}

/* ═══════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
    font-family: var(--font-mono);
    font-size: var(--table-header-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    text-align: left;
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-surface);
}
.table tbody td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-base);
    transition: background var(--duration-fast) ease;
}
.table tbody tr:hover td { background: var(--bg-elevated); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1.4;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge-accent { background: var(--accent-bg); color: var(--accent-text); }

/* ═══════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: var(--gap-group); }

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--gap-label-control);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--input-padding-x);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--input-radius);
    font-family: var(--font-sans);
    font-size: var(--input-font-size);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}
.form-textarea { height: auto; padding: var(--space-3); min-height: 80px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-input::placeholder { color: var(--text-ghost); }
.form-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--gap-control-hint);
}
.form-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--gap-control-hint);
}

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-xl);
}
.tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: color var(--duration-normal) ease,
                border-color var(--duration-normal) ease;
}
.tab:hover { color: var(--text-secondary); }
.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--modal-radius);
    padding: var(--modal-padding);
    width: var(--modal-width);
    box-shadow: var(--shadow-lg);
    transform: scale(0.96) translateY(8px);
    transition: transform var(--duration-spring) var(--ease-spring);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-title {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    padding: var(--toast-padding);
    border-radius: var(--toast-radius);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    z-index: var(--z-toast);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-normal) ease,
                transform var(--duration-spring) var(--ease-spring);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: var(--color-success); color: #fff; }
.toast-danger { background: var(--color-danger); color: #fff; }
.toast-info { background: var(--color-info); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */
.progress-track {
    height: var(--progress-height);
    background: var(--bg-elevated);
    border-radius: var(--progress-radius);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: var(--progress-radius);
    transition: width var(--duration-spring) var(--ease-spring);
}

/* ═══════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════ */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--accent-bg);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--text-sm); }

/* ═══════════════════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-elevated) 25%,
        var(--bg-elevated-2) 50%,
        var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════
   GRAPHIC ACCENTS
   ═══════════════════════════════════════════════════════════ */
.gradient-line {
    height: var(--gradient-line-height);
    background: var(--gradient-accent);
    opacity: var(--gradient-line-opacity);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY: THEME TOGGLE
   ═══════════════════════════════════════════════════════════ */
.toggle-track {
    width: 44px;
    height: 24px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: background var(--duration-normal) ease;
}
.toggle-thumb {
    width: 18px;
    height: 18px;
    background: var(--text-primary);
    border-radius: var(--radius-full);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--duration-spring) var(--ease-spring);
}
[data-theme="dark"] .toggle-thumb { transform: translateX(20px); }


/* ═══════════════════════════════════════════════════════════
   ✨ APPLE TAHOE LIQUID GLASS — Purple Haze 전용 utility
   (2026-05-20 v1.1 신설)
   ─────────────────────────────────────────────────────────────
   - 사용 조건: [data-theme="purple-haze"] 또는 [data-theme="purple-haze-dark"]
   - 다른 테마에서도 동작하지만 backdrop blur 효과는 page-bg 가 있어야 진가
   - 핵심 utility: glass-card / glass-chip / glass-input / display-* / hint-line
                   / row-status / result-banner / member-badge / upgrade-splash
   ═══════════════════════════════════════════════════════════ */

/* ── Display typography (큰 타이포 — 진입/Peak End/Hero) ── */
.display-title {
    font-size: var(--text-display-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
    margin: 0;
}
.display-title--sm { font-size: var(--text-display-sm); }
.display-title--lg { font-size: var(--text-display-lg); }
.display-sub {
    font-size: var(--text-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}
.display-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-3);
}

/* ── Glassmorphism utility (Purple Haze 핵심 컴포넌트) ── */
.glass-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
}
.glass-card--hi { background: var(--glass-bg-hi); }
.glass-card--glow { box-shadow: var(--glass-shadow), var(--glass-glow); }

.glass-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    background: var(--glass-bg-hi);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    letter-spacing: -0.005em;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.10), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out);
}
.glass-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.16), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.glass-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--glass-bg-hi);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font: var(--font-weight-medium) var(--text-md)/1.4 var(--font-sans);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}
.glass-input:focus {
    outline: none;
    border-color: var(--glass-border-hi);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 2px 8px rgba(124, 58, 237, 0.12);
}
.glass-input::placeholder { color: var(--text-tertiary); }

/* ── Hint / 부가 설명 라인 (작은 글씨) ── */
.hint-line {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
}
.hint-line strong { color: var(--text-secondary); }

/* ── Status row (진행 단계 표시) ── */
.row-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}
.row-status__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.row-status--ok    { color: var(--color-success-strong); }
.row-status--err   { color: var(--color-danger-strong); }
.row-status--info  { color: var(--text-secondary); }
.row-status--wait  { color: var(--text-tertiary); }

/* ── Result banner (성공/실패 결과 박스 — glass 톤) ── */
.result-banner {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    text-align: center;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.result-banner--ok {
    background: var(--success-bg);
    color: var(--color-success-strong);
    border: 1px solid var(--color-success);
}
.result-banner--err {
    background: var(--danger-bg);
    color: var(--color-danger-strong);
    border: 1px solid var(--color-danger);
    text-align: left;
}
.result-banner--info {
    background: var(--accent-bg);
    color: var(--color-accent);
    border: 1px solid var(--glass-border);
}

/* ── Member Badge — 1000명 한정판 회원번호 chip ──
   원래 creator-os-agents wizard 의 진입 화면 상단에 노출. 다른 프로젝트도 재사용 가능. */
.member-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: var(--space-6) auto var(--space-3);
    padding: 10px 18px;
    background: var(--glass-bg-hi);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-hi);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    letter-spacing: -0.005em;
    max-width: calc(100% - 32px);
    box-shadow:
        0 8px 32px rgba(124, 58, 237, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.45) inset;
    animation: memberBadgeIn 480ms var(--ease-spring) both;
}
.member-badge__dot {
    width: 9px;
    height: 9px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-accent);
    animation: memberBadgePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
.member-badge__label {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.member-badge__label strong {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    font-size: 15px;
}

@keyframes memberBadgeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes memberBadgePulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px var(--color-accent), 0 0 0 0 rgba(124, 58, 237, 0.45); }
    50%      { opacity: 0.6; box-shadow: 0 0 8px var(--color-accent), 0 0 0 8px rgba(124, 58, 237, 0); }
}

/* ── Upgrade Splash (B-5 wizard upgrade flow 패턴 — 다른 프로젝트도 재사용 가능) ── */
.upgrade-splash {
    position: relative;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at top, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
        var(--bg-surface);
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.18);
}
.upgrade-splash__icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: var(--space-3);
    text-align: center;
    animation: upgradeIconFloat 2.4s ease-in-out infinite;
}
@keyframes upgradeIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.upgrade-splash__title {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-1);
    text-align: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ═══════════════════════════════════════════════════════════
   ✨ EDITORIAL — Linear / Vercel / Stripe 톤 utility
   (2026-05-20 v1.2 신설)
   ─────────────────────────────────────────────────────────────
   - 활성 조건: [data-theme="editorial"] / [data-theme="editorial-dark"]
   - 핵심 메커니즘: no shadow / no gradient / line-only chrome / big typography
   - 사용처: 뉴스 (iran-war-feed) / blog / dev tool / portfolio
   ═══════════════════════════════════════════════════════════ */

/* ── Editorial Display typography (큰 타이포 + tight tracking + 가벼운 weight) ── */
.editorial-title {
    font-size: var(--editorial-display-md);
    font-weight: var(--font-weight-medium);    /* Editorial 톤은 *가벼움* — bold 아님 */
    line-height: 1.0;
    letter-spacing: -0.04em;                   /* 매우 tight */
    color: var(--text-primary);
    margin: 0;
}
.editorial-title--sm { font-size: var(--editorial-display-sm); }
.editorial-title--lg { font-size: var(--editorial-display-lg); }
.editorial-title--xl { font-size: var(--editorial-display-xl); line-height: 0.95; }

.editorial-sub {
    font-size: var(--text-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: var(--space-4) 0 0;
    max-width: 56ch;                           /* 가독성 — 한 줄 56자 한도 */
}

/* Editorial eyebrow — mono uppercase + wide tracking */
.editorial-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--editorial-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-6);
}
.editorial-eyebrow--accent { color: var(--color-accent); }

/* ── Editorial line chrome — border 대신 underline 만 ── */
.editorial-divider {
    border: 0;
    border-bottom: var(--editorial-line-thickness) solid var(--border-subtle);
    margin: var(--space-8) 0;
}
.editorial-divider--emphasis { border-color: var(--border-emphasis); }
.editorial-divider--accent { border-color: var(--color-accent); }

/* Editorial card = 컨테이너 없음. spacing 만 */
.editorial-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: var(--space-8) 0;
}

/* ── Editorial input — bottom border only ── */
.editorial-input {
    width: 100%;
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    border-bottom: var(--editorial-line-thickness) solid var(--border-emphasis);
    border-radius: 0;
    font: var(--font-weight-medium) var(--text-md)/1.4 var(--font-sans);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.editorial-input:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
}
.editorial-input::placeholder { color: var(--text-tertiary); }

/* ── Editorial link — accent + line underline ── */
.editorial-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: var(--editorial-line-thickness);
    transition: text-decoration-thickness var(--duration-fast) var(--ease-out);
}
.editorial-link:hover {
    text-decoration-thickness: 2px;
}

/* ── Editorial button — 텍스트 + 화살표만 (no fill / no border) ── */
.editorial-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font: var(--font-weight-medium) var(--text-md)/1 var(--font-sans);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}
.editorial-button:hover {
    opacity: 0.7;
    gap: var(--space-3);                       /* 화살표 살짝 멀어짐 */
}
.editorial-button--accent { color: var(--color-accent); }

/* ── Editorial meta row — STEP / MEMBER 같은 metadata 헤더 ── */
.editorial-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--space-4);
    border-bottom: var(--editorial-line-thickness) solid var(--border-subtle);
}
.editorial-meta__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--editorial-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.editorial-meta__value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Editorial vertical rhythm — generous spacing ── */
.editorial-stack > * + * { margin-top: var(--space-6); }
.editorial-stack--lg > * + * { margin-top: var(--space-8); }
.editorial-stack--xl > * + * { margin-top: var(--space-12); }

/* ── Editorial article — long-form 본문 ── */
.editorial-article {
    max-width: 65ch;                           /* 가독성 한도 */
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}
.editorial-article h2 {
    font-size: var(--editorial-display-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: -0.025em;
    margin: var(--space-12) 0 var(--space-4);
}
.editorial-article h3 {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    margin: var(--space-8) 0 var(--space-3);
}
.editorial-article p { margin: var(--space-4) 0; }
.editorial-article a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.editorial-article blockquote {
    border-left: 2px solid var(--color-accent);
    padding-left: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--text-secondary);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   ✨ MATERIAL 3 — Google Material Design 3 utility
   (2026-05-20 v1.3 신설)
   ─────────────────────────────────────────────────────────────
   - 활성 조건: [data-theme="tonal"] / [data-theme="tonal-dark"]
   - 출처: m3.material.io
   ═══════════════════════════════════════════════════════════ */

/* ── M3 Typography (Roboto Flex 가 이상적, 없으면 Inter fallback) ── */
.m3-display-lg  { font-size: 3.5625rem; line-height: 1.12; letter-spacing: -0.015em; font-weight: 400; }
.m3-display-md  { font-size: 2.8125rem; line-height: 1.16; letter-spacing: 0;        font-weight: 400; }
.m3-display-sm  { font-size: 2.25rem;   line-height: 1.22; letter-spacing: 0;        font-weight: 400; }
.m3-headline-lg { font-size: 2rem;      line-height: 1.25; letter-spacing: 0;        font-weight: 400; }
.m3-headline-md { font-size: 1.75rem;   line-height: 1.29; letter-spacing: 0;        font-weight: 400; }
.m3-headline-sm { font-size: 1.5rem;    line-height: 1.33; letter-spacing: 0;        font-weight: 400; }
.m3-title-lg    { font-size: 1.375rem;  line-height: 1.27; letter-spacing: 0;        font-weight: 500; }
.m3-title-md    { font-size: 1rem;      line-height: 1.5;  letter-spacing: 0.009em;  font-weight: 500; }
.m3-title-sm    { font-size: 0.875rem;  line-height: 1.43; letter-spacing: 0.007em;  font-weight: 500; }
.m3-body-lg     { font-size: 1rem;      line-height: 1.5;  letter-spacing: 0.031em;  font-weight: 400; }
.m3-body-md     { font-size: 0.875rem;  line-height: 1.43; letter-spacing: 0.018em;  font-weight: 400; }
.m3-body-sm     { font-size: 0.75rem;   line-height: 1.33; letter-spacing: 0.025em;  font-weight: 400; }
.m3-label-lg    { font-size: 0.875rem;  line-height: 1.43; letter-spacing: 0.007em;  font-weight: 500; }
.m3-label-md    { font-size: 0.75rem;   line-height: 1.33; letter-spacing: 0.042em;  font-weight: 500; }
.m3-label-sm    { font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.042em;  font-weight: 500; }

/* ── M3 Button — 4 variants (Filled / Tonal / Outlined / Text) ── */
.m3-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--m3-shape-full);
    font: 500 0.875rem/1.43 var(--font-sans);
    letter-spacing: 0.007em;
    cursor: pointer;
    transition: background-color 100ms ease,
                box-shadow var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.m3-button:disabled { opacity: 0.38; cursor: default; }

/* Filled — primary action */
.m3-button--filled {
    background: var(--color-accent);
    color: var(--bg-base);
}
.m3-button--filled:hover:not(:disabled) {
    box-shadow: var(--m3-elev-1);
}

/* Tonal — secondary action */
.m3-button--tonal {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.m3-button--tonal:hover:not(:disabled) {
    box-shadow: var(--m3-elev-1);
}

/* Outlined — alternative action */
.m3-button--outlined {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--border-emphasis);
}
.m3-button--outlined:hover:not(:disabled) {
    background: var(--accent-bg);
}

/* Text — least emphasis */
.m3-button--text {
    background: transparent;
    color: var(--color-accent);
    padding: 0 12px;
}
.m3-button--text:hover:not(:disabled) {
    background: var(--accent-bg);
}

/* ── M3 Text Field — Filled 변형 ── */
.m3-text-field {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border-radius: var(--m3-shape-xs) var(--m3-shape-xs) 0 0;
    border-bottom: 1px solid var(--border-emphasis);
    transition: border-bottom-color 100ms ease;
}
.m3-text-field:focus-within {
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: -1px;
}
.m3-text-field__label {
    font: 400 0.75rem/1 var(--font-sans);
    letter-spacing: 0.033em;
    color: var(--text-secondary);
    padding: 8px 16px 0;
}
.m3-text-field:focus-within .m3-text-field__label {
    color: var(--color-accent);
}
.m3-text-field__input {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 4px 16px 8px;
    font: 400 1rem/1.5 var(--font-sans);
    color: var(--text-primary);
    outline: none;
}

/* ── M3 Text Field — Outlined 변형 ── */
.m3-text-field--outlined {
    background: transparent;
    border: 1px solid var(--border-emphasis);
    border-bottom: 1px solid var(--border-emphasis);
    border-radius: var(--m3-shape-xs);
}
.m3-text-field--outlined:focus-within {
    border: 2px solid var(--color-accent);
    margin: 0;
}

/* ── M3 Card — 3 variants (Elevated / Filled / Outlined) ── */
.m3-card {
    padding: 16px;
    border-radius: var(--m3-shape-md);
    color: var(--text-primary);          /* 명시적 — 다크 모드에서 surface 위에 정확한 token 색 적용 */
}
.m3-card--elevated {
    background: var(--bg-surface);
    box-shadow: var(--m3-elev-1);
    color: var(--text-primary);
}
.m3-card--filled {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.m3-card--outlined {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

/* ── M3 Chip — Assist / Filter / Input variants ── */
.m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--m3-shape-sm);
    background: transparent;
    border: 1px solid var(--border-emphasis);
    font: 500 0.875rem/1.43 var(--font-sans);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 100ms ease;
}
.m3-chip:hover {
    background: var(--accent-bg);
}
.m3-chip--selected {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: transparent;
}

/* ── M3 FAB (Floating Action Button) ── */
.m3-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 0;
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--m3-elev-3);
    cursor: pointer;
    font-size: 24px;
    transition: box-shadow var(--duration-normal) var(--ease-out);
}
.m3-fab:hover { box-shadow: var(--m3-elev-4); }

/* ── M3 List Item ── */
.m3-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);          /* 명시적 — title/subtitle 정확 대비 */
    cursor: pointer;
    transition: background-color 100ms ease;
}
.m3-list-item:hover {
    background: var(--accent-bg);
}
.m3-list-item__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.m3-list-item__content { flex: 1; min-width: 0; }
.m3-list-item__title {
    font: 400 1rem/1.5 var(--font-sans);
    color: var(--text-primary);
    margin: 0;
}
.m3-list-item__subtitle {
    font: 400 0.875rem/1.43 var(--font-sans);
    color: var(--text-secondary);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   ✨ Candy Plastic utility — 1998~2003 캔디 시대 + Aqua glossy
   (2026-05-20 v1.6 — Mac Classic 폐기 후 교체)
   ─────────────────────────────────────────────────────────────
   - 활성: [data-theme="candy-plastic"] / [data-theme="candy-plastic-dark"]
   - 핵심: Bondi Blue + Aqua glossy button + 반투명 plastic + 둥근 모서리
   ═══════════════════════════════════════════════════════════ */

/* ── iMac Window — 반투명 plastic + 둥근 모서리 + soft shadow ── */
.imac-window {
    background: var(--gradient-surface);
    border: 1px solid var(--border-emphasis);
    border-radius: 14px;
    box-shadow: var(--shadow-md), var(--shadow-glow);
    overflow: hidden;
    max-width: 600px;
}
.imac-window__title-bar {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: var(--imac-pinstripe);
    border-bottom: 1px solid var(--border-emphasis);
    font-family: var(--imac-font-display);
    font-size: 12px;
    color: var(--text-primary);
}
.imac-window__title {
    background: var(--imac-window-title-bg, rgba(255,255,255,0.65));
    color: var(--text-primary);
    padding: 0 12px;
    margin: 0 auto;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.imac-window__lights {
    display: flex;
    gap: 6px;
}
.imac-window__lights span {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(0,0,0,0.05));
}
.imac-window__lights span:nth-child(1) { background-color: #FF6058; }
.imac-window__lights span:nth-child(2) { background-color: #FFBD2E; }
.imac-window__lights span:nth-child(3) { background-color: #28C941; }
.imac-window__body {
    padding: 20px 22px;
    font-family: var(--imac-font-body);
    color: var(--text-primary);
}

/* ── iMac Typography (Lucida Grande feel) ── */
.imac-title {
    font-family: var(--imac-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.imac-title--lg { font-size: 2rem; }
.imac-body {
    font-family: var(--imac-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* ── iMac Aqua Button — glossy gradient + 둥근 + soft shadow ── */
.imac-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    background: var(--gradient-accent);
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 13px;
    font-family: var(--imac-font-display);
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;                       /* Aqua 버튼은 항상 흰 글씨 (top white half 에도 readable 하도록 text-shadow 로 처리) */
    cursor: pointer;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.18),
        0 1px 0 rgba(255,255,255,0.5) inset;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.45),
        0 0 2px rgba(0,0,0,0.30);          /* 위 흰 highlight 위에서도 글씨가 보이도록 강화 */
    transition: filter 120ms ease, box-shadow 120ms ease;
    position: relative;
    overflow: hidden;
    line-height: 1;
}
.imac-button::before {
    /* glossy top highlight */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: var(--imac-glossy-highlight);
    pointer-events: none;
    border-radius: 13px 13px 0 0;
}
.imac-button:hover { filter: brightness(1.06); }
.imac-button:active { filter: brightness(0.94); box-shadow: 0 1px 2px rgba(0,0,0,0.20) inset; }

/* Secondary (white plastic) */
.imac-button--secondary {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF4 100%);
    color: var(--text-primary);
    text-shadow: none;
    border-color: rgba(0,0,0,0.18);
}

/* Candy 5 variant — Candy Plastic cluster (Bondi + Tangerine + Strawberry + Grape + Lime) */
.imac-button--bondi      { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-bondi) 51%, var(--imac-bondi) 100%); }
.imac-button--tangerine  { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-tangerine) 51%, var(--imac-tangerine) 100%); }
.imac-button--strawberry { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-strawberry) 51%, var(--imac-strawberry) 100%); }
.imac-button--grape      { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-grape) 51%, var(--imac-grape) 100%); }
.imac-button--lime       { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-lime) 51%, var(--imac-lime) 100%); color: #1B2B3A; text-shadow: none; }
.imac-button--blueberry  { background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 45%, var(--imac-blueberry) 51%, var(--imac-blueberry) 100%); }

/* ── iMac Input — 둥근 + inset shadow ── */
.imac-input {
    width: 100%;
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-emphasis);
    border-radius: 10px;
    font-family: var(--imac-font-body);
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
    outline: none;
    box-sizing: border-box;
}
.imac-input:focus {
    border-color: var(--color-accent);
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.12),
        0 0 0 3px var(--accent-bg);
}

/* ── iMac Card — 반투명 plastic ── */
.imac-card {
    padding: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.imac-card--bondi { background: linear-gradient(160deg, rgba(38,150,210,0.18) 0%, rgba(255,255,255,0.85) 100%); border-color: rgba(38,150,210,0.30); }

/* ── iMac Candy Pill — 5 컬러 chip ── */
.imac-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--imac-font-body);
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--imac-bondi);
    text-shadow: 0 1px 0 rgba(0,0,0,0.20);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.45) inset;
}
.imac-pill--tangerine  { background: var(--imac-tangerine); }
.imac-pill--strawberry { background: var(--imac-strawberry); }
.imac-pill--grape      { background: var(--imac-grape); }
.imac-pill--lime       { background: var(--imac-lime); color: #1B2B3A; text-shadow: none; }
.imac-pill--blueberry  { background: var(--imac-blueberry); }

/* ── iMac Checkbox / Radio (둥근 + glossy) ── */
.imac-checkbox,
.imac-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-emphasis);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
    position: relative;
}
.imac-checkbox { border-radius: 4px; }
.imac-radio    { border-radius: 50%; }
.imac-checkbox:checked,
.imac-radio:checked {
    background: var(--gradient-accent);
    border-color: var(--accent-hover);
}
.imac-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: -2px; left: 2px;
    font-family: var(--imac-font-display);
    font-size: 11px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.30);
}
.imac-radio:checked::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.20);
}

/* ═══════════════════════════════════════════════════════════
   ✨ MEMPHIS 80s utility — 1980s 도타주
   (2026-05-20 v1.5 신설)
   ─────────────────────────────────────────────────────────────
   - 활성: [data-theme="memphis"] / [data-theme="memphis-dark"]
   - 핵심: bold sans + offset shadow + asymmetric + 4 컬러 + geometric pattern
   ═══════════════════════════════════════════════════════════ */

/* ── Memphis Typography ── */
.memphis-display {
    font-family: 'Druk', 'Inter Display', 'Inter', var(--font-sans);
    font-size: 4rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0;
}
.memphis-display--xl { font-size: 6rem; line-height: 0.9; }
.memphis-display--italic { font-style: italic; }
.memphis-title {
    font-family: 'Inter Display', var(--font-sans);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.memphis-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--memphis-pink-text, var(--memphis-pink));  /* light 에선 더 진한 pink (가독), dark 에선 brand pink */
    margin: 0 0 var(--space-3);
}

/* ── Memphis Card — 두꺼운 보더 + offset shadow ── */
.memphis-card {
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 3px solid var(--border-emphasis);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    position: relative;
}
.memphis-card--pink   { background: var(--memphis-pink);   color: var(--memphis-navy); }
.memphis-card--yellow { background: var(--memphis-yellow); color: var(--memphis-navy); }
.memphis-card--mint   { background: var(--memphis-mint);   color: var(--memphis-navy); }

/* ── Memphis Button — bold + thick border + drop shadow ── */
.memphis-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 3px solid var(--border-emphasis);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    font-family: 'Inter Display', var(--font-sans);
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.memphis-button:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--border-emphasis);
}
.memphis-button:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--border-emphasis);
}
.memphis-button--pink   { background: var(--memphis-pink);   color: var(--memphis-navy); }
.memphis-button--yellow { background: var(--memphis-yellow); color: var(--memphis-navy); }
.memphis-button--mint   { background: var(--memphis-mint);   color: var(--memphis-navy); }

/* ── Memphis Input — 두꺼운 보더 ── */
.memphis-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 3px solid var(--border-emphasis);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    font-family: 'Inter Display', var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}
.memphis-input:focus {
    border-color: var(--memphis-pink);
    box-shadow: 4px 4px 0 var(--memphis-pink);
}

/* ── Memphis Geometric Shapes (decorative) ── */
.memphis-shape {
    display: inline-block;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.memphis-shape--circle {
    border-radius: 50%;
    background: var(--memphis-pink);
}
.memphis-shape--triangle {
    width: 0;
    height: 0;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-bottom: 56px solid var(--memphis-yellow);
}
.memphis-shape--diamond {
    background: var(--memphis-mint);
    transform: rotate(45deg);
    width: 48px;
    height: 48px;
    margin: 8px;
}
.memphis-shape--zigzag {
    background:
        linear-gradient(135deg, var(--memphis-pink) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(225deg, var(--memphis-pink) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(315deg, var(--memphis-pink) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(45deg,  var(--memphis-pink) 25%, transparent 25%) 0 0/16px 16px,
        var(--memphis-yellow);
}

/* ── Memphis Patterns (background utility) ── */
.memphis-pattern-dots    { background: var(--memphis-pattern-dots); }
.memphis-pattern-stripes { background: var(--memphis-pattern-stripes); }
.memphis-pattern-grid    { background: var(--memphis-pattern-grid); }

/* ── Memphis Chip / Tag ── */
.memphis-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--memphis-pink);
    border: 2px solid var(--border-emphasis);
    color: var(--memphis-navy);
    font-family: 'Inter Display', var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.memphis-chip--yellow { background: var(--memphis-yellow); }
.memphis-chip--mint   { background: var(--memphis-mint); }

/* ── Memphis Star (decorative ★) ── */
.memphis-star {
    display: inline-block;
    font-size: 32px;
    color: var(--memphis-pink);
    line-height: 1;
}

/* ============================================================
   BRUTALIST — utility (light/dark 공통, 토큰만 참조)
   raw / asymmetric / thick borders / 0 radius / no shadow
   ============================================================ */

/* ── Brutalist Display Typography ── */
.brutalist-display {
    font-family: var(--brutalist-font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}
.brutalist-display--xl  { font-size: clamp(4rem, 11vw, 7.5rem); }
.brutalist-display--xxl { font-size: clamp(5rem, 14vw, 10rem); }

.brutalist-title {
    font-family: var(--brutalist-font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.brutalist-eyebrow {
    font-family: var(--brutalist-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000000;                  /* yellow 위에서 항상 검정 (다크 모드에서도) */
    background: var(--brutalist-yellow);
    padding: 4px 10px;
    display: inline-block;
}
.brutalist-eyebrow--mark {
    background: var(--text-primary);
    color: var(--bg-base);
}

.brutalist-body {
    font-family: var(--brutalist-font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-primary);
    margin: 0;
}

.brutalist-mono {
    font-family: var(--brutalist-font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ── Brutalist Card ── */
.brutalist-card {
    background: var(--bg-base);
    border: var(--brutalist-border-thick) solid var(--border-emphasis);
    border-radius: 0;
    padding: 24px;
    box-shadow: none;
}
.brutalist-card--yellow {
    background: var(--brutalist-yellow);
    color: #000000;                  /* yellow card 내부 텍스트 항상 검정 */
}
.brutalist-card--yellow .brutalist-title,
.brutalist-card--yellow .brutalist-body,
.brutalist-card--yellow .brutalist-mono,
.brutalist-card--yellow .brutalist-eyebrow,
.brutalist-card--yellow .brutalist-number,
.brutalist-on-yellow,
.brutalist-on-yellow .brutalist-title,
.brutalist-on-yellow .brutalist-body,
.brutalist-on-yellow .brutalist-mono,
.brutalist-on-yellow .brutalist-eyebrow,
.brutalist-on-yellow .brutalist-number {
    color: #000000;                  /* yellow surface 위 항상 검정 */
}
.brutalist-on-yellow { background: var(--brutalist-yellow); }
.brutalist-card--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}
.brutalist-card--inverted .brutalist-title,
.brutalist-card--inverted .brutalist-body,
.brutalist-card--inverted .brutalist-mono {
    color: var(--bg-base);
}
.brutalist-card--mega-border {
    border-width: var(--brutalist-border-mega);
}

/* ── Brutalist Buttons ── */
.brutalist-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--brutalist-border-thick) solid var(--border-emphasis);
    border-radius: 0;
    font-family: var(--brutalist-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: none;
    box-shadow: none;
}
.brutalist-button:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
.brutalist-button:active {
    transform: translate(2px, 2px);
}
.brutalist-button--yellow {
    background: var(--brutalist-yellow);
    color: #000000;                  /* yellow 위 검정 (다크 모드에서도 readable) */
    border-color: #000000;
}
.brutalist-button--yellow:hover {
    background: #000000;
    color: var(--brutalist-yellow);
    border-color: #000000;
}
.brutalist-button--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
}
.brutalist-button--inverted:hover {
    background: var(--brutalist-yellow);
    color: var(--text-primary);
    border-color: var(--text-primary);
}
.brutalist-button--vermillion {
    background: var(--brutalist-vermillion);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* ── Brutalist Input ── */
.brutalist-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--brutalist-border-thick) solid var(--border-emphasis);
    border-radius: 0;
    font-family: var(--brutalist-font-mono);
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
}
.brutalist-input:focus {
    background: var(--brutalist-yellow);
    border-color: var(--text-primary);
}
.brutalist-input::placeholder {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Brutalist Tag / Chip ── */
.brutalist-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--brutalist-border-thin) solid var(--border-emphasis);
    border-radius: 0;
    font-family: var(--brutalist-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.brutalist-tag--yellow    { background: var(--brutalist-yellow); color: #000000; border-color: #000000; }
.brutalist-tag--inverted  { background: var(--text-primary); color: var(--bg-base); }
.brutalist-tag--vermillion{ background: var(--brutalist-vermillion); color: #FFFFFF; border-color: #000000; }
.brutalist-tag--cyan      { background: var(--brutalist-cyan); color: #000000; border-color: #000000; }

/* ── Brutalist HR / Hard Rule ── */
.brutalist-hr {
    border: 0;
    border-top: var(--brutalist-border-thick) solid var(--border-emphasis);
    margin: 24px 0;
}
.brutalist-hr--mega {
    border-top-width: var(--brutalist-border-mega);
}

/* ── Brutalist Link (underline hard) ── */
.brutalist-link {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: var(--brutalist-border-thin) solid var(--border-emphasis);
    padding-bottom: 1px;
    font-weight: 700;
}
.brutalist-link:hover {
    background: var(--brutalist-yellow);
    color: var(--text-primary);
}

/* ── Brutalist Meta Row (asymmetric label+value) ── */
.brutalist-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: var(--brutalist-border-thin) solid var(--border-emphasis);
    font-family: var(--brutalist-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.brutalist-meta__label { color: var(--text-tertiary); }
.brutalist-meta__value { color: var(--text-primary); font-weight: 700; }

/* ── Brutalist Number Block (큰 숫자 강조) ── */
.brutalist-number {
    display: block;
    font-family: var(--brutalist-font-display);
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--text-primary);
}
.brutalist-number--yellow {
    background: var(--brutalist-yellow);
    padding: 8px 16px;
    display: inline-block;
}

/* ============================================================
   TERMINAL — utility (light/dark 공통, 토큰만 참조)
   mono only · CLI 메타포 · 단색 accent
   ============================================================ */

/* ── Terminal Window (전체 화면 frame) ── */
.terminal-window {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--terminal-font);
    border: 1px solid var(--border-emphasis);
    border-radius: 0;
    box-shadow: var(--shadow-glow);
    overflow: hidden;
    position: relative;
}
.terminal-window::after {
    /* CRT scanline overlay */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--terminal-scanline);
    pointer-events: none;
}
.terminal-window__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--terminal-font);
    font-size: 12px;
    color: var(--text-tertiary);
}
.terminal-window__bar::before {
    content: "[●●●]";
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}
.terminal-window__body {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

/* ── Terminal Prompt Line (PS1) ── */
.terminal-line {
    display: flex;
    gap: 8px;
    font-family: var(--terminal-font);
    font-size: 14px;
    color: var(--text-primary);
    align-items: baseline;
}
.terminal-line__prompt {
    color: var(--color-accent);
    font-weight: 600;
    white-space: pre;
    flex-shrink: 0;
}
.terminal-line__prompt::after { content: " $"; }
.terminal-line__prompt--root::after { content: " #"; }
.terminal-line__prompt--arrow::after { content: ""; }
.terminal-line__prompt--arrow::before { content: "❯"; color: var(--color-accent); }
.terminal-line__cmd { color: var(--text-primary); }

/* ── Terminal Output (들여쓰기 출력) ── */
.terminal-output {
    margin-left: 0;
    padding-left: 0;
    font-family: var(--terminal-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-wrap;
}
.terminal-output--success { color: var(--color-success); }
.terminal-output--warning { color: var(--color-warning); }
.terminal-output--danger  { color: var(--color-danger); }
.terminal-output--accent  { color: var(--color-accent); font-weight: 600; }

/* ── Terminal Cursor (깜빡임) ── */
.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--color-accent);
    vertical-align: text-bottom;
    margin-left: 4px;
    animation: terminal-blink 1s steps(2) infinite;
}
@keyframes terminal-blink {
    50% { opacity: 0; }
}

/* ── Terminal Input ── */
.terminal-input {
    width: 100%;
    background: transparent;
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px dashed var(--border-emphasis);
    border-radius: 0;
    padding: 6px 4px;
    font-family: var(--terminal-font);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.terminal-input:focus {
    border-bottom-style: solid;
    border-bottom-color: var(--color-accent);
}
.terminal-input::placeholder {
    color: var(--text-tertiary);
}

/* ── Terminal Button ([ ENTER ]) ── */
.terminal-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    font-family: var(--terminal-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: none;
}
.terminal-button::before { content: "["; }
.terminal-button::after  { content: "]"; }
.terminal-button:hover {
    background: var(--color-accent);
    color: var(--bg-base);
    box-shadow: var(--shadow-glow);
}
.terminal-button--ghost {
    color: var(--text-tertiary);
    border-color: var(--text-tertiary);
}
.terminal-button--ghost:hover {
    background: var(--text-tertiary);
    color: var(--bg-base);
}
.terminal-button--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.terminal-button--danger:hover {
    background: var(--color-danger);
    color: var(--bg-base);
}

/* ── Terminal Tag <FOO> ── */
.terminal-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--accent-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    font-family: var(--terminal-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.terminal-tag::before { content: "<"; }
.terminal-tag::after  { content: ">"; }
.terminal-tag--warning { background: var(--warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.terminal-tag--danger  { background: var(--danger-bg);  color: var(--color-danger);  border-color: var(--color-danger); }

/* ── Terminal Key (<Enter>) ── */
.terminal-key {
    display: inline-block;
    padding: 0 6px;
    background: var(--bg-surface);            /* 명시적 surface 사용 — scanline overlay 위에서도 가독 */
    color: var(--text-primary);
    border: 1px solid var(--border-emphasis);
    border-radius: 0;
    font-family: var(--terminal-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Terminal Divider ──────────── ── */
.terminal-divider {
    border: 0;
    border-top: 1px dashed var(--border-subtle);
    margin: 16px 0;
}
.terminal-divider--solid {
    border-top-style: solid;
    border-top-color: var(--border-emphasis);
}
.terminal-divider--glow {
    border-top-style: solid;
    border-top-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

/* ── Terminal ASCII Box ╔══╗ ── */
.terminal-box {
    font-family: var(--terminal-font);
    color: var(--color-accent);
    white-space: pre;
    line-height: 1.2;
    font-size: 14px;
}

/* ── Terminal Title (banner-style) ── */
.terminal-banner {
    font-family: var(--terminal-font);
    color: var(--color-accent);
    font-size: 12px;
    line-height: 1.0;
    white-space: pre;
    margin: 0;
    text-shadow: var(--shadow-glow);
}

/* ── Terminal Status Bar (bottom) ── */
.terminal-statusbar {
    display: flex;
    gap: 16px;
    padding: 6px 14px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--terminal-font);
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.terminal-statusbar__item--accent { color: var(--color-accent); }

/* ── Terminal Progress Bar [████░░░] ── */
.terminal-progress {
    font-family: var(--terminal-font);
    color: var(--color-accent);
    font-size: 14px;
    letter-spacing: -0.05em;
}

/* ============================================================
   NEUMORPHISM — utility (light/dark 공통, 토큰만 참조)
   soft dual shadow / embossed / depressed / low chroma
   ============================================================ */

/* ── Neu Card (raised) ── */
.neu-card {
    background: var(--bg-base);
    border: 0;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-shadow-out);
    padding: 24px;
}
.neu-card--pressed {
    box-shadow: var(--neu-shadow-in);
}
.neu-card--flat {
    box-shadow: var(--neu-shadow-flat);
}
.neu-card--gradient {
    background: var(--gradient-surface);
}

/* ── Neu Display Typography ── */
.neu-display {
    font-family: 'Inter Display', var(--font-sans);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0;
}
.neu-title {
    font-family: 'Inter Display', var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.neu-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.neu-body {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ── Neu Button ── */
.neu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: 0;
    border-radius: var(--neu-radius);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--neu-shadow-out);
    transition: box-shadow 120ms ease-out;
}
.neu-button:hover {
    box-shadow: var(--neu-shadow-out-sm);
}
.neu-button:active {
    box-shadow: var(--neu-shadow-in);
}
.neu-button--primary {
    background: var(--color-accent);
    color: var(--accent-text);
}
.neu-button--primary:hover {
    background: var(--accent-hover);
}
.neu-button--accent {
    color: var(--color-accent);
}
.neu-button--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--neu-radius-pill);
    justify-content: center;
}

/* ── Neu Input (depressed) ── */
.neu-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: 0;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-shadow-in-sm);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 120ms ease-out;
}
.neu-input:focus {
    box-shadow: var(--neu-shadow-in);
}
.neu-input::placeholder {
    color: var(--text-tertiary);
}

/* ── Neu Chip / Pill ── */
.neu-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: 0;
    border-radius: var(--neu-radius-pill);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--neu-shadow-flat);
}
.neu-chip--accent {
    background: var(--color-accent);
    color: var(--accent-text);
}

/* ── Neu Toggle (slider) ── */
.neu-toggle {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 32px;
    border-radius: var(--neu-radius-pill);
    box-shadow: var(--neu-shadow-in-sm);
    background: var(--bg-base);
    cursor: pointer;
}
.neu-toggle__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-base);
    box-shadow: var(--neu-shadow-out-sm);
    transition: transform 180ms ease-out, background 180ms ease-out;
}
.neu-toggle.is-on .neu-toggle__knob {
    transform: translateX(24px);
    background: var(--color-accent);
}

/* ── Neu Stat Card ── */
.neu-stat {
    padding: 20px 24px;
    background: var(--bg-base);
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-shadow-out);
}
.neu-stat__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}
.neu-stat__value {
    font-family: 'Inter Display', var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.0;
}
.neu-stat__delta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-success-strong);    /* 라이트 plastic 위 가독성 ↑ (v1.9.2 audit fix) */
    margin-top: 6px;
    font-weight: 600;
}
.neu-stat__delta--down { color: var(--color-danger-strong); }

/* ── Neu Icon Button (circle, pressed) ── */
.neu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-base);
    color: var(--text-secondary);
    border: 0;
    box-shadow: var(--neu-shadow-out);
    cursor: pointer;
    font-size: 1.25rem;
    transition: box-shadow 120ms ease-out;
}
.neu-icon:hover  { box-shadow: var(--neu-shadow-out-sm); }
.neu-icon:active { box-shadow: var(--neu-shadow-in); }
.neu-icon--accent { color: var(--color-accent); }

/* ── Neu Progress (depressed track + raised fill) ── */
.neu-progress {
    width: 100%;
    height: 12px;
    background: var(--bg-base);
    border-radius: var(--neu-radius-pill);
    box-shadow: var(--neu-shadow-in-sm);
    overflow: hidden;
}
.neu-progress__fill {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: var(--neu-radius-pill);
}

/* ── Neu Tab Group ── */
.neu-tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--bg-base);
    border-radius: var(--neu-radius-pill);
    box-shadow: var(--neu-shadow-in-sm);
    gap: 0;
}
.neu-tabs__tab {
    padding: 8px 18px;
    background: transparent;
    color: var(--text-tertiary);
    border: 0;
    border-radius: var(--neu-radius-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.neu-tabs__tab.is-active {
    background: var(--bg-base);
    color: var(--text-primary);
    box-shadow: var(--neu-shadow-out-sm);
}


/* ════════════════════════════════════════════════════════════
   LAYER 2 UTILITIES — DEMO COMPOSITION (v1.10, 2026-05-20)
   ────────────────────────────────────────────────────────────
   compose 토큰만 참조. 모든 테마에서 동일한 markup 으로 작동하되
   data-theme 만 바꾸면 composition personality 가 자동 적용됨.

   원칙:
   - SSOT: 각 utility 는 `--compose-*` 토큰만 참조 (테마 hardcode X)
   - SRP: 한 utility 는 한 가지 layout 책임만
   - 사용자가 9 section 동일 markup 으로 모든 테마 데모 가능

   파일 위치는 layer 1 utility 와 분리 (LAYER 2 헤더로 구분).
   ════════════════════════════════════════════════════════════ */

/* ── PAGE / SECTION ── */
.demo-page {
    max-width: var(--compose-page-max);
    margin: 0 auto;
    padding: 0;
}

.section {
    padding: var(--compose-section-pad);
    display: flex;
    flex-direction: column;
    gap: var(--compose-stack-rhythm);
    border-bottom: var(--compose-section-divider);
}
.section:last-child { border-bottom: 0; }
.section + .section {
    margin-top: var(--compose-section-gap);
}

.demo-section__label {
    display: inline-block;
    padding: var(--compose-label-pad);
    background: var(--compose-label-bg);
    color: var(--compose-label-fg);
    border-radius: calc(var(--compose-tag-radius) - 0px);
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--compose-label-tracking);
    text-transform: uppercase;
    align-self: flex-start;
}

/* ── HERO ── */
.hero__eyebrow {
    font-family: var(--compose-tag-font);
    font-size: 12px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}

.hero__title {
    font-size: var(--compose-hero-size);
    font-weight: var(--compose-hero-weight);
    letter-spacing: var(--compose-hero-tracking);
    line-height: var(--compose-hero-leading);
    color: var(--text-primary);
    margin: 0;
}

.hero__sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 56ch;
    margin: 0;
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── TYPOGRAPHY SCALE ── */
.display {
    font-size: calc(var(--compose-hero-size) * 0.75);
    font-weight: var(--compose-hero-weight);
    letter-spacing: var(--compose-hero-tracking);
    line-height: var(--compose-hero-leading);
    color: var(--text-primary);
    margin: 0;
}
.display--xl { font-size: var(--compose-hero-size); }

.title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}
.title--lg { font-size: 2rem; }

.body {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.eyebrow {
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0;
}
.eyebrow--accent { color: var(--color-accent); }

/* ── GRIDS ── */
.grid--asymmetric {
    display: grid;
    grid-template-columns: var(--compose-grid-asymmetric);
    gap: var(--compose-grid-gap);
}
.grid--features {
    display: grid;
    grid-template-columns: var(--compose-grid-features);
    gap: var(--compose-grid-gap);
}
/* Joined grid (Brutalist 등) — cell 사이 borer */
.grid--asymmetric > * + *,
.grid--features > * + * {
    border-left: var(--compose-grid-cell-divider);
}
.grid__cell {
    padding: var(--compose-card-pad);
}

/* ── BUTTONS ── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--compose-button-pad);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--compose-button-radius);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--compose-button-font);
    font-size: 0.95rem;
    font-weight: var(--compose-button-weight);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.button:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
.button--primary {
    background: var(--color-accent);
    color: var(--on-accent, white);          /* accent bg 위 텍스트 (v1.10.1 가독성 fix) */
    border-color: var(--color-accent);
}
.button--primary:hover {
    background: var(--accent-hover, var(--color-accent));
    color: var(--on-accent, white);
    filter: brightness(1.05);
}
.button--secondary {
    background: transparent;
    color: var(--text-primary);
}
.button--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.button--ghost:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.button--danger {
    background: var(--color-danger);
    color: var(--bg-base);
    border-color: var(--color-danger);
}
.button--danger:hover {
    background: var(--color-danger-strong, var(--color-danger));
    color: var(--bg-base);
}

/* ── INPUTS ── */
.input,
.textarea {
    width: 100%;
    padding: var(--compose-input-pad);
    background: var(--compose-input-bg);
    color: var(--text-primary);
    border: var(--compose-input-border);
    border-radius: var(--compose-input-radius);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 120ms ease, background 120ms ease;
}
.textarea {
    min-height: 92px;
    resize: vertical;
}
.input:focus,
.textarea:focus {
    border-color: var(--border-focus, var(--color-accent));
}
.input::placeholder,
.textarea::placeholder {
    color: var(--text-tertiary);
}

.label {
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 4px;
}

.checkbox,
.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.checkbox input,
.radio input {
    accent-color: var(--color-accent);
}

/* ── TAGS / CHIPS ── */
.tag {
    display: inline-flex;
    align-items: center;
    padding: var(--compose-tag-pad);
    border-radius: var(--compose-tag-radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
}
.tag--accent {
    background: var(--accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.tag--success {
    background: var(--success-bg);
    color: var(--color-success-strong, var(--color-success));
    border-color: var(--color-success);
}
.tag--warning {
    background: var(--warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.tag--danger {
    background: var(--danger-bg);
    color: var(--color-danger-strong, var(--color-danger));
    border-color: var(--color-danger);
}
.tag--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* ── CARDS ── */
.card {
    padding: var(--compose-card-pad);
    border-radius: var(--compose-card-radius);
    background: var(--compose-card-bg);
    border: var(--compose-card-border);
    box-shadow: var(--compose-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-primary);
    overflow: visible; /* 상단 유틸리티 .card(overflow:hidden) 취소 — 테마가 필요 시 명시 설정 */
}
.card--accent {
    background: var(--accent-bg);
    border-color: var(--color-accent);
    color: var(--text-primary);
}

/* Brutalist 의 accent-bg 는 OPAQUE yellow → text-primary 가 다크 모드에서 white = invisible.
   Theme-specific override (v1.10.1) */
[data-theme^="brutalist"] .card--accent,
[data-theme^="brutalist"] .card--accent .eyebrow,
[data-theme^="brutalist"] .card--accent .title,
[data-theme^="brutalist"] .card--accent .body,
[data-theme^="brutalist"] .card--accent .mono,
[data-theme^="brutalist"] .card--accent .link {
    color: var(--on-accent);
}
.card--inverted {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-base);
}
.card--inverted .eyebrow,
.card--inverted .title,
.card--inverted .body,
.card--inverted .mono,
.card--inverted .link {
    color: var(--bg-base);
}
.card__title {
    /* alias for clarity */
}

/* ── STATS ── */
.stat {
    padding: var(--compose-card-pad);
    border-radius: var(--compose-card-radius);
    background: var(--compose-card-bg);
    border: var(--compose-card-border);
    box-shadow: var(--compose-card-shadow);
    color: var(--text-primary);
}
.stat__label {
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}
.stat__value {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.0;
    color: var(--text-primary);
    margin: 0;
}
.stat__delta {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-success-strong, var(--color-success));
    margin: 8px 0 0;
}
.stat__delta--down { color: var(--color-danger-strong, var(--color-danger)); }

/* ── LINKS / DIVIDERS ── */
.link {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    font-weight: 500;
}
.link:hover { opacity: 0.7; }

.divider {
    border: 0;
    border-top: var(--compose-section-divider, 1px solid var(--border-subtle));
    margin: 0;
}

/* ── ARTICLE / LONG-FORM ── */
.article {
    max-width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article .body { font-size: 1.05rem; line-height: 1.6; }

.blockquote {
    margin: 16px 0;
    padding: 8px 0 8px 20px;
    border-left: 4px solid var(--color-accent);
    color: var(--text-secondary);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
}

.dropcap {
    float: left;
    font-family: var(--compose-button-font);
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.85;
    padding: 4px 12px 0 0;
    color: var(--color-accent);
}

/* ── ROW / STACK helpers ── */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--compose-stack-rhythm);
}

/* ── TOOLBAR ── */
.demo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--compose-toolbar-pad);
    background: var(--compose-toolbar-bg);
    border-bottom: var(--compose-toolbar-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.demo-toolbar__back {
    font-family: var(--compose-tag-font);
    font-size: 12px;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: var(--compose-tag-tracking);
}
.demo-toolbar__brand {
    font-family: var(--compose-tag-font);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
}
.demo-toolbar__toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--compose-button-radius);
    gap: 2px;
}
.demo-toolbar__toggle button {
    padding: 4px 14px;
    background: transparent;
    border: 0;
    border-radius: var(--compose-button-radius);
    font-family: var(--compose-tag-font);
    font-size: 11px;
    font-weight: var(--compose-tag-weight);
    letter-spacing: var(--compose-tag-tracking);
    text-transform: uppercase;
    color: var(--text-tertiary);
    cursor: pointer;
}
.demo-toolbar__toggle button.is-active {
    background: var(--color-accent);
    color: var(--on-accent, white);          /* accent bg 위 텍스트 (v1.10.1) */
}

/* ── SIGNATURE 영역 hint (각 테마가 override) ── */
.section--signature {
    /* 테마별 signature section — 기본은 일반 section 과 동일 */
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .grid--asymmetric,
    .grid--features {
        grid-template-columns: 1fr;
    }
    .grid--asymmetric > * + *,
    .grid--features > * + * {
        border-left: 0;
        border-top: var(--compose-grid-cell-divider);
    }
}


/* ════════════════════════════════════════════════════════════
   LAYER 2.5 — THEME COMPOSITION OVERRIDE (v1.11, 2026-05-20)
   ────────────────────────────────────────────────────────────
   기존 LAYER 2 (.demo-* utility + compose 토큰) 위에 *컨테이너
   메타포* 와 *시그니처 데코레이션* 을 cascade override 로 강제.

   왜:
   - 토큰만으로는 layout *형태* (windowed / column / layered / etc) 가
     swap 되지 않아 4 테마 (Liquid/Editorial/M3/Candy Plastic) 가 동일 골격
   - 사용자 입장에선 "같은 골격, 다른 색/굵기" — composition personality 소실

   원칙:
   - 공통 markup (.section, .grid, ...) 그대로 유지
   - [data-theme^="..."] starts-with 셀렉터로 light+dark 공유 override
   - 각 테마의 시그니처를 *컨테이너 형태 / hero decoration / section label*
     3 layer 로 표현
   - 가독성 (light/dark contrast) 동시 점검
   ════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────
   EDITORIAL — narrow column + line-only chrome
   - section 을 max-width 65ch 로 제약 (long-form reading)
   - grid 항상 1단 (콘텐츠 중심)
   - section__label 라인 위 mono caps (Linear/Vercel/Stripe 톤)
   ───────────────────────────────────────────────────── */
[data-theme^="editorial"] .demo-page {
    /* 컬럼 정렬 — 좌측 정렬 그대로 (Stripe/Linear 톤) */
    max-width: 720px;
}
[data-theme^="editorial"] .section {
    align-items: flex-start;
}
[data-theme^="editorial"] .demo-section__label {
    background: transparent;
    color: var(--color-accent);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-accent);
    padding-top: 8px;
    border-radius: 0;
    font-size: 10px;
    letter-spacing: 0.20em;
    align-self: stretch;
    text-align: left;
}
[data-theme^="editorial"] .hero__title {
    /* Editorial = 가벼운 weight + tight tracking */
    font-weight: 500;
    letter-spacing: -0.04em;
}
[data-theme^="editorial"] .grid--features {
    /* 1단 — 콘텐츠 중심 */
    grid-template-columns: 1fr;
}
[data-theme^="editorial"] .grid--asymmetric {
    grid-template-columns: 1fr;
}


/* ─────────────────────────────────────────────────────
   iMAC G3 — window frame metaphor (모든 section 이 윈도우)
   - section 자체가 .imac-window 처럼 traffic light + pinstripe title
   - section__label = 윈도우 title bar
   - hero 의 첫 라인 = Lucida Grande
   ───────────────────────────────────────────────────── */
[data-theme^="candy-plastic"] .section {
    background: var(--gradient-surface, var(--bg-surface));
    border: 1px solid var(--border-emphasis);
    border-radius: 14px;
    box-shadow: var(--shadow-md), var(--shadow-glow);
    padding: 0;
    overflow: hidden;
}
[data-theme^="candy-plastic"] .section > * {
    padding-left: 22px;
    padding-right: 22px;
}
[data-theme^="candy-plastic"] .section > *:first-child {
    padding-top: 20px;
}
[data-theme^="candy-plastic"] .section > *:last-child {
    padding-bottom: 22px;
}
[data-theme^="candy-plastic"] .demo-section__label {
    /* 윈도우 title bar — pinstripe + traffic lights via ::before */
    margin: 0;
    padding: 8px 14px;
    background: var(--imac-pinstripe);
    border-bottom: 1px solid var(--border-emphasis);
    border-radius: 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: center;
    justify-content: center;
    color: var(--text-primary);
    font-family: var(--imac-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
}
[data-theme^="candy-plastic"] .demo-section__label::before {
    content: "● ● ●";
    color: #FF6058;
    font-size: 12px;
    letter-spacing: 0.3em;
    flex-shrink: 0;
}
[data-theme^="candy-plastic"] .demo-section__label::after {
    content: "";
    width: 60px;       /* balance — title 가운데로 */
    flex-shrink: 0;
}
[data-theme^="candy-plastic"] .hero__title {
    font-family: var(--imac-font-display);
}


/* ─────────────────────────────────────────────────────
   MATERIAL 3 — elevation 사다리 (카드끼리 점진 z-depth)
   - grid--features 의 3 카드가 elev 1 / 3 / 5 사다리
   - section__label 이 tonal accent pill
   - tonal surface 위계 시각화
   ───────────────────────────────────────────────────── */
[data-theme^="tonal"] .demo-section__label {
    background: var(--accent-bg);
    color: var(--color-accent);
    padding: 6px 14px;
    border-radius: var(--m3-shape-sm);
    border: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.10em;
}
[data-theme^="tonal"] .grid--features > *:nth-child(3n+1) { box-shadow: var(--m3-elev-1); }
[data-theme^="tonal"] .grid--features > *:nth-child(3n+2) { box-shadow: var(--m3-elev-3); }
[data-theme^="tonal"] .grid--features > *:nth-child(3n+0) { box-shadow: var(--m3-elev-5); }
[data-theme^="tonal"] .card {
    transition: box-shadow 200ms ease;
}
[data-theme^="tonal"] .card:hover {
    box-shadow: var(--m3-elev-4);
}


/* ─────────────────────────────────────────────────────
   LIQUID GLASS (purple-haze) — layered glass section
   - section 자체가 glass card (backdrop-filter blur)
   - hero title gradient text
   - section__label 이 glass chip
   ───────────────────────────────────────────────────── */
[data-theme^="purple-haze"] .section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
}
[data-theme^="purple-haze"] .demo-section__label {
    background: var(--glass-bg-hi);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--color-accent);
}
[data-theme^="purple-haze"] .hero__title {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* fallback color — gradient 미지원 환경 */
    -webkit-text-fill-color: transparent;
    /* background-clip:text + tight line-height 가 descender (g/y/p/q) 잘림 → 하단 여유 */
    padding-bottom: 0.12em;
    line-height: 1.05;
}
[data-theme^="purple-haze"] .card {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}


/* ─────────────────────────────────────────────────────
   MEMPHIS — 도형 데코레이션 (Hero 에 흩어진 shapes)
   - hero ::before / ::after pseudo 로 도형
   - section__label 이 yellow mark
   - 카드 4 컬러 강조
   ───────────────────────────────────────────────────── */
[data-theme^="memphis"] .demo-section__label {
    background: var(--memphis-yellow);
    color: var(--memphis-navy);
    padding: 4px 12px;
    border-radius: 0;
    border: 3px solid var(--memphis-navy);    /* v1.13.3 — 살짝 더 볼드 */
    font-family: var(--font-mono);
    font-weight: 900;                          /* 더 굵게 */
    letter-spacing: 0.08em;
    box-shadow: 3px 3px 0 var(--memphis-navy);  /* offset shadow 추가 — Memphis 시그니처 */
}
/* Hero section 만 도형 배치 (첫 번째 section) */
[data-theme^="memphis"] .section:first-of-type {
    position: relative;
    overflow: hidden;
}
[data-theme^="memphis"] .section:first-of-type::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 40px;
    width: 56px;
    height: 56px;
    background: var(--memphis-pink);
    border: 3px solid var(--memphis-navy);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:first-of-type::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: 80px;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid var(--memphis-mint);
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:first-of-type > * {
    position: relative;
    z-index: 1;
}
/* Memphis Hero — italic display (v1.5 시그니처 복원, v1.12.1) */
[data-theme^="memphis"] .section:first-of-type .hero__title {
    font-style: italic;
}


/* ─────────────────────────────────────────────────────
   TERMINAL — terminal-window metaphor + ASCII section label
   - section 이 terminal-window (border + scanline overlay)
   - section__label 이 ── 02 / SECTION ── ASCII 형식
   - hero title 위 ASCII banner stripe
   ───────────────────────────────────────────────────── */
[data-theme^="terminal"] .section {
    border: 1px solid var(--border-emphasis);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .section::before {
    /* CRT scanline overlay on each section */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--terminal-scanline);
    pointer-events: none;
    z-index: 1;
}
[data-theme^="terminal"] .section > * {
    position: relative;
    z-index: 2;
}
[data-theme^="terminal"] .demo-section__label {
    background: transparent;
    color: var(--color-accent);
    padding: 0;
    border: 0;
    font-family: var(--terminal-font);
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-section__label::before {
    content: "── ";
}
[data-theme^="terminal"] .demo-section__label::after {
    content: " ──";
}


/* ─────────────────────────────────────────────────────
   NEUMORPHISM — section 이 큰 embossed card
   - section bg 가 base 와 동일 (canonical neu)
   - section shadow 는 dual (raised)
   - 내부 컴포넌트는 pressed contrast
   - section__label 이 soft pill
   ───────────────────────────────────────────────────── */
[data-theme^="neumorphism"] .section {
    background: var(--bg-base);
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-shadow-out);
    border: 0;
}
[data-theme^="neumorphism"] .demo-section__label {
    background: var(--bg-base);
    color: var(--text-tertiary);
    padding: 6px 14px;
    border-radius: var(--neu-radius-pill);
    box-shadow: var(--neu-shadow-flat);
    border: 0;
}
[data-theme^="neumorphism"] .grid--features > * {
    /* 내부 카드 — 약하게 raised */
    box-shadow: var(--neu-shadow-out-sm);
}


/* ─────────────────────────────────────────────────────
   BRUTALIST — 현재도 강함 (joined grid + hard rule). 추가 보강만.
   - section__label 이 yellow mark variant 도 가능하게
   ───────────────────────────────────────────────────── */
[data-theme^="brutalist"] .hero__title {
    /* 거대 display 가 left edge 까지 채우도록 */
    line-height: 0.92;
}

/* Brutalist 가독성 fix (v1.12.1) — yellow/green/vermillion chip 모두
   opaque fill 패턴. text 는 항상 검정 (yellow/green) 또는 흰 (vermillion).
   #000000 hardcode — light/dark 모두 yellow 위 검정 + dark 모드에서 white text 충돌 방지 */

/* yellow 위 검정 — light/dark 동일 (yellow bg 가 양쪽 동일하니까) */
[data-theme^="brutalist"] .hero__eyebrow,
[data-theme^="brutalist"] .eyebrow--accent {
    color: #000000;
    background: var(--color-accent);
    padding: 2px 8px;
    display: inline-block;
    border: var(--brutalist-border-thin, 2px) solid #000000;
}
[data-theme^="brutalist"] .blockquote {
    border-left: var(--brutalist-border-mega, 8px) solid #000000;
    color: #000000;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--color-accent);
    padding: 12px 16px;
    margin-left: 0;
}
[data-theme^="brutalist"] .dropcap {
    background: var(--color-accent);
    color: #000000;
    padding: 4px 12px 0;
    border: var(--brutalist-border-thin, 2px) solid #000000;
}

/* 모든 tag opaque chip — bg = 의미 색 OPAQUE, text = 검정 (또는 white) */
[data-theme^="brutalist"] .tag--accent {
    background: var(--color-accent);    /* yellow */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .tag--success {
    background: var(--color-success);   /* #00C853 green OPAQUE */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .tag--warning {
    background: var(--color-warning);   /* #FFFF00 yellow */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .tag--danger {
    background: var(--color-danger);    /* #FF3D00 vermillion */
    color: #FFFFFF;                      /* vermillion + 흰 (검정은 대비 부족) */
    border-color: #000000;
}
/* Default / Inverted 도 명시 — dark 에서 fg/bg 충돌 방지 */
[data-theme^="brutalist"] .tag {
    /* default = bg-base + text-primary (이미 utility 가 처리 — light 흰+검정 / dark 검정+흰) */
    border-color: var(--text-primary);
}
[data-theme^="brutalist"] .tag--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* link — yellow underline + text-primary text */
[data-theme^="brutalist"] .link {
    color: var(--text-primary);
    background: transparent;
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 0;
    font-weight: 700;
}
[data-theme^="brutalist"] .link:hover {
    background: var(--color-accent);
    color: #000000;                      /* hover 시 yellow fill + 검정 */
    opacity: 1;
}
[data-theme^="brutalist"] .demo-toolbar__brand {
    color: var(--text-primary);
}


/* ─────────────────────────────────────────────────────
   GLOBAL — 모든 테마 가독성 보장
   - .button--primary 의 disabled 상태 가독성
   - .tag 의 disabled / 작은 글씨 처리
   - dark 모드에서 hero__sub 가 너무 dim 하지 않게
   ───────────────────────────────────────────────────── */
.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* hero__sub 가독성 보강 — 모든 테마 공통 */
.hero__sub {
    color: var(--text-secondary);
}

/* dropcap 색이 너무 강하면 본문 가독성 떨어짐 — accent 톤 조정 */
.dropcap {
    color: var(--color-accent);
    line-height: 0.9;
}

/* responsive — section 안 padding 모바일에서 조정 */
@media (max-width: 720px) {
    [data-theme^="candy-plastic"] .section > * { padding-left: 14px; padding-right: 14px; }
    [data-theme^="memphis"] .section:first-of-type::before,
    [data-theme^="memphis"] .section:first-of-type::after {
        display: none;  /* 모바일에선 도형 제거 (콘텐츠 가림 방지) */
    }
    /* Glassmorphism: 데스크탑 56px → 태블릿 24px */
    [data-theme^="purple-haze"] .section {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 480px) {
    /* Glassmorphism: 모바일 16px */
    [data-theme^="purple-haze"] .section {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 32px;
        padding-bottom: 32px;
    }
    /* 카드 간격도 줄이기 */
    [data-theme^="purple-haze"] .grid--features,
    [data-theme^="purple-haze"] .grid--asymmetric {
        gap: 12px;
    }
}


/* ════════════════════════════════════════════════════════════
   LAYER 2.5 PATCH — v1.12 시그니처 보강 + 가독성 추가 점검
   ────────────────────────────────────────────────────────────
   사용자 피드백: "레이아웃 적용되긴 했는데 약간 특색이 부족"
   각 테마의 시그니처 메커니즘 한 단계 더 강화.
   ════════════════════════════════════════════════════════════ */


/* ─── EDITORIAL 추가 시그니처 ─── */
/* drop cap 을 더 크게 + accent underline 도 라인-only 톤으로 */
[data-theme^="editorial"] .dropcap {
    font-size: 5.5rem;
    line-height: 0.8;
    font-weight: 500;       /* Editorial 톤 — light weight */
    color: var(--text-primary);   /* accent 보다 본문 톤 */
    border-bottom: 2px solid var(--color-accent);
    padding: 0 8px 4px 0;
    margin-right: 12px;
}
/* hero 위 thin top rule — Editorial 시그니처 */
[data-theme^="editorial"] .section:first-of-type {
    position: relative;
}
[data-theme^="editorial"] .section:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 64px;
    height: 1px;
    background: var(--color-accent);
}
/* article body 의 link underline 미세 — Stripe 톤 */
[data-theme^="editorial"] .link {
    border-bottom-width: 1px;
    padding-bottom: 2px;
}


/* ─── MATERIAL 3 추가 시그니처 — Tonal palette swatch row ─── */
/* hero 아래에 tonal scale ribbon 표시 (5 tones from primary) */
[data-theme^="tonal"] .section:first-of-type {
    position: relative;
    padding-bottom: 48px;  /* swatch ribbon 공간 */
}
[data-theme^="tonal"] .section:first-of-type::after {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 16px;
    height: 8px;
    border-radius: var(--m3-shape-full, 9999px);
    background: linear-gradient(
        to right,
        var(--color-accent) 0%,
        var(--color-accent-soft) 25%,
        var(--accent-bg) 50%,
        var(--bg-elevated) 75%,
        var(--bg-elevated-2) 100%
    );
}


/* ─── Candy Plastic 추가 시그니처 — section 사이 Dock-like row ─── */
/* hero 아래에 candy color dot dock — Candy Plastic cluster 시그니처 */
[data-theme^="candy-plastic"] .section:first-of-type {
    position: relative;
}
[data-theme^="candy-plastic"] .section:first-of-type::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 16px;
    width: 96px;
    height: 12px;
    background:
        radial-gradient(circle at 8px 50%, var(--imac-bondi, #2696D2) 4px, transparent 5px),
        radial-gradient(circle at 24px 50%, var(--imac-tangerine, #FF9F1C) 4px, transparent 5px),
        radial-gradient(circle at 40px 50%, var(--imac-strawberry, #FF4F5E) 4px, transparent 5px),
        radial-gradient(circle at 56px 50%, var(--imac-grape, #9B7BC0) 4px, transparent 5px),
        radial-gradient(circle at 72px 50%, var(--imac-lime, #BCD93B) 4px, transparent 5px),
        radial-gradient(circle at 88px 50%, var(--imac-blueberry, #5067C2) 4px, transparent 5px);
}


/* ─── MEMPHIS 추가 시그니처 — 도형 더 흩어놓기 + section 사이 zigzag rule ─── */
/* 더 많은 section 에 도형 (3, 5, 7 번째 section) */
[data-theme^="memphis"] .section:nth-of-type(3),
[data-theme^="memphis"] .section:nth-of-type(5),
[data-theme^="memphis"] .section:nth-of-type(7) {
    position: relative;
    overflow: hidden;
}
[data-theme^="memphis"] .section:nth-of-type(3)::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: var(--memphis-yellow);
    border: 2px solid var(--memphis-navy);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:nth-of-type(5)::after {
    content: "★";
    position: absolute;
    top: 14px;
    right: 36px;
    font-size: 28px;
    color: var(--memphis-pink);
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:nth-of-type(7)::after {
    content: "";
    position: absolute;
    bottom: 16px;
    right: 24px;
    width: 36px;
    height: 36px;
    background: var(--memphis-mint);
    border: 2px solid var(--memphis-navy);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:nth-of-type(3) > *,
[data-theme^="memphis"] .section:nth-of-type(5) > *,
[data-theme^="memphis"] .section:nth-of-type(7) > * {
    position: relative;
    z-index: 1;
}


/* ─── TERMINAL 추가 시그니처 — Hero ASCII banner stripe ─── */
/* hero section 위쪽에 ASCII art 스타일 stripe */
[data-theme^="terminal"] .section:first-of-type .hero__title {
    border-left: 4px solid var(--color-accent);
    padding-left: 16px;
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .section:first-of-type::after {
    content: "─────────────────────────────────────────────";
    display: block;
    position: absolute;
    bottom: 8px;
    left: 18px;
    right: 18px;
    color: var(--color-accent);
    font-family: var(--terminal-font);
    font-size: 11px;
    letter-spacing: -0.06em;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.5;
    pointer-events: none;
}
[data-theme^="terminal"] .section:first-of-type {
    position: relative;
    padding-bottom: 32px;
}


/* ─── NEUMORPHISM 추가 시그니처 — depth inversion visual ─── */
/* card--accent 내부 textfield 같은 element 를 pressed (안쪽) 으로 표현 */
[data-theme^="neumorphism"] .input,
[data-theme^="neumorphism"] .textarea {
    /* depressed inset shadow */
    box-shadow: var(--neu-shadow-in-sm, inset 2px 2px 5px rgba(163,177,198,0.55),
                                       inset -2px -2px 5px rgba(255,255,255,0.7));
    border: 0;
}
[data-theme^="neumorphism"] .input:focus,
[data-theme^="neumorphism"] .textarea:focus {
    box-shadow: var(--neu-shadow-in, inset 5px 5px 10px rgba(163,177,198,0.55),
                                     inset -5px -5px 10px rgba(255,255,255,0.7));
}


/* ─── LIQUID GLASS 추가 시그니처 — section 별 점진적 blur depth ─── */
/* 3, 5, 7번째 section 의 blur 강도를 다르게 — layered glass stack 강조 */
[data-theme^="purple-haze"] .section:nth-of-type(3n+1) {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-theme^="purple-haze"] .section:nth-of-type(3n+2) {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme^="purple-haze"] .section:nth-of-type(3n+0) {
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}
/* glass-shadow 도 점진 — 깊이감 */
[data-theme^="purple-haze"] .section:nth-of-type(3n+1) { box-shadow: var(--shadow-sm); }
[data-theme^="purple-haze"] .section:nth-of-type(3n+2) { box-shadow: var(--shadow-md); }
[data-theme^="purple-haze"] .section:nth-of-type(3n+0) { box-shadow: var(--shadow-lg); }


/* ─── BRUTALIST 추가 시그니처 — section 우측 거대 숫자 메타 ─── */
/* 일부 section 우측에 거대 번호 표시 (잡지 spread 톤) */
[data-theme^="brutalist"] .section {
    position: relative;
}
[data-theme^="brutalist"] .section[class*="signature"]::before {
    content: "09";
    position: absolute;
    top: 16px;
    right: 28px;
    font-family: var(--brutalist-font-display);
    font-size: 7rem;
    font-weight: 900;
    line-height: 0.85;
    color: var(--color-accent);
    -webkit-text-stroke: 2px var(--text-primary);
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
}


/* ════════════════════════════════════════════════════════════
   LAYER 2.5 PATCH — v1.13 시그니처 *극단화* (8 테마 모두)
   ────────────────────────────────────────────────────────────
   사용자: "Glassmorphism / Editorial 이 진짜 약해. 다른 것도 더 확실히
   시그니처 강화하면 좋겠고, 컴포지션까지 토큰화해서 사용자가 가져다
   쓰기만 하면 즉시 적용되는 사용성 확보."

   각 테마의 시그니처를 *멀리서도 알아볼 수 있게* 극단화.
   ════════════════════════════════════════════════════════════ */


/* ═══════ LIQUID GLASS — 진짜 layered z-depth stack ═══════ */

/* body 의 Purple Haze mesh gradient — 다색 후광 (v1.13.1 강화).
   light/dark 양쪽 진짜로 *비춰보이는* 느낌. backdrop blur 가 색을 잡도록. */
[data-theme^="purple-haze"] .demo-page {
    position: relative;
}
/* v1.17.x — light: 메쉬 overlay 제거 (body bg 가 단일 색 소스, hub와 통일된 가벼움)
   dark: mesh 유지 (다크 base 위에 색 blob 이 필요) */
[data-theme="purple-haze"] .demo-page::before {
    content: none;
}
[data-theme="purple-haze-dark"] .demo-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(139,92,246,0.50) 0%, transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(192,132,252,0.40) 0%, transparent 50%),
        radial-gradient(circle at 25% 75%, rgba(167,139,250,0.36) 0%, transparent 50%),
        radial-gradient(circle at 80% 85%, rgba(168,85,247,0.45) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
[data-theme^="purple-haze"] .demo-page > * {
    position: relative;
    z-index: 1;
}

/* hero title — gradient 더 강화 + 더 큰 size */
[data-theme^="purple-haze"] .section:first-of-type .hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    background: linear-gradient(135deg,
        var(--text-primary) 0%,
        var(--color-accent) 50%,
        var(--color-accent-soft, var(--color-accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px var(--accent-glow, rgba(124,58,237,0.4)));
}

/* section 의 glass 강도 낮추고, 내부 card 만 강한 glass */
[data-theme^="purple-haze"] .section {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
}
[data-theme^="purple-haze"] .demo-section__label {
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px var(--accent-glow);
}
/* ─── Glassmorphism 본질 메커니즘 (v1.13.3) ───
   Apple visionOS / macOS Tahoe / iOS 26+ 의 Glassmorphism:
   1. Specular shine — 상단 highlight pseudo
   2. Gradient hairline border (2-tone) — 진짜 glass edge bevel
   3. Multi-shadow depth — 4-layer 입체
   4. Refractive saturation — backdrop blur + saturate 200%
   5. Smoky glass inverted — 검정 frosted (light text 유지)
   6. Aurora gradient — 동적 색조 흐름
   ─────────────────────────────────────────────────────────── */

/* ── 기본 glass plate (Translucent — Frosted) ── */
[data-theme^="purple-haze"] .card,
[data-theme^="purple-haze"] .stat {
    position: relative;
    background: var(--glass-bg);   /* 0.58 alpha */
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid transparent;
    box-shadow:
        /* outer depth — 가까운 + 먼 */
        0 8px 24px rgba(80,40,150,0.10),
        0 24px 56px var(--accent-glow, rgba(124,58,237,0.20)),
        /* inset highlight (상단) + inset dim (하단) — 두께감 */
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.04);
    border-radius: var(--compose-card-radius);
    overflow: hidden;            /* specular pseudo 가 카드 안에 */
}
/* dark mode inset 톤 조정 */
[data-theme="purple-haze-dark"] .card,
[data-theme="purple-haze-dark"] .stat {
    box-shadow:
        0 8px 24px rgba(0,0,0,0.5),
        0 24px 56px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* (1) Specular shine — 카드 상단 highlight 비스듬한 반사광 */
[data-theme^="purple-haze"] .card::before,
[data-theme^="purple-haze"] .stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.06) 40%,
        transparent 100%);
    pointer-events: none;
    border-radius: var(--compose-card-radius) var(--compose-card-radius) 0 0;
    z-index: 0;
}
[data-theme="purple-haze-dark"] .card::before,
[data-theme="purple-haze-dark"] .stat::before {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.02) 40%,
        transparent 100%);
}
[data-theme^="purple-haze"] .card > *,
[data-theme^="purple-haze"] .stat > * {
    position: relative;
    z-index: 1;
}

/* (2) Gradient hairline border — 상단 밝음 / 하단 어두움 (진짜 glass edge) */
[data-theme^="purple-haze"] .card,
[data-theme^="purple-haze"] .stat {
    background-image:
        linear-gradient(var(--glass-bg), var(--glass-bg)),                              /* fill */
        linear-gradient(135deg,
            rgba(255,255,255,0.45) 0%,
            rgba(255,255,255,0.10) 50%,
            rgba(255,255,255,0.20) 100%);                                                /* border */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
}

/* (4) Refractive — accent card 더 강한 saturation */
[data-theme^="purple-haze"] .card--accent {
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.18), rgba(168,85,247,0.20)),
        linear-gradient(135deg,
            rgba(255,255,255,0.55) 0%,
            rgba(124,58,237,0.30) 50%,
            rgba(255,255,255,0.20) 100%);
    backdrop-filter: blur(24px) saturate(240%);
    -webkit-backdrop-filter: blur(24px) saturate(240%);
}

/* (5) Smoky glass — inverted = 검정 frosted (light text 유지) */
[data-theme^="purple-haze"] .card--inverted {
    background-image:
        linear-gradient(rgba(15, 8, 30, 0.55), rgba(15, 8, 30, 0.45)),
        linear-gradient(135deg,
            rgba(255,255,255,0.30) 0%,
            rgba(255,255,255,0.05) 50%,
            rgba(124,58,237,0.20) 100%);
    color: rgba(255,255,255,0.96);
}
[data-theme="purple-haze-dark"] .card--inverted {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.45)),
        linear-gradient(135deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.03) 50%,
            rgba(124,58,237,0.18) 100%);
}
[data-theme^="purple-haze"] .card--inverted::before {
    /* smoky glass specular 더 약하게 */
    background: linear-gradient(180deg,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.02) 40%,
        transparent 100%);
}
[data-theme^="purple-haze"] .card--inverted .eyebrow,
[data-theme^="purple-haze"] .card--inverted .title,
[data-theme^="purple-haze"] .card--inverted .body,
[data-theme^="purple-haze"] .card--inverted .mono {
    color: rgba(255,255,255,0.96);
}
[data-theme^="purple-haze"] .card--inverted .link {
    color: rgba(255,255,255,0.96);
    border-bottom-color: rgba(255,255,255,0.6);
}

/* Card 3-stack 정렬 — 모두 같은 height, z-depth 는 shadow intensity 로만 */
[data-theme^="purple-haze"] .grid--features {
    align-items: stretch;
}
[data-theme^="purple-haze"] .grid--features > * {
    transform: none;   /* stagger 제거 — 정렬 회복 */
}
[data-theme^="purple-haze"] .grid--features > *:nth-child(2) {
    /* 가운데 카드 — 더 강한 glow */
    box-shadow:
        0 12px 32px rgba(80,40,150,0.16),
        0 36px 72px var(--accent-glow, rgba(124,58,237,0.32)),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.04);
}
[data-theme="purple-haze-dark"] .grid--features > *:nth-child(2) {
    box-shadow:
        0 12px 32px rgba(0,0,0,0.55),
        0 36px 72px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* hero buttons — 강한 glow */
[data-theme^="purple-haze"] .button--primary {
    box-shadow:
        0 4px 16px var(--accent-glow),
        0 0 32px var(--accent-glow);
}

/* ─── 09 SIGNATURE 영역 — Cards 6 과 다른 메커니즘 시각화 ───
   Cards 6: 기본 3가지 변형 (Frosted / Refractive Accent / Smoky)
   Signature 9: 고급 3가지 메커니즘 (Aurora / Specular plate / Liquid lens)
   ─────────────────────────────────────────────────────────── */

/* Aurora — 동적 multi-color gradient 흐름 */
[data-theme^="purple-haze"] .section--signature .grid--features > *:nth-child(1) {
    background-image:
        linear-gradient(135deg,
            rgba(124,58,237,0.18) 0%,
            rgba(236,72,153,0.18) 35%,
            rgba(56,189,248,0.18) 70%,
            rgba(168,85,247,0.18) 100%),
        linear-gradient(135deg,
            rgba(255,255,255,0.5) 0%,
            rgba(124,58,237,0.30) 50%,
            rgba(236,72,153,0.20) 100%);
}

/* Specular plate — 더 강한 highlight + 하단 dim 강조 */
[data-theme^="purple-haze"] .section--signature .grid--features > *:nth-child(2)::before {
    height: 70%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.45) 0%,
        rgba(255,255,255,0.18) 30%,
        rgba(255,255,255,0.06) 60%,
        transparent 100%);
}
[data-theme^="purple-haze"] .section--signature .grid--features > *:nth-child(2) {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10)),
        linear-gradient(135deg,
            rgba(255,255,255,0.7) 0%,
            rgba(255,255,255,0.15) 50%,
            rgba(255,255,255,0.4) 100%);
}
[data-theme="purple-haze-dark"] .section--signature .grid--features > *:nth-child(2) {
    background-image:
        linear-gradient(180deg, rgba(40,20,80,0.55), rgba(20,10,40,0.45)),
        linear-gradient(135deg,
            rgba(255,255,255,0.3) 0%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0.18) 100%);
}

/* Liquid lens (3번째 — inverted smoky 유지 + 더 강한 chromatic edge) */
[data-theme^="purple-haze"] .section--signature .grid--features > *:nth-child(3) {
    /* base 는 smoky glass override 그대로 적용 + 추가 chromatic shadow */
    box-shadow:
        0 8px 24px rgba(0,0,0,0.12),
        0 32px 64px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        /* chromatic aberration 가짜 — 우측에 magenta, 좌측에 cyan */
        4px 0 16px rgba(236,72,153,0.15),
        -4px 0 16px rgba(56,189,248,0.15);
}


/* ═══════ EDITORIAL — typography 극단화 + 잡지 spread ═══════ */

/* hero title 더 거대 + 더 가벼운 weight (Linear/Vercel/Stripe 톤) */
[data-theme^="editorial"] .section:first-of-type .hero__title {
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 400;       /* lighter — 잡지 톤 */
    letter-spacing: -0.05em;
    line-height: 0.95;
}

/* 모든 section 좌측에 거대 figure number — 잡지 spread */
[data-theme^="editorial"] .section {
    position: relative;
    padding-left: 88px;
}
[data-theme^="editorial"] .section .demo-section__label {
    /* 기존 label 위치 보강 — top-left aligned */
    align-self: flex-start;
}
[data-theme^="editorial"] .section::before {
    content: counter(editorial-section, decimal-leading-zero);
    counter-increment: editorial-section;
    position: absolute;
    left: 8px;
    top: var(--space-10, 40px);
    font-family: var(--font-sans);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-tertiary);
}
[data-theme^="editorial"] .demo-page {
    counter-reset: editorial-section;
}

/* blockquote — 잡지 pull quote (centered, 큰 italic, double rule) */
[data-theme^="editorial"] .blockquote {
    margin: 32px auto;
    padding: 24px 0;
    border: 0;
    border-top: 1px solid var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    color: var(--text-primary);
    max-width: 38ch;
}

/* meta sidebar — section 우측 정렬 */
[data-theme^="editorial"] .stat {
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 16px 0;
    background: transparent;
}
[data-theme^="editorial"] .stat:last-child {
    border-bottom: 0;
}
[data-theme^="editorial"] .grid--features {
    /* stats 가 단순 row 로 — 잡지 데이터 박스 톤 */
    gap: 0;
}

/* link 더 가는 underline — Stripe 톤 */
[data-theme^="editorial"] .link {
    border-bottom-width: 1px;
    padding-bottom: 1px;
}

/* mobile responsive — section 좌측 padding 축소 */
@media (max-width: 720px) {
    [data-theme^="editorial"] .section { padding-left: var(--space-6, 24px); }
    [data-theme^="editorial"] .section::before {
        font-size: 1.5rem;
        left: 4px;
        top: 24px;
    }
}


/* ═══════ BRUTALIST — 모든 section 우상단 거대 outline 번호 ═══════ */

[data-theme^="brutalist"] .demo-page {
    counter-reset: brutalist-section;
}
[data-theme^="brutalist"] .section {
    position: relative;
    counter-increment: brutalist-section;
}
[data-theme^="brutalist"] .section::after {
    content: counter(brutalist-section, decimal-leading-zero);
    position: absolute;
    top: 20px;
    right: 28px;
    font-family: var(--brutalist-font-display);
    font-size: 6rem;
    font-weight: 900;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 2px var(--text-primary);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
[data-theme^="brutalist"] .section > * {
    position: relative;
    z-index: 1;
}
/* hero 만 outline 번호 더 크게 + 우측 끝 */
[data-theme^="brutalist"] .section:first-of-type::after {
    font-size: 10rem;
    opacity: 0.85;
    top: 32px;
    right: 32px;
}


/* ═══════ MATERIAL 3 — FAB 추가 + Cards 호버 elevation 변화 ═══════ */

/* FAB — 모든 페이지 우하단 floating */
[data-theme^="tonal"] .demo-page {
    position: relative;
}
[data-theme^="tonal"] .demo-page::after {
    content: "+";
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: var(--color-accent);
    color: var(--on-accent, white);
    border-radius: var(--m3-shape-lg, 16px);
    box-shadow: var(--m3-elev-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    z-index: 200;
    transition: box-shadow 200ms ease;
}

/* card hover 시 elevation 한 단계 위로 (시각 시뮬레이션 — 첫 카드 만) */
[data-theme^="tonal"] .grid--features > *:nth-child(3n+1):hover {
    box-shadow: var(--m3-elev-2);
}
[data-theme^="tonal"] .grid--features > *:nth-child(3n+2):hover {
    box-shadow: var(--m3-elev-4);
}


/* ═══════ iMAC G3 — 상단 macOS menubar + dock 더 크게 ═══════ */

[data-theme^="candy-plastic"] .demo-page {
    position: relative;
    padding-top: 32px;
}
[data-theme^="candy-plastic"] .demo-page::before {
    /* macOS 메뉴바 직접 복제 회피 — 추상 dot 패턴 + generic 워크스페이스 라벨 (라이센스 audit 2026-05-22) */
    content: " ● ● ●     Workspace · Canvas · Studio";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    line-height: 24px;
    padding: 0 16px;
    background: linear-gradient(180deg, var(--bg-surface, #ffffff) 0%, var(--bg-elevated, #e8eef4) 100%);
    border-bottom: 1px solid var(--border-emphasis);
    font-family: var(--imac-font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 50;
    letter-spacing: 0.02em;
}
[data-theme^="candy-plastic"] .demo-page::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 16px;
    width: 100px;
    height: 16px;
    background:
        radial-gradient(circle at 10px 50%, var(--imac-bondi, #2696D2) 5px, transparent 6px),
        radial-gradient(circle at 28px 50%, var(--imac-tangerine, #FF9F1C) 5px, transparent 6px),
        radial-gradient(circle at 46px 50%, var(--imac-strawberry, #FF4F5E) 5px, transparent 6px),
        radial-gradient(circle at 64px 50%, var(--imac-grape, #9B7BC0) 5px, transparent 6px),
        radial-gradient(circle at 82px 50%, var(--imac-lime, #BCD93B) 5px, transparent 6px);
    pointer-events: none;
    z-index: 51;
}


/* ═══════ MEMPHIS — 패턴 background opacity 낮춰서 텍스트 가독 (v1.13.1) ═══════ */

/* 짝수 section 배경에 patterns — ::before pseudo + opacity 0.18 (이전 1.0 → 가독 회복) */
[data-theme^="memphis"] .section:nth-of-type(4n+2),
[data-theme^="memphis"] .section:nth-of-type(4n+4) {
    position: relative;
    background: var(--bg-base);   /* 본 bg 는 그대로 */
}
[data-theme^="memphis"] .section:nth-of-type(4n+2)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--memphis-pattern-dots);
    opacity: 0.10;        /* v1.13.2 — 텍스트 가독성 우선 */
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:nth-of-type(4n+4)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--memphis-pattern-stripes);
    opacity: 0.10;        /* v1.13.2 — 텍스트 가독성 우선 */
    pointer-events: none;
    z-index: 0;
}
[data-theme^="memphis"] .section:nth-of-type(4n+2) > *,
[data-theme^="memphis"] .section:nth-of-type(4n+4) > * {
    position: relative;
    z-index: 1;
}
/* hero 의 도형을 더 크게 + overlap (텍스트 안쪽까지 침범) */
[data-theme^="memphis"] .section:first-of-type::before {
    width: 96px;
    height: 96px;
    top: 8px;
    right: 12px;
}
[data-theme^="memphis"] .section:first-of-type::after {
    border-left-width: 40px;
    border-right-width: 40px;
    border-bottom-width: 72px;
    bottom: 16px;
    right: 56px;
}


/* ═══════ TERMINAL — blinking cursor 모든 section 끝 + 더 큰 banner ═══════ */

/* hero title 위에 ASCII art ▌ + bigger */
[data-theme^="terminal"] .section:first-of-type .hero__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    border-left-width: 6px;
}
[data-theme^="terminal"] .section:first-of-type .hero__title::after {
    content: "▌";
    display: inline-block;
    margin-left: 8px;
    color: var(--color-accent);
    animation: terminal-cursor-blink 1s steps(2) infinite;
}
@keyframes terminal-cursor-blink {
    50% { opacity: 0; }
}


/* ═══════ NEUMORPHISM — depth inversion 더 극단 ═══════ */

/* card 가 raised, 안쪽 input 이 depressed — 3 단계 inversion */
[data-theme^="neumorphism"] .card,
[data-theme^="neumorphism"] .stat {
    box-shadow: var(--neu-shadow-out);
}
/* 두 번째 card 만 inverted depth (pressed) */
[data-theme^="neumorphism"] .grid--features > *:nth-child(3n+2) {
    box-shadow: var(--neu-shadow-in);
    background: var(--bg-base);
}

/* hero title 도 미세 embossed (text-shadow dual) */
[data-theme^="neumorphism"] .section:first-of-type .hero__title {
    text-shadow:
        1px 1px 1px rgba(255,255,255,0.7),
        -1px -1px 1px rgba(163,177,198,0.3);
}


/* ════════════════════════════════════════════════════════════
   LAYER 2.5 EXTENSION — v1.14 컴포넌트 시그니처 깊게 전파
   ────────────────────────────────────────────────────────────
   라이언 피드백: "시그니처가 큰 컨테이너에만 적용되고 작은
   컴포넌트는 generic. 체크박스/라디오/토글이 모든 테마에서 똑같다.
   우아하고 세심한 디자인적 표현이 핵심."

   각 테마의 메커니즘을 *작은 컴포넌트까지* 깊이 전파.
   ════════════════════════════════════════════════════════════ */


/* ─── 공통 base — checkbox / radio 의 브라우저 default 제거 ─── */
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 150ms ease;
}
.checkbox input[type="checkbox"]::after,
.radio input[type="radio"]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ═══════ BRUTALIST checkbox / radio ═══════ */
/* "영구적 결정의 상징" — 거대 사각 + 굵은 ✓ */

[data-theme^="brutalist"] .checkbox input[type="checkbox"],
[data-theme^="brutalist"] .radio input[type="radio"] {
    width: 22px;
    height: 22px;
    background: var(--bg-base);
    border: 3px solid var(--text-primary);
}
[data-theme^="brutalist"] .checkbox input[type="checkbox"] {
    border-radius: 0;
}
[data-theme^="brutalist"] .checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
}
[data-theme^="brutalist"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: #000000;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}
[data-theme^="brutalist"] .radio input[type="radio"] {
    border-radius: 50%;
}
[data-theme^="brutalist"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--text-primary);
    border-radius: 50%;
}


/* ═══════ EDITORIAL checkbox / radio ═══════ */
/* "조용한 선택" — 1px 라인 + 작은 accent */

[data-theme^="editorial"] .checkbox input[type="checkbox"],
[data-theme^="editorial"] .radio input[type="radio"] {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid var(--border-emphasis);
}
[data-theme^="editorial"] .checkbox input[type="checkbox"] {
    border-radius: 0;
}
[data-theme^="editorial"] .checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="editorial"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
[data-theme^="editorial"] .radio input[type="radio"] {
    border-radius: 50%;
}
[data-theme^="editorial"] .radio input[type="radio"]:checked {
    border-color: var(--color-accent);
}
[data-theme^="editorial"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
}


/* ═══════ MATERIAL 3 checkbox / radio ═══════ */
/* M3 official — rounded 4px + tonal fill */

[data-theme^="tonal"] .checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid var(--text-secondary);
    border-radius: 2px;
}
[data-theme^="tonal"] .checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="tonal"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
[data-theme^="tonal"] .radio input[type="radio"] {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
}
[data-theme^="tonal"] .radio input[type="radio"]:checked {
    border-color: var(--color-accent);
}
[data-theme^="tonal"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
}


/* ═══════ iMAC G3 checkbox / radio ═══════ */
/* "Aqua glossy box + inner shadow" */

[data-theme^="candy-plastic"] .checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF4 100%);
    border: 1px solid var(--border-emphasis);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
[data-theme^="candy-plastic"] .checkbox input[type="checkbox"]:checked {
    background: var(--gradient-accent, var(--color-accent));
    border-color: rgba(0,0,0,0.25);
}
[data-theme^="candy-plastic"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
[data-theme^="candy-plastic"] .radio input[type="radio"] {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF4 100%);
    border: 1px solid var(--border-emphasis);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
[data-theme^="candy-plastic"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--gradient-accent, var(--color-accent));
    border-radius: 50%;
    box-shadow: 0 0 4px var(--accent-glow, rgba(38,150,210,0.3));
}


/* ═══════ MEMPHIS checkbox / radio ═══════ */
/* "축제의 일부" — 3px navy + offset shadow + 굵게 */

[data-theme^="memphis"] .checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: var(--bg-surface);
    border: 3px solid var(--memphis-navy);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .checkbox input[type="checkbox"]:checked {
    background: var(--memphis-yellow);
}
[data-theme^="memphis"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--memphis-navy);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}
[data-theme^="memphis"] .radio input[type="radio"] {
    width: 20px;
    height: 20px;
    background: var(--bg-surface);
    border: 3px solid var(--memphis-navy);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .radio input[type="radio"]:checked {
    background: var(--memphis-pink);
}
[data-theme^="memphis"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--memphis-navy);
    border-radius: 50%;
}


/* ═══════ TERMINAL checkbox / radio ═══════ */
/* "[x] / [ ]" ASCII */

[data-theme^="terminal"] .checkbox input[type="checkbox"],
[data-theme^="terminal"] .radio input[type="radio"] {
    width: 26px;
    height: 18px;
    background: transparent;
    border: 0;
}
[data-theme^="terminal"] .checkbox input[type="checkbox"]::after {
    content: "[ ]";
    color: var(--color-accent);
    font-family: var(--terminal-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .checkbox input[type="checkbox"]:checked::after {
    content: "[x]";
}
[data-theme^="terminal"] .radio input[type="radio"]::after {
    content: "( )";
    color: var(--color-accent);
    font-family: var(--terminal-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .radio input[type="radio"]:checked::after {
    content: "(•)";
}


/* ═══════ NEUMORPHISM checkbox / radio ═══════ */
/* "depressed → raised + accent dot" — 진짜 촉각감 */

[data-theme^="neumorphism"] .checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    background: var(--bg-base);
    border: 0;
    border-radius: 7px;
    box-shadow: var(--neu-shadow-in-sm);
}
[data-theme^="neumorphism"] .checkbox input[type="checkbox"]:checked {
    background: var(--bg-base);
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .checkbox input[type="checkbox"]:checked::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 3px;
}
[data-theme^="neumorphism"] .radio input[type="radio"] {
    width: 24px;
    height: 24px;
    background: var(--bg-base);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--neu-shadow-in-sm);
}
[data-theme^="neumorphism"] .radio input[type="radio"]:checked {
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
}


/* ═══════ LIQUID GLASS checkbox / radio ═══════ */
/* glass plate + accent glow when checked */

[data-theme^="purple-haze"] .checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow:
        0 0 12px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
[data-theme^="purple-haze"] .radio input[type="radio"] {
    width: 20px;
    height: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .radio input[type="radio"]:checked {
    border-color: var(--color-accent);
    box-shadow:
        0 0 12px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .radio input[type="radio"]:checked::after {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}


/* ════════════════════════════════════════════════════════════
   Phase 3 — Toggle + Progress 신규 utility
   ════════════════════════════════════════════════════════════ */

/* ─── 공통 .toggle ─── */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    transition: background 200ms, border-color 200ms;
}
.toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--bg-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 200ms ease, background 200ms;
}
.toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.toggle.is-on .toggle__knob {
    transform: translateX(20px);
    background: var(--on-accent);
}

/* ─── 공통 .progress ─── */
.progress {
    width: 100%;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.progress__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
    transition: width 300ms ease;
}


/* ═══════ BRUTALIST toggle / progress ═══════ */
[data-theme^="brutalist"] .toggle {
    background: var(--bg-base);
    border: 3px solid var(--text-primary);
    border-radius: 0;
    width: 56px;
    height: 28px;
}
[data-theme^="brutalist"] .toggle__knob {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--text-primary);
    box-shadow: none;
    top: 2px;
    left: 2px;
}
[data-theme^="brutalist"] .toggle.is-on {
    background: var(--color-accent);
    border-color: var(--text-primary);
}
[data-theme^="brutalist"] .toggle.is-on .toggle__knob {
    transform: translateX(28px);
    background: var(--text-primary);
}
[data-theme^="brutalist"] .progress {
    height: 12px;
    border: 3px solid var(--text-primary);
    border-radius: 0;
    background: var(--bg-base);
    overflow: hidden;
}
[data-theme^="brutalist"] .progress__fill {
    background: var(--color-accent);
    border-radius: 0;
}


/* ═══════ EDITORIAL toggle / progress ═══════ */
[data-theme^="editorial"] .toggle {
    background: transparent;
    border: 1px solid var(--border-emphasis);
    width: 40px;
    height: 22px;
}
[data-theme^="editorial"] .toggle__knob {
    width: 14px;
    height: 14px;
    background: var(--text-primary);
    box-shadow: none;
    top: 3px;
    left: 3px;
}
[data-theme^="editorial"] .toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="editorial"] .toggle.is-on .toggle__knob {
    transform: translateX(18px);
    background: var(--on-accent);
}
[data-theme^="editorial"] .progress {
    height: 1px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    overflow: visible;
    position: relative;
}
[data-theme^="editorial"] .progress__fill {
    background: var(--color-accent);
    height: 1px;
    border-radius: 0;
    margin-top: -1px;
}


/* ═══════ MATERIAL 3 toggle / progress ═══════ */
[data-theme^="tonal"] .toggle {
    background: var(--text-tertiary);
    border: 2px solid var(--text-tertiary);
    width: 52px;
    height: 28px;
}
[data-theme^="tonal"] .toggle__knob {
    width: 16px;
    height: 16px;
    background: var(--bg-surface);
    box-shadow: var(--m3-elev-1);
    top: 4px;
    left: 4px;
}
[data-theme^="tonal"] .toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="tonal"] .toggle.is-on .toggle__knob {
    transform: translateX(24px);
    background: var(--on-accent);
    box-shadow: var(--m3-elev-2);
}
[data-theme^="tonal"] .progress {
    height: 4px;
    background: var(--bg-elevated);
    border: 0;
    border-radius: var(--m3-shape-full, 9999px);
}
[data-theme^="tonal"] .progress__fill {
    background: var(--color-accent);
}


/* ═══════ iMAC G3 toggle / progress (Aqua) ═══════ */
[data-theme^="candy-plastic"] .toggle {
    background: linear-gradient(180deg, #E8EEF4 0%, #FFFFFF 100%);
    border: 1px solid var(--border-emphasis);
    width: 44px;
    height: 22px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
[data-theme^="candy-plastic"] .toggle__knob {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF4 100%);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    top: 2px;
    left: 2px;
}
[data-theme^="candy-plastic"] .toggle.is-on {
    background: var(--gradient-accent, var(--color-accent));
    border-color: rgba(0,0,0,0.25);
}
[data-theme^="candy-plastic"] .toggle.is-on .toggle__knob {
    transform: translateX(20px);
}
[data-theme^="candy-plastic"] .progress {
    height: 14px;
    background: linear-gradient(180deg, #E8EEF4 0%, #FFFFFF 100%);
    border: 1px solid var(--border-emphasis);
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
[data-theme^="candy-plastic"] .progress__fill {
    background: var(--gradient-accent, var(--color-accent));
    border-radius: 7px;
}


/* ═══════ MEMPHIS toggle / progress ═══════ */
[data-theme^="memphis"] .toggle {
    background: var(--bg-surface);
    border: 3px solid var(--memphis-navy);
    border-radius: 0;
    width: 56px;
    height: 28px;
    box-shadow: 3px 3px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .toggle__knob {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--memphis-navy);
    box-shadow: none;
    top: 2px;
    left: 2px;
}
[data-theme^="memphis"] .toggle.is-on {
    background: var(--memphis-pink);
    border-color: var(--memphis-navy);
}
[data-theme^="memphis"] .toggle.is-on .toggle__knob {
    transform: translateX(28px);
    background: var(--memphis-yellow);
}
[data-theme^="memphis"] .progress {
    height: 16px;
    background: var(--bg-surface);
    border: 3px solid var(--memphis-navy);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .progress__fill {
    background: var(--memphis-pink);
    border-radius: 0;
}


/* ═══════ TERMINAL toggle / progress ═══════ */
[data-theme^="terminal"] .toggle {
    background: transparent;
    border: 0;
    width: 60px;
    height: 18px;
    cursor: pointer;
    position: relative;
}
[data-theme^="terminal"] .toggle::before {
    content: "[ OFF ]";
    font-family: var(--terminal-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .toggle.is-on::before {
    content: "[ ON  ]";
    color: var(--color-accent);
}
[data-theme^="terminal"] .toggle__knob {
    display: none;
}
[data-theme^="terminal"] .progress {
    height: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--terminal-font);
    font-size: 12px;
    color: var(--color-accent);
    text-shadow: var(--shadow-glow);
    line-height: 14px;
    overflow: visible;
    position: relative;
    letter-spacing: -0.05em;
}
/* ASCII progress fill via overlay text — preview HTML 사용 시 progress__fill width 를 percentage 로 설정 */
[data-theme^="terminal"] .progress__fill {
    height: 100%;
    background: var(--color-accent);
    opacity: 0.18;
    border-radius: 0;
}


/* ═══════ NEUMORPHISM toggle / progress ═══════ */
/* (이미 .neu-toggle 있지만 .toggle 도 작동) */
[data-theme^="neumorphism"] .toggle {
    background: var(--bg-base);
    border: 0;
    width: 52px;
    height: 30px;
    box-shadow: var(--neu-shadow-in-sm);
    border-radius: 15px;
}
[data-theme^="neumorphism"] .toggle__knob {
    width: 22px;
    height: 22px;
    background: var(--bg-base);
    box-shadow: var(--neu-shadow-out-sm);
    top: 4px;
    left: 4px;
}
[data-theme^="neumorphism"] .toggle.is-on .toggle__knob {
    transform: translateX(22px);
    background: var(--color-accent);
}
[data-theme^="neumorphism"] .progress {
    height: 12px;
    background: var(--bg-base);
    border: 0;
    box-shadow: var(--neu-shadow-in-sm);
    border-radius: 6px;
}
[data-theme^="neumorphism"] .progress__fill {
    background: var(--gradient-accent, var(--color-accent));
    border-radius: 6px;
}


/* ═══════ LIQUID GLASS toggle / progress ═══════ */
[data-theme^="purple-haze"] .toggle {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    width: 44px;
    height: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
[data-theme^="purple-haze"] .toggle__knob {
    width: 16px;
    height: 16px;
    background: var(--bg-surface);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.5);
    top: 3px;
    left: 3px;
}
[data-theme^="purple-haze"] .toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow:
        0 0 16px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.3);
}
[data-theme^="purple-haze"] .toggle.is-on .toggle__knob {
    transform: translateX(20px);
    background: var(--on-accent);
}
[data-theme^="purple-haze"] .progress {
    height: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 9999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
[data-theme^="purple-haze"] .progress__fill {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft, var(--color-accent)));
    box-shadow: 0 0 8px var(--accent-glow);
}


/* ════════════════════════════════════════════════════════════
   Phase 2 — Button states 시그니처 (secondary / ghost / disabled)
   ════════════════════════════════════════════════════════════ */

/* ─── BRUTALIST button states ─── */
[data-theme^="brutalist"] .button--secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--brutalist-border-thick) solid var(--text-primary);
}
[data-theme^="brutalist"] .button--secondary:hover {
    background: var(--color-accent);
    color: #000;
}
[data-theme^="brutalist"] .button--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
[data-theme^="brutalist"] .button--ghost:hover {
    background: var(--color-accent);
    color: #000;
    text-decoration: none;
}

/* ─── EDITORIAL button states ─── */
[data-theme^="editorial"] .button--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-emphasis);
}
[data-theme^="editorial"] .button--secondary:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
[data-theme^="editorial"] .button--ghost {
    background: transparent;
    color: var(--color-accent);
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
[data-theme^="editorial"] .button--ghost:hover {
    text-decoration-thickness: 2px;
}

/* ─── MATERIAL 3 button states ─── */
[data-theme^="tonal"] .button--secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--text-secondary);
}
[data-theme^="tonal"] .button--secondary:hover {
    background: var(--accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
[data-theme^="tonal"] .button--ghost {
    background: transparent;
    color: var(--color-accent);
    border-color: transparent;
}
[data-theme^="tonal"] .button--ghost:hover {
    background: var(--accent-bg);
    color: var(--color-accent);
}

/* ─── iMAC G3 button states (Aqua secondary) ─── */
[data-theme^="candy-plastic"] .button--secondary {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF4 100%);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.10),
        0 1px 0 rgba(255,255,255,0.5) inset;
}
[data-theme^="candy-plastic"] .button--secondary:hover {
    filter: brightness(0.97);
}
[data-theme^="candy-plastic"] .button--ghost {
    background: transparent;
    color: var(--color-accent);
    border-color: transparent;
    box-shadow: none;
}
[data-theme^="candy-plastic"] .button--ghost:hover {
    background: var(--accent-bg);
    color: var(--color-accent);
}

/* ─── MEMPHIS button states ─── */
[data-theme^="memphis"] .button {
    background: var(--memphis-yellow);
    color: var(--memphis-navy);
    border: 3px solid var(--memphis-navy);
    box-shadow: 3px 3px 0 var(--memphis-navy);
    border-radius: 0;
}
[data-theme^="memphis"] .button:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--memphis-navy);
}
[data-theme^="memphis"] .button--primary {
    background: var(--memphis-pink);
    color: var(--memphis-navy);
}
[data-theme^="memphis"] .button--secondary {
    background: var(--memphis-mint);
    color: var(--memphis-navy);
}
[data-theme^="memphis"] .button--ghost {
    background: transparent;
    color: var(--memphis-navy);
    border-color: var(--memphis-navy);
    box-shadow: none;
}
[data-theme^="memphis"] .button--danger {
    background: #FF3D00;
    color: #FFFFFF;
}

/* ─── TERMINAL button states ─── */
[data-theme^="terminal"] .button {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-family: var(--terminal-font);
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .button:hover {
    background: var(--color-accent);
    color: var(--bg-base);
    text-shadow: none;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .button--primary {
    background: var(--color-accent);
    color: var(--bg-base);
    text-shadow: none;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .button--ghost {
    border-color: transparent;
    color: var(--color-accent);
}
[data-theme^="terminal"] .button--ghost:hover {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="terminal"] .button--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
[data-theme^="terminal"] .button--danger:hover {
    background: var(--color-danger);
    color: var(--bg-base);
}

/* ─── NEUMORPHISM button states ─── */
[data-theme^="neumorphism"] .button {
    background: var(--bg-base);
    color: var(--text-primary);
    border: 0;
    box-shadow: var(--neu-shadow-out);
    border-radius: var(--neu-radius);
}
[data-theme^="neumorphism"] .button:hover {
    background: var(--bg-base);
    color: var(--text-primary);
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .button:active {
    box-shadow: var(--neu-shadow-in);
}
[data-theme^="neumorphism"] .button--primary {
    background: var(--color-accent);
    color: var(--on-accent);
    box-shadow:
        var(--neu-shadow-out),
        inset 0 1px 0 rgba(255,255,255,0.15);
}
[data-theme^="neumorphism"] .button--primary:hover {
    background: var(--accent-hover, var(--color-accent));
    color: var(--on-accent);
}
[data-theme^="neumorphism"] .button--secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    box-shadow: var(--neu-shadow-flat);
}
[data-theme^="neumorphism"] .button--ghost {
    background: var(--bg-base);
    color: var(--text-secondary);
    box-shadow: none;
}
[data-theme^="neumorphism"] .button--ghost:hover {
    box-shadow: var(--neu-shadow-flat);
    background: var(--bg-base);
    color: var(--text-primary);
}

/* ─── LIQUID GLASS button states ─── */
[data-theme^="purple-haze"] .button {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .button:hover {
    background: var(--glass-bg-hi);
    color: var(--text-primary);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme^="purple-haze"] .button--primary {
    background: var(--color-accent);
    color: var(--on-accent);
    border-color: var(--color-accent);
    box-shadow:
        0 4px 16px var(--accent-glow),
        0 0 32px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.3);
}
[data-theme^="purple-haze"] .button--primary:hover {
    background: var(--accent-hover, var(--color-accent));
    box-shadow:
        0 8px 24px var(--accent-glow),
        0 0 40px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.35);
}
[data-theme^="purple-haze"] .button--secondary {
    background: var(--glass-bg-hi);
    color: var(--text-primary);
}
[data-theme^="purple-haze"] .button--ghost {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--color-accent);
    border-color: transparent;
    box-shadow: none;
}
[data-theme^="purple-haze"] .button--ghost:hover {
    background: var(--accent-bg);
    color: var(--color-accent);
}


/* ════════════════════════════════════════════════════════════
   Phase 4 — Link hover state + Divider 시그니처
   ════════════════════════════════════════════════════════════ */

/* ─── EDITORIAL link hover — underline 두께 증가 ─── */
[data-theme^="editorial"] .link:hover {
    border-bottom-width: 2px;
    padding-bottom: 0;
    opacity: 1;
}

/* ─── MATERIAL 3 link — tonal hover layer ─── */
[data-theme^="tonal"] .link {
    border-bottom: 0;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--m3-shape-xs, 4px);
    transition: background 150ms;
}
[data-theme^="tonal"] .link:hover {
    background: var(--accent-bg);
    opacity: 1;
}

/* ─── iMAC G3 link — Aqua underline ─── */
[data-theme^="candy-plastic"] .link {
    border-bottom: 1px solid var(--color-accent);
    text-decoration: none;
}
[data-theme^="candy-plastic"] .link:hover {
    background: var(--accent-bg);
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
    opacity: 1;
}

/* ─── MEMPHIS link — 두꺼운 accent underline ─── */
[data-theme^="memphis"] .link {
    border-bottom: 3px solid var(--memphis-pink);
    color: var(--memphis-navy);
    font-weight: 700;
    padding-bottom: 0;
}
[data-theme^="memphis"] .link:hover {
    background: var(--memphis-yellow);
    border-bottom-color: var(--memphis-navy);
    opacity: 1;
}

/* ─── TERMINAL link — glow underline ─── */
[data-theme^="terminal"] .link {
    color: var(--color-accent);
    border-bottom: 1px dashed var(--color-accent);
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .link:hover {
    border-bottom-style: solid;
    text-shadow: var(--shadow-glow), 0 0 12px var(--color-accent);
    opacity: 1;
}

/* ─── NEUMORPHISM link — pressed inset on hover ─── */
[data-theme^="neumorphism"] .link {
    border-bottom: 0;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    color: var(--color-accent);
    transition: box-shadow 150ms;
}
[data-theme^="neumorphism"] .link:hover {
    box-shadow: var(--neu-shadow-in-sm);
    background: var(--bg-base);
    opacity: 1;
}

/* ─── LIQUID GLASS link — glow on hover ─── */
[data-theme^="purple-haze"] .link {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
}
[data-theme^="purple-haze"] .link:hover {
    text-shadow: 0 0 12px var(--accent-glow);
    border-bottom-color: var(--color-accent);
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   DEMO-USE-SECTION — "이 디자인으로 작업하고 싶어요"
   각 테마 상세 페이지 하단 CTA 섹션. 테마 시그니처 완전 반영.
   ══════════════════════════════════════════════════════════════ */

.use-section {
    padding: var(--compose-section-pad, 48px 40px);
    border-top: var(--compose-section-divider, 1px solid var(--border-subtle));
}

.use__title {
    font-size: 1.65rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.1;
}

.use__subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 28px;
    line-height: 1.65;
    max-width: 60ch;
}

.use__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .use__grid { grid-template-columns: 1fr; }
}

.use__card {
    padding: var(--compose-card-pad, 24px);
    border-radius: var(--compose-card-radius, var(--radius-xl, 16px));
    border: var(--compose-card-border, 1px solid var(--border-subtle));
    background: var(--compose-card-bg, var(--bg-elevated));
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--compose-card-shadow, var(--shadow-sm));
}

.use__card--creator {
    background: var(--accent-bg);
    border-color: var(--border-emphasis);
    box-shadow: var(--shadow-md);
}

.use__badge {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-full, 999px);
    width: fit-content;
    background: var(--bg-surface);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
}

.use__card--creator .use__badge {
    background: var(--color-accent);
    color: var(--on-accent, #fff);
    border-color: transparent;
}

.use__card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.use__body {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.68;
    margin: 0;
    flex: 1;
}

.use__code {
    background: var(--bg-base);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-md, 8px);
    padding: 14px 16px;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 0.75rem;
    color: var(--color-accent);
    line-height: 1.85;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.use__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--color-accent);
    color: var(--on-accent, #fff);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--compose-button-radius, var(--radius-lg, 10px));
    text-decoration: none;
    width: fit-content;
    transition: opacity 180ms, transform 150ms;
    box-shadow: var(--shadow-sm);
    border: none;
    cursor: pointer;
    margin-top: 4px;
}

.use__cta:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   추가 컴포넌트 (v1.16.5) — tabs / modal / tooltip / breadcrumb
   / accordion / dropdown / notification / skeleton
   모두 design token 참조 → 15 테마 자동 적응
   ════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.tabs { display: flex; flex-direction: column; gap: 0; }
.tabs__list {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tabs__tab {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tabs__tab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}
.tabs__tab--active,
.tabs__tab[aria-selected="true"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.tabs__panel {
    padding: 20px 0;
}
.tabs__panel[hidden] { display: none; }

/* ── Modal ── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal[data-open],
.modal.is-open { display: flex; }
.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal__dialog {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow: auto;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
}
.modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.modal__body {
    padding: 22px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.modal__footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle);
}
.modal__close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, color 0.15s;
}
.modal__close:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}

/* ── Tooltip (CSS-only, hover-triggered) ── */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted currentColor;
}
.tooltip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text-primary);
    color: var(--bg-base);
    padding: 6px 10px;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}
.tooltip__content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-primary);
}
.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.breadcrumb__item {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb__item:not(.breadcrumb__item--current):hover {
    color: var(--color-accent);
}
.breadcrumb__item--current {
    color: var(--text-primary);
    font-weight: 600;
}
.breadcrumb__sep {
    color: var(--text-ghost);
    font-size: 0.8rem;
}

/* ── Accordion (use <details>) ── */
.accordion {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--bg-elevated);
}
.accordion + .accordion { margin-top: 8px; }
.accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--text-primary);
    font-weight: 600;
    transition: background 0.15s;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { background: var(--bg-elevated-2); }
.accordion__head::after {
    content: "▾";
    color: var(--text-tertiary);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.accordion[open] .accordion__head::after { transform: rotate(180deg); }
.accordion__body {
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Dropdown (use <details>) ── */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background 0.15s;
}
.dropdown__trigger::-webkit-details-marker { display: none; }
.dropdown__trigger::after {
    content: "▾";
    font-size: 0.75rem;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}
.dropdown[open] .dropdown__trigger::after { transform: rotate(180deg); }
.dropdown__trigger:hover { background: var(--bg-elevated-2); }
.dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 50;
}
.dropdown__item {
    display: block;
    padding: 8px 12px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.88rem;
    transition: background 0.12s;
    cursor: pointer;
}
.dropdown__item:hover { background: var(--bg-elevated-2); }
.dropdown__item--danger { color: var(--color-danger); }
.dropdown__divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* ── Notification (toast/alert) ── */
.notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm);
    max-width: 420px;
}
.notification__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-accent);
}
.notification__content { flex: 1; min-width: 0; }
.notification__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.notification__body {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}
.notification__close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    align-self: flex-start;
    margin-top: -2px;
    transition: color 0.15s;
}
.notification__close:hover { color: var(--text-primary); }

.notification--success { border-left-color: var(--color-success); }
.notification--success .notification__icon { color: var(--color-success); }
.notification--warning { border-left-color: var(--color-warning); }
.notification--warning .notification__icon { color: var(--color-warning); }
.notification--danger  { border-left-color: var(--color-danger); }
.notification--danger  .notification__icon { color: var(--color-danger); }
.notification--info    { border-left-color: var(--color-info); }
.notification--info    .notification__icon { color: var(--color-info); }

/* ── Skeleton (loading placeholder) ── */
@keyframes skeleton-pulse {
    0% { opacity: 0.55; }
    50% { opacity: 0.95; }
    100% { opacity: 0.55; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-elevated-2) 0%,
        var(--border-subtle) 50%,
        var(--bg-elevated-2) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm, 4px);
    animation: skeleton-pulse 1.6s ease-in-out infinite;
    display: block;
}
.skeleton + .skeleton { margin-top: 8px; }
.skeleton--text { height: 0.95rem; width: 100%; }
.skeleton--text:last-child { width: 65%; }
.skeleton--title { height: 1.6rem; width: 60%; border-radius: var(--radius-md, 8px); }
.skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton--image { width: 100%; height: 180px; border-radius: var(--radius-lg, 12px); }
.skeleton--button { width: 96px; height: 38px; border-radius: var(--radius-md, 8px); }

/* Glassmorphism: solid deep violet 버튼 (glass card 위에서도 선명) */
[data-theme^="purple-haze"] .use__cta {
    background: #5b21b6;
    color: #fff;
    box-shadow: 0 4px 20px rgba(91,33,182,0.40),
                inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ══ Glassmorphism ══ */
[data-theme="purple-haze"] .use__title,
[data-theme="purple-haze"] .use__card-title { color: #2e0d6b; }
[data-theme="purple-haze"] .use__subtitle,
[data-theme="purple-haze"] .use__body { color: #52336e; }
[data-theme="purple-haze"] .use__badge { color: #7c3aed; background: rgba(255,255,255,0.55); border-color: rgba(196,132,252,0.28); }

[data-theme^="purple-haze"] .use__card {
    /* 시그니처: gradient glass + backdrop-filter — 단순 토큰으로 표현 불가, 명시 필요 */
    background: linear-gradient(135deg,
        rgba(255,255,255,0.22) 0%,
        rgba(216,180,254,0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.38);
    box-shadow: 0 4px 24px rgba(124,58,237,0.12),
                inset 0 1.5px 0 rgba(255,255,255,0.5);
}
[data-theme^="purple-haze"] .use__card--creator {
    background: linear-gradient(135deg,
        rgba(196,132,252,0.30) 0%,
        rgba(167,139,250,0.24) 100%);
    border-color: rgba(196,132,252,0.48);
    box-shadow: 0 8px 36px rgba(124,58,237,0.24),
                inset 0 2px 0 rgba(255,255,255,0.58);
}
[data-theme^="purple-haze"] .use__code {
    background: rgba(10,2,40,0.55);
    border-color: rgba(196,132,252,0.3);
    color: #c084fc;
}

/* ══ Editorial ══ */
[data-theme^="editorial"] .use__title {
    font-size: 2rem;
    letter-spacing: -0.04em;
    border-bottom: 2px solid var(--border-subtle);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
[data-theme^="editorial"] .use__subtitle { margin-bottom: 24px; }
[data-theme^="editorial"] .use__card {
    /* editorial 시그니처: left-rule only, no shadow */
    border-left: 4px solid var(--border-subtle);
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 2px;
    box-shadow: none;
    /* background: --compose-card-bg(=var(--bg-surface)) 자동 적용 */
}
[data-theme^="editorial"] .use__card--creator {
    border-left-color: var(--color-accent);
    background: rgba(99,102,241,0.05);
}
[data-theme^="editorial"] .use__card-title {
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

/* ══ Tonal ══ — radius/border/bg/shadow: --compose-card-* 자동 적용 */

/* ══ Candy Plastic ══ — 시그니처 Aqua 글로시: gradient bg + rounded + emphatic border */
[data-theme^="candy-plastic"] .use__card {
    border-radius: 20px;
    border: 2px solid var(--border-emphasis);
    background: linear-gradient(160deg, #ffffff 0%, var(--bg-elevated-2) 100%);
    box-shadow: var(--shadow-md);
}
[data-theme^="candy-plastic"] .use__card--creator {
    background: linear-gradient(160deg, #EBF5FB 0%, #B5D9EF 100%);
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(38,150,210,0.25),
                inset 0 2px 0 rgba(255,255,255,0.82);
}

/* ══ Memphis 80s ══ — radius/border/bg: --compose-card-* 자동 적용 (0 / 4px navy / bg-surface) */
[data-theme^="memphis"] .use__title {
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.03em;
}
[data-theme^="memphis"] .use__card {
    /* 시그니처: polka dot + offset yellow shadow */
    background-image: radial-gradient(circle, rgba(26,26,46,0.18) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    box-shadow: 5px 5px 0 var(--memphis-yellow, #FFE05C);
}
[data-theme^="memphis"] .use__card--creator {
    background-color: var(--memphis-yellow, #FFE05C);
    background-image: radial-gradient(circle, rgba(26,26,46,0.24) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    box-shadow: 5px 5px 0 var(--memphis-pink, #FF6B9D);
    color: var(--text-primary);
}
[data-theme^="memphis"] .use__card-title { font-weight: 900; font-style: italic; }
[data-theme^="memphis"] .use__code {
    background: rgba(26,26,46,0.06);
    border-color: var(--text-primary);
}

/* ══ Brutalist ══ */
[data-theme^="brutalist"] .use__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.8rem;
    color: var(--text-primary);
}
[data-theme^="brutalist"] .use__subtitle,
[data-theme^="brutalist"] .use__body { color: var(--text-primary); }
[data-theme^="brutalist"] .use__card {
    /* radius/border/bg: --compose-card-* 자동 적용 (0 / 4px solid --text-primary / --bg-base) */
    box-shadow: 6px 6px 0 var(--brutalist-yellow, #FFFF00);
}
[data-theme^="brutalist"] .use__card--creator {
    background: var(--brutalist-yellow, #FFFF00);
    color: #000;
}
/* Yellow card → 모든 자식 텍스트를 black으로 고정 (다크모드에서 white 상속 방지) */
[data-theme^="brutalist"] .use__card--creator .use__badge,
[data-theme^="brutalist"] .use__card--creator .use__card-title,
[data-theme^="brutalist"] .use__card--creator .use__body,
[data-theme^="brutalist"] .use__card--creator .use__code { color: #000; }
[data-theme^="brutalist"] .use__card--creator .use__badge {
    background: rgba(0,0,0,0.14);
    border-color: rgba(0,0,0,0.22);
}
/* Creator card의 CTA는 yellow bg 위에서 black으로 반전 */
[data-theme^="brutalist"] .use__card--creator .use__cta {
    background: #000;
    color: var(--brutalist-yellow, #FFFF00);
    border-color: #000;
}
[data-theme^="brutalist"] .use__card-title {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.02em;
    font-size: 1.0rem;
}
[data-theme^="brutalist"] .use__cta {
    border-radius: 0;
    border: 2px solid var(--brutalist-yellow, #FFFF00);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 900;
}

/* ══ Terminal ══ — radius/bg/border/shadow: --compose-card-* 자동 적용 */
[data-theme^="terminal"] .use__card {
    /* 시그니처: mono font + dashed border + CRT scanline */
    font-family: var(--terminal-font, 'Courier New', monospace);
    border-style: dashed;
    background-image: repeating-linear-gradient(0deg,
        rgba(0,255,102,0.03) 0,
        rgba(0,255,102,0.03) 1px,
        transparent 1px,
        transparent 3px);
}
[data-theme^="terminal"] .use__card--creator {
    border-style: solid;
    border-color: var(--color-accent);
    background-color: var(--accent-bg);
    background-image: repeating-linear-gradient(0deg,
        rgba(0,255,102,0.05) 0,
        rgba(0,255,102,0.05) 1px,
        transparent 1px,
        transparent 3px);
}
[data-theme^="terminal"] .use__card-title::before {
    content: '$ ';
    opacity: 0.55;
    font-weight: normal;
}

/* ══ Neumorphism ══ — 모든 카드/버튼 shadow: --neu-shadow-* 토큰 (light/dark 자동 대응) */
[data-theme^="neumorphism"] .use__card--creator {
    box-shadow: var(--neu-shadow-out);
}
[data-theme^="neumorphism"] .use__cta {
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .use__cta:hover {
    opacity: 1;
    box-shadow: var(--neu-shadow-out-sm);
}

/* ════════════════════════════════════════════════════════════
   NEO-BRUTALISM — 컬러풀 파스텔 카드 + offset 검정 shadow + 0/8 radius
   ════════════════════════════════════════════════════════════ */

[data-theme^="neo-brutalism"] body,
[data-theme^="neo-brutalism"] .demo-page {
    font-family: var(--neo-font);
}

/* Hero */
[data-theme^="neo-brutalism"] .hero__title {
    font-family: var(--neo-font);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
[data-theme^="neo-brutalism"] .hero__eyebrow,
[data-theme^="neo-brutalism"] .eyebrow--accent {
    display: inline-block;
    background: var(--neo-yellow);
    color: #000;
    border: var(--neo-border-thin);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Section label — colored chip */
[data-theme^="neo-brutalism"] .demo-section__label {
    display: inline-block;
    background: var(--neo-pink);
    color: #000;
    border: var(--neo-border-thin);
    padding: 6px 14px;
    border-radius: var(--neo-radius);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 3px 3px 0 #000;
}
[data-theme="neo-brutalism-dark"] .demo-section__label {
    box-shadow: 3px 3px 0 #FAFAFA;
}

/* Buttons */
[data-theme^="neo-brutalism"] .button {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    padding: 12px 22px;
    font-family: var(--neo-font);
    font-weight: 700;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.1s ease, transform 0.1s ease;
}
[data-theme^="neo-brutalism"] .button:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-lg);
}
[data-theme^="neo-brutalism"] .button:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--text-primary);
}
[data-theme^="neo-brutalism"] .button--primary { background: var(--neo-yellow); color: #000; }
[data-theme^="neo-brutalism"] .button--secondary { background: var(--neo-blue); color: #000; }
[data-theme^="neo-brutalism"] .button--ghost { background: var(--bg-elevated); }
[data-theme^="neo-brutalism"] .button--danger { background: var(--neo-pink); color: #000; }

/* Cards */
[data-theme^="neo-brutalism"] .card {
    background: var(--bg-elevated);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--shadow-md);
    padding: 24px;
}
[data-theme^="neo-brutalism"] .card--accent { background: var(--neo-yellow); color: #000; }
[data-theme^="neo-brutalism"] .card--inverted { background: var(--text-primary); color: var(--bg-base); }
[data-theme^="neo-brutalism"] .card--inverted .eyebrow,
[data-theme^="neo-brutalism"] .card--inverted .title,
[data-theme^="neo-brutalism"] .card--inverted .body { color: var(--bg-base); }

/* Form */
[data-theme^="neo-brutalism"] .input,
[data-theme^="neo-brutalism"] .textarea {
    background: var(--bg-elevated);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    color: var(--text-primary);
    font-family: var(--neo-font);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
[data-theme^="neo-brutalism"] .input:focus,
[data-theme^="neo-brutalism"] .textarea:focus {
    outline: none;
    border-color: var(--neo-pink);
    box-shadow: 5px 5px 0 var(--neo-pink);
}
[data-theme^="neo-brutalism"] .label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

/* Checkbox / Radio — hard square */
[data-theme^="neo-brutalism"] .checkbox input[type="checkbox"],
[data-theme^="neo-brutalism"] .radio input[type="radio"] {
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--bg-elevated);
    border: var(--neo-border-thin);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--text-primary);
    margin-right: 8px;
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s;
}
[data-theme^="neo-brutalism"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="neo-brutalism"] .checkbox input[type="checkbox"]:checked,
[data-theme^="neo-brutalism"] .radio input[type="radio"]:checked {
    background: var(--neo-yellow);
}
[data-theme^="neo-brutalism"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 900;
    font-size: 16px;
}
[data-theme^="neo-brutalism"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #000;
    border-radius: 50%;
}

/* Toggle */
[data-theme^="neo-brutalism"] .toggle {
    display: inline-block;
    width: 52px;
    height: 28px;
    background: var(--bg-elevated);
    border: var(--neo-border-thin);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--text-primary);
    transition: background 0.15s;
}
[data-theme^="neo-brutalism"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform 0.18s ease;
}
[data-theme^="neo-brutalism"] .toggle.is-on { background: var(--neo-yellow); }
[data-theme^="neo-brutalism"] .toggle.is-on .toggle__knob { transform: translateX(24px); }

/* Progress */
[data-theme^="neo-brutalism"] .progress {
    background: var(--bg-elevated);
    border: var(--neo-border-thin);
    border-radius: 999px;
    height: 16px;
    overflow: hidden;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.10);
}
[data-theme^="neo-brutalism"] .progress__fill {
    background: var(--neo-pink);
    height: 100%;
    border-right: var(--neo-border-thin);
}

/* Tags */
[data-theme^="neo-brutalism"] .tag {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: var(--neo-border-thin);
    border-radius: 999px;
    font-weight: 700;
    padding: 4px 12px;
    box-shadow: 2px 2px 0 var(--text-primary);
}
[data-theme^="neo-brutalism"] .tag--accent { background: var(--neo-yellow); color: #000; }
[data-theme^="neo-brutalism"] .tag--success { background: var(--neo-green); color: #000; }
[data-theme^="neo-brutalism"] .tag--warning { background: var(--neo-yellow); color: #000; }
[data-theme^="neo-brutalism"] .tag--danger { background: var(--neo-pink); color: #000; }
[data-theme^="neo-brutalism"] .tag--inverted { background: var(--text-primary); color: var(--bg-base); }

/* Stat */
[data-theme^="neo-brutalism"] .stat {
    background: var(--bg-elevated);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--shadow-md);
    padding: 20px;
}
[data-theme^="neo-brutalism"] .stat__value {
    font-family: var(--neo-font);
    font-weight: 900;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
}

/* Link */
[data-theme^="neo-brutalism"] .link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    border-bottom: var(--neo-border-thin);
    padding-bottom: 1px;
    transition: background 0.1s;
}
[data-theme^="neo-brutalism"] .link:hover {
    background: var(--neo-yellow);
    color: #000;
}

/* Section — colored block */
[data-theme^="neo-brutalism"] .section {
    background: var(--bg-elevated);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--shadow-md);
    padding: 32px;
}
[data-theme^="neo-brutalism"] .section + .section { margin-top: 28px; }

/* Toolbar */
[data-theme^="neo-brutalism"] .demo-toolbar {
    background: var(--neo-yellow);
    border: var(--neo-border);
    border-radius: var(--neo-radius);
    color: #000;
    box-shadow: var(--shadow-md);
}
[data-theme^="neo-brutalism"] .demo-toolbar__back { color: #000; font-weight: 800; }
[data-theme^="neo-brutalism"] .demo-toolbar__brand { color: #000; font-weight: 700; }


/* ════════════════════════════════════════════════════════════
   CLAYMORPHISM — 부풀어 오른 점토 / 3중 inset shadow / 큰 radius
   ════════════════════════════════════════════════════════════ */

[data-theme^="claymorphism"] body,
[data-theme^="claymorphism"] .demo-page {
    font-family: var(--clay-font);
}

/* Hero */
[data-theme^="claymorphism"] .hero__title {
    font-family: var(--clay-font);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
}
[data-theme^="claymorphism"] .hero__eyebrow {
    display: inline-block;
    background: var(--clay-pink);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--clay-shadow-out-sm);
}

/* Section label */
[data-theme^="claymorphism"] .demo-section__label {
    display: inline-block;
    background: var(--clay-blue);
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--clay-shadow-out-sm);
}

/* Buttons */
[data-theme^="claymorphism"] .button {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: none;
    border-radius: var(--clay-radius);
    padding: 14px 28px;
    font-family: var(--clay-font);
    font-weight: 700;
    box-shadow: var(--clay-shadow-out);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
[data-theme^="claymorphism"] .button:hover { transform: translateY(-2px); }
[data-theme^="claymorphism"] .button:active {
    box-shadow: var(--clay-shadow-pressed);
    transform: translateY(1px);
}
[data-theme^="claymorphism"] .button--primary { background: var(--clay-pink); color: #fff; }
[data-theme^="claymorphism"] .button--secondary { background: var(--clay-blue); color: #fff; }
[data-theme^="claymorphism"] .button--ghost { background: var(--bg-elevated); }
[data-theme^="claymorphism"] .button--danger { background: var(--color-danger); color: #fff; }

/* Cards */
[data-theme^="claymorphism"] .card {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-out);
    padding: 28px;
}
[data-theme^="claymorphism"] .card--accent {
    background: linear-gradient(135deg, var(--clay-pink) 0%, var(--clay-purple) 100%);
    color: #fff;
}
[data-theme^="claymorphism"] .card--accent .eyebrow,
[data-theme^="claymorphism"] .card--accent .title,
[data-theme^="claymorphism"] .card--accent .body { color: #fff; }
[data-theme^="claymorphism"] .card--inverted {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-mint) 100%);
    color: var(--text-primary);
}

/* Form */
[data-theme^="claymorphism"] .input,
[data-theme^="claymorphism"] .textarea {
    background: var(--bg-base);
    border: none;
    border-radius: var(--clay-radius-sm);
    color: var(--text-primary);
    font-family: var(--clay-font);
    padding: 14px 18px;
    box-shadow: var(--clay-shadow-pressed);
}
[data-theme^="claymorphism"] .input:focus,
[data-theme^="claymorphism"] .textarea:focus {
    outline: none;
    box-shadow: var(--clay-shadow-pressed), 0 0 0 3px var(--accent-glow);
}
[data-theme^="claymorphism"] .label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Checkbox / Radio */
[data-theme^="claymorphism"] .checkbox input[type="checkbox"],
[data-theme^="claymorphism"] .radio input[type="radio"] {
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--bg-base);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: var(--clay-shadow-pressed);
    margin-right: 8px;
    position: relative;
}
[data-theme^="claymorphism"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="claymorphism"] .checkbox input[type="checkbox"]:checked,
[data-theme^="claymorphism"] .radio input[type="radio"]:checked {
    background: var(--clay-pink);
    box-shadow: var(--clay-shadow-out-sm);
}
[data-theme^="claymorphism"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
[data-theme^="claymorphism"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle */
[data-theme^="claymorphism"] .toggle {
    display: inline-block;
    width: 56px;
    height: 30px;
    background: var(--bg-base);
    border: none;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--clay-shadow-pressed);
    transition: background 0.2s;
}
[data-theme^="claymorphism"] .toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--bg-elevated);
    border-radius: 50%;
    box-shadow: var(--clay-shadow-out-sm);
    transition: transform 0.22s ease;
}
[data-theme^="claymorphism"] .toggle.is-on { background: var(--clay-pink); }
[data-theme^="claymorphism"] .toggle.is-on .toggle__knob { transform: translateX(26px); }

/* Progress */
[data-theme^="claymorphism"] .progress {
    background: var(--bg-base);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    box-shadow: var(--clay-shadow-pressed);
}
[data-theme^="claymorphism"] .progress__fill {
    background: linear-gradient(90deg, var(--clay-pink) 0%, var(--clay-purple) 100%);
    height: 100%;
    border-radius: 999px;
}

/* Tags */
[data-theme^="claymorphism"] .tag {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 5px 14px;
    box-shadow: var(--clay-shadow-out-sm);
}
[data-theme^="claymorphism"] .tag--accent { background: var(--clay-pink); color: #fff; }
[data-theme^="claymorphism"] .tag--success { background: var(--clay-mint); color: #1A4D2E; }
[data-theme^="claymorphism"] .tag--warning { background: var(--clay-yellow); color: #4A3E0B; }
[data-theme^="claymorphism"] .tag--danger { background: var(--color-danger); color: #fff; }
[data-theme^="claymorphism"] .tag--inverted { background: var(--text-primary); color: var(--bg-base); }

/* Stat */
[data-theme^="claymorphism"] .stat {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-out);
    padding: 24px;
}
[data-theme^="claymorphism"] .stat__value {
    font-family: var(--clay-font);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, var(--clay-pink), var(--clay-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Link */
[data-theme^="claymorphism"] .link {
    color: var(--clay-pink);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s;
}
[data-theme^="claymorphism"] .link:hover { color: var(--accent-hover); }

/* Section as clay raised card */
[data-theme^="claymorphism"] .section {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-out);
    padding: 36px;
}
[data-theme^="claymorphism"] .section + .section { margin-top: 28px; }

/* Toolbar */
[data-theme^="claymorphism"] .demo-toolbar {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-out-sm);
}


/* ════════════════════════════════════════════════════════════
   BENTO — Apple-style 펄 그리드 / 비대칭 셀 / 절제된 액센트
   ════════════════════════════════════════════════════════════ */

[data-theme^="bento"] body,
[data-theme^="bento"] .demo-page {
    font-family: var(--bento-font);
}

/* Hero */
[data-theme^="bento"] .hero__title {
    font-family: var(--bento-font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
[data-theme^="bento"] .hero__eyebrow {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Section label */
[data-theme^="bento"] .demo-section__label {
    color: var(--text-tertiary);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Section — bento cell */
[data-theme^="bento"] .section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bento-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--bento-cell-pad);
}
[data-theme^="bento"] .section + .section { margin-top: var(--bento-gap); }

/* Bento Grid signature — 비대칭 셀 with span */
[data-theme^="bento"] .grid--features {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--bento-gap);
}
[data-theme^="bento"] .grid--features > * { grid-column: span 2; }
[data-theme^="bento"] .grid--features > *:first-child { grid-column: span 3; }
[data-theme^="bento"] .grid--features > *:nth-child(2) { grid-column: span 3; }
@media (max-width: 720px) {
    [data-theme^="bento"] .grid--features > *,
    [data-theme^="bento"] .grid--features > *:first-child,
    [data-theme^="bento"] .grid--features > *:nth-child(2) {
        grid-column: span 6;
    }
}

/* Buttons — Apple rounded */
[data-theme^="bento"] .button {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-emphasis);
    border-radius: 999px;
    padding: 10px 22px;
    font-family: var(--bento-font);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: all 0.18s ease;
}
[data-theme^="bento"] .button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
[data-theme^="bento"] .button--primary {
    background: var(--color-accent);
    color: var(--on-accent);
    border-color: var(--color-accent);
}
[data-theme^="bento"] .button--primary:hover { background: var(--accent-hover); }
[data-theme^="bento"] .button--secondary { background: var(--bg-elevated); color: var(--text-primary); }
[data-theme^="bento"] .button--ghost { background: transparent; box-shadow: none; }
[data-theme^="bento"] .button--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

/* Cards — bento cells */
[data-theme^="bento"] .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bento-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--bento-cell-pad);
}
[data-theme^="bento"] .card--accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-soft) 100%);
    border: none;
    color: #fff;
}
[data-theme^="bento"] .card--accent .eyebrow,
[data-theme^="bento"] .card--accent .title,
[data-theme^="bento"] .card--accent .body { color: #fff; }
[data-theme^="bento"] .card--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border: none;
}
[data-theme^="bento"] .card--inverted .eyebrow,
[data-theme^="bento"] .card--inverted .title,
[data-theme^="bento"] .card--inverted .body { color: var(--bg-base); }

/* Form */
[data-theme^="bento"] .input,
[data-theme^="bento"] .textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--bento-radius-sm);
    color: var(--text-primary);
    font-family: var(--bento-font);
    padding: 12px 16px;
}
[data-theme^="bento"] .input:focus,
[data-theme^="bento"] .textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme^="bento"] .label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Checkbox / Radio — Apple style */
[data-theme^="bento"] .checkbox input[type="checkbox"],
[data-theme^="bento"] .radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-emphasis);
    border-radius: 6px;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    transition: all 0.15s;
}
[data-theme^="bento"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="bento"] .checkbox input[type="checkbox"]:checked,
[data-theme^="bento"] .radio input[type="radio"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="bento"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
}
[data-theme^="bento"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle — iOS style */
[data-theme^="bento"] .toggle {
    display: inline-block;
    width: 52px;
    height: 32px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
[data-theme^="bento"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    transition: transform 0.2s ease;
}
[data-theme^="bento"] .toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="bento"] .toggle.is-on .toggle__knob { transform: translateX(20px); }

/* Progress */
[data-theme^="bento"] .progress {
    background: var(--bg-elevated-2);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}
[data-theme^="bento"] .progress__fill {
    background: var(--color-accent);
    height: 100%;
    border-radius: 999px;
}

/* Tags */
[data-theme^="bento"] .tag {
    background: var(--bg-elevated-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-weight: 500;
    padding: 3px 10px;
    font-size: 0.78rem;
}
[data-theme^="bento"] .tag--accent { background: var(--accent-bg); color: var(--color-accent); border-color: var(--color-accent); }
[data-theme^="bento"] .tag--success { background: var(--success-bg); color: var(--color-success-strong); }
[data-theme^="bento"] .tag--warning { background: var(--warning-bg); color: var(--color-warning); }
[data-theme^="bento"] .tag--danger { background: var(--danger-bg); color: var(--color-danger); }
[data-theme^="bento"] .tag--inverted { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }

/* Stat — bento number block */
[data-theme^="bento"] .stat {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bento-radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}
[data-theme^="bento"] .stat__value {
    font-family: var(--bento-font-display);
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-primary);
}
[data-theme^="bento"] .stat__delta { color: var(--color-success); }
[data-theme^="bento"] .stat__delta--down { color: var(--color-danger); }

/* Link */
[data-theme^="bento"] .link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}
[data-theme^="bento"] .link:hover { opacity: 0.7; }

/* Toolbar */
[data-theme^="bento"] .demo-toolbar {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bento-radius);
    box-shadow: var(--shadow-sm);
}


/* ════════════════════════════════════════════════════════════
   FRUTIGER AERO — 2000s Aqua gloss / sky + emerald / glossy buttons
   ════════════════════════════════════════════════════════════ */

[data-theme^="frutiger-aero"] body,
[data-theme^="frutiger-aero"] .demo-page {
    font-family: var(--aero-font);
    background: var(--aero-sky-bg);
    background-attachment: fixed;
}

/* Hero */
[data-theme^="frutiger-aero"] .hero__title {
    font-family: var(--aero-font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    background: linear-gradient(180deg, var(--text-primary) 0%, var(--aero-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme^="frutiger-aero"] .hero__eyebrow {
    display: inline-block;
    color: #fff;
    background: var(--gradient-accent);
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Section label */
[data-theme^="frutiger-aero"] .demo-section__label {
    display: inline-block;
    color: var(--aero-deep);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: var(--shadow-sm);
}
[data-theme="frutiger-aero-dark"] .demo-section__label {
    color: var(--aero-sky);
    background: rgba(10,34,56,0.65);
    border-color: rgba(102,224,255,0.28);
}

/* Section — translucent glass panel */
[data-theme^="frutiger-aero"] .section {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: var(--aero-radius);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.85);
    padding: 32px;
}
[data-theme="frutiger-aero-dark"] .section {
    background: rgba(14,43,71,0.55);
    border-color: rgba(102,224,255,0.18);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(102,224,255,0.16);
}
[data-theme^="frutiger-aero"] .section + .section { margin-top: 20px; }

/* Buttons — signature glossy aqua */
[data-theme^="frutiger-aero"] .button {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.80) 0%,
        rgba(255,255,255,0.30) 50%,
        rgba(255,255,255,0.55) 51%,
        rgba(230,243,255,0.85) 100%);
    color: var(--aero-deep);
    border: 1px solid rgba(0,88,168,0.32);
    border-radius: var(--aero-radius);
    padding: 10px 22px;
    font-family: var(--aero-font);
    font-weight: 600;
    box-shadow:
        0 1px 2px rgba(0,88,168,0.20),
        0 2px 8px rgba(0,170,255,0.15),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transition: all 0.18s ease;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme^="frutiger-aero"] .button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0,88,168,0.25),
        0 8px 20px rgba(0,170,255,0.25),
        inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme^="frutiger-aero"] .button:active {
    transform: translateY(0);
    background: linear-gradient(to bottom,
        rgba(230,243,255,0.95) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0.85) 100%);
}

/* Primary — full Aqua gradient (시그니처: 상단 highlight 25% + 하단 accent 75%)
   v1.17.x 가독성 fix: gloss breakpoint 50% → 22% 로 올려서 텍스트가 항상 accent 색 위에. */
[data-theme^="frutiger-aero"] .button--primary {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.15) 22%,
        rgba(0,170,255,0.95) 30%,
        rgba(0,88,168,1.0) 100%);
    color: #fff;
    border-color: var(--aero-deep);
    text-shadow:
        0 1px 0 rgba(0,40,100,0.85),
        1px 1px 2px rgba(0,40,100,0.50);
    box-shadow:
        0 2px 4px rgba(0,88,168,0.30),
        0 4px 12px rgba(0,170,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme^="frutiger-aero"] .button--secondary {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.15) 22%,
        rgba(0,197,138,0.95) 30%,
        rgba(0,143,96,1.0) 100%);
    color: #fff;
    border-color: rgba(0,143,96,0.85);
    text-shadow:
        0 1px 0 rgba(0,60,40,0.85),
        1px 1px 2px rgba(0,40,30,0.50);
}
[data-theme^="frutiger-aero"] .button--ghost {
    background: rgba(255,255,255,0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--aero-deep);
    border-color: rgba(0,88,168,0.20);
    box-shadow: none;
    text-shadow: none;
}
[data-theme^="frutiger-aero"] .button--danger {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.15) 22%,
        rgba(255,82,82,0.95) 30%,
        rgba(211,47,47,1.0) 100%);
    color: #fff;
    border-color: rgba(211,47,47,0.85);
    text-shadow:
        0 1px 0 rgba(100,20,20,0.85),
        1px 1px 2px rgba(70,10,10,0.50);
}

/* Cards — frosted bubble */
[data-theme^="frutiger-aero"] .card {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: var(--aero-radius);
    box-shadow:
        0 2px 8px rgba(0,88,168,0.10),
        0 8px 24px rgba(0,170,255,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95);
    padding: 24px;
}
[data-theme="frutiger-aero-dark"] .card {
    background: rgba(14,43,71,0.65);
    border-color: rgba(102,224,255,0.22);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.40),
        0 8px 24px rgba(0,200,255,0.15),
        inset 0 1px 0 rgba(102,224,255,0.16);
}
[data-theme^="frutiger-aero"] .card--accent {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    text-shadow: 0 1px 1px rgba(0,88,168,0.45);
}
[data-theme^="frutiger-aero"] .card--accent .eyebrow,
[data-theme^="frutiger-aero"] .card--accent .title,
[data-theme^="frutiger-aero"] .card--accent .body { color: #fff; }
[data-theme^="frutiger-aero"] .card--inverted {
    background: linear-gradient(135deg, var(--aero-emerald) 0%, var(--aero-aqua) 100%);
    color: #fff;
    border: none;
}
[data-theme^="frutiger-aero"] .card--inverted .eyebrow,
[data-theme^="frutiger-aero"] .card--inverted .title,
[data-theme^="frutiger-aero"] .card--inverted .body { color: #fff; }

/* Form */
[data-theme^="frutiger-aero"] .input,
[data-theme^="frutiger-aero"] .textarea {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,88,168,0.28);
    border-radius: var(--aero-radius-sm);
    color: var(--text-primary);
    font-family: var(--aero-font);
    padding: 11px 16px;
    box-shadow:
        inset 0 1px 3px rgba(0,88,168,0.12),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="frutiger-aero-dark"] .input,
[data-theme="frutiger-aero-dark"] .textarea {
    background: rgba(5,22,40,0.55);
    border-color: rgba(102,224,255,0.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
[data-theme^="frutiger-aero"] .input:focus,
[data-theme^="frutiger-aero"] .textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow:
        inset 0 1px 3px rgba(0,88,168,0.10),
        0 0 0 3px var(--accent-glow);
}
[data-theme^="frutiger-aero"] .label {
    font-weight: 600;
    color: var(--aero-deep);
    font-size: 0.85rem;
}
[data-theme="frutiger-aero-dark"] .label { color: var(--aero-sky); }

/* Checkbox / Radio — glossy bubble */
[data-theme^="frutiger-aero"] .checkbox input[type="checkbox"],
[data-theme^="frutiger-aero"] .radio input[type="radio"] {
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.85) 0%,
        rgba(230,243,255,0.65) 100%);
    border: 1px solid rgba(0,88,168,0.32);
    border-radius: 6px;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 1px 2px rgba(0,88,168,0.12);
    transition: all 0.15s;
}
[data-theme^="frutiger-aero"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="frutiger-aero"] .checkbox input[type="checkbox"]:checked,
[data-theme^="frutiger-aero"] .radio input[type="radio"]:checked {
    background: var(--gradient-accent);
    border-color: var(--aero-deep);
}
[data-theme^="frutiger-aero"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
    text-shadow: 0 1px 1px rgba(0,88,168,0.5);
}
[data-theme^="frutiger-aero"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle — Aqua glossy */
[data-theme^="frutiger-aero"] .toggle {
    display: inline-block;
    width: 52px;
    height: 28px;
    background: linear-gradient(to bottom,
        rgba(0,88,168,0.10) 0%,
        rgba(0,88,168,0.20) 100%);
    border: 1px solid rgba(0,88,168,0.28);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0,88,168,0.18);
    transition: background 0.2s;
}
[data-theme^="frutiger-aero"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom,
        #fff 0%,
        #E6F3FF 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 3px rgba(0,88,168,0.30),
        inset 0 1px 0 rgba(255,255,255,1);
    transition: transform 0.22s ease;
}
[data-theme^="frutiger-aero"] .toggle.is-on { background: var(--gradient-accent); border-color: var(--aero-deep); }
[data-theme^="frutiger-aero"] .toggle.is-on .toggle__knob { transform: translateX(24px); }

/* Progress */
[data-theme^="frutiger-aero"] .progress {
    background: rgba(0,88,168,0.12);
    border: 1px solid rgba(0,88,168,0.18);
    border-radius: 999px;
    height: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,88,168,0.18);
}
[data-theme^="frutiger-aero"] .progress__fill {
    background: var(--gradient-accent);
    height: 100%;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Tags — translucent bubble */
[data-theme^="frutiger-aero"] .tag {
    background: rgba(255,255,255,0.65);
    color: var(--aero-deep);
    border: 1px solid rgba(0,88,168,0.20);
    border-radius: 999px;
    font-weight: 600;
    padding: 3px 12px;
    font-size: 0.78rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="frutiger-aero-dark"] .tag {
    background: rgba(14,43,71,0.55);
    color: var(--aero-sky);
    border-color: rgba(102,224,255,0.22);
}
[data-theme^="frutiger-aero"] .tag--accent { background: var(--gradient-accent); color: #fff; border-color: var(--aero-deep); }
[data-theme^="frutiger-aero"] .tag--success {
    background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(0,197,138,0.85));
    color: #fff;
    border-color: rgba(0,143,96,0.7);
}
[data-theme^="frutiger-aero"] .tag--warning {
    background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,179,0,0.85));
    color: #4A3700;
    border-color: rgba(200,140,0,0.7);
}
[data-theme^="frutiger-aero"] .tag--danger {
    background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,82,82,0.85));
    color: #fff;
    border-color: rgba(211,47,47,0.7);
}
[data-theme^="frutiger-aero"] .tag--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* Stat */
[data-theme^="frutiger-aero"] .stat {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: var(--aero-radius);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.95);
    padding: 22px;
}
[data-theme="frutiger-aero-dark"] .stat {
    background: rgba(14,43,71,0.55);
    border-color: rgba(102,224,255,0.20);
}
[data-theme^="frutiger-aero"] .stat__value {
    font-family: var(--aero-font-display);
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, var(--aero-aqua) 0%, var(--aero-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Link */
[data-theme^="frutiger-aero"] .link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
[data-theme^="frutiger-aero"] .link:hover { color: var(--aero-deep); text-decoration: underline; }

/* Toolbar */
[data-theme^="frutiger-aero"] .demo-toolbar {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: var(--aero-radius);
    box-shadow: var(--shadow-sm);
}
[data-theme="frutiger-aero-dark"] .demo-toolbar {
    background: rgba(10,34,56,0.55);
    border-color: rgba(102,224,255,0.22);
}


/* ════════════════════════════════════════════════════════════
   CYBERPUNK / SYNTHWAVE — 네온 마젠타+시안 / vaporwave grid / glow
   ════════════════════════════════════════════════════════════ */

[data-theme^="cyberpunk"] body,
[data-theme^="cyberpunk"] .demo-page {
    font-family: var(--cyber-font);
    background: var(--cyber-grid-bg);
    background-attachment: fixed;
}

/* Hero — 글리치/네온 시그니처 */
[data-theme^="cyberpunk"] .hero__title {
    font-family: var(--cyber-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow:
        2px 0 0 var(--cyber-magenta),
        -2px 0 0 var(--cyber-cyan);
}
[data-theme="cyberpunk-dark"] .hero__title {
    color: #fff;
    text-shadow:
        3px 0 0 var(--cyber-magenta),
        -3px 0 0 var(--cyber-cyan),
        0 0 24px rgba(255,0,110,0.55);
}
[data-theme^="cyberpunk"] .hero__eyebrow {
    display: inline-block;
    color: var(--cyber-cyan);
    background: transparent;
    border: 1px solid var(--cyber-cyan);
    padding: 4px 12px;
    font-family: var(--cyber-font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
[data-theme="cyberpunk-dark"] .hero__eyebrow {
    text-shadow: 0 0 8px var(--cyber-cyan);
    box-shadow: 0 0 12px rgba(0,240,255,0.45), inset 0 0 12px rgba(0,240,255,0.15);
}

/* Section label */
[data-theme^="cyberpunk"] .demo-section__label {
    display: inline-block;
    color: var(--cyber-magenta);
    background: transparent;
    border: 1px solid var(--cyber-magenta);
    padding: 5px 12px;
    font-family: var(--cyber-font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
[data-theme="cyberpunk-dark"] .demo-section__label {
    text-shadow: 0 0 8px var(--cyber-magenta);
    box-shadow: 0 0 12px rgba(255,0,110,0.45);
}

/* Section — neon-edged panel */
[data-theme^="cyberpunk"] .section {
    background: var(--bg-surface);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--cyber-radius);
    box-shadow: var(--shadow-sm);
    padding: 32px;
    position: relative;
}
[data-theme="cyberpunk-dark"] .section {
    background: rgba(20,6,46,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255,0,110,0.32);
}
[data-theme^="cyberpunk"] .section + .section { margin-top: 20px; }

/* Buttons — 네온 outline + glow */
[data-theme^="cyberpunk"] .button {
    background: transparent;
    color: var(--cyber-cyan);
    border: 1px solid var(--cyber-cyan);
    border-radius: var(--cyber-radius);
    padding: 10px 22px;
    font-family: var(--cyber-font);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    box-shadow: 0 0 0 transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}
[data-theme="cyberpunk-dark"] .button {
    text-shadow: 0 0 4px var(--cyber-cyan);
}
[data-theme^="cyberpunk"] .button:hover {
    background: var(--cyber-cyan);
    color: var(--bg-base);
    box-shadow: 0 0 16px var(--cyber-cyan), inset 0 0 16px rgba(0,240,255,0.18);
    text-shadow: none;
}
[data-theme^="cyberpunk"] .button--primary {
    background: var(--gradient-accent);
    color: #fff;
    border-color: var(--cyber-magenta);
    text-shadow: 0 0 6px rgba(255,0,110,0.55);
    box-shadow: 0 0 16px rgba(255,0,110,0.45);
}
[data-theme^="cyberpunk"] .button--primary:hover {
    box-shadow: 0 0 24px rgba(255,0,110,0.75), 0 0 48px rgba(0,240,255,0.45);
    filter: brightness(1.1);
}
[data-theme^="cyberpunk"] .button--secondary {
    color: var(--cyber-magenta);
    border-color: var(--cyber-magenta);
}
[data-theme^="cyberpunk"] .button--secondary:hover {
    background: var(--cyber-magenta);
    color: #fff;
    box-shadow: 0 0 16px var(--cyber-magenta);
}
[data-theme^="cyberpunk"] .button--ghost {
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}
[data-theme^="cyberpunk"] .button--ghost:hover {
    background: transparent;
    color: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
}
[data-theme^="cyberpunk"] .button--danger {
    color: var(--cyber-magenta);
    border-color: var(--cyber-magenta);
}

/* Cards */
[data-theme^="cyberpunk"] .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--cyber-radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    position: relative;
}
[data-theme="cyberpunk-dark"] .card {
    background: rgba(31,11,71,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Card top accent stripe (vaporwave 시그니처) */
[data-theme^="cyberpunk"] .card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: var(--cyber-radius) var(--cyber-radius) 0 0;
}
[data-theme="cyberpunk-dark"] .card::before {
    box-shadow: 0 0 12px var(--cyber-magenta);
}
[data-theme^="cyberpunk"] .card--accent {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
[data-theme^="cyberpunk"] .card--accent .eyebrow,
[data-theme^="cyberpunk"] .card--accent .title,
[data-theme^="cyberpunk"] .card--accent .body { color: #fff; }
[data-theme^="cyberpunk"] .card--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border: none;
}
[data-theme^="cyberpunk"] .card--inverted .eyebrow,
[data-theme^="cyberpunk"] .card--inverted .title,
[data-theme^="cyberpunk"] .card--inverted .body { color: var(--bg-base); }

/* Form */
[data-theme^="cyberpunk"] .input,
[data-theme^="cyberpunk"] .textarea {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--cyber-radius);
    color: var(--text-primary);
    font-family: var(--cyber-font-mono);
    padding: 11px 14px;
}
[data-theme="cyberpunk-dark"] .input,
[data-theme="cyberpunk-dark"] .textarea {
    background: rgba(10,1,24,0.65);
}
[data-theme^="cyberpunk"] .input:focus,
[data-theme^="cyberpunk"] .textarea:focus {
    outline: none;
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 16px rgba(0,240,255,0.35);
}
[data-theme^="cyberpunk"] .label {
    font-family: var(--cyber-font-mono);
    font-weight: 600;
    color: var(--cyber-cyan);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
[data-theme="cyberpunk-dark"] .label { text-shadow: 0 0 4px var(--cyber-cyan); }

/* Checkbox / Radio — neon edge */
[data-theme^="cyberpunk"] .checkbox input[type="checkbox"],
[data-theme^="cyberpunk"] .radio input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 1px solid var(--cyber-cyan);
    border-radius: 0;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
}
[data-theme^="cyberpunk"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="cyberpunk"] .checkbox input[type="checkbox"]:checked,
[data-theme^="cyberpunk"] .radio input[type="radio"]:checked {
    background: var(--cyber-magenta);
    border-color: var(--cyber-magenta);
    box-shadow: 0 0 12px var(--cyber-magenta);
}
[data-theme^="cyberpunk"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 12px;
}
[data-theme^="cyberpunk"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute; inset: 4px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle */
[data-theme^="cyberpunk"] .toggle {
    display: inline-block;
    width: 52px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}
[data-theme^="cyberpunk"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--cyber-cyan);
    border-radius: 0;
    transition: transform 0.2s ease, background 0.2s;
}
[data-theme="cyberpunk-dark"] .toggle__knob { box-shadow: 0 0 8px var(--cyber-cyan); }
[data-theme^="cyberpunk"] .toggle.is-on {
    border-color: var(--cyber-magenta);
    box-shadow: 0 0 12px rgba(255,0,110,0.45);
}
[data-theme^="cyberpunk"] .toggle.is-on .toggle__knob {
    transform: translateX(26px);
    background: var(--cyber-magenta);
}
[data-theme="cyberpunk-dark"] .toggle.is-on .toggle__knob { box-shadow: 0 0 12px var(--cyber-magenta); }

/* Progress */
[data-theme^="cyberpunk"] .progress {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    height: 10px;
    overflow: hidden;
}
[data-theme^="cyberpunk"] .progress__fill {
    background: var(--gradient-accent);
    height: 100%;
}
[data-theme="cyberpunk-dark"] .progress__fill { box-shadow: 0 0 12px rgba(255,0,110,0.65); }

/* Tags — neon outline */
[data-theme^="cyberpunk"] .tag {
    background: transparent;
    color: var(--cyber-cyan);
    border: 1px solid var(--cyber-cyan);
    border-radius: 0;
    font-family: var(--cyber-font-mono);
    font-weight: 600;
    padding: 2px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
[data-theme="cyberpunk-dark"] .tag {
    text-shadow: 0 0 4px var(--cyber-cyan);
}
[data-theme^="cyberpunk"] .tag--accent { color: var(--cyber-magenta); border-color: var(--cyber-magenta); }
[data-theme^="cyberpunk"] .tag--success { color: var(--color-success); border-color: var(--color-success); }
[data-theme^="cyberpunk"] .tag--warning { color: var(--cyber-yellow); border-color: var(--cyber-yellow); }
[data-theme^="cyberpunk"] .tag--danger { color: var(--cyber-magenta); border-color: var(--cyber-magenta); }
[data-theme^="cyberpunk"] .tag--inverted {
    background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary);
}
[data-theme="cyberpunk-dark"] .tag--accent,
[data-theme="cyberpunk-dark"] .tag--danger { text-shadow: 0 0 4px var(--cyber-magenta); }

/* Stat */
[data-theme^="cyberpunk"] .stat {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--cyber-radius);
    padding: 22px;
    position: relative;
}
[data-theme^="cyberpunk"] .stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-accent);
}
[data-theme="cyberpunk-dark"] .stat { background: rgba(31,11,71,0.55); }
[data-theme^="cyberpunk"] .stat__value {
    font-family: var(--cyber-font-display);
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Link */
[data-theme^="cyberpunk"] .link {
    color: var(--cyber-cyan);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    transition: all 0.15s;
}
[data-theme="cyberpunk-dark"] .link { text-shadow: 0 0 4px var(--cyber-cyan); }
[data-theme^="cyberpunk"] .link:hover {
    color: var(--cyber-magenta);
    border-color: var(--cyber-magenta);
}

/* Mono */
[data-theme^="cyberpunk"] .mono { font-family: var(--cyber-font-mono); color: var(--cyber-cyan); }

/* Toolbar */
[data-theme^="cyberpunk"] .demo-toolbar {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--cyber-radius);
}
[data-theme="cyberpunk-dark"] .demo-toolbar {
    background: rgba(20,6,46,0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ════════════════════════════════════════════════════════════
   SWISS / BAUHAUS — 기하학 정밀 + 빨강 단색 + Helvetica
   shadow 0 / radius 0 / 단색 액센트 / 정확한 그리드
   ════════════════════════════════════════════════════════════ */

[data-theme^="swiss"] body,
[data-theme^="swiss"] .demo-page {
    font-family: var(--swiss-font);
    background: var(--bg-base);
}

/* Hero — 거대 타이틀 */
[data-theme^="swiss"] .hero__title {
    font-family: var(--swiss-font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--text-primary);
}
[data-theme^="swiss"] .hero__eyebrow {
    display: inline-block;
    color: var(--swiss-red);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0;
    background: transparent;
    border: none;
}

/* Section label — Swiss style 좌측 빨강 rule */
[data-theme^="swiss"] .demo-section__label {
    display: block;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-left: var(--swiss-rule-mega) solid var(--swiss-red);
    padding: 4px 0 4px 16px;
    font-family: var(--swiss-font);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Section — strict grid + 1px line separators */
[data-theme^="swiss"] .section {
    background: var(--bg-base);
    border: none;
    border-top: var(--swiss-rule-thin) solid var(--swiss-gray-20);
    border-radius: 0;
    box-shadow: none;
    padding: 48px 24px;
}
[data-theme^="swiss"] .section:first-of-type { border-top: none; padding-top: 24px; }
[data-theme^="swiss"] .section + .section { margin-top: 0; }

/* Buttons — flat 단색 */
[data-theme^="swiss"] .button {
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    padding: 11px 22px;
    font-family: var(--swiss-font);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.82rem;
    box-shadow: none;
    transition: all 0.12s ease;
    cursor: pointer;
}
[data-theme^="swiss"] .button:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
[data-theme^="swiss"] .button--primary {
    background: var(--swiss-red);
    color: #fff;
    border-color: var(--swiss-red);
}
[data-theme^="swiss"] .button--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
[data-theme^="swiss"] .button--secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border-color: var(--text-primary);
}
[data-theme^="swiss"] .button--ghost {
    background: transparent;
    border-color: var(--swiss-gray-20);
    color: var(--text-secondary);
}
[data-theme^="swiss"] .button--ghost:hover {
    background: var(--swiss-gray-05);
    color: var(--text-primary);
    border-color: var(--text-primary);
}
[data-theme^="swiss"] .button--danger {
    background: var(--bg-base);
    color: var(--swiss-red);
    border-color: var(--swiss-red);
}
[data-theme^="swiss"] .button--danger:hover {
    background: var(--swiss-red);
    color: #fff;
}

/* Cards — flat panels with thin border */
[data-theme^="swiss"] .card {
    background: var(--bg-surface);
    border: var(--swiss-rule-thin) solid var(--swiss-gray-20);
    border-radius: 0;
    box-shadow: none;
    padding: 28px;
}
[data-theme="swiss-dark"] .card { border-color: var(--swiss-gray-20); }
[data-theme^="swiss"] .card--accent {
    background: var(--swiss-red);
    color: #fff;
    border-color: var(--swiss-red);
}
[data-theme^="swiss"] .card--accent .eyebrow,
[data-theme^="swiss"] .card--accent .title,
[data-theme^="swiss"] .card--accent .body { color: #fff; }
[data-theme^="swiss"] .card--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}
[data-theme^="swiss"] .card--inverted .eyebrow,
[data-theme^="swiss"] .card--inverted .title,
[data-theme^="swiss"] .card--inverted .body { color: var(--bg-base); }

/* Form */
[data-theme^="swiss"] .input,
[data-theme^="swiss"] .textarea {
    background: var(--bg-base);
    border: none;
    border-bottom: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--swiss-font);
    padding: 10px 0;
    font-size: 1rem;
}
[data-theme^="swiss"] .input:focus,
[data-theme^="swiss"] .textarea:focus {
    outline: none;
    border-bottom-color: var(--swiss-red);
    border-bottom-width: var(--swiss-rule-thick);
}
[data-theme^="swiss"] .label {
    font-family: var(--swiss-font);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Checkbox / Radio — hard square / circle outline */
[data-theme^="swiss"] .checkbox input[type="checkbox"],
[data-theme^="swiss"] .radio input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--bg-base);
    border: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
}
[data-theme^="swiss"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="swiss"] .checkbox input[type="checkbox"]:checked,
[data-theme^="swiss"] .radio input[type="radio"]:checked {
    background: var(--swiss-red);
    border-color: var(--swiss-red);
}
[data-theme^="swiss"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
}
[data-theme^="swiss"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute; inset: 4px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle — flat rectangle */
[data-theme^="swiss"] .toggle {
    display: inline-block;
    width: 44px;
    height: 22px;
    background: var(--bg-base);
    border: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    position: relative;
    cursor: pointer;
}
[data-theme^="swiss"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-primary);
    border-radius: 0;
    transition: transform 0.15s ease, background 0.15s;
}
[data-theme^="swiss"] .toggle.is-on { border-color: var(--swiss-red); }
[data-theme^="swiss"] .toggle.is-on .toggle__knob { transform: translateX(22px); background: var(--swiss-red); }

/* Progress — flat bar with thin border */
[data-theme^="swiss"] .progress {
    background: var(--bg-base);
    border: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    height: 10px;
    overflow: hidden;
}
[data-theme^="swiss"] .progress__fill {
    background: var(--swiss-red);
    height: 100%;
}

/* Tags */
[data-theme^="swiss"] .tag {
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    font-family: var(--swiss-font);
    font-weight: 700;
    padding: 2px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
[data-theme^="swiss"] .tag--accent { background: var(--swiss-red); color: #fff; border-color: var(--swiss-red); }
[data-theme^="swiss"] .tag--success { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
[data-theme^="swiss"] .tag--warning { background: var(--swiss-red); color: #fff; border-color: var(--swiss-red); }
[data-theme^="swiss"] .tag--danger { background: var(--bg-base); color: var(--swiss-red); border-color: var(--swiss-red); }
[data-theme^="swiss"] .tag--inverted { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }

/* Stat — number-led Swiss style */
[data-theme^="swiss"] .stat {
    background: var(--bg-surface);
    border: none;
    border-top: var(--swiss-rule-mega) solid var(--text-primary);
    border-radius: 0;
    padding: 20px 0 0 0;
}
[data-theme^="swiss"] .stat__label {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
[data-theme^="swiss"] .stat__value {
    font-family: var(--swiss-font-display);
    font-weight: 800;
    font-size: 3.2rem;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-primary);
    margin-top: 8px;
}
[data-theme^="swiss"] .stat__delta {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 600;
}
[data-theme^="swiss"] .stat__delta--down { color: var(--swiss-red); }

/* Link */
[data-theme^="swiss"] .link {
    color: var(--swiss-red);
    text-decoration: none;
    font-weight: 700;
    border-bottom: var(--swiss-rule-thin) solid currentColor;
}
[data-theme^="swiss"] .link:hover {
    background: var(--swiss-red);
    color: #fff;
    border-bottom-color: var(--swiss-red);
    padding: 0 2px;
    margin: 0 -2px;
}

/* Article */
[data-theme^="swiss"] .blockquote {
    border-left: var(--swiss-rule-mega) solid var(--swiss-red);
    padding-left: 20px;
    font-style: normal;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-primary);
}
[data-theme^="swiss"] .dropcap {
    float: left;
    font-family: var(--swiss-font-display);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 0.85;
    margin: 6px 12px 0 0;
    color: var(--swiss-red);
}

/* Toolbar */
[data-theme^="swiss"] .demo-toolbar {
    background: var(--bg-base);
    border: none;
    border-bottom: var(--swiss-rule-thin) solid var(--text-primary);
    border-radius: 0;
    box-shadow: none;
}


/* ════════════════════════════════════════════════════════════
   AURORA / MESH GRADIENT — 다중 radial blob 배경 + grain + glass overlay
   ════════════════════════════════════════════════════════════ */

[data-theme^="aurora"] body,
[data-theme^="aurora"] .demo-page {
    font-family: var(--aurora-font);
    background: var(--aurora-mesh-bg);
    background-attachment: fixed;
    position: relative;
}
/* Grain texture overlay (시그니처) */
[data-theme^="aurora"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--aurora-grain);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
    opacity: 0.4;
}
[data-theme^="aurora"] .demo-page > * { position: relative; z-index: 1; }

/* Hero */
[data-theme^="aurora"] .hero__title {
    font-family: var(--aurora-font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.0;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme^="aurora"] .hero__eyebrow {
    display: inline-block;
    color: var(--color-accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-bg);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Section label */
[data-theme^="aurora"] .demo-section__label {
    display: inline-block;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    padding: 0;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Section — glass overlay over mesh */
[data-theme^="aurora"] .section {
    background: var(--bg-surface);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: var(--aurora-radius);
    box-shadow: var(--shadow-sm);
    padding: 32px;
}
[data-theme="aurora-dark"] .section {
    background: rgba(15,23,42,0.55);
    border-color: rgba(241,245,249,0.10);
}
[data-theme^="aurora"] .section + .section { margin-top: 20px; }

/* Buttons — gradient primary + glass others */
[data-theme^="aurora"] .button {
    background: var(--bg-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--aurora-radius-pill);
    padding: 10px 22px;
    font-family: var(--aurora-font);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all 0.18s ease;
}
[data-theme^="aurora"] .button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
[data-theme^="aurora"] .button--primary {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px var(--accent-glow);
}
[data-theme^="aurora"] .button--primary:hover { box-shadow: 0 6px 24px var(--accent-glow); filter: brightness(1.05); }
[data-theme^="aurora"] .button--secondary { background: var(--bg-elevated); color: var(--text-primary); }
[data-theme^="aurora"] .button--ghost {
    background: transparent;
    backdrop-filter: none;
    border-color: var(--border-subtle);
}
[data-theme^="aurora"] .button--danger {
    background: linear-gradient(135deg, var(--aurora-pink) 0%, var(--color-danger) 100%);
    color: #fff;
    border: none;
}

/* Cards — glass with subtle gradient border */
[data-theme^="aurora"] .card {
    background: var(--bg-surface);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: var(--aurora-radius);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}
[data-theme="aurora-dark"] .card {
    background: rgba(15,23,42,0.55);
    border-color: rgba(241,245,249,0.12);
}
[data-theme^="aurora"] .card--accent {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
}
[data-theme^="aurora"] .card--accent .eyebrow,
[data-theme^="aurora"] .card--accent .title,
[data-theme^="aurora"] .card--accent .body { color: #fff; }
[data-theme^="aurora"] .card--inverted {
    background: linear-gradient(135deg, var(--aurora-teal) 0%, var(--aurora-blue) 100%);
    color: #fff;
    border: none;
}
[data-theme^="aurora"] .card--inverted .eyebrow,
[data-theme^="aurora"] .card--inverted .title,
[data-theme^="aurora"] .card--inverted .body { color: #fff; }

/* Form */
[data-theme^="aurora"] .input,
[data-theme^="aurora"] .textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--aurora-radius-sm);
    color: var(--text-primary);
    font-family: var(--aurora-font);
    padding: 11px 16px;
}
[data-theme="aurora-dark"] .input,
[data-theme="aurora-dark"] .textarea {
    background: rgba(15,23,42,0.65);
    border-color: rgba(241,245,249,0.14);
}
[data-theme^="aurora"] .input:focus,
[data-theme^="aurora"] .textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme^="aurora"] .label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Checkbox / Radio */
[data-theme^="aurora"] .checkbox input[type="checkbox"],
[data-theme^="aurora"] .radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-emphasis);
    border-radius: 6px;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    transition: all 0.15s;
}
[data-theme^="aurora"] .radio input[type="radio"] { border-radius: 50%; }
[data-theme^="aurora"] .checkbox input[type="checkbox"]:checked,
[data-theme^="aurora"] .radio input[type="radio"]:checked {
    background: var(--gradient-accent);
    border-color: transparent;
}
[data-theme^="aurora"] .checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
}
[data-theme^="aurora"] .radio input[type="radio"]:checked::after {
    content: "";
    position: absolute; inset: 5px;
    background: #fff;
    border-radius: 50%;
}

/* Toggle */
[data-theme^="aurora"] .toggle {
    display: inline-block;
    width: 52px;
    height: 30px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
[data-theme^="aurora"] .toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    transition: transform 0.2s ease;
}
[data-theme^="aurora"] .toggle.is-on {
    background: var(--gradient-accent);
    border-color: transparent;
}
[data-theme^="aurora"] .toggle.is-on .toggle__knob { transform: translateX(22px); }

/* Progress */
[data-theme^="aurora"] .progress {
    background: var(--bg-elevated-2);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
[data-theme^="aurora"] .progress__fill {
    background: var(--gradient-accent);
    height: 100%;
    border-radius: 999px;
}

/* Tags */
[data-theme^="aurora"] .tag {
    background: var(--bg-elevated-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-weight: 500;
    padding: 3px 12px;
    font-size: 0.78rem;
}
[data-theme^="aurora"] .tag--accent {
    background: var(--accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="aurora"] .tag--success { background: var(--success-bg); color: var(--color-success-strong); }
[data-theme^="aurora"] .tag--warning { background: var(--warning-bg); color: var(--color-warning); }
[data-theme^="aurora"] .tag--danger { background: var(--danger-bg); color: var(--color-danger); }
[data-theme^="aurora"] .tag--inverted {
    background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary);
}

/* Stat */
[data-theme^="aurora"] .stat {
    background: var(--bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--aurora-radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}
[data-theme="aurora-dark"] .stat {
    background: rgba(15,23,42,0.55);
    border-color: rgba(241,245,249,0.12);
}
[data-theme^="aurora"] .stat__value {
    font-family: var(--aurora-font-display);
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Link */
[data-theme^="aurora"] .link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.15s;
}
[data-theme^="aurora"] .link:hover { opacity: 0.75; text-decoration: underline; }

/* Toolbar — glass with mesh peek */
[data-theme^="aurora"] .demo-toolbar {
    background: var(--bg-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: var(--aurora-radius);
    box-shadow: var(--shadow-sm);
}
[data-theme="aurora-dark"] .demo-toolbar {
    background: rgba(15,23,42,0.65);
    border-color: rgba(241,245,249,0.12);
}


/* ════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE — 모든 테마 .section 좌우 여백 (v1.15.4)
   파일 맨 끝에 위치 → cascade 우선순위 최상위 보장
   ════════════════════════════════════════════════════════════ */

/* ── 1. 일반 테마: section 내부 padding으로 여백 확보 ── */
@media (max-width: 720px) {
    .section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}
@media (max-width: 480px) {
    .section {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* ── 2. Candy Plastic: 윈도우 카드 → 모든 너비에서 margin 확보
        padding 강제 대신 margin으로 스크린 가장자리 여백 확보 ── */
[data-theme^="candy-plastic"] .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
}
[data-theme^="candy-plastic"] .section > * {
    padding-left: 18px !important;
    padding-right: 18px !important;
}
@media (max-width: 720px) {
    [data-theme^="candy-plastic"] .section {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
@media (max-width: 480px) {
    [data-theme^="candy-plastic"] .section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

/* ── 3. 카드형 section: 모든 너비에서 margin 확보
        purple-haze (glass card w/ border-radius)
        neumorphism (raised card w/ border-radius + shadow)
        neo-brutalism (offset shadow + thick border)
        claymorphism (clay shadow + big radius)
        bento (Apple-style cell + soft shadow)
        frutiger-aero (frosted glass panel) ── */
[data-theme^="purple-haze"] .section,
[data-theme^="neumorphism"] .section,
[data-theme^="neo-brutalism"] .section,
[data-theme^="claymorphism"] .section,
[data-theme^="bento"] .section,
[data-theme^="frutiger-aero"] .section,
[data-theme^="cyberpunk"] .section,
[data-theme^="aurora"] .section {
    margin-left: 24px !important;
    margin-right: 24px !important;
}
@media (max-width: 720px) {
    [data-theme^="purple-haze"] .section,
    [data-theme^="neumorphism"] .section,
    [data-theme^="neo-brutalism"] .section,
    [data-theme^="claymorphism"] .section,
    [data-theme^="bento"] .section,
    [data-theme^="frutiger-aero"] .section,
    [data-theme^="cyberpunk"] .section,
    [data-theme^="aurora"] .section {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}
@media (max-width: 480px) {
    [data-theme^="purple-haze"] .section,
    [data-theme^="neumorphism"] .section,
    [data-theme^="neo-brutalism"] .section,
    [data-theme^="claymorphism"] .section,
    [data-theme^="bento"] .section,
    [data-theme^="frutiger-aero"] .section,
    [data-theme^="cyberpunk"] .section,
    [data-theme^="aurora"] .section {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* ── 4. demo-toolbar 좌우 패딩 ── */
@media (max-width: 600px) {
    .demo-toolbar {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 6px !important;
    }
    .demo-toolbar__brand {
        font-size: 11px !important;
    }
}