:root {
      /* 네이티브 컨트롤(select·input·details·스크롤바)을 다크로 렌더 — 라이트 OS에서 흰 배경+밝은 글자(안 보임) 방지 */
      color-scheme: dark;
      /* ===== v3 Surface — 더 깊고 자주빛 다크 ===== */
      --bg: #06050F;
      --bg-1: #09091A;
      --bg-elev: #0D0D20;
      --bg-card: rgba(255,255,255,0.030);
      --bg-card-hover: rgba(255,255,255,0.052);
      --bg-card-active: rgba(255,255,255,0.075);
      --border: rgba(255,255,255,0.062);
      --border-strong: rgba(255,255,255,0.12);
      --border-glow: rgba(167,139,250,0.38);

      /* ===== v3 Text ===== */
      --text: #F0EFF8;
      --text-dim: #B4B2C8;
      --text-faint: #76748C;
      --text-whisper: #46455A;

      /* ===== v3 Accent — 더 풍부한 보라 스케일 ===== */
      --accent: #A78BFA;
      --accent-hover: #8B6BF5;
      --accent-2: #818CF8;
      --accent-3: #C4B5FD;
      --accent-soft: rgba(167,139,250,0.13);
      --accent-glow: rgba(167,139,250,0.26);
      --brand-glow-soft: rgba(124, 58, 237, 0.18);

      /* ===== Status ===== */
      --danger: #F87171;
      --success: #34D399;
      --warn: #FBBF24;
      --info: #22D3EE;

      /* ===== v2 Spacing (8px grid) ===== */
      --s-0: 0px;
      --s-1: 4px;
      --s-2: 8px;
      --s-3: 12px;
      --s-4: 16px;
      --s-5: 24px;
      --s-6: 32px;
      --s-7: 48px;
      --s-8: 64px;
      --s-9: 96px;
      --s-10: 128px;

      /* ===== v2 Type scale (1.25 modular) ===== */
      --fs-xs: 11px;
      --fs-sm: 13px;
      --fs-base: 15px;
      --fs-md: 17px;
      --fs-lg: 20px;
      --fs-xl: 26px;
      --fs-2xl: 34px;
      --fs-3xl: 46px;
      --fs-4xl: 60px;
      --lh-tight: 1.15;
      --lh-snug: 1.3;
      --lh-normal: 1.5;
      --lh-relaxed: 1.65;

      /* ===== Radius (preserved) ===== */
      --radius: 12px;
      --radius-sm: 9px;
      --radius-lg: 16px;
      --r-xs: 6px;
      --r-sm: 9px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 22px;
      --r-2xl: 28px;
      --r-pill: 999px;

      /* ===== Fonts ===== */
      --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --font-display: 'Fraunces', 'Pretendard Variable', Georgia, serif;
      --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

      /* ===== v2 Shadow (refined) ===== */
      --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.22);
      --shadow-md: 0 4px 14px rgba(0,0,0,0.35), 0 14px 36px rgba(0,0,0,0.25);
      --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 36px 64px rgba(0,0,0,0.32);
      --shadow-accent: 0 8px 24px -6px rgba(167,139,250,0.40), 0 2px 8px rgba(167,139,250,0.14);
      --shadow-focus: 0 0 0 3px rgba(167,139,250,0.28);

      /* ===== Motion ===== */
      --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --t-fast: 120ms;
      --t-base: 180ms;
      --t-slow: 320ms;

      /* ===== Layout ===== */
      --sidebar-w: 172px;
      --topbar-h: 56px;
      --bottom-nav-h: 60px;
      --main-pad: clamp(20px, 3vw, 56px);
      --container-w: 1280px;
      --container-narrow: 980px;
      --container-wide: 1480px;
    }
    ::selection {
      background: rgba(167,139,250,0.38);
      color: #fff;
    }
    * { box-sizing: border-box; }
    *:focus { outline: none; }
    *:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: rgba(167,139,250,0.12);
      border-radius: 6px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(167,139,250,0.28);
      background-clip: padding-box;
    }
    html, body {
      margin: 0; padding: 0;
      background: var(--bg); color: var(--text);
      font-family: var(--font-sans);
      font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      letter-spacing: -0.011em;
    }
    body {
      min-height: 100vh;
      background-image:
        radial-gradient(ellipse 90% 55% at 10% -8%, rgba(147,120,250,0.10), transparent 55%),
        radial-gradient(ellipse 60% 35% at 90% 5%, rgba(129,140,248,0.07), transparent 45%),
        radial-gradient(ellipse 40% 25% at 50% 90%, rgba(167,139,250,0.04), transparent 50%);
      background-attachment: fixed;
      animation: pageFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes pageFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* v2: 별 패턴 제거 — 시각 노이즈 감축 */
    body::before {
      content: none;
    }
    body > * { position: relative; z-index: 1; }
    button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: var(--accent-hover); }
    .hidden { display: none !important; }
    .icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* ============ TOPBAR ============ */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; height: 56px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px;
      background: linear-gradient(180deg, rgba(10,10,14,0.88) 0%, rgba(10,10,14,0.72) 100%);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--border);
      z-index: 100;
    }
    .topbar::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--border-glow) 40%, var(--accent-3, #c4b5fd) 50%, var(--border-glow) 60%, transparent 100%);
      opacity: 0.45;
    }
    /* ── Brand / Logo — S 그라디언트 심볼 ──────────────────────── */
    :root {
      --brand-blue: #1D4DFF;
      --brand-cyan: #22D3EE;
      --brand-violet: #7C3AED;
      --brand-magenta: #EC4899;
      --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-violet), var(--brand-magenta));
      --brand-glow-soft: rgba(124, 58, 237, 0.18);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      user-select: none;
      cursor: pointer;
      background: transparent;
      border: 0;
      padding: 0;
      color: inherit;
      font: inherit;
      text-align: left;
      transition: opacity 120ms ease, transform 120ms ease;
    }
    .brand:hover { opacity: 0.88; }
    .brand:active { transform: translateY(1px); opacity: 0.75; }
    .brand:focus-visible { outline: 2px solid var(--accent, #A78BFA); outline-offset: 4px; border-radius: 10px; }
    .brand-mark {
      width: 34px; height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 0 0 1px rgba(167,139,250,0.08),
        0 8px 24px rgba(34,211,238,0.10),
        0 10px 28px rgba(124,58,237,0.14);
      transition:
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .brand-mark::before,
    .brand-mark::after {
      content: none !important;
      display: none !important;
    }
    .brand-mark img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
    }
    .brand-mark.brand-logo {
      width: 116px;
      height: 31px;
      flex: 0 0 116px;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .brand-mark.brand-logo + .brand-text {
      display: none;
    }
    .brand:hover .brand-mark,
    .brand:focus-visible .brand-mark {
      transform: translateY(-1px) scale(1.035);
      border-color: rgba(167,139,250,0.28);
      box-shadow:
        0 0 0 1px rgba(167,139,250,0.18),
        0 12px 32px rgba(34,211,238,0.16),
        0 16px 42px rgba(124,58,237,0.22);
    }
    .brand:hover .brand-mark.brand-logo,
    .brand:focus-visible .brand-mark.brand-logo {
      box-shadow: none;
      border-color: transparent;
    }
    .brand-text {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-width: 0;
    }
    .brand-name {
      font-family: var(--font-sans, system-ui, sans-serif);
      font-size: 17px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--text, #F0EFF8);
      text-transform: lowercase;
    }
    .brand-sub {
      display: block;
      margin: 0; padding: 0;
      border-left: 0;
      font-family: var(--font-mono, monospace);
      font-size: 9.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint, #76748C);
    }
    @media (max-width: 600px) {
      .brand-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
      .brand-mark.brand-logo { width: 100px; height: 27px; flex-basis: 100px; border-radius: 0; }
      .brand-name { font-size: 16px; }
      .brand-sub { display: none; }
    }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .icon-btn {
      width: 34px; height: 34px; border-radius: var(--r-sm);
      display: grid; place-items: center;
      color: var(--text-dim); transition: all var(--t-fast) var(--ease-out);
      border: 1px solid transparent;
    }
    .top-logout-btn {
      min-height: 34px;
      padding: 0 10px;
      border-radius: var(--r-sm);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text-dim);
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px;
      font-weight: 700;
      transition: all var(--t-fast) var(--ease-out);
    }
    .top-logout-btn:hover {
      color: var(--text);
      background: rgba(248,113,113,0.10);
      border-color: rgba(248,113,113,0.28);
      transform: translateY(-1px);
    }
    .top-logout-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    .top-logout-btn.is-hidden {
      display: none !important;
    }
    .top-signin-btn {
      min-height: 34px;
      padding: 0 14px;
      border-radius: var(--r-sm);
      display: inline-flex;
      align-items: center;
      color: var(--bg);
      background: var(--text);
      border: none;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-out);
      flex-shrink: 0;
    }
    .top-signin-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .icon-btn:hover {
      background: var(--bg-card-hover);
      color: var(--text);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    /* Vault lock indicator */
    .icon-btn.vault-lock.locked { color: var(--text-faint); }
    .icon-btn.vault-lock.unlocked {
      color: #6ee7b7;
      background: rgba(110,231,183,0.10);
      border-color: rgba(110,231,183,0.30);
    }
    .icon-btn.vault-lock.empty {
      color: #fbbf24;
      animation: vaultPulse 2.4s ease-in-out infinite;
    }
    @keyframes vaultPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
    /* ─── Pro 업그레이드 버튼 (우상단) ─── */
    .pro-upgrade-btn {
      position: relative;
      height: 34px;
      padding: 0 12px 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #A78BFA 100%);
      background-size: 200% 100%;
      background-position: 0% 50%;
      border: none;
      border-radius: var(--r-sm);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.02em;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 4px 14px -4px rgba(251,191,36,0.50), 0 2px 8px rgba(167,139,250,0.30);
      transition: all 220ms var(--ease-out);
    }
    .pro-upgrade-btn:hover {
      background-position: 100% 50%;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px -6px rgba(251,191,36,0.65), 0 4px 12px rgba(167,139,250,0.40);
    }
    .pro-upgrade-btn:active {
      transform: translateY(0);
    }
    .pro-upgrade-btn .pro-ic {
      width: 13px; height: 13px;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30));
      animation: proStarSpin 6s linear infinite;
    }
    .pro-upgrade-btn .pro-label {
      font-family: var(--font-display, var(--font-sans));
      letter-spacing: 0.04em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.30);
    }
    /* 반짝 sweep 애니메이션 */
    .pro-upgrade-btn .pro-shine {
      position: absolute;
      top: 0; left: -60%;
      width: 50%;
      height: 100%;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
      transform: skewX(-20deg);
      animation: proShine 3.6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes proStarSpin {
      0%, 80% { transform: rotate(0deg) scale(1); }
      90% { transform: rotate(15deg) scale(1.15); }
      100% { transform: rotate(0deg) scale(1); }
    }
    @keyframes proShine {
      0%, 60% { left: -60%; }
      70%, 100% { left: 130%; }
    }
    /* Pro 멤버는 다른 톤으로 (이미 Pro라면) */
    .pro-upgrade-btn.is-pro {
      background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(129,140,248,0.18));
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent-strong, rgba(167,139,250,0.30));
    }
    .pro-upgrade-btn.is-pro .pro-shine,
    .pro-upgrade-btn.is-pro .pro-ic { animation: none; }
    .pro-upgrade-btn.is-pro:hover {
      background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(129,140,248,0.28));
      transform: none;
    }
    /* 모바일 — 라벨 숨기고 별만 */
    @media (max-width: 600px) {
      .pro-upgrade-btn { padding: 0 10px; }
      .pro-upgrade-btn .pro-label { display: none; }
      .top-logout-btn {
        width: 34px;
        padding: 0;
        justify-content: center;
      }
      .top-logout-btn span { display: none; }
    }
    /* Vault settings card */
    .vault-card {
      grid-column: 1 / -1;
      padding: 22px 24px;
      border-radius: var(--r-xl);
      background: linear-gradient(135deg, rgba(167,139,250,0.06), var(--bg-card));
      border: 1px solid rgba(167,139,250,0.20);
      display: flex; flex-direction: column; gap: 16px;
    }
    .vault-head {
      display: flex; align-items: center; gap: 12px;
    }
    .vault-head-ico {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .vault-head h3 { margin: 0; font-size: 15px; color: var(--text); }
    .vault-head .vault-status {
      margin-left: auto;
      padding: 4px 10px;
      border-radius: var(--r-pill);
      font-size: 11px; font-weight: 600;
    }
    .vault-status.locked { background: rgba(255,255,255,0.06); color: var(--text-faint); }
    .vault-status.unlocked { background: rgba(110,231,183,0.18); color: #6ee7b7; }
    .vault-status.empty { background: rgba(251,191,36,0.18); color: #fbbf24; }
    .vault-help {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.55;
      padding: 10px 12px;
      background: var(--bg-1);
      border-radius: 8px;
    }
    .vault-keys {
      display: grid; gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .vault-key {
      padding: 12px 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .vault-key-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
    }
    .vault-key-name {
      font-size: 12px; font-weight: 700; color: var(--text);
    }
    .vault-key-status {
      font-size: 10px; padding: 2px 6px; border-radius: 3px;
      background: var(--bg-elev); color: var(--text-faint);
    }
    .vault-key-status.set { background: rgba(110,231,183,0.18); color: #6ee7b7; }
    .vault-key input {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .vault-key input:focus { outline: none; border-color: var(--accent); }
    .vault-key input:disabled { opacity: 0.4; }
    .vault-actions {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .vault-btn {
      padding: 8px 16px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .vault-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      border-color: transparent;
      box-shadow: 0 8px 20px rgba(167,139,250,0.28);
    }
    .vault-btn.primary:hover {
      box-shadow: 0 12px 28px rgba(167,139,250,0.38);
      transform: translateY(-1px);
    }
    .vault-btn.danger { background: rgba(248,113,113,0.12); color: #fca5a5; border-color: rgba(248,113,113,0.30); }
    .vault-btn:hover { filter: brightness(1.1); }
    /* Modal */
    .vault-modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(8,8,12,0.80);
      backdrop-filter: blur(6px);
      z-index: 9999;
      display: grid; place-items: center;
      padding: 16px;
    }
    .vault-modal {
      width: 100%; max-width: 420px;
      background: linear-gradient(145deg, rgba(255,255,255,0.05), var(--bg-card));
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: 24px;
      box-shadow: 0 24px 60px -10px rgba(0,0,0,0.6);
    }
    .vault-modal h3 { margin: 0 0 6px; font-size: 17px; color: var(--text); }
    .vault-modal p { margin: 0 0 16px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
    .vault-modal input[type="password"] {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: var(--font-mono);
      margin-bottom: 12px;
    }
    .vault-modal input[type="password"]:focus { outline: none; border-color: var(--accent); }
    .vault-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .vault-modal-error {
      font-size: 12px; color: #fca5a5;
      margin-bottom: 10px;
      padding: 8px 10px;
      background: rgba(248,113,113,0.10);
      border-radius: 6px;
    }
    .kbd {
      height: 28px; padding: 0 10px;
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: var(--r-sm);
      background: var(--bg-card);
    }
    .avatar {
      width: 30px; height: 30px; border-radius: 50%;
      background: linear-gradient(135deg, #E9E4FF, #B8A9FF);
      color: #2A1B66; font-weight: 700; font-size: 13px;
      display: grid; place-items: center; margin-left: 4px;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 10px 24px -10px rgba(158,123,255,0.35);
    }

    /* ============ LAYOUT ============ */
    .layout {
      padding-top: 56px;
      display: grid; grid-template-columns: 84px 1fr;
      max-width: 1400px; margin: 0 auto; min-height: 100vh;
      transition: grid-template-columns 0.25s ease;
    }
    .layout.sidebar-collapsed {
      grid-template-columns: 0 1fr;
    }
    .sidebar {
      padding: 14px 8px;
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      gap: 2px;
      position: sticky; top: 56px; height: calc(100vh - 56px);
      overflow: hidden auto;
      transition: opacity 0.2s ease, padding 0.25s ease;
      background: linear-gradient(180deg, rgba(14,14,20,0.72), rgba(10,10,14,0.18));
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .layout.sidebar-collapsed .sidebar {
      padding: 14px 0;
      opacity: 0;
      pointer-events: none;
      border-right-color: transparent;
    }

    /* Sidebar toggle in topbar */
    .topbar-left { display: flex; align-items: center; gap: 10px; }
    .sidebar-toggle {
      width: 34px; height: 34px;
      border-radius: 9px;
      display: grid; place-items: center;
      color: var(--text-dim);
      transition: 0.15s;
      cursor: pointer;
      flex-shrink: 0;
    }
    .sidebar-toggle:hover {
      background: var(--bg-card);
      color: var(--text);
    }
    .sidebar-toggle svg {
      transition: transform 0.25s ease;
    }
    .layout.sidebar-collapsed ~ * .sidebar-toggle svg,
    body.sidebar-closed .sidebar-toggle svg {
      transform: rotate(180deg);
    }
    .nav-group { display: flex; flex-direction: column; gap: 2px; }
    .nav-divider {
      height: 1px; background: var(--border);
      margin: 8px 14px;
    }
    .nav-item {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px;
      padding: 12px 4px;
      border-radius: 12px;
      font-size: 10px; font-weight: 500;
      color: var(--text-faint);
      transition: all var(--t-fast) var(--ease-out); cursor: pointer;
      position: relative;
      letter-spacing: 0.02em;
      text-align: center;
    }
    .nav-item .icon {
      width: 20px; height: 20px;
      stroke-width: 1.6;
    }
    .persona-nav-item .icon {
      width: 18px;
      height: 18px;
      stroke-width: 1.5;
    }
    .nav-item:hover {
      background: var(--bg-card-hover);
      color: var(--text-dim);
      transform: translateY(-1px);
    }
    .nav-item:hover .icon { color: var(--text); }
    .nav-item.active {
      background: linear-gradient(90deg, rgba(167,139,250,0.16), rgba(167,139,250,0.05));
      color: var(--accent);
      box-shadow: inset 2px 0 0 var(--accent);
    }
    .nav-item.active .icon { color: var(--accent); }
    .nav-item.active::before {
      content: ""; position: absolute;
      left: 0; top: 50%; transform: translateY(-50%);
      width: 2.5px; height: 18px; border-radius: 2px;
      background: linear-gradient(180deg, #c4b5fd, #a78bfa);
      box-shadow: 0 0 8px rgba(167,139,250,0.5);
    }
    .nav-spacer { flex: 1; min-height: 12px; }
    .nav-upgrade {
      margin: 8px 4px 0;
      padding: 10px 0;
      font-size: 10px; font-weight: 600;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid rgba(139,92,246,0.35);
      border-radius: var(--radius);
      transition: all var(--t-fast) var(--ease-out);
      cursor: pointer;
      letter-spacing: 0.02em;
      box-shadow: var(--shadow-accent);
    }
    .nav-upgrade:hover { background: rgba(139,92,246,0.22); transform: translateY(-1px); }

    /* ============ MAIN ============ */
    .main { padding: 36px 40px 80px; max-width: 880px; width: 100%; }
    .main:has(#page-video-editor.active) {
      max-width: none;
      min-width: 0;
      padding-inline: clamp(18px, 2vw, 32px);
    }
    .page { display: none; }
    .page.active { display: block; }
    :root {
      --page-title-size: 28px;
      --page-sub-size: 14px;
      --page-title-color: var(--text);
      --page-sub-color: var(--text-dim);
    }
    .page-head { margin-bottom: 28px; }
    .page-head h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--page-title-size);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.04;
      color: var(--page-title-color);
    }
    .page-head p {
      margin: 8px 0 0;
      color: var(--page-sub-color);
      font-size: var(--page-sub-size);
      line-height: 1.6;
    }

    /* ============ DROPZONE ============ */
    .dropzone {
      position: relative;
      border: 1.5px dashed var(--border-strong);
      border-radius: var(--radius);
      padding: 56px 24px;
      text-align: center;
      background:
        radial-gradient(ellipse at center, rgba(139,92,246,0.04), transparent 60%),
        var(--bg-card);
      transition: 0.2s;
      cursor: pointer;
    }
    .dropzone:hover,
    .dropzone.dragging {
      border-color: var(--accent);
      background:
        radial-gradient(ellipse at center, rgba(139,92,246,0.12), transparent 60%),
        var(--bg-card-hover);
    }
    .dropzone:focus-visible {
      outline: 3px solid rgba(139,92,246,0.42);
      outline-offset: 3px;
      border-color: var(--accent);
      background:
        radial-gradient(ellipse at center, rgba(139,92,246,0.12), transparent 60%),
        var(--bg-card-hover);
    }
    .drop-icon-wrap {
      width: 56px; height: 56px; margin: 0 auto 18px;
      border-radius: 16px;
      background: var(--accent-soft); color: var(--accent);
      display: grid; place-items: center;
    }
    .drop-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
    .drop-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
    .drop-btn {
      padding: 10px 22px;
      background: var(--text); color: #08080B;
      font-weight: 600; font-size: 13px;
      border-radius: 9px; transition: 0.18s;
      pointer-events: auto;
    }
    .drop-btn:hover { background: white; transform: translateY(-1px); }
    .drop-info {
      margin-top: 22px;
      font-size: 12px; color: var(--text-faint);
      display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
    }
    .drop-info span::before {
      content: "·"; margin-right: 12px; color: var(--border-strong);
    }
    .drop-info span:first-child::before { display: none; }

    /* ============ URL INPUT ============ */
    .divider-or {
      display: flex; align-items: center; gap: 16px;
      margin: 24px 0;
      color: var(--text-faint); font-size: 11px;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .divider-or::before, .divider-or::after {
      content: ""; flex: 1; height: 1px; background: var(--border);
    }
    .url-form { display: flex; gap: 8px; }
    .url-input-wrap { flex: 1; position: relative; }
    .url-input {
      width: 100%; height: 46px;
      padding: 0 44px 0 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 11px;
      color: var(--text);
      font-family: inherit; font-size: 14px;
      outline: none; transition: 0.18s;
    }
    .url-input:focus {
      border-color: var(--accent);
      background: var(--bg-card-hover);
      box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
    }
    .url-input::placeholder { color: var(--text-faint); }
    .url-input-wrap .link-ico {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      color: var(--text-faint); pointer-events: none;
    }
    .url-submit {
      padding: 0 22px; height: 46px;
      background: var(--text); color: #08080B;
      font-weight: 600; font-size: 13px;
      border-radius: 11px; transition: 0.18s;
    }
    .url-submit:hover:not(:disabled) { background: white; transform: translateY(-1px); }
    .url-submit:disabled { opacity: 0.4; cursor: not-allowed; }
    .url-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 12px; font-size: 11px; color: var(--text-faint);
      flex-wrap: wrap; gap: 8px;
    }
    .server-status { display: inline-flex; align-items: center; gap: 6px; }
    .server-status .sdot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-faint); transition: 0.2s;
    }
    .server-status.online .sdot {
      background: var(--success); box-shadow: 0 0 6px var(--success);
    }
    .server-status.warn .sdot {
      background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.75);
    }
    .server-status.offline .sdot { background: var(--danger); }
    .server-status.checking .sdot {
      background: var(--text-faint);
      animation: pulse-dot 1.4s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
    .legal-note {
      text-align: center;
      font-size: 11px; color: var(--text-faint);
      margin-top: 16px; line-height: 1.6;
    }
    .notice-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .notice-card {
      padding: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      border-radius: 12px;
      text-align: left;
    }
    .notice-label {
      display: inline-flex; align-items: center; gap: 6px;
      margin-bottom: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
      color: var(--text);
    }
    .notice-label.warn { color: #FFCC85; }
    .notice-label.info { color: #A5B4FC; }
    .notice-copy {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.55;
    }

    /* ============ PROCESSING ============ */
    .processing { text-align: center; padding: 40px 20px; }
    .file-badge {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 10px 16px 10px 10px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 99px; margin-bottom: 40px;
      max-width: 100%;
    }
    .file-badge video, .file-badge .url-ico {
      width: 44px; height: 44px; object-fit: cover;
      border-radius: 99px; background: #1a1a1f;
      flex-shrink: 0;
    }
    .file-badge .url-ico {
      display: grid; place-items: center;
      color: var(--accent);
    }
    .file-badge .meta { text-align: left; }
    .file-badge .name {
      font-size: 13px; font-weight: 500;
      max-width: 260px; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-badge .sub { font-size: 11px; color: var(--text-faint); }

    .ring { width: 140px; height: 140px; margin: 0 auto 24px; position: relative; }
    .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .ring .track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 4; }
    .ring .fill {
      fill: none; stroke: url(#grad); stroke-width: 4; stroke-linecap: round;
      stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
      transition: stroke-dashoffset 0.4s ease-out;
    }
    .ring .pct {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
    }
    .proc-label { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
    .proc-eta { font-size: 13px; color: var(--text-dim); margin-bottom: 28px; }
    .steps {
      display: inline-flex; flex-direction: column; gap: 10px;
      padding: 18px 24px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius);
      min-width: 260px; text-align: left;
    }
    .step {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: var(--text-faint);
    }
    .step .indic {
      width: 16px; height: 16px; border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      display: grid; place-items: center;
      font-size: 10px; flex-shrink: 0;
    }
    .step.done { color: var(--text); }
    .step.done .indic { background: var(--success); border-color: var(--success); color: white; }
    .step.active { color: var(--text); }
    .step.active .indic { border-color: var(--accent); background: var(--accent); position: relative; }
    .step.active .indic::after {
      content: ""; position: absolute; inset: -4px; border-radius: 50%;
      border: 2px solid var(--accent);
      animation: ring-pulse 1.4s ease-out infinite;
    }
    @keyframes ring-pulse {
      0% { transform: scale(0.8); opacity: 0.7; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .assurance { margin-top: 28px; font-size: 12px; color: var(--text-faint); }
    .btn-cancel {
      margin-top: 18px; padding: 8px 16px;
      font-size: 12px; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: 8px;
      transition: 0.18s;
    }
    .btn-cancel:hover { background: var(--bg-card-hover); color: var(--text); }

    /* ============ RESULT HEAD ============ */
    .result-head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .success-badge {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(16,185,129,0.15); color: var(--success);
      display: grid; place-items: center;
    }
    .result-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
    .result-head .fname {
      font-size: 12px; color: var(--text-dim);
      padding: 3px 9px; border-radius: 5px;
      background: var(--bg-card); border: 1px solid var(--border);
      max-width: 260px; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ============ STAGE ============ */
    .stage {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 14px;
      overflow: hidden;
    }
    .stage-header {
      padding: 14px 16px;
      display: flex; align-items: center; gap: 12px;
      border-bottom: 1px solid var(--border);
    }
    .stage-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--accent-soft); color: var(--accent);
      display: grid; place-items: center;
      font-size: 11px; font-weight: 600; flex-shrink: 0;
    }
    .stage-num.done { background: var(--success); color: white; }
    .stage-title { font-size: 14px; font-weight: 600; flex: 1; }
    .stage-sub { font-size: 11px; color: var(--text-faint); }
    .stage-body { padding: 16px; }

    .next-btn {
      width: 100%;
      display: flex; align-items: center; gap: 14px;
      padding: 16px; margin-bottom: 14px;
      background: var(--accent-soft);
      border: 1px solid rgba(139,92,246,0.35);
      border-radius: var(--radius);
      color: var(--text); text-align: left;
      transition: 0.18s; cursor: pointer;
    }
    .next-btn:hover:not(:disabled) {
      background: rgba(139,92,246,0.22); transform: translateY(-1px);
    }
    .next-btn:disabled { opacity: 0.85; cursor: wait; }
    .next-num {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--accent); color: white;
      display: grid; place-items: center;
      font-size: 12px; font-weight: 600; flex-shrink: 0;
    }
    .next-content { flex: 1; }
    .next-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
    .next-desc { font-size: 12px; color: var(--text-dim); }
    .next-arrow { color: var(--accent); font-size: 18px; font-weight: 400; }
    .next-btn .loader { margin-left: auto; }

    /* Player */
    .player-top {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px;
    }
    .player-format {
      font-size: 11px; color: var(--text-faint);
      padding: 3px 8px; border-radius: 4px;
      background: rgba(255,255,255,0.04);
    }
    .player-row { display: flex; align-items: center; gap: 14px; }
    .play-big {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--accent); color: white;
      display: grid; place-items: center;
      flex-shrink: 0; transition: 0.18s;
    }
    .play-big:hover { transform: scale(1.05); }
    .wave-big { flex: 1; height: 44px; display: flex; align-items: center; gap: 2px; }
    .wave-big span {
      flex: 1; background: var(--text-faint);
      border-radius: 99px; opacity: 0.4; transition: 0.15s;
    }
    .wave-big span.elapsed { background: var(--accent); opacity: 1; }
    .player-time {
      font-size: 12px; color: var(--text-dim);
      font-variant-numeric: tabular-nums;
      min-width: 80px; text-align: right;
    }
    .ba-toggle {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 99px;
      margin: 14px 0 0;
    }
    .ba-toggle button {
      padding: 6px 14px;
      font-size: 12px; color: var(--text-dim);
      border-radius: 99px; transition: 0.18s;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ba-toggle button:disabled { cursor: not-allowed; }
    .ba-toggle button.active { background: var(--accent-soft); color: var(--text); }

    /* ========== WAVEFORM SELECTION (CapCut-style dual handles) ========== */
    .wave-wrap {
      position: relative;
      flex: 1; height: 44px;
      user-select: none;
      touch-action: none;
      overflow: visible;
    }
    .wave-wrap .wave-big {
      position: relative; z-index: 1;
      pointer-events: none;
    }
    .wave-dim {
      position: absolute;
      top: 0; bottom: 0;
      background: rgba(8, 8, 11, 0.62);
      z-index: 2;
      pointer-events: none;
    }
    .wave-selection {
      position: absolute; top: 0; bottom: 0;
      border-top: 2px solid var(--accent);
      border-bottom: 2px solid var(--accent);
      border-left: 2px solid var(--accent);
      border-right: 2px solid var(--accent);
      background: linear-gradient(180deg, rgba(139,92,246,0.22), rgba(99,102,241,0.18));
      pointer-events: none;
      z-index: 3;
      box-shadow: inset 0 0 24px rgba(139,92,246,0.35), 0 0 14px rgba(139,92,246,0.25);
      border-radius: 4px;
    }
    /* 선택 구간 내부의 파형 바를 보라색으로 강조 */
    .wave-big span.in-selection {
      background: var(--accent) !important;
      opacity: 1 !important;
    }
    .wave-big span.in-selection.elapsed {
      background: #FFFFFF !important;
    }
    .wave-handle {
      position: absolute;
      top: -6px; bottom: -6px;
      width: 14px;
      background: var(--accent);
      border-radius: 4px;
      cursor: ew-resize;
      z-index: 10;
      transform: translateX(-50%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 2px;
      box-shadow: 0 2px 12px rgba(139,92,246,0.55), 0 0 0 1px rgba(255,255,255,0.14);
      transition: background 0.15s, box-shadow 0.15s;
      touch-action: none;
    }
    .wave-handle:hover { background: #A882FF; }
    .wave-handle.dragging {
      background: #FFFFFF;
      box-shadow: 0 2px 16px rgba(255,255,255,0.45), 0 0 0 1px rgba(255,255,255,0.35);
    }
    .wave-handle .grip {
      width: 1.5px; height: 16px;
      background: rgba(255,255,255,0.9);
      border-radius: 1px;
    }
    .wave-handle.dragging .grip { background: var(--accent); }
    .wave-handle .tip {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%; transform: translateX(-50%);
      font-size: 10px; color: var(--text);
      padding: 3px 8px;
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      white-space: nowrap;
      font-family: 'SF Mono', Menlo, monospace;
      font-variant-numeric: tabular-nums;
      opacity: 0;
      transition: opacity 0.15s;
      pointer-events: none;
    }
    .wave-handle:hover .tip,
    .wave-handle.dragging .tip { opacity: 1; }
    .select-hint {
      margin-top: 10px;
      text-align: center;
      font-size: 11px; color: var(--text-faint);
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .select-hint kbd {
      display: inline-flex; align-items: center;
      padding: 1px 6px; border-radius: 4px;
      background: var(--bg-card); border: 1px solid var(--border);
      font-size: 10px; font-family: 'SF Mono', Menlo, monospace;
      color: var(--text-dim);
    }
    .selection-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      margin-top: 12px;
      background: var(--accent-soft);
      border: 1px solid rgba(139,92,246,0.35);
      border-radius: var(--radius-sm);
      font-size: 12px;
      flex-wrap: wrap;
    }
    .selection-bar .sel-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
    }
    .selection-bar .sel-label {
      font-weight: 500; color: var(--text);
    }
    .selection-bar .sel-time {
      color: var(--text);
      font-variant-numeric: tabular-nums;
      padding: 3px 9px;
      background: rgba(0,0,0,0.25);
      border-radius: 5px;
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 11px;
    }
    .selection-bar .sel-duration-text {
      color: var(--accent); font-weight: 600;
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 11px;
    }
    .sel-actions {
      margin-left: auto;
      display: flex; gap: 6px;
    }
    .sel-actions button {
      padding: 6px 12px;
      font-size: 11px; color: var(--text);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 7px;
      transition: 0.18s;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .sel-actions button:hover {
      background: rgba(255,255,255,0.1);
    }
    .sel-actions button.primary {
      background: var(--accent); color: white; border-color: var(--accent);
    }
    .sel-actions button.primary:hover {
      background: var(--accent-2);
    }

    /* Segments */
    .segments {
      max-height: 360px; overflow-y: auto;
      padding: 4px; margin: -4px;
    }
    .segments::-webkit-scrollbar { width: 8px; }
    .segments::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.1); border-radius: 4px;
    }
    .segment {
      display: flex; gap: 12px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px; line-height: 1.65;
      transition: 0.15s;
      cursor: pointer;
    }
    .segment:hover { background: var(--bg-card-hover); }
    .segment.active {
      background: var(--accent-soft);
    }
    .seg-time {
      color: var(--text-faint);
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 11px;
      padding-top: 3px;
      min-width: 48px; flex-shrink: 0;
    }
    .segment.active .seg-time { color: var(--accent); }
    .seg-text { color: var(--text); flex: 1; }

    /* Summary */
    .summary-section { margin-bottom: 20px; }
    .summary-section:last-child { margin-bottom: 0; }
    .summary-section h4 {
      margin: 0 0 8px;
      font-size: 11px; font-weight: 500;
      color: var(--text-faint);
      text-transform: uppercase; letter-spacing: 0.06em;
      display: flex; align-items: center; gap: 8px;
    }
    .summary-section h4::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
    }
    .summary-section p {
      margin: 0;
      font-size: 14px; line-height: 1.7;
      color: var(--text);
    }
    .summary-section ul {
      margin: 0; padding-left: 1.2em;
      font-size: 13px; line-height: 1.8;
      color: var(--text);
    }
    .summary-section ul li { margin-bottom: 4px; }
    .summary-section ul li::marker { color: var(--accent); }
    .keywords { display: flex; gap: 6px; flex-wrap: wrap; }
    .kw {
      font-size: 11px; font-weight: 500;
      padding: 3px 9px; border-radius: 5px;
      background: var(--accent-soft); color: var(--accent);
    }

    .stage-actions {
      display: flex; gap: 8px; flex-wrap: wrap;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .stage-actions button, .stage-actions a {
      padding: 7px 14px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      font-size: 12px; color: var(--text);
      background: transparent;
      transition: 0.18s;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
      text-decoration: none;
    }
    .stage-actions button:hover,
    .stage-actions a:hover { background: var(--bg-card-hover); }
    .stage-actions .primary {
      background: var(--accent-soft);
      border-color: rgba(139,92,246,0.35); color: var(--text);
    }
    .stage-actions .primary:hover { background: rgba(139,92,246,0.22); }

    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 20px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; font-weight: 600; font-size: 13px;
      border-radius: 14px;
      box-shadow: 0 6px 16px -4px rgba(139,92,246,0.45);
      transition: 0.18s;
      text-decoration: none;
      cursor: pointer;
    }
    .btn-primary:hover { transform: translateY(-1px); }

    .retry-row {
      display: flex; justify-content: center; gap: 8px;
      margin-top: 20px;
    }
    .retry-row button {
      padding: 8px 16px;
      font-size: 12px; color: var(--text-dim);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: 0.18s;
    }
    .retry-row button:hover { color: var(--text); background: var(--bg-card-hover); }
    .retention-note {
      text-align: center; margin-top: 16px;
      font-size: 11px; color: var(--text-faint);
    }
    .onboarding-flow {
      margin-top: 28px;
      display: grid;
      gap: 18px;
    }
    .flow-intro {
      padding: 18px 20px;
      background: linear-gradient(180deg, rgba(139,92,246,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(139,92,246,0.24);
      border-radius: var(--radius);
    }
    .flow-kicker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .flow-intro h3 {
      margin: 0 0 6px;
      font-size: 20px;
      letter-spacing: -0.02em;
    }
    .flow-intro p {
      margin: 0;
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.65;
    }
    .onboarding-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .onboarding-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 12px;
    }
    .mock-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text-dim);
    }
    .mock-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 11px;
    }
    .onboarding-body {
      padding: 26px 20px 20px;
    }
    .onboarding-body h3 {
      margin: 0 0 6px;
      font-size: 24px;
      letter-spacing: -0.02em;
    }
    .onboarding-sub {
      margin: 0 0 22px;
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.6;
    }
    .score-block {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      margin-bottom: 14px;
    }
    .score-block h4,
    .mock-section-title {
      margin: 0 0 12px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .score-row {
      display: grid;
      grid-template-columns: 60px 1fr auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 10px;
      font-size: 12px;
    }
    .score-row:last-child { margin-bottom: 0; }
    .score-row .label { color: var(--text-dim); }
    .score-row .value { color: var(--text); font-weight: 600; }
    .score-dots {
      display: flex;
      gap: 5px;
    }
    .score-dots span {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
    }
    .score-dots span.on { background: var(--accent); }
    .inline-alert {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(245,158,11,0.08);
      border: 1px solid rgba(245,158,11,0.22);
      color: #FFCC85;
      font-size: 12px;
      line-height: 1.5;
    }
    .sentence-card {
      padding: 16px;
      border-radius: 12px;
      border: 1px solid rgba(139,92,246,0.3);
      background: rgba(139,92,246,0.08);
      font-size: 18px;
      line-height: 1.7;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }
    .record-btn {
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 24px -12px rgba(139,92,246,0.6);
    }
    .record-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
    }
    .helper-copy {
      margin-top: 10px;
      color: var(--text-faint);
      font-size: 12px;
      line-height: 1.55;
    }
    .verify-result {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(16,185,129,0.1);
      border: 1px solid rgba(16,185,129,0.22);
      color: #9EF0C8;
      font-size: 12px;
      font-weight: 600;
    }
    .footer-cta {
      padding: 14px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
    }
    .full-btn {
      width: 100%;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .identity-grid {
      display: grid;
      gap: 12px;
    }
    .field-block label {
      display: block;
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 7px;
    }
    .mock-input,
    .mock-textarea {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text);
      padding: 13px 14px;
      font-size: 14px;
    }
    .mock-textarea {
      min-height: 92px;
      resize: none;
      line-height: 1.55;
    }
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 6px;
    }
    .preview-card {
      padding: 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .preview-card .tag {
      display: inline-flex;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 10px;
      margin-bottom: 10px;
    }
    .preview-card h5 {
      margin: 0 0 8px;
      font-size: 14px;
    }
    .preview-card p {
      margin: 0 0 12px;
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.5;
      min-height: 54px;
    }
    .mini-play {
      min-height: 36px;
      width: 100%;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
    }
    .studio-shell {
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      padding: 16px;
    }
    .studio-shell-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
    }
    .studio-shell-head h4 {
      margin: 0;
      font-size: 15px;
    }
    .studio-shell-head p {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--text-dim);
    }
    .studio-status {
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 11px;
      color: var(--accent);
      background: rgba(139,92,246,0.1);
      border: 1px solid rgba(139,92,246,0.24);
    }
    .slider-grid {
      display: grid;
      gap: 12px;
      margin: 14px 0 16px;
    }
    .slider-card {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .slider-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 12px;
      color: var(--text-dim);
    }
    .mock-slider {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .mock-slider::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--fill, 50%);
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .mock-slider::after {
      content: "";
      position: absolute;
      top: 50%;
      left: var(--fill, 50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.35);
      transform: translate(-50%, -50%);
    }
    .history-mock {
      margin-top: 16px;
      display: grid;
      gap: 10px;
    }
    .history-mock-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .history-mock-item .meta {
      min-width: 0;
    }
    .history-mock-item .title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .history-mock-item .sub {
      font-size: 11px;
      color: var(--text-faint);
    }
    .ghost-btn {
      min-height: 36px;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
    }

    /* ============ TTS STUDIO PAGE ============ */
    .persona-card {
      display: flex; align-items: center; gap: 16px;
      padding: 16px; background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 16px;
    }
    .persona-av {
      width: 56px; height: 56px; border-radius: 14px;
      background: linear-gradient(135deg, #EBE3FF, #B8A9FF);
      position: relative; overflow: hidden; flex-shrink: 0;
    }
    .persona-av::after {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(99,102,241,0.3), transparent 60%);
    }
    .persona-info { flex: 1; }
    .persona-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .persona-name { font-size: 15px; font-weight: 600; }
    .persona-verified {
      font-size: 10px; font-weight: 600; color: var(--accent);
      padding: 2px 7px; border-radius: 99px; background: var(--accent-soft);
      letter-spacing: 0.02em;
    }
    .persona-desc { color: var(--text-dim); font-size: 13px; }
    .persona-switch {
      padding: 9px 14px; font-size: 13px;
      border: 1px solid var(--border-strong); border-radius: 9px;
      color: var(--text); transition: 0.18s;
    }
    .persona-switch:hover { background: var(--bg-card-hover); }
    .persona-switch .chev { color: var(--text-dim); margin-left: 6px; }
    .persona-dropdown { position: relative; }
    .persona-menu {
      position: absolute; right: 0; top: calc(100% + 6px);
      min-width: 280px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
      padding: 6px; display: none; z-index: 20;
    }
    .persona-menu.open { display: block; }
    .persona-option {
      display: flex; align-items: center; gap: 12px;
      padding: 10px; border-radius: 8px; cursor: pointer;
    }
    .persona-option:hover { background: var(--bg-card-hover); }
    .persona-option .mini-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }
    .persona-option .meta { font-size: 13px; flex: 1; }
    .persona-option .meta b { display: block; font-weight: 600; }
    .persona-option .meta span { color: var(--text-faint); font-size: 12px; }

    .card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
    }
    .editor-tools {
      display: flex; flex-direction: column;
      gap: 8px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }
    .tag-row {
      display: flex; align-items: center;
      gap: 5px; flex-wrap: wrap;
    }
    .tag-row-label {
      font-size: 10px; font-weight: 500;
      color: var(--text-faint);
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 2px 8px 2px 0;
      min-width: 36px;
    }
    .tag-btn {
      font-size: 12px; padding: 6px 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 7px;
      color: var(--text-dim); transition: 0.15s;
      white-space: nowrap;
    }
    .tag-btn:hover {
      background: var(--accent-soft); color: var(--text);
      border-color: var(--accent);
    }
    .tag-btn code {
      color: var(--accent); font-family: 'SF Mono', Menlo, monospace;
      font-size: 11px; margin-right: 4px;
    }
    .tag-btn.emo {
      padding: 5px 11px;
      font-size: 12px;
    }
    .tag-btn.selected {
      border-color: #FFFFFF;
      color: #FFFFFF;
      background: var(--bg-card-hover);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
    }
    .tag-btn.selected:hover {
      border-color: #FFFFFF;
      background: var(--bg-card-hover);
    }
    .tag-btn.selected code { color: #FFFFFF; }
    .tool-divider { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
    .tag-row.emotion-row { align-items: flex-start; }
    .emotion-tags {
      display: flex; flex-wrap: wrap; gap: 5px;
      flex: 1;
      max-height: 160px;
      overflow-y: auto;
      padding: 2px 8px 2px 0;
    }
    .emotion-tags::-webkit-scrollbar { width: 6px; }
    .emotion-tags::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
    }
    .emotion-tags::-webkit-scrollbar-track { background: transparent; }
    .emo-count {
      display: inline-block; margin-left: 4px;
      padding: 1px 6px; border-radius: 99px;
      background: var(--bg-card); color: var(--text-faint);
      font-size: 9px; font-weight: 600;
      letter-spacing: 0;
    }
    .tag-actions-inline {
      display: flex; align-items: center; gap: 6px;
      margin-left: auto;
      flex-shrink: 0;
    }
    .tag-action-btn {
      padding: 4px 10px;
      font-size: 10px; color: var(--text-faint);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      transition: 0.15s;
    }
    .tag-action-btn:hover {
      color: var(--text); border-color: var(--border-strong);
    }
    #editor {
      width: 100%; min-height: 180px;
      background: transparent; border: none; outline: none;
      color: var(--text); font-family: inherit;
      font-size: 15px; line-height: 1.65; resize: vertical;
    }
    #editor::placeholder { color: var(--text-faint); }
    .editor-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 10px; padding-top: 12px;
      border-top: 1px solid var(--border);
      font-size: 12px; color: var(--text-faint);
    }
    .editor-footer strong { color: var(--text-dim); font-weight: 500; }
    .controls {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      margin-bottom: 16px;
    }
    .control-card {
      padding: 14px 16px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .control-card.full { grid-column: 1 / -1; }
    .control-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 12px;
    }
    .control-label { font-size: 13px; color: var(--text-dim); }
    .control-value { font-size: 13px; font-weight: 500; color: var(--text); }
    input[type=range] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 99px; outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--text); cursor: pointer;
      box-shadow: 0 0 0 4px rgba(139,92,246,0.18);
      transition: 0.14s;
    }
    input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(139,92,246,0.25); }
    .range-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 8px; }
    .emotion-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .pill {
      padding: 7px 14px; font-size: 13px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 99px;
      color: var(--text-dim); transition: 0.18s;
    }
    .pill:hover { color: var(--text); border-color: var(--border-strong); }
    .pill.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
    .generate-row { display: flex; gap: 10px; margin-bottom: 32px; }
    .btn-generate {
      flex: 1; height: 52px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; font-weight: 600; font-size: 15px;
      border-radius: 12px;
      box-shadow: 0 8px 24px -6px rgba(139,92,246,0.5);
      transition: 0.18s; position: relative; overflow: hidden;
    }
    .btn-generate:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(139,92,246,0.6); }
    .btn-generate:disabled { opacity: 0.75; cursor: wait; transform: none; }
    .btn-generate .eta {
      font-weight: 400; font-size: 13px; opacity: 0.8;
      padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.3);
    }
    .btn-icon-lg {
      width: 52px; height: 52px;
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      display: grid; place-items: center;
      color: var(--text-dim); transition: 0.18s;
    }
    .btn-icon-lg:hover { background: var(--bg-card-hover); color: var(--text); }
    .loader { display: inline-flex; gap: 4px; }
    .loader span {
      width: 6px; height: 6px; border-radius: 50%; background: white;
      animation: bounce 1.2s infinite ease-in-out;
    }
    .loader span:nth-child(2) { animation-delay: 0.15s; }
    .loader span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes bounce {
      0%,80%,100% { transform: scale(0.6); opacity: 0.5; }
      40% { transform: scale(1); opacity: 1; }
    }
    .loader.dark span { background: var(--accent); }

    .history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .history-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
    .history-head .count { font-size: 12px; color: var(--text-faint); }
    .history-list { display: flex; flex-direction: column; gap: 8px; }
    .history-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-sm); transition: 0.18s;
    }
    .history-item:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
    .history-item.new { animation: slideIn 0.4s ease-out; }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .play-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--accent-soft); color: var(--accent);
      display: grid; place-items: center;
      flex-shrink: 0; transition: 0.18s;
    }
    .play-btn:hover { background: var(--accent); color: white; }
    .play-btn.playing { background: var(--accent); color: white; }
    .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 32px; }
    .wave span {
      flex: 1; background: var(--text-faint);
      border-radius: 99px; opacity: 0.5; transition: 0.2s;
    }
    .history-item:hover .wave span { opacity: 0.8; }
    .history-item.playing .wave span {
      background: var(--accent); opacity: 1;
      animation: pulse-bar 0.8s ease-in-out infinite;
    }
    @keyframes pulse-bar {
      0%,100% { transform: scaleY(0.85); }
      50% { transform: scaleY(1.08); }
    }
    .history-meta { min-width: 210px; max-width: 260px; }
    .history-title {
      font-size: 13px; font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 3px;
    }
    .history-sub { font-size: 11px; color: var(--text-faint); display: flex; gap: 8px; }
    .history-sub .sep { color: var(--border-strong); }
    .persona-chip {
      font-size: 10px; font-weight: 500;
      padding: 2px 6px; border-radius: 5px;
      background: var(--accent-soft); color: var(--accent);
    }
    .history-actions { display: flex; gap: 4px; }
    .mini-btn {
      width: 32px; height: 32px; border-radius: 8px;
      color: var(--text-faint);
      display: grid; place-items: center; transition: 0.18s;
    }
    .mini-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }

    /* ============ TOAST ============ */
    .toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      padding: 12px 18px; border-radius: 10px;
      font-size: 13px; box-shadow: var(--shadow);
      opacity: 0; pointer-events: none; transition: 0.25s;
      z-index: 200;
      display: flex; align-items: center; gap: 10px;
      max-width: calc(100vw - 48px);
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* Mobile: bottom-nav 높이만큼 위로 올리기 */
    @media (max-width: 768px) {
      .toast {
        bottom: calc(var(--bottom-nav-h, 60px) + 16px) !important;
        max-width: calc(100vw - 32px) !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
      }
    }
    .toast .ok {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--success);
      display: grid; place-items: center;
      color: white; font-size: 11px; flex-shrink: 0;
    }
    .toast.error .ok { background: var(--danger); }
    .toast.warn .ok { background: var(--warn); }
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }

    /* ============ SOUND EFFECTS PAGE ============ */
    .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--text-faint);
      margin-bottom: 10px;
    }
    .breadcrumb .crumb-sep { color: var(--border-strong); }
    .breadcrumb .crumb-current { color: var(--page-sub-color); }
    .sfx-head {
      margin: 0 0 20px;
      font-family: var(--font-display);
      font-size: var(--page-title-size);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.04;
      color: var(--page-title-color);
    }
    .sfx-page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }
    .sfx-page-title { min-width: 0; }
    .sfx-page-head .sfx-head { margin-bottom: 10px; }
    .sfx-top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
      max-width: 460px;
      padding-top: 4px;
    }
    /* ─── SFX Generate Card v2 — 시니어 톤 리디자인 ─── */
    .sfx-generate-card {
      margin: 4px 0 32px;
      padding: 22px 24px 20px;
      background:
        radial-gradient(ellipse at 0% 0%, rgba(167,139,250,0.10), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(99,102,241,0.06), transparent 55%),
        var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 18px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 16px 40px -20px rgba(0,0,0,0.50);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    /* 1차: 입력 + CTA 인라인 행 */
    .sfx-prompt-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
    }
    .sfx-prompt-ic {
      width: 38px; height: 54px;
      display: grid; place-items: center;
      font-size: 20px;
      filter: drop-shadow(0 0 10px rgba(167,139,250,0.50));
      flex-shrink: 0;
    }
    .sfx-prompt-row input[type="text"] {
      height: 54px;
      padding: 0 18px;
      background: var(--bg-1, #0F0F14);
      border: 1.5px solid var(--border, #2A2A33);
      border-radius: 12px;
      color: var(--text, #E9E9F0);
      font-size: 15px;
      font-family: var(--font-sans, inherit);
      outline: none;
      transition: border-color 200ms, box-shadow 200ms, background 200ms;
      letter-spacing: 0.005em;
    }
    .sfx-prompt-row input[type="text"]::placeholder {
      color: var(--text-faint, #797986);
      font-style: italic;
    }
    .sfx-prompt-row input[type="text"]:focus {
      border-color: var(--accent, #A78BFA);
      background: var(--bg-card, #14141A);
      box-shadow: 0 0 0 4px rgba(167,139,250,0.14);
    }
    /* 즉시 생성 CTA — 입력창 옆 인라인 */
    .sfx-prompt-cta {
      height: 54px;
      padding: 0 22px 0 20px;
      background: linear-gradient(135deg, #A78BFA, #6366F1);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      box-shadow:
        0 10px 26px -8px rgba(167,139,250,0.55),
        inset 0 1px 0 rgba(255,255,255,0.20);
      transition: transform 200ms, box-shadow 200ms, filter 200ms;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .sfx-prompt-cta:hover {
      transform: translateY(-2px);
      box-shadow:
        0 14px 32px -6px rgba(167,139,250,0.70),
        inset 0 1px 0 rgba(255,255,255,0.25);
      filter: brightness(1.05);
    }
    .sfx-prompt-cta:active { transform: translateY(0) scale(0.985); }
    .sfx-prompt-cta:disabled {
      opacity: 0.55;
      cursor: progress;
      transform: none;
      filter: grayscale(0.3);
    }
    .sfx-prompt-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
    .sfx-prompt-cta kbd {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 22px; height: 20px;
      padding: 0 6px;
      background: rgba(255,255,255,0.18);
      border-radius: 5px;
      font-family: var(--font-mono, monospace);
      font-size: 10px; font-weight: 600;
      letter-spacing: 0;
      margin-left: 4px;
    }
    /* 2차: 컨트롤 + 크레딧 한 줄 */
    .sfx-controls-row {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px dashed rgba(255,255,255,0.06);
    }
    .sfx-ctrl-group {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    /* 빠른 시도 라벨 */
    .sfx-quickgen-hints .hints-label {
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-weight: 700;
      padding-right: 4px;
    }
    /* 모바일 — 입력/CTA 세로 적층 */
    @media (max-width: 720px) {
      .sfx-generate-card { padding: 18px 16px 16px; border-radius: 14px; }
      .sfx-prompt-row { grid-template-columns: auto 1fr; }
      .sfx-prompt-ic { display: none; }
      .sfx-prompt-cta {
        grid-column: 1 / -1;
        height: 48px;
        justify-content: center;
        margin-top: 4px;
      }
      .sfx-controls-row {
        flex-direction: column;
        align-items: stretch;
      }
      .sfx-ctrl-group { justify-content: flex-start; }
      .sfx-credit-bar { padding: 0; }
    }

    /* ─── (Legacy) 기존 .sfx-quickgen — 다른 페이지 호환 유지 ─── */
    .sfx-quickgen {
      margin: 8px 0 28px;
      padding: 18px 20px 16px;
      background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(167,139,250,0.02));
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: var(--r-lg);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .sfx-quickgen-row {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap;
    }
    .sfx-quickgen-ic {
      font-size: 18px;
      flex-shrink: 0;
      filter: drop-shadow(0 0 6px rgba(167,139,250,0.40));
    }
    .sfx-quickgen-row input[type="text"] {
      flex: 1; min-width: 200px;
      height: 44px;
      padding: 0 16px;
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      color: var(--text);
      font-size: 14px;
      font-family: var(--font-sans);
      outline: none;
      transition: all 0.15s var(--ease-out, ease);
    }
    .sfx-quickgen-row input[type="text"]:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
    }
    .sfx-quickgen-row input[type="text"]::placeholder {
      color: var(--text-faint);
    }
    .sfx-quickgen-btn {
      height: 44px;
      padding: 0 22px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none;
      border-radius: 10px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 4px 14px -4px rgba(167,139,250,0.50), 0 2px 6px rgba(167,139,250,0.20);
      transition: all 0.18s var(--ease-out, ease);
      flex-shrink: 0;
    }
    .sfx-quickgen-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px -4px rgba(167,139,250,0.60), 0 4px 10px rgba(167,139,250,0.28);
    }
    .sfx-quickgen-btn:active { transform: translateY(0); }
    .sfx-quickgen-btn:disabled {
      opacity: 0.5;
      cursor: progress;
      transform: none;
    }
    .sfx-top-actions .sfx-quickgen-btn {
      order: 2;
      min-width: 120px;
      justify-content: center;
    }
    .sfx-quickgen-hints {
      display: flex; flex-wrap: wrap; gap: 6px;
      align-items: center;
    }
    .sfx-quickgen-chip {
      padding: 5px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-dim);
      font-size: 11.5px;
      cursor: pointer;
      transition: all 0.12s;
    }
    .sfx-quickgen-chip:hover {
      border-color: rgba(167,139,250,0.40);
      color: var(--accent);
      background: rgba(167,139,250,0.08);
      transform: translateY(-1px);
    }
    @media (max-width: 600px) {
      .sfx-quickgen-row { gap: 8px; }
      .sfx-page-head { flex-direction: column; }
      .sfx-top-actions { justify-content: flex-start; max-width: 100%; }
      .sfx-top-actions .sfx-quickgen-btn { width: 100%; order: 0; }
    }
    /* SFX 통합 컨트롤 (Loop/Length/변주/AI + 크레딧) */
    .sfx-quickgen-controls {
      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
      padding-top: 4px;
    }
    .sfx-ctrl {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 10px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-dim);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.12s var(--ease-out, ease);
    }
    .sfx-ctrl:hover {
      border-color: rgba(167,139,250,0.30);
      color: var(--text);
    }
    .sfx-ctrl.on {
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      background: var(--accent-soft);
      color: var(--accent);
    }
    .sfx-ctrl-label {
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .sfx-ctrl-value {
      padding: 1px 6px;
      background: rgba(255,255,255,0.04);
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
    }
    .sfx-ctrl.on .sfx-ctrl-value {
      background: rgba(167,139,250,0.20);
      color: var(--accent);
    }
    .sfx-top-actions .sfx-ctrl {
      min-width: 44px;
      height: 44px;
      padding: 0 10px;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-card);
    }
    .sfx-top-actions .sfx-ctrl svg {
      width: 15px;
      height: 15px;
    }
    .sfx-top-actions .sfx-ctrl-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .sfx-top-actions .sfx-ctrl-value {
      padding: 1px 5px;
      min-width: 26px;
      text-align: center;
      background: rgba(255,255,255,0.04);
    }
    @media (max-width: 600px) {
      .sfx-top-actions .sfx-ctrl {
        min-width: 40px;
        height: 40px;
      }
    }
    /* 잔여 크레딧 바 — 생성 버튼 바로 아래 */
    .sfx-credit-bar,
    .music-credit-bar,
    .tts-credit-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      padding: 6px 4px 0;
      font-size: 11.5px;
      color: var(--text-dim);
    }
    .sfx-credit-bar strong,
    .music-credit-bar strong,
    .tts-credit-bar strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
    .sfx-credit-bar .sfx-credit-ic,
    .music-credit-bar .music-credit-ic,
    .tts-credit-bar .tts-credit-ic {
      color: var(--accent);
      font-size: 12px;
    }
    .sfx-credit-bar .sfx-credit-sep,
    .music-credit-bar .music-credit-sep,
    .tts-credit-bar .tts-credit-sep { color: var(--text-faint); opacity: 0.5; }
    .tts-credit-bar {
      margin: 10px 0 0;
      padding: 10px 14px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 12px;
    }
    .tts-credit-bar.warn { border-color: rgba(245,158,11,0.45); }
    .tts-credit-bar.warn strong { color: #F59E0B; }
    .tts-credit-bar.empty { border-color: rgba(239,68,68,0.55); }
    .tts-credit-bar.empty strong { color: #EF4444; }
    .tts-credit-bar-track {
      display: inline-block;
      width: 80px; height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
      margin-left: 4px;
    }
    .tts-credit-bar-fill {
      display: block; height: 100%;
      background: linear-gradient(90deg, var(--accent, #A78BFA), #6366F1);
      border-radius: 999px;
      transition: width 320ms cubic-bezier(0.22,0.61,0.36,1);
    }
    .tts-credit-bar.warn .tts-credit-bar-fill { background: linear-gradient(90deg, #F59E0B, #EF4444); }
    .tts-credit-bar.empty .tts-credit-bar-fill { background: #EF4444; }
    .tts-credit-bar .tts-credit-upgrade {
      margin-left: auto;
      color: var(--accent, #A78BFA);
      font-weight: 600;
      text-decoration: none;
      transition: color 180ms;
    }
    .tts-credit-bar .tts-credit-upgrade:hover { color: var(--text, #E9E9F0); }
    .sfx-credit-bar .sfx-credit-upgrade,
    .music-credit-bar .music-credit-upgrade {
      margin-left: auto;
      padding: 2px 10px;
      font-size: 10.5px;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 999px;
      transition: all 0.12s;
    }
    .sfx-credit-bar .sfx-credit-upgrade:hover,
    .music-credit-bar .music-credit-upgrade:hover {
      background: var(--accent);
      color: var(--bg);
    }
    @media (max-width: 600px) {
      .sfx-credit-bar .sfx-credit-upgrade,
      .music-credit-bar .music-credit-upgrade { margin-left: 0; }
    }
    .sfx-tabs {
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .sfx-tabs .tab-group {
      display: inline-flex;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
    }
    .sfx-tab {
      min-height: 38px;
      padding: 0 16px;
      font-size: 13px; font-weight: 600;
      color: var(--text-faint);
      border: 1px solid transparent;
      border-radius: 8px;
      transition: 0.15s;
    }
    .sfx-tab:hover { color: var(--text-dim); background: rgba(255,255,255,0.04); }
    .sfx-tab.active {
      color: var(--text);
      background: var(--accent-soft);
      border-color: rgba(139,92,246,0.28);
    }
    .soundboard-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      font-size: 13px; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: 9px;
      transition: 0.15s;
    }
    .soundboard-btn:hover { background: var(--bg-card-hover); color: var(--text); }

    /* ============ MUSIC PAGE ============ */
    .music-shell {
      display: grid;
      grid-template-columns: 380px minmax(0, 1fr);
      gap: 16px;
      min-height: calc(100vh - 140px);
    }
    .music-page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .music-page-head .page-head {
      margin: 0;
      flex: 1;
    }
    .music-create-tabs.music-topbar {
      width: auto;
      min-width: 420px;
      flex-shrink: 0;
    }
    .music-left,
    .music-right {
      min-width: 0;
    }
    .music-left {
      display: grid;
      align-content: start;
      gap: 16px;
    }
    .music-right {
      display: grid;
      align-content: start;
      gap: 16px;
    }
    .music-panel-head,
    .music-workspace-head {
      padding: 18px 20px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--bg-card);
      box-shadow: none;
    }
    .music-pill-row,
    .music-head-row,
    .music-filter-row,
    .music-card-actions,
    .music-player {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .music-head-row { justify-content: space-between; }
    .music-pills {
      display: inline-flex;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255,255,255,0.03);
    }
    .music-pill {
      min-height: 38px;
      padding: 0 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dim);
    }
    .music-pill.active {
      background: var(--accent-soft);
      color: var(--text);
    }
    .music-create-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      background: var(--bg-card);
    }
    .music-create-tab {
      min-height: 56px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dim);
      border-right: 1px solid var(--border);
      background: transparent;
    }
    .music-create-tab:last-child { border-right: 0; }
    .music-create-tab.active {
      color: var(--text);
      background: rgba(255,255,255,0.05);
    }
    .music-panel-body {
      padding: 0;
      display: grid;
      gap: 16px;
    }
    .music-form-card {
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--bg-card);
      overflow: hidden;
      box-shadow: none;
    }
    .music-form-head {
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      border-bottom: 1px solid var(--border);
    }
    .music-form-body {
      padding: 18px;
    }
    .music-textarea {
      min-height: 200px;
      color: var(--text-faint);
      font-size: 15px;
      line-height: 1.7;
    }
    .music-style-guide {
      margin-bottom: 12px;
      color: var(--text-faint);
      font-size: 13px;
      line-height: 1.55;
    }
    .music-style-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .music-style-picker {
      max-height: 220px;
      overflow: auto;
      padding-right: 4px;
      align-content: flex-start;
      margin-top: 14px;
    }
    .music-style-picker::-webkit-scrollbar { width: 6px; }
    .music-style-picker::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
    }
    .music-chip {
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      color: var(--text-dim);
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      font-weight: 600;
    }
    .music-chip.selected {
      background: rgba(139,92,246,0.16);
      border-color: rgba(139,92,246,0.26);
      color: var(--text);
    }
    .music-create-btn {
      min-height: 52px;
      justify-content: center;
      border-radius: 18px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: white;
      font-size: 15px;
      font-weight: 700;
      box-shadow: none;
    }
    .music-workspace-head h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--page-title-size);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.04;
      color: var(--page-title-color);
    }
    .music-workspace-head p {
      margin: 6px 0 0;
      color: var(--page-sub-color);
      font-size: var(--page-sub-size);
      line-height: 1.6;
    }
    .music-search,
    .music-filter,
    .music-page-btn,
    .music-page-num {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      color: var(--text-dim);
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .music-search { flex: 1; justify-content: flex-start; }
    .music-page-num { min-width: 56px; color: var(--text); }
    .music-list {
      padding: 0;
      display: grid;
      gap: 12px;
    }
    .music-item {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) 44px;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(255,255,255,0.02);
    }
    .music-cover {
      width: 76px;
      height: 76px;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #4c1d95, #8b5cf6);
    }
    .music-cover.two { background: linear-gradient(135deg, #312e81, #7c3aed); }
    .music-cover.three { background: linear-gradient(135deg, #6d28d9, #c4b5fd); }
    .music-duration {
      position: absolute;
      left: 8px;
      bottom: 8px;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(11,11,15,0.65);
      color: white;
      font-size: 11px;
      font-weight: 700;
    }
    .music-meta h3 {
      margin: 0 0 4px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .music-meta p {
      margin: 0 0 8px;
      color: var(--text-faint);
      font-size: 12px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .music-meta-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .music-tag {
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      font-weight: 600;
    }
    .music-icon-btn,
    .music-more-btn {
      width: 30px;
      height: 30px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      color: var(--text-dim);
      display: grid;
      place-items: center;
      font-size: 11px;
    }
    .music-more-btn {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    .music-player-bar {
      position: sticky;
      top: 0;
      z-index: 4;
      padding: 14px 16px;
      background: rgba(18,18,24,0.94);
      backdrop-filter: blur(14px);
      border: 1px solid var(--border);
      border-radius: 18px;
      display: grid;
      gap: 12px;
      box-shadow: none;
    }
    .music-player {
      justify-content: space-between;
    }
    .music-player .play {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: white;
      display: grid;
      place-items: center;
      box-shadow: none;
      font-size: 13px;
    }
    .music-progress-bar {
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .music-bottom-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding-top: 4px;
    }
    .music-bottom-bar .music-page-btn,
    .music-bottom-bar .music-page-num {
      min-height: auto;
      min-width: auto;
      padding: 0 4px;
      border: 0;
      background: transparent;
      border-radius: 0;
      color: var(--accent);
    }
    .music-bottom-bar .music-page-btn {
      font-size: 16px;
      font-weight: 700;
    }
    .music-bottom-bar .music-page-num {
      color: rgba(232,232,234,0.82);
      font-size: 13px;
      font-weight: 600;
    }
    .music-progress-bar::before {
      content: "";
      display: block;
      width: 62%;
      height: 100%;
      background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.75));
    }

    /* ============ VOICES PAGE ============ */
    .voices-page-head {
      display: block;
      margin-bottom: 28px;
    }
    .voices-page-head .page-head {
      margin: 0;
    }
    .voices-page-head .page-head p {
      max-width: 580px;
    }
    .voices-layout {
      display: block;
    }
    .voices-library-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .voices-filter-group {
      display: grid;
      gap: 10px;
      min-width: 0;
    }
    .voices-filter-group h3 {
      margin: 0;
      font-size: 13px;
      color: var(--text-faint);
      font-weight: 600;
    }
    .voices-gender-grid {
      display: grid;
      gap: 8px;
    }
    .voices-gender-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .voices-chip,
    .voices-list-btn,
    .voices-select {
      min-height: 36px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: 0.18s;
    }
    .voices-chip.active,
    .voices-list-btn.active {
      background: var(--accent-soft);
      border-color: rgba(139,92,246,0.24);
      color: var(--text);
    }
    .voices-list-stack {
      display: grid;
      gap: 8px;
    }
    .voices-list-btn {
      justify-content: flex-start;
    }
    .voices-select {
      justify-content: space-between;
      color: var(--text);
    }
    .voices-library-panel {
      padding: 18px;
    }
    .voices-library-top {
      display: grid;
      gap: 12px;
      margin-bottom: 18px;
    }
    .voices-inline-search {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      width: min(420px, 100%);
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(255,255,255,0.026);
      color: var(--text-faint);
      font-size: 12px;
      transition: border-color .15s;
    }
    .voices-inline-search:focus-within {
      border-color: rgba(167,139,250,0.5);
      background: rgba(167,139,250,0.04);
    }
    .voices-inline-search input,
    .voices-search-box input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
    }
    .voices-inline-search input::placeholder,
    .voices-search-box input::placeholder {
      color: var(--text-faint);
    }
    .voices-inline-search .icon {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }
    .voices-filter-button { cursor: pointer; transition: all .15s; }
    .voices-filter-button:hover { border-color: var(--border-hi) !important; background: var(--bg-elev) !important; }
    .voices-search-box { transition: border-color .15s; }
    .voices-search-box:focus-within { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.04); }
    .voices-filter-bar {
      display: grid;
      grid-template-columns: 1.15fr 1fr 1fr;
      gap: 12px;
      padding: 14px 0 6px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .voices-collection-label {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-faint);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .voices-tabs {
      display: inline-flex;
      gap: 8px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      width: fit-content;
    }
    .voices-tab {
      min-height: 32px;
      padding: 0 11px;
      border-radius: 10px;
      color: var(--text-dim);
      font-size: 11px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .voices-tab.active {
      background: rgba(255,255,255,0.08);
      color: var(--text);
    }
    .voices-count {
      color: var(--text-faint);
      font-size: 12px;
    }
    .voices-y2k-banner {
      position: relative;
      margin-bottom: 16px;
      padding: 18px 20px;
      border: 1px solid rgba(158,123,255,0.22);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(158,123,255,0.22), rgba(99,102,241,0.09) 45%, rgba(255,255,255,0.03)),
        radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 26%);
      overflow: hidden;
      box-shadow: 0 16px 40px -30px rgba(158,123,255,0.55);
    }
    .voices-y2k-banner::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 45%, transparent 80%);
      mix-blend-mode: screen;
      opacity: 0.6;
      pointer-events: none;
    }
    .voices-y2k-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding: 5px 10px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      color: #F0E8FF;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .voices-y2k-title {
      margin: 0 0 6px;
      font-family: var(--font-display);
      font-size: var(--page-title-size);
      line-height: 1.04;
      letter-spacing: -0.04em;
      color: var(--page-title-color);
    }
    .voices-y2k-copy {
      margin: 0;
      max-width: 520px;
      color: var(--page-sub-color);
      font-size: var(--page-sub-size);
      line-height: 1.6;
    }
    .voices-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .voices-search-box,
    .voices-filter-button {
      min-height: 36px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      color: var(--text-faint);
      font-size: 11px;
    }
    .voices-search-box .icon,
    .voices-filter-button .icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .voices-filter-button {
      justify-content: center;
      color: var(--text);
      font-weight: 600;
      min-width: 78px;
    }
    .voices-mbti-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }
    .voices-mbti-chip {
      min-height: 30px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      transition: all var(--t-fast) var(--ease-out);
    }
    .voices-mbti-chip.active {
      color: white;
      border-color: rgba(158,123,255,0.26);
      background: linear-gradient(135deg, rgba(158,123,255,0.28), rgba(99,102,241,0.16));
      box-shadow: 0 10px 22px -18px rgba(158,123,255,0.72);
    }
    .voices-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .voice-card {
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.018));
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 12px;
      padding: 12px;
      transition: 0.18s;
      overflow: hidden;
    }
    .voice-card:hover {
      border-color: rgba(158,123,255,0.24);
      background: linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.022));
      transform: translateY(-2px);
    }
    .voice-cover {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.28), transparent 22%),
        radial-gradient(circle at 78% 20%, rgba(247,191,255,0.18), transparent 28%),
        radial-gradient(circle at 50% 70%, rgba(116,234,255,0.12), transparent 36%),
        var(--voice-cover-bg, linear-gradient(135deg, #ff87d4, #7a5cff 58%, #1b1734));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .voice-cover::before {
      content: "";
      position: absolute;
      inset: auto auto 10% -4%;
      width: 58%;
      height: 58%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), transparent 60%);
      filter: blur(14px);
      opacity: 0.9;
    }
    .voice-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8,8,12,0) 40%, rgba(8,8,12,0.62) 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 24px);
      pointer-events: none;
    }
    .voice-cover-top {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      z-index: 1;
    }
    .voice-archetype {
      min-height: 24px;
      padding: 0 9px;
      display: inline-flex;
      align-items: center;
      background: rgba(10,10,16,0.44);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(252,248,255,0.94);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
      backdrop-filter: blur(14px);
    }
    .voice-favorite {
      width: 24px;
      height: 24px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(10,10,16,0.44);
      color: rgba(255,255,255,0.88);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      backdrop-filter: blur(14px);
    }
    .voice-favorite svg {
      width: 10px;
      height: 10px;
      stroke-width: 1.8;
    }
    .voice-avatar {
      position: absolute;
      inset: 17% 16% auto auto;
      width: 44%;
      aspect-ratio: 1 / 1;
      border: 1px solid rgba(255,255,255,0.15);
      background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,0.32), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 72%);
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 52px;
      box-shadow: 0 22px 40px -26px rgba(0,0,0,0.8);
      z-index: 1;
    }
    .voice-avatar::before {
      content: attr(data-face);
      transform: translateY(4px);
      filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
    }
    .voice-cover-copy {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 1;
      display: grid;
      gap: 5px;
      max-width: 68%;
    }
    .voice-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      color: #fff;
    }
    .voice-lang {
      font-size: 10px;
      color: rgba(237,228,255,0.9);
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .voice-card-body {
      display: grid;
      gap: 12px;
    }
    .voice-desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.58;
      color: rgba(236,236,238,0.82);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 62px;
    }
    .voice-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .voice-tag {
      min-height: 26px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #F4ECFF;
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
    }
    .voice-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
    }
    .voice-meta-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .voice-meta-pill {
      min-height: 26px;
      padding: 0;
      border: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint);
    }
    .voice-gender-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: rgba(245,240,255,0.92);
      flex-shrink: 0;
    }
    .voice-gender-icon svg {
      width: 11px;
      height: 11px;
      stroke-width: 1.8;
    }
    .voice-favorite.active svg {
      fill: #ff6eb4;
      stroke: #ff6eb4;
    }

    /* ── Voice Library redesign ── */
    .vl-hero {
      margin-bottom: 0;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .voices-mbti-row {
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-top: none;
      padding: 10px 18px;
      border-radius: 0;
      margin-bottom: 0;
      gap: 6px;
    }
    .vl-filter-strip {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 18px 16px;
      background: rgba(255,255,255,0.018);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 var(--r-lg) var(--r-lg);
      margin-bottom: 24px;
    }
    .vl-filter-strip .voices-search-box {
      min-height: 44px;
      width: 100%;
      padding: 0 16px;
      font-size: 14px;
      border-radius: var(--r-md);
      border-color: rgba(255,255,255,0.1);
    }
    .vl-filter-strip .voices-search-box .icon {
      width: 16px;
      height: 16px;
    }
    .vl-chips-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .vl-divider {
      width: 1px;
      height: 18px;
      background: var(--border);
      flex-shrink: 0;
      margin: 0 2px;
    }
    .vl-chips-row .voices-count {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-faint);
    }
    .vl-el-section {
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }
    .vl-el-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .vl-el-title {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 4px;
      color: var(--text);
    }
    .vl-el-sub {
      font-size: 13px;
      color: var(--text-faint);
      margin: 0;
      max-width: 480px;
      line-height: 1.5;
    }
    .vl-el-refresh {
      padding: 6px 12px;
      font-size: 12px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-dim);
      border-radius: var(--r-sm);
      flex-shrink: 0;
      transition: all var(--t-fast);
    }
    .vl-el-refresh:hover {
      border-color: var(--border-hi);
      color: var(--text);
    }

    /* ============ PERSONAS PAGE ============ */
    .personas-page {
      display: grid;
      gap: 28px;
    }
    .personas-head {
      display: grid;
      gap: 10px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--border);
    }
    .personas-head h1 {
      margin: 0;
      font-size: var(--page-title-size);
      line-height: 1.04;
      letter-spacing: -0.05em;
      font-family: var(--font-display);
      color: var(--page-title-color);
    }
    .personas-head p {
      margin: 0;
      max-width: 860px;
      color: var(--page-sub-color);
      font-size: var(--page-sub-size);
      line-height: 1.6;
    }
    .personas-surface {
      border: 1px solid var(--border);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      box-shadow: 0 24px 44px -38px rgba(0,0,0,0.6);
    }
    .personas-genre-panel {
      display: grid;
      gap: 24px;
      padding: 30px 24px 30px;
      border-bottom: 1px solid var(--border);
    }
    .personas-genre-group {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .personas-genre-label {
      padding-top: 12px;
      color: var(--text-faint);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .personas-chip-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .personas-chip {
      min-height: 42px;
      padding: 0 18px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 42%),
        rgba(255,255,255,0.026);
      color: rgba(236,236,238,0.82);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.02em;
      transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    }
    .personas-chip.active {
      color: #fff;
      border-color: rgba(255,163,214,0.42);
      background:
        linear-gradient(135deg, rgba(255,129,210,0.26), rgba(125,92,255,0.24)),
        rgba(255,255,255,0.08);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 10px 24px -18px rgba(165,115,255,0.85);
      transform: translateY(-1px);
    }
    .personas-add-row {
      display: flex;
      justify-content: flex-start;
    }
    .personas-create-btn {
      min-height: 52px;
      padding: 0 22px;
      border: 1px solid rgba(167,118,255,0.42);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,129,210,0.16), rgba(125,92,255,0.16));
      color: #F7F1FF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .personas-search-panel {
      display: grid;
      gap: 20px;
      padding: 28px 24px 24px;
    }
    .personas-search-box {
      min-height: 74px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 22px;
      background: rgba(255,255,255,0.026);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 22px;
      color: var(--text-faint);
    }
    .personas-search-box svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
    .personas-search-input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 15px;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .personas-search-input::placeholder {
      color: rgba(232,232,234,0.46);
    }
    .personas-count {
      color: rgba(232,232,234,0.58);
      font-size: 15px;
      letter-spacing: -0.02em;
    }
    .personas-results {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .persona-item {
      min-height: 280px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background:
        radial-gradient(circle at top left, rgba(139,92,246,0.16), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
      padding: 18px;
      display: grid;
      gap: 14px;
      align-content: start;
    }
    .persona-item-cover {
      height: 150px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      background: var(--persona-grad, linear-gradient(135deg, #32235c, #8b5cf6));
      position: relative;
      overflow: hidden;
    }
    .persona-item-cover::before {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -38px;
      top: -62px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0.06) 38%, transparent 70%);
      mix-blend-mode: screen;
      opacity: 0.9;
    }
    .persona-item-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.28), transparent 22%),
        linear-gradient(180deg, transparent 35%, rgba(11,11,15,0.38));
      pointer-events: none;
    }
    .persona-item-cover-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.16;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 85%);
    }
    .persona-item-orb {
      position: absolute;
      left: 18px;
      top: 20px;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.72), rgba(255,255,255,0.18) 32%, rgba(255,255,255,0.02) 56%, transparent 72%),
        rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow:
        0 18px 30px -22px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.16);
    }
    .persona-item-orb::after {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.16);
      opacity: 0.8;
    }
    .persona-item-glyph {
      position: absolute;
      right: 18px;
      top: 18px;
      width: 72px;
      height: 72px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      background: rgba(11,11,15,0.18);
      display: grid;
      place-items: center;
      backdrop-filter: blur(4px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .persona-item-glyph span {
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.06em;
      color: rgba(255,255,255,0.92);
      text-transform: uppercase;
    }
    .persona-item-arc {
      position: absolute;
      left: 50%;
      bottom: -24px;
      width: 170px;
      height: 96px;
      transform: translateX(-50%);
      border: 1px solid rgba(255,255,255,0.18);
      border-bottom: 0;
      border-radius: 999px 999px 0 0;
      opacity: 0.65;
    }
    .persona-item-arc::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      top: 14px;
      height: 68px;
      border: 1px solid rgba(255,255,255,0.12);
      border-bottom: 0;
      border-radius: 999px 999px 0 0;
    }
    .persona-item-stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .persona-item-stars span {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(255,255,255,0.86);
      box-shadow: 0 0 10px rgba(255,255,255,0.45);
    }
    .persona-item-stars span:nth-child(1) { left: 122px; top: 28px; }
    .persona-item-stars span:nth-child(2) { right: 34px; top: 54px; width: 3px; height: 3px; opacity: 0.82; }
    .persona-item-stars span:nth-child(3) { left: 102px; top: 68px; width: 2px; height: 2px; opacity: 0.72; }
    .persona-item-stars span:nth-child(4) { right: 88px; top: 24px; width: 2px; height: 2px; opacity: 0.6; }
    .persona-item-kicker {
      position: absolute;
      left: 14px;
      bottom: 14px;
      z-index: 1;
      padding: 7px 12px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      background: rgba(11,11,15,0.4);
      color: white;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .persona-item-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .persona-item-title {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }
    .persona-item-sub {
      margin: 4px 0 0;
      color: var(--text-faint);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .persona-item-heart {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text-faint);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .persona-item-desc {
      margin: 0;
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.6;
      min-height: 62px;
    }
    .persona-item-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .persona-item-tag,
    .persona-item-meta {
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
    }
    .persona-item-tag {
      color: #F4ECFF;
      background: rgba(139,92,246,0.12);
      border-color: rgba(139,92,246,0.22);
    }
    .persona-item-meta-row {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .persona-item-meta-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .persona-item-action {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(139,92,246,0.4);
      border-radius: 999px;
      background: rgba(139,92,246,0.08);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
    }
    .personas-empty {
      min-height: 280px;
      border: 1px dashed rgba(255,255,255,0.12);
      border-radius: 24px;
      background: rgba(255,255,255,0.02);
      display: grid;
      place-items: center;
      padding: 32px;
      text-align: center;
    }
    .personas-empty-inner {
      max-width: 420px;
      display: grid;
      gap: 10px;
    }
    .personas-empty-title {
      font-size: 20px;
      font-family: var(--font-display);
      letter-spacing: -0.04em;
    }
    .personas-empty-copy {
      color: var(--text-dim);
      line-height: 1.7;
      font-size: 13px;
    }
    .personas-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5,5,8,0.72);
      backdrop-filter: blur(10px);
    }
    .personas-modal.open {
      display: flex;
    }
    .personas-dialog {
      width: min(760px, 100%);
      border: 1px solid var(--border);
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(18,18,24,0.98), rgba(12,12,16,0.98));
      box-shadow: 0 24px 80px rgba(0,0,0,0.44);
      overflow: hidden;
    }
    .personas-dialog-head,
    .personas-dialog-foot {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .personas-dialog-foot {
      border-top: 1px solid var(--border);
      border-bottom: 0;
    }
    .personas-dialog-head h3 {
      margin: 0;
      font-size: var(--page-title-size);
      font-family: var(--font-display);
      letter-spacing: -0.04em;
      color: var(--page-title-color);
    }
    .personas-close {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      display: grid;
      place-items: center;
      font-size: 18px;
    }
    .personas-dialog-body {
      padding: 20px;
      display: grid;
      gap: 16px;
    }
    .personas-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .personas-field {
      display: grid;
      gap: 8px;
    }
    .personas-field.full {
      grid-column: 1 / -1;
    }
    .personas-field label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dim);
    }
    .personas-input,
    .personas-select,
    .personas-textarea {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255,255,255,0.03);
      color: var(--text);
      padding: 0 14px;
      font: inherit;
      outline: none;
    }
    .personas-textarea {
      min-height: 112px;
      padding: 14px;
      resize: vertical;
    }
    .personas-help {
      color: var(--text-faint);
      font-size: 12px;
      line-height: 1.6;
    }
    .personas-dialog-foot {
      justify-content: flex-end;
    }
    .personas-btn {
      min-height: 44px;
      padding: 0 16px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
    }
    .personas-btn.primary {
      background: rgba(139,92,246,0.12);
      border-color: rgba(139,92,246,0.48);
      color: var(--accent);
    }
    .persona-library-link {
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .persona-library-link:hover {
      background: var(--bg-card-hover);
      color: var(--text);
    }

    .sfx-carousel { position: relative; margin-bottom: 24px; }
    .carousel-arrow {
      position: absolute; top: 50%;
      transform: translateY(-50%);
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      display: grid; place-items: center;
      color: var(--text-dim);
      z-index: 5;
      box-shadow: var(--shadow);
      transition: 0.15s;
      font-size: 18px; font-weight: 500;
    }
    .carousel-arrow:hover { background: var(--bg-card-hover); color: var(--text); }
    .carousel-arrow.left { left: -14px; }
    .carousel-arrow.right { right: -14px; }
    .category-cards {
      display: flex; gap: 12px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding: 2px 4px;
    }
    .category-cards::-webkit-scrollbar { display: none; }
    .cat-card {
      position: relative;
      flex: 0 0 200px; height: 170px;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: 0.2s;
    }
    .cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -6px rgba(0,0,0,0.5); }
    .cat-img { position: absolute; inset: 0; background-size: cover; }
    .cat-card[data-cat="booms"] .cat-img     { background: radial-gradient(circle at 40% 40%, #FCA5A5, #7C3AED 70%); }
    .cat-card[data-cat="braams"] .cat-img    { background: radial-gradient(circle at 40% 40%, #F97316, #3730A3 70%); }
    .cat-card[data-cat="brass"] .cat-img     { background: radial-gradient(circle at 40% 40%, #F472B6, #0F172A 70%); }
    .cat-card[data-cat="cymbals"] .cat-img   { background: radial-gradient(circle at 40% 40%, #FCD34D, #1E3A8A 70%); }
    .cat-card[data-cat="devices"] .cat-img   { background: radial-gradient(circle at 40% 40%, #F59E0B, #1E40AF 70%); }
    .cat-card[data-cat="electronic"] .cat-img{ background: radial-gradient(circle at 40% 40%, #06B6D4, #3B82F6 70%); }
    .cat-card[data-cat="footsteps"] .cat-img { background: radial-gradient(circle at 40% 40%, #A78BFA, #5B21B6 70%); }
    .cat-card[data-cat="impacts"] .cat-img   { background: radial-gradient(circle at 40% 40%, #FB7185, #9F1239 70%); }
    .cat-card[data-cat="nature"] .cat-img    { background: radial-gradient(circle at 40% 40%, #6EE7B7, #064E3B 70%); }
    .cat-card[data-cat="rain"] .cat-img      { background: radial-gradient(circle at 40% 40%, #93C5FD, #1E3A8A 70%); }
    .cat-card[data-cat="urban"] .cat-img     { background: radial-gradient(circle at 40% 40%, #CBD5E1, #334155 70%); }
    .cat-card[data-cat="whooshes"] .cat-img  { background: radial-gradient(circle at 40% 40%, #A5F3FC, #0E7490 70%); }
    .cat-card::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6));
      z-index: 1;
    }
    .cat-label {
      position: absolute;
      bottom: 14px; left: 14px;
      display: flex; align-items: center; gap: 8px;
      color: white;
      font-weight: 600; font-size: 14px;
      z-index: 2;
      letter-spacing: -0.01em;
    }
    .cat-label .ico {
      width: 16px; height: 16px;
      stroke: white; fill: none; stroke-width: 1.8;
    }

    .sfx-search-row {
      display: grid; grid-template-columns: 1fr 160px;
      gap: 10px; margin-bottom: 12px;
    }
    .sfx-search { position: relative; }
    .sfx-search svg {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--text-faint);
      width: 15px; height: 15px;
    }
    .sfx-search input {
      width: 100%; height: 42px;
      padding: 0 14px 0 40px;
      background: var(--bg-card);
      border: 1px solid var(--border); border-radius: 11px;
      color: var(--text); font-family: inherit; font-size: 13px;
      outline: none; transition: 0.15s;
    }
    .sfx-search input:focus {
      border-color: var(--accent);
      background: var(--bg-card-hover);
    }
    .sort-dropdown {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 14px; height: 42px;
      background: var(--bg-card);
      border: 1px solid var(--border); border-radius: 11px;
      font-size: 13px; color: var(--text);
      cursor: pointer;
    }
    .sort-dropdown:hover { background: var(--bg-card-hover); }

    .sfx-filters {
      display: flex; gap: 8px;
      margin-bottom: 24px;
    }
    .filter-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 14px;
      font-size: 12px; color: var(--text-dim);
      background: var(--bg-card);
      border: 1px solid var(--border); border-radius: 8px;
      transition: 0.15s;
    }
    .filter-pill:hover { background: var(--bg-card-hover); color: var(--text); }
    .filter-pill.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }

    .sfx-list-head {
      display: grid;
      grid-template-columns: 2.2fr 2.6fr 80px 100px 110px;
      gap: 16px;
      padding: 0 16px 10px;
      font-size: 12px; color: var(--text-faint);
      border-bottom: 1px solid var(--border);
    }
    .sfx-list {
      display: flex; flex-direction: column;
      margin-bottom: 160px;
    }
    .sfx-item {
      display: grid;
      grid-template-columns: 2.2fr 2.6fr 80px 100px 110px;
      gap: 16px;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      transition: 0.15s;
    }
    .sfx-item:hover { background: var(--bg-card); }
    .sfx-title-col { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .sfx-play {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg-card); color: var(--text-dim);
      display: grid; place-items: center;
      flex-shrink: 0; transition: 0.15s;
    }
    .sfx-play:hover { background: var(--accent); color: white; }
    .sfx-play.playing { background: var(--accent); color: white; }
    .sfx-info { min-width: 0; }
    .sfx-info .title {
      font-size: 14px; font-weight: 500; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .sfx-info .cat {
      font-size: 11px; color: var(--text-faint);
      display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
    }
    .sfx-info .cat .arrow { color: var(--border-strong); }
    .sfx-wave-col {
      display: flex; align-items: center;
      height: 32px; gap: 1px;
    }
    .sfx-wave-col .bar {
      flex: 1; min-width: 1px;
      background: var(--text-faint);
      opacity: 0.4;
      border-radius: 99px;
    }
    .sfx-item.playing .sfx-wave-col .bar {
      background: var(--accent); opacity: 1;
      animation: pulse-bar 0.8s infinite ease-in-out;
    }
    .sfx-duration, .sfx-downloads {
      font-size: 13px; color: var(--text-dim);
      font-variant-numeric: tabular-nums;
    }
    .sfx-actions {
      display: flex; gap: 2px; justify-content: flex-end;
    }
    .sfx-action-btn {
      width: 32px; height: 32px; border-radius: 7px;
      color: var(--text-faint);
      display: grid; place-items: center;
      transition: 0.15s;
    }
    .sfx-action-btn:hover { background: var(--bg-card-hover); color: var(--text); }
    .sfx-action-btn.favorited { color: #FCD34D; }
    .sfx-action-btn.favorited svg { fill: #FCD34D; }

    /* Floating prompt panel */
    /* ─── 하단 floating SFX 패널 — 완전 제거 ───
       모든 컨트롤은 페이지 상단 .sfx-quickgen 으로 통합됨.
       남은 .sfx-prompt / .prompt-* 클래스가 발견되면 즉시 숨김. */
    .sfx-prompt,
    #sfx-prompt,
    .prompt-suggestions,
    .prompt-suggestion,
    .prompt-input-row,
    .prompt-input,
    #prompt-input,
    .prompt-close,
    .prompt-controls,
    .prompt-ctrl,
    .prompt-credits,
    .prompt-send,
    #prompt-send {
      display: none !important;
    }

    /* ============ LIBRARY PAGE ============ */
    .lib-tabs {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }
    .lib-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      font-size: 13px; color: var(--text-dim);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: 0.15s;
    }
    .lib-tab:hover { background: var(--bg-card-hover); color: var(--text); }
    .lib-tab.active {
      background: var(--accent-soft); color: var(--text);
      border-color: var(--accent);
    }
    .lib-count {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 6px;
      background: rgba(255,255,255,0.08);
      color: var(--text-faint);
      font-weight: 600;
    }
    .lib-tab.active .lib-count {
      background: var(--accent); color: white;
    }

    /* ─── Decision Status 탭 (Phase 1) ─── */
    .dec-tabs {
      padding: 4px 0;
    }
    .dec-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      cursor: pointer;
      transition: 0.15s;
    }
    .dec-tab:hover { background: var(--bg-card-hover); color: var(--text); }
    .dec-tab.active { color: var(--text); border-color: var(--accent-strong, rgba(167,139,250,0.30)); background: var(--accent-soft); }
    .dec-tab[data-tone="green"].active { border-color: rgba(52,211,153,0.50); background: rgba(52,211,153,0.10); color: #6ee7b7; }
    .dec-tab[data-tone="yellow"].active { border-color: rgba(251,191,36,0.50); background: rgba(251,191,36,0.10); color: #fcd34d; }
    .dec-tab[data-tone="red"].active { border-color: rgba(248,113,113,0.50); background: rgba(248,113,113,0.10); color: #fca5a5; }
    .dec-tab[data-tone="dim"].active { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: var(--text-dim); }
    .dec-count {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      color: var(--text-faint);
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .dec-tab.active .dec-count { background: rgba(255,255,255,0.12); color: inherit; }

    /* 카드 배지 */
    .dec-badge {
      position: absolute;
      top: 8px; left: 8px;
      display: inline-flex; align-items: center; gap: 3px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      letter-spacing: 0.02em;
      z-index: 5;
    }
    .dec-badge.approved { background: rgba(52,211,153,0.20); color: #6ee7b7; border: 1px solid rgba(52,211,153,0.40); }
    .dec-badge.candidate { background: rgba(251,191,36,0.16); color: #fcd34d; border: 1px solid rgba(251,191,36,0.32); }
    .dec-badge.rejected { background: rgba(248,113,113,0.16); color: #fca5a5; border: 1px solid rgba(248,113,113,0.32); }
    .dec-badge.archived { background: rgba(255,255,255,0.05); color: var(--text-faint); border: 1px solid var(--border); }

    /* reject reason 칩 */
    .dec-reason-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px;
      font-size: 10px;
      color: #fca5a5;
      background: rgba(248,113,113,0.10);
      border: 1px solid rgba(248,113,113,0.24);
      border-radius: 999px;
      margin-top: 6px;
    }

    /* 카드 우상단 빠른 액션 (✓ ✕ 📦) */
    .dec-quick-actions {
      position: absolute;
      top: 8px; right: 8px;
      display: none;
      gap: 4px;
      z-index: 5;
    }
    .lib-card:hover .dec-quick-actions { display: inline-flex; }
    .dec-quick-btn {
      width: 24px; height: 24px;
      display: grid; place-items: center;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 12px;
      cursor: pointer;
      transition: 0.12s;
    }
    .dec-quick-btn:hover { transform: scale(1.08); }
    .dec-quick-btn.approve:hover { background: rgba(52,211,153,0.30); color: #6ee7b7; border-color: rgba(52,211,153,0.50); }
    .dec-quick-btn.reject:hover  { background: rgba(248,113,113,0.30); color: #fca5a5; border-color: rgba(248,113,113,0.50); }
    .dec-quick-btn.archive:hover { background: rgba(255,255,255,0.10); color: var(--text); }

    /* 카드에 position:relative 적용 보강 */
    .lib-card { position: relative; }

    /* ─── Memory Graph 추천 패널 (Phase 2) ─── */
    .memory-recos {
      animation: fadeIn 200ms ease;
    }
    .memory-recos-loading,
    .memory-recos-empty {
      padding: 10px 14px;
      background: var(--accent-soft);
      border: 1px dashed rgba(167,139,250,0.30);
      border-radius: var(--r-sm);
      font-size: 12px;
      color: var(--text-dim);
      text-align: center;
      line-height: 1.55;
    }
    .memory-recos-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 6px 8px;
      font-size: 11px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .memory-recos-list {
      display: flex; flex-direction: column; gap: 6px;
    }
    .memory-reco-card {
      display: flex; gap: 10px; align-items: stretch;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(167,139,250,0.06), var(--bg-card));
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s var(--ease-out, ease);
    }
    .memory-reco-card:hover {
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      transform: translateX(2px);
      background: linear-gradient(135deg, rgba(167,139,250,0.12), var(--bg-card-hover));
    }
    .memory-reco-sim {
      flex-shrink: 0;
      align-self: center;
      padding: 4px 9px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      font-weight: 800;
      font-size: 11px;
      border-radius: 999px;
      letter-spacing: 0;
      min-width: 44px;
      text-align: center;
      box-shadow: 0 2px 8px -2px rgba(167,139,250,0.50);
    }
    .memory-reco-body {
      flex: 1;
      min-width: 0;
      display: flex; flex-direction: column; gap: 4px;
    }
    .memory-reco-text {
      font-size: 12px;
      color: var(--text);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .memory-reco-meta {
      display: flex; flex-wrap: wrap; gap: 8px;
      font-size: 10px;
      color: var(--text-faint);
    }
    .memory-reco-meta span {
      display: inline-flex; gap: 3px; align-items: center;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: none; }
    }

    /* 추천 카드 — 모델 칩 + 액션 버튼 (Phase 2 보강) */
    .memory-recos-hint {
      font-size: 10px;
      color: var(--text-faint);
      font-weight: 400;
      letter-spacing: 0;
    }
    .memory-reco-model {
      display: inline-flex; gap: 3px; align-items: center;
      padding: 1px 7px;
      background: rgba(167,139,250,0.18);
      border: 1px solid rgba(167,139,250,0.32);
      border-radius: 999px;
      color: var(--accent);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.02em;
    }
    .memory-reco-actions {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-top: 8px;
    }
    .memory-reco-btn {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.15s var(--ease-out, ease);
      display: inline-flex; align-items: center; gap: 4px;
    }
    .memory-reco-btn:hover {
      background: var(--accent-soft);
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      color: var(--accent);
      transform: translateY(-1px);
    }
    .memory-reco-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border-color: transparent;
      color: white;
      box-shadow: 0 2px 6px -2px rgba(167,139,250,0.50);
    }
    .memory-reco-btn.primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px -2px rgba(167,139,250,0.60);
      color: white;
    }
    .memory-reco-btn.ghost {
      background: rgba(110,231,183,0.08);
      border-color: rgba(110,231,183,0.30);
      color: #6ee7b7;
    }
    .memory-reco-btn.ghost:hover {
      background: rgba(110,231,183,0.18);
      color: #6ee7b7;
    }

    /* ─── Memory Graph 페이지 ─── */
    .mg-stat-card {
      padding: 18px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      transition: all var(--t-fast) var(--ease-out);
    }
    .mg-stat-card:hover {
      border-color: var(--accent-strong, rgba(167,139,250,0.30));
      transform: translateY(-2px);
    }
    .mg-stat-label {
      font-size: 11px;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .mg-stat-value {
      font-size: 32px;
      font-weight: 800;
      color: var(--text);
      font-family: var(--font-display);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .mg-stat-sub {
      font-size: 11px;
      color: var(--text-faint);
      margin-top: 6px;
    }
    .mg-model-bar-row {
      display: grid;
      grid-template-columns: 130px 1fr 60px 60px;
      align-items: center;
      gap: 12px;
      padding: 8px 4px;
      font-size: 12px;
    }
    .mg-model-bar-row .mg-model-name {
      color: var(--text);
      font-weight: 600;
    }
    .mg-model-bar-track {
      height: 8px;
      background: var(--bg-elev);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }
    .mg-model-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width 0.5s var(--ease-out, ease);
    }
    .mg-model-count {
      color: var(--text);
      font-weight: 700;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .mg-model-pct {
      color: var(--text-faint);
      text-align: right;
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 768px) {
      .mg-actions-grid { grid-template-columns: 1fr !important; }
      .mg-model-bar-row { grid-template-columns: 90px 1fr 40px 40px; gap: 8px; }
    }

    /* ─── Reference Graph 시각화 ─── */
    .mg-graph-controls {
      display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    }
    .mg-graph-control {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; color: var(--text-dim);
      padding: 4px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .mg-graph-control input[type="range"] {
      width: 80px;
      accent-color: var(--accent);
    }
    .mg-graph-control input[type="checkbox"] { accent-color: var(--accent); }
    .mg-graph-val {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--accent);
      min-width: 32px;
      text-align: right;
    }
    #mg-graph-host svg { display: block; cursor: grab; }
    #mg-graph-host svg:active { cursor: grabbing; }
    .mg-node {
      cursor: pointer;
      transition: filter 0.15s, opacity 0.15s;
    }
    .mg-node:hover { filter: brightness(1.4) drop-shadow(0 0 8px var(--accent)); }
    .mg-node.dim { opacity: 0.18; }
    .mg-node.highlight { stroke: #fff; stroke-width: 2.5; }
    .mg-edge {
      stroke: rgba(167,139,250,0.20);
      stroke-width: 1;
      transition: stroke 0.15s, opacity 0.15s;
    }
    .mg-edge.highlight { stroke: var(--accent); stroke-width: 2; opacity: 1; }
    .mg-edge.dim { opacity: 0.04; }
    .mg-graph-tooltip {
      position: absolute;
      pointer-events: none;
      max-width: 280px;
      padding: 10px 12px;
      background: rgba(11,11,17,0.96);
      border: 1px solid var(--accent-strong, rgba(167,139,250,0.40));
      border-radius: 8px;
      font-size: 11px;
      color: var(--text);
      box-shadow: 0 8px 24px -4px rgba(0,0,0,0.6);
      z-index: 10;
      line-height: 1.5;
      transition: opacity 0.12s;
    }
    .mg-graph-tooltip .tt-text {
      color: var(--text);
      margin-bottom: 6px;
      font-weight: 500;
    }
    .mg-graph-tooltip .tt-meta {
      display: flex; flex-wrap: wrap; gap: 6px;
      font-size: 10px; color: var(--text-dim);
      padding-top: 6px;
      border-top: 1px solid var(--border);
    }
    .mg-graph-tooltip .tt-meta span {
      padding: 1px 6px;
      background: var(--accent-soft);
      border-radius: 999px;
    }
    .mg-legend-item {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.12s;
    }
    .mg-legend-item:hover { border-color: var(--accent-strong, rgba(167,139,250,0.30)); }
    .mg-legend-item.muted { opacity: 0.35; }
    .mg-legend-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ─── PromptKit 미리보기 (Shot 편집) ─── */
    .pk-preview { margin-top: 12px; }
    .pk-toggle-btn {
      width: 100%;
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      background: linear-gradient(135deg, rgba(167,139,250,0.05), var(--bg-card));
      border: 1px dashed var(--border-strong);
      border-radius: var(--r-sm);
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s var(--ease-out, ease);
      text-align: left;
    }
    .pk-toggle-btn:hover {
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      color: var(--accent);
      background: linear-gradient(135deg, rgba(167,139,250,0.10), var(--bg-card-hover));
    }
    .pk-toggle-btn.open #pk-toggle-ico { transform: rotate(90deg); }
    #pk-toggle-ico { transition: transform 0.18s var(--ease-out, ease); flex-shrink: 0; }
    .pk-toggle-hint {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-faint);
      font-weight: 400;
    }
    .pk-preview-body {
      margin-top: 10px;
      padding: 14px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      animation: fadeIn 220ms ease;
    }
    .pk-preview-status {
      font-size: 11px;
      color: var(--text-faint);
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px dashed var(--border);
    }
    .pk-preview-status strong { color: var(--accent); font-weight: 700; }
    .pk-preview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }
    .pk-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px;
      display: flex; flex-direction: column;
      transition: all 0.15s var(--ease-out, ease);
    }
    .pk-card:hover { border-color: var(--accent-strong, rgba(167,139,250,0.30)); }
    .pk-card-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }
    .pk-card-model {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .pk-card-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
    }
    .pk-card-actions { display: flex; gap: 4px; }
    .pk-card-btn {
      width: 26px; height: 24px;
      display: grid; place-items: center;
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      color: var(--text-faint);
      cursor: pointer;
      font-size: 11px;
      transition: all 0.12s;
    }
    .pk-card-btn:hover {
      color: var(--accent);
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      background: var(--accent-soft);
    }
    .pk-card-prompt {
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.5;
      color: var(--text);
      background: var(--bg);
      padding: 8px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      max-height: 130px;
      overflow-y: auto;
      word-break: break-word;
      white-space: pre-wrap;
    }
    .pk-card-neg {
      margin-top: 6px;
      padding: 6px 10px;
      background: rgba(248,113,113,0.06);
      border: 1px solid rgba(248,113,113,0.18);
      border-radius: 5px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: #fca5a5;
    }
    .pk-card-neg::before {
      content: '🚫 negative · ';
      color: var(--text-faint);
      font-family: var(--font-sans);
      font-weight: 600;
      margin-right: 4px;
    }
    .pk-card-params {
      margin-top: 8px;
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .pk-param-chip {
      padding: 2px 7px;
      font-size: 10px;
      font-family: var(--font-mono);
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 999px;
      color: var(--accent);
    }
    .pk-card-error {
      padding: 8px 10px;
      font-size: 11px;
      color: var(--red);
      background: rgba(248,113,113,0.06);
      border-radius: 5px;
    }

    /* ─── Shot Detail (Logbook) — 자매 페이지 ─── */
    #page-shot-detail {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px clamp(20px, 4vw, 48px) 120px;
      font-family: var(--font-sans);
    }
    .sd-crumb {
      display: flex; align-items: center; gap: 12px;
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 28px;
    }
    .sd-back {
      color: var(--text-dim);
      transition: color 0.12s;
    }
    .sd-back:hover { color: var(--accent); }
    .sd-crumb-trail {
      color: var(--text-dim);
      letter-spacing: 0.02em;
    }
    .sd-header {
      padding: 36px 0 48px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 48px;
    }
    .sd-meta-tags {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-bottom: 22px;
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .sd-meta-tags .sd-tag {
      padding: 3px 9px;
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 999px;
      color: var(--accent);
      font-weight: 700;
    }
    .sd-intent-text {
      font-family: var(--font-display);
      font-size: clamp(22px, 3.4vw, 32px);
      font-weight: 500;
      line-height: 1.45;
      color: var(--text);
      letter-spacing: -0.01em;
      outline: none;
      min-height: 1.45em;
      transition: opacity 0.15s;
    }
    .sd-intent-text:empty::before {
      content: attr(data-placeholder);
      color: var(--text-faint);
      font-style: italic;
      opacity: 0.7;
    }
    .sd-intent-text:focus { outline: none; }
    .sd-intent-text:focus::before { opacity: 0.4; }
    .sd-intent-foot {
      margin-top: 14px;
      font-size: 11px;
      color: var(--text-faint);
      font-style: italic;
      letter-spacing: 0.02em;
    }
    .sd-body {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 56px;
      align-items: start;
    }
    @media (max-width: 980px) {
      .sd-body { grid-template-columns: 1fr; gap: 36px; }
    }

    /* ─── Timeline (main) ─── */
    .sd-main { min-width: 0; }
    .sd-timeline-head {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .sd-timeline-search {
      flex: 1; min-width: 180px;
      position: relative;
      display: flex; align-items: center;
    }
    .sd-timeline-search svg {
      position: absolute; left: 12px;
      color: var(--text-faint);
      pointer-events: none;
    }
    .sd-timeline-search input {
      width: 100%;
      height: 34px;
      padding: 0 12px 0 34px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-size: 12px;
      outline: none;
      transition: border-color 0.12s;
    }
    .sd-timeline-search input:focus { border-color: var(--accent); }
    .sd-filter-tabs {
      display: flex; gap: 4px;
    }
    .sd-filter {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      color: var(--text-faint);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: all 0.12s;
    }
    .sd-filter:hover { color: var(--text); }
    .sd-filter.active {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.30);
      color: var(--accent);
    }

    .sd-add-note {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      background: linear-gradient(135deg, rgba(167,139,250,0.04), var(--bg-card));
      border: 1px dashed var(--border-strong);
      border-radius: 12px;
      margin-bottom: 32px;
      transition: border-color 0.15s;
    }
    .sd-add-note:focus-within { border-color: var(--accent-strong, rgba(167,139,250,0.40)); }
    .sd-quill {
      font-size: 16px;
      color: var(--accent);
      flex-shrink: 0;
    }
    .sd-add-note input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 13px;
      font-family: var(--font-sans);
      outline: none;
    }
    .sd-add-note input::placeholder { color: var(--text-faint); font-style: italic; }

    /* ─── Timeline 본문 ─── */
    .sd-timeline {
      position: relative;
    }
    .sd-day-group {
      margin-bottom: 36px;
    }
    .sd-day-head {
      display: flex; align-items: baseline; gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 8px;
    }
    .sd-day-label {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
    }
    .sd-day-rule {
      flex: 1; height: 1px;
      background: var(--border);
    }
    .sd-day-relative {
      font-size: 11px;
      color: var(--text-faint);
      font-style: italic;
    }
    .sd-event {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 18px;
      padding: 8px 0;
      align-items: flex-start;
      line-height: 1.65;
    }
    .sd-event-time {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-faint);
      padding-top: 3px;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
    }
    .sd-event-body {
      font-size: 14px;
      color: var(--text-dim);
      letter-spacing: -0.005em;
    }
    .sd-event-body strong { color: var(--text); font-weight: 600; }
    .sd-event-body em.model {
      font-style: normal;
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--accent);
      padding: 1px 6px;
      background: var(--accent-soft);
      border-radius: 4px;
      letter-spacing: 0;
    }
    /* note는 italic serif 인용 */
    .sd-event.note .sd-event-body {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      padding-left: 14px;
      border-left: 2px solid var(--accent);
    }
    .sd-event.note .sd-event-body::before {
      content: '"';
      font-size: 28px;
      color: var(--accent);
      vertical-align: -8px;
      margin-right: 4px;
      opacity: 0.6;
    }
    .sd-event.note .sd-event-body::after {
      content: '"';
      font-size: 28px;
      color: var(--accent);
      vertical-align: -8px;
      margin-left: 4px;
      opacity: 0.6;
    }
    /* reject reason도 인용 처리 */
    .sd-quote {
      font-family: var(--font-display);
      font-style: italic;
      color: var(--text);
    }
    .sd-quote::before { content: '"'; opacity: 0.7; margin-right: 1px; }
    .sd-quote::after  { content: '"'; opacity: 0.7; margin-left: 1px; }
    /* 결정 이벤트 강조 — 좌측 닷 */
    .sd-event.decision::before {
      content: '';
      position: relative;
      grid-column: 1 / 2;
      width: 6px; height: 6px;
      background: var(--green);
      border-radius: 50%;
      margin-top: 9px;
      margin-left: -10px;
      grid-row: 1;
    }
    .sd-event.reject .sd-event-body { color: var(--text-dim); }
    /* 노트 삭제 버튼 */
    .sd-note-actions {
      display: inline-flex; gap: 6px;
      margin-left: 8px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .sd-event.note:hover .sd-note-actions { opacity: 1; }
    .sd-note-del {
      background: transparent;
      border: none;
      color: var(--text-faint);
      font-size: 11px;
      cursor: pointer;
      padding: 0 4px;
    }
    .sd-note-del:hover { color: var(--red); }

    .sd-empty {
      padding: 60px 20px;
      text-align: center;
      color: var(--text-faint);
      font-size: 13px;
      font-style: italic;
    }

    /* ─── Right Sidebar (Bibles · Current · References) ─── */
    .sd-aside {
      display: flex; flex-direction: column; gap: 28px;
    }
    @media (max-width: 980px) {
      .sd-aside { flex-direction: row; flex-wrap: wrap; gap: 14px; }
      .sd-side-block { flex: 1; min-width: 240px; }
    }
    .sd-side-block {
      padding: 18px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
    }
    .sd-side-h {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
      margin-bottom: 4px;
    }
    .sd-side-sub {
      font-size: 11px;
      color: var(--text-faint);
      font-style: italic;
      margin-bottom: 14px;
    }
    .sd-bible-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 8px 0;
      border-top: 1px solid var(--border);
      font-size: 12px;
    }
    .sd-bible-row:first-of-type { border-top: 0; padding-top: 0; }
    .sd-bible-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      margin-top: 4px; flex-shrink: 0;
    }
    .sd-bible-body { flex: 1; min-width: 0; }
    .sd-bible-name {
      color: var(--text);
      font-weight: 600;
      font-size: 12.5px;
    }
    .sd-bible-meta {
      color: var(--text-faint);
      font-size: 10.5px;
      margin-top: 2px;
    }
    .sd-bible-empty {
      font-size: 11px;
      color: var(--text-faint);
      font-style: italic;
      padding: 4px 0;
    }
    .sd-current-thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--bg-elev);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 12px;
      position: relative;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-faint);
      font-size: 11px;
    }
    .sd-current-thumb video, .sd-current-thumb img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .sd-current-meta {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.7;
    }
    .sd-current-meta strong { color: var(--text); }
    .sd-cta {
      display: block;
      margin-top: 12px;
      padding: 9px 14px;
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.30);
      border-radius: 10px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      transition: all 0.12s;
    }
    .sd-cta:hover {
      background: var(--accent);
      color: var(--bg);
    }
    .sd-ref-card {
      padding: 8px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--text-dim);
    }
    .sd-ref-card:last-child { margin-bottom: 0; }
    .sd-ref-title { color: var(--text); font-weight: 600; margin-bottom: 2px; }
    .sd-ref-meta { font-size: 10.5px; color: var(--text-faint); }

    .lib-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 40px;
    }
    .lib-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      transition: 0.15s;
      cursor: pointer;
      display: flex; flex-direction: column;
      gap: 10px;
    }
    .lib-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-strong);
      transform: translateY(-2px);
    }
    .lib-card-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
    }
    .lib-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 600;
      padding: 3px 8px; border-radius: 99px;
      letter-spacing: 0.02em;
    }
    .lib-badge.voice { background: rgba(139,92,246,0.15); color: #C4B5FD; }
    .lib-badge.music { background: rgba(99,102,241,0.15); color: #A5B4FC; }
    .lib-badge.tts   { background: rgba(16,185,129,0.15); color: #6EE7B7; }
    .lib-badge.sfx   { background: rgba(245,158,11,0.15); color: #FCD34D; }
    .lib-badge .ico {
      width: 10px; height: 10px;
      stroke: currentColor; fill: none; stroke-width: 1.8;
    }
    .lib-date {
      font-size: 10px; color: var(--text-faint);
    }
    .lib-thumb {
      height: 48px;
      background: rgba(255,255,255,0.03);
      border-radius: 8px;
      display: flex; align-items: center; gap: 1px;
      padding: 6px 10px;
    }
    .lib-thumb span {
      flex: 1; min-width: 1px;
      background: var(--text-faint);
      border-radius: 99px;
      opacity: 0.5;
    }
    .lib-card.voice .lib-thumb span { background: var(--accent); opacity: 0.7; }
    .lib-card.music .lib-thumb span { background: var(--accent-2); opacity: 0.7; }
    .lib-card.tts .lib-thumb span { background: var(--success); opacity: 0.7; }
    .lib-card.sfx .lib-thumb span { background: #FCD34D; opacity: 0.7; }
    .lib-card-title {
      font-size: 13px; font-weight: 500;
      color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lib-card-sub {
      font-size: 11px; color: var(--text-faint);
      display: flex; gap: 8px; align-items: center;
    }
    .lib-card-sub .sep { color: var(--border-strong); }
    .lib-card-actions {
      display: flex; gap: 4px;
      margin-top: 4px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .lib-card-actions button {
      flex: 1;
      height: 28px;
      border-radius: 6px;
      font-size: 11px;
      color: var(--text-dim);
      background: transparent;
      transition: 0.15s;
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    }
    .lib-card-actions button:hover {
      background: rgba(255,255,255,0.05); color: var(--text);
    }

    .lib-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 20px;
      color: var(--text-faint);
      font-size: 13px;
    }
    .lib-empty .big {
      font-size: 36px; opacity: 0.3;
      margin-bottom: 12px;
    }

    /* ── Library 시나리오 · 샷리스트 텍스트 카드 ── */
    .lib-text-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 14px;
      margin-top: 4px;
    }
    .lib-text-card {
      border: 1px solid var(--border);
      background: var(--bg-card);
      border-radius: var(--r-lg);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color var(--t-fast), box-shadow var(--t-fast);
    }
    .lib-text-card:hover {
      border-color: rgba(158,123,255,0.28);
      box-shadow: 0 4px 16px -8px rgba(158,123,255,0.18);
    }
    .lib-text-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .lib-text-badge {
      padding: 3px 8px;
      border-radius: var(--r-pill);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .lib-text-badge.story  { background: rgba(167,139,250,0.15); color: var(--accent); }
    .lib-text-badge.script { background: rgba(59,130,246,0.15);  color: #60a5fa; }
    .lib-text-badge.shotlist-badge { background: rgba(34,197,94,0.12); color: #4ade80; }
    .lib-text-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
    }
    .lib-text-card-preview {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.7;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .lib-text-card-preview.expanded {
      -webkit-line-clamp: unset;
      overflow: visible;
      white-space: pre-wrap;
    }
    .lib-text-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .lib-text-pill {
      padding: 2px 8px;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 10px;
      color: var(--text-faint);
    }
    .lib-text-card-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
      padding-top: 4px;
    }
    .lib-text-btn {
      flex: 1;
      padding: 6px 0;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text-dim);
      border-radius: var(--r-sm);
      transition: all var(--t-fast);
      cursor: pointer;
    }
    .lib-text-btn:hover { border-color: rgba(167,139,250,0.4); color: var(--accent); }
    .lib-text-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .lib-text-btn.primary:hover { opacity: 0.88; }
    .lib-text-btn.danger { border-color: rgba(239,68,68,0.3); color: #f87171; }
    .lib-text-btn.danger:hover { background: rgba(239,68,68,0.08); }
    #lib-scenario-panel .lib-empty,
    #lib-shotlist-panel .lib-empty {
      padding: 60px 20px;
      text-align: center;
      color: var(--text-faint);
      font-size: 13px;
    }

    /* ============ PRESS FLASH (누르면 흰색) ============ */
    .press-flash {
      color: #FFFFFF !important;
      border-color: #FFFFFF !important;
      background: rgba(255,255,255,0.08) !important;
      transition: all 0.08s !important;
    }
    .press-flash svg,
    .press-flash .icon { color: #FFFFFF !important; }
    button:active,
    a:active,
    .nav-item:active,
    .cat-card:active,
    .sfx-item:active,
    .lib-card:active {
      outline: 1px solid rgba(255,255,255,0.55);
      outline-offset: 1px;
    }

    @media (max-width: 880px) {
      /* 좁은 화면에서도 사이드바는 토글로 유지. 닫힌 상태가 기본. */
      .layout { grid-template-columns: 84px 1fr; }
      .layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
      .main { padding: 24px 20px 60px; }
      .controls { grid-template-columns: 1fr; }
      .history-meta { min-width: 0; }
      .voices-page-head,
      .voices-layout { grid-template-columns: 1fr; }
      .voices-page-head { display: grid; }
      .voices-filter-bar { grid-template-columns: 1fr 1fr; }
      .voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .personas-genre-group { grid-template-columns: 1fr; gap: 12px; }
      .personas-genre-label { padding-top: 0; }
      .music-shell { grid-template-columns: 1fr; }
      .music-page-head {
        flex-direction: column;
      }
      .music-create-tabs.music-topbar {
        width: 100%;
        min-width: 0;
      }
      .music-left { border-right: 0; border-bottom: 1px solid var(--border); }
      .music-slider-wrap { width: 100%; justify-content: space-between; }
      .music-option-card { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 620px) {
      /* 아주 좁으면 사이드바가 오버레이 모드 */
      .layout { grid-template-columns: 0 1fr; }
      .sidebar {
        position: fixed; left: 0; top: 56px;
        z-index: 60; width: 84px;
        background: var(--bg);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        padding: 14px 8px; opacity: 1;
      }
      body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0,0,0,0.4);
      }
      body.sidebar-open::after {
        content: "";
        position: fixed; inset: 56px 0 0 0;
        background: rgba(0,0,0,0.4);
        z-index: 55;
      }
      .voices-gender-grid,
      .voices-search-row,
      .voices-grid {
        grid-template-columns: 1fr;
      }
      .voices-filter-bar { grid-template-columns: 1fr; }
      .voices-mbti-row {
        gap: 6px;
      }
      .voices-tabs { width: 100%; justify-content: space-between; }
      .voices-tab { flex: 1; justify-content: center; }
      .personas-head h1 { font-size: var(--page-title-size); }
      .personas-head p { font-size: var(--page-sub-size); }
      .personas-chip-wrap { gap: 10px; }
      .personas-chip,
      .personas-create-btn { min-height: 48px; padding: 0 18px; font-size: 14px; }
      .personas-search-box { min-height: 74px; padding: 0 18px; }
      .personas-search-input,
      .personas-count { font-size: 14px; }
      .personas-results,
      .personas-field-grid { grid-template-columns: 1fr; }
      .notice-grid { grid-template-columns: 1fr; }
      .preview-grid { grid-template-columns: 1fr; }
      .onboarding-body { padding: 22px 16px 18px; }
      .onboarding-body h3 { font-size: 22px; }
      .music-create-tabs { grid-template-columns: 1fr; }
      .music-create-tab { border-right: 0; border-bottom: 1px solid var(--border); }
      .music-item { grid-template-columns: 80px minmax(0,1fr); }
      .music-more-btn { display: none; }
      .music-filter-row { flex-wrap: wrap; }
      .music-tick-slider { gap: 10px; }
      .music-tick-slider span { height: 24px; }
      .music-tick-slider span.active { height: 48px; }
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ v2 DESIGN SYSTEM — OVERRIDES & ADDITIONS
       위 모든 규칙보다 뒤에 정의되어 우선 적용. JS 바인딩 보존.
       ════════════════════════════════════════════════════════════ */

    /* ───── v2 Reset ───── */
    *:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
      box-shadow: var(--shadow-focus);
    }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.06);
      border-radius: 4px;
      border: 0;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(167,139,250,0.30);
    }

    body {
      letter-spacing: -0.011em;
      font-size: var(--fs-base);
      line-height: var(--lh-normal);
    }

    /* ───── v2 Topbar (refined) ───── */
    .topbar {
      height: var(--topbar-h);
      padding: 0 var(--s-5);
      background: linear-gradient(180deg, rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.78) 100%);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      border-bottom: 1px solid var(--border);
    }
    .topbar::after { display: none; }

    /* ───── v2 Layout (sidebar + main) — fullscreen wide ───── */
    .layout {
      padding-top: var(--topbar-h);
      grid-template-columns: var(--sidebar-w) 1fr;
      max-width: none;     /* fullscreen: 양쪽 여백 없음 */
    }
    .layout.sidebar-collapsed {
      grid-template-columns: 0 1fr;
    }

    /* ───── v2 Sidebar (cleaner) ───── */
    .sidebar {
      padding: var(--s-4) var(--s-3);
      gap: var(--s-1);
      background: linear-gradient(180deg, rgba(11,11,17,0.55), rgba(8,8,12,0.10));
      border-right: 1px solid var(--border);
      top: var(--topbar-h);
      height: calc(100vh - var(--topbar-h));
    }
    .sidebar > .nav-divider {
      margin: var(--s-3) var(--s-3);
      background: var(--border);
      opacity: 0.6;
    }
    .nav-item {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--s-3);
      padding: 10px var(--s-3);
      font-size: var(--fs-sm);
      font-weight: 500;
      letter-spacing: -0.005em;
      border-radius: var(--r-sm);
      color: var(--text-faint);
      transition: background var(--t-fast) var(--ease-smooth),
                  color var(--t-fast) var(--ease-smooth),
                  transform var(--t-fast) var(--ease-spring);
    }
    .nav-item .icon {
      width: 18px; height: 18px;
      stroke-width: 1.7;
      flex-shrink: 0;
    }
    .nav-item:hover {
      background: var(--bg-card-hover);
      color: var(--text);
      transform: none;
    }
    .nav-item.active {
      background: var(--accent-soft);
      color: var(--accent);
    }
    .nav-item.active::before { display: none; }
    .nav-item.active::after {
      content: "";
      position: absolute;
      left: 0;
      top: 8px; bottom: 8px;
      width: 2px;
      border-radius: 2px;
      background: var(--accent);
    }
    .nav-upgrade {
      margin: var(--s-3) var(--s-2) 0;
      padding: var(--s-3) 0;
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.25);
      box-shadow: none;
      line-height: 1.4;
    }
    .nav-upgrade:hover {
      background: rgba(167,139,250,0.18);
      border-color: rgba(167,139,250,0.40);
      transform: translateY(-1px);
    }

    /* ───── v2 Main column — wide on fullscreen, comfortable on standard ───── */
    .main {
      padding: var(--s-7) var(--main-pad) var(--s-9);
      max-width: var(--container-w);
      margin: 0 auto;
      width: 100%;
    }
    /* 페이지별 적정 max-width — 콘텐츠 성격에 맞게 */
    /* Extract: 글 위주 → 980px */
    /* Studio: 에디터 위주 → 980px */
    /* Voices/Library/History/Personas/Music: 그리드 → wide */
    /* Sync: 자체 그리드 (full width 사용) */
    .main:has(#page-extract.active),
    .main:has(#page-studio.active),
    .main:has(#page-clean.active) {
      max-width: var(--container-narrow);
    }
    .main:has(#page-voices.active),
    .main:has(#page-personas.active),
    .main:has(#page-library.active),
    .main:has(#page-history.active),
    .main:has(#page-effects.active),
    .main:has(#page-music.active) {
      max-width: var(--container-w);
    }
    .main:has(#page-sync.active) {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
    }

    /* ───── v2 Page header ───── */
    .page-head {
      margin-bottom: var(--s-6);
      padding-bottom: var(--s-4);
      border-bottom: 1px solid var(--border);
    }
    .page-head h1 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.4vw, var(--fs-2xl));
      font-weight: 600;
      letter-spacing: -0.032em;
      line-height: var(--lh-tight);
    }
    .page-head p {
      margin-top: var(--s-3);
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
      max-width: 56ch;
    }

    /* ───── v2 Dropzone (refined) ───── */
    .dropzone {
      border: 1.5px dashed var(--border-strong);
      border-radius: var(--r-xl);
      padding: var(--s-8) var(--s-5);
      background:
        radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.05), transparent 70%),
        var(--bg-card);
      transition: all var(--t-base) var(--ease-smooth);
    }
    .dropzone:hover, .dropzone.dragging {
      border-color: var(--accent);
      transform: translateY(-1px);
      background:
        radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.10), transparent 70%),
        var(--bg-card-hover);
    }
    .drop-icon-wrap {
      width: 52px; height: 52px;
      margin: 0 auto var(--s-4);
      border-radius: var(--r-lg);
    }
    .drop-title {
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: -0.018em;
      margin-bottom: var(--s-1);
    }
    .drop-sub {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      margin-bottom: var(--s-5);
    }
    .drop-btn {
      padding: 10px 22px;
      background: var(--text);
      color: var(--bg);
      border-radius: var(--r-sm);
      font-weight: 600;
      font-size: var(--fs-sm);
      transition: transform var(--t-fast) var(--ease-spring),
                  background var(--t-fast) var(--ease-smooth);
    }
    .drop-btn:hover {
      background: white;
      transform: translateY(-1px) scale(1.01);
    }
    .drop-btn:active {
      transform: translateY(0) scale(0.98);
    }

    /* ───── v2 URL form ───── */
    .url-input {
      height: 48px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      font-size: var(--fs-base);
      background: var(--bg-card);
    }
    .url-input:focus {
      border-color: var(--accent);
      box-shadow: var(--shadow-focus);
    }
    .url-submit {
      height: 48px;
      padding: 0 var(--s-5);
      border-radius: var(--r-md);
      font-weight: 600;
      font-size: var(--fs-sm);
      transition: transform var(--t-fast) var(--ease-spring),
                  background var(--t-fast) var(--ease-smooth);
    }
    .url-submit:hover { transform: translateY(-1px); }
    .url-submit:active { transform: translateY(0) scale(0.98); }

    /* ───── v2 Button system ───── */
    button, .btn {
      transition: transform var(--t-fast) var(--ease-spring),
                  background var(--t-fast) var(--ease-smooth),
                  border-color var(--t-fast) var(--ease-smooth),
                  color var(--t-fast) var(--ease-smooth);
    }

    /* ───── v2 Stage card (Result page) ───── */
    .stage {
      border-radius: var(--r-xl);
      border: 1px solid var(--border);
      background: var(--bg-card);
      overflow: hidden;
      transition: border-color var(--t-base) var(--ease-smooth);
    }
    .stage:hover {
      border-color: var(--border-strong);
    }
    .stage-header {
      padding: var(--s-4) var(--s-5);
      border-bottom: 1px solid var(--border);
      gap: var(--s-3);
    }
    .stage-num {
      width: 28px; height: 28px;
      border-radius: 50%;
      font-size: var(--fs-sm);
      font-weight: 600;
    }
    .stage-num.done {
      background: rgba(52,211,153,0.14);
      color: var(--success);
    }
    .stage-title {
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: -0.015em;
    }
    .stage-sub {
      font-size: var(--fs-xs);
      color: var(--text-faint);
      margin-left: auto;
    }
    .stage-body { padding: var(--s-5); }

    /* ───── v2 Next CTA (more refined) ───── */
    .next-btn {
      border-radius: var(--r-xl);
      border: 1px solid var(--border-strong);
      background: var(--bg-card);
      padding: var(--s-4) var(--s-5);
      transition: all var(--t-base) var(--ease-smooth);
    }
    .next-btn:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
    .next-num {
      font-family: var(--font-mono);
      color: var(--text-faint);
      font-size: var(--fs-sm);
      letter-spacing: 0.05em;
    }
    .next-title {
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: -0.018em;
    }
    .next-desc {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      margin-top: 2px;
    }
    .next-arrow {
      font-size: var(--fs-lg);
      color: var(--text-faint);
      transition: transform var(--t-base) var(--ease-spring),
                  color var(--t-base) var(--ease-smooth);
    }
    .next-btn:hover .next-arrow {
      color: var(--accent);
      transform: translateX(4px);
    }

    /* ───── v2 Action row (다운로드 / 복사 등) ───── */
    .stage-actions {
      gap: var(--s-2);
      flex-wrap: wrap;
      margin-top: var(--s-4);
    }
    .stage-actions button,
    .stage-actions a {
      padding: 9px 14px;
      border-radius: var(--r-sm);
      font-size: var(--fs-sm);
      font-weight: 500;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text);
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .stage-actions button:hover,
    .stage-actions a:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-strong);
    }
    .stage-actions .primary {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .stage-actions .primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      transform: translateY(-1px);
    }

    /* ───── v2 Result head ───── */
    .result-head {
      padding-bottom: var(--s-5);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--s-5);
      gap: var(--s-3);
      align-items: center;
    }
    .result-head h2 {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 600;
      letter-spacing: -0.025em;
      margin: 0;
    }
    .success-badge {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(52,211,153,0.14);
      color: var(--success);
      box-shadow: 0 0 0 4px rgba(52,211,153,0.04);
    }
    .fname {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--text-faint);
      padding: 4px 8px;
      border-radius: var(--r-xs);
      background: var(--bg-card);
      border: 1px solid var(--border);
    }

    /* ───── v2 BA toggle (음성/음악/원본) — pill segmented ───── */
    .ba-toggle {
      display: inline-flex;
      padding: 3px;
      gap: 0;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      margin-top: var(--s-4);
    }
    .ba-toggle button {
      padding: 7px 14px;
      border-radius: var(--r-pill);
      font-size: var(--fs-sm);
      font-weight: 500;
      color: var(--text-faint);
      transition: all var(--t-fast) var(--ease-smooth);
      gap: 6px;
      display: inline-flex;
      align-items: center;
    }
    .ba-toggle button:hover:not(:disabled) {
      color: var(--text-dim);
    }
    .ba-toggle button.active {
      background: var(--bg-elev);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .ba-toggle button:disabled {
      opacity: 0.30 !important;
      cursor: not-allowed;
    }

    /* ───── v2 Selection bar ───── */
    .selection-bar {
      margin-top: var(--s-4);
      padding: var(--s-3) var(--s-4);
      border-radius: var(--r-md);
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.18);
    }

    /* ───── v2 Segments (transcript) ───── */
    .segments {
      max-height: 380px;
      overflow-y: auto;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: var(--bg-1);
    }
    .segment {
      display: flex;
      gap: var(--s-3);
      padding: 10px var(--s-4);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background var(--t-fast) var(--ease-smooth);
    }
    .segment:last-child { border-bottom: 0; }
    .segment:hover {
      background: var(--bg-card-hover);
    }
    .seg-time {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--text-faint);
      min-width: 48px;
      flex-shrink: 0;
      padding-top: 2px;
    }
    .seg-text {
      font-size: var(--fs-sm);
      line-height: var(--lh-relaxed);
      color: var(--text);
    }

    /* ───── v2 Summary ───── */
    .summary-section {
      padding: var(--s-4) 0;
      border-bottom: 1px solid var(--border);
    }
    .summary-section:last-of-type { border-bottom: 0; }
    .summary-section h4 {
      margin: 0 0 var(--s-3);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .summary-section p,
    .summary-section li {
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
      color: var(--text);
    }
    .summary-section ul {
      margin: 0;
      padding-left: var(--s-5);
    }
    .summary-section li { margin-bottom: var(--s-2); }
    .summary-section li::marker { color: var(--text-whisper); }
    #sum-tldr {
      font-size: var(--fs-md);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: var(--lh-snug);
      color: var(--text);
    }
    .keywords {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-2);
    }
    .keywords .kw {
      padding: 4px 10px;
      border-radius: var(--r-pill);
      background: var(--accent-soft);
      color: var(--accent);
      font-size: var(--fs-xs);
      font-weight: 500;
      border: 1px solid rgba(167,139,250,0.18);
    }

    /* ───── v2 Processing screen ───── */
    .processing {
      padding: var(--s-7) var(--s-5);
      gap: var(--s-5);
    }
    .ring .pct {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 600;
      letter-spacing: -0.025em;
    }
    .proc-label {
      font-size: var(--fs-md);
      font-weight: 500;
      letter-spacing: -0.015em;
    }
    .proc-eta {
      font-size: var(--fs-sm);
      color: var(--text-faint);
    }
    .steps {
      gap: var(--s-3);
      font-size: var(--fs-sm);
    }
    .step {
      padding: 8px 14px;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-faint);
    }
    .step.active {
      color: var(--accent);
      border-color: var(--accent-soft);
      background: var(--accent-soft);
    }
    .step.done {
      color: var(--success);
      border-color: rgba(52,211,153,0.18);
      background: rgba(52,211,153,0.08);
    }

    /* ───── v2 Persona onboarding legacy styles ───── */
    .onboarding-flow {
      margin-top: var(--s-9);
      padding-top: var(--s-7);
      border-top: 1px dashed var(--border);
      opacity: 0.68;
    }
    .onboarding-flow .flow-kicker {
      font-size: var(--fs-xs);
      letter-spacing: 0.08em;
      color: var(--text-faint);
    }
    .onboarding-flow:hover { opacity: 1; transition: opacity var(--t-base); }

    /* ───── v2 Notice cards ───── */
    .notice-grid { gap: var(--s-3); margin-top: var(--s-5); }
    .notice-card {
      padding: var(--s-4);
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: var(--bg-card);
    }
    .notice-label {
      font-size: var(--fs-xs);
      letter-spacing: 0.04em;
      gap: 6px;
      margin-bottom: var(--s-2);
      font-weight: 600;
    }
    .notice-copy {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      line-height: var(--lh-relaxed);
    }

    /* ═══════════════════════════
       v2 BOTTOM NAV (mobile)
       ═══════════════════════════ */
    .bottom-nav {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      height: var(--bottom-nav-h);
      padding: 0 var(--s-3);
      background: linear-gradient(180deg, rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.96) 100%);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      border-top: 1px solid var(--border);
      z-index: 99;
      align-items: center;
      justify-content: space-around;
    }
    .bn-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 6px 10px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-faint);
      border-radius: var(--r-sm);
      cursor: pointer;
      flex: 1;
      max-width: 80px;
    }
    .bn-item .icon {
      width: 20px; height: 20px;
      stroke-width: 1.7;
    }
    .bn-item.active {
      color: var(--accent);
    }
    .bn-item:active { transform: scale(0.94); }

    /* ═══════════════════════════
       v2 RESPONSIVE (mobile / tablet)
       ═══════════════════════════ */
    @media (max-width: 880px) {
      /* 사이드바를 작은 화면에서도 좌측 고정 — 사용자가 숨기기 전까지 표시 */
      .layout {
        grid-template-columns: minmax(156px, 34vw) 1fr;
        padding-top: var(--topbar-h);
      }
      .layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
      .sidebar {
        display: flex;
        padding: var(--s-3) 8px;
      }
      .nav-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 9px 8px;
        font-size: 11px;
        color: var(--text-faint);
      }
      .nav-item .icon {
        width: 17px; height: 17px;
        margin: 0;
      }
      .nav-item.active::after {
        left: -6px; top: 6px; bottom: 6px;
        width: 3px;
      }
      .nav-upgrade {
        font-size: 9px;
        padding: 8px 0;
        margin: var(--s-3) 4px 0;
        line-height: 1.2;
      }
      .sidebar > .nav-divider {
        margin: var(--s-2) 8px;
      }
      .bottom-nav { display: none !important; }
      .main {
        padding: var(--s-5) var(--s-4) var(--s-7);
        max-width: 100%;
      }
      .page-head { margin-bottom: var(--s-5); }
      .page-head h1 {
        font-size: clamp(24px, 6vw, 30px);
      }
      .dropzone { padding: var(--s-7) var(--s-4); }
      .url-form { flex-direction: column; }
      .url-form .url-submit { width: 100%; }
      .stage-body { padding: var(--s-4); }
      .next-btn { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
      .ba-toggle { width: 100%; justify-content: space-between; }
      .ba-toggle button { flex: 1; justify-content: center; }
      .topbar { padding: 0 var(--s-3); }
      .brand-sub { display: none; }
    }
    @media (max-width: 520px) {
      .layout { grid-template-columns: 72px 1fr; }
      .nav-item {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px;
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: 0;
      }
      .nav-section-label {
        font-size: 8px;
        text-align: center;
        padding-inline: 0;
      }
      .nav-pill { display: none !important; }
    }

    /* ═══════════════════════════
       v2 MICRO-INTERACTIONS
       ═══════════════════════════ */
    @media (prefers-reduced-motion: no-preference) {
      .page.active {
        animation: pageEnter 0.32s var(--ease-smooth);
      }
      @keyframes pageEnter {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .stage:not(.hidden) {
        animation: stageEnter 0.45s var(--ease-out);
      }
      @keyframes stageEnter {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .next-btn { animation: stageEnter 0.4s var(--ease-out); }
    }
    /* Reduced motion respect */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ VIDEO PAGE — Higgsfield-style 2-column
       ════════════════════════════════════════════════════════════ */
    .video-page {
      max-width: none;
      padding: var(--s-5);
    }
    .video-page.page.active { animation: pageEnter 0.3s var(--ease-smooth); }
    .vid-hero {
      max-width: 1400px;
      margin: 0 auto var(--s-5);
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.8fr);
      gap: var(--s-4);
      align-items: stretch;
    }
    .vid-hero-main,
    .vid-hero-panel {
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      background:
        linear-gradient(135deg, rgba(167,139,250,0.09), rgba(34,211,238,0.035) 56%, rgba(255,255,255,0.015)),
        var(--bg-card);
      overflow: hidden;
    }
    .vid-hero-main {
      padding: var(--s-6);
      position: relative;
    }
    .vid-hero-main::after {
      content: "";
      position: absolute;
      right: -90px;
      bottom: -120px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(167,139,250,0.16);
      border-radius: 50%;
      pointer-events: none;
    }
    .vid-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border: 1px solid rgba(167,139,250,0.22);
      border-radius: var(--r-pill);
      background: rgba(167,139,250,0.08);
      color: var(--accent);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .vid-hero-title {
      margin: var(--s-4) 0 var(--s-2);
      font-family: var(--font-display);
      font-size: clamp(34px, 5vw, 64px);
      line-height: 1.02;
      font-weight: 650;
      letter-spacing: 0;
      color: var(--text);
    }
    .vid-hero-copy {
      max-width: 64ch;
      margin: 0;
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
    }
    .vid-hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: var(--s-5);
    }
    .vid-hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      background: rgba(255,255,255,0.035);
      color: var(--text-dim);
      font-size: var(--fs-xs);
      font-weight: 600;
      font-family: inherit;
      cursor: default;
    }
    button.vid-hero-chip { cursor: pointer; }
    button.vid-hero-chip:hover { color: var(--accent); border-color: rgba(167,139,250,0.42); }
    .video-editor-page {
      --ve-accent: #A78BFA;
      --ve-cyan: #67E8F9;
      --ve-green: #6EE7B7;
      container-type: inline-size;
    }
    .ve-shell {
      display: grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .ve-panel {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
      overflow: hidden;
    }
    .ve-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }
    .ve-panel-head h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: 0;
    }
    .ve-stack { display: grid; gap: 12px; padding: 14px; }
    .ve-drop {
      min-height: 156px;
      display: grid;
      place-items: center;
      gap: 10px;
      text-align: center;
      border: 1px dashed var(--border-strong);
      border-radius: 8px;
      background: rgba(255,255,255,0.025);
      color: var(--text-dim);
      cursor: pointer;
      padding: 20px;
    }
    .ve-drop:hover,
    .ve-drop.dragover {
      border-color: rgba(167,139,250,0.55);
      background: rgba(167,139,250,0.08);
      color: var(--text);
    }
    .ve-drop svg { width: 28px; height: 28px; color: var(--ve-accent); }
    .ve-drop strong { font-size: 14px; color: var(--text); }
    .ve-drop span { font-size: 12px; color: var(--text-faint); }
    .ve-btn {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
      color: var(--text-dim);
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
    }
    .ve-btn:hover { color: var(--text); border-color: rgba(167,139,250,0.42); }
    .ve-btn.primary {
      background: linear-gradient(135deg, var(--ve-accent), #6366F1);
      border-color: rgba(255,255,255,0.14);
      color: white;
    }
    .ve-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .ve-clip-list { display: grid; gap: 8px; }
    .ve-clip {
      display: grid;
      grid-template-columns: 48px minmax(0,1fr);
      gap: 10px;
      align-items: center;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.025);
      cursor: pointer;
    }
    .ve-clip.active { border-color: rgba(167,139,250,0.55); background: rgba(167,139,250,0.09); }
    .ve-thumb {
      width: 48px;
      aspect-ratio: 16 / 10;
      border-radius: 6px;
      background: linear-gradient(135deg, rgba(167,139,250,0.22), rgba(103,232,249,0.10));
      display: grid;
      place-items: center;
      color: var(--ve-accent);
    }
    .ve-clip-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ve-clip-meta { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
    .ve-workspace {
      display: grid;
      grid-template-rows: auto auto;
      gap: 16px;
    }
    .ve-preview {
      min-height: 360px;
      display: grid;
      place-items: center;
      padding: 16px;
      background:
        linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
        var(--bg-elev);
      background-size: 18px 18px;
      border-bottom: 1px solid var(--border);
    }
    .ve-preview video {
      width: min(100%, 860px);
      max-height: 58vh;
      border-radius: 8px;
      background: #05050A;
      box-shadow: 0 24px 70px rgba(0,0,0,0.28);
    }
    .ve-empty {
      text-align: center;
      color: var(--text-faint);
      font-size: 13px;
      display: grid;
      gap: 8px;
      justify-items: center;
    }
    .ve-empty svg { width: 40px; height: 40px; color: var(--ve-accent); opacity: 0.75; }
    .ve-controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 14px;
      border-bottom: 1px solid var(--border);
    }
    .ve-field { display: grid; gap: 6px; }
    .ve-field label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--text-faint);
      text-transform: uppercase;
    }
    .ve-field input,
    .ve-field select {
      width: 100%;
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-elev);
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      outline: none;
    }
    .ve-timeline {
      display: grid;
      gap: 10px;
      padding: 14px;
    }
    .ve-track {
      min-height: 86px;
      display: flex;
      align-items: stretch;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(0,0,0,0.16);
      overflow-x: auto;
    }
    .ve-segment {
      min-width: 136px;
      max-width: 220px;
      display: grid;
      align-content: space-between;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(167,139,250,0.28);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(103,232,249,0.06));
      color: var(--text);
      cursor: pointer;
    }
    .ve-segment.active { border-color: rgba(103,232,249,0.65); box-shadow: 0 0 0 1px rgba(103,232,249,0.22) inset; }
    .ve-segment-title { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ve-segment-time { font-size: 11px; color: var(--text-faint); }
    .ve-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      padding: 14px;
      border-top: 1px solid var(--border);
    }
    .ve-action-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .ve-status {
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 12px;
      min-height: 40px;
    }
    .ve-log {
      max-height: 110px;
      overflow: auto;
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      background: rgba(0,0,0,0.12);
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 1.6;
      display: none;
    }
    @media (max-width: 1080px) {
      .ve-shell { grid-template-columns: 1fr; }
      .ve-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .ve-controls { grid-template-columns: 1fr; }
      .ve-actions { align-items: stretch; }
      .ve-action-group, .ve-btn { width: 100%; }
    }
    .aive-workspace {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr) 360px;
      gap: 20px;
      align-items: start;
      width: 100%;
      min-width: 0;
      min-height: calc(100vh - 112px);
    }
    .aive-project-panel,
    .aive-results-panel,
    .aive-scene-panel,
    .aive-settings-panel {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(20,18,32,0.96), rgba(9,9,18,0.94));
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
      min-width: 0;
    }
    .aive-project-panel,
    .aive-settings-panel {
      padding: 20px;
      align-self: start;
      position: sticky;
      top: calc(var(--topbar-h) + 16px);
      z-index: auto;
    }
    .aive-project-panel {
      max-height: calc(100vh - var(--topbar-h) - 32px);
      overflow: auto;
      z-index: 2;
    }
    .aive-project-kicker {
      color: var(--text-faint);
      font-size: 12px;
      margin-bottom: 14px;
    }
    .aive-project-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .aive-project-title-row h2 {
      margin: 0;
      color: var(--text);
      font-family: var(--font-display);
      font-size: 22px;
      letter-spacing: 0;
    }
    .aive-edit-dot { color: var(--text-faint); font-size: 14px; }
    .aive-project-meta {
      color: var(--text-faint);
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 24px;
    }
    .aive-file-facts {
      display: grid;
      gap: 8px;
      padding: 12px;
      margin: -10px 0 22px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.028);
    }
    .aive-file-facts.empty {
      color: var(--text-faint);
      font-size: 12px;
      line-height: 1.5;
    }
    .aive-file-facts div {
      display: grid;
      grid-template-columns: 74px minmax(0,1fr);
      gap: 8px;
      align-items: baseline;
    }
    .aive-file-facts span {
      color: var(--text-faint);
      font-size: 10px;
      font-weight: 800;
    }
    .aive-file-facts strong {
      min-width: 0;
      color: var(--text);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .aive-file-facts small {
      color: var(--text-faint);
      font-size: 10px;
      line-height: 1.45;
    }
    .aive-progress-list {
      list-style: none;
      display: grid;
      gap: 8px;
      padding: 0;
      margin: 0 0 28px;
    }
    .aive-progress-step {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: rgba(255,255,255,0.025);
      color: var(--text-dim);
    }
    .aive-progress-step.active {
      border-color: rgba(167,139,250,0.42);
      background: linear-gradient(135deg, rgba(167,139,250,0.26), rgba(109,111,247,0.10));
      color: var(--text);
    }
    .aive-progress-step.done .aive-step-state { color: var(--green); }
    .aive-step-index {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: var(--text-faint);
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .aive-progress-step.active .aive-step-index {
      background: rgba(167,139,250,0.22);
      color: var(--accent);
      outline: 1px solid rgba(167,139,250,0.48);
    }
    .aive-step-label { font-size: 13px; font-weight: 800; }
    .aive-step-state { font-size: 11px; color: var(--text-faint); }
    .aive-primary-wide,
    .aive-secondary-wide,
    .aive-export-btn,
    .aive-select-btn,
    .aive-preview-btn {
      min-height: 42px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .aive-primary-wide,
    .aive-export-btn,
    .aive-select-btn {
      background: linear-gradient(135deg, var(--accent), #6D6FF7);
      color: white;
      border-color: rgba(255,255,255,0.14);
    }
    .aive-secondary-wide {
      width: 100%;
      margin-top: 10px;
      background: rgba(255,255,255,0.04);
      color: var(--text);
    }
    .aive-primary-wide { width: 100%; }
    .aive-main-panel {
      display: grid;
      gap: 14px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .aive-results-panel {
      padding: 18px;
      max-width: 100%;
      overflow: hidden;
    }
    .aive-section-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      min-width: 0;
    }
    .aive-section-head.compact {
      align-items: center;
      margin-bottom: 12px;
    }
    .aive-section-head h1,
    .aive-section-head h3 {
      margin: 0;
      color: var(--text);
      font-family: var(--font-display);
      letter-spacing: 0;
    }
    .aive-section-head h1 { font-size: 24px; }
    .aive-section-head h3 { font-size: 15px; }
    .aive-section-head p {
      margin: 7px 0 0;
      color: var(--text-faint);
      font-size: 13px;
      line-height: 1.5;
    }
    .aive-result-status {
      white-space: nowrap;
      color: var(--accent);
      background: rgba(167,139,250,0.12);
      border: 1px solid rgba(167,139,250,0.26);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 800;
    }
    .aive-head-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
      flex-shrink: 0;
    }
    .aive-upload-panel {
      margin-bottom: 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.026);
      overflow: hidden;
    }
    .aive-upload-drop {
      width: 100%;
      min-height: 126px;
      display: grid;
      place-items: center;
      gap: 6px;
      border: 1px dashed rgba(167,139,250,0.36);
      border-radius: 8px;
      background: radial-gradient(circle at 50% 0%, rgba(167,139,250,0.12), transparent 64%);
      color: var(--text);
      font-family: inherit;
      cursor: pointer;
      padding: 18px;
    }
    .aive-upload-drop:hover { border-color: rgba(167,139,250,0.78); background-color: rgba(167,139,250,0.06); }
    .aive-upload-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(167,139,250,0.18);
      color: var(--accent);
      font-size: 22px;
    }
    .aive-upload-drop strong { font-size: 14px; }
    .aive-upload-drop small { color: var(--text-faint); font-size: 12px; }
    .aive-media-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--border);
    }
    .aive-media-info {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .aive-media-info span {
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .aive-media-info strong {
      color: var(--text);
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .aive-media-info small { color: var(--text-faint); font-size: 11px; }
    .aive-media-player {
      display: block;
      width: 100%;
      max-height: 360px;
      background: #05050a;
    }
    .aive-audio-player {
      display: block;
      width: calc(100% - 28px);
      margin: 14px;
      accent-color: var(--accent);
    }
    .aive-version-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(220px, 1fr));
      gap: 16px;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }
    .aive-version-card {
      position: relative;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(6,6,14,0.42);
      cursor: pointer;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .aive-version-card.selected {
      border-color: rgba(167,139,250,0.86);
      box-shadow: 0 0 0 1px rgba(167,139,250,0.36), 0 22px 60px rgba(109,111,247,0.18);
    }
    .aive-version-topline {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 24px;
    }
    .aive-version-topline h3 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }
    .aive-badge {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
    }
    .aive-badge.recommend { background: rgba(167,139,250,0.22); color: var(--accent); }
    .aive-badge.selected  { background: var(--accent); color: white; }
    .aive-badge.memory-pick {
      background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(6,182,212,.18));
      color: #34d399;
      border: 1px solid rgba(16,185,129,.35);
      animation: memory-pulse 2.4s ease-in-out infinite;
    }
    .aive-badge.recent-pick {
      background: rgba(251,191,36,.15);
      color: #fbbf24;
      border: 1px solid rgba(251,191,36,.3);
    }
    @keyframes memory-pulse {
      0%, 100% { box-shadow: none; }
      50% { box-shadow: 0 0 8px rgba(52,211,153,.4); }
    }
    .aive-version-card.memory-recommended {
      border-color: rgba(16,185,129,.4);
      box-shadow: 0 0 0 1px rgba(16,185,129,.2), 0 4px 16px rgba(16,185,129,.08);
    }
    .aive-version-topline { flex-wrap: wrap; gap: 4px; }
    .aive-version-thumb {
      position: relative;
      min-height: 260px;
      overflow: hidden;
      border-radius: 8px;
      background:
        radial-gradient(circle at 62% 18%, color-mix(in srgb, var(--card-accent) 70%, transparent), transparent 24%),
        linear-gradient(145deg, rgba(20,10,42,0.96), rgba(8,10,22,0.98));
    }
    .aive-thumb-glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,0.20), transparent 16%),
        radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--card-accent) 48%, transparent), transparent 30%);
    }
    .aive-thumb-face {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 58%;
      height: 78%;
      transform: translateX(-50%);
      border-radius: 46% 46% 10px 10px;
      background:
        radial-gradient(circle at 50% 22%, rgba(255,230,238,0.92), rgba(170,112,170,0.88) 24%, transparent 25%),
        linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 55%, #111827), #06070f 78%);
      box-shadow: inset 18px 0 28px rgba(255,255,255,0.10), inset -24px 0 34px rgba(0,0,0,0.34);
      opacity: 0.92;
    }
    .aive-play {
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(5,5,12,0.58);
      color: white;
      backdrop-filter: blur(10px);
      font-size: 12px;
    }
    .aive-version-copy strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 5px; }
    .aive-version-copy p { margin: 0; min-height: 38px; color: var(--text-faint); font-size: 12px; line-height: 1.55; }
    .aive-version-meta { display: flex; gap: 10px; color: var(--text-faint); font-size: 12px; }
    .aive-select-btn { width: 100%; }
    .aive-points-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .aive-point-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 8px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
    }
    .aive-point-card span { color: var(--accent); }
    .aive-point-card strong { color: var(--text); font-size: 12px; }
    .aive-point-card small { grid-column: 2; color: var(--text-faint); font-size: 10px; }
    .aive-scene-panel { padding: 16px 18px; }
    .aive-preview-btn {
      padding: 0 14px;
      background: rgba(255,255,255,0.04);
      color: var(--text);
    }
    .aive-preview-btn.danger {
      color: #fecaca;
      border-color: rgba(248,113,113,0.28);
      background: rgba(248,113,113,0.08);
    }
    .aive-restored-note {
      margin: 14px;
      padding: 14px;
      border: 1px dashed rgba(167,139,250,0.36);
      border-radius: 8px;
      color: var(--text-faint);
      background: rgba(167,139,250,0.06);
      font-size: 12px;
      line-height: 1.6;
    }
    .aive-scene-strip {
      display: grid;
      grid-template-columns: repeat(8, minmax(86px, 1fr));
      gap: 10px;
      overflow-x: auto;
    }
    .aive-scene-card {
      min-width: 86px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      overflow: hidden;
      transition: border-color var(--t-fast,.15s), transform var(--t-fast,.15s), box-shadow var(--t-fast,.15s);
      cursor: default;
    }
    .aive-scene-card:hover {
      border-color: rgba(139,92,246,.55);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(139,92,246,.18);
    }
    .aive-scene-thumb {
      height: 70px;
      display: grid;
      align-items: end;
      padding: 8px;
      background: linear-gradient(135deg, rgba(167,139,250,0.45), rgba(15,23,42,0.96));
      position: relative;
    }
    .aive-scene-thumb.media {
      padding: 0;
      background: #05050a;
      align-items: stretch;
    }
    .aive-scene-thumb.media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity .2s;
    }
    /* 시간 범위 오버레이 */
    .aive-scene-time {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 3px 5px;
      font-size: 9.5px;
      font-weight: 700;
      color: #fff;
      background: rgba(0,0,0,.62);
      text-align: center;
      letter-spacing: .02em;
      opacity: 0;
      transition: opacity .2s;
    }
    .aive-scene-card:hover .aive-scene-time { opacity: 1; }

    /* score badge — 우상단 */
    .aive-score-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .03em;
      line-height: 1.4;
      pointer-events: none;
    }
    .aive-score-badge.high   { background: rgba(34,197,94,.85);  color: #fff; }
    .aive-score-badge.medium { background: rgba(251,191,36,.85); color: #000; }
    .aive-score-badge.low    { background: rgba(239,68,68,.75);  color: #fff; }
    .aive-score-badge:not(.high):not(.medium):not(.low) {
      background: rgba(255,255,255,.25); color: #fff;
    }

    /* priority 테두리 강조 */
    .aive-scene-card.priority-high   { border-color: rgba(34,197,94,.5); }
    .aive-scene-card.priority-medium { border-color: rgba(251,191,36,.4); }
    .aive-scene-card.priority-low    { border-color: rgba(239,68,68,.35); opacity: .82; }

    /* 선택된 버전 in/out 강조 */
    .aive-scene-card.in-version {
      outline: 2px solid rgba(139,92,246,.75);
      outline-offset: -2px;
    }
    .aive-scene-card.out-version {
      opacity: .45;
      filter: grayscale(40%);
    }
    .aive-in-version-dot {
      position: absolute;
      top: 4px;
      left: 4px;
      background: rgba(139,92,246,.9);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      padding: 2px 4px;
      border-radius: 4px;
      z-index: 3;
      pointer-events: none;
    }

    /* 버전 카드 태그 + 점수 */
    .aive-version-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }
    .aive-version-tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      background: rgba(139,92,246,.15);
      color: rgba(167,139,250,.95);
      border: 1px solid rgba(139,92,246,.3);
    }
    .aive-version-score {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800;
      margin-left: auto;
    }
    .aive-version-score.high { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
    .aive-version-score.mid  { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
    .aive-version-score.low  { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.3); }

    /* 정렬 버튼 */
    .aive-sort-btn {
      padding: 5px 11px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-faint);
      font-size: .78rem;
      cursor: pointer;
      transition: all var(--t-fast,.15s);
    }
    .aive-sort-btn:hover { border-color: var(--accent,#8B5CF6); color: var(--accent,#8B5CF6); }
    .aive-sort-btn.active {
      background: rgba(139,92,246,.15);
      border-color: rgba(139,92,246,.5);
      color: var(--accent,#8B5CF6);
      font-weight: 700;
    }

    /* 분석 중 배너 */
    .aive-analyze-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-radius: 8px;
      margin-bottom: 10px;
      background: rgba(139,92,246,.1);
      border: 1px solid rgba(139,92,246,.25);
      color: var(--accent,#8B5CF6);
      font-size: .81rem;
    }
    .aive-scene-thumb.audio-wave {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      position: relative;
      padding: 10px;
      background: linear-gradient(135deg, rgba(167,139,250,0.34), rgba(15,23,42,0.96));
    }
    .aive-scene-thumb.audio-wave i {
      width: 3px;
      min-height: 12%;
      border-radius: 999px;
      background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
      opacity: 0.9;
    }
    .aive-scene-thumb.audio-wave span {
      position: absolute;
      left: 8px;
      bottom: 8px;
    }
    .tone-rose .aive-scene-thumb { background: linear-gradient(135deg, rgba(244,114,182,0.52), rgba(15,23,42,0.96)); }
    .tone-blue .aive-scene-thumb { background: linear-gradient(135deg, rgba(96,165,250,0.52), rgba(15,23,42,0.96)); }
    .tone-amber .aive-scene-thumb { background: linear-gradient(135deg, rgba(251,191,36,0.42), rgba(15,23,42,0.96)); }
    .tone-magenta .aive-scene-thumb { background: linear-gradient(135deg, rgba(217,70,239,0.52), rgba(15,23,42,0.96)); }
    .tone-indigo .aive-scene-thumb { background: linear-gradient(135deg, rgba(99,102,241,0.58), rgba(15,23,42,0.96)); }
    .tone-pink .aive-scene-thumb { background: linear-gradient(135deg, rgba(236,72,153,0.52), rgba(15,23,42,0.96)); }
    .aive-scene-thumb span { color: white; font-size: 11px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
    .aive-scene-foot {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      padding: 8px;
      color: var(--text-faint);
      font-size: 11px;
    }
    .aive-scene-foot strong { color: var(--text); }
    .aive-settings-panel {
      display: grid;
      gap: 20px;
      opacity: 1;
      transform: none;
    }
    .aive-settings-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--border);
      margin: -20px -20px 0;
    }
    .aive-settings-tabs button {
      min-height: 50px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--text-faint);
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .aive-settings-tabs button.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      background: rgba(167,139,250,0.06);
    }
    .aive-setting-block { display: grid; gap: 12px; }
    .aive-setting-block h3 { margin: 0; color: var(--text); font-size: 13px; }
    .aive-option-grid.style { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .aive-style-chip,
    .aive-length-chip {
      min-height: 42px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .aive-style-chip {
      display: grid;
      gap: 7px;
      padding: 8px;
      text-align: left;
    }
    .aive-style-chip span {
      height: 54px;
      border-radius: 7px;
      background: linear-gradient(135deg, rgba(167,139,250,0.62), rgba(236,72,153,0.24), rgba(15,23,42,0.94));
    }
    .aive-style-chip.active,
    .aive-length-chip.active {
      border-color: rgba(167,139,250,0.86);
      color: white;
      box-shadow: 0 0 0 1px rgba(167,139,250,0.28);
    }
    .aive-option-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .aive-toggle-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      color: var(--text-dim);
      font-size: 13px;
      cursor: pointer;
    }
    .aive-toggle-row input { display: none; }
    .aive-toggle-row i {
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      position: relative;
      transition: background var(--t-fast);
    }
    .aive-toggle-row i::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 3px;
      top: 3px;
      border-radius: 999px;
      background: white;
      transition: transform var(--t-fast);
    }
    .aive-toggle-row input:checked + i { background: linear-gradient(135deg, var(--accent), #6D6FF7); }
    .aive-toggle-row input:checked + i::after { transform: translateX(18px); }
    .aive-export-btn { width: 100%; min-height: 60px; margin-top: auto; }
    .aive-export-btn:disabled { opacity: .55; cursor: not-allowed; }

    /* ── Render status ── */
    .aive-render-status {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: var(--r-md, 10px);
      font-size: .82rem;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .aive-render-status.loading {
      background: rgba(139,92,246,.12);
      border: 1px solid rgba(139,92,246,.3);
      color: var(--accent, #8B5CF6);
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
    }
    .aive-render-progress {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(139,92,246,.16);
      grid-column: 1 / -1;
    }
    .aive-render-progress span {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, transparent, var(--accent,#8B5CF6), transparent);
      animation: aive-progress-slide 1.05s ease-in-out infinite;
    }
    @keyframes aive-progress-slide {
      from { transform: translateX(-120%); }
      to { transform: translateX(260%); }
    }
    .aive-render-status.success {
      background: rgba(34,197,94,.1);
      border: 1px solid rgba(34,197,94,.3);
      color: #16a34a;
    }
    .aive-render-status.error {
      background: rgba(239,68,68,.1);
      border: 1px solid rgba(239,68,68,.3);
      color: #dc2626;
    }
    .aive-render-status small { opacity: .85; display: block; margin-top: 2px; }
    .aive-retry-btn {
      margin-top: 8px;
      padding: 5px 14px;
      border-radius: 6px;
      border: 1px solid rgba(239,68,68,.4);
      background: rgba(239,68,68,.12);
      color: #dc2626;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .aive-retry-btn:hover { background: rgba(239,68,68,.22); }
    .aive-render-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .aive-render-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .aive-render-mode-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
    }
    .aive-render-mode-badge.concat {
      background: rgba(139,92,246,.15);
      color: #a78bfa;
      border: 1px solid rgba(139,92,246,.3);
    }
    .aive-render-mode-badge.trim {
      background: rgba(34,197,94,.1);
      color: #4ade80;
      border: 1px solid rgba(34,197,94,.25);
    }
    .aive-download-btn, .aive-download-open {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: .8rem;
      font-weight: 600;
      text-decoration: none;
      background: rgba(34,197,94,.15);
      color: #16a34a;
      border: 1px solid rgba(34,197,94,.3);
      transition: background var(--t-fast,.15s);
    }
    .aive-download-btn:hover, .aive-download-open:hover { background: rgba(34,197,94,.25); }
    .aive-render-hint {
      margin-top: 8px;
      font-size: .78rem;
      opacity: .55;
      text-align: center;
    }
    .aive-export-note {
      margin: -12px 0 0;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.45;
      text-align: center;
    }
    .aive-skeleton {
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,0.045);
    }
    .aive-skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
      animation: aive-shimmer 1.1s infinite;
    }
    @keyframes aive-shimmer { to { transform: translateX(100%); } }
    .aive-version-card.skeleton {
      min-height: 430px;
      cursor: progress;
    }
    .aive-skeleton-line {
      height: 12px;
      border-radius: 999px;
    }
    .aive-skeleton-line.short { width: 44%; }
    .aive-skeleton-line.mid { width: 68%; }
    .aive-skeleton-thumb {
      min-height: 260px;
      border-radius: 8px;
    }
    .aive-scene-card.skeleton { min-height: 112px; }
    .aive-scene-card.more {
      display: grid;
      place-items: center;
      min-height: 112px;
      padding: 12px;
      color: var(--text-faint);
      font-size: 11px;
      text-align: center;
    }
    .onboarding-shell {
      margin-bottom: 24px;
      padding: 28px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 20% 0%, rgba(167,139,250,.22), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 24px 80px rgba(0,0,0,.35);
    }
    .onboarding-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 24px;
      align-items: center;
    }
    .onboarding-kicker {
      font-size: 12px;
      color: #a78bfa;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .onboarding-title {
      margin: 8px 0 10px;
      font-size: clamp(28px, 4vw, 52px);
      line-height: 1.05;
      letter-spacing: 0;
      font-weight: 800;
      color: var(--text);
    }
    .onboarding-subtitle {
      color: rgba(255,255,255,.68);
      font-size: 15px;
      line-height: 1.7;
    }
    .onboarding-upload-box {
      min-height: 220px;
      display: grid;
      place-items: center;
      gap: 10px;
      border: 1.5px dashed rgba(167,139,250,.45);
      border-radius: 24px;
      background: rgba(167,139,250,.08);
      cursor: pointer;
      transition: .18s ease;
      color: var(--text);
      text-align: center;
      padding: 22px;
    }
    .onboarding-upload-box:hover,
    .onboarding-upload-box.dragover {
      background: rgba(167,139,250,.14);
      transform: translateY(-2px);
    }
    .onboarding-primary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 14px 22px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #a78bfa, #818cf8);
      color: white;
      font-weight: 800;
      font-size: 14px;
      font-family: inherit;
      box-shadow: 0 16px 36px rgba(167,139,250,.32);
      cursor: pointer;
      text-decoration: none;
    }
    .onboarding-primary-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
    }
    .onboarding-version-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }
    .onboarding-version-card {
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
      cursor: pointer;
      transition: .18s ease;
      color: var(--text);
    }
    .onboarding-version-card:hover {
      transform: translateY(-3px);
      border-color: rgba(167,139,250,.5);
    }
    .onboarding-version-card.selected {
      border-color: #a78bfa;
      box-shadow: 0 0 0 1px rgba(167,139,250,.45), 0 18px 50px rgba(167,139,250,.20);
    }
    .onboarding-badge {
      display: inline-flex;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(167,139,250,.16);
      color: #c4b5fd;
      font-size: 11px;
      font-weight: 700;
    }
    .onboarding-reason {
      margin-top: 10px;
      color: rgba(255,255,255,.68);
      font-size: 13px;
      line-height: 1.5;
    }
    .onboarding-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .onboarding-skeleton {
      height: 180px;
      border-radius: 22px;
      background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05));
      background-size: 200% 100%;
      animation: onboardingShimmer 1.2s infinite linear;
    }
    @keyframes onboardingShimmer {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }
    .onboarding-result-video {
      width: 100%;
      max-height: 420px;
      border-radius: 22px;
      background: #000;
      border: 1px solid rgba(255,255,255,.12);
      margin-top: 18px;
    }
    .onboarding-actions {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .onboarding-status-row {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .onboarding-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(167,139,250,.28);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.76);
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
      position: relative;
    }
    .onboarding-toggle::before {
      content: "";
      width: 34px;
      height: 20px;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
      transition: .18s ease;
    }
    .onboarding-toggle::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      margin-left: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      transition: .18s ease;
    }
    .onboarding-toggle.is-on {
      border-color: rgba(167,139,250,.62);
      background: rgba(167,139,250,.16);
      color: #fff;
    }
    .onboarding-toggle.is-on::before {
      background: linear-gradient(135deg, #a78bfa, #818cf8);
    }
    .onboarding-toggle.is-on::after {
      transform: translateX(14px);
      background: #fff;
    }
    .onboarding-countdown {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(167,139,250,.12);
      border: 1px solid rgba(167,139,250,.28);
      color: rgba(255,255,255,.84);
      font-size: 13px;
      font-weight: 700;
    }
    .onboarding-secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: white;
      border: 1px solid rgba(255,255,255,.12);
      font-family: inherit;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
    }
    .onboarding-thumb-strip {
      display: grid;
      grid-template-columns: repeat(8, minmax(72px, 1fr));
      gap: 8px;
      margin-top: 20px;
      overflow-x: auto;
    }
    .onboarding-thumb-strip img,
    .onboarding-thumb-placeholder {
      width: 100%;
      height: 66px;
      object-fit: cover;
      border-radius: 10px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
    }
    .onboarding-error {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(248,113,113,.10);
      border: 1px solid rgba(248,113,113,.25);
      color: #fecaca;
      font-size: 13px;
      line-height: 1.5;
    }
    .onboarding-progress-wrap {
      margin-top: 20px;
      padding: 16px;
      border-radius: 18px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }
    .onboarding-progress-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: rgba(255,255,255,.86);
      font-size: 13px;
      font-weight: 800;
    }
    .onboarding-progress-track {
      height: 9px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
    }
    .onboarding-progress-bar {
      display: block;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(135deg, #a78bfa, #818cf8);
      box-shadow: 0 0 24px rgba(167,139,250,.36);
      transition: width .22s ease;
    }
    .onboarding-progress-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }
    .onboarding-step {
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.56);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }
    .onboarding-step.active {
      background: rgba(167,139,250,.16);
      color: #d8b4fe;
      box-shadow: inset 0 0 0 1px rgba(167,139,250,.26);
    }
    .onboarding-share-status {
      margin-top: 12px;
      color: #c4b5fd;
      font-size: 13px;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    .onboarding-primary-btn.is-large {
      min-height: 52px;
      padding: 16px 26px;
      font-size: 15px;
      box-shadow: 0 18px 44px rgba(167,139,250,.38);
    }
    .onboarding-secondary-btn.is-muted {
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.68);
      border-color: rgba(255,255,255,.10);
      box-shadow: none;
    }
    .onboarding-link-btn {
      min-height: 38px;
      padding: 8px 12px;
      border: 0;
      background: transparent;
      color: rgba(196,181,253,.78);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .onboarding-select-cta {
      position: sticky;
      bottom: 16px;
      z-index: 8;
      display: flex;
      justify-content: center;
      margin-top: 18px;
      padding: 12px;
      border-radius: 22px;
      background: rgba(9,7,18,.78);
      border: 1px solid rgba(167,139,250,.24);
      box-shadow: 0 24px 60px rgba(0,0,0,.34);
      backdrop-filter: blur(18px);
    }
    .onboarding-select-cta .onboarding-primary-btn {
      width: min(100%, 420px);
    }
    .onboarding-result-actions {
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 1.2fr) minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }
    .onboarding-result-actions > * {
      width: 100%;
    }
    .onboarding-memory-banner {
      position: sticky;
      top: 12px;
      z-index: 7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(167,139,250,.14);
      border: 1px solid rgba(167,139,250,.34);
      color: rgba(255,255,255,.86);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }
    .onboarding-memory-banner strong {
      display: block;
      color: #fff;
      font-size: 14px;
      line-height: 1.35;
    }
    .onboarding-memory-banner span {
      color: rgba(255,255,255,.64);
      font-size: 12px;
      line-height: 1.45;
    }
    .onboarding-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(4,3,10,.72);
      backdrop-filter: blur(16px);
    }
    .onboarding-modal {
      width: min(100%, 460px);
      padding: 24px;
      border-radius: 24px;
      background: #11101a;
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: 0 28px 90px rgba(0,0,0,.46);
      color: var(--text);
    }
    .onboarding-modal h3 {
      margin: 0 0 10px;
      font-size: 24px;
      line-height: 1.2;
    }
    .onboarding-modal p {
      margin: 0;
      color: rgba(255,255,255,.7);
      font-size: 14px;
      line-height: 1.7;
    }
    .onboarding-modal-actions {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 10px;
      margin-top: 20px;
    }
    @media (max-width: 1100px) {
      .onboarding-hero { grid-template-columns: 1fr; }
      .onboarding-version-grid { grid-template-columns: 1fr; }
      .onboarding-progress-steps { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 700px) {
      .onboarding-shell { padding: 22px 18px 96px; border-radius: 22px; }
      .onboarding-select-cta {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        margin: 0;
        border-radius: 20px;
      }
      .onboarding-result-actions {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 9;
        grid-template-columns: .8fr 1.4fr .8fr;
        padding: 10px;
        border-radius: 20px;
        background: rgba(9,7,18,.88);
        border: 1px solid rgba(167,139,250,.24);
        box-shadow: 0 24px 60px rgba(0,0,0,.36);
        backdrop-filter: blur(18px);
      }
      .onboarding-result-actions .onboarding-primary-btn,
      .onboarding-result-actions .onboarding-secondary-btn {
        min-height: 48px;
        padding: 10px 9px;
        font-size: 12px;
        text-align: center;
      }
      .onboarding-memory-banner {
        top: 8px;
        align-items: stretch;
        flex-direction: column;
      }
      .onboarding-modal-actions { grid-template-columns: 1fr; }
    }
    /* spinner */
    .aive-render-spinner {
      width: 15px; height: 15px; flex-shrink: 0;
      border: 2px solid rgba(139,92,246,.3);
      border-top-color: var(--accent, #8B5CF6);
      border-radius: 50%;
      animation: aive-spin .7s linear infinite;
    }
    @keyframes aive-spin { to { transform: rotate(360deg); } }
    @container (max-width: 1420px) {
      .aive-workspace { grid-template-columns: 280px minmax(0, 1fr); }
      .aive-settings-panel {
        position: static;
        grid-column: 1 / -1;
      }
      .aive-version-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    }
    @media (max-width: 1480px) {
      .aive-workspace { grid-template-columns: 280px minmax(0, 1fr); }
      .aive-settings-panel {
        position: static;
        grid-column: 1 / -1;
      }
      .aive-version-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    }
    @media (max-width: 1200px) {
      .aive-workspace { grid-template-columns: 280px minmax(0, 1fr); }
      .aive-settings-panel {
        position: static;
        grid-column: 1 / -1;
      }
      .aive-version-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    }
    @media (max-width: 900px) {
      .aive-workspace { grid-template-columns: 1fr; }
      .aive-project-panel { top: calc(var(--topbar-h) + 10px); }
      .aive-version-grid { grid-template-columns: 1fr; }
      .aive-version-thumb { min-height: 220px; }
      .aive-points-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .aive-scene-strip { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
    }
    @media (max-width: 620px) {
      .aive-section-head { flex-direction: column; }
      .aive-result-status { white-space: normal; }
      .aive-points-row,
      .aive-option-grid.style,
      .aive-option-row { grid-template-columns: 1fr; }
    }
    .mobile-edit-topbar,
    .mobile-sticky-cta,
    .mobile-settings-sheet {
      display: none;
    }
    .mobile-settings-backdrop {
      display: none;
    }
    .aive-mobile-render-result {
      display: none;
    }
    @media (max-width: 900px) {
      .aive-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .aive-project-panel,
      .aive-main-panel,
      .aive-results-panel,
      .aive-scene-panel,
      .aive-settings-panel {
        max-width: 100%;
        min-width: 0;
      }
      .aive-project-panel {
        position: static;
        max-height: none;
      }
      .aive-version-grid {
        grid-template-columns: 1fr;
      }
      .aive-version-thumb {
        min-height: 190px;
      }
      .aive-scene-strip {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }
      .aive-scene-card {
        min-width: 120px;
        scroll-snap-align: start;
      }
      .aive-scene-thumb {
        height: 76px;
      }
      .aive-scene-time,
      .aive-scene-card:hover .aive-scene-time {
        opacity: 1;
      }
    }
    @media (max-width: 640px) {
      html,
      body {
        overflow-x: hidden;
      }
      .main:has(#page-video-editor.active) {
        padding: 14px 12px calc(104px + env(safe-area-inset-bottom));
      }
      #video-edit-page-root,
      .video-editor-page,
      .aive-workspace,
      .aive-main-panel,
      .aive-results-panel,
      .aive-scene-panel,
      .aive-upload-panel,
      .onboarding-shell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .mobile-edit-topbar {
        position: sticky;
        top: 8px;
        z-index: 18;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 18px;
        background: rgba(9,7,18,.82);
        backdrop-filter: blur(18px);
        box-shadow: 0 16px 42px rgba(0,0,0,.26);
      }
      .mobile-edit-brand {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .mobile-edit-brand strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 0;
      }
      .mobile-edit-brand span {
        color: var(--accent);
        font-size: 11px;
        font-weight: 800;
      }
      .mobile-step-pill,
      .mobile-settings-btn,
      .mobile-sheet-close {
        min-height: 44px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 800;
      }
      .mobile-step-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        color: #c4b5fd;
        background: rgba(167,139,250,.14);
        border: 1px solid rgba(167,139,250,.32);
        white-space: nowrap;
      }
      .mobile-settings-btn,
      .mobile-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        color: var(--text);
        background: rgba(255,255,255,.075);
        border: 1px solid rgba(255,255,255,.12);
        cursor: pointer;
      }
      .aive-workspace {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
      }
      .aive-project-panel,
      .aive-workspace > .aive-settings-panel,
      .aive-points-row {
        display: none;
      }
      .aive-mobile-render-result {
        display: block;
        margin-top: 12px;
      }
      .aive-mobile-render-result .aive-render-status {
        margin-top: 0;
      }
      .aive-results-panel,
      .aive-scene-panel {
        padding: 14px;
        border-radius: 14px;
      }
      .aive-section-head {
        gap: 10px;
        margin-bottom: 14px;
      }
      .aive-section-head h1 {
        font-size: 22px;
        line-height: 1.15;
      }
      .aive-section-head p {
        font-size: 13px;
        line-height: 1.45;
      }
      .aive-head-actions {
        width: 100%;
        justify-content: stretch;
      }
      .aive-head-actions .aive-preview-btn,
      .aive-head-actions .aive-result-status {
        flex: 1 1 auto;
        min-height: 44px;
      }
      .aive-upload-drop {
        min-height: 190px;
        border-radius: 18px;
      }
      .aive-upload-drop strong {
        font-size: 18px;
      }
      .aive-upload-drop small {
        max-width: 220px;
        line-height: 1.45;
      }
      .aive-media-card {
        align-items: stretch;
        flex-direction: column;
      }
      .aive-media-player {
        max-height: 240px;
      }
      .aive-version-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
      }
      .aive-version-card {
        width: 100%;
        border-radius: 14px;
        padding: 14px;
      }
      .aive-version-card.selected {
        order: -1;
      }
      .aive-version-thumb {
        min-height: 150px;
      }
      .aive-version-copy p {
        min-height: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .aive-version-meta {
        flex-wrap: wrap;
      }
      .aive-select-btn {
        display: none;
      }
      .aive-scene-panel .aive-section-head.compact {
        align-items: stretch;
      }
      .aive-scene-panel .aive-section-head.compact > div:last-child {
        display: flex;
        gap: 8px;
        overflow-x: auto;
      }
      .aive-preview-btn,
      .aive-sort-btn,
      .aive-primary-wide,
      .aive-secondary-wide,
      .aive-export-btn,
      .aive-style-chip,
      .aive-length-chip,
      .aive-toggle-row,
      .landing-btn,
      .onboarding-primary-btn,
      .onboarding-secondary-btn {
        min-height: 44px;
        font-size: max(13px, 1rem);
      }
      .aive-scene-strip {
        margin-right: -14px;
        padding-right: 14px;
      }
      .aive-scene-card {
        min-width: 120px;
      }
      .aive-scene-foot {
        display: grid;
        gap: 2px;
        font-size: 11px;
      }
      .aive-scene-foot span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-sticky-cta {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 70;
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(167,139,250,.24);
        border-radius: 22px;
        background: rgba(9,7,18,.9);
        backdrop-filter: blur(20px);
        box-shadow: 0 24px 70px rgba(0,0,0,.42);
      }
      .mobile-sticky-cta .mobile-primary-action {
        width: 100%;
        min-height: 52px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--accent), #6D6FF7);
        color: white;
        font-family: inherit;
        font-size: 15px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 16px 38px rgba(167,139,250,.34);
      }
      .mobile-sticky-cta .mobile-primary-action:disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
      }
      .mobile-cta-note {
        color: rgba(255,255,255,.58);
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
      }
      .mobile-settings-backdrop,
      .mobile-settings-sheet {
        position: fixed;
        inset: 0;
      }
      .mobile-settings-backdrop {
        display: block;
        z-index: 78;
        background: rgba(0,0,0,.52);
        backdrop-filter: blur(6px);
      }
      .mobile-settings-sheet {
        z-index: 79;
        display: flex;
        align-items: flex-end;
        pointer-events: none;
      }
      .mobile-settings-sheet-inner {
        width: 100%;
        max-height: min(82vh, 720px);
        overflow: auto;
        pointer-events: auto;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        border: 1px solid rgba(255,255,255,.12);
        background: #11101a;
        box-shadow: 0 -24px 80px rgba(0,0,0,.5);
      }
      .mobile-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }
      .mobile-sheet-head strong {
        color: var(--text);
        font-size: 18px;
        font-weight: 900;
      }
      .mobile-settings-sheet .aive-settings-panel {
        display: grid;
        position: static;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .mobile-settings-sheet .aive-settings-tabs {
        margin: 0;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 14px;
        overflow: hidden;
      }
      .mobile-settings-sheet .aive-export-btn,
      .mobile-settings-sheet .aive-export-note,
      .mobile-settings-sheet .aive-render-status,
      .mobile-settings-sheet .aive-render-hint {
        display: none;
      }
    }
    .vid-hero-panel {
      padding: var(--s-5);
      display: grid;
      align-content: start;
      gap: var(--s-3);
    }
    .vid-hero-panel-title {
      display: flex;
      justify-content: space-between;
      gap: var(--s-3);
      color: var(--text);
      font-weight: 700;
      font-size: var(--fs-base);
    }
    .vid-hero-date {
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: 600;
    }
    .vid-model-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-2);
    }
    .vid-model-stat {
      padding: var(--s-3);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: rgba(0,0,0,0.12);
    }
    .vid-model-stat strong {
      display: block;
      color: var(--text);
      font-size: var(--fs-lg);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .vid-model-stat span {
      display: block;
      margin-top: 5px;
      color: var(--text-faint);
      font-size: var(--fs-xs);
    }
    .vid-model-stack {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .vid-stack-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text-dim);
      background: rgba(255,255,255,0.025);
      font-size: var(--fs-xs);
      transition: border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms;
    }
    .vid-stack-row[data-mid] {
      cursor: pointer;
      position: relative;
    }
    .vid-stack-row[data-mid]:hover {
      border-color: var(--accent, #A78BFA);
      background: rgba(167,139,250,0.06);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px -8px rgba(167,139,250,0.45);
      color: var(--text, #E9E9F0);
    }
    .vid-stack-row[data-mid]:hover b { color: var(--accent, #A78BFA); }
    .vid-stack-row[data-mid]:active { transform: translateY(0) scale(0.99); }
    .vid-stack-row.selected {
      border-color: var(--accent, #A78BFA);
      background: linear-gradient(180deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02));
      box-shadow: 0 0 0 2px rgba(167,139,250,0.18);
    }
    .vid-stack-row.selected b { color: var(--accent, #A78BFA); }
    .vid-stack-row .vid-stack-pick {
      flex-shrink: 0;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--text-faint, #797986);
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      text-transform: uppercase;
      transition: all 180ms;
    }
    .vid-stack-row[data-mid]:hover .vid-stack-pick {
      background: var(--accent, #A78BFA);
      color: #fff;
    }
    .vid-stack-row.selected .vid-stack-pick {
      background: var(--accent, #A78BFA);
      color: #fff;
    }
    .vid-stack-row b { color: var(--text); font-size: var(--fs-sm); }
    .vid-stack-row span { color: var(--text-faint); }
    .vid-stack-row b, .vid-stack-row span { min-width: 0; }
    .vid-stack-row .vid-stack-info { flex: 1; min-width: 0; }
    .vid-stack-row .vid-stack-info b,
    .vid-stack-row .vid-stack-info span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .vid-shell {
      display: grid;
      grid-template-columns: minmax(360px, 420px) 1fr;
      gap: var(--s-5);
      align-items: start;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ── Left column ── */
    .vid-left {
      display: flex; flex-direction: column;
      gap: var(--s-3);
    }

    .vid-tabs {
      display: flex;
      gap: var(--s-5);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--s-2);
    }
    .vid-tab {
      font-size: var(--fs-base);
      font-weight: 500;
      color: var(--text-faint);
      padding: 4px 0;
      position: relative;
      letter-spacing: -0.01em;
      transition: color var(--t-fast) var(--ease-smooth);
    }
    .vid-tab:hover { color: var(--text-dim); }
    .vid-tab.active { color: var(--text); font-weight: 600; }
    .vid-tab.active::after {
      content: ""; position: absolute;
      left: 0; right: 0; bottom: -13px;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }

    .vid-preset {
      position: relative;
      padding: var(--s-4);
      border-radius: var(--r-lg);
      background:
        linear-gradient(135deg, rgba(167,139,250,0.18), rgba(167,139,250,0.04) 60%),
        var(--bg-card);
      border: 1px solid rgba(167,139,250,0.25);
      overflow: hidden;
    }
    .vid-preset::before {
      content: "";
      position: absolute;
      top: 0; right: 0;
      width: 140px; height: 100%;
      background: radial-gradient(circle at 80% 50%, rgba(167,139,250,0.25), transparent 70%);
      pointer-events: none;
    }
    .vid-preset-label {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: var(--fs-xs);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      line-height: 1;
    }
    .vid-preset-sub {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      margin-top: 6px;
    }
    .vid-preset-btn {
      position: absolute;
      right: var(--s-4);
      top: 50%; transform: translateY(-50%);
      padding: 8px 14px;
      background: var(--text);
      color: var(--bg);
      font-weight: 600;
      font-size: var(--fs-sm);
      border-radius: var(--r-pill);
      transition: transform var(--t-fast) var(--ease-spring);
    }
    .vid-preset-btn:hover { transform: translateY(-50%) scale(1.04); }
    .vid-preset-btn:active { transform: translateY(-50%) scale(0.96); }

    .vid-card {
      padding: var(--s-4);
      border-radius: var(--r-lg);
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: border-color var(--t-base) var(--ease-smooth);
    }
    .vid-card:hover { border-color: var(--border-strong); }
    .vid-card-label {
      font-size: var(--fs-xs);
      color: var(--text-faint);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .vid-upload {
      cursor: pointer;
      text-align: center;
      padding: var(--s-5) var(--s-4);
    }
    .vid-upload:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent);
    }
    .vid-upload-icons {
      display: flex; justify-content: center;
      gap: 10px;
      margin-bottom: var(--s-3);
    }
    .vid-upload-icons span {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      display: grid; place-items: center;
      color: var(--text-dim);
    }
    .vid-upload-title {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text);
    }
    .vid-upload-sub {
      font-size: var(--fs-xs);
      color: var(--text-faint);
      margin-top: 2px;
    }
    .vid-upload-thumb {
      margin-top: var(--s-3);
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--t-base) var(--ease-smooth);
    }
    .vid-upload-thumb.has-image { max-height: 220px; }
    .vid-upload-thumb img {
      max-width: 100%;
      max-height: 200px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      display: block;
      margin: 0 auto;
    }

    .vid-prompt-card { padding: var(--s-4) var(--s-4) var(--s-3); }
    .vid-prompt {
      width: 100%;
      min-height: 120px;
      margin-top: var(--s-3);
      padding: 0;
      background: transparent;
      border: 0;
      outline: none;
      resize: vertical;
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
    }
    .vid-prompt::placeholder { color: var(--text-faint); }
    .vid-prompt-foot {
      display: flex;
      gap: var(--s-2);
      margin-top: var(--s-3);
      padding-top: var(--s-3);
      border-top: 1px solid var(--border);
    }
    .vid-pill {
      display: inline-flex;
      align-items: center; gap: 6px;
      padding: 5px 12px;
      border-radius: var(--r-pill);
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: var(--fs-xs);
      font-weight: 500;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .vid-pill:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .vid-pill.active {
      background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(99,102,241,0.10));
      border-color: var(--accent, #A78BFA);
      color: var(--accent, #A78BFA);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.14);
    }
    .vid-pill.active::after {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent, #A78BFA);
      box-shadow: 0 0 6px var(--accent, #A78BFA);
      margin-left: 2px;
    }
    .vid-pill[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Elements 팝오버 */
    .vid-elements-pop {
      position: absolute;
      z-index: 100;
      width: 320px; max-width: 92vw;
      max-height: 420px;
      overflow: auto;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 14px;
      box-shadow: 0 20px 60px -20px rgba(0,0,0,0.65);
      padding: 12px;
      display: flex; flex-direction: column; gap: 10px;
      animation: vepFade 200ms cubic-bezier(0.22,0.61,0.36,1);
    }
    @keyframes vepFade {
      from { opacity: 0; transform: translateY(-6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .vid-elements-pop .vep-section-label {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-faint, #797986);
      padding: 0 4px;
    }
    .vid-elements-pop .vep-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    .vid-elements-pop .vep-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px;
      background: var(--bg-1, #0F0F14);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 8px;
      color: var(--text, #E9E9F0);
      font-size: 12px;
      cursor: pointer;
      text-align: left;
      transition: border-color 180ms, background 180ms, transform 180ms;
    }
    .vid-elements-pop .vep-item:hover {
      border-color: var(--accent, #A78BFA);
      background: rgba(167,139,250,0.06);
      transform: translateY(-1px);
    }
    .vid-elements-pop .vep-avatar {
      width: 22px; height: 22px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      background-color: var(--accent-soft, rgba(167,139,250,0.18));
      flex-shrink: 0;
      display: grid; place-items: center;
      font-size: 10px; font-weight: 700;
      color: var(--accent, #A78BFA);
    }
    .vid-elements-pop .vep-name {
      flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vid-elements-pop .vep-empty {
      padding: 12px;
      text-align: center;
      font-size: 11.5px;
      color: var(--text-faint, #797986);
    }

    /* 선택된 elements 칩 — prompt-foot에 주입됨 */
    .vid-element-chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px 3px 6px;
      background: rgba(167,139,250,0.12);
      border: 1px solid rgba(167,139,250,0.28);
      border-radius: 999px;
      font-size: 11px;
      color: var(--accent, #A78BFA);
    }
    .vid-element-chip .vec-rm {
      background: none; border: none;
      color: var(--accent, #A78BFA);
      cursor: pointer;
      padding: 0;
      font-size: 14px;
      line-height: 1;
      opacity: 0.65;
    }
    .vid-element-chip .vec-rm:hover { opacity: 1; }

    .vid-model-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-3);
      cursor: pointer;
      width: 100%;
      text-align: left;
    }
    .vid-model-info { display: flex; flex-direction: column; gap: 4px; }
    .vid-model-name {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .vid-model-icon {
      color: var(--accent);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: -2px;
    }
    .vid-tag {
      font-size: 9px;
      padding: 2px 6px;
      border-radius: var(--r-xs);
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    .vid-tag.new { background: rgba(52,211,153,0.14); color: var(--success); }
    .vid-tag.exclusive { background: rgba(251,191,36,0.14); color: var(--warn); }
    .vid-tag.safe { background: rgba(34,211,238,0.13); color: var(--info); }
    .vid-model-desc {
      color: var(--text-faint);
      font-size: var(--fs-xs);
      line-height: 1.35;
      max-width: 34ch;
    }
    .vid-chev {
      font-size: 22px;
      color: var(--text-faint);
      transition: transform var(--t-fast) var(--ease-spring);
    }
    .vid-model-row:hover .vid-chev { color: var(--accent); transform: translateX(2px); }

    .vid-options {
      display: flex;
      gap: var(--s-2);
    }
    .vid-opt {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px var(--s-3);
      border-radius: var(--r-md);
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: var(--fs-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .vid-opt:hover {
      background: var(--bg-card-hover);
      color: var(--text);
      border-color: var(--border-strong);
    }

    .vid-generate {
      margin-top: var(--s-3);
      padding: 14px;
      border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      font-weight: 700;
      font-size: var(--fs-md);
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: var(--shadow-accent);
      transition: transform var(--t-fast) var(--ease-spring),
                  box-shadow var(--t-fast) var(--ease-smooth);
    }
    .vid-generate:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 30px -6px rgba(167,139,250,0.55), 0 4px 12px rgba(167,139,250,0.20);
    }
    .vid-generate:active { transform: translateY(0) scale(0.98); }
    .vid-generate:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
    .vid-gen-cost {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: var(--fs-xs);
      opacity: 0.85;
      font-weight: 500;
    }
    .vid-gen-status {
      min-height: 18px;
      font-size: var(--fs-sm);
      color: var(--text-faint);
      text-align: center;
      padding: var(--s-2) 0;
    }
    .vid-gen-status.error { color: var(--danger); }
    .vid-gen-status.ok { color: var(--success); }
    .vid-route-notice {
      margin-top: -2px;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.025);
      color: var(--text-faint);
      font-size: var(--fs-xs);
      line-height: 1.45;
    }
    .vid-route-notice.ready {
      border-color: rgba(52,211,153,0.22);
      color: #9debd0;
      background: rgba(52,211,153,0.06);
    }
    .vid-route-notice.connector {
      border-color: rgba(251,191,36,0.24);
      color: #f8d993;
      background: rgba(251,191,36,0.06);
    }

    /* ── Right column ── */
    .vid-right {
      display: flex; flex-direction: column;
      min-height: calc(100vh - var(--topbar-h) - 80px);
      border-radius: var(--r-xl);
      background: var(--bg-1);
      border: 1px solid var(--border);
      overflow: hidden;
    }
    .vid-right-tabs {
      display: flex;
      padding: var(--s-2);
      gap: 4px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-elev);
    }
    .vid-right-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: var(--r-sm);
      color: var(--text-faint);
      font-size: var(--fs-sm);
      font-weight: 500;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .vid-right-tab:hover { color: var(--text-dim); background: var(--bg-card-hover); }
    .vid-right-tab.active {
      color: var(--text);
      background: var(--bg-card-active);
    }

    .vid-right-body { flex: 1; padding: var(--s-5); overflow-y: auto; }
    .vid-right-panel { display: none; height: 100%; }
    .vid-right-panel.active { display: block; }

    .vid-preview-stage {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--r-xl);
      background:
        radial-gradient(ellipse at 50% 50%, rgba(167,139,250,0.06), transparent 70%),
        var(--bg-card);
      border: 1px dashed var(--border-strong);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }
    .vid-preview-empty { text-align: center; padding: var(--s-5); }
    .vid-preview-thumb {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: var(--accent-soft);
      display: grid; place-items: center;
      margin: 0 auto var(--s-3);
      animation: pulse 2.4s var(--ease-smooth) infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.30); }
      50%      { box-shadow: 0 0 0 14px rgba(167,139,250,0); }
    }
    .vid-preview-empty h3 {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text);
      margin: 0;
    }
    .vid-preview-empty p {
      margin-top: 8px;
      color: var(--text-dim);
      font-size: var(--fs-sm);
      line-height: 1.5;
      max-width: 36ch;
      margin-left: auto;
      margin-right: auto;
    }
    .vid-preview-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: black;
    }

    .vid-history-list {
      display: flex; flex-direction: column;
      gap: var(--s-3);
    }
    .vid-history-item {
      display: flex;
      gap: var(--s-3);
      padding: var(--s-3);
      border-radius: var(--r-md);
      background: var(--bg-card);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .vid-history-item:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent);
      transform: translateY(-1px);
    }
    .vid-history-thumb {
      width: 100px; aspect-ratio: 16/9;
      border-radius: var(--r-sm);
      background: var(--bg-elev);
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }
    .vid-history-thumb video {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .vid-history-thumb .vh-loading {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      background: var(--bg-elev);
      font-size: var(--fs-xs);
      color: var(--text-faint);
    }
    .vid-history-meta {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 4px;
    }
    .vid-history-prompt {
      font-size: var(--fs-sm);
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.4;
    }
    .vid-history-info {
      font-size: var(--fs-xs);
      color: var(--text-faint);
      display: flex; gap: 8px;
      margin-top: auto;
    }
    .vid-history-info .vh-badge {
      padding: 2px 6px;
      background: var(--bg-elev);
      border-radius: var(--r-xs);
      color: var(--text-dim);
    }

    .vid-howto h4 {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      margin: var(--s-4) 0 var(--s-2);
      color: var(--text);
    }
    .vid-howto h4:first-child { margin-top: 0; }
    .vid-howto p {
      margin: 0;
      font-size: var(--fs-sm);
      color: var(--text-dim);
      line-height: var(--lh-relaxed);
    }

    /* ── Model picker modal ── */
    .vid-modal {
      position: fixed; inset: 0;
      z-index: 200;
      display: grid; place-items: center;
    }
    .vid-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
    .vid-modal-panel {
      position: relative;
      width: min(560px, calc(100vw - 32px));
      max-height: 80vh;
      display: flex; flex-direction: column;
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      animation: slideUp 0.25s var(--ease-spring);
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .vid-modal-search {
      display: flex; align-items: center; gap: 10px;
      padding: var(--s-4) var(--s-4) var(--s-3);
      border-bottom: 1px solid var(--border);
    }
    .vid-modal-search svg { color: var(--text-faint); width: 18px; height: 18px; }
    .vid-modal-search input {
      flex: 1;
      background: transparent;
      border: 0; outline: none;
      color: var(--text);
      font-size: var(--fs-base);
      font-family: inherit;
    }
    .vid-modal-search input::placeholder { color: var(--text-faint); }
    .vid-model-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 var(--s-4) var(--s-3);
      border-bottom: 1px solid var(--border);
    }
    .vid-model-filter {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      background: rgba(255,255,255,0.025);
      color: var(--text-faint);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .vid-model-filter:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: var(--bg-card-hover);
    }
    .vid-model-filter.active {
      color: var(--accent);
      border-color: rgba(167,139,250,0.32);
      background: var(--accent-soft);
    }
    .vid-modal-section-label {
      padding: var(--s-3) var(--s-4) var(--s-2);
      font-size: var(--fs-xs);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
    }
    .vid-model-list {
      overflow-y: auto;
      padding: 0 var(--s-2) var(--s-2);
    }
    .vid-model-opt {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-3) var(--s-3);
      border-radius: var(--r-md);
      cursor: pointer;
      transition: background var(--t-fast) var(--ease-smooth);
    }
    .vid-model-opt:hover { background: var(--bg-card-hover); }
    .vid-model-opt.selected { background: var(--accent-soft); }
    .vid-model-opt-icon {
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: grid; place-items: center;
      color: var(--accent);
      font-family: var(--font-mono);
      font-weight: 700;
      flex-shrink: 0;
    }
    .vid-model-opt-text { flex: 1; min-width: 0; }
    .vid-model-opt-name {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text);
      display: flex; align-items: center; gap: 8px;
    }
    .vid-model-opt-meta {
      margin-top: 2px;
      display: flex; gap: 12px;
      font-size: var(--fs-xs);
      color: var(--text-faint);
    }
    .vid-model-opt-meta .vm-meta-item {
      display: inline-flex; align-items: center; gap: 4px;
    }
    .vid-model-check {
      color: var(--accent);
      opacity: 0;
      transition: opacity var(--t-fast) var(--ease-smooth);
    }
    .vid-model-opt.selected .vid-model-check { opacity: 1; }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ GLOBAL MINI PLAYER — 상단 가운데 영구 플레이어
       ════════════════════════════════════════════════════════════ */
    .topbar {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }
    .topbar > .topbar-left { justify-self: start; }
    .topbar > .top-actions { justify-self: end; }

    /* 뮤직 페이지 플레이리스트 컬러 팔레트와 매칭 */
    .mini-player {
      --mp-violet-1: #4c1d95;   /* deep indigo */
      --mp-violet-2: #7c3aed;   /* primary purple */
      --mp-violet-3: #8b5cf6;   /* bright violet */
      --mp-violet-4: #c4b5fd;   /* lilac */

      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px 6px 8px;
      background: rgba(18,18,24,0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      min-width: 320px;
      max-width: 460px;
      transition: opacity var(--t-base) var(--ease-smooth),
                  border-color var(--t-base) var(--ease-smooth),
                  background var(--t-base) var(--ease-smooth),
                  box-shadow var(--t-base) var(--ease-smooth);
    }
    .mini-player.idle { opacity: 0.55; }
    .mini-player.active {
      border-color: rgba(139, 92, 246, 0.45);
      background:
        linear-gradient(135deg, rgba(76,29,149,0.30) 0%, rgba(139,92,246,0.18) 60%, rgba(18,18,24,0.94) 100%);
      box-shadow:
        0 0 0 1px rgba(139,92,246,0.18),
        0 8px 24px -8px rgba(76,29,149,0.55),
        inset 0 1px 0 rgba(196,181,253,0.10);
    }
    .mp-btn {
      width: 30px; height: 30px;
      border-radius: 50%;
      display: grid; place-items: center;
      background: transparent;
      color: var(--text-dim);
      border: 0;
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
      flex-shrink: 0;
    }
    .mp-btn:hover {
      background: rgba(139,92,246,0.15);
      color: var(--mp-violet-4);
    }
    /* 기본: 회색 (재생 안 됨 / 일시정지) */
    .mp-btn.mp-play {
      background: rgba(255,255,255,0.10);
      color: var(--text-dim);
      width: 32px; height: 32px;
      box-shadow: none;
    }
    .mp-btn.mp-play:hover {
      background: rgba(255,255,255,0.16);
      color: var(--text);
      transform: scale(1.06);
    }
    /* 활성 상태 (audio 로드됨) — 살짝 더 강조 */
    .mini-player.active .mp-btn.mp-play {
      background: rgba(139,92,246,0.18);
      color: var(--mp-violet-4);
    }
    .mini-player.active .mp-btn.mp-play:hover {
      background: rgba(139,92,246,0.28);
    }
    /* 실제로 재생 중일 때만 보라 그라디언트 */
    .mini-player.playing .mp-btn.mp-play,
    .mini-player.playing.active .mp-btn.mp-play {
      background: linear-gradient(135deg, var(--mp-violet-1), var(--mp-violet-3)) !important;
      color: white !important;
      box-shadow: 0 6px 16px -3px rgba(76,29,149,0.65);
      animation: mpPulse 1.8s ease-in-out infinite;
    }
    .mini-player.playing .mp-btn.mp-play:hover {
      background: linear-gradient(135deg, var(--mp-violet-2), var(--mp-violet-4)) !important;
      transform: scale(1.06);
    }
    @keyframes mpPulse {
      0%, 100% { box-shadow: 0 6px 16px -3px rgba(76,29,149,0.65); }
      50%      { box-shadow: 0 6px 22px -3px rgba(139,92,246,0.85); }
    }
    .mp-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none !important; }
    .mp-btn.mp-shuffle {
      width: 22px; height: 22px;
      color: var(--text-faint);
      background: transparent;
    }
    .mp-btn.mp-shuffle:hover {
      color: var(--mp-violet-4);
      background: rgba(139,92,246,0.12);
      transform: rotate(15deg) scale(1.1);
    }
    .mp-btn.mp-shuffle.active {
      color: var(--mp-violet-4);
    }

    .mp-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column;
      gap: 3px;
    }
    .mp-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-dim);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mini-player.active .mp-title {
      color: white;
      text-shadow: 0 1px 2px rgba(76,29,149,0.4);
    }
    .mp-progress {
      width: 100%; height: 3px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
    }
    .mp-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--mp-violet-2), var(--mp-violet-3), var(--mp-violet-4));
      border-radius: 2px;
      transition: width 0.15s linear;
      box-shadow: 0 0 8px rgba(139,92,246,0.5);
    }
    .mp-time {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    @media (max-width: 880px) {
      .topbar { grid-template-columns: auto 1fr auto; }
      .mini-player { min-width: 0; max-width: none; padding: 4px 8px 4px 4px; gap: 6px; }
      .mp-info, .mp-time { display: none; }
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ TODAY PAGE — Hero grid + Calendar + Deadline goal
       ════════════════════════════════════════════════════════════ */
    .td-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) 320px;
      gap: 18px;
      margin-bottom: 24px;
    }
    @media (max-width: 980px) {
      .td-hero-grid { grid-template-columns: 1fr; }
    }
    .td-command-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
      gap: 16px;
      margin-bottom: 16px;
      align-items: stretch;
    }
    .td-command-main,
    .td-command-panel,
    .td-quick-lanes {
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg-card) 92%, transparent);
      border-radius: 8px;
      box-shadow: 0 18px 48px -34px rgba(0,0,0,0.55);
    }
    .td-command-main {
      min-height: 250px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .td-command-main::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: linear-gradient(90deg, #a78bfa, #67e8f9, #6ee7b7);
    }
    .td-kicker {
      width: max-content;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(167,139,250,0.10);
      border: 1px solid rgba(167,139,250,0.22);
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .td-command-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(30px, 5vw, 54px);
      line-height: 0.98;
      letter-spacing: 0;
      color: var(--text);
      max-width: 760px;
    }
    .td-command-copy {
      margin: 14px 0 0;
      max-width: 690px;
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.65;
    }
    .td-command-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }
    .td-command-btn,
    .td-lane-btn {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-elev);
      color: var(--text);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
      text-decoration: none;
    }
    .td-command-btn {
      min-height: 42px;
      padding: 0 15px;
      font-size: 13px;
      font-weight: 700;
    }
    .td-command-btn svg,
    .td-lane-btn svg { width: 15px; height: 15px; stroke-width: 2; }
    .td-command-btn.primary {
      background: linear-gradient(135deg, var(--accent), #6366f1);
      border-color: rgba(255,255,255,0.14);
      color: white;
      box-shadow: 0 14px 34px -22px rgba(167,139,250,0.9);
    }
    .td-command-btn:hover,
    .td-lane-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(167,139,250,0.42);
      background: rgba(167,139,250,0.08);
      color: var(--accent);
    }
    .td-command-btn.primary:hover { color: white; background: linear-gradient(135deg, #b794f6, #6d6ff7); }
    .td-command-panel {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    .td-panel-date {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .td-panel-date strong {
      display: block;
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0;
      color: var(--text);
    }
    .td-panel-date span {
      font-size: 11px;
      color: var(--text-faint);
      font-family: var(--font-mono);
    }
    .td-focus-chip {
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(103,232,249,0.10);
      border: 1px solid rgba(103,232,249,0.26);
      color: #67e8f9;
      font-size: 11px;
      font-weight: 700;
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .td-hero-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .td-hero-metric {
      padding: 12px;
      border-radius: 8px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      min-width: 0;
    }
    .td-hero-metric .num {
      display: block;
      font-family: var(--font-display);
      font-size: 25px;
      line-height: 1;
      color: var(--metric-c, var(--text));
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }
    .td-hero-metric .label {
      display: block;
      margin-top: 7px;
      color: var(--text-faint);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .td-start-note {
      padding: 12px;
      border-radius: 8px;
      border: 1px solid rgba(110,231,183,0.22);
      background: rgba(110,231,183,0.07);
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.55;
    }
    .td-start-note strong { color: #6ee7b7; }
    .td-quick-lanes {
      margin-bottom: 20px;
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }
    .td-lane-btn {
      min-height: 58px;
      padding: 10px;
      flex-direction: column;
      align-items: flex-start;
      font-size: 12px;
      font-weight: 700;
      text-align: left;
    }
    .td-lane-btn small {
      color: var(--text-faint);
      font-size: 10px;
      font-weight: 500;
      line-height: 1.2;
    }
    @media (max-width: 1080px) {
      .td-command-hero { grid-template-columns: 1fr; }
      .td-quick-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 620px) {
      .td-command-main { min-height: auto; padding: 20px; }
      .td-command-title { font-size: 30px; }
      .td-hero-metrics { grid-template-columns: 1fr; }
      .td-quick-lanes { grid-template-columns: 1fr; }
    }
    .td-last-card {
      padding: 28px 32px;
      border-radius: var(--r-2xl);
      background: linear-gradient(135deg, rgba(76,29,149,0.20), rgba(139,92,246,0.06) 70%, var(--bg-card));
      border: 1px solid rgba(139,92,246,0.25);
      display: flex; flex-direction: column;
      /* Phase: 페이지네이션 시 박스 크기 고정 — 5개 행 + 헤더 + 페이지바 기준 */
      min-height: 580px;
      max-height: 580px;
    }
    .td-last-card .td-todo-head { flex-shrink: 0; }
    /* 리스트는 가운데 영역에 고정 + 내부 스크롤 */
    .td-last-card #td-todo-list {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: hidden;
    }
    .td-last-card #td-todo-list > .td-todo-item {
      flex-shrink: 0;
    }
    /* 페이지네이션은 항상 하단 고정 */
    .td-last-card #td-todo-list > .td-todo-pager {
      margin-top: auto !important;
      flex-shrink: 0;
    }
    /* 5개 미만일 때도 빈 공간을 자연스럽게 채우는 spacer */
    .td-last-card .td-todo-spacer {
      flex: 1;
      min-height: 0;
    }
    /* 모바일 — 고정 높이 해제 */
    @media (max-width: 980px) {
      .td-last-card { min-height: auto; max-height: none; }
    }

    /* ── Calendar ── */
    .td-cal {
      padding: 18px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex; flex-direction: column;
      gap: 10px;
    }
    .td-cal-head {
      display: flex; align-items: center; justify-content: space-between;
    }
    .td-cal-nav {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
      display: grid; place-items: center;
      cursor: pointer;
      transition: all var(--t-fast);
      font-size: 16px; line-height: 1;
    }
    .td-cal-nav:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(167,139,250,0.30);
    }
    .td-cal-month {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--text);
    }
    .td-cal-dow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      font-size: 10px;
      color: var(--text-faint);
      text-align: center;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--border);
    }
    .td-cal-dow span:first-child { color: rgba(248,113,113,0.65); }  /* 일요일 살짝 빨강 */
    .td-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .td-cal-day {
      aspect-ratio: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 2px;
      font-size: 11px;
      color: var(--text-dim);
      border-radius: 6px;
      cursor: pointer;
      transition: background var(--t-fast);
      position: relative;
    }
    .td-cal-day:hover { background: var(--bg-card-hover); color: var(--text); }
    .td-cal-day.empty { visibility: hidden; }
    .td-cal-day.today {
      color: var(--accent);
      font-weight: 700;
      background: var(--accent-soft);
    }
    .td-cal-day.has-work { color: var(--text); }
    .td-cal-day .td-cal-star {
      font-size: 12px;
      line-height: 0.8;
      color: var(--accent);
      text-shadow: 0 0 6px rgba(167,139,250,0.6);
      margin-top: -2px;
    }
    .td-cal-day.heavy .td-cal-star {
      color: #c4b5fd;
      text-shadow: 0 0 8px rgba(196,181,253,0.85);
    }
    .td-cal-day.future {
      color: var(--text-whisper);
      cursor: default;
    }
    .td-cal-day.future:hover { background: transparent; color: var(--text-whisper); }
    .td-cal-day.in-deadline {
      background: rgba(167,139,250,0.07);
    }
    .td-cal-day.deadline-mark {
      box-shadow: inset 0 0 0 1.5px rgba(248,113,113,0.55);
      color: #fca5a5;
    }

    /* ─── Range selection (시작 → 끝 연결 보라 밴드) ─── */
    .td-cal-day.range {
      position: relative;
      z-index: 1;
      color: var(--accent);
    }
    .td-cal-day.range::before {
      content: '';
      position: absolute;
      inset: 2px -1px;
      background: color-mix(in srgb, var(--gc, #A78BFA) 18%, transparent);
      z-index: -1;
      border-radius: 0;
    }
    .td-cal-day.range-start::before {
      left: 4px; right: -1px;
      border-radius: 9px 0 0 9px;
      background: color-mix(in srgb, var(--gc, #A78BFA) 28%, transparent);
    }
    .td-cal-day.range-end::before {
      left: -1px; right: 4px;
      border-radius: 0 9px 9px 0;
      background: color-mix(in srgb, var(--gc, #A78BFA) 28%, transparent);
    }
    .td-cal-day.range-start.range-end::before {
      left: 4px; right: 4px;
      border-radius: 9px;
    }

    /* START / END 끝점 → 진한 보라 pill + 흰 글자 */
    .td-cal-day.range-start,
    .td-cal-day.range-end {
      color: white;
      font-weight: 700;
    }
    /* 드래그 미리보기 — 점선 외곽 + 가벼운 배경 */
    .td-cal-day.drag-preview {
      background: rgba(167,139,250,0.18) !important;
      color: var(--text) !important;
      box-shadow: inset 0 0 0 1px rgba(167,139,250,0.40);
    }
    .td-cal-day.drag-start, .td-cal-day.drag-end {
      background: var(--accent) !important;
      color: white !important;
      font-weight: 700;
      box-shadow: 0 0 0 2px rgba(167,139,250,0.50);
    }
    /* 드래그 중 — 텍스트 선택 방지 */
    .td-cal-grid { user-select: none; -webkit-user-select: none; cursor: pointer; }
    .td-cal-grid:active { cursor: grabbing; }
    .td-cal-day.range-start::after,
    .td-cal-day.range-end::after {
      content: '';
      position: absolute;
      top: 4px; bottom: 4px;
      background: var(--gc, var(--accent));
      border-radius: 8px;
      z-index: -1;
      box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--gc, #A78BFA) 55%, transparent);
    }
    .td-cal-day.range-start::after { left: 4px; right: 1px; border-radius: 8px 3px 3px 8px; }
    .td-cal-day.range-end::after   { left: 1px; right: 4px; border-radius: 3px 8px 8px 3px; }
    .td-cal-day.range-start.range-end::after {
      left: 4px; right: 4px;
      border-radius: 8px;
    }

    /* START / END 라벨 (날짜 위쪽 작은 pill) */
    .td-cal-range-label {
      position: absolute;
      top: -9px;
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.10em;
      padding: 2px 6px;
      border-radius: 999px;
      color: white;
      box-shadow: 0 2px 8px rgba(76,29,149,0.55);
      pointer-events: none;
      white-space: nowrap;
      z-index: 3;
      left: 50%; transform: translateX(-50%);
    }
    .td-cal-day.range-start .td-cal-range-label {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .td-cal-day.range-end .td-cal-range-label {
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
    }

    /* 범위 안 별 → 흰색 (밴드 배경과 대비) */
    .td-cal-day.range .td-cal-star,
    .td-cal-day.range-start .td-cal-star,
    .td-cal-day.range-end .td-cal-star {
      color: white;
      text-shadow: 0 0 4px rgba(167,139,250,0.7);
    }

    /* hint footer */
    .td-cal-range-hint {
      margin-top: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(167,139,250,0.10);
      color: var(--accent);
      font-size: 11px;
      text-align: center;
      border: 1px dashed rgba(167,139,250,0.30);
    }
    .td-cal-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 6px;
      font-size: 10px;
      color: var(--text-faint);
    }
    .td-cal-legend { display: inline-flex; align-items: center; gap: 4px; }
    .td-cal-star-mini { color: var(--accent); font-size: 12px; line-height: 0.8; }
    .td-cal-streak {
      padding: 3px 8px;
      border-radius: var(--r-pill);
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
    }

    /* ── 오늘의 작업 일기 ── */
    .td-work-diary {
      padding: 14px 16px 12px;
      border-top: 1px solid var(--border);
    }
    .td-work-diary textarea {
      width: 100%; padding: 10px 12px;
      background: var(--bg-1); border: 1px solid var(--border);
      border-radius: var(--r-md); color: var(--text);
      font-family: var(--font-display); font-size: 13px;
      line-height: 1.6; resize: vertical; outline: none;
      min-height: 72px; box-sizing: border-box;
      transition: border-color .15s, box-shadow .15s;
    }
    .td-work-diary textarea:focus {
      border-color: rgba(167,139,250,0.55);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.10);
    }
    .td-diary-row {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 7px;
    }
    .td-diary-save-btn {
      padding: 4px 13px;
      background: linear-gradient(135deg,rgba(167,139,250,0.18),rgba(236,72,153,0.10));
      border: 1px solid rgba(167,139,250,0.40);
      color: var(--accent); border-radius: var(--r-sm);
      font-size: 11px; font-weight: 600; cursor: pointer;
      transition: all .15s;
    }
    .td-diary-save-btn:hover {
      background: linear-gradient(135deg,rgba(167,139,250,0.30),rgba(236,72,153,0.18));
      box-shadow: 0 4px 12px -4px rgba(167,139,250,0.35);
    }

    /* ── LAST WORK 프로젝트 투두 리스트 ── */
    .td-todo-card { padding: 22px 24px; }
    .td-todo-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .td-todo-continue {
      padding: 7px 14px;
      font-size: 12px; font-weight: 500;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      border-radius: var(--r-pill);
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .td-todo-continue:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(167,139,250,0.30);
    }
    .td-todo-add-btn {
      width: 32px; height: 32px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.30);
      color: var(--accent);
      font-size: 18px; font-weight: 600;
      cursor: pointer;
      transition: all var(--t-fast);
      flex-shrink: 0;
    }
    /* 재정렬 모드 — 화살표 버튼 only */
    .td-todo-item.reorder {
      transition: box-shadow 0.15s, background 0.15s;
      background: rgba(167,139,250,0.04);
    }
    .td-todo-item.reorder:hover {
      box-shadow: 0 0 0 1px rgba(167,139,250,0.30);
    }
    .td-todo-reorder-idx {
      width: 22px; height: 22px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-faint);
      font-size: 11px; font-weight: 700;
      user-select: none;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      transition: all 0.12s var(--ease-out, ease);
    }
    .td-todo-item.active .td-todo-reorder-idx {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.30);
      color: var(--accent);
    }
    .td-todo-item.done .td-todo-reorder-idx {
      background: rgba(52,211,153,0.10);
      border-color: rgba(52,211,153,0.30);
      color: #6ee7b7;
    }
    /* 재정렬 모드 — 강조 */
    .td-todo-reorder-idx.reorder-mode {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.40);
      color: var(--accent);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.08);
    }
    /* 모든 카드 — 22px 순번 컬럼 추가 */
    .td-todo-item { grid-template-columns: 22px 28px 1fr auto !important; }
    .td-todo-move-btn {
      min-width: 26px;
      padding: 4px 6px !important;
      font-size: 13px !important;
      line-height: 1 !important;
      background: transparent !important;
      border: 1px solid var(--border-strong) !important;
      color: var(--text-dim) !important;
    }
    .td-todo-move-btn:hover:not(:disabled) {
      background: var(--accent-soft) !important;
      color: var(--accent) !important;
      border-color: rgba(167,139,250,0.40) !important;
    }
    .td-todo-move-btn:disabled {
      opacity: 0.30;
      cursor: not-allowed;
    }

    .td-todo-reorder-btn {
      background: transparent !important;
      border-color: var(--border-strong) !important;
      color: var(--text-dim) !important;
      margin-left: 4px;
    }
    .td-todo-reorder-btn svg { display: block; }
    .td-todo-reorder-btn:hover {
      background: var(--accent-soft) !important;
      color: var(--accent) !important;
      border-color: rgba(167,139,250,0.40) !important;
    }
    .td-todo-reorder-btn.active {
      background: var(--accent) !important;
      color: white !important;
      border-color: var(--accent) !important;
    }
    .td-todo-clear-btn {
      background: transparent !important;
      border-color: rgba(248,113,113,0.30) !important;
      color: #fca5a5 !important;
      margin-left: 4px;
    }
    .td-todo-clear-btn svg { display: block; }
    .td-todo-clear-btn:hover {
      background: rgba(248,113,113,0.18) !important;
      color: #fecaca !important;
      border-color: #f87171 !important;
      transform: scale(1.05) !important;
    }
    .td-todo-add-btn:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
      transform: scale(1.08);
    }
    .td-resume-msg {
      margin-top: 6px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.45;
      display: none;
    }
    .td-resume-msg.has {
      display: block;
    }
    .td-resume-msg .rm-where {
      color: var(--accent);
      font-weight: 600;
    }
    .td-resume-msg .rm-ask {
      color: var(--text-faint);
      font-size: 12px;
      margin-left: 4px;
    }
    .td-todo-item {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 12px;
      padding: 10px 4px;
      border-radius: 8px;
      cursor: pointer;
      transition: background var(--t-fast);
    }
    .td-todo-item:hover { background: rgba(255,255,255,0.03); }
    .td-todo-item + .td-todo-item { border-top: 1px solid var(--border); padding-top: 12px; }
    .td-todo-item.active {
      background: color-mix(in srgb, var(--gc, #A78BFA) 08%, transparent);
    }
    .td-todo-item.done {
      opacity: 0.55;
    }
    .td-todo-checkbox {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 1.5px solid var(--gc, var(--accent));
      color: var(--gc, var(--accent));
      display: grid; place-items: center;
      font-size: 11px; font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .td-todo-item.done .td-todo-checkbox {
      background: var(--gc, var(--accent));
      color: white;
    }
    .td-todo-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .td-todo-name {
      display: flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 600; color: var(--text);
      flex-wrap: wrap;
    }
    .td-todo-color-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0;
    }
    .td-todo-chip {
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--bg-elev);
      color: var(--text-dim);
      font-weight: 500;
    }
    .td-todo-chip.urgent { background: rgba(248,113,113,0.18); color: #fca5a5; }
    .td-todo-chip.overdue { background: rgba(248,113,113,0.30); color: #fecaca; }
    .td-todo-meta {
      display: flex; gap: 6px; align-items: center;
      font-size: 11px; color: var(--text-faint);
      font-variant-numeric: tabular-nums;
    }
    .td-todo-meta .sep { opacity: 0.4; }
    .td-todo-bar {
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
      overflow: hidden;
    }
    .td-todo-bar-fill {
      height: 100%;
      transition: width 0.3s ease;
      box-shadow: 0 0 6px currentColor;
    }

    /* ── 항목 우측 액션 (수정 / 미니 캘린더 토글) ── */
    .td-todo-actions {
      display: flex; align-items: center; gap: 4px;
      flex-shrink: 0;
    }
    .td-todo-edit-btn {
      width: 28px; height: 28px;
      display: grid; place-items: center;
      border-radius: 6px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer;
      font-size: 13px;
      transition: all var(--t-fast);
    }
    .td-todo-edit-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(167,139,250,0.30); }
    .td-todo-edit-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
    .td-todo-edit-btn[data-resume-tgid] {
      color: var(--accent);
      border-color: rgba(167,139,250,0.30);
      font-size: 14px;
    }
    .td-todo-edit-btn[data-resume-tgid]:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .td-todo-edit-btn.td-todo-del-btn {
      color: var(--text-faint);
    }
    .td-todo-edit-btn.td-todo-del-btn:hover {
      background: rgba(248,113,113,0.16);
      color: #fca5a5;
      border-color: rgba(248,113,113,0.40);
    }
    .td-todo-edit-btn.td-todo-del-btn svg { display: block; }
    .td-todo-edit-btn.td-todo-archive-btn {
      color: var(--text-dim);
      font-weight: 700;
    }
    .td-todo-edit-btn.td-todo-archive-btn:hover {
      background: rgba(52,211,153,0.16);
      color: #6ee7b7;
      border-color: rgba(52,211,153,0.40);
    }
    /* LAST WORK 페이지네이션 */
    .td-todo-pager {
      user-select: none;
    }
    .td-todo-pager-btn {
      min-width: 30px;
      height: 28px;
      padding: 0 8px;
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all var(--t-fast);
    }
    .td-todo-pager-btn:hover:not(:disabled) {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(167,139,250,0.40);
    }
    .td-todo-pager-btn:disabled {
      opacity: 0.30;
      cursor: not-allowed;
    }
    .td-todo-pager-info {
      font-size: 11px;
      color: var(--text-dim);
      display: inline-flex;
      gap: 6px;
      align-items: baseline;
      padding: 0 6px;
    }
    .td-todo-pager-info strong {
      color: var(--text);
      font-weight: 700;
    }
    .td-todo-pager-info .sep {
      color: var(--text-faint);
      opacity: 0.6;
    }
    .td-todo-pager-info .td-todo-pager-page {
      padding: 1px 6px;
      background: var(--accent-soft);
      border-radius: 999px;
      color: var(--accent);
      font-weight: 600;
      font-size: 10px;
    }
    /* legacy fallback — 위 .td-todo-item 22px 28px 1fr auto 룰이 우선 적용됨 */
    .td-todo-edit-panel {
      grid-column: 1 / -1;
      margin-top: 10px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-1);
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 1fr);
      gap: 18px;
      align-items: stretch;
    }
    .td-todo-edit-panel.single {
      grid-template-columns: 1fr;
    }
    .td-todo-edit-panel.single .td-edit-side {
      padding-left: 0;
      border-left: 0;
    }
    @media (max-width: 720px) {
      .td-todo-edit-panel { grid-template-columns: 1fr; }
    }
    .td-edit-cal {
      display: flex; flex-direction: column;
      min-width: 0;
    }
    .td-edit-cal .td-edit-cal-grid { flex: 1; }
    .td-edit-cal-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .td-edit-cal-month { font-size: 13px; font-weight: 600; color: var(--text); }
    .td-edit-cal-nav {
      width: 24px; height: 24px;
      background: transparent; border: 1px solid var(--border);
      border-radius: 6px; color: var(--text-dim); cursor: pointer;
    }
    .td-edit-cal-dow {
      display: grid; grid-template-columns: repeat(7,1fr);
      font-size: 10px; color: var(--text-faint); text-align: center;
      margin-bottom: 4px;
    }
    .td-edit-cal-grid {
      display: grid; grid-template-columns: repeat(7,1fr);
      gap: 2px;
    }
    .td-edit-cal-cell {
      aspect-ratio: 1; display: grid; place-items: center;
      font-size: 11px; color: var(--text-dim);
      border-radius: 4px; cursor: pointer;
      background: transparent;
      border: 1px solid transparent;
      transition: background var(--t-fast);
    }
    .td-edit-cal-cell.other { color: var(--text-faint); opacity: 0.4; }
    .td-edit-cal-cell:hover { background: var(--bg-elev); }
    .td-edit-cal-cell.start, .td-edit-cal-cell.end {
      background: var(--ec-color, var(--accent));
      color: white; font-weight: 700;
    }
    .td-edit-cal-cell.in-range {
      background: color-mix(in srgb, var(--ec-color, var(--accent)) 25%, transparent);
      color: white;
    }
    .td-edit-side {
      display: flex; flex-direction: column; gap: 12px;
      min-width: 0;
      padding-left: 14px;
      border-left: 1px solid var(--border);
    }
    @media (max-width: 720px) {
      .td-edit-side { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--border); }
    }
    .td-edit-side h4 {
      margin: 0;
      font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 700;
    }
    .td-edit-log {
      display: flex; flex-direction: column; gap: 6px;
      flex: 1;
    }
    .td-edit-log-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
    }
    .td-edit-log-date {
      font-size: 12px; color: var(--accent); font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .td-edit-log-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 4px;
      max-height: 90px; overflow-y: auto;
    }
    .td-edit-log-list li {
      font-size: 11px; color: var(--text-dim);
      padding: 4px 8px;
      background: var(--bg-elev);
      border-radius: 4px;
      cursor: pointer;
      display: flex; gap: 8px; align-items: baseline;
    }
    .td-edit-log-list li:hover { background: var(--accent-soft); color: var(--text); }
    .td-edit-log-list li .ll-date { color: var(--accent); font-weight: 600; flex-shrink: 0; }
    .td-edit-log-list li .ll-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .td-edit-log textarea {
      width: 100%;
      min-height: 70px;
      padding: 10px 12px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      resize: vertical;
    }
    .td-edit-log textarea:focus {
      outline: none;
      border-color: var(--accent);
    }
    /* 캘린더 셀에 로그 표시 점 */
    .td-edit-cal-cell.has-log::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px; height: 4px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 4px #34d399;
    }
    .td-edit-cal-cell { position: relative; }
    .td-edit-cal-cell.log-selected {
      box-shadow: 0 0 0 1.5px var(--accent);
    }
    .td-edit-field {
      display: flex; flex-direction: column; gap: 4px;
      font-size: 11px; color: var(--text-faint);
    }
    .td-edit-field input, .td-edit-field select {
      width: 100%;
      padding: 7px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
    }
    .td-edit-row { display: flex; gap: 6px; }
    .td-edit-color-swatch {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
    }
    .td-edit-color-swatch.active {
      border-color: var(--text);
      box-shadow: 0 0 0 1px var(--bg-1) inset;
    }
    .td-edit-actions { display: flex; gap: 6px; margin-top: 4px; }
    .td-edit-btn {
      flex: 1;
      padding: 8px 12px;
      border-radius: 6px; cursor: pointer;
      font-size: 12px; font-weight: 600;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      transition: all var(--t-fast);
    }
    .td-edit-btn.primary {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .td-edit-btn.danger {
      background: rgba(248,113,113,0.12);
      color: #fca5a5;
      border-color: rgba(248,113,113,0.30);
    }
    .td-edit-btn:hover { filter: brightness(1.1); }
    .td-edit-hint {
      font-size: 11px;
      color: var(--text-faint);
      padding: 6px 8px;
      background: var(--bg-elev);
      border-radius: 6px;
    }

    /* ═══ Flow Guide (A안: Today 동적 허브) ═══ */
    #td-flow-guide {
      margin-bottom: 20px;
      padding: 18px 20px 16px;
      border-radius: var(--r-xl);
      background: var(--bg-card);
      border: 1px solid var(--border);
    }
    .fg-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .fg-project-tag {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: 999px;
      padding: 2px 10px;
    }
    .fg-project-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
    }
    /* progress row */
    .fg-progress {
      display: flex; align-items: center; gap: 0;
      margin-bottom: 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .fg-progress::-webkit-scrollbar { display: none; }
    .fg-dot {
      display: flex; flex-direction: column; align-items: center;
      gap: 4px; min-width: 52px; position: relative;
    }
    .fg-dot-icon {
      width: 34px; height: 34px;
      border-radius: 50%;
      display: grid; place-items: center;
      font-size: 15px;
      border: 2px solid var(--border);
      background: var(--bg-1);
      transition: all 0.2s;
    }
    .fg-dot--done .fg-dot-icon {
      background: color-mix(in srgb, #6ee7b7 15%, transparent);
      border-color: #6ee7b7;
    }
    .fg-dot--current .fg-dot-icon {
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .fg-dot--pending .fg-dot-icon {
      opacity: 0.38;
    }
    .fg-dot-label {
      font-size: 9.5px; color: var(--text-faint); text-align: center;
      white-space: nowrap; letter-spacing: 0.03em;
    }
    .fg-dot--done .fg-dot-label { color: #6ee7b7; }
    .fg-dot--current .fg-dot-label { color: var(--accent); font-weight: 700; }
    .fg-dot-arrow {
      font-size: 9px; color: var(--accent);
      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    }
    .fg-dot-connector {
      flex: 1; height: 2px;
      background: var(--border);
      min-width: 12px; max-width: 28px;
      margin-bottom: 14px;
    }
    /* CTA card */
    .fg-cta {
      display: flex; align-items: center; gap: 14px;
      padding: 13px 16px;
      border-radius: var(--r-lg);
      border: 1px solid var(--border);
      background: var(--bg-1);
    }
    .fg-cta--next {
      border-color: color-mix(in srgb, var(--accent) 35%, transparent);
      background: color-mix(in srgb, var(--accent) 6%, transparent);
    }
    .fg-cta--done {
      border-color: color-mix(in srgb, #6ee7b7 35%, transparent);
      background: color-mix(in srgb, #6ee7b7 6%, transparent);
    }
    .fg-cta--start {
      border-color: color-mix(in srgb, var(--accent) 35%, transparent);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
    .fg-cta-icon { font-size: 22px; flex-shrink: 0; }
    .fg-cta-text {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .fg-cta-text strong {
      font-size: 13px; font-weight: 700; color: var(--text);
    }
    .fg-cta-text span {
      font-size: 11px; color: var(--text-faint);
    }
    .fg-cta-btn {
      flex-shrink: 0;
      padding: 7px 14px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .fg-cta-btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
    .fg-cta-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #0d0d14;
    }
    .fg-cta-btn.primary:hover { opacity: 0.88; transform: translateY(-1px); }
    @media (max-width: 600px) {
      .fg-cta { flex-wrap: wrap; }
      .fg-cta-btn { width: 100%; text-align: center; }
      .fg-dot { min-width: 40px; }
      .fg-dot-icon { width: 28px; height: 28px; font-size: 13px; }
    }

    /* ═══ Production Signature Cards ═══ */
    .td-sig-card {
      padding: 18px 20px;
      border-radius: var(--r-xl);
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 12px;
    }
    .td-sig-head {
      display: flex; align-items: center; gap: 10px;
    }
    .td-sig-icon {
      width: 26px; height: 26px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--sigc, var(--accent)) 18%, transparent);
      color: var(--sigc, var(--accent));
      display: grid; place-items: center;
      font-size: 13px; font-weight: 700;
      flex-shrink: 0;
    }
    .td-sig-title {
      flex: 1;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      font-weight: 700;
    }
    .td-sig-pill {
      padding: 2px 8px;
      border-radius: var(--r-pill);
      background: var(--bg-elev);
      color: var(--text-dim);
      font-size: 10px; font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .td-sig-empty {
      font-size: 12px;
      color: var(--text-faint);
      padding: 14px 4px;
      text-align: center;
    }

    /* Task list */
    .td-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
    .td-task-row {
      display: grid;
      grid-template-columns: 22px 1fr 22px;
      gap: 10px; align-items: center;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .td-task-row:hover { border-color: rgba(167,139,250,0.40); background: rgba(167,139,250,0.05); }
    .td-task-row.done { opacity: 0.5; }
    .td-task-row.done .td-task-title { text-decoration: line-through; }
    .td-task-check {
      width: 20px; height: 20px;
      border-radius: 6px;
      border: 1.5px solid var(--border-strong);
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font-size: 12px; font-weight: 700;
      display: grid; place-items: center;
    }
    .td-task-check:hover { border-color: var(--accent); }
    .td-task-row.done .td-task-check { background: var(--accent); color: white; border-color: var(--accent); }
    .td-task-body { min-width: 0; }
    .td-task-title {
      font-size: 13px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-task-detail {
      font-size: 11px; color: var(--text-faint);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-task-go {
      width: 22px; height: 22px;
      border-radius: 6px; background: transparent;
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer; font-size: 11px;
    }

    /* Health gauge */
    .td-health-row {
      display: flex; gap: 14px; align-items: center;
    }
    .td-health-gauge {
      width: 86px; height: 86px;
      border-radius: 50%;
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .td-health-gauge-inner {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: var(--bg-card);
      display: grid; place-items: center;
      text-align: center;
    }
    .td-health-score {
      font-size: 24px; font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .td-health-suffix {
      font-size: 9px; color: var(--text-faint);
      margin-top: 2px;
    }
    .td-health-factors {
      list-style: none; padding: 0; margin: 0;
      flex: 1;
      display: flex; flex-direction: column; gap: 5px;
      min-width: 0;
    }
    .td-health-factors li {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 6px; align-items: baseline;
      font-size: 11px;
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }
    .td-health-factors li:last-child { border-bottom: 0; }
    .td-health-factors .f-name { color: var(--text-dim); font-weight: 600; }
    .td-health-factors .f-val {
      color: var(--text); font-size: 10px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      max-width: 110px;
      font-variant-numeric: tabular-nums;
    }
    .td-health-factors .f-delta {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      color: var(--text-faint);
    }
    .td-health-factors li.ok .f-delta { color: #6ee7b7; }
    .td-health-factors li.warn .f-delta { color: #fdba74; }

    /* Stuck list */
    .td-stuck-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
    .td-stuck-row {
      display: grid;
      grid-template-columns: 26px 1fr 22px;
      gap: 10px; align-items: center;
      padding: 8px 10px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--sevc, var(--accent)) 06%, var(--bg-1));
      border: 1px solid color-mix(in srgb, var(--sevc, var(--accent)) 20%, var(--border));
      border-left: 3px solid var(--sevc, var(--accent));
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .td-stuck-row:hover { background: color-mix(in srgb, var(--sevc, var(--accent)) 12%, var(--bg-1)); }
    .td-stuck-icon {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--sevc, var(--accent)) 22%, transparent);
      color: var(--sevc, var(--accent));
      display: grid; place-items: center;
      font-size: 12px; font-weight: 700;
    }
    .td-stuck-body { min-width: 0; }
    .td-stuck-title {
      font-size: 12px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-stuck-action {
      font-size: 10px; color: var(--text-faint);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-stuck-go {
      width: 22px; height: 22px;
      border-radius: 6px; background: transparent;
      border: 1px solid color-mix(in srgb, var(--sevc, var(--accent)) 30%, var(--border));
      color: var(--sevc, var(--accent));
      cursor: pointer; font-size: 11px;
    }

    /* Quick Resume */
    .td-resume-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
    }
    .td-resume-card {
      padding: 14px;
      border-radius: 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 6px;
      text-align: left; cursor: pointer;
      transition: all var(--t-fast);
    }
    .td-resume-card:hover {
      border-color: rgba(167,139,250,0.40);
      background: rgba(167,139,250,0.04);
      transform: translateY(-1px);
    }
    .td-resume-type {
      font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent); font-weight: 700;
    }
    .td-resume-title {
      font-size: 13px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-resume-sub {
      font-size: 11px; color: var(--text-dim);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .td-resume-time {
      font-size: 10px; color: var(--text-faint);
      font-variant-numeric: tabular-nums;
    }
    .td-resume-cta {
      margin-top: 4px;
      font-size: 11px; color: var(--accent); font-weight: 600;
    }

    /* ── 멀티 프로젝트 탭 ── */
    .td-goal-tabs {
      display: flex; gap: 6px; flex-wrap: wrap;
      padding: 4px;
      margin-bottom: 10px;
      overflow-x: auto;
    }
    .td-goal-tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 12px; font-weight: 500;
      cursor: pointer;
      transition: all var(--t-fast);
      flex-shrink: 0;
      white-space: nowrap;
    }
    .td-goal-tab:hover { color: var(--text); border-color: var(--border-strong); }
    .td-goal-tab.active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--gc, #A78BFA) 22%, transparent), var(--bg-elev));
      color: white;
      border-color: var(--gc, var(--accent));
      box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gc, #A78BFA) 50%, transparent);
    }
    .td-goal-tab-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--gc, var(--accent));
      flex-shrink: 0;
    }
    .td-goal-tab-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
    .td-goal-tab-dl {
      font-family: var(--font-mono); font-size: 10px;
      padding: 2px 6px;
      background: rgba(0,0,0,0.30);
      border-radius: 4px;
      color: var(--text-dim);
    }
    .td-goal-tab.active .td-goal-tab-dl { color: white; background: rgba(0,0,0,0.40); }
    .td-goal-tab-add {
      padding: 8px 12px;
      font-size: 14px;
      color: var(--text-faint);
      border: 1px dashed var(--border-strong);
      background: transparent;
    }
    .td-goal-tab-add:hover { color: var(--accent); border-color: var(--accent); }

    /* 활성 카드 색상 변수 적용 */
    .td-goal-active {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--gc, #7c3aed) 18%, transparent), color-mix(in srgb, var(--gc, #8b5cf6) 04%, transparent) 70%, var(--bg-card)) !important;
      border-color: color-mix(in srgb, var(--gc, #8b5cf6) 30%, transparent) !important;
    }
    .td-goal-color-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      box-shadow: 0 0 6px currentColor;
    }

    /* 색상 picker */
    .td-goal-color-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 0;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }
    .td-goal-color-label {
      font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 600;
    }
    .td-goal-color-pick {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .td-goal-color-swatch {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all var(--t-fast);
      padding: 0;
    }
    .td-goal-color-swatch:hover { transform: scale(1.15); }
    .td-goal-color-swatch.active {
      border-color: white;
      box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
      transform: scale(1.1);
    }
    /* 프로젝트 타입 chip 그리드 */
    .proj-type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: 6px;
      margin-top: 4px;
      margin-bottom: 14px;
    }
    .proj-type-chip {
      display: flex; flex-direction: column; align-items: center;
      gap: 4px;
      padding: 10px 6px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t-fast);
      font-family: inherit;
      text-align: center;
    }
    .proj-type-chip:hover {
      background: var(--bg-elev);
      border-color: rgba(167,139,250,0.30);
      color: var(--text);
      transform: translateY(-1px);
    }
    .proj-type-chip.active {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent), 0 4px 12px -4px rgba(167,139,250,0.30);
    }
    .proj-type-icon {
      font-size: 18px;
      line-height: 1;
    }
    .proj-type-label {
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    @media (max-width: 768px) {
      .proj-type-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* 캘린더 다른 프로젝트 색 점 */
    .td-cal-dots {
      position: absolute;
      bottom: 2px;
      display: flex; gap: 2px;
      pointer-events: none;
    }
    .td-cal-other-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      box-shadow: 0 0 4px currentColor;
    }

    /* ── Deadline Goal Card ── */
    .td-goal-empty {
      padding: 22px;
      border-radius: var(--r-xl);
      border: 1px dashed rgba(167,139,250,0.30);
      background: var(--bg-card);
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .td-goal-empty-icon {
      width: 44px; height: 44px;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .td-goal-empty-text { flex: 1; min-width: 200px; }
    .td-goal-empty-text h3 {
      margin: 0 0 4px;
      font-family: var(--font-display);
      font-size: 17px; font-weight: 600;
      color: var(--text);
    }
    .td-goal-empty-text p {
      margin: 0; font-size: 13px;
      color: var(--text-dim);
    }
    .td-goal-empty-cta {
      padding: 10px 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; border: 0;
      border-radius: var(--r-md);
      font-weight: 600; font-size: 13px;
      cursor: pointer;
      box-shadow: var(--shadow-accent);
    }

    .td-goal-active {
      padding: 22px 26px;
      border-radius: var(--r-xl);
      background:
        linear-gradient(135deg, rgba(76,29,149,0.20), rgba(139,92,246,0.04) 70%, var(--bg-card));
      border: 1px solid rgba(139,92,246,0.30);
    }
    .td-goal-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .td-goal-name {
      font-family: var(--font-display);
      font-size: 19px; font-weight: 600;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .td-goal-deadline {
      font-size: 12px; color: var(--text-dim);
      font-family: var(--font-mono);
    }
    .td-goal-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }
    .td-goal-stat-label {
      font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 600;
      margin-bottom: 4px;
    }
    .td-goal-stat-val {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 600;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .td-goal-stat-val.urgent { color: #fca5a5; }
    .td-goal-stat-val.healthy { color: #6ee7b7; }
    .td-goal-stat-sub {
      font-size: 11px; color: var(--text-faint);
      margin-top: 2px;
    }
    .td-goal-progress {
      height: 6px;
      background: var(--bg-elev);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .td-goal-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width 0.3s ease;
    }
    .td-goal-actions {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .td-goal-btn {
      padding: 8px 14px;
      font-size: 12px; font-weight: 500;
      border-radius: var(--r-sm);
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .td-goal-btn:hover { color: var(--text); border-color: var(--border-strong); }
    .td-goal-btn.primary {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.30);
      color: var(--accent);
    }
    .td-goal-btn.danger:hover { color: #fca5a5; border-color: rgba(248,113,113,0.35); }

    /* Goal 설정 모달 */
    .td-goal-modal {
      position: fixed; inset: 0; z-index: 260;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      display: grid; place-items: center;
      animation: fadeIn 0.2s ease;
    }
    .td-goal-modal-panel {
      width: min(440px, calc(100vw - 32px));
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: 24px;
      animation: slideUp 0.25s var(--ease-spring);
    }
    .td-goal-modal-panel h3 {
      margin: 0 0 6px;
      font-family: var(--font-display);
      font-size: 19px; font-weight: 600;
      color: var(--text);
    }
    .td-goal-modal-panel p {
      margin: 0 0 18px;
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.6;
    }
    .td-goal-modal-panel label {
      display: block;
      font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 600;
      margin-bottom: 6px; margin-top: 12px;
    }
    .td-goal-modal-panel input,
    .td-goal-modal-panel select {
      width: 100%;
      height: 40px; padding: 0 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text);
      font-family: inherit; font-size: 14px;
      outline: none;
    }
    .td-goal-modal-panel input:focus,
    .td-goal-modal-panel select:focus {
      border-color: rgba(167,139,250,0.50);
    }

    /* ── 미니 날짜 피커 ── */
    .goal-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .goal-date-field { position: relative; }
    .goal-date-field > label {
      display: block;
      font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 600;
      margin-bottom: 6px; margin-top: 0;
    }
    .goal-date-btn {
      width: 100%;
      height: 40px;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text);
      font-family: inherit; font-size: 14px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      text-align: left;
    }
    .goal-date-btn:hover { border-color: rgba(167,139,250,0.40); background: var(--bg-elev); }
    .goal-date-btn.open { border-color: rgba(167,139,250,0.60); box-shadow: 0 0 0 3px rgba(167,139,250,0.14); }
    .goal-date-btn svg { flex-shrink: 0; opacity: 0.5; }
    .goal-date-btn span { flex: 1; }
    .goal-mini-cal {
      position: absolute;
      left: 0; top: calc(100% + 6px);
      width: 240px;
      background: var(--bg-elev);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-md), 0 0 0 1px rgba(167,139,250,0.12);
      z-index: 10;
      padding: 12px;
      animation: slideUp 0.18s var(--ease-spring);
    }
    .goal-mini-cal.hidden { display: none; }
    .gmc-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .gmc-month {
      font-size: 13px; font-weight: 700;
      color: var(--text);
    }
    .gmc-nav {
      width: 26px; height: 26px;
      display: grid; place-items: center;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text-dim);
      font-size: 13px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .gmc-nav:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(167,139,250,0.3); }
    .gmc-dow {
      display: grid; grid-template-columns: repeat(7, 1fr);
      margin-bottom: 4px;
    }
    .gmc-dow span {
      text-align: center; font-size: 10px;
      color: var(--text-whisper); font-weight: 600;
      padding: 2px 0;
    }
    .gmc-grid {
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .gmc-day {
      aspect-ratio: 1;
      display: grid; place-items: center;
      border-radius: 8px;
      font-size: 12px; font-weight: 500;
      cursor: pointer;
      color: var(--text-dim);
      transition: background 0.12s, color 0.12s;
      border: 1px solid transparent;
    }
    .gmc-day:hover:not(.gmc-empty):not(.gmc-selected) {
      background: var(--accent-soft);
      color: var(--accent);
    }
    .gmc-day.gmc-today {
      color: var(--accent-3);
      font-weight: 700;
    }
    .gmc-day.gmc-selected {
      background: var(--accent);
      color: white;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(167,139,250,0.35);
    }
    .gmc-day.gmc-empty { cursor: default; pointer-events: none; }
    .gmc-day.gmc-other { color: var(--text-whisper); }

    .td-goal-modal-actions {
      display: flex; gap: 8px; justify-content: flex-end;
      margin-top: 22px;
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ SETTINGS PAGE
       ════════════════════════════════════════════════════════════ */
    .settings-card {
      padding: 22px 20px;
      border-radius: var(--r-xl);
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: all var(--t-fast) var(--ease-smooth);
      display: flex; flex-direction: column; gap: 8px;
    }
    .settings-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .settings-icon {
      width: 36px; height: 36px;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      display: grid; place-items: center;
    }
    .settings-card h3 {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.018em;
      margin: 4px 0 0;
      color: var(--text);
    }
    .settings-card p {
      margin: 0;
      font-size: 13px;
      color: var(--text-faint);
      line-height: 1.5;
    }
    .settings-cta {
      margin-top: auto;
      padding: 8px 12px;
      align-self: flex-start;
      font-size: 12px;
      font-weight: 500;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: var(--r-sm);
    }
    .settings-cta:hover {
      background: rgba(167,139,250,0.18);
    }

    /* ═══ P2-07 Team Management Modal ═══════════════════════════ */
    .team-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.55);
      z-index: 9100; display: none; place-items: center;
    }
    .team-modal-overlay.open { display: grid; }
    .team-modal {
      background: var(--bg-card); border: 1px solid var(--border-strong);
      border-radius: var(--r-xl); width: min(560px, 95vw);
      max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .team-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
    }
    .team-modal-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
    .team-modal-close {
      background: none; border: none; color: var(--text-faint);
      font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm);
    }
    .team-modal-close:hover { background: var(--bg-1); color: var(--text); }
    .team-modal-tabs {
      display: flex; gap: 2px; padding: 10px 20px 0;
      background: var(--bg-card); border-bottom: 1px solid var(--border);
    }
    .team-modal-tab {
      padding: 8px 14px; font-size: 12px; font-weight: 500;
      color: var(--text-dim); background: none; border: none; cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
    }
    .team-modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .team-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
    .team-tab-panel { display: none; }
    .team-tab-panel.active { display: block; }
    /* Member list */
    .team-member-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .team-member-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 12px;
      background: var(--bg-1); border-radius: var(--r-md); border: 1px solid var(--border);
    }
    .team-member-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--accent-soft); color: var(--accent);
      font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
    }
    .team-member-info { flex: 1; min-width: 0; }
    .team-member-name { font-size: 13px; font-weight: 500; color: var(--text); }
    .team-member-email { font-size: 11px; color: var(--text-faint); }
    .team-role-badge {
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; padding: 3px 7px; border-radius: 99px; flex-shrink: 0;
    }
    .team-role-badge.owner  { background: rgba(167,139,250,.18); color: #a78bfa; }
    .team-role-badge.editor { background: rgba(34,211,238,.12); color: #22d3ee; }
    .team-role-badge.viewer { background: rgba(100,116,139,.15); color: #94a3b8; }
    .team-status-pill { font-size: 10px; padding: 2px 6px; border-radius: 99px; flex-shrink: 0; }
    .team-status-pill.active  { background: rgba(52,211,153,.12); color: #34d399; }
    .team-status-pill.pending { background: rgba(251,191,36,.12); color: #fbbf24; }
    .team-member-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .team-member-btn {
      font-size: 11px; padding: 3px 7px; border-radius: var(--r-sm);
      background: var(--bg-card); border: 1px solid var(--border);
      color: var(--text-dim); cursor: pointer;
    }
    .team-member-btn:hover { border-color: var(--accent); color: var(--accent); }
    .team-member-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
    /* Invite form */
    .team-invite-form { display: flex; flex-direction: column; gap: 14px; }
    .team-invite-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
    .team-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
    .team-field label { font-size: 11px; color: var(--text-dim); font-weight: 500; }
    .team-field input, .team-field select {
      padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--border);
      border-radius: var(--r-sm); color: var(--text); font-size: 13px;
    }
    .team-field input:focus, .team-field select:focus { border-color: var(--accent); outline: none; }
    .team-field select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center;
      background-size: 14px; padding-right: 28px;
    }
    .team-invite-btn {
      padding: 8px 16px; background: var(--accent); color: #fff; border: none;
      border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
      cursor: pointer; white-space: nowrap; align-self: flex-end;
    }
    .team-invite-btn:hover { filter: brightness(1.1); }
    /* Permissions table */
    .team-perm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .team-perm-table th {
      text-align: left; padding: 8px 10px; color: var(--text-dim);
      font-weight: 500; border-bottom: 1px solid var(--border);
    }
    .team-perm-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
    .team-perm-table tr:last-child td { border-bottom: none; }
    .team-perm-check { color: #34d399; font-size: 14px; }
    .team-perm-cross { color: #475569; font-size: 14px; }
    /* Plan gate */
    .team-gate { text-align: center; padding: 32px 20px; }
    .team-gate .team-gate-icon { font-size: 38px; margin-bottom: 12px; }
    .team-gate h3 { font-size: 15px; margin: 0 0 8px; color: var(--text); }
    .team-gate p { font-size: 13px; color: var(--text-faint); margin: 0 0 20px; line-height: 1.6; }
    .team-gate-btn {
      padding: 10px 22px; background: var(--accent); color: #fff; border: none;
      border-radius: var(--r-md); font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .team-gate-btn:hover { filter: brightness(1.1); }
    /* ═══════════════════════════════════════════════════════════ */

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ SIDEBAR — Section labels (MAIN/CREATE/MEMORY/SYSTEM)
       ════════════════════════════════════════════════════════════ */
    .nav-section-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--text-whisper);
      text-transform: uppercase;
      padding: 12px 12px 6px;
      user-select: none;
    }
    .nav-section-label:first-child { padding-top: 4px; }
    /* 모바일 컴팩트 사이드바에서는 라벨 숨김 (대신 디바이더로) */
    @media (max-width: 880px) {
      .nav-section-label {
        font-size: 0;
        padding: 6px 0;
        height: 1px;
        background: var(--border);
        margin: 4px 12px;
      }
    }

    /* ── Library 날짜 필터 칩 ── */
    .lib-date-chip {
      padding: 6px 12px;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .lib-date-chip:hover { color: var(--text); border-color: var(--border-strong); }
    .lib-date-chip.active {
      background: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(124,58,237,0.10));
      color: var(--accent);
      border-color: rgba(167,139,250,0.40);
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ PROMPTS LIBRARY — Production Memory System
       ════════════════════════════════════════════════════════════ */
    .pl-filters-row {
      display: grid;
      grid-template-columns: minmax(200px, 1.4fr) repeat(5, minmax(110px, 1fr));
      gap: 8px;
      margin-bottom: var(--s-3);
    }
    @media (max-width: 1100px) {
      .pl-filters-row { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 700px) {
      .pl-filters-row { grid-template-columns: 1fr 1fr; }
    }
    .pl-search {
      position: relative;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      transition: border-color var(--t-fast);
    }
    .pl-search:focus-within {
      border-color: rgba(167,139,250,0.50);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.10);
    }
    .pl-search svg { color: var(--text-faint); flex-shrink: 0; }
    .pl-search input {
      flex: 1;
      height: 38px;
      background: transparent;
      border: 0; outline: none;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
    }
    .pl-search input::placeholder { color: var(--text-faint); }
    .pl-select {
      height: 38px;
      padding: 0 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text-dim);
      font-size: 12px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      transition: border-color var(--t-fast);
    }
    .pl-select:hover { color: var(--text); border-color: var(--border-strong); }
    .pl-select:focus { border-color: rgba(167,139,250,0.50); }

    .pl-stats {
      display: flex; align-items: center; gap: var(--s-3);
      padding: var(--s-3) 2px;
      font-size: 12px;
      color: var(--text-faint);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--s-3);
      flex-wrap: wrap;
    }
    .pl-stats strong { color: var(--text-dim); font-weight: 600; }
    .pl-stat-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 8px;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      font-size: 11px;
    }
    .pl-stat-pill .dot { width: 6px; height: 6px; border-radius: 50%; }

    /* 카드 리스트 — 한 행 짜리 timeline 카드 */
    .pl-list {
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .pl-empty {
      padding: 80px 20px; text-align: center;
      color: var(--text-faint); font-size: 13px;
      border: 1px dashed var(--border); border-radius: var(--r-xl);
      background: var(--bg-card);
    }
    .pl-empty strong { color: var(--text-dim); display:block; margin-bottom: 6px; font-family: var(--font-display); font-size: 17px; }

    .pl-card {
      display: grid;
      grid-template-columns: 4px 1fr auto;
      gap: 14px;
      padding: 14px 16px 14px 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      cursor: pointer;
      transition: border-color var(--t-fast) var(--ease-smooth),
                  background var(--t-fast) var(--ease-smooth),
                  transform var(--t-fast) var(--ease-spring);
      position: relative;
      overflow: hidden;
    }
    .pl-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    /* 좌측 status accent 바 */
    .pl-status-bar {
      width: 4px;
      background: var(--text-faint);
      border-radius: 2px 0 0 2px;
    }
    .pl-card[data-status="draft"]     .pl-status-bar { background: #94a3b8; }    /* slate */
    .pl-card[data-status="generated"] .pl-status-bar { background: #60a5fa; }    /* sky */
    .pl-card[data-status="used"]      .pl-status-bar { background: #22d3ee; }    /* cyan */
    .pl-card[data-status="approved"]  .pl-status-bar { background: #34d399; }    /* green */
    .pl-card[data-status="final"]     .pl-status-bar { background: var(--accent); }
    .pl-card[data-status="failed"]    .pl-status-bar { background: #f87171; }   /* rose */
    .pl-card[data-status="archived"]  .pl-status-bar { background: #4b5563; opacity: 0.6; }
    .pl-card[data-status="archived"] { opacity: 0.55; }

    .pl-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 0; }
    .pl-head-row {
      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    }
    .pl-name {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--text);
      letter-spacing: -0.01em;
      font-weight: 600;
    }
    .pl-version {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
      padding: 1px 6px;
      background: var(--bg-elev);
      border-radius: 4px;
    }
    .pl-status-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px;
      border-radius: var(--r-pill);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .pl-status-chip[data-s="draft"]     { background: rgba(148,163,184,0.15); color: #cbd5e1; }
    .pl-status-chip[data-s="generated"] { background: rgba(96,165,250,0.15);  color: #93c5fd; }
    .pl-status-chip[data-s="used"]      { background: rgba(34,211,238,0.15);  color: #67e8f9; }
    .pl-status-chip[data-s="approved"]  { background: rgba(52,211,153,0.15);  color: #6ee7b7; }
    .pl-status-chip[data-s="final"]     { background: rgba(167,139,250,0.18); color: #c4b5fd; }
    .pl-status-chip[data-s="failed"]    { background: rgba(248,113,113,0.15); color: #fca5a5; }
    .pl-status-chip[data-s="archived"]  { background: rgba(75,85,99,0.20);    color: #9ca3af; }

    .pl-prompt-text {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
    .pl-meta-row {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px;
      color: var(--text-faint);
      flex-wrap: wrap;
    }
    .pl-meta-row .sep { opacity: 0.4; }
    .pl-tag {
      padding: 2px 7px;
      border-radius: var(--r-xs);
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 10px;
    }
    .pl-tag.purple { background: var(--accent-soft); color: var(--accent); border-color: rgba(167,139,250,0.20); }

    .pl-actions {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 4px 4px 0;
    }
    .pl-icon-btn {
      width: 28px; height: 28px;
      border-radius: var(--r-sm);
      background: transparent;
      border: 0;
      color: var(--text-faint);
      display: grid; place-items: center;
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .pl-icon-btn:hover {
      background: var(--bg-card-hover);
      color: var(--text);
    }
    .pl-icon-btn.success:hover { color: #6ee7b7; }
    .pl-icon-btn.danger:hover { color: #fca5a5; }
    .pl-icon-btn.purple:hover { color: var(--accent); }

    /* ── 상세 사이드 패널 ── */
    .pl-detail-overlay {
      position: fixed; inset: 0; z-index: 250;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      animation: fadeIn 0.2s ease;
    }
    .pl-detail-panel {
      position: fixed; right: 0; top: 0; bottom: 0;
      width: min(560px, 100vw);
      background: var(--bg-elev);
      border-left: 1px solid var(--border-strong);
      box-shadow: var(--shadow-lg);
      z-index: 251;
      display: flex; flex-direction: column;
      animation: slideInR 0.32s var(--ease-out);
    }
    @keyframes slideInR {
      from { transform: translateX(100%); opacity: 0.5; }
      to   { transform: translateX(0); opacity: 1; }
    }
    .pl-detail-head {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 10px;
    }
    .pl-detail-close {
      position: absolute; top: 14px; right: 14px;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer;
      display: grid; place-items: center;
    }
    .pl-detail-close:hover { color: var(--text); background: var(--bg-card-hover); }
    .pl-detail-name {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-dim);
      letter-spacing: -0.01em;
    }
    .pl-detail-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--text);
      margin: 0;
      line-height: 1.2;
    }
    .pl-detail-meta {
      display: flex; gap: 8px; flex-wrap: wrap;
      font-size: 11px; color: var(--text-faint);
    }

    .pl-detail-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
    .pl-detail-section { display: flex; flex-direction: column; gap: 8px; }
    .pl-detail-section h4 {
      font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-faint); font-weight: 700; margin: 0;
    }
    .pl-detail-prompt {
      padding: 14px 16px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      font-size: 13.5px; line-height: 1.65;
      color: var(--text); white-space: pre-wrap;
      max-height: 260px; overflow-y: auto;
    }
    .pl-status-actions {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .pl-status-btn {
      padding: 8px 12px;
      border-radius: var(--r-sm);
      font-size: 12px; font-weight: 500;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t-fast);
      display: inline-flex; align-items: center; gap: 5px;
    }
    .pl-status-btn:hover { color: var(--text); border-color: var(--border-strong); }
    .pl-status-btn.active[data-act="approved"] { background: rgba(52,211,153,0.18); color: #6ee7b7; border-color: rgba(52,211,153,0.35); }
    .pl-status-btn.active[data-act="final"]    { background: rgba(167,139,250,0.20); color: #c4b5fd; border-color: rgba(167,139,250,0.40); }
    .pl-status-btn.active[data-act="failed"]   { background: rgba(248,113,113,0.18); color: #fca5a5; border-color: rgba(248,113,113,0.35); }
    .pl-status-btn.active[data-act="archived"] { background: rgba(75,85,99,0.25); color: #9ca3af; }

    .pl-action-row {
      display: flex; gap: 8px; flex-wrap: wrap;
      padding-top: 4px;
    }
    .pl-primary-btn, .pl-secondary-btn {
      padding: 9px 14px;
      border-radius: var(--r-sm);
      font-size: 12px; font-weight: 500;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      transition: all var(--t-fast);
    }
    .pl-primary-btn {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; border: 0;
    }
    .pl-primary-btn:hover { transform: translateY(-1px); }
    .pl-secondary-btn {
      background: var(--bg-card); color: var(--text-dim);
      border: 1px solid var(--border);
    }
    .pl-secondary-btn:hover { color: var(--text); border-color: var(--border-strong); }

    .pl-tags-input {
      display: flex; flex-wrap: wrap; gap: 4px;
      padding: 8px 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }
    .pl-tags-input input {
      flex: 1; min-width: 80px;
      background: transparent; border: 0; outline: none;
      color: var(--text); font-family: inherit; font-size: 12px;
    }
    .pl-version-tree {
      display: flex; flex-direction: column;
      gap: 4px; padding: 4px 0;
    }
    .pl-version-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px;
      font-size: 11px; color: var(--text-dim);
      border-radius: var(--r-xs);
      cursor: pointer;
    }
    .pl-version-row:hover { background: var(--bg-card-hover); color: var(--text); }
    .pl-version-row.current { color: var(--accent); }
    .pl-version-row .v-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    .pl-activity {
      max-height: 180px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 4px;
      font-size: 11px;
    }
    .pl-activity-item {
      display: flex; gap: 8px; padding: 5px 8px;
      color: var(--text-faint);
      border-radius: 4px;
    }
    .pl-activity-item:hover { background: var(--bg-card-hover); }
    .pl-activity-item .v-time { color: var(--text-whisper); font-family: var(--font-mono); flex-shrink: 0; }

    .pl-detail-foot {
      padding: 14px 24px;
      border-top: 1px solid var(--border);
      display: flex; gap: 8px;
      background: var(--bg-1);
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ MUSIC WORKSPACE v3 — Hero prompt + 카테고리화된 styles
       ════════════════════════════════════════════════════════════ */
    .mw-prompt-card,
    .mw-style-card {
      padding: var(--s-5);
      border-radius: var(--r-xl);
      background:
        linear-gradient(135deg, rgba(76,29,149,0.06), rgba(139,92,246,0.02) 60%, var(--bg-card));
      border: 1px solid var(--border);
      margin-bottom: var(--s-4);
      transition: border-color var(--t-base) var(--ease-smooth);
    }
    .mw-prompt-card:hover,
    .mw-style-card:hover { border-color: var(--border-strong); }

    .mw-card-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--s-3);
    }
    .mw-card-label {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(196,181,253,0.85);
    }
    .mw-card-label span { color: var(--text); font-weight: 600; }
    .mw-card-hint {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      padding: 3px 8px;
      background: rgba(76,29,149,0.20);
      border-radius: var(--r-pill);
      letter-spacing: 0.04em;
    }

    /* PROMPT 가로 와이드 */
    .mw-prompt-textarea {
      width: 100%;
      min-height: 100px;
      padding: 14px 16px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text);
      font-family: inherit;
      font-size: 15px;
      line-height: 1.65;
      outline: none;
      resize: vertical;
      transition: border-color var(--t-fast) var(--ease-smooth);
    }
    .mw-prompt-textarea:focus {
      border-color: rgba(139,92,246,0.50);
      box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
    }
    .mw-prompt-foot { margin-top: var(--s-3); }
    .mw-len-row {
      display: flex; align-items: center; gap: 12px;
    }
    .mw-len-label {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
      min-width: 30px;
    }
    .mw-len-row input[type="range"] {
      flex: 1;
      accent-color: #8b5cf6;
      height: 4px;
      cursor: pointer;
    }
    .mw-len-val {
      font-family: var(--font-mono);
      font-size: 13px;
      color: white;
      font-weight: 600;
      min-width: 50px;
      text-align: right;
      padding: 4px 10px;
      background: rgba(76,29,149,0.30);
      border-radius: var(--r-pill);
    }

    /* STYLE PICKER */
    .mw-clear-btn {
      font-size: 11px;
      color: var(--text-faint);
      padding: 4px 10px;
      border-radius: var(--r-sm);
      background: transparent;
      border: 1px solid var(--border);
      transition: all var(--t-fast);
    }
    .mw-clear-btn:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: var(--bg-card-hover);
    }

    /* 선택된 토큰 (가로 스크롤) */
    .mw-tokens-row {
      display: flex; gap: 6px;
      flex-wrap: wrap;
      min-height: 32px;
      padding: 8px 10px;
      background: var(--bg-1);
      border: 1px dashed var(--border);
      border-radius: var(--r-md);
      margin-bottom: var(--s-4);
      align-items: center;
    }
    .mw-tokens-empty {
      font-size: 12px;
      color: var(--text-faint);
      font-style: italic;
    }
    .mw-token {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 4px 4px 12px;
      border-radius: var(--r-pill);
      font-size: 12px;
      font-weight: 500;
      background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(124,58,237,0.18));
      color: white;
      border: 1px solid rgba(139,92,246,0.40);
      animation: tokenIn 0.18s var(--ease-spring);
    }
    @keyframes tokenIn {
      from { transform: scale(0.6); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .mw-token-x {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: rgba(0,0,0,0.30);
      color: white;
      display: grid; place-items: center;
      font-size: 11px;
      cursor: pointer;
      transition: background var(--t-fast);
    }
    .mw-token-x:hover { background: rgba(0,0,0,0.55); }

    /* 카테고리 탭 (가로 스크롤) */
    .mw-cat-tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding: 4px 0;
      margin-bottom: var(--s-3);
      scrollbar-width: thin;
      scroll-snap-type: x mandatory;
    }
    .mw-cat-tabs::-webkit-scrollbar { height: 4px; }
    .mw-cat-tab {
      flex-shrink: 0;
      padding: 8px 14px;
      border-radius: var(--r-pill);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-faint);
      background: transparent;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
      scroll-snap-align: start;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .mw-cat-tab .mw-cat-count {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 999px;
      background: var(--bg-elev);
      color: var(--text-faint);
    }
    .mw-cat-tab:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .mw-cat-tab.active {
      color: white;
      background: linear-gradient(135deg, #4c1d95, #7c3aed);
      border-color: rgba(139,92,246,0.50);
      box-shadow: 0 4px 12px -2px rgba(76,29,149,0.45);
    }
    .mw-cat-tab.active .mw-cat-count {
      background: rgba(255,255,255,0.20);
      color: white;
    }

    /* 칩 영역 (세로 스크롤) */
    .mw-chip-scroll {
      max-height: 280px;
      overflow-y: auto;
      padding: 4px;
      scrollbar-width: thin;
      border-radius: var(--r-md);
      background: rgba(0,0,0,0.15);
    }
    .mw-chip-scroll::-webkit-scrollbar { width: 6px; }
    .mw-chip-scroll::-webkit-scrollbar-thumb {
      background: rgba(139,92,246,0.30);
      border-radius: 3px;
    }
    .mw-chip-scroll .music-style-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: var(--s-3);
    }
    .mw-chip-scroll .music-chip {
      padding: 6px 12px;
      border-radius: var(--r-pill);
      font-size: 12px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .mw-chip-scroll .music-chip:hover {
      color: var(--text);
      border-color: rgba(139,92,246,0.50);
      background: rgba(139,92,246,0.10);
    }
    .mw-chip-scroll .music-chip.selected {
      background: linear-gradient(135deg, rgba(139,92,246,0.30), rgba(76,29,149,0.20));
      color: white;
      border-color: rgba(139,92,246,0.60);
    }

    /* CREATE BUTTON */
    .mw-create-btn {
      width: 100%;
      padding: 16px 24px;
      margin-top: var(--s-2);
      border-radius: var(--r-lg);
      background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #8b5cf6 100%);
      color: white;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 10px 28px -8px rgba(76,29,149,0.65),
                  inset 0 1px 0 rgba(255,255,255,0.15);
      transition: transform var(--t-fast) var(--ease-spring),
                  box-shadow var(--t-fast) var(--ease-smooth);
      cursor: pointer;
      border: 0;
      flex-wrap: wrap;
    }
    .mw-create-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 36px -8px rgba(124,58,237,0.75),
                  inset 0 1px 0 rgba(255,255,255,0.20);
    }
    .mw-create-btn:active { transform: translateY(0); }
    .mw-create-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
    .mw-create-hint {
      font-size: 11px;
      font-weight: 400;
      opacity: 0.75;
      letter-spacing: 0;
      width: 100%;
      text-align: center;
    }
    .music-credit-bar {
      width: 100%;
      max-width: 880px;
      margin: -6px auto 0;
      justify-content: flex-start;
      padding: 0 4px;
    }

    .mw-status {
      margin-top: var(--s-3);
      font-size: 13px;
      color: var(--text-faint);
      text-align: center;
      min-height: 18px;
    }

    /* Music library 영역 정리 */
    .music-right .music-filter-row {
      display: flex; gap: 8px; align-items: center;
      padding: 0;
      margin-bottom: var(--s-3);
    }
    .music-right .music-search {
      flex: 1;
      height: 38px;
      padding: 0 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .music-right .music-search::placeholder { color: var(--text-faint); }
    .music-right .music-search:focus { border-color: rgba(139,92,246,0.50); }
    .music-right .music-filter {
      padding: 8px 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text-dim);
      font-size: 12px;
    }

    @media (max-width: 880px) {
      .mw-prompt-card, .mw-style-card { padding: var(--s-4); }
      .mw-cat-tabs { padding-bottom: 8px; }
      .mw-chip-scroll { max-height: 220px; }
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ MUSIC PAGE v2 — 세로 레이아웃 (제작 위 / 플레이리스트 아래)
       ════════════════════════════════════════════════════════════ */
    .music-shell {
      display: block !important;            /* 좌우 분할 해제 */
      grid-template-columns: 1fr !important;
      gap: 0 !important;
      min-height: 0 !important;
    }
    .music-left,
    .music-right {
      width: 100%;
      max-width: none;
      min-width: 0;
    }
    .music-left { margin-bottom: var(--s-5); }
    .music-right { display: block !important; }

    /* 페르소나 탭처럼 상단 가로 모드 토글 */
    .music-create-tabs.music-topbar {
      width: auto;
      min-width: 0;
      display: inline-flex !important;
      grid-template-columns: none;
      padding: 3px;
      border-radius: var(--r-pill);
      background: var(--bg-card);
      border: 1px solid var(--border);
      gap: 0;
      overflow: visible;
    }
    .music-create-tabs.music-topbar .music-create-tab {
      min-height: 36px;
      padding: 0 18px;
      border-radius: var(--r-pill);
      border: 0 !important;
      background: transparent;
      color: var(--text-faint);
      font-size: 13px;
      font-weight: 500;
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .music-create-tabs.music-topbar .music-create-tab.active {
      background: var(--bg-elev);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .music-create-tabs.music-topbar .music-create-tab:hover:not(.active) {
      color: var(--text-dim);
    }

    /* page-head 영역도 세로 정렬로 (상단 탭이 큰 카드 아래로 갈 수 있게) */
    .music-page-head {
      flex-direction: column;
      align-items: stretch;
      gap: var(--s-3);
    }
    .music-page-head .page-head { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }

    /* 제작 카드 — 좁은 화면에서도 가득 차게, 그러나 컨텐츠 폭 제한 */
    .music-left .music-form-card,
    .music-left .music-create-btn,
    .music-left .music-credit-bar {
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
    }
    .music-create-btn {
      width: 100%;
      max-width: 880px;
    }
    #music-status, #music-generated {
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
    }

    /* 플레이리스트 영역 — 위쪽에 구분선 + 제목 */
    .music-right::before {
      content: "Music Library";
      display: block;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      color: var(--text);
      margin: var(--s-7) 0 var(--s-3);
      padding-top: var(--s-5);
      border-top: 1px solid var(--border);
      letter-spacing: -0.02em;
    }
    .music-player-bar {
      position: sticky;
      top: calc(var(--topbar-h) + 8px);
      z-index: 5;
      background: var(--bg-elev);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 10px 16px;
    }
    .music-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
    }

    @media (max-width: 880px) {
      .music-create-tabs.music-topbar { width: 100%; justify-content: center; }
      .music-list { grid-template-columns: 1fr; }
    }

    /* ════════════════════════════════════════════════════════════
       ▓▓▓ STORY READER PAGE — Editorial reading workspace
       ════════════════════════════════════════════════════════════ */
    .story-view-page { max-width: none; padding: 0; }
    .sv-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: var(--s-6);
      padding: var(--s-6) var(--s-7);
      max-width: 1480px;
      margin: 0 auto;
      align-items: start;
    }

    /* ── 좌측 본문 ── */
    .sv-doc {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-2xl);
      padding: var(--s-7) var(--s-8);
      min-height: 70vh;
      animation: stageEnter 0.4s var(--ease-smooth);
    }
    .sv-doc-head {
      padding-bottom: var(--s-5);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--s-6);
    }
    .sv-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-sm);
      color: var(--text-faint);
      padding: 6px 10px;
      margin-left: -10px;
      border-radius: var(--r-sm);
      transition: all var(--t-fast) var(--ease-smooth);
    }
    .sv-back:hover {
      color: var(--accent);
      background: var(--accent-soft);
    }
    .sv-meta-row {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin: var(--s-4) 0 var(--s-3);
    }
    .sv-meta-row .sv-pill {
      padding: 3px 10px;
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: var(--r-pill);
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid rgba(167,139,250,0.20);
    }
    .sv-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 600;
      letter-spacing: -0.035em;
      line-height: 1.1;
      margin: 0 0 var(--s-3);
      color: var(--text);
    }
    .sv-byline {
      font-size: var(--fs-sm);
      color: var(--text-faint);
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap;
    }
    .sv-dot { color: var(--text-whisper); }

    /* 본문 — editorial reading typography */
    .sv-body {
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1.85;
      color: var(--text);
      letter-spacing: -0.005em;
      white-space: pre-wrap;
      word-break: keep-all;
      max-width: 64ch;
    }
    .sv-body p { margin: 0 0 1.4em; }
    .sv-edit {
      width: 100%;
      min-height: 60vh;
      padding: var(--s-4);
      border-radius: var(--r-md);
      background: var(--bg-1);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: var(--font-display);
      font-size: 17px;
      line-height: 1.8;
      resize: vertical;
      outline: none;
    }
    .sv-edit:focus {
      border-color: var(--accent);
      box-shadow: var(--shadow-focus);
    }
    .sv-doc-foot {
      margin-top: var(--s-6);
      padding-top: var(--s-4);
      border-top: 1px solid var(--border);
    }
    .sv-stats {
      font-size: var(--fs-sm);
      color: var(--text-faint);
      display: flex; align-items: center; gap: 8px;
      font-variant-numeric: tabular-nums;
    }
    .sv-stats strong { color: var(--text-dim); font-weight: 600; }

    /* ── 우측 사이드 ── */
    .sv-side {
      display: flex; flex-direction: column;
      gap: var(--s-3);
      position: sticky; top: calc(var(--topbar-h) + var(--s-4));
    }
    .sv-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: border-color var(--t-base) var(--ease-smooth);
    }
    .sv-card:hover { border-color: var(--border-strong); }
    .sv-card-ghost { background: transparent; border-style: dashed; }
    .sv-card-head {
      padding: var(--s-3) var(--s-4) var(--s-2);
    }
    .sv-card-title {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
      display: inline-flex;
      align-items: center; gap: 6px;
    }
    .sv-card-body {
      padding: var(--s-2) var(--s-4) var(--s-4);
      display: flex; flex-direction: column;
      gap: var(--s-2);
    }
    .sv-tts-card .sv-card-body { gap: var(--s-3); }

    .sv-field {
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .sv-field-row { display: flex; gap: var(--s-3); }
    .sv-label {
      font-size: 11px;
      color: var(--text-faint);
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .sv-select {
      height: 36px;
      padding: 0 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-sm);
      outline: none;
    }
    .sv-select:focus { border-color: var(--accent); }
    input[type="range"]#sv-speed {
      width: 100%;
      accent-color: var(--accent);
    }

    /* 버튼들 */
    .sv-action,
    .sv-action-primary,
    .sv-action-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      font-size: var(--fs-sm);
      font-weight: 500;
      transition: all var(--t-fast) var(--ease-smooth);
      justify-content: flex-start;
      text-align: left;
    }
    .sv-action {
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
    }
    .sv-action:hover {
      background: var(--bg-card-hover);
      color: var(--text);
      border-color: var(--border-strong);
    }
    .sv-action-tonal {
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      color: var(--accent);
      justify-content: space-between;
    }
    .sv-action-tonal:hover {
      background: rgba(167,139,250,0.18);
      color: white;
    }
    .sv-action-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      border: 0;
      box-shadow: var(--shadow-accent);
      justify-content: center;
      font-weight: 600;
    }
    .sv-action-primary:hover { transform: translateY(-1px); }
    .sv-action-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .sv-action-secondary {
      background: transparent;
      color: var(--text-faint);
      border: 0;
      justify-content: center;
      padding: 6px;
      font-size: var(--fs-xs);
    }
    .sv-action-secondary:hover { color: var(--text); }
    .sv-action-ghost {
      background: transparent;
      border: 1px dashed var(--border-strong);
      color: var(--text-faint);
      justify-content: center;
    }
    .sv-action-ghost:hover {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-soft);
    }
    .sv-tts-status {
      font-size: var(--fs-xs);
      color: var(--text-faint);
      min-height: 16px;
    }
    .sv-tts-audio {
      width: 100%;
      height: 36px;
    }

    /* Responsive */
    @media (max-width: 1100px) {
      .sv-shell { grid-template-columns: 1fr; padding: var(--s-5); }
      .sv-side { position: static; }
      .sv-doc { padding: var(--s-5) var(--s-5); }
    }
    @media (max-width: 700px) {
      .sv-doc { padding: var(--s-5) var(--s-4); }
      .sv-body { font-size: 16px; }
    }

    /* ════ Pipeline (v3 M1) ════ */
    .pl-quick-bar {
      display: flex; gap: 8px; flex-wrap: wrap;
      margin-bottom: 16px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(167,139,250,0.04), var(--bg-card));
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      align-items: center;
    }
    .pl-quick-spacer { flex: 1; }
    .pl-quick-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 12px;
      color: var(--text-dim);
      text-decoration: none;
      transition: all var(--t-fast);
      cursor: pointer;
    }
    .pl-quick-pill:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(167,139,250,0.30);
      transform: translateY(-1px);
    }
    .pl-quick-pill strong {
      color: var(--text);
      font-variant-numeric: tabular-nums;
      margin-left: 2px;
    }
    .pl-quick-pill.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2, #6366f1));
      color: white;
      border-color: transparent;
      font-weight: 700;
    }
    .pl-quick-pill.primary:hover { color: white; filter: brightness(1.1); }
    @media (max-width: 768px) {
      .pl-quick-bar { padding: 8px; gap: 6px; }
      .pl-quick-pill { padding: 6px 10px; font-size: 11px; }
      .pl-quick-spacer { display: none; }
    }

    .pipeline-shell {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      min-height: 70vh;
    }
    @media (max-width: 960px) {
      .pipeline-shell { grid-template-columns: 1fr; }
    }
    .pipeline-tree {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px;
      display: flex; flex-direction: column;
      gap: 10px;
      max-height: 80vh;
    }
    .pl-tree-head { display: flex; gap: 6px; }
    .pl-project-select {
      flex: 1;
      padding: 8px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
    }

    /* ════ Projects hub ════ */
    .projects-toolbar {
      display: grid;
      grid-template-columns: auto minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    .projects-filter-group {
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 4px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .projects-filter {
      height: 34px;
      padding: 0 13px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: var(--text-faint);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .projects-filter:hover,
    .projects-filter.active {
      color: white;
      background: linear-gradient(135deg, rgba(167,139,250,0.88), rgba(99,102,241,0.88));
      box-shadow: var(--shadow-accent);
    }
    .projects-search {
      height: 42px;
      min-width: 0;
      padding: 0 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .projects-search:focus { border-color: rgba(167,139,250,0.48); }
    .projects-new-btn,
    .project-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all var(--t-fast);
      white-space: nowrap;
    }
    .projects-new-btn,
    .project-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      border: 1px solid transparent;
      box-shadow: var(--shadow-accent);
    }
    .project-btn {
      background: var(--bg-elev);
      color: var(--text-dim);
      border: 1px solid var(--border);
    }
    .project-btn:hover,
    .projects-new-btn:hover { transform: translateY(-1px); border-color: rgba(167,139,250,0.34); }
    .project-btn.danger {
      color: #fca5a5;
      border-color: rgba(248,113,113,0.28);
      background: rgba(248,113,113,0.08);
    }
    .project-btn.ghost {
      background: transparent;
      border-style: dashed;
    }
    .projects-stats-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
      color: var(--text-faint);
      font-size: 12px;
    }
    .projects-stats-row span {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.025);
      font-variant-numeric: tabular-nums;
    }
    /* ── Projects 카드 그리드 (P1-01 업그레이드) ──────────────── */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
    }
    .project-card {
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.14);
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .project-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(0,0,0,0.24);
    }
    .project-card.archived { opacity: 0.72; }
    .project-card.archived .project-card-banner {
      filter: saturate(0.5) brightness(0.8);
    }
    /* 컬러 배너 */
    .project-card-banner {
      height: 56px;
      background: linear-gradient(130deg, var(--project-color, #A78BFA) 0%, rgba(0,0,0,0.6) 120%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      position: relative;
      flex-shrink: 0;
    }
    .project-mark {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: white;
      font-weight: 900;
      font-size: 20px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.25);
      cursor: pointer;
      transition: transform 200ms, background 200ms;
      position: relative;
      flex-shrink: 0;
    }
    .project-mark:hover {
      transform: scale(1.1);
      background: rgba(255,255,255,0.28);
    }
    .project-mark::after {
      content: '✏';
      position: absolute;
      top: -4px; right: -4px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      color: #fff;
      font-size: 9px;
      display: grid; place-items: center;
      opacity: 0;
      transition: opacity 200ms;
    }
    .project-mark:hover::after { opacity: 1; }
    .project-banner-title {
      flex: 1;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: rgba(255,255,255,0.96);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .project-banner-status {
      padding: 3px 8px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      letter-spacing: 0.08em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* 카드 본문 */
    .project-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 11px;
      padding: 14px;
    }
    .project-card-head { display: none; } /* 배너로 대체됨 */
    .project-title { display: none; }
    .project-status { display: none; }
    .project-meta {
      margin: 0;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.45;
    }
    .project-logline {
      color: var(--text-dim);
      font-size: 12.5px;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 38px;
    }
    /* 샷 진행률 바 */
    .project-progress-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .project-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--text-faint);
    }
    .project-progress-bar {
      height: 4px;
      background: rgba(255,255,255,0.07);
      border-radius: 999px;
      overflow: hidden;
    }
    .project-progress-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--project-color, #A78BFA), rgba(255,255,255,0.6));
      min-width: 4px;
      transition: width 600ms ease;
    }
    /* 스탯 pill 행 */
    .project-stat-row {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    .project-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 10.5px;
      color: var(--text-faint);
      white-space: nowrap;
    }
    .project-stat-pill strong {
      color: var(--text);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    /* 액션 버튼 행 */
    .project-actions {
      display: flex;
      gap: 7px;
      margin-top: auto;
      position: relative;
    }
    /* 오버플로우 드롭다운 */
    .project-overflow-menu {
      position: absolute;
      bottom: calc(100% + 6px);
      right: 0;
      background: var(--bg-elev, #18181f);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px;
      min-width: 160px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.50);
      z-index: 60;
      animation: pipFade 150ms ease;
    }
    .project-overflow-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 12.5px;
      color: var(--text);
      cursor: pointer;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      transition: background 120ms;
    }
    .project-overflow-item:hover { background: rgba(255,255,255,0.07); }
    .project-overflow-item.danger { color: #f87171; }
    .project-overflow-item.danger:hover { background: rgba(248,113,113,0.10); }
    /* 구 stat-grid — 숨김 */
    .project-stat-grid { display: none; }
    .project-stat { display: none; }

    /* 이모지 선택 팝오버 — 아이폰 스타일 (블랙 배경 / 5x5 그리드 / 스크롤) */
    .project-icon-pop {
      position: absolute;
      z-index: 200;
      width: 320px; max-width: 92vw;
      background: #000;
      border: 1px solid #1F1F24;
      border-radius: 16px;
      box-shadow: 0 24px 60px -18px rgba(0,0,0,0.80);
      padding: 12px;
      animation: pipFade 180ms cubic-bezier(0.22,0.61,0.36,1);
      display: flex;
      flex-direction: column;
      max-height: 420px;
    }
    @keyframes pipFade {
      from { opacity: 0; transform: translateY(-6px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .project-icon-pop .pip-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
      padding: 0 4px 8px;
      border-bottom: 1px solid #1F1F24;
      flex: 0 0 auto;
    }
    .project-icon-pop .pip-title {
      font-family: var(--font-mono, Consolas, monospace);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      color: var(--accent, #A78BFA);
      text-transform: uppercase;
    }
    .project-icon-pop .pip-clear {
      font-size: 11px;
      color: #797986;
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .project-icon-pop .pip-clear:hover {
      color: #E9E9F0;
      background: rgba(255,255,255,0.06);
    }
    .project-icon-pop .pip-search {
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      margin-bottom: 8px;
      padding: 0 10px;
      background: #0E0E12;
      border: 1px solid #1F1F24;
      border-radius: 8px;
      color: #E9E9F0;
      font-size: 12px;
      outline: none;
      flex: 0 0 auto;
    }
    .project-icon-pop .pip-search:focus {
      border-color: rgba(167,139,250,0.55);
    }
    .project-icon-pop .pip-search::placeholder { color: #555; }
    .project-icon-pop .pip-cats {
      display: flex; gap: 4px; overflow-x: auto;
      margin-bottom: 8px;
      flex: 0 0 auto;
      scrollbar-width: none;
    }
    .project-icon-pop .pip-cats::-webkit-scrollbar { display: none; }
    .project-icon-pop .pip-cat {
      background: transparent;
      border: 1px solid #1F1F24;
      border-radius: 999px;
      padding: 4px 10px;
      color: #797986;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 120ms;
    }
    .project-icon-pop .pip-cat:hover { color: #E9E9F0; border-color: #2A2A33; }
    .project-icon-pop .pip-cat.active {
      color: #A78BFA;
      border-color: rgba(167,139,250,0.45);
      background: rgba(167,139,250,0.08);
    }
    .project-icon-pop .pip-scroll {
      overflow-y: auto;
      flex: 1 1 auto;
      padding-right: 2px;
      scrollbar-width: thin;
      scrollbar-color: #2A2A33 transparent;
    }
    .project-icon-pop .pip-scroll::-webkit-scrollbar { width: 6px; }
    .project-icon-pop .pip-scroll::-webkit-scrollbar-thumb { background: #2A2A33; border-radius: 4px; }
    .project-icon-pop .pip-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }
    .project-icon-pop .pip-emoji {
      width: 100%;
      aspect-ratio: 1;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 24px;
      display: grid; place-items: center;
      transition: background 120ms, border-color 120ms, transform 120ms;
    }
    .project-icon-pop .pip-emoji:hover {
      background: rgba(167,139,250,0.14);
      border-color: rgba(167,139,250,0.30);
      transform: scale(1.16);
    }
    .project-icon-pop .pip-emoji.active {
      background: rgba(167,139,250,0.22);
      border-color: var(--accent, #A78BFA);
    }
    .project-icon-pop .pip-empty {
      grid-column: 1 / -1;
      color: #555;
      font-size: 12px;
      text-align: center;
      padding: 20px 0;
    }
    .project-title {
      margin: 0;
      color: var(--text);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .project-meta {
      margin-top: 5px;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.45;
    }
    .project-status {
      padding: 5px 9px;
      border: 1px solid rgba(167,139,250,0.24);
      border-radius: 999px;
      color: var(--accent);
      background: rgba(167,139,250,0.10);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .project-logline {
      min-height: 44px;
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.6;
    }
    .project-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .project-stat {
      padding: 10px 8px;
      background: rgba(255,255,255,0.026);
      border: 1px solid var(--border);
      border-radius: 8px;
      text-align: center;
      font-size: 10px;
      color: var(--text-faint);
    }
    .project-stat strong {
      display: block;
      color: var(--text);
      font-size: 17px;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    .project-actions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: auto;
    }
    .project-empty {
      grid-column: 1 / -1;
      padding: 72px 20px;
      text-align: center;
      color: var(--text-faint);
      font-size: 13px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .project-empty strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text-dim);
      font-family: var(--font-display);
      font-size: 18px;
    }
    .project-empty .projects-new-btn { margin-top: 16px; }
    @media (max-width: 760px) {
      .projects-toolbar { grid-template-columns: 1fr; }
      .projects-filter-group { width: 100%; }
      .projects-filter { flex: 1; }
      .projects-new-btn { width: 100%; }
    }
    .pl-tree-add {
      width: 36px;
      background: var(--accent);
      color: white;
      border: 0;
      border-radius: 8px;
      font-size: 18px; font-weight: 600;
      cursor: pointer;
    }
    .pl-tree-add:hover { filter: brightness(1.1); }
    .pl-tree-toolbar {
      display: flex; gap: 4px; flex-wrap: wrap;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .pl-tool {
      flex: 1;
      padding: 6px 8px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 11px; font-weight: 600;
      cursor: pointer;
      transition: all var(--t-fast);
      min-width: 50px;
    }
    .pl-tool:hover:not(:disabled) {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(167,139,250,0.30);
    }
    .pl-tool:disabled { opacity: 0.35; cursor: not-allowed; }
    .pl-tree-body {
      flex: 1;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 2px;
    }
    .pl-empty {
      padding: 28px 12px;
      text-align: center;
      font-size: 12px;
      color: var(--text-faint);
    }
    .pl-tree-foot {
      font-size: 10px;
      color: var(--text-faint);
      padding-top: 6px;
      border-top: 1px solid var(--border);
      font-variant-numeric: tabular-nums;
    }
    /* 트리 아이템 */
    .pl-node {
      display: flex; align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 6px;
      font-size: 12.5px;
      color: var(--text-dim);
      cursor: pointer;
      transition: background var(--t-fast);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pl-node:hover { background: rgba(167,139,250,0.08); color: var(--text); }
    .pl-node.selected {
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
    }
    .pl-node.lvl-0 { font-weight: 700; color: var(--text); padding: 6px 8px; font-size: 13px; }
    .pl-node.lvl-1 { padding-left: 22px; }
    .pl-node.lvl-2 { padding-left: 38px; font-size: 12px; }
    .pl-node-toggle {
      width: 14px; height: 14px;
      display: grid; place-items: center;
      color: var(--text-faint);
      flex-shrink: 0;
      font-size: 10px;
    }
    .pl-node-num {
      font-variant-numeric: tabular-nums;
      font-family: var(--font-mono);
      color: var(--text-faint);
      font-size: 10px;
      flex-shrink: 0;
      min-width: 28px;
    }
    .pl-node-status {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .pl-status-draft     { background: #94a3b8; }
    .pl-status-generated { background: #67e8f9; }
    .pl-status-approved  { background: #6ee7b7; }
    .pl-status-final     { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }
    .pl-status-failed    { background: #fca5a5; }
    .pl-status-archived  { background: #4b5563; }
    .pl-node-count {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-faint);
      background: var(--bg-elev);
      padding: 1px 6px;
      border-radius: 8px;
    }

    /* 디테일 */
    .pipeline-detail {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 22px;
      min-height: 70vh;
      overflow-y: auto;
    }
    .pl-detail-empty {
      padding: 60px 20px;
      text-align: center;
      color: var(--text-faint);
    }
    .pl-detail-empty h3 { color: var(--text-dim); margin: 14px 0 4px; }
    .pl-detail-empty p { font-size: 13px; max-width: 380px; margin: 4px auto; }

    /* 디테일 본문 */
    .pl-detail-head {
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 18px;
    }
    .pl-detail-crumb {
      font-size: 11px;
      color: var(--text-faint);
      letter-spacing: 0.04em;
    }
    .pl-detail-title {
      font-size: 18px;
      color: var(--text);
      font-weight: 700;
      margin: 4px 0;
    }
    .pl-detail-meta {
      display: flex; gap: 14px; flex-wrap: wrap;
      font-size: 11px;
      color: var(--text-dim);
    }
    .pl-edit-input {
      width: 100%;
      padding: 8px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      margin-bottom: 8px;
    }
    .pl-edit-input.title {
      font-size: 16px;
      font-weight: 700;
    }
    .pl-edit-input:focus { outline: none; border-color: var(--accent); }
    .pl-edit-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .pl-edit-row > * { flex: 1; min-width: 120px; }
    .pl-edit-textarea {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      min-height: 80px;
      margin-bottom: 8px;
    }
    .pl-section {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .pl-section h4 {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin: 0 0 10px;
      font-weight: 700;
    }
    .pl-actions {
      display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
    }
    .pl-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 12px; font-weight: 600;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      cursor: pointer;
      transition: all var(--t-fast);
    }
    .pl-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
    .pl-btn.danger { background: rgba(248,113,113,0.12); color: #fca5a5; border-color: rgba(248,113,113,0.30); }
    .pl-btn:hover { filter: brightness(1.1); }
    /* Shot 카드 그리드 */
    .pl-shot-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
    }
    .pl-shot-card {
      padding: 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      display: flex; flex-direction: column; gap: 6px;
      transition: all var(--t-fast);
    }
    .pl-shot-card:hover {
      border-color: rgba(167,139,250,0.40);
      transform: translateY(-1px);
    }
    .pl-shot-card.selected { border-color: var(--accent); background: var(--accent-soft); }
    .pl-shot-thumb {
      aspect-ratio: 16/9;
      background: var(--bg-elev);
      border-radius: 6px;
      display: grid; place-items: center;
      color: var(--text-faint);
      font-size: 10px;
      overflow: hidden;
    }
    .pl-shot-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .pl-shot-card-head {
      display: flex; align-items: center; gap: 6px;
    }
    .pl-shot-num {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
      font-variant-numeric: tabular-nums;
    }
    .pl-shot-type {
      font-size: 10px;
      padding: 1px 6px;
      background: var(--bg-elev);
      border-radius: 3px;
      color: var(--text-dim);
      text-transform: uppercase;
      font-weight: 600;
    }
    .pl-shot-desc {
      font-size: 12px;
      color: var(--text);
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .pl-shot-foot {
      display: flex; align-items: center; gap: 6px;
      margin-top: auto;
      padding-top: 4px;
    }
    .pl-shot-dur {
      font-size: 10px;
      color: var(--text-faint);
      font-variant-numeric: tabular-nums;
    }
    /* 자동 분해 모달 */
    .pl-decompose-modal {
      position: fixed; inset: 0;
      background: rgba(8,8,12,0.80);
      backdrop-filter: blur(6px);
      z-index: 9999;
      display: grid; place-items: center;
      padding: 16px;
    }
    .pl-decompose-card {
      width: 100%; max-width: 600px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: 24px;
      max-height: 80vh;
      overflow-y: auto;
    }
    .pl-modal-grid { display: grid; gap: 12px; margin-top: 16px; }
    .pl-modal-grid label {
      display: grid;
      gap: 6px;
      font-size: 11px;
      color: var(--text-faint);
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .pl-modal-grid input,
    .pl-modal-grid select,
    .pl-modal-grid textarea {
      width: 100%;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
      font-size: 13px;
      resize: vertical;
    }
    .pl-modal-grid textarea { min-height: 120px; }
    .pl-candidate-list { display: grid; gap: 8px; }
    .pl-candidate-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-1);
    }
    .pl-candidate-card.approved {
      border-color: rgba(52,211,153,0.35);
      background: rgba(52,211,153,0.08);
    }
    .pl-candidate-title { color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .pl-candidate-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--text-faint); font-size: 10px; }
    .pl-candidate-meta span {
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--bg-card);
      border: 1px solid var(--border);
    }
    .pl-candidate-actions { display: flex; gap: 6px; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
    .pl-candidate-actions .pl-btn { padding: 5px 8px; font-size: 10px; }

    /* ── Quick Jump (⌘P) ── */
    .qj-backdrop {
      position: fixed; inset: 0;
      background: rgba(8,8,12,0.78);
      backdrop-filter: blur(10px);
      z-index: 10000;
      display: grid;
      place-items: start center;
      padding: 88px 16px 16px;
    }
    .qj-card {
      width: 100%; max-width: 600px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      box-shadow: 0 32px 80px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(167,139,250,0.20);
      overflow: hidden;
      display: flex; flex-direction: column;
      max-height: 70vh;
    }
    .qj-input-row {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }
    .qj-input-row svg { color: var(--text-faint); flex-shrink: 0; }
    .qj-input {
      flex: 1;
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 16px;
      color: var(--text);
    }
    .qj-input::placeholder { color: var(--text-faint); }
    .qj-kbd {
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 3px 8px;
      background: var(--bg-elev);
      color: var(--text-dim);
      border-radius: 4px;
    }
    .qj-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }
    .qj-section-label {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 700;
      padding: 8px 18px 4px;
    }
    .qj-row {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 18px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-dim);
      border-left: 3px solid transparent;
    }
    .qj-row:hover, .qj-row.active {
      background: var(--accent-soft);
      color: var(--text);
      border-left-color: var(--accent);
    }
    .qj-row-icon {
      width: 26px; height: 26px;
      border-radius: 6px;
      background: var(--bg-elev);
      display: grid; place-items: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .qj-row-body { flex: 1; min-width: 0; }
    .qj-row-name {
      color: var(--text);
      font-weight: 600;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .qj-row-meta {
      font-size: 11px;
      color: var(--text-faint);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .qj-row-type {
      font-size: 9px;
      padding: 2px 6px;
      background: var(--bg-elev);
      color: var(--text-dim);
      border-radius: 4px;
      letter-spacing: 0.06em;
      font-weight: 600;
      flex-shrink: 0;
    }
    .qj-empty {
      padding: 30px 18px;
      text-align: center;
      font-size: 12px;
      color: var(--text-faint);
    }
    .qj-foot {
      display: flex; gap: 16px;
      padding: 10px 18px;
      font-size: 10px;
      color: var(--text-faint);
      border-top: 1px solid var(--border);
      background: var(--bg-1);
    }
    .qj-foot kbd {
      font-family: var(--font-mono);
      font-size: 9px;
      padding: 2px 5px;
      background: var(--bg-elev);
      border-radius: 3px;
      margin-right: 4px;
    }

    /* ── Preview Timeline (Pipeline 하단) ── */
    .pl-preview-timeline {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 16px 20px;
    }
    .pl-pt-head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .pl-pt-head h3 {
      margin: 0; font-size: 13px;
      color: var(--text); font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .pl-pt-controls { display: flex; gap: 6px; margin-left: auto; }
    .pl-pt-track {
      display: flex; gap: 2px; overflow-x: auto;
      padding: 8px 0;
      background: var(--bg-1);
      border-radius: 8px;
      min-height: 80px;
    }
    .pl-pt-clip {
      flex-shrink: 0;
      min-width: 60px;
      height: 64px;
      background: #000;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .pl-pt-clip.empty {
      background: var(--bg-elev);
      border: 1px dashed var(--border-strong);
    }
    .pl-pt-clip.current {
      box-shadow: 0 0 0 2px var(--accent);
    }
    .pl-pt-clip video {
      width: 100%; height: 100%; object-fit: cover;
    }
    .pl-pt-clip-label {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      font-size: 9px;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 1px 4px;
      font-variant-numeric: tabular-nums;
      text-align: center;
    }
    .pl-pt-clip-empty-label {
      font-size: 10px;
      color: var(--text-faint);
      display: grid; place-items: center;
      height: 100%;
    }
    .pl-pt-stage {
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      border-radius: 8px;
      margin-top: 12px;
      max-height: 360px;
    }
    .pl-pt-stage video { width: 100%; height: 100%; object-fit: contain; }
    .pl-pt-info {
      display: flex; gap: 12px; align-items: center;
      margin-top: 8px;
      font-size: 11px;
      color: var(--text-dim);
      font-variant-numeric: tabular-nums;
    }

    /* ── Cinema Library (v3 M4) ── */
    .cn-shell {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      min-height: 75vh;
    }
    @media (max-width: 1024px) { .cn-shell { grid-template-columns: 1fr; } }
    .cn-list-pane {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px;
      display: flex; flex-direction: column; gap: 10px;
      max-height: 80vh;
    }
    .cn-add-row { display: flex; gap: 6px; }
    .cn-add-row input {
      flex: 1;
      padding: 8px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
    }
    .cn-refs-list {
      flex: 1; overflow-y: auto;
      display: flex; flex-direction: column; gap: 6px;
    }
    .cn-ref-card {
      padding: 10px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      display: flex; gap: 10px;
      transition: all var(--t-fast);
    }
    .cn-ref-card:hover { border-color: rgba(167,139,250,0.40); }
    .cn-ref-card.selected { border-color: var(--accent); background: var(--accent-soft); }
    .cn-ref-thumb {
      width: 80px; height: 48px;
      background: #000;
      border-radius: 4px;
      flex-shrink: 0;
      overflow: hidden;
      display: grid; place-items: center;
      color: var(--text-faint);
      font-size: 18px;
    }
    .cn-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .cn-ref-meta {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
      font-size: 12px;
    }
    .cn-ref-meta .ttl { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cn-ref-meta .src { font-size: 10px; color: var(--text-faint); }
    .cn-ref-meta .clips { font-size: 10px; color: var(--accent); }

    .cn-player-pane {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 18px;
      min-height: 75vh;
      overflow-y: auto;
    }
    .cn-empty {
      padding: 80px 20px;
      text-align: center;
      color: var(--text-faint);
    }
    .cn-empty h3 { color: var(--text-dim); margin: 14px 0 6px; }
    .cn-empty p { font-size: 12px; max-width: 420px; margin: 4px auto; }

    .cn-player {
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .cn-player iframe { width: 100%; height: 100%; border: 0; }
    .cn-player video { width: 100%; height: 100%; }
    .cn-player-toolbar {
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 10px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .cn-time-input {
      width: 80px;
      padding: 6px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
      font-family: var(--font-mono);
      text-align: center;
    }
    .cn-clip-list {
      display: flex; flex-direction: column; gap: 8px;
      margin-top: 14px;
    }
    .cn-clip-card {
      padding: 12px 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      display: flex; gap: 12px; align-items: center;
    }
    .cn-clip-time {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }
    .cn-clip-body { flex: 1; min-width: 0; }
    .cn-clip-label { font-size: 13px; color: var(--text); margin-bottom: 2px; }
    .cn-clip-cat { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
    .cn-clip-actions { display: flex; gap: 6px; }
    .cn-clip-btn {
      padding: 4px 10px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 11px;
      cursor: pointer;
    }
    .cn-clip-btn:hover { color: var(--accent); border-color: var(--accent); }
    .cn-clip-btn.danger:hover { color: #fca5a5; border-color: #fca5a5; }

    /* ── Compare Mode (v3 M3) ── */
    .cmp-shell {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 16px;
      min-height: 70vh;
    }
    @media (max-width: 1024px) { .cmp-shell { grid-template-columns: 1fr; } }
    .cmp-config {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 18px;
      display: flex; flex-direction: column; gap: 12px;
      max-height: 80vh; overflow-y: auto;
    }
    .cmp-models {
      display: flex; flex-direction: column; gap: 4px;
      max-height: 240px; overflow-y: auto;
      padding: 6px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .cmp-model-opt {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-dim);
    }
    .cmp-model-opt:hover { background: var(--bg-elev); color: var(--text); }
    .cmp-model-opt.selected {
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
    }
    .cmp-model-opt input[type="checkbox"] { accent-color: var(--accent); }
    .cmp-model-opt .new-badge {
      font-size: 9px; padding: 1px 5px;
      background: linear-gradient(135deg, #fb7185, #f472b6);
      color: white; border-radius: 4px;
      font-weight: 700;
    }
    .cmp-cost-row {
      padding: 10px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 11px;
      color: var(--text-dim);
      display: flex; gap: 12px; justify-content: space-between;
    }
    .cmp-cost-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
    .cmp-results {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 18px;
      min-height: 70vh;
      overflow-y: auto;
    }
    .cmp-empty {
      padding: 80px 20px;
      text-align: center;
      color: var(--text-faint);
    }
    .cmp-empty h3 { color: var(--text-dim); margin: 14px 0 6px; }
    .cmp-empty p { font-size: 12px; max-width: 420px; margin: 4px auto; }
    .cmp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }
    .cmp-cell {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .cmp-cell.winner {
      border-color: #6ee7b7;
      box-shadow: 0 0 0 2px rgba(110,231,183,0.30);
    }
    .cmp-cell-head {
      padding: 10px 14px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
    }
    .cmp-cell-model {
      flex: 1;
      font-size: 12px; font-weight: 700;
      color: var(--text);
    }
    .cmp-cell-status {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
    }
    .cmp-cell-status.queued    { background: rgba(148,163,184,0.18); color: #94a3b8; }
    .cmp-cell-status.running   { background: rgba(103,232,249,0.18); color: #67e8f9; animation: cmpPulse 1.6s ease-in-out infinite; }
    .cmp-cell-status.done      { background: rgba(110,231,183,0.18); color: #6ee7b7; }
    .cmp-cell-status.failed    { background: rgba(252,165,165,0.18); color: #fca5a5; }
    @keyframes cmpPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
    .cmp-cell-body {
      aspect-ratio: 16/9;
      background: #000;
      display: grid; place-items: center;
      color: var(--text-faint);
      font-size: 11px;
      position: relative;
    }
    .cmp-cell-body video, .cmp-cell-body img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .cmp-cell-body .cmp-spinner {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,0.1);
      border-top-color: var(--accent);
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .cmp-cell-foot {
      padding: 10px 14px;
      display: flex; flex-direction: column; gap: 8px;
      font-size: 11px;
    }
    .cmp-metrics {
      display: flex; gap: 10px;
      color: var(--text-faint);
      font-variant-numeric: tabular-nums;
    }
    .cmp-stars {
      display: flex; gap: 2px;
    }
    .cmp-star {
      cursor: pointer;
      color: var(--text-faint);
      font-size: 16px;
    }
    .cmp-star.on { color: #fbbf24; }
    .cmp-cell-actions {
      display: flex; gap: 6px;
    }
    .cmp-pick-btn {
      flex: 1;
      padding: 6px 10px;
      background: var(--accent);
      color: white;
      border: 0;
      border-radius: 6px;
      font-size: 11px; font-weight: 600;
      cursor: pointer;
    }
    .cmp-pick-btn.picked {
      background: #6ee7b7;
      color: #064e3b;
    }
    .cmp-pick-btn:hover { filter: brightness(1.1); }
    .cmp-history-card {
      padding: 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
    }
    .cmp-history-list {
      display: flex; flex-direction: column; gap: 6px;
    }
    .cmp-history-row {
      display: flex; gap: 10px; align-items: center;
      padding: 8px 10px;
      background: var(--bg-1);
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
    }
    .cmp-history-row:hover { background: var(--bg-elev); }

    /* ── Character & Style Bible (v3 M2) ── */
    .bible-toolbar {
      display: flex; gap: 10px; align-items: center;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .bible-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 1200px) { .bible-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 720px)  { .bible-grid { grid-template-columns: 1fr; } }
    .bible-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 20px;
      display: flex; flex-direction: column; gap: 12px;
      justify-content: space-between;
      cursor: pointer;
      transition: all var(--t-fast);
      position: relative;
    }
    .ch-card-delete {
      position: absolute;
      top: 10px; right: 10px;
      width: 26px; height: 26px;
      background: rgba(8,8,12,0.55);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 50%;
      color: var(--text-faint, #797986);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transform: scale(0.92);
      transition: opacity 180ms, transform 180ms, color 180ms, border-color 180ms, background 180ms;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 3;
    }
    .bible-card:hover .ch-card-delete,
    .ch-card-delete:focus-visible {
      opacity: 1;
      transform: scale(1);
    }
    .ch-card-delete:hover {
      background: #EF4444;
      border-color: #EF4444;
      color: #fff;
      transform: scale(1.08);
    }
    .bible-card:hover {
      border-color: rgba(167,139,250,0.40);
      transform: translateY(-1px);
      box-shadow: 0 12px 28px -10px rgba(167,139,250,0.20);
    }
    .bible-card.add-new {
      border: 1px dashed var(--border-strong);
      background: transparent;
      align-items: center; justify-content: center;
      min-height: 220px;
      color: var(--text-faint);
      font-size: 13px;
    }
    .bible-card.add-new:hover { color: var(--accent); border-color: var(--accent); }
    .bible-card-head {
      display: flex; gap: 16px; align-items: flex-start;
    }
    .bible-avatar {
      width: 80px; height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--bib-c1, #a78bfa), var(--bib-c2, #6366f1));
      display: grid; place-items: center;
      color: white; font-weight: 700; font-size: 28px;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.08);
    }
    .bible-avatar.style-tile {
      border-radius: 8px;
      background: var(--bib-grad, linear-gradient(135deg, #a78bfa, #6366f1));
    }
    .bible-name {
      font-size: 17px; font-weight: 700; color: var(--text);
      margin: 0; line-height: 1.25;
    }
    .bible-role {
      font-size: 11px; color: var(--text-faint);
      letter-spacing: 0.02em;
      margin-top: 2px;
    }
    .bible-fragment {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.5;
      padding: 8px 10px;
      background: var(--bg-1);
      border-radius: 6px;
      max-height: 60px; overflow: hidden;
      position: relative;
    }
    .bible-fragment::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 20px;
      background: linear-gradient(to bottom, transparent, var(--bg-1));
    }
    .bible-tags {
      display: flex; gap: 4px; flex-wrap: wrap;
    }
    .bible-tag {
      font-size: 10px;
      padding: 2px 8px;
      background: var(--bg-elev);
      border-radius: 10px;
      color: var(--text-dim);
    }
    .bible-meta {
      font-size: 10px;
      color: var(--text-faint);
      display: flex; gap: 10px;
    }
    .ch-workbench {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
      margin-bottom: 18px;
    }
    .ch-controls {
      display: grid;
      grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) minmax(140px, 180px) minmax(150px, 190px);
      gap: 10px;
      align-items: center;
    }
    .ch-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .ch-input,
    .ch-select {
      height: 38px;
      padding: 0 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      outline: none;
    }
    .ch-input:focus,
    .ch-select:focus { border-color: rgba(167,139,250,0.46); }
    .ch-action-btn,
    .ch-card-btn {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-dim);
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all var(--t-fast);
      white-space: nowrap;
    }
    .ch-action-btn:hover,
    .ch-card-btn:hover {
      color: var(--accent);
      border-color: rgba(167,139,250,0.34);
      transform: translateY(-1px);
    }
    .ch-action-btn.primary,
    .ch-card-btn.primary {
      color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border-color: transparent;
      box-shadow: var(--shadow-accent);
    }
    .ch-action-btn.danger,
    .ch-card-btn.danger {
      color: #fca5a5;
      background: rgba(248,113,113,0.08);
      border-color: rgba(248,113,113,0.28);
    }
    .ch-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .ch-metric {
      padding: 16px 18px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--text-faint);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .ch-metric-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ch-metric-icon.purple { background: rgba(167,139,250,0.15); color: #a78bfa; }
    .ch-metric-icon.green  { background: rgba(52,211,153,0.15);  color: #34d399; }
    .ch-metric-icon.blue   { background: rgba(96,165,250,0.15);  color: #60a5fa; }
    .ch-metric-icon.pink   { background: rgba(251,113,133,0.15); color: #fb7185; }
    .ch-metric-body { display: flex; flex-direction: column; gap: 2px; }
    .ch-metric strong {
      display: block;
      color: var(--text);
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .ch-bulkbar {
      display: none;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 14px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(34,211,238,0.045));
      border: 1px solid rgba(167,139,250,0.24);
      border-radius: 10px;
    }
    .ch-bulkbar.active { display: flex; }
    .ch-bulk-title {
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
      margin-right: auto;
      font-variant-numeric: tabular-nums;
    }
    .ch-select-box { display: none; }
    .bible-card.selected {
      border-color: rgba(167,139,250,0.62);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.16), 0 14px 34px -14px rgba(167,139,250,0.36);
    }
    .ch-card-topline {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .ch-pill {
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      color: var(--text-faint);
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .ch-pill.ready  { color: #6ee7b7; background: rgba(110,231,183,0.13); border-color: rgba(110,231,183,0.22); }
    .ch-pill.warn   { color: #fbbf24; background: rgba(251,191,36,0.12);  border-color: rgba(251,191,36,0.22); }
    .ch-pill.muted  { color: var(--text-faint); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
    .ch-card-progress {
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    .ch-card-progress span {
      display: block;
      height: 100%;
      width: var(--ready, 0%);
      background: linear-gradient(90deg, #34d399, var(--accent));
      border-radius: inherit;
      transition: width 0.4s ease;
    }
    .ch-card-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }
    .ch-card-actions-row {
      display: flex;
      gap: 5px;
      flex-wrap: nowrap;
    }
    .ch-card-actions-row.wrap { flex-wrap: wrap; }
    .ch-card-btn {
      min-height: 30px;
      padding: 0 9px;
      font-size: 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ch-card-btn.imagegen {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      border-color: transparent;
      box-shadow: var(--shadow-accent);
      gap: 5px;
    }
    .ch-card-btn.imagegen:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
      color: white;
    }
    .ch-imagegen-header {
      margin-left: auto;
      background: linear-gradient(135deg, #7c3aed, #a78bfa);
      border-color: transparent;
      color: white;
      box-shadow: 0 4px 14px -4px rgba(124,58,237,0.5);
      gap: 6px;
    }
    .ch-imagegen-header:hover {
      filter: brightness(1.08);
      color: white;
      transform: translateY(-1px);
    }
    /* ── 키이미지 버튼 (카드 1행) ── */
    .ch-card-btn.keyimage-btn {
      background: rgba(96,165,250,0.12);
      color: #60a5fa;
      border-color: rgba(96,165,250,0.28);
    }
    .ch-card-btn.keyimage-btn:hover {
      background: rgba(96,165,250,0.22);
      transform: translateY(-1px);
    }
    /* ════════════════════════════════════════════════
       Character Key Image Studio — Shell
       ════════════════════════════════════════════════ */
    .ck-grid-host {
      display: block;
      width: 100%;
    }
    .ck-studio {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 70vh;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--bg-card);
    }
    /* Header */
    .ck-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid var(--border);
      min-height: 60px;
    }
    .ck-back-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: var(--r-pill);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 120ms, color 120ms;
    }
    .ck-back-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    .ck-header-center { flex: 1; min-width: 0; }
    .ck-header-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .ck-header-name {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ck-header-actions { display: flex; gap: 8px; }
    .ck-action-btn {
      padding: 7px 14px;
      border-radius: var(--r-pill);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 120ms, color 120ms, border-color 120ms;
      white-space: nowrap;
    }
    .ck-action-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    /* Body */
    .ck-body {
      display: flex;
      flex: 1;
      min-height: 0;
    }
    /* Sidebar */
    .ck-sidebar {
      width: 200px;
      min-width: 180px;
      max-width: 220px;
      padding: 24px 16px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: rgba(255,255,255,0.015);
    }
    .ck-sidebar-avatar {
      width: 80px;
      height: 80px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: white;
      margin: 0 auto 4px;
      flex-shrink: 0;
    }
    .ck-sidebar-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ck-sidebar-role {
      font-size: 11px;
      color: var(--text-faint);
      text-align: center;
      line-height: 1.4;
    }
    .ck-sidebar-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--r-pill);
      font-size: 10px;
      font-weight: 600;
      background: rgba(167,139,250,0.12);
      color: var(--accent);
      border: 1px solid rgba(167,139,250,0.25);
      align-self: center;
    }
    .ck-sidebar-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 4px 0;
    }
    .ck-sidebar-status { display: flex; flex-direction: column; gap: 6px; }
    .ck-status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-dim);
    }
    .ck-status-pill {
      padding: 1px 7px;
      border-radius: var(--r-pill);
      font-size: 10px;
      font-weight: 700;
    }
    .ck-status-pill.ok    { background: rgba(110,231,183,0.14); color: #6ee7b7; border: 1px solid rgba(110,231,183,0.25); }
    .ck-status-pill.warn  { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
    .ck-status-pill.muted { background: rgba(255,255,255,0.05); color: var(--text-faint); border: 1px solid rgba(255,255,255,0.08); }
    .ck-sidebar-fragment {
      font-size: 11px;
      color: var(--text-faint);
      line-height: 1.5;
      font-style: italic;
    }
    /* Main */
    .ck-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .ck-tabs {
      display: flex;
      gap: 2px;
      padding: 12px 16px 0;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
    }
    .ck-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      background: transparent;
      color: var(--text-faint);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: color 120ms, border-color 120ms;
      white-space: nowrap;
      margin-bottom: -1px;
    }
    .ck-tab:hover { color: var(--text-dim); }
    .ck-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .ck-tab-content {
      flex: 1;
      padding: 28px 24px;
      overflow-y: auto;
    }
    /* Placeholder */
    .ck-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      padding: 48px 24px;
      max-width: 480px;
      margin: 0 auto;
    }
    .ck-placeholder-icon {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      background: rgba(167,139,250,0.1);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ck-placeholder strong {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
    }
    .ck-placeholder p {
      font-size: 13px;
      color: var(--text-faint);
      line-height: 1.6;
      margin: 0;
    }
    /* Settings */
    .ck-settings-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
    .ck-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .ck-settings-row label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
    .ck-select {
      padding: 5px 10px;
      border-radius: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text-faint);
      font-size: 12px;
      opacity: 0.5;
      cursor: not-allowed;
    }
    .ck-range { width: 120px; opacity: 0.4; cursor: not-allowed; }
    /* Generate button */
    .ck-generate-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: var(--r-pill);
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none;
      color: white;
      font-size: 13px;
      font-weight: 700;
      cursor: not-allowed;
      opacity: 0.5;
      margin-top: 8px;
    }
    /* Responsive */
    @media (max-width: 720px) {
      .ck-body { flex-direction: column; }
      .ck-sidebar { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px; }
      .ck-sidebar-avatar { width: 52px; height: 52px; font-size: 18px; margin: 0; }
      .ck-sidebar-name, .ck-sidebar-role { text-align: left; }
      .ck-tabs { overflow-x: auto; }
      .ck-tab { padding: 7px 10px; font-size: 11px; }
    }
    /* ── Key Image Badge & Library ─────────────── */
    .ch-pill.keyimage-done {
      background: rgba(96,165,250,0.18);
      color: #60a5fa;
      border: 1px solid rgba(96,165,250,0.35);
    }
    .ki-lib-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      padding: 4px 0;
    }
    .ki-lib-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color .15s, transform .15s;
    }
    .ki-lib-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .ki-lib-thumb {
      width: 100%; aspect-ratio: 1/1;
      object-fit: cover; display: block;
      background: var(--bg);
    }
    .ki-lib-thumb.ki-placeholder {
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; background: var(--bg-card);
    }
    .ki-lib-body { padding: 10px 12px 12px; }
    /* ─────────────────────────────────────────── */

    /* ── CK Studio Phase 2 ─────────────────────── */
    /* Section head */
    .ck-section-head { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
    /* Reference grid */
    .ck-reference-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ck-reference-slot { display: flex; flex-direction: column; gap: 6px; }
    .ck-ref-label { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .ck-reference-drop {
      position: relative; width: 100%; aspect-ratio: 1/1;
      border: 2px dashed var(--border); border-radius: 10px;
      background: var(--bg); overflow: hidden; cursor: pointer;
      transition: border-color .2s, background .2s;
      display: flex; align-items: center; justify-content: center;
    }
    .ck-reference-drop:hover { border-color: var(--accent); background: rgba(99,102,241,.06); }
    .ck-reference-drop.has-image { border-style: solid; border-color: var(--accent); }
    .ck-reference-drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ck-ref-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; }
    .ck-ref-empty svg { opacity: .35; }
    .ck-ref-empty span { font-size: 10px; color: var(--text-faint); }
    .ck-ref-clear {
      position: absolute; top: 4px; right: 4px;
      background: rgba(0,0,0,.55); color: #fff; border: none;
      border-radius: 50%; width: 20px; height: 20px; font-size: 12px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      line-height: 1;
    }
    /* Info card */
    .ck-info-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px 16px; display: flex;
      flex-direction: column; gap: 8px;
    }
    .ck-info-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .ck-info-label { font-size: 11px; color: var(--text-faint); min-width: 60px; }
    .ck-info-val { font-size: 11px; color: var(--text); }
    /* Choice cards */
    .ck-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ck-choice-card {
      padding: 10px 8px; border-radius: 10px;
      background: var(--bg-card); border: 1.5px solid var(--border);
      cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
    }
    .ck-choice-card:hover { border-color: var(--accent); background: rgba(99,102,241,.07); }
    .ck-choice-card.selected { border-color: var(--accent); background: rgba(99,102,241,.13); }
    .ck-choice-card .ck-cc-icon { font-size: 20px; line-height: 1; margin-bottom: 4px; }
    .ck-choice-card .ck-cc-label { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
    /* Side tabs (style page sub-nav) */
    .ck-side-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .ck-side-tab {
      padding: 5px 12px; border-radius: var(--r-pill);
      background: var(--bg-card); border: 1px solid var(--border);
      font-size: 11px; color: var(--text-faint); cursor: pointer; transition: all .15s;
    }
    .ck-side-tab:hover { border-color: var(--accent); color: var(--accent); }
    .ck-side-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
    /* Form grid */
    .ck-form-grid { display: flex; flex-direction: column; gap: 12px; }
    .ck-label { font-size: 11px; color: var(--text-faint); font-weight: 600; margin-bottom: 4px; display: block; }
    .ck-field { display: flex; flex-direction: column; }
    .ck-input {
      width: 100%; padding: 8px 10px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 12px; font-family: inherit;
    }
    .ck-input:focus { outline: none; border-color: var(--accent); }
    .ck-textarea {
      width: 100%; padding: 8px 10px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 12px; font-family: inherit;
      resize: vertical; min-height: 70px; line-height: 1.5;
    }
    .ck-textarea:focus { outline: none; border-color: var(--accent); }
    /* Chip buttons (quick select) */
    .ck-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
    .ck-chip-btn {
      padding: 3px 10px; border-radius: var(--r-pill);
      border: 1px solid var(--border); background: var(--bg-card);
      font-size: 10px; color: var(--text-faint); cursor: pointer; transition: all .15s;
    }
    .ck-chip-btn:hover, .ck-chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    /* Generate footer */
    .ck-generate-footer {
      border-top: 1px solid var(--border); padding-top: 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .ck-generate-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 13px 24px; border-radius: var(--r-pill);
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none; color: #fff; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: opacity .15s, transform .1s;
    }
    .ck-generate-cta:hover { opacity: .9; transform: translateY(-1px); }
    .ck-generate-cta:active { transform: translateY(0); }
    .ck-generate-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .ck-generate-cta.loading { opacity: .75; cursor: wait; }
    /* Result grid */
    .ck-result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ck-result-card {
      background: var(--bg-card); border: 1.5px solid var(--border);
      border-radius: 10px; overflow: hidden; cursor: pointer;
      transition: border-color .15s, transform .15s;
    }
    .ck-result-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .ck-result-card.selected-card { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
    .ck-result-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--bg); }
    .ck-mock-image { width: 100%; aspect-ratio: 1/1; background: linear-gradient(135deg, var(--bg-card), var(--border)); display: flex; align-items: center; justify-content: center; font-size: 32px; }
    .ck-result-body { padding: 8px 10px; }
    .ck-result-index { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
    .ck-result-badge { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font-size: 9px; font-weight: 700; text-transform: uppercase; background: rgba(99,102,241,.15); color: var(--accent); }
    .ck-result-buttons { display: flex; gap: 5px; padding: 0 10px 10px; flex-wrap: wrap; }
    .ck-rb {
      padding: 4px 10px; border-radius: var(--r-pill);
      background: var(--bg); border: 1px solid var(--border);
      font-size: 10px; color: var(--text-faint); cursor: pointer; transition: all .15s;
    }
    .ck-rb:hover { border-color: var(--accent); color: var(--accent); }
    .ck-rb-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
    .ck-rb-primary:hover { opacity: .85; color: #fff; }
    .ck-rb-action { background: rgba(var(--accent-rgb,99,102,241),.12); border-color: var(--accent); color: var(--accent); }
    .ck-rb-action:hover:not(:disabled) { background: var(--accent); color: #fff; }
    /* approved card */
    .ck-result-card.approved-card { border: 2px solid #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
    .approved-badge { background: #10b981 !important; color: #fff !important; }
    /* Guard CTA */
    .ck-shot-guard-card { border-color: rgba(251,191,36,.28) !important; background: rgba(251,191,36,.08) !important; }
    /* Character Visual Badges */
    .character-visual-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .character-visual-badge { padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; background:rgba(255,255,255,.06); color:var(--text-faint); }
    .character-visual-badge.ready { background:rgba(52,211,153,.14); color:#86efac; }
    .character-visual-badge.warn  { background:rgba(251,191,36,.14); color:#fbbf24; }
    .character-visual-badge.info  { background:rgba(96,165,250,.14); color:#93c5fd; }
    /* Library Key Image */
    .ck-library-keyimage-card { border-color:rgba(167,139,250,.16); }
    .ck-library-keyimage-thumb { width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.28); display:grid; place-items:center; color:var(--text-faint); }
    .ck-library-keyimage-thumb img { width:100%; height:100%; object-fit:cover; }

    /* ── Task #85: Identity Lock UI ── */
    /* Identity Settings Panel in CK Sidebar */
    .ck-identity-settings-panel { padding:12px 0 4px; }
    .ck-identity-header { display:flex; align-items:center; gap:8px; padding:0 0 10px; }
    .ck-identity-icon { font-size:14px; }
    .ck-identity-title { font-size:12px; font-weight:600; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; flex:1; }
    .ck-identity-body { display:flex; flex-direction:column; gap:8px; transition:opacity .2s; }
    .ck-identity-body--disabled { opacity:.4; pointer-events:none; }
    .ck-identity-row { display:flex; align-items:center; gap:8px; font-size:12px; }
    .ck-identity-label { color:var(--text-faint); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ck-identity-ref-thumb { width:32px; height:32px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
    .ck-identity-ref-name { color:var(--text-dim); font-size:11px; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80px; }
    .ck-identity-empty { color:var(--text-faint); font-size:11px; font-style:italic; }
    .ck-identity-slider { flex:1; accent-color:var(--accent); }
    .ck-identity-strength-val { font-size:11px; color:var(--text-dim); min-width:32px; text-align:right; }
    /* Toggle switch */
    .ck-identity-toggle { display:inline-flex; align-items:center; cursor:pointer; position:relative; }
    .ck-identity-toggle input { opacity:0; width:0; height:0; position:absolute; }
    .ck-toggle-track { width:32px; height:18px; background:var(--border); border-radius:999px; position:relative; transition:background .2s; display:block; }
    .ck-identity-toggle input:checked + .ck-toggle-track { background:var(--accent); }
    .ck-toggle-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; display:block; }
    .ck-identity-toggle input:checked + .ck-toggle-track .ck-toggle-thumb { transform:translateX(14px); }
    .ck-identity-toggle--sm .ck-toggle-track { width:26px; height:15px; }
    .ck-identity-toggle--sm .ck-toggle-thumb { width:11px; height:11px; }
    .ck-identity-toggle--sm input:checked + .ck-toggle-track .ck-toggle-thumb { transform:translateX(11px); }

    /* Shot Identity Lock Panel */
    .shot-identity-lock-panel { margin:0 0 10px; padding:12px 16px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.28); border-radius:12px; }
    .sil-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
    .sil-icon { font-size:14px; }
    .sil-title { font-size:12px; font-weight:600; color:#10b981; }
    .sil-chars { display:flex; flex-direction:column; gap:6px; }
    .sil-char-row { display:flex; align-items:center; gap:10px; }
    .sil-char-thumb { width:32px; height:32px; border-radius:6px; object-fit:cover; border:1px solid rgba(16,185,129,.3); flex-shrink:0; }
    .sil-char-thumb--empty { background:rgba(16,185,129,.12); }
    .sil-char-info { flex:1; display:flex; flex-direction:column; gap:1px; }
    .sil-char-name { font-size:12px; font-weight:600; color:var(--text); }
    .sil-char-strength { font-size:10px; color:var(--text-faint); }
    .sil-lock-badge { font-size:9px; font-weight:700; letter-spacing:.08em; background:#10b981; color:#fff; border-radius:4px; padding:2px 5px; flex-shrink:0; }

    /* Identity Trace Badges (Library cards) */
    .identity-trace-badges { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; }
    .identity-trace-badge { font-size:9px; font-weight:600; letter-spacing:.05em; padding:2px 6px; border-radius:4px; white-space:nowrap; }
    .identity-trace-badge--locked { background:rgba(16,185,129,.15); color:#10b981; border:1px solid rgba(16,185,129,.3); }
    .identity-trace-badge--strength { background:rgba(99,102,241,.12); color:var(--accent); border:1px solid rgba(99,102,241,.25); }
    .identity-trace-badge--char { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.25); }
    .identity-trace-badge--source { background:rgba(var(--text-faint-rgb,128,128,128),.1); color:var(--text-faint); border:1px solid var(--border); }
    /* Action button tone for production flow buttons */
    .ck-result-buttons button[data-send-key-to-shot],
    .ck-result-buttons button[data-send-key-to-sheet],
    .ck-result-buttons button[data-use-key-as-base] { color:var(--accent); border-color:rgba(167,139,250,.28); background:rgba(167,139,250,.10); }
    /* History row */
    .ck-history-row { width:100%; min-height:38px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-dim); display:flex; justify-content:space-between; align-items:center; padding:9px 11px; margin-top:8px; text-align:left; cursor:pointer; }
    .ck-history-row:hover { border-color:rgba(167,139,250,.34); background:rgba(167,139,250,.08); }
    @media (max-width:520px) {
      .character-visual-badges { gap:4px; }
      .character-visual-badge { font-size:10px; }
    }
    /* Empty results */
    .ck-empty-results {
      grid-column: 1 / -1; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 8px;
      padding: 48px 20px; text-align: center;
    }
    .ck-empty-results svg { opacity: .3; }
    .ck-empty-results p { font-size: 13px; color: var(--text-faint); margin: 0; }
    /* Status badges */
    .ck-ready { color: #4ade80; font-size: 10px; font-weight: 700; }
    .ck-warn  { color: #fb923c; font-size: 10px; font-weight: 700; }
    /* Settings select override (2단계 - enabled) */
    .ck-select-enabled {
      padding: 5px 10px; border-radius: 8px;
      background: var(--bg); border: 1px solid var(--border);
      color: var(--text); font-size: 12px; cursor: pointer;
    }
    /* Progress bar for generation */
    .ck-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
    .ck-progress-bar {
      height: 4px; border-radius: 2px;
      background: var(--border); overflow: hidden;
    }
    .ck-progress-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width .4s;
    }
    .ck-progress-label { font-size: 10px; color: var(--text-faint); text-align: center; }
    @media (max-width: 500px) {
      .ck-reference-grid { grid-template-columns: repeat(2, 1fr); }
      .ck-card-grid { grid-template-columns: repeat(2, 1fr); }
      .ck-result-grid { grid-template-columns: 1fr; }
    }
    /* ── CK Studio v2 Redesign ── */
    .ck2-studio { display:flex; flex-direction:column; min-height:80vh; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .ck2-header { display:flex; align-items:center; gap:12px; padding:14px 20px; background:rgba(255,255,255,0.025); border-bottom:1px solid var(--border); }
    .ck2-header-title { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; }
    .ck2-header-char { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
    .ck2-header-avatar { width:38px; height:38px; border-radius:10px; border:2px solid rgba(255,255,255,0.12); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
    .ck2-header-name-wrap { display:flex; flex-direction:column; gap:2px; }
    .ck2-header-name-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .ck2-header-name { font-size:15px; font-weight:800; color:var(--text); }
    .ck2-ready-pill { padding:2px 8px; border-radius:var(--r-pill); background:rgba(34,197,94,0.15); border:1px solid rgba(34,197,94,0.3); color:#22c55e; font-size:10px; font-weight:700; display:flex; align-items:center; gap:3px; }
    .ck2-project-label { font-size:11px; color:var(--text-faint); }
    .ck2-project-label em { color:var(--accent); font-style:normal; font-weight:600; }
    .ck2-header-actions { display:flex; gap:8px; flex-shrink:0; }
    .ck2-body { display:grid; grid-template-columns:380px 1fr; flex:1; min-height:0; }
    .ck2-left { border-right:1px solid var(--border); padding:20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
    .ck2-right { padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }
    .ck2-section-title { font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; }
    .ck2-purpose-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .ck2-purpose-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 8px; border-radius:12px; background:rgba(255,255,255,0.04); border:1.5px solid var(--border); color:var(--text-dim); font-size:12px; font-weight:600; cursor:pointer; transition:all 140ms; }
    .ck2-purpose-tab:hover { border-color:rgba(167,139,250,.4); color:var(--text); }
    .ck2-purpose-tab.active { background:rgba(167,139,250,.14); border-color:var(--accent); color:var(--accent); }
    .ck2-purpose-icon { font-size:20px; line-height:1; }
    .ck2-textarea-wrap { position:relative; }
    .ck2-textarea { width:100%; min-height:140px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:13px; line-height:1.65; padding:12px 12px 28px; resize:vertical; box-sizing:border-box; font-family:inherit; }
    .ck2-textarea:focus { outline:none; border-color:var(--accent); }
    .ck2-char-count { position:absolute; bottom:9px; right:11px; font-size:10px; color:var(--text-faint); pointer-events:none; }
    .ck2-quick-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .ck2-qa-btn { padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-dim); font-size:11px; font-weight:600; cursor:pointer; transition:all 120ms; display:flex; align-items:center; gap:5px; }
    .ck2-qa-btn:hover { border-color:rgba(167,139,250,.5); color:var(--text); background:rgba(167,139,250,.08); }
    .ck2-advanced-toggle { width:100%; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text-dim); font-size:12px; font-weight:700; cursor:pointer; text-align:left; transition:background 120ms; }
    .ck2-advanced-toggle:hover { background:rgba(255,255,255,0.07); }
    .ck2-advanced-summary { flex:1; font-size:11px; color:var(--text-faint); font-weight:400; text-align:right; }
    .ck2-advanced-body { padding:14px; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; display:flex; flex-direction:column; gap:10px; }
    .ck2-adv-toggle-wrap { border-radius:10px 10px 0 0 !important; border-bottom:none !important; }
    .ck2-generate-btn { width:100%; padding:15px; background:linear-gradient(135deg,#7c3aed,#6366f1); border:none; border-radius:12px; color:#fff; font-size:15px; font-weight:800; cursor:pointer; transition:opacity 140ms,transform 100ms; display:flex; align-items:center; justify-content:center; gap:8px; }
    .ck2-generate-btn:hover { opacity:.9; transform:translateY(-1px); }
    .ck2-generate-btn:active { transform:translateY(0); }
    .ck2-generate-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
    .ck2-results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .ck2-results-title { font-size:14px; font-weight:700; color:var(--text); }
    .ck2-result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .ck2-result-card { border-radius:12px; overflow:hidden; border:1.5px solid var(--border); background:rgba(255,255,255,0.03); transition:border-color 140ms; }
    .ck2-result-card:hover { border-color:rgba(167,139,250,.4); }
    .ck2-result-card.approved { border-color:var(--accent); }
    .ck2-result-img { position:relative; aspect-ratio:1; background:rgba(255,255,255,0.03); overflow:hidden; }
    .ck2-result-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .ck2-num { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }
    .ck2-best-badge { position:absolute; top:8px; right:8px; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:10px; font-weight:800; z-index:2; }
    .ck2-menu-btn { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); border:none; color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; line-height:1; }
    .ck2-result-card.approved .ck2-menu-btn { right:46px; }
    .ck2-result-footer { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); }
    .ck2-rb-star,.ck2-rb-var { padding:9px 6px; background:transparent; border:none; color:var(--text-dim); font-size:11px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:all 120ms; }
    .ck2-rb-star:hover { color:#fbbf24; background:rgba(251,191,36,.08); }
    .ck2-rb-var:hover { color:var(--accent); background:rgba(167,139,250,.08); }
    .ck2-rb-star { border-right:1px solid var(--border); }
    .ck2-img-placeholder { width:100%; min-height:160px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
    .ck2-empty-results { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; gap:12px; color:var(--text-faint); border:1px dashed var(--border); border-radius:12px; text-align:center; }
    .ck2-empty-results strong { color:var(--text-dim); font-size:14px; }
    .ck2-history-section { display:flex; flex-direction:column; gap:6px; }
    .ck2-history-row { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text-dim); font-size:12px; cursor:pointer; transition:all 120ms; text-align:left; }
    .ck2-history-row:hover { border-color:rgba(167,139,250,.35); background:rgba(167,139,250,.06); }
    .ck2-history-thumb { width:36px; height:36px; border-radius:8px; overflow:hidden; flex-shrink:0; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
    .ck2-history-thumb img { width:100%; height:100%; object-fit:cover; }
    .ck2-history-info { flex:1; min-width:0; }
    .ck2-history-info strong { display:block; font-size:12px; font-weight:600; color:var(--text); }
    .ck2-history-info span { font-size:11px; color:var(--text-faint); }
    @media (max-width:900px) { .ck2-body { grid-template-columns:1fr; } .ck2-left { border-right:none; border-bottom:1px solid var(--border); } }

    /* ── CK Studio v3 (목업 반영) ── */
    .ck3-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px 18px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.018); }
    .ck3-title-block { display:flex; flex-direction:column; gap:4px; }
    .ck3-kicker { font-size:10px; font-weight:800; letter-spacing:0.12em; color:var(--accent); text-transform:uppercase; }
    .ck3-h1 { font-size:22px; font-weight:900; color:var(--text); display:flex; align-items:center; gap:8px; line-height:1.1; font-family:var(--font-display,inherit); }
    .ck3-h1 svg { color:var(--accent); flex-shrink:0; }
    .ck3-subtitle { font-size:12px; color:var(--text-faint); margin-top:2px; }
    .ck3-char-card { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; flex-shrink:0; min-width:0; max-width:280px; }
    .ck3-char-avatar { width:48px; height:48px; border-radius:10px; border:2px solid rgba(255,255,255,0.12); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#fff; flex-shrink:0; }
    .ck3-char-info { flex:1; min-width:0; }
    .ck3-char-name { font-size:15px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ck3-char-role { font-size:11px; color:var(--text-faint); margin-top:1px; }
    .ck3-char-badge { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:2px 8px; border-radius:var(--r-pill); background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.28); color:#22c55e; font-size:10px; font-weight:700; }
    .ck3-char-badge.not-ready { background:rgba(156,163,175,0.12); border-color:rgba(156,163,175,0.28); color:#9ca3af; }

    .ck3-adv-always { display:flex; flex-direction:column; gap:10px; }
    .ck3-adv-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .ck3-adv-full { grid-column:1/-1; }
    .ck3-field { display:flex; flex-direction:column; gap:5px; }
    .ck3-field-label { font-size:11px; font-weight:600; color:var(--text-dim); }
    .ck3-select { width:100%; padding:8px 10px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; cursor:pointer; }
    .ck3-select:focus { outline:none; border-color:var(--accent); }
    .ck3-neg-input { width:100%; padding:8px 10px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; box-sizing:border-box; font-family:inherit; resize:none; min-height:52px; }
    .ck3-neg-input:focus { outline:none; border-color:var(--accent); }

    .ck3-cost-row { display:flex; align-items:center; gap:6px; padding:10px 12px; background:rgba(167,139,250,0.07); border:1px solid rgba(167,139,250,0.18); border-radius:10px; }
    .ck3-cost-icon { font-size:14px; }
    .ck3-cost-label { font-size:12px; color:var(--text-dim); }
    .ck3-cost-val { font-size:14px; font-weight:800; color:var(--accent); }

    /* Result card v3 — hover overlay */
    .ck2-result-card.ck3-card { position:relative; }
    .ck3-card-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 50%); opacity:0; transition:opacity 160ms; pointer-events:none; border-radius:inherit; }
    .ck2-result-card.ck3-card:hover .ck3-card-overlay { opacity:1; pointer-events:auto; }
    .ck3-card-btns { display:flex; gap:6px; padding:10px; }
    .ck3-card-btn-select { flex:1; padding:8px; border-radius:8px; background:var(--accent); border:none; color:#fff; font-size:11px; font-weight:700; cursor:pointer; transition:opacity 120ms; }
    .ck3-card-btn-select:hover { opacity:.88; }
    .ck3-card-btn-var { padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background 120ms; backdrop-filter:blur(4px); }
    .ck3-card-btn-var:hover { background:rgba(255,255,255,0.22); }
    .ck2-result-card.ck3-card.approved { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 20px rgba(167,139,250,0.25); }
    .ck3-num-badge { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }
    .ck3-best-badge { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:10px; font-weight:800; z-index:2; display:flex; align-items:center; gap:3px; }

    /* Bottom action bar */
    .ck3-action-bar { margin-top:auto; padding:14px 16px; background:rgba(167,139,250,0.08); border:1px solid rgba(167,139,250,0.22); border-radius:12px; display:flex; align-items:center; gap:12px; }
    .ck3-action-check { width:24px; height:24px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .ck3-action-text { flex:1; min-width:0; }
    .ck3-action-text strong { display:block; font-size:13px; font-weight:700; color:var(--text); }
    .ck3-action-text span { font-size:11px; color:var(--text-faint); }
    .ck3-action-cta { padding:10px 16px; border-radius:10px; background:var(--accent); border:none; color:#fff; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; transition:opacity 120ms; flex-shrink:0; display:flex; align-items:center; gap:5px; }
    .ck3-action-cta:hover { opacity:.88; }
    .ck3-action-cost { font-size:11px; color:var(--accent); font-weight:700; flex-shrink:0; white-space:nowrap; }

    /* Generate btn v3 */
    .ck3-gen-btn { width:100%; padding:16px; background:linear-gradient(135deg,#7c3aed,#6366f1); border:none; border-radius:12px; color:#fff; font-size:15px; font-weight:800; cursor:pointer; transition:opacity 140ms,transform 100ms,box-shadow 140ms; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 20px rgba(124,58,237,0.35); margin-top:auto; }
    .ck3-gen-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 6px 28px rgba(124,58,237,0.48); }
    .ck3-gen-btn:active { transform:translateY(0); }
    .ck3-gen-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

    @media (max-width:900px) { .ck3-page-head { flex-direction:column; } .ck3-char-card { max-width:100%; } }
    /* ─────────────────────────────────────────── */
    .ch-empty {
      grid-column: 1 / -1;
      padding: 64px 20px;
      text-align: center;
      color: var(--text-faint);
      background: var(--bg-card);
      border: 1px dashed var(--border);
      border-radius: 10px;
      font-size: 13px;
    }
    .ch-empty strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text-dim);
      font-family: var(--font-display);
      font-size: 18px;
    }
    .ch-usage-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 14px;
    }
    .ch-usage-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-1);
      color: var(--text-dim);
      font-size: 12px;
    }
    .ch-usage-row strong {
      display: block;
      color: var(--text);
      margin-bottom: 3px;
    }
    .ch-rel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
    }
    .ch-rel-card {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-1);
    }
    .ch-rel-title {
      color: var(--text);
      font-weight: 800;
      font-size: 13px;
      margin-bottom: 8px;
    }
    .ch-rel-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ch-rel-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 8px 9px;
      border-radius: 7px;
      background: rgba(255,255,255,0.035);
      color: var(--text-dim);
      font-size: 12px;
    }
    .ch-rel-item strong { color: var(--text); }
    .ch-rel-type {
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(167,139,250,0.12);
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
    }
    .ch-rel-form {
      display: grid;
      grid-template-columns: 1fr 130px;
      gap: 8px;
      margin-top: 12px;
    }
    .ch-rel-form textarea {
      grid-column: 1 / -1;
      min-height: 54px;
    }
    .ch-rel-row-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      grid-column: 1 / -1;
    }
    @media (max-width: 980px) {
      .ch-controls { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .ch-controls,
      .ch-metrics { grid-template-columns: 1fr; }
      .ch-action-btn { width: 100%; }
    }
    .bible-palette-row {
      display: flex; gap: 4px;
    }
    .bible-palette-swatch {
      width: 22px; height: 22px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    /* Bible 편집 모달 */
    .bible-modal {
      position: fixed; inset: 0;
      background: rgba(8,8,12,0.80);
      backdrop-filter: blur(8px);
      z-index: 9999;
      display: grid; place-items: center;
      padding: 16px;
    }
    .bible-modal-card {
      width: 100%; max-width: 760px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: 0;
      max-height: 90vh;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .bible-modal-head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
    }
    .bible-modal-head h3 { margin: 0; flex: 1; font-size: 16px; color: var(--text); }
    .bible-modal-body {
      padding: 18px 22px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 14px;
    }
    .bible-modal-foot {
      padding: 14px 22px;
      border-top: 1px solid var(--border);
      background: var(--bg-1);
      display: flex; gap: 8px; justify-content: flex-end;
    }

    /* ── 캐릭터 편집 모달 탭 ── */
    .cf-tabs {
      display: flex; gap: 0; padding: 0 22px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
      flex-shrink: 0;
    }
    .cf-tab-btn {
      padding: 10px 18px; font-size: 13px; font-weight: 500;
      color: var(--text-faint); background: transparent;
      border: none; border-bottom: 2px solid transparent;
      cursor: pointer; transition: all 120ms; margin-bottom: -1px;
      display: inline-flex; align-items: center; gap: 6px;
      white-space: nowrap;
    }
    .cf-tab-btn:hover { color: var(--text); }
    .cf-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .cf-tab-pane { display: none; }
    .cf-tab-pane.active { display: flex; flex-direction: column; gap: 14px; }
    .cf-flow-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 12px 22px;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid var(--border);
    }
    .cf-flow-step {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,0.025);
      color: var(--text-faint);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .cf-flow-step-index {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: var(--bg-elev);
      color: var(--text-dim);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
    }
    .cf-flow-step.active {
      color: var(--accent);
      border-color: rgba(167,139,250,0.45);
      background: rgba(167,139,250,0.08);
    }
    .cf-flow-step.active .cf-flow-step-index {
      color: white;
      background: var(--accent);
    }
    .cf-flow-step.done {
      color: var(--green, #34D399);
      border-color: rgba(52,211,153,0.30);
      background: rgba(52,211,153,0.055);
    }
    .cf-flow-card {
      border: 1px solid rgba(167,139,250,0.22);
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(255,255,255,0.025));
      padding: 14px;
      display: grid;
      gap: 12px;
    }
    .cf-flow-card-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .cf-flow-card-title {
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .cf-flow-card-sub {
      margin-top: 3px;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.55;
    }
    .cf-prompt-preview {
      width: 100%;
      min-height: 96px;
      resize: vertical;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-1);
      color: var(--text-dim);
      font-family: var(--font-mono, Consolas, monospace);
      font-size: 11px;
      line-height: 1.55;
    }
    .cf-flow-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .cf-flow-next {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 9px 13px;
      border: 0;
      border-radius: 8px;
      background: var(--accent);
      color: white;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .cf-flow-next.secondary {
      background: var(--bg-elev);
      color: var(--text-dim);
      border: 1px solid var(--border);
    }
    .cf-source-mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .cf-source-choice {
      width: 100%;
      min-height: 76px;
      padding: 12px 13px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-card);
      color: var(--text-dim);
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      text-align: left;
      cursor: pointer;
      transition: border-color 180ms, background 180ms, box-shadow 180ms;
    }
    .cf-source-choice:hover {
      border-color: rgba(167,139,250,0.42);
      background: rgba(167,139,250,0.045);
    }
    .cf-source-choice.active {
      border-color: rgba(167,139,250,0.72);
      background: rgba(167,139,250,0.09);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.12);
      color: var(--text);
    }
    .cf-source-choice-mark {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--bg-1);
      color: var(--text-faint);
      font-size: 12px;
      font-weight: 900;
    }
    .cf-source-choice.active .cf-source-choice-mark {
      background: var(--accent);
      color: white;
    }
    .cf-source-choice strong {
      display: block;
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 4px;
      color: inherit;
    }
    .cf-source-choice > span:not(.cf-source-choice-mark) {
      min-width: 0;
    }
    .cf-source-choice > span:not(.cf-source-choice-mark) > span {
      display: block;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.45;
    }
    .cf-source-panel[hidden] { display: none !important; }
    .cf-generate-source-panel {
      border: 1px dashed rgba(167,139,250,0.36);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(255,255,255,0.025));
      padding: 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      min-height: 108px;
      margin-bottom: 4px;
    }
    .cf-generate-source-title {
      color: var(--text);
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 5px;
    }
    .cf-generate-source-copy {
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.55;
      max-width: 680px;
    }
    @media (max-width: 720px) {
      .cf-source-mode,
      .cf-generate-source-panel { grid-template-columns: 1fr; }
    }
    .cf-keyimage-flow-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
      gap: 14px;
      min-height: 360px;
    }
    .cf-flow-preview-box {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-card);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    .cf-flow-thumb {
      aspect-ratio: 1;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: radial-gradient(circle at 50% 0%, rgba(167,139,250,0.10), transparent 60%), var(--bg-1);
      display: grid;
      place-items: center;
      overflow: hidden;
      color: var(--text-faint);
      text-align: center;
      font-size: 12px;
      line-height: 1.5;
    }
    .cf-flow-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .cf-review-grid {
      display: grid;
      grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
      gap: 14px;
    }
    .cf-review-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-card);
      padding: 14px;
      min-width: 0;
    }
    .cf-review-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
    }
    .cf-review-row {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.055);
      font-size: 12px;
    }
    .cf-review-row:last-child { border-bottom: 0; }
    .cf-review-row span:first-child { color: var(--text-faint); }
    .cf-review-row span:last-child { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
    .cf-review-media {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
    }
    .cf-review-media-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg-1);
    }
    .cf-review-media-item img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      display: block;
    }
    .cf-review-media-item div {
      padding: 7px 8px;
      font-size: 10px;
      color: var(--text-faint);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cf-review-empty {
      border: 1px dashed var(--border-strong);
      border-radius: 8px;
      padding: 18px;
      color: var(--text-faint);
      font-size: 12px;
      text-align: center;
      background: rgba(255,255,255,0.02);
    }
    @media (max-width: 860px) {
      .cf-flow-steps { grid-template-columns: repeat(2, 1fr); }
      .cf-keyimage-flow-grid,
      .cf-review-grid { grid-template-columns: 1fr; }
    }

    /* ── 캐릭터 시트 레이아웃 ── */
    .csheet-layout {
      display: grid; grid-template-columns: 280px 1fr; gap: 0;
      flex: 1; overflow: hidden; min-height: 480px;
    }
    .csheet-left {
      border-right: 1px solid var(--border);
      padding: 18px 16px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 16px;
    }
    .csheet-right {
      padding: 18px 20px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 14px;
    }
    .csheet-section-title {
      font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
      text-transform: uppercase; color: var(--text-faint);
      margin-bottom: 6px;
    }

    /* 이미지 업로드 존 */
    .csheet-upload-zone {
      border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
      padding: 20px; text-align: center; cursor: pointer;
      transition: all 120ms; background: var(--bg-card);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .csheet-upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
    .csheet-upload-zone.has-file {
      border-color: var(--accent); border-style: solid;
      background: rgba(167,139,250,0.06);
    }
    .csheet-upload-zone svg { color: var(--text-faint); }
    .csheet-upload-zone.has-file svg { color: var(--accent); }
    .csheet-upload-preview {
      width: 100%; max-height: 100px; object-fit: cover;
      border-radius: var(--r-sm); display: none;
    }
    .csheet-upload-zone.has-file .csheet-upload-preview { display: block; }
    .csheet-upload-zone.has-file .csheet-upload-placeholder { display: none; }

    /* 앵글 선택 칩 */
    .csheet-angle-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
    }
    .csheet-angle-chip {
      padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 600;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      color: var(--text-faint); cursor: pointer; transition: all 100ms;
      background: var(--bg-card); user-select: none;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .csheet-angle-chip:hover { border-color: var(--accent); color: var(--accent); }
    .csheet-angle-chip.selected {
      border-color: var(--accent); background: var(--accent-soft);
      color: var(--accent);
    }
    .csheet-angle-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    /* AI 모델 선택 */
    .csheet-model-recommended {
      display: flex; flex-direction: column; gap: 5px;
    }
    .csheet-model-card {
      padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md);
      cursor: pointer; transition: all 120ms; background: var(--bg-card);
      display: flex; align-items: center; gap: 10px;
    }
    .csheet-model-card:hover { border-color: rgba(167,139,250,0.45); }
    .csheet-model-card.selected {
      border-color: var(--accent); background: rgba(167,139,250,0.07);
    }
    .csheet-model-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .csheet-model-info { flex: 1; min-width: 0; }
    .csheet-model-name {
      font-size: 13px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 5px;
    }
    .csheet-model-name .rec-badge {
      font-size: 9px; font-weight: 700; padding: 1px 5px;
      border-radius: 999px; background: rgba(52,211,153,0.18); color: var(--green);
    }
    .csheet-model-desc { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
    .csheet-model-meta {
      text-align: right; flex-shrink: 0;
    }
    .csheet-model-cost { font-size: 11px; font-weight: 600; color: var(--accent); }
    .csheet-model-speed { font-size: 10px; color: var(--text-faint); margin-top: 1px; }

    .csheet-model-expand-btn {
      font-size: 11px; color: var(--accent); background: transparent; border: none;
      cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px;
      font-weight: 600; transition: opacity 120ms;
    }
    .csheet-model-expand-btn:hover { opacity: 0.7; }
    .csheet-model-all { display: none; flex-direction: column; gap: 5px; }
    .csheet-model-all.open { display: flex; }
    .csheet-model-card.ext { opacity: 0.75; }
    .csheet-model-card.ext.selected { opacity: 1; }

    /* 비율 선택 */
    .csheet-ratio-row {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .csheet-ratio-btn {
      padding: 5px 12px; font-size: 11px; font-weight: 600;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      color: var(--text-faint); cursor: pointer; background: var(--bg-card);
      transition: all 100ms;
    }
    .csheet-ratio-btn:hover { border-color: var(--accent); color: var(--accent); }
    .csheet-ratio-btn.selected {
      border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
    }

    /* 생성 버튼 */
    .csheet-gen-btn {
      width: 100%; padding: 11px; font-size: 13px; font-weight: 700;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; border: none; border-radius: var(--r-md);
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
      box-shadow: var(--shadow-accent); transition: opacity 150ms;
    }
    .csheet-gen-btn:disabled {
      opacity: 0.38; cursor: not-allowed; box-shadow: none;
    }

    /* 결과 그리드 */
    .csheet-result-empty {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 10px; color: var(--text-faint);
      font-size: 13px; text-align: center; padding: 40px;
    }
    .csheet-result-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
    }
    .csheet-result-card {
      border: 1px solid var(--border); border-radius: var(--r-md);
      overflow: hidden; background: var(--bg-card);
      display: flex; flex-direction: column;
    }
    .csheet-result-thumb {
      width: 100%; aspect-ratio: 3/4; background: var(--bg-elev);
      object-fit: cover; display: block;
    }
    .csheet-result-thumb-placeholder {
      width: 100%; aspect-ratio: 3/4; background: linear-gradient(135deg, var(--bg-elev), rgba(167,139,250,0.06));
      display: flex; align-items: center; justify-content: center; color: var(--text-faint);
    }
    .csheet-result-info {
      padding: 8px 10px 4px;
    }
    .csheet-result-labels {
      display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
    }
    .csheet-result-label {
      font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
      background: var(--accent-soft); color: var(--accent);
    }
    .csheet-result-actions {
      display: flex; gap: 4px; padding: 0 8px 8px;
    }
    .csheet-result-btn {
      flex: 1; padding: 5px 4px; font-size: 10px; font-weight: 600;
      border: 1px solid var(--border); background: var(--bg-card);
      color: var(--text-dim); border-radius: var(--r-sm); cursor: pointer;
      transition: all 100ms; text-align: center;
    }
    .csheet-result-btn:hover { border-color: var(--accent); color: var(--accent); }
    .csheet-result-btn.primary {
      background: var(--accent-soft); border-color: rgba(167,139,250,0.4); color: var(--accent);
    }

    /* 슬롯 연결 버튼 */
    .csheet-slot-btn {
      padding: 3px 7px; font-size: 9px; font-weight: 700;
      border: 1.5px solid var(--border); background: var(--bg-card);
      color: var(--text-faint); border-radius: var(--r-sm); cursor: pointer;
      transition: all 100ms; letter-spacing: 0.02em;
    }
    .csheet-slot-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .csheet-slot-btn.rec {
      border-color: rgba(52,211,153,.45); color: var(--green); background: rgba(52,211,153,.08);
    }

    /* 생성 중 로딩 카드 */
    .csheet-loading-card {
      border: 1px solid var(--border); border-radius: var(--r-md);
      background: var(--bg-card); overflow: hidden;
    }
    .csheet-loading-thumb {
      width: 100%; aspect-ratio: 3/4;
      background: linear-gradient(90deg, var(--bg-elev) 25%, rgba(167,139,250,0.08) 50%, var(--bg-elev) 75%);
      background-size: 200% 100%;
      animation: csheet-shimmer 1.4s infinite;
    }
    @keyframes csheet-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    .csheet-loading-label {
      padding: 8px 10px; font-size: 11px; color: var(--text-faint);
      display: flex; align-items: center; gap: 6px;
    }
    .csheet-loading-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
      animation: csheet-pulse 1s infinite;
    }
    @keyframes csheet-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .bible-field {
      display: flex; flex-direction: column; gap: 5px;
    }
    .bible-field label {
      font-size: 11px;
      color: var(--text-faint);
      letter-spacing: 0.04em;
    }
    .bible-field input, .bible-field textarea, .bible-field select {
      padding: 9px 12px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
    }
    .bible-field textarea { resize: vertical; min-height: 60px; }
    .bible-field input:focus, .bible-field textarea:focus, .bible-field select:focus {
      outline: none; border-color: var(--accent);
    }
    .bible-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 600px) { .bible-row { grid-template-columns: 1fr; } }

    /* ── 🎲 세계관·스토리 랜덤 — 큰 주사위 박스 회전 (절제된 톤) ─ */
    #random-big-dice.rolling {
      animation: bigDiceRoll 2.4s cubic-bezier(0.36, 0, 0.66, 1) infinite !important;
      /* 색상은 원래 보라 톤 그대로 유지 — 핫핑크 글로우 제거 */
    }
    #random-big-dice.rolling > svg {
      animation: bigDiceSvgFlip 2.4s linear infinite;
    }
    @keyframes bigDiceRoll {
      0%   { transform: rotate(0deg)   scale(1)    rotateY(0deg); }
      50%  { transform: rotate(180deg) scale(1.04) rotateY(180deg); }
      100% { transform: rotate(360deg) scale(1)    rotateY(360deg); }
    }
    @keyframes bigDiceSvgFlip {
      0%   { transform: rotateX(0deg) rotateZ(0deg); }
      50%  { transform: rotateX(180deg) rotateZ(180deg); opacity: 0.75; }
      100% { transform: rotateX(360deg) rotateZ(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      #random-big-dice.rolling,
      #random-big-dice.rolling > svg { animation: none !important; }
    }

    /* ── 🎲 랜덤 주사위 — rolling 상태 + 카운트다운 ───────── */
    #cf-dice.rolling {
      cursor: wait !important;
      transform: scale(1.02);
      transition: all 220ms cubic-bezier(0.22,0.61,0.36,1);
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex-wrap: wrap;
      min-width: 280px;
      padding: 8px 14px !important;
    }
    #cf-dice .dice-spin {
      display: inline-block;
      animation: diceSpin 0.6s linear infinite;
      font-size: 16px;
    }
    #cf-dice .dice-rolling-label {
      letter-spacing: 0.02em;
      font-weight: 700;
      font-size: 12.5px;
    }
    #cf-dice .dice-countdown {
      font-family: var(--font-mono, Consolas, monospace);
      font-size: 11px;
      font-weight: 700;
      color: #FFE4F0;
      letter-spacing: 0.02em;
      padding: 2px 8px;
      background: rgba(255,255,255,0.18);
      border-radius: 999px;
      flex-shrink: 0;
    }
    #cf-dice .dice-bar {
      flex: 1 1 100%;
      height: 3px;
      background: rgba(255,255,255,0.18);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 2px;
    }
    #cf-dice .dice-bar-fill {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #FFFFFF, #FFE4F0);
      border-radius: 999px;
      transition: width 100ms linear;
    }
    @keyframes diceSpin {
      0%   { transform: rotate(0deg)   scale(1); }
      25%  { transform: rotate(180deg) scale(1.15); }
      50%  { transform: rotate(360deg) scale(1); }
      75%  { transform: rotate(540deg) scale(1.15); }
      100% { transform: rotate(720deg) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      #cf-dice .dice-spin { animation: none; }
    }

    /* ── 캐릭터 사진 등록 — 정면/측면/후면/전신 4분할 슬롯 ── */
    .cf-photo-slots {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 4px;
    }
    @media (max-width: 720px) {
      .cf-photo-slots { grid-template-columns: repeat(2, 1fr); }
    }
    .cf-photo-slot {
      position: relative;
      aspect-ratio: 3 / 4;
      background: var(--bg-1, #0F0F14);
      border: 1.5px dashed var(--border-strong, #36363F);
      border-radius: 12px;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 200ms, transform 200ms, box-shadow 200ms;
    }
    .cf-photo-slot:hover {
      border-color: var(--accent, #A78BFA);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px -8px rgba(167,139,250,0.45);
    }
    .cf-photo-slot.dragover {
      border-style: solid;
      border-color: var(--accent, #A78BFA);
      background: rgba(167,139,250,0.06);
    }
    .cf-photo-slot.filled {
      border-style: solid;
      border-color: var(--border, #2A2A33);
    }
    .cf-photo-slot.is-main {
      border: 2px solid var(--accent, #A78BFA);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.18), 0 12px 28px -10px rgba(167,139,250,0.40);
    }
    .cf-photo-slot img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      animation: cfPhotoFadeIn 280ms cubic-bezier(0.22,0.61,0.36,1);
    }
    .cf-photo-slot .cf-slot-label {
      position: absolute;
      top: 8px; left: 8px;
      font-family: var(--font-mono, Consolas, monospace);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.10em;
      padding: 3px 8px;
      background: rgba(8,8,12,0.75);
      color: var(--text, #E9E9F0);
      border-radius: 999px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      pointer-events: none;
      text-transform: uppercase;
    }
    .cf-photo-slot.is-main .cf-slot-label {
      background: var(--accent, #A78BFA);
      color: #0B0B14;
    }
    .cf-photo-slot .cf-slot-empty {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px;
      color: var(--text-faint, #797986);
      pointer-events: none;
    }
    .cf-photo-slot .cf-slot-empty svg { width: 22px; height: 22px; }
    .cf-photo-slot .cf-slot-empty .cf-slot-name {
      font-family: var(--font-display, 'Cambria', serif);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dim, #B5B5C2);
      letter-spacing: -0.01em;
    }
    .cf-photo-slot .cf-slot-empty .cf-slot-hint {
      font-size: 9.5px;
      color: var(--text-faint, #797986);
      letter-spacing: 0.04em;
    }
    .cf-photo-slot .cf-slot-rm {
      position: absolute;
      top: 6px; right: 6px;
      width: 22px; height: 22px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      border: none; border-radius: 50%;
      font-size: 12px; line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity 180ms, background 180ms;
      backdrop-filter: blur(4px);
      z-index: 2;
    }
    .cf-photo-slot.filled:hover .cf-slot-rm { opacity: 1; }
    .cf-photo-slot .cf-slot-rm:hover { background: #EF4444; }
    .cf-photo-slot input[type="file"] { display: none; }

    /* ── 캐릭터 사진 등록 — 메인 프리뷰 + 드롭존 + 썸네일 그리드 ─ */
    .cf-photo-area { display: grid; gap: 12px; }

    /* 메인 프리뷰 — 업로드 즉시 큰 사이즈로 표시 */
    .cf-photo-main-preview {
      position: relative;
      width: 100%;
      max-width: 220px;
      aspect-ratio: 1;
      margin: 0 auto;
      border-radius: 16px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.06), transparent 70%)
        var(--bg-1, #0F0F14);
      border: 2px solid var(--accent, #A78BFA);
      box-shadow:
        0 0 0 4px rgba(167,139,250,0.10),
        0 12px 36px -10px rgba(167,139,250,0.35),
        inset 0 1px 0 rgba(255,255,255,0.04);
      display: flex; align-items: center; justify-content: center;
      transition: border-color 220ms, box-shadow 220ms;
    }
    .cf-photo-main-preview img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      animation: cfPhotoFadeIn 280ms cubic-bezier(0.22,0.61,0.36,1);
    }
    @keyframes cfPhotoFadeIn {
      from { opacity: 0; transform: scale(0.96); }
      to   { opacity: 1; transform: scale(1); }
    }
    .cf-photo-main-preview.empty {
      border-style: dashed;
      border-width: 2px;
      /* 빈 상태 — JS가 --cf-empty-color로 랜덤 컬러 주입 */
      border-color: var(--cf-empty-color, var(--border-strong, #36363F));
      box-shadow:
        0 0 0 3px rgba(255,255,255,0.02),
        0 0 24px -4px var(--cf-empty-glow, rgba(167,139,250,0.30));
      background:
        radial-gradient(ellipse at 50% 0%, var(--cf-empty-tint, rgba(167,139,250,0.06)), transparent 60%),
        var(--bg-1, #0F0F14);
      flex-direction: column;
      gap: 10px;
      color: var(--text-faint, #797986);
      transition: border-color 320ms, box-shadow 320ms, background 320ms;
    }
    .cf-photo-main-preview.empty .cf-mp-icon {
      width: 44px; height: 44px;
      color: var(--cf-empty-color, var(--text-faint, #797986));
      opacity: 0.85;
      filter: drop-shadow(0 0 8px var(--cf-empty-glow, rgba(167,139,250,0.45)));
      transition: color 320ms, filter 320ms;
    }
    .cf-photo-main-preview.empty .cf-mp-text {
      font-size: 11.5px;
      letter-spacing: 0.02em;
    }
    .cf-photo-main-preview .cf-mp-badge {
      position: absolute;
      top: 10px; left: 10px;
      font-size: 10px; font-weight: 700;
      padding: 3px 8px;
      background: var(--accent, #A78BFA);
      color: #fff;
      border-radius: 999px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 4px 12px -2px rgba(167,139,250,0.55);
      pointer-events: none;
    }
    .cf-photo-main-preview .cf-mp-rm {
      position: absolute;
      top: 10px; right: 10px;
      width: 28px; height: 28px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: grid; place-items: center;
      font-size: 13px;
      transition: background 180ms, transform 180ms;
      backdrop-filter: blur(8px);
    }
    .cf-photo-main-preview .cf-mp-rm:hover {
      background: #EF4444;
      transform: scale(1.05);
    }

    .cf-photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
      gap: 8px;
    }
    .cf-photo-grid:empty { display: none; }
    .cf-photo-thumb {
      position: relative;
      aspect-ratio: 1;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border, #2A2A33);
      background: var(--bg-1, #0F0F14);
      cursor: pointer;
      transition: transform 180ms, border-color 180ms, box-shadow 180ms;
    }
    .cf-photo-thumb:hover { transform: translateY(-1px); border-color: var(--accent, #A78BFA); }
    .cf-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cf-photo-thumb.main {
      border: 2px solid var(--accent, #A78BFA);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.20);
    }
    .cf-photo-thumb .cf-photo-rm {
      position: absolute; top: 4px; right: 4px;
      width: 22px; height: 22px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      border: none; border-radius: 50%;
      font-size: 12px; line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity 180ms, background 180ms;
    }
    .cf-photo-thumb:hover .cf-photo-rm { opacity: 1; }
    .cf-photo-thumb .cf-photo-rm:hover { background: #EF4444; }
    .cf-photo-thumb .cf-photo-main-badge {
      position: absolute; bottom: 4px; left: 4px;
      font-size: 9px; padding: 2px 6px;
      background: var(--accent, #A78BFA); color: #fff;
      border-radius: 4px; letter-spacing: 0.06em;
      font-weight: 700; text-transform: uppercase;
      pointer-events: none;
    }
    .cf-photo-drop {
      padding: 22px 16px;
      border: 1.5px dashed var(--border-strong, #36363F);
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all 200ms;
      display: flex; flex-direction: column;
      align-items: center; gap: 8px;
      background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.04), transparent 70%) var(--bg-card, #14141A);
      color: var(--text-dim, #B5B5C2);
    }
    .cf-photo-drop:hover, .cf-photo-drop.dragover {
      border-color: var(--accent, #A78BFA);
      background: rgba(167,139,250,0.06);
      color: var(--text, #E9E9F0);
    }
    .cf-photo-drop .cf-photo-ico {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: rgba(167,139,250,0.12);
      color: var(--accent, #A78BFA);
      display: grid; place-items: center;
    }
    .cf-photo-drop .cf-photo-ico svg { width: 16px; height: 16px; }
    .cf-photo-drop .cf-photo-title {
      font-size: 13px; font-weight: 600;
      color: var(--text, #E9E9F0);
    }
    .cf-photo-drop .cf-photo-sub {
      font-size: 11px;
      color: var(--text-faint, #797986);
    }
    .cf-photo-drop.full {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ── 캐릭터 보이스 선택 — select + 빈 상태 CTA ─────────── */
    .cf-voice-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: stretch;
    }
    .cf-voice-row select {
      min-width: 0;
    }
    .cf-voice-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 12px;
      background: var(--bg-card, #14141A);
      color: var(--text, #E9E9F0);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 8px;
      font-size: 11.5px; font-weight: 600;
      cursor: pointer;
      transition: border-color 180ms, color 180ms, background 180ms;
      white-space: nowrap;
    }
    .cf-voice-btn:hover {
      border-color: var(--accent, #A78BFA);
      color: var(--accent, #A78BFA);
    }
    .cf-voice-btn svg { width: 12px; height: 12px; }
    .cf-voice-empty {
      padding: 22px 18px;
      border: 1.5px dashed var(--border-strong, #36363F);
      border-radius: 12px;
      text-align: center;
      background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.04), transparent 70%) var(--bg-card, #14141A);
      display: flex; flex-direction: column;
      align-items: center; gap: 10px;
    }
    .cf-voice-empty .cf-ve-ico {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(167,139,250,0.12);
      color: var(--accent, #A78BFA);
      display: grid; place-items: center;
    }
    .cf-voice-empty .cf-ve-ico svg { width: 18px; height: 18px; }
    .cf-voice-empty .cf-ve-title {
      font-size: 13px; font-weight: 600;
      color: var(--text, #E9E9F0);
    }
    .cf-voice-empty .cf-ve-sub {
      font-size: 11.5px;
      color: var(--text-faint, #797986);
      max-width: 380px;
      line-height: 1.55;
    }
    .cf-voice-empty .cf-ve-cta {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 18px;
      background: linear-gradient(135deg, var(--accent, #A78BFA), #6366F1);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 6px 18px -4px rgba(167,139,250,0.50);
      transition: transform 180ms, box-shadow 180ms;
      margin-top: 2px;
    }
    .cf-voice-empty .cf-ve-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px -4px rgba(167,139,250,0.65);
    }
    .cf-voice-empty .cf-ve-cta svg { width: 13px; height: 13px; }
    .cf-voice-loading {
      padding: 16px;
      text-align: center;
      font-size: 12px;
      color: var(--text-faint, #797986);
    }

    /* ── 글로벌 뒤로가기 버튼 ─────────────────────────────── */
    .top-back-btn {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 12px 6px 10px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 999px;
      color: var(--text-dim, #B5B5C2);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: border-color 200ms, color 200ms, transform 200ms, background 200ms;
      white-space: nowrap;
    }
    .top-back-btn.visible { display: inline-flex; }
    .top-back-btn:hover {
      border-color: var(--accent, #A78BFA);
      color: var(--accent, #A78BFA);
      transform: translateX(-2px);
      background: rgba(167,139,250,0.06);
    }
    .top-back-btn:active {
      transform: translateX(-3px) scale(0.98);
    }
    .top-back-btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 200ms;
    }
    .top-back-btn:hover svg { transform: translateX(-2px); }
    .tbb-label {
      font-size: 11.5px;
      letter-spacing: 0.02em;
    }
    @media (max-width: 720px) {
      .top-back-btn { padding: 6px 9px; }
      .tbb-label { display: none; }
    }

    /* ── 관리자 페이지 ──────────────────────────────────────── */
    /* 인증 잠금 화면 */
    .admin-auth-gate {
      display: flex;
      align-items: center; justify-content: center;
      min-height: 60vh;
      padding: 24px;
    }
    .admin-auth-card {
      width: 100%; max-width: 420px;
      padding: 32px 28px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 18px;
      text-align: center;
      box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
    }
    .admin-auth-icon {
      width: 56px; height: 56px;
      margin: 0 auto 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(99,102,241,0.10));
      border: 1px solid rgba(167,139,250,0.28);
      color: var(--accent, #A78BFA);
      display: grid; place-items: center;
    }
    .admin-auth-icon svg { width: 24px; height: 24px; }
    .admin-auth-card h2 {
      font-family: var(--font-display, 'Fraunces');
      font-size: 22px; font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0 0 6px;
      color: var(--text, #E9E9F0);
    }
    .admin-auth-card > p {
      font-size: 12.5px;
      color: var(--text-dim, #B5B5C2);
      line-height: 1.55;
      margin: 0 0 22px;
    }
    .admin-auth-form {
      display: flex; flex-direction: column;
      gap: 12px;
      text-align: left;
    }
    .admin-auth-form label {
      display: flex; flex-direction: column;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint, #797986);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .admin-auth-form input {
      padding: 11px 13px;
      background: var(--bg-1, #0F0F14);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 10px;
      color: var(--text, #E9E9F0);
      font-size: 14px;
      font-family: inherit;
      letter-spacing: 0.02em;
      outline: none;
      transition: border-color 180ms;
    }
    .admin-auth-form input:focus { border-color: var(--accent, #A78BFA); }
    .admin-auth-msg {
      min-height: 16px;
      font-size: 11.5px;
      color: #EF4444;
      letter-spacing: 0.01em;
    }
    .admin-auth-msg.ok { color: #22C55E; }
    .admin-auth-cta {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      background: linear-gradient(135deg, var(--accent, #A78BFA), #6366F1);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px; font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 8px 22px -6px rgba(167,139,250,0.50);
      transition: transform 180ms, box-shadow 180ms;
      margin-top: 4px;
    }
    .admin-auth-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px -6px rgba(167,139,250,0.65);
    }
    .admin-auth-cta:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .admin-auth-help {
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      line-height: 1.7;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--border, #2A2A33);
      text-align: left;
    }

    /* 세션 바 */
    .admin-session-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      padding: 10px 16px;
      background: rgba(34,197,94,0.06);
      border: 1px solid rgba(34,197,94,0.20);
      border-radius: 10px;
      margin-bottom: 18px;
    }
    .admin-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 10px;
      background: #22C55E;
      color: #fff;
      border-radius: 999px;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .admin-logout-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: var(--bg-card, #14141A);
      color: var(--text, #E9E9F0);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 8px;
      font-size: 11.5px; font-weight: 600;
      cursor: pointer;
      transition: border-color 180ms, color 180ms;
    }
    .admin-logout-btn:hover {
      border-color: #EF4444;
      color: #EF4444;
    }

    /* 카드 공통 */
    .admin-card {
      padding: 20px 22px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 16px;
      margin-bottom: 18px;
    }
    .admin-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--text, #E9E9F0);
      margin: 0 0 14px;
      letter-spacing: -0.01em;
    }
    .admin-card-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
    }
    .admin-card-head h3 { margin: 0 0 4px; }
    .admin-card-head p {
      margin: 0;
      font-size: 12px;
      color: var(--text-dim, #B5B5C2);
    }
    .admin-card-foot {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed var(--border, #2A2A33);
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .admin-current-plan-pill {
      flex-shrink: 0;
      padding: 5px 12px;
      background: rgba(167,139,250,0.10);
      border: 1px solid rgba(167,139,250,0.30);
      border-radius: 999px;
      font-size: 11px;
      color: var(--text-dim, #B5B5C2);
    }
    .admin-current-plan-pill strong { color: var(--accent, #A78BFA); font-weight: 700; letter-spacing: 0.06em; }

    /* 플랜 전환 그리드 */
    .admin-plan-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    @media (max-width: 760px) {
      .admin-plan-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .admin-plan-btn {
      display: flex; flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 14px 14px 12px;
      background: var(--bg-1, #0F0F14);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 12px;
      cursor: pointer;
      text-align: left;
      transition: transform 180ms, border-color 180ms, box-shadow 180ms;
      position: relative;
    }
    .admin-plan-btn:hover {
      transform: translateY(-2px);
      border-color: var(--accent, #A78BFA);
      box-shadow: 0 10px 22px -8px rgba(167,139,250,0.35);
    }
    .admin-plan-btn .apb-tier {
      font-size: 9.5px; font-weight: 800;
      letter-spacing: 0.10em;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      color: var(--text-faint, #797986);
    }
    .admin-plan-btn.pro .apb-tier { background: linear-gradient(135deg,#F472B6,#EC4899); color: #fff; }
    .admin-plan-btn.team .apb-tier { background: linear-gradient(135deg,#FACC15,#F59E0B); color: #1f1408; }
    .admin-plan-btn .apb-name {
      font-family: var(--font-display, 'Fraunces');
      font-size: 17px;
      font-weight: 600;
      color: var(--text, #E9E9F0);
      margin-top: 4px;
    }
    .admin-plan-btn .apb-detail {
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      line-height: 1.5;
    }
    .admin-plan-btn .apb-cta {
      margin-top: 10px;
      align-self: stretch;
      text-align: center;
      padding: 6px 0;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      font-size: 11px; font-weight: 600;
      color: var(--text, #E9E9F0);
      letter-spacing: 0.04em;
    }
    .admin-plan-btn.active {
      border-color: var(--accent, #A78BFA);
      background: linear-gradient(180deg, rgba(167,139,250,0.10), var(--bg-1, #0F0F14));
      box-shadow: 0 0 0 2px rgba(167,139,250,0.18);
    }
    .admin-plan-btn.active .apb-cta {
      background: linear-gradient(135deg, var(--accent, #A78BFA), #6366F1);
      color: #fff;
    }

    .admin-mini-btn {
      padding: 6px 12px;
      background: var(--bg-card, #14141A);
      color: var(--text, #E9E9F0);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 8px;
      font-size: 11.5px; font-weight: 600;
      cursor: pointer;
      transition: border-color 180ms, color 180ms;
    }
    .admin-mini-btn:hover { border-color: var(--accent, #A78BFA); color: var(--accent, #A78BFA); }

    /* KPI 6장 */
    .admin-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .admin-kpi {
      padding: 16px 18px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 14px;
    }
    .admin-kpi label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint, #797986);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .admin-kpi .value {
      font-family: var(--font-display, 'Fraunces');
      font-size: 26px;
      font-weight: 600;
      color: var(--text, #E9E9F0);
      letter-spacing: -0.01em;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    .admin-kpi .delta {
      display: inline-block;
      margin-top: 6px;
      font-size: 11px;
      font-weight: 600;
    }
    .admin-kpi .delta.up   { color: #22C55E; }
    .admin-kpi .delta.down { color: #EF4444; }

    /* 2-column row */
    .admin-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 18px;
    }
    @media (max-width: 760px) {
      .admin-row { grid-template-columns: 1fr; }
    }

    /* 플랜 분포 바 */
    .admin-plan-dist { display: flex; flex-direction: column; gap: 10px; }
    .apd-row {
      display: grid;
      grid-template-columns: 70px 1fr 60px;
      gap: 12px;
      align-items: center;
    }
    .apd-name { font-size: 12px; color: var(--text-dim, #B5B5C2); }
    .apd-bar {
      height: 8px;
      background: rgba(255,255,255,0.05);
      border-radius: 999px;
      overflow: hidden;
    }
    .apd-fill { display: block; height: 100%; border-radius: 999px; }
    .apd-val {
      font-variant-numeric: tabular-nums;
      font-size: 12px;
      font-weight: 600;
      color: var(--text, #E9E9F0);
      text-align: right;
    }

    /* MRR 차트 */
    .admin-mrr-chart {
      width: 100%;
      height: 180px;
    }
    .admin-mrr-labels {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      margin-top: 6px;
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      text-align: center;
    }

    /* 리스트 (가입자 / 알람) */
    .admin-list {
      list-style: none;
      padding: 0; margin: 0;
      display: flex; flex-direction: column;
    }
    .admin-list li {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px dashed var(--border, #2A2A33);
      font-size: 12.5px;
    }
    .admin-list li:last-child { border-bottom: 0; }
    .admin-list .al-name { color: var(--text, #E9E9F0); }
    .admin-list .al-time {
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      font-variant-numeric: tabular-nums;
    }
    .admin-list .al-tag {
      padding: 2px 8px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      color: var(--text-faint, #797986);
      text-transform: uppercase;
    }
    .admin-list .al-tag.free { background: rgba(167,139,250,0.16); color: #C4B5FD; }
    .admin-list .al-tag.std { background: rgba(34,211,238,0.18); color: #67E8F9; }
    .admin-list .al-tag.pro { background: linear-gradient(135deg,#F472B6,#EC4899); color: #fff; }
    .admin-list .al-tag.team { background: linear-gradient(135deg,#FACC15,#F59E0B); color: #1f1408; }
    .admin-list .al-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      border-radius: 6px;
      font-size: 11px;
    }
    .admin-list .al-icon.warn { background: rgba(245,158,11,0.16); }
    .admin-list .al-icon.info { background: rgba(99,102,241,0.16); }
    .admin-list .al-icon.hot  { background: rgba(239,68,68,0.16); }
    .admin-list .al-icon.ok   { background: rgba(34,197,94,0.16); }

    .admin-info-note {
      padding: 12px 14px;
      background: rgba(167,139,250,0.06);
      border: 1px dashed rgba(167,139,250,0.28);
      border-radius: 10px;
      font-size: 11.5px;
      color: var(--text-dim, #B5B5C2);
      letter-spacing: 0.01em;
      text-align: center;
    }

    /* ── 캐릭터 한도 진행 바 (ch-stats) ─────────────────────── */
    .ch-quota-bar {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 7px 14px;
      background: var(--bg-card, #14141A);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 999px;
      font-size: 11.5px;
      color: var(--text, #E9E9F0);
      margin-left: auto;
      transition: border-color 220ms;
    }
    .ch-quota-bar.warn { border-color: rgba(245,158,11,0.45); }
    .ch-quota-bar.empty { border-color: rgba(239,68,68,0.55); }
    .ch-quota-count {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.01em;
    }
    .ch-quota-count .num {
      color: var(--text, #E9E9F0);
      font-weight: 700;
    }
    .ch-quota-count .total {
      color: var(--text-faint, #797986);
      font-weight: 400;
      margin-left: 2px;
    }
    .ch-quota-track {
      width: 110px;
      height: 5px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    .ch-quota-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent, #A78BFA), #6366F1);
      border-radius: 999px;
      transition: width 380ms cubic-bezier(0.22,0.61,0.36,1);
    }
    .ch-quota-bar.warn .ch-quota-fill {
      background: linear-gradient(90deg, #F59E0B, #EF4444);
    }
    .ch-quota-bar.empty .ch-quota-fill { background: #EF4444; }
    .ch-quota-pct {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--accent, #A78BFA);
      letter-spacing: 0.01em;
      min-width: 100px;
      text-align: right;
    }
    .ch-quota-bar.warn .ch-quota-pct { color: #F59E0B; }
    .ch-quota-bar.empty .ch-quota-pct { color: #EF4444; }
    .ch-quota-filter {
      font-size: 10.5px;
      color: var(--text-faint, #797986);
      padding-left: 12px;
      border-left: 1px solid var(--border, #2A2A33);
    }
    .ch-quota-bar.unlimited .ch-quota-track,
    .ch-quota-bar.unlimited .ch-quota-pct { display: none; }
    .ch-quota-bar.unlimited .ch-quota-count .num { color: var(--accent, #A78BFA); }
    @media (max-width: 720px) {
      .ch-quota-bar {
        margin-left: 0;
        margin-top: 8px;
        flex-wrap: wrap;
      }
      .ch-quota-track { width: 80px; }
      .ch-quota-pct { min-width: auto; }
      .ch-quota-filter { display: none; }
    }

    .bible-palette-edit {
      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    }
    .bible-palette-edit .swatch-edit {
      width: 28px; height: 28px;
      border-radius: 6px;
      border: 1px solid var(--border);
      cursor: pointer;
      position: relative;
    }
    .bible-palette-edit .swatch-edit input[type="color"] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer;
    }
    .bible-palette-edit .swatch-add {
      width: 28px; height: 28px;
      border-radius: 6px;
      background: transparent;
      border: 1px dashed var(--border-strong);
      color: var(--text-faint);
      cursor: pointer;
    }
    .bible-palette-edit .swatch-rm {
      width: 16px; height: 16px;
      position: absolute; top: -6px; right: -6px;
      border-radius: 50%;
      background: rgba(248,113,113,0.9);
      color: white;
      font-size: 9px;
      border: 0; cursor: pointer;
      display: none;
    }
    .bible-palette-edit .swatch-edit:hover .swatch-rm { display: block; }

    /* ── 룩북 팔레트 프리셋 갤러리 (30개) ─────────────── */
    .sf-palette-presets-wrap { margin-top: 12px; }
    .sf-palette-presets-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-faint, #797986);
    }
    .sf-palette-presets-head .sf-pp-count {
      padding: 2px 8px;
      background: rgba(167,139,250,0.10);
      border: 1px solid rgba(167,139,250,0.25);
      border-radius: 999px;
      color: var(--accent, #A78BFA);
      font-weight: 700;
    }
    .sf-palette-presets {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
      padding: 4px 2px 4px 0;
    }
    .sf-palette-preset {
      padding: 8px;
      background: var(--bg-1, #0F0F14);
      border: 1px solid var(--border, #2A2A33);
      border-radius: 10px;
      cursor: pointer;
      transition: transform 180ms, border-color 180ms, box-shadow 180ms;
      display: flex; flex-direction: column; gap: 6px;
    }
    .sf-palette-preset:hover {
      transform: translateY(-1px);
      border-color: var(--accent, #A78BFA);
      box-shadow: 0 6px 16px -8px rgba(167,139,250,0.45);
    }
    .sf-palette-preset .sf-pp-strip {
      display: flex;
      gap: 1px;
      height: 22px;
      border-radius: 5px;
      overflow: hidden;
    }
    .sf-palette-preset .sf-pp-strip span {
      flex: 1;
    }
    .sf-palette-preset .sf-pp-name {
      font-size: 11px;
      color: var(--text, #E9E9F0);
      letter-spacing: 0.01em;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bible-test-result {
      padding: 8px 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.4;
    }

    /* ── Custom Workflow Builder ── */
    .pl-wf-modal {
      position: fixed; inset: 0;
      background: rgba(8,8,12,0.80);
      backdrop-filter: blur(8px);
      z-index: 9999;
      display: grid; place-items: center;
      padding: 16px;
    }
    .pl-wf-card {
      width: 100%; max-width: 880px;
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: 0;
      max-height: 88vh;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .pl-wf-head {
      padding: 20px 24px 14px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
    }
    .pl-wf-head h3 { margin: 0; font-size: 17px; color: var(--text); flex: 1; }
    .pl-wf-body {
      display: grid;
      grid-template-columns: 240px 1fr;
      flex: 1;
      overflow: hidden;
    }
    @media (max-width: 720px) {
      .pl-wf-body { grid-template-columns: 1fr; }
    }
    .pl-wf-list {
      border-right: 1px solid var(--border);
      padding: 14px 10px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 4px;
    }
    .pl-wf-item {
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-dim);
      border: 1px solid transparent;
    }
    .pl-wf-item:hover { background: var(--bg-1); color: var(--text); }
    .pl-wf-item.active {
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
      border-color: rgba(167,139,250,0.30);
    }
    .pl-wf-item .pl-wf-color {
      width: 10px; height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .pl-wf-item .pl-wf-meta { font-size: 10px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
    .pl-wf-add-btn {
      padding: 10px 12px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(99,102,241,0.05));
      border: 1px dashed rgba(167,139,250,0.45);
      color: var(--accent, #A78BFA);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;                      /* 사이드바 최상단에 위치 — 아래쪽 spacing */
      transition: background 200ms, border-color 200ms, transform 200ms;
      letter-spacing: 0.01em;
    }
    .pl-wf-add-btn:hover {
      background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(99,102,241,0.10));
      border-color: var(--accent, #A78BFA);
      transform: translateY(-1px);
    }
    /* 새로 만든 워크플로우 강조 (3초간) */
    .pl-wf-item.is-new {
      animation: wfItemHighlight 1.6s ease-in-out 0s 2;
      border-color: var(--accent, #A78BFA) !important;
    }
    @keyframes wfItemHighlight {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(167,139,250,0);
        background: var(--bg-card);
      }
      50% {
        box-shadow: 0 0 0 3px rgba(167,139,250,0.30), 0 6px 20px -4px rgba(167,139,250,0.45);
        background: rgba(167,139,250,0.08);
      }
    }
    /* 사용자 워크플로우 배지 ("내 것") */
    .pl-wf-mine {
      font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.06em;
      padding: 2px 7px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent, #A78BFA), #6366F1);
      color: #fff;
      text-transform: uppercase;
    }
    .pl-wf-detail {
      padding: 18px 22px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 14px;
    }
    .pl-wf-detail-empty {
      text-align: center;
      color: var(--text-faint);
      padding: 60px 10px;
      font-size: 13px;
    }
    .pl-wf-name-row { display: flex; gap: 8px; align-items: center; }
    .pl-wf-name-input {
      flex: 1;
      padding: 10px 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
    }
    .pl-wf-color-pick { display: flex; gap: 4px; }
    .pl-wf-color-pick button {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
    }
    .pl-wf-color-pick button.active { border-color: var(--text); }
    .pl-wf-section-label {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 700;
      margin-bottom: 6px;
    }
    .pl-wf-steps {
      display: flex; flex-direction: column; gap: 6px;
    }
    .pl-wf-step {
      display: grid;
      grid-template-columns: 22px 22px 22px 1fr 70px 110px 28px;
      gap: 6px;
      align-items: center;
      padding: 8px 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: all 0.12s var(--ease-out, ease);
    }
    .pl-wf-step.dragging { opacity: 0.4; transform: scale(0.98); }
    .pl-wf-step.drag-over {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-soft);
    }
    .pl-wf-step-handle {
      cursor: grab;
      color: var(--text-faint);
      text-align: center;
      font-size: 12px;
      letter-spacing: -1px;
      user-select: none;
    }
    .pl-wf-step-handle:active { cursor: grabbing; }
    .pl-wf-step-num {
      width: 22px; height: 22px;
      display: grid; place-items: center;
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 5px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .pl-wf-step-type {
      display: grid; place-items: center;
      font-size: 14px;
      cursor: help;
    }
    /* 단계 wrap (행 + 펼침 패널) */
    .pl-wf-step-wrap {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: border-color 0.12s;
    }
    .pl-wf-step-wrap:has(.pl-wf-model-toggle.open) { border-color: var(--accent-strong, rgba(167,139,250,0.30)); }
    .pl-wf-step-wrap > .pl-wf-step {
      background: transparent;
      border: 0;
      border-radius: 0;
    }
    /* 모델 토글 버튼 (행 아래) */
    .pl-wf-model-toggle {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      padding: 8px 14px;
      background: rgba(255,255,255,0.02);
      border: none;
      border-top: 1px dashed var(--border);
      color: var(--text-dim);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.12s;
      text-align: left;
    }
    .pl-wf-model-toggle:hover:not(:disabled) {
      background: var(--accent-soft);
      color: var(--accent);
    }
    .pl-wf-model-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
    .pl-wf-chevron {
      transition: transform 0.18s var(--ease-out, ease);
      flex-shrink: 0;
    }
    .pl-wf-model-toggle.open .pl-wf-chevron { transform: rotate(180deg); }
    .pl-wf-model-label {
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .pl-wf-model-chip {
      padding: 2px 9px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 10.5px;
      color: var(--text-faint);
      font-weight: 500;
    }
    .pl-wf-model-chip.has {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.28);
      color: var(--accent);
      font-weight: 700;
    }
    .pl-wf-model-mode {
      padding: 1px 7px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      border-radius: 4px;
      letter-spacing: 0.04em;
    }
    /* 펼침 패널 */
    .pl-wf-model-panel {
      padding: 14px 14px 16px;
      background: var(--bg-1);
      border-top: 1px solid var(--border);
      animation: pl-wf-panel-open 200ms var(--ease-out, ease);
    }
    @keyframes pl-wf-panel-open {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
    }
    .pl-wf-model-panel[hidden] { display: none; }
    .pl-wf-model-help {
      padding: 8px 12px;
      margin-bottom: 12px;
      background: var(--accent-soft);
      border: 1px solid rgba(167,139,250,0.20);
      border-radius: 8px;
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.55;
    }
    .pl-wf-model-help strong { color: var(--accent); font-weight: 700; }
    .pl-wf-model-cat { margin-bottom: 14px; }
    .pl-wf-model-cat-label {
      font-size: 10px;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .pl-wf-model-cat-count { color: var(--text-faint); font-weight: 500; opacity: 0.7; }
    .pl-wf-model-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 6px;
    }
    .pl-wf-model-card {
      padding: 10px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.12s;
      text-align: left;
      position: relative;
    }
    .pl-wf-model-card:hover:not(:disabled) {
      border-color: var(--accent-strong, rgba(167,139,250,0.40));
      background: var(--bg-card-hover);
      transform: translateY(-1px);
    }
    .pl-wf-model-card.dim:not(.selected) { opacity: 0.55; }
    .pl-wf-model-card.selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: 0 0 0 2px rgba(167,139,250,0.12);
    }
    .pl-wf-model-card.selected::before {
      content: '✓';
      position: absolute;
      top: 6px; right: 8px;
      font-weight: 800;
      color: var(--accent);
      font-size: 12px;
    }
    .pl-wf-model-row {
      display: flex; align-items: center; gap: 7px;
      margin-bottom: 4px;
    }
    .pl-wf-model-icon { font-size: 16px; flex-shrink: 0; }
    .pl-wf-model-name {
      flex: 1;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pl-wf-model-pri {
      color: #fbbf24;
      font-size: 13px;
    }
    .pl-wf-model-pri-btn {
      background: transparent;
      border: none;
      color: var(--text-faint);
      cursor: pointer;
      font-size: 13px;
      padding: 0 4px;
      transition: color 0.12s;
    }
    .pl-wf-model-pri-btn:hover { color: #fbbf24; }
    .pl-wf-model-meta {
      display: flex; flex-wrap: wrap; gap: 6px;
      align-items: center;
      font-size: 10px;
      color: var(--text-faint);
    }
    .pl-wf-model-rec {
      padding: 1px 6px;
      background: rgba(52,211,153,0.18);
      color: #6ee7b7;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .pl-wf-model-desc {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pl-wf-step input, .pl-wf-step select {
      padding: 6px 8px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
      width: 100%;
    }
    /* 단계 라벨 select — 가독성 위해 굵게 + 약간 강조 */
    .pl-wf-step select[data-f="label"] {
      font-weight: 600;
      cursor: pointer;
    }
    .pl-wf-step select[data-f="label"]:hover:not(:disabled) {
      border-color: var(--accent-strong, rgba(167,139,250,0.30));
    }
    /* drag가 폼 요소 위에서 시작되지 않도록 — 시각적 + 동작적 분리 */
    .pl-wf-step input,
    .pl-wf-step select,
    .pl-wf-step button {
      -webkit-user-drag: none;
      user-drag: none;
    }
    .pl-wf-step.dragging select,
    .pl-wf-step.dragging input { pointer-events: none; }
    .pl-wf-step-rm {
      width: 24px; height: 24px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: #fca5a5;
      cursor: pointer;
      font-size: 12px;
    }
    .pl-wf-add-step {
      padding: 8px;
      border-radius: 8px;
      background: transparent;
      border: 1px dashed var(--border-strong);
      color: var(--text-dim);
      font-size: 12px;
      cursor: pointer;
    }
    .pl-wf-add-step:hover { color: var(--accent); border-color: var(--accent); }
    .pl-wf-foot {
      padding: 14px 22px;
      border-top: 1px solid var(--border);
      display: flex; gap: 8px; justify-content: flex-end;
      background: var(--bg-1);
    }
    .pl-wf-builtin {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 9.5px;
      padding: 2px 7px;
      background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,113,133,0.18));
      color: #FBBF24;
      border: 1px solid rgba(251,191,36,0.35);
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .pl-wf-builtin::before {
      content: '★';
      font-size: 9px;
      color: #FBBF24;
    }

    /* Shot 카드에 워크플로우 진행 표시 */
    .pl-shot-wf {
      display: flex; gap: 2px;
      margin-top: 4px;
    }
    .pl-shot-wf-pip {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--bg-elev);
    }
    .pl-shot-wf-pip.done { background: var(--wfc, var(--accent)); box-shadow: 0 0 4px var(--wfc, var(--accent)); }
    .pl-shot-wf-pip.current {
      background: var(--wfc, var(--accent));
      animation: wfPulse 1.4s ease-in-out infinite;
    }
    @keyframes wfPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

    /* Shot detail의 워크플로우 박스 */
    .pl-shot-wf-box {
      padding: 14px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .pl-shot-wf-header {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px;
    }
    .pl-shot-wf-header strong { color: var(--text); font-size: 13px; }
    .pl-shot-wf-stepper {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .pl-shot-wf-step-btn {
      padding: 6px 12px;
      border-radius: 6px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 11px; font-weight: 600;
      cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      transition: all var(--t-fast);
    }
    .pl-shot-wf-step-btn:hover { border-color: var(--accent); color: var(--text); }
    .pl-shot-wf-step-btn.done {
      background: color-mix(in srgb, var(--wfc, var(--accent)) 20%, transparent);
      color: var(--wfc, var(--accent));
      border-color: var(--wfc, var(--accent));
    }
    .pl-shot-wf-step-btn.current {
      background: var(--wfc, var(--accent));
      color: white;
      border-color: var(--wfc, var(--accent));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--wfc, var(--accent)) 30%, transparent);
    }
    .pl-shot-wf-step-btn .checkmark { font-size: 10px; }

    /* ── Mega modal (2-column features + models) ── */
    .vid-modal-mega { width: min(880px, calc(100vw - 32px)); }
    .vid-mega-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-2);
      overflow: hidden;
      flex: 1;
    }
    .vid-mega-col { overflow-y: auto; padding-bottom: var(--s-3); }
    .vid-mega-col + .vid-mega-col { border-left: 1px solid var(--border); }
    .vid-feature-list {
      padding: 0 var(--s-2);
      display: flex; flex-direction: column;
      gap: 2px;
    }
    .vid-feature-opt {
      display: flex; align-items: center; gap: var(--s-3);
      padding: var(--s-3);
      border-radius: var(--r-md);
      cursor: pointer;
      transition: background var(--t-fast) var(--ease-smooth);
      border: 1px solid transparent;
    }
    .vid-feature-opt:hover { background: var(--bg-card-hover); }
    .vid-feature-opt.selected {
      background: var(--accent-soft);
      border-color: rgba(167,139,250,0.30);
    }
    .vid-feature-opt-icon {
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: grid; place-items: center;
      color: var(--accent);
      flex-shrink: 0;
    }
    .vid-feature-opt-text { flex: 1; min-width: 0; }
    .vid-feature-opt-name {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text);
    }
    .vid-feature-opt-desc {
      margin-top: 2px;
      font-size: var(--fs-xs);
      color: var(--text-faint);
      line-height: 1.4;
    }
    .vid-model-route {
      padding: 2px 6px;
      border-radius: var(--r-xs);
      background: rgba(255,255,255,0.05);
      color: var(--text-faint);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── Responsive ── */
    @media (max-width: 1100px) {
      .vid-hero { grid-template-columns: 1fr; }
      .vid-shell { grid-template-columns: 1fr; }
      .vid-right { min-height: 480px; }
    }
    @media (max-width: 880px) {
      .video-page { padding: var(--s-3); }
      .vid-hero-main { padding: var(--s-5); }
      .vid-model-stats { grid-template-columns: 1fr; }
      .vid-shell { gap: var(--s-3); }
      .vid-tabs { gap: var(--s-3); font-size: var(--fs-sm); }
      .vid-options { flex-wrap: wrap; }
      .vid-opt { min-width: 80px; }
      .vid-modal-panel { width: calc(100vw - 16px); max-height: 88vh; }
      .vid-mega-cols { grid-template-columns: 1fr; }
      .vid-mega-col + .vid-mega-col { border-left: 0; border-top: 1px solid var(--border); }
    }

    /* ════════════════════════════════════════════════════════
       Health Banner / Loading / Error Boundary (v3 finish)
       ──────────────────────────────────────────────────────── */
    .sv-health-banner {
      position: fixed;
      top: var(--topbar-h, 56px);
      left: 0; right: 0;
      z-index: 99;
      padding: 8px 16px;
      background: linear-gradient(135deg, rgba(251,146,60,0.92), rgba(251,146,60,0.85));
      color: #fff;
      font-size: 12px;
      display: none;
      align-items: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.20);
    }
    .sv-health-banner.show { display: flex; }
    .sv-health-banner.online {
      background: linear-gradient(135deg, rgba(110,231,183,0.92), rgba(110,231,183,0.85));
      color: #064e3b;
    }
    .sv-health-banner-icon {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(255,255,255,0.20);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .sv-health-banner-msg {
      flex: 1;
      line-height: 1.4;
    }
    .sv-health-banner-msg strong { font-weight: 700; }
    .sv-health-banner-actions { display: flex; gap: 6px; }
    .sv-health-banner button {
      background: rgba(255,255,255,0.22);
      border: 1px solid rgba(255,255,255,0.30);
      color: inherit;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      cursor: pointer;
    }
    .sv-health-banner button:hover { background: rgba(255,255,255,0.35); }
    body.has-health-banner .main { padding-top: 32px; }
    @media (max-width: 768px) {
      .sv-health-banner { font-size: 11px; padding: 6px 10px; }
    }

    /* Loading shimmer */
    .sv-loading {
      display: inline-block;
      width: 36px; height: 36px;
      border: 3px solid rgba(167,139,250,0.18);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: sv-spin 0.8s linear infinite;
    }
    @keyframes sv-spin { to { transform: rotate(360deg); } }
    .sv-loading-row {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      color: var(--text-dim);
      font-size: 12px;
    }
    .sv-loading-row .sv-loading { width: 18px; height: 18px; border-width: 2px; }

    /* Error boundary */
    .sv-error-boundary {
      padding: 24px 20px;
      background: rgba(248,113,113,0.06);
      border: 1px solid rgba(248,113,113,0.30);
      border-radius: var(--r-md);
      color: #fca5a5;
      font-size: 13px;
      line-height: 1.6;
      text-align: center;
    }
    .sv-error-boundary h4 {
      margin: 0 0 6px;
      color: #fecaca;
      font-size: 14px;
    }
    .sv-error-boundary code {
      display: block;
      margin: 8px auto;
      max-width: 480px;
      padding: 6px 10px;
      background: rgba(0,0,0,0.30);
      border-radius: 6px;
      font-size: 11px;
      color: #fee2e2;
      word-break: break-all;
    }
    .sv-error-boundary button {
      margin-top: 8px;
      background: rgba(248,113,113,0.20);
      border: 1px solid rgba(248,113,113,0.40);
      color: #fecaca;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
    }

    /* ════════════════════════════════════════════════════════
       Mobile Responsive Pass — comprehensive (≤768px)
       ──────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      /* ── 글로벌 셸 ── */
      html, body { font-size: 15px; }
      .topbar {
        padding: 8px 10px !important;
        gap: 6px !important;
      }
      .topbar-left { gap: 6px; }
      .sidebar-toggle { display: grid !important; }
      .sidebar { display: flex !important; }
      .layout {
        grid-template-columns: minmax(156px, 34vw) 1fr !important;
      }
      .layout.sidebar-collapsed { grid-template-columns: 0 1fr !important; }
      .main {
        padding: 14px 14px 32px !important;
        margin: 0 !important;
      }
      /* topbar 압축 */
      .top-actions { gap: 4px; }
      .top-actions .kbd { display: none; }  /* ⌘K kbd 숨김 → 검색은 ⌘P가 모바일에선 안되니 lock/settings 우선 */
      .top-actions .icon-btn { width: 36px; height: 36px; }
      .avatar { width: 28px; height: 28px; font-size: 12px; }

      /* 미니플레이어 — 모바일에서 컴팩트 */
      .mini-player {
        min-width: 0; max-width: none;
        padding: 4px 8px 4px 4px !important;
        gap: 6px !important;
      }
      .mini-player .mp-info {
        min-width: 0;
      }
      .mini-player .mp-title { font-size: 11px; }
      .mini-player .mp-time { display: none; }

      /* ── Page Head ── */
      .page-head h1 { font-size: 22px !important; }
      .page-head p { font-size: 12px !important; }

      /* ── Pipeline 페이지 ── */
      .pipeline-shell {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .pipeline-tree {
        max-height: 50vh !important;  /* 절반만 차지 → 디테일도 보임 */
        padding: 12px !important;
      }
      .pipeline-detail {
        padding: 16px !important;
        min-height: 50vh;
      }
      .pl-tree-toolbar { gap: 4px; }
      .pl-tool { padding: 7px 6px; font-size: 10px; min-width: 0; flex: 1; }
      .pl-shot-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px !important; }
      .pl-edit-row { flex-direction: column; gap: 6px; }
      .pl-edit-row > * { min-width: 0; }
      .pl-preview-timeline { padding: 12px !important; }
      .pl-pt-stage { max-height: 240px; }

      /* ── Today 페이지 ── */
      .td-hero-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
      .td-cal { padding: 14px !important; }
      .td-todo-card { padding: 16px !important; }
      .td-todo-edit-panel { padding: 12px !important; }
      .td-edit-row { flex-direction: column; }
      .td-sig-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .td-sig-card { padding: 14px !important; }
      .td-task-row { padding: 7px 8px !important; }
      .td-resume-grid { grid-template-columns: 1fr !important; }
      .td-health-row { flex-direction: column; align-items: stretch; }
      .td-health-gauge { margin: 0 auto; }

      /* ── Compare Mode ── */
      .cmp-shell {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .cmp-config { max-height: none !important; padding: 14px !important; }
      .cmp-results { padding: 14px !important; min-height: auto; }
      .cmp-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
      .cmp-cell-foot { padding: 10px 12px; }

      /* ── Cinema Library ── */
      .cn-shell {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .cn-list-pane { max-height: 35vh !important; padding: 12px !important; }
      .cn-player-pane { padding: 14px !important; min-height: auto; }
      .cn-player-toolbar { gap: 6px; }
      .cn-player-toolbar input.cn-time-input { width: 60px; }

      /* ── Bible (Character / Style) ── */
      .bible-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .bible-card { padding: 14px !important; }
      .bible-modal-card { max-height: 92vh !important; }
      .bible-modal-body { padding: 14px 16px !important; }
      .bible-row { grid-template-columns: 1fr !important; }

      /* ── Music page ── */
      .music-shell {
        grid-template-columns: 1fr !important;
      }
      .music-right { min-height: auto; }
      .mw-style-card { padding: 14px !important; }

      /* ── 모달 공통 ── */
      .vault-modal,
      .pl-wf-card,
      .bible-modal-card {
        max-width: calc(100vw - 16px) !important;
        margin: 0 !important;
      }
      .vault-modal-backdrop,
      .pl-wf-modal,
      .bible-modal,
      .pl-decompose-modal { padding: 8px !important; align-items: flex-start; }
      .qj-backdrop { padding: 16px 8px 8px !important; }
      .qj-card { max-height: 80vh !important; }

      /* Workflow builder — 1 column */
      .pl-wf-body { grid-template-columns: 1fr !important; }
      .pl-wf-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 150px; }
      .pl-wf-step {
        grid-template-columns: 20px 1fr 60px 28px !important;
        font-size: 11px;
      }
      .pl-wf-step select { display: none; }  /* color는 swatch로 충분 */

      /* ── 입력/버튼 터치 친화 (44px 최소) ── */
      .pl-btn, .vault-btn { min-height: 38px; }
      input[type="text"], input[type="number"], input[type="date"], input[type="password"],
      textarea, select {
        font-size: 16px;  /* iOS zoom 방지 */
      }

      /* ── Story view ── */
      .sv-shell { grid-template-columns: 1fr !important; }
      .sv-side { position: static !important; }

      /* ── Settings cards ── */
      .vault-card { padding: 16px !important; }
      .vault-keys { grid-template-columns: 1fr !important; }
    }

    /* 380px 이하 초소형 폴백 */
    @media (max-width: 380px) {
      .topbar { padding: 6px 8px !important; }
      .top-actions .icon-btn { width: 32px; height: 32px; }
      .mini-player .mp-prev, .mini-player .mp-next { display: none; }  /* 재생만 남김 */
      .page-head h1 { font-size: 18px !important; }
      .pl-tool { padding: 6px 4px; font-size: 9px; }
      .pl-shot-grid { grid-template-columns: 1fr !important; }
      .bn-item { font-size: 9px; }
      .bn-item .icon { width: 18px; height: 18px; }
    }

    /* 가로 모바일 (landscape) — 키보드 영향 최소화 */
    @media (max-height: 500px) and (max-width: 900px) {
      .qj-backdrop { padding-top: 16px !important; }
      .vault-modal-backdrop, .pl-wf-modal, .bible-modal { padding-top: 8px !important; }
    }