/**
 * Ryan Design Language — Component Patterns v1.0
 *
 * ryan-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);
}

/* ── Liquid Glass 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 — Founding Member 회원번호 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="material-3"] / [data-theme="material-3-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;
}


/* ═══════════════════════════════════════════════════════════
   ✨ iMac G3 utility — 1998~2003 캔디 시대 + Aqua glossy
   (2026-05-20 v1.6 — Mac Classic 폐기 후 교체)
   ─────────────────────────────────────────────────────────────
   - 활성: [data-theme="imac-g3"] / [data-theme="imac-g3-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 — iMac G3 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;
}

.demo-section {
    padding: var(--compose-section-pad);
    display: flex;
    flex-direction: column;
    gap: var(--compose-stack-rhythm);
    border-bottom: var(--compose-section-divider);
}
.demo-section:last-child { border-bottom: 0; }
.demo-section + .demo-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 ── */
.demo-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;
}

.demo-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;
}

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

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

/* ── TYPOGRAPHY SCALE ── */
.demo-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;
}
.demo-display--xl { font-size: var(--compose-hero-size); }

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

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

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

.demo-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;
}
.demo-eyebrow--accent { color: var(--color-accent); }

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

/* ── BUTTONS ── */
.demo-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;
}
.demo-button:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
.demo-button--primary {
    background: var(--color-accent);
    color: var(--on-accent, white);          /* accent bg 위 텍스트 (v1.10.1 가독성 fix) */
    border-color: var(--color-accent);
}
.demo-button--primary:hover {
    background: var(--accent-hover, var(--color-accent));
    color: var(--on-accent, white);
    filter: brightness(1.05);
}
.demo-button--secondary {
    background: transparent;
    color: var(--text-primary);
}
.demo-button--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.demo-button--ghost:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.demo-button--danger {
    background: var(--color-danger);
    color: var(--bg-base);
    border-color: var(--color-danger);
}
.demo-button--danger:hover {
    background: var(--color-danger-strong, var(--color-danger));
    color: var(--bg-base);
}

/* ── INPUTS ── */
.demo-input,
.demo-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;
}
.demo-textarea {
    min-height: 92px;
    resize: vertical;
}
.demo-input:focus,
.demo-textarea:focus {
    border-color: var(--border-focus, var(--color-accent));
}
.demo-input::placeholder,
.demo-textarea::placeholder {
    color: var(--text-tertiary);
}

.demo-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;
}

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

/* ── TAGS / CHIPS ── */
.demo-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;
}
.demo-tag--accent {
    background: var(--accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.demo-tag--success {
    background: var(--success-bg);
    color: var(--color-success-strong, var(--color-success));
    border-color: var(--color-success);
}
.demo-tag--warning {
    background: var(--warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.demo-tag--danger {
    background: var(--danger-bg);
    color: var(--color-danger-strong, var(--color-danger));
    border-color: var(--color-danger);
}
.demo-tag--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* ── CARDS ── */
.demo-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);
}
.demo-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"] .demo-card--accent,
[data-theme^="brutalist"] .demo-card--accent .demo-eyebrow,
[data-theme^="brutalist"] .demo-card--accent .demo-title,
[data-theme^="brutalist"] .demo-card--accent .demo-body,
[data-theme^="brutalist"] .demo-card--accent .demo-mono,
[data-theme^="brutalist"] .demo-card--accent .demo-link {
    color: var(--on-accent);
}
.demo-card--inverted {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-base);
}
.demo-card--inverted .demo-eyebrow,
.demo-card--inverted .demo-title,
.demo-card--inverted .demo-body,
.demo-card--inverted .demo-mono,
.demo-card--inverted .demo-link {
    color: var(--bg-base);
}
.demo-card__title {
    /* alias for clarity */
}

/* ── STATS ── */
.demo-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);
}
.demo-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;
}
.demo-stat__value {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.0;
    color: var(--text-primary);
    margin: 0;
}
.demo-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;
}
.demo-stat__delta--down { color: var(--color-danger-strong, var(--color-danger)); }

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

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

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

.demo-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;
}

.demo-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 ── */
.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.demo-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) ── */
.demo-section--signature {
    /* 테마별 signature section — 기본은 일반 section 과 동일 */
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .demo-grid--asymmetric,
    .demo-grid--features {
        grid-template-columns: 1fr;
    }
    .demo-grid--asymmetric > * + *,
    .demo-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/iMac G3) 가 동일 골격
   - 사용자 입장에선 "같은 골격, 다른 색/굵기" — composition personality 소실

   원칙:
   - 공통 markup (.demo-section, .demo-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"] .demo-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"] .demo-hero__title {
    /* Editorial = 가벼운 weight + tight tracking */
    font-weight: 500;
    letter-spacing: -0.04em;
}
[data-theme^="editorial"] .demo-grid--features {
    /* 1단 — 콘텐츠 중심 */
    grid-template-columns: 1fr;
}
[data-theme^="editorial"] .demo-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^="imac-g3"] .demo-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^="imac-g3"] .demo-section > * {
    padding-left: 22px;
    padding-right: 22px;
}
[data-theme^="imac-g3"] .demo-section > *:first-child {
    padding-top: 20px;
}
[data-theme^="imac-g3"] .demo-section > *:last-child {
    padding-bottom: 22px;
}
[data-theme^="imac-g3"] .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^="imac-g3"] .demo-section__label::before {
    content: "● ● ●";
    color: #FF6058;
    font-size: 12px;
    letter-spacing: 0.3em;
    flex-shrink: 0;
}
[data-theme^="imac-g3"] .demo-section__label::after {
    content: "";
    width: 60px;       /* balance — title 가운데로 */
    flex-shrink: 0;
}
[data-theme^="imac-g3"] .demo-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^="material-3"] .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^="material-3"] .demo-grid--features > *:nth-child(3n+1) { box-shadow: var(--m3-elev-1); }
[data-theme^="material-3"] .demo-grid--features > *:nth-child(3n+2) { box-shadow: var(--m3-elev-3); }
[data-theme^="material-3"] .demo-grid--features > *:nth-child(3n+0) { box-shadow: var(--m3-elev-5); }
[data-theme^="material-3"] .demo-card {
    transition: box-shadow 200ms ease;
}
[data-theme^="material-3"] .demo-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"] .demo-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"] .demo-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;
}
[data-theme^="purple-haze"] .demo-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"] .demo-section:first-of-type {
    position: relative;
    overflow: hidden;
}
[data-theme^="memphis"] .demo-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"] .demo-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"] .demo-section:first-of-type > * {
    position: relative;
    z-index: 1;
}
/* Memphis Hero — italic display (v1.5 시그니처 복원, v1.12.1) */
[data-theme^="memphis"] .demo-section:first-of-type .demo-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"] .demo-section {
    border: 1px solid var(--border-emphasis);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-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"] .demo-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"] .demo-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"] .demo-grid--features > * {
    /* 내부 카드 — 약하게 raised */
    box-shadow: var(--neu-shadow-out-sm);
}


/* ─────────────────────────────────────────────────────
   BRUTALIST — 현재도 강함 (joined grid + hard rule). 추가 보강만.
   - section__label 이 yellow mark variant 도 가능하게
   ───────────────────────────────────────────────────── */
[data-theme^="brutalist"] .demo-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"] .demo-hero__eyebrow,
[data-theme^="brutalist"] .demo-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"] .demo-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"] .demo-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"] .demo-tag--accent {
    background: var(--color-accent);    /* yellow */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .demo-tag--success {
    background: var(--color-success);   /* #00C853 green OPAQUE */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .demo-tag--warning {
    background: var(--color-warning);   /* #FFFF00 yellow */
    color: #000000;
    border-color: #000000;
}
[data-theme^="brutalist"] .demo-tag--danger {
    background: var(--color-danger);    /* #FF3D00 vermillion */
    color: #FFFFFF;                      /* vermillion + 흰 (검정은 대비 부족) */
    border-color: #000000;
}
/* Default / Inverted 도 명시 — dark 에서 fg/bg 충돌 방지 */
[data-theme^="brutalist"] .demo-tag {
    /* default = bg-base + text-primary (이미 utility 가 처리 — light 흰+검정 / dark 검정+흰) */
    border-color: var(--text-primary);
}
[data-theme^="brutalist"] .demo-tag--inverted {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

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


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

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

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

/* responsive — section 안 padding 모바일에서 조정 */
@media (max-width: 720px) {
    [data-theme^="imac-g3"] .demo-section > * { padding-left: 14px; padding-right: 14px; }
    [data-theme^="memphis"] .demo-section:first-of-type::before,
    [data-theme^="memphis"] .demo-section:first-of-type::after {
        display: none;  /* 모바일에선 도형 제거 (콘텐츠 가림 방지) */
    }
}


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


/* ─── EDITORIAL 추가 시그니처 ─── */
/* drop cap 을 더 크게 + accent underline 도 라인-only 톤으로 */
[data-theme^="editorial"] .demo-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"] .demo-section:first-of-type {
    position: relative;
}
[data-theme^="editorial"] .demo-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"] .demo-link {
    border-bottom-width: 1px;
    padding-bottom: 2px;
}


/* ─── MATERIAL 3 추가 시그니처 — Tonal palette swatch row ─── */
/* hero 아래에 tonal scale ribbon 표시 (5 tones from primary) */
[data-theme^="material-3"] .demo-section:first-of-type {
    position: relative;
    padding-bottom: 48px;  /* swatch ribbon 공간 */
}
[data-theme^="material-3"] .demo-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%
    );
}


/* ─── iMac G3 추가 시그니처 — section 사이 Dock-like row ─── */
/* hero 아래에 candy color dot dock — iMac G3 cluster 시그니처 */
[data-theme^="imac-g3"] .demo-section:first-of-type {
    position: relative;
}
[data-theme^="imac-g3"] .demo-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"] .demo-section:nth-of-type(3),
[data-theme^="memphis"] .demo-section:nth-of-type(5),
[data-theme^="memphis"] .demo-section:nth-of-type(7) {
    position: relative;
    overflow: hidden;
}
[data-theme^="memphis"] .demo-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"] .demo-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"] .demo-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"] .demo-section:nth-of-type(3) > *,
[data-theme^="memphis"] .demo-section:nth-of-type(5) > *,
[data-theme^="memphis"] .demo-section:nth-of-type(7) > * {
    position: relative;
    z-index: 1;
}


/* ─── TERMINAL 추가 시그니처 — Hero ASCII banner stripe ─── */
/* hero section 위쪽에 ASCII art 스타일 stripe */
[data-theme^="terminal"] .demo-section:first-of-type .demo-hero__title {
    border-left: 4px solid var(--color-accent);
    padding-left: 16px;
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-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"] .demo-section:first-of-type {
    position: relative;
    padding-bottom: 32px;
}


/* ─── NEUMORPHISM 추가 시그니처 — depth inversion visual ─── */
/* card--accent 내부 textfield 같은 element 를 pressed (안쪽) 으로 표현 */
[data-theme^="neumorphism"] .demo-input,
[data-theme^="neumorphism"] .demo-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"] .demo-input:focus,
[data-theme^="neumorphism"] .demo-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"] .demo-section:nth-of-type(3n+1) {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-theme^="purple-haze"] .demo-section:nth-of-type(3n+2) {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme^="purple-haze"] .demo-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"] .demo-section:nth-of-type(3n+1) { box-shadow: var(--shadow-sm); }
[data-theme^="purple-haze"] .demo-section:nth-of-type(3n+2) { box-shadow: var(--shadow-md); }
[data-theme^="purple-haze"] .demo-section:nth-of-type(3n+0) { box-shadow: var(--shadow-lg); }


/* ─── BRUTALIST 추가 시그니처 — section 우측 거대 숫자 메타 ─── */
/* 일부 section 우측에 거대 번호 표시 (잡지 spread 톤) */
[data-theme^="brutalist"] .demo-section {
    position: relative;
}
[data-theme^="brutalist"] .demo-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 테마 모두)
   ────────────────────────────────────────────────────────────
   사용자: "Liquid Glass / 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;
}
[data-theme^="purple-haze"] .demo-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(124,58,237,0.35) 0%, transparent 40%),
        radial-gradient(circle at 85% 25%, rgba(236,72,153,0.30) 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(56,189,248,0.25) 0%, transparent 45%),
        radial-gradient(circle at 80% 85%, rgba(168,85,247,0.32) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(244,114,182,0.18) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="purple-haze-dark"] .demo-page::before {
    /* 다크 — 더 진한 mesh */
    background:
        radial-gradient(circle at 15% 15%, rgba(139,92,246,0.50) 0%, transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(236,72,153,0.40) 0%, transparent 50%),
        radial-gradient(circle at 25% 75%, rgba(56,189,248,0.32) 0%, transparent 50%),
        radial-gradient(circle at 80% 85%, rgba(168,85,247,0.45) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(244,114,182,0.25) 0%, transparent 60%);
}
[data-theme^="purple-haze"] .demo-page > * {
    position: relative;
    z-index: 1;
}

/* hero title — gradient 더 강화 + 더 큰 size */
[data-theme^="purple-haze"] .demo-section:first-of-type .demo-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"] .demo-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);
}
/* ─── Liquid Glass 본질 메커니즘 (v1.13.3) ───
   Apple visionOS / macOS Tahoe / iOS 26+ 의 Liquid Glass:
   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"] .demo-card,
[data-theme^="purple-haze"] .demo-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"] .demo-card,
[data-theme="purple-haze-dark"] .demo-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"] .demo-card::before,
[data-theme^="purple-haze"] .demo-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"] .demo-card::before,
[data-theme="purple-haze-dark"] .demo-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"] .demo-card > *,
[data-theme^="purple-haze"] .demo-stat > * {
    position: relative;
    z-index: 1;
}

/* (2) Gradient hairline border — 상단 밝음 / 하단 어두움 (진짜 glass edge) */
[data-theme^="purple-haze"] .demo-card,
[data-theme^="purple-haze"] .demo-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"] .demo-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"] .demo-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"] .demo-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"] .demo-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"] .demo-card--inverted .demo-eyebrow,
[data-theme^="purple-haze"] .demo-card--inverted .demo-title,
[data-theme^="purple-haze"] .demo-card--inverted .demo-body,
[data-theme^="purple-haze"] .demo-card--inverted .demo-mono {
    color: rgba(255,255,255,0.96);
}
[data-theme^="purple-haze"] .demo-card--inverted .demo-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"] .demo-grid--features {
    align-items: stretch;
}
[data-theme^="purple-haze"] .demo-grid--features > * {
    transform: none;   /* stagger 제거 — 정렬 회복 */
}
[data-theme^="purple-haze"] .demo-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"] .demo-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"] .demo-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"] .demo-section--signature .demo-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"] .demo-section--signature .demo-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"] .demo-section--signature .demo-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"] .demo-section--signature .demo-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"] .demo-section--signature .demo-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"] .demo-section:first-of-type .demo-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"] .demo-section {
    position: relative;
    padding-left: 88px;
}
[data-theme^="editorial"] .demo-section .demo-section__label {
    /* 기존 label 위치 보강 — top-left aligned */
    align-self: flex-start;
}
[data-theme^="editorial"] .demo-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"] .demo-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"] .demo-stat {
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 16px 0;
    background: transparent;
}
[data-theme^="editorial"] .demo-stat:last-child {
    border-bottom: 0;
}
[data-theme^="editorial"] .demo-grid--features {
    /* stats 가 단순 row 로 — 잡지 데이터 박스 톤 */
    gap: 0;
}

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

/* mobile responsive — section 좌측 padding 축소 */
@media (max-width: 720px) {
    [data-theme^="editorial"] .demo-section { padding-left: var(--space-6, 24px); }
    [data-theme^="editorial"] .demo-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"] .demo-section {
    position: relative;
    counter-increment: brutalist-section;
}
[data-theme^="brutalist"] .demo-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"] .demo-section > * {
    position: relative;
    z-index: 1;
}
/* hero 만 outline 번호 더 크게 + 우측 끝 */
[data-theme^="brutalist"] .demo-section:first-of-type::after {
    font-size: 10rem;
    opacity: 0.85;
    top: 32px;
    right: 32px;
}


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

/* FAB — 모든 페이지 우하단 floating */
[data-theme^="material-3"] .demo-page {
    position: relative;
}
[data-theme^="material-3"] .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^="material-3"] .demo-grid--features > *:nth-child(3n+1):hover {
    box-shadow: var(--m3-elev-2);
}
[data-theme^="material-3"] .demo-grid--features > *:nth-child(3n+2):hover {
    box-shadow: var(--m3-elev-4);
}


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

[data-theme^="imac-g3"] .demo-page {
    position: relative;
    padding-top: 32px;
}
[data-theme^="imac-g3"] .demo-page::before {
    content: " File   Edit   View   Window   Help";
    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^="imac-g3"] .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"] .demo-section:nth-of-type(4n+2),
[data-theme^="memphis"] .demo-section:nth-of-type(4n+4) {
    position: relative;
    background: var(--bg-base);   /* 본 bg 는 그대로 */
}
[data-theme^="memphis"] .demo-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"] .demo-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"] .demo-section:nth-of-type(4n+2) > *,
[data-theme^="memphis"] .demo-section:nth-of-type(4n+4) > * {
    position: relative;
    z-index: 1;
}
/* hero 의 도형을 더 크게 + overlap (텍스트 안쪽까지 침범) */
[data-theme^="memphis"] .demo-section:first-of-type::before {
    width: 96px;
    height: 96px;
    top: 8px;
    right: 12px;
}
[data-theme^="memphis"] .demo-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"] .demo-section:first-of-type .demo-hero__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    border-left-width: 6px;
}
[data-theme^="terminal"] .demo-section:first-of-type .demo-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"] .demo-card,
[data-theme^="neumorphism"] .demo-stat {
    box-shadow: var(--neu-shadow-out);
}
/* 두 번째 card 만 inverted depth (pressed) */
[data-theme^="neumorphism"] .demo-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"] .demo-section:first-of-type .demo-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 제거 ─── */
.demo-checkbox input[type="checkbox"],
.demo-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 150ms ease;
}
.demo-checkbox input[type="checkbox"]::after,
.demo-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"] .demo-checkbox input[type="checkbox"],
[data-theme^="brutalist"] .demo-radio input[type="radio"] {
    width: 22px;
    height: 22px;
    background: var(--bg-base);
    border: 3px solid var(--text-primary);
}
[data-theme^="brutalist"] .demo-checkbox input[type="checkbox"] {
    border-radius: 0;
}
[data-theme^="brutalist"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
}
[data-theme^="brutalist"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: #000000;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}
[data-theme^="brutalist"] .demo-radio input[type="radio"] {
    border-radius: 50%;
}
[data-theme^="brutalist"] .demo-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"] .demo-checkbox input[type="checkbox"],
[data-theme^="editorial"] .demo-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid var(--border-emphasis);
}
[data-theme^="editorial"] .demo-checkbox input[type="checkbox"] {
    border-radius: 0;
}
[data-theme^="editorial"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="editorial"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
[data-theme^="editorial"] .demo-radio input[type="radio"] {
    border-radius: 50%;
}
[data-theme^="editorial"] .demo-radio input[type="radio"]:checked {
    border-color: var(--color-accent);
}
[data-theme^="editorial"] .demo-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^="material-3"] .demo-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid var(--text-secondary);
    border-radius: 2px;
}
[data-theme^="material-3"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="material-3"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
[data-theme^="material-3"] .demo-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
}
[data-theme^="material-3"] .demo-radio input[type="radio"]:checked {
    border-color: var(--color-accent);
}
[data-theme^="material-3"] .demo-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^="imac-g3"] .demo-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^="imac-g3"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--gradient-accent, var(--color-accent));
    border-color: rgba(0,0,0,0.25);
}
[data-theme^="imac-g3"] .demo-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^="imac-g3"] .demo-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^="imac-g3"] .demo-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"] .demo-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"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--memphis-yellow);
}
[data-theme^="memphis"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--memphis-navy);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}
[data-theme^="memphis"] .demo-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"] .demo-radio input[type="radio"]:checked {
    background: var(--memphis-pink);
}
[data-theme^="memphis"] .demo-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"] .demo-checkbox input[type="checkbox"],
[data-theme^="terminal"] .demo-radio input[type="radio"] {
    width: 26px;
    height: 18px;
    background: transparent;
    border: 0;
}
[data-theme^="terminal"] .demo-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"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "[x]";
}
[data-theme^="terminal"] .demo-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"] .demo-radio input[type="radio"]:checked::after {
    content: "(•)";
}


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

[data-theme^="neumorphism"] .demo-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"] .demo-checkbox input[type="checkbox"]:checked {
    background: var(--bg-base);
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 3px;
}
[data-theme^="neumorphism"] .demo-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"] .demo-radio input[type="radio"]:checked {
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .demo-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"] .demo-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"] .demo-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"] .demo-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
[data-theme^="purple-haze"] .demo-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"] .demo-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"] .demo-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
   ════════════════════════════════════════════════════════════ */

/* ─── 공통 .demo-toggle ─── */
.demo-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;
}
.demo-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;
}
.demo-toggle.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.demo-toggle.is-on .demo-toggle__knob {
    transform: translateX(20px);
    background: var(--on-accent);
}

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


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


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


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


/* ═══════ iMAC G3 toggle / progress (Aqua) ═══════ */
[data-theme^="imac-g3"] .demo-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^="imac-g3"] .demo-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^="imac-g3"] .demo-toggle.is-on {
    background: var(--gradient-accent, var(--color-accent));
    border-color: rgba(0,0,0,0.25);
}
[data-theme^="imac-g3"] .demo-toggle.is-on .demo-toggle__knob {
    transform: translateX(20px);
}
[data-theme^="imac-g3"] .demo-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^="imac-g3"] .demo-progress__fill {
    background: var(--gradient-accent, var(--color-accent));
    border-radius: 7px;
}


/* ═══════ MEMPHIS toggle / progress ═══════ */
[data-theme^="memphis"] .demo-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"] .demo-toggle__knob {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--memphis-navy);
    box-shadow: none;
    top: 2px;
    left: 2px;
}
[data-theme^="memphis"] .demo-toggle.is-on {
    background: var(--memphis-pink);
    border-color: var(--memphis-navy);
}
[data-theme^="memphis"] .demo-toggle.is-on .demo-toggle__knob {
    transform: translateX(28px);
    background: var(--memphis-yellow);
}
[data-theme^="memphis"] .demo-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"] .demo-progress__fill {
    background: var(--memphis-pink);
    border-radius: 0;
}


/* ═══════ TERMINAL toggle / progress ═══════ */
[data-theme^="terminal"] .demo-toggle {
    background: transparent;
    border: 0;
    width: 60px;
    height: 18px;
    cursor: pointer;
    position: relative;
}
[data-theme^="terminal"] .demo-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"] .demo-toggle.is-on::before {
    content: "[ ON  ]";
    color: var(--color-accent);
}
[data-theme^="terminal"] .demo-toggle__knob {
    display: none;
}
[data-theme^="terminal"] .demo-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"] .demo-progress__fill {
    height: 100%;
    background: var(--color-accent);
    opacity: 0.18;
    border-radius: 0;
}


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


/* ═══════ LIQUID GLASS toggle / progress ═══════ */
[data-theme^="purple-haze"] .demo-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"] .demo-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"] .demo-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"] .demo-toggle.is-on .demo-toggle__knob {
    transform: translateX(20px);
    background: var(--on-accent);
}
[data-theme^="purple-haze"] .demo-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"] .demo-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"] .demo-button--secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--brutalist-border-thick) solid var(--text-primary);
}
[data-theme^="brutalist"] .demo-button--secondary:hover {
    background: var(--color-accent);
    color: #000;
}
[data-theme^="brutalist"] .demo-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"] .demo-button--ghost:hover {
    background: var(--color-accent);
    color: #000;
    text-decoration: none;
}

/* ─── EDITORIAL button states ─── */
[data-theme^="editorial"] .demo-button--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-emphasis);
}
[data-theme^="editorial"] .demo-button--secondary:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}
[data-theme^="editorial"] .demo-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"] .demo-button--ghost:hover {
    text-decoration-thickness: 2px;
}

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

/* ─── iMAC G3 button states (Aqua secondary) ─── */
[data-theme^="imac-g3"] .demo-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^="imac-g3"] .demo-button--secondary:hover {
    filter: brightness(0.97);
}
[data-theme^="imac-g3"] .demo-button--ghost {
    background: transparent;
    color: var(--color-accent);
    border-color: transparent;
    box-shadow: none;
}
[data-theme^="imac-g3"] .demo-button--ghost:hover {
    background: var(--accent-bg);
    color: var(--color-accent);
}

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

/* ─── TERMINAL button states ─── */
[data-theme^="terminal"] .demo-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"] .demo-button:hover {
    background: var(--color-accent);
    color: var(--bg-base);
    text-shadow: none;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-button--primary {
    background: var(--color-accent);
    color: var(--bg-base);
    text-shadow: none;
    box-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-button--ghost {
    border-color: transparent;
    color: var(--color-accent);
}
[data-theme^="terminal"] .demo-button--ghost:hover {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme^="terminal"] .demo-button--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
[data-theme^="terminal"] .demo-button--danger:hover {
    background: var(--color-danger);
    color: var(--bg-base);
}

/* ─── NEUMORPHISM button states ─── */
[data-theme^="neumorphism"] .demo-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"] .demo-button:hover {
    background: var(--bg-base);
    color: var(--text-primary);
    box-shadow: var(--neu-shadow-out-sm);
}
[data-theme^="neumorphism"] .demo-button:active {
    box-shadow: var(--neu-shadow-in);
}
[data-theme^="neumorphism"] .demo-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"] .demo-button--primary:hover {
    background: var(--accent-hover, var(--color-accent));
    color: var(--on-accent);
}
[data-theme^="neumorphism"] .demo-button--secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    box-shadow: var(--neu-shadow-flat);
}
[data-theme^="neumorphism"] .demo-button--ghost {
    background: var(--bg-base);
    color: var(--text-secondary);
    box-shadow: none;
}
[data-theme^="neumorphism"] .demo-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"] .demo-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"] .demo-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"] .demo-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"] .demo-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"] .demo-button--secondary {
    background: var(--glass-bg-hi);
    color: var(--text-primary);
}
[data-theme^="purple-haze"] .demo-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"] .demo-button--ghost:hover {
    background: var(--accent-bg);
    color: var(--color-accent);
}


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

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

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

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

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

/* ─── TERMINAL link — glow underline ─── */
[data-theme^="terminal"] .demo-link {
    color: var(--color-accent);
    border-bottom: 1px dashed var(--color-accent);
    text-shadow: var(--shadow-glow);
}
[data-theme^="terminal"] .demo-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"] .demo-link {
    border-bottom: 0;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    color: var(--color-accent);
    transition: box-shadow 150ms;
}
[data-theme^="neumorphism"] .demo-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"] .demo-link {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
}
[data-theme^="purple-haze"] .demo-link:hover {
    text-shadow: 0 0 12px var(--accent-glow);
    border-bottom-color: var(--color-accent);
    opacity: 1;
}