/* ============================================================
   VIDI — dark cinematic pre-production tool
   Layered on KRAFTON tokens (colors_and_type.css). Accent swapped to purple.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Anton&display=swap');

:root {
  /* purple accent system (swaps KRAFTON orange) */
  --vidi-accent: #8A2BE2;
  --vidi-accent-2: #a855f7;
  --vidi-accent-hi: #b06bf5;
  --vidi-accent-press: #7a1fc8;
  --vidi-accent-ink: #c9a3f5;
  --vidi-glow: rgba(138, 43, 226, 0.45);
  --vidi-glow-soft: rgba(138, 43, 226, 0.16);

  /* cinematic darks */
  --bg-0: #08080b;     /* deepest / stage */
  --bg-1: #0c0c11;     /* app bg */
  --bg-2: #121218;     /* panels */
  --bg-3: #17171f;     /* raised */
  --bg-4: #1e1e28;     /* hover / input */
  --line: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.12);
  --line-accent: rgba(138,43,226,0.5);

  --tx-1: #f3f2f7;
  --tx-2: #a8a6b6;
  --tx-3: #6d6b7d;
  --tx-mono: #b9b4cc;

  --ok: #36d399;
  --warn: #f5b14c;
  --rec: #ff3b54;

  --ff-display: 'KRAFTON Headline', 'Anton', 'Arial Black', sans-serif;
  --ff-ui: 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* density (overridden by tweaks) */
  --d: 1;
  --pad: calc(16px * var(--d));
  --gap: calc(12px * var(--d));
  --row-h: calc(40px * var(--d));
  --rad: 10px;
  --rad-sm: 6px;
  --topbar-h: 56px;
  --nav-w: 232px;
  --drawer-w: 360px;
}

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.ic { line-height: 0; }
.ic svg { width: 100%; height: 100%; display: block; stroke-width: 2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-1);
  color: var(--tx-1);
  font-family: var(--ff-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#root { height: 100vh; }
::selection { background: var(--vidi-accent); color: #fff; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2a36; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a4a; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--ff-mono); }
.display { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; }
.eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
.muted { color: var(--tx-2); }
.faint { color: var(--tx-3); }
.accent-tx { color: var(--vidi-accent-ink); }

/* ---------- App frame ---------- */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; height: 100vh; background: var(--bg-1); position: relative; }
.app.drawer-open { grid-template-columns: var(--nav-w) 1fr; }

/* ---------- Left nav ---------- */
.nav { background: var(--bg-0); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.nav-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; height: var(--topbar-h); }
.nav-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--vidi-accent); box-shadow: 0 0 22px var(--vidi-glow); overflow: hidden; }
.nav-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.5); transform-origin: 50% 30%; }
.nav-word { font-family: var(--ff-display); font-size: 22px; letter-spacing: 0.02em; }
.nav-word .dot { color: var(--vidi-accent); }
.nav-sec { padding: 10px 12px 4px; }
.nav-sec .eyebrow { padding: 6px 10px; }
.nav-items { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--rad-sm); color: var(--tx-2); cursor: pointer; font-weight: 500; font-size: 13.5px; border: 1px solid transparent; position: relative; transition: background .14s, color .14s; }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.9; }
.nav-item:hover { background: var(--bg-3); color: var(--tx-1); }
.nav-item.active { background: linear-gradient(90deg, rgba(138,43,226,0.18), rgba(138,43,226,0.02)); color: #fff; border-color: var(--line-accent); }
.nav-item.active::before { content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; background: var(--vidi-accent); border-radius:0 3px 3px 0; box-shadow: 0 0 12px var(--vidi-glow); }
.nav-item .badge { margin-left: auto; font-size: 10.5px; background: var(--bg-4); color: var(--tx-2); padding: 1px 7px; border-radius: 99px; font-family: var(--ff-mono); }
.nav-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); }
.proj-pick { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--rad-sm); background: var(--bg-2); border:1px solid var(--line); cursor:pointer; }
.proj-pick:hover { border-color: var(--line-2); }
.proj-pick .thumb { width:34px; height:34px; border-radius:6px; flex:none; background-size:cover; background-position:center; }
.user-card { cursor: default; }
.user-card .user-avatar { display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,#8A2BE2,#3a1f6e); text-transform:uppercase; }
.user-card__name { font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-card__email { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-card__logout { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color: var(--tx-2); border:1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.user-card__logout:hover { background: rgba(168,85,247,0.16); color:#c084fc; border-color: rgba(192,132,252,0.4); }

/* ---------- Main column ---------- */
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: rgba(12,12,17,0.7); backdrop-filter: blur(12px); position: relative; z-index: 20; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); }
.crumb b { color: var(--tx-1); font-weight: 600; }
.topbar .spacer { flex: 1; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.page { padding: var(--pad) calc(var(--pad) * 1.5); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content:center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--rad-sm); font-family: var(--ff-ui); font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx-1); transition: background .14s, border-color .14s, transform .08s, box-shadow .14s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover { background: var(--bg-4); border-color: var(--line-2); }
.btn:active { transform: scale(0.98); }
.btn.accent { background: var(--vidi-accent); border-color: transparent; color: #fff; box-shadow: 0 4px 18px var(--vidi-glow-soft); }
.btn.accent:hover { background: var(--vidi-accent-hi); box-shadow: 0 6px 26px var(--vidi-glow); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn.ghost:hover { background: var(--bg-3); color: var(--tx-1); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.sm { width: 30px; }
.btn.danger:hover { color: var(--rec); border-color: rgba(255,59,84,0.5); }

/* ---------- Chips / tags ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-2); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.accent { background: rgba(138,43,226,0.16); border-color: var(--line-accent); color: var(--vidi-accent-ink); }
.chip.sq { border-radius: 4px; }
.chip.mono { font-family: var(--ff-mono); }
.chip button { background:none;border:none;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0;opacity:.6; }
.chip button:hover { opacity:1; }

/* ---------- Panels / cards ---------- */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-h h3 { margin: 0; font-size: 13px; font-weight: 700; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.section-title { display:flex; align-items:center; gap:12px; margin: 4px 0 14px; }
.section-title h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.section-title .line { flex:1; height:1px; background: var(--line); }

/* poster / reference cards */
.poster { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.poster .grain { position:absolute; inset:0; opacity:.5; mix-blend-mode: overlay; background-image: var(--grain); pointer-events:none; }
.poster .bars { position:absolute; left:0; right:0; height:9%; background:#000; z-index:2; }
.poster .bars.t { top:0; } .poster .bars.b { bottom:0; }
.poster .pmeta { position:absolute; z-index:3; left:10px; bottom:14%; right:10px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.poster .tc { font-family: var(--ff-mono); font-size:11px; background: rgba(0,0,0,0.6); padding:2px 6px; border-radius:4px; color:#fff; backdrop-filter: blur(4px); }
.poster .play { position:absolute; inset:0; z-index:4; display:grid; place-items:center; opacity:0; transition:opacity .18s; background: radial-gradient(circle at center, rgba(0,0,0,.25), transparent 60%); }
.card:hover .poster .play { opacity:1; }
.poster .play span { width:48px;height:48px;border-radius:99px; background: rgba(138,43,226,0.92); display:grid;place-items:center; box-shadow:0 0 30px var(--vidi-glow); transform: scale(.9); transition: transform .18s; }
.card:hover .poster .play span { transform: scale(1); }

.ref-card { cursor: pointer; }
.ref-card:hover { border-color: var(--line-accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.ref-body { padding: 10px 11px 11px; }
.ref-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0 0 5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ref-sub { font-size: 11.5px; color: var(--tx-3); display:flex; align-items:center; gap:6px; }
.ref-actions { position:absolute; top:8px; right:8px; z-index:5; display:flex; gap:6px; opacity:0; transform: translateY(-4px); transition:.16s; }
.card:hover .ref-actions { opacity:1; transform:none; }
.iconbtn { width:30px;height:30px;border-radius:7px; display:grid;place-items:center; background: rgba(8,8,11,0.72); border:1px solid var(--line-2); color:#fff; cursor:pointer; backdrop-filter: blur(6px); transition:.14s; }
.iconbtn svg{width:15px;height:15px;stroke-width:2;}
.iconbtn:hover { background: var(--bg-4); }
.iconbtn.on { background: var(--vidi-accent); border-color:transparent; box-shadow:0 0 14px var(--vidi-glow); }
.iconbtn.like.on { background: var(--rec); box-shadow:0 0 14px rgba(255,59,84,.5); }

/* poster grid / filmstrip */
.grid-posters { display:grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: calc(14px*var(--d)); }
.grid-posters.dense { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.filmstrip { display:flex; flex-direction:column; }
.strip-row { display:flex; gap:14px; align-items:center; padding:12px; border-bottom:1px solid var(--line); cursor:pointer; transition: background .14s; }
.strip-row:hover { background: var(--bg-2); }
.strip-row .poster { width: 200px; flex:none; border-radius:8px; }

/* ---------- Inputs ---------- */
.input { display:flex; align-items:center; gap:10px; height: 40px; padding: 0 12px; background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--rad-sm); color: var(--tx-1); }
.input:focus-within { border-color: var(--vidi-accent); box-shadow: 0 0 0 3px var(--vidi-glow-soft); }
.input svg { width:17px;height:17px; color: var(--tx-3); flex:none; }
.input input, .input textarea { flex:1; background:none; border:none; outline:none; color:inherit; font-family:inherit; font-size:13.5px; }
.input input::placeholder, textarea::placeholder { color: var(--tx-3); }
.field-label { font-size:11px; color: var(--tx-3); font-weight:600; letter-spacing:.04em; margin-bottom:6px; text-transform:uppercase; }

/* segmented tabs */
.seg { display:inline-flex; background: var(--bg-3); border:1px solid var(--line); border-radius:var(--rad-sm); padding:3px; gap:3px; }
.seg button { border:none; background:none; color:var(--tx-2); font-family:inherit; font-weight:600; font-size:12.5px; padding:6px 14px; border-radius:5px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:.14s; }
.seg button svg { width:15px;height:15px; }
.seg button:hover { color: var(--tx-1); }
.seg button.on { background: var(--vidi-accent); color:#fff; box-shadow:0 2px 10px var(--vidi-glow-soft); }

/* tabs underline */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs button { background:none;border:none;color:var(--tx-3);font-family:inherit;font-weight:600;font-size:13px;padding:10px 4px;margin-right:18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; transition:.14s; }
.tabs button:hover{color:var(--tx-1);}
.tabs button.on{color:#fff;border-color:var(--vidi-accent);}

/* stat tiles */
.stat { padding: 16px; }
.stat .n { font-family: var(--ff-display); font-size: 34px; line-height:1; }
.stat .l { font-size: 12px; color: var(--tx-2); margin-top:8px; }
.stat .d { font-size:11px; margin-top:4px; }

/* ---------- HERO (Dashboard) — layered key-art ---------- */
.hero { position: relative; min-height: calc(100vh - var(--topbar-h)); overflow: hidden; display:block; }
.sky { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 8%, #2a1a52 0%, #1a1133 30%, #0c0a18 60%, #08080b 100%);
}
.sky .cloud { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; mix-blend-mode: screen; }
.sky .ray { position:absolute; top:-20%; width:30%; height:150%; background: linear-gradient(to bottom, rgba(138,43,226,0.22), transparent 70%); filter: blur(30px); transform: rotate(8deg); }
.sky .stars { position:absolute; inset:0; opacity:.6; }
.sky .horizon { position:absolute; left:0; right:0; bottom:0; height:42%; background: linear-gradient(to top, rgba(138,43,226,0.18), transparent); }
.hero-fog { position:absolute; left:0; right:0; bottom:-10%; height:55%; z-index:3; pointer-events:none;
  background: radial-gradient(80% 100% at 50% 120%, rgba(176,107,245,0.30), transparent 70%); filter: blur(20px); }

/* mascot fills the stage, bottom-anchored, behind the UI overlay */
.mascot-stage { position:absolute; left:61%; top:53%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; pointer-events:none; }
.hero-scrim { position:absolute; inset:0; z-index:4; pointer-events:none;
  background: linear-gradient(100deg, var(--bg-1) 0%, rgba(12,12,17,0.82) 24%, rgba(12,12,17,0.15) 46%, transparent 60%); }
.hero-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:stretch; justify-content:space-between; gap:24px;
  padding: calc(30px*var(--d)) calc(34px*var(--d)); pointer-events:none; }
.hero-overlay > * { pointer-events:auto; }
.hero-col { position: relative; display:flex; flex-direction:column; min-height:0; min-width:0; }
.hero-left { width: min(42%, 510px); justify-content:center; }
.hero-right { width: 288px; flex:none; justify-content:center; gap:14px; transform: translateX(-6vw); }

.hero-title { font-family: var(--ff-display); text-transform:uppercase; font-size: clamp(40px, 4.2vw, 74px); line-height:0.96; letter-spacing:-0.018em; margin:16px 0 0; }
.hero-title .em { color: var(--vidi-accent); text-shadow: 0 0 40px var(--vidi-glow); }
.hero-sub { color: var(--tx-2); font-size: 15px; max-width: 32em; margin: 18px 0 22px; line-height:1.6; word-break: keep-all; }
.hero-search { background: rgba(14,14,20,0.92); border:1px solid var(--line-2); border-radius: 14px; padding: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.quick-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.mascot-wrap { position: relative; z-index: 5; align-self:flex-end; }
.mascot-glow { position:absolute; left:50%; bottom:8%; width:88%; height:46%; transform:translateX(-50%); background: radial-gradient(ellipse at center, var(--vidi-glow), transparent 68%); filter: blur(40px); z-index:-1; opacity:.85; }
.mascot-pedestal { position:absolute; left:50%; bottom:1%; width:74%; height:30px; transform:translateX(-50%); background: radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 70%); filter: blur(4px); }

/* speech bubble */
.bubble { position:relative; background: rgba(20,20,28,0.92); border:1px solid var(--line-accent); border-radius:14px; padding:13px 15px; backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); animation: pop .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
.bubble::after { content:''; position:absolute; left:-8px; top:22px; width:14px;height:14px; background:inherit; border-left:1px solid var(--line-accent); border-bottom:1px solid var(--line-accent); transform: rotate(45deg); }
.bubble .who { font-size:11px; color: var(--vidi-accent-ink); font-weight:700; letter-spacing:.04em; margin-bottom:4px; display:flex;align-items:center;gap:6px; }
.bubble p { margin:0; font-size:13px; color: var(--tx-1); line-height:1.45; }
.bubble-video { position:relative; margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid var(--line-accent); background:#000; box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
.bubble-video video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.bubble-video__tag { position:absolute; left:8px; bottom:8px; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:rgba(124,58,237,0.82); backdrop-filter:blur(4px); pointer-events:none; }
@keyframes pop { from { transform: translateY(8px) scale(.96); } to { transform:none; } }

.sugg { display:flex; gap:10px; align-items:flex-start; padding:11px 12px; background: rgba(18,18,24,0.7); border:1px solid var(--line); border-radius:10px; cursor:pointer; backdrop-filter: blur(8px); transition:.15s; }
.sugg:hover { border-color: var(--line-accent); background: rgba(24,24,32,0.85); transform: translateX(-3px); }
.sugg .ic { width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:rgba(138,43,226,0.15);color:var(--vidi-accent-ink); }
.sugg .ic svg{width:16px;height:16px;}
.sugg .t { font-size:12.5px;font-weight:600; }
.sugg .s { font-size:11.5px;color:var(--tx-3); margin-top:2px; }

/* ---------- Assistant drawer ---------- */
.drawer { position: fixed; top:0; right:0; bottom:0; width: var(--drawer-w); background: var(--bg-0); border-left:1px solid var(--line); z-index: 60; display:flex; flex-direction:column; transform: translateX(100%); transition: transform .34s cubic-bezier(.16,1,.3,1); box-shadow: -20px 0 60px rgba(0,0,0,0.5); }
.drawer.open { transform: none; }
.drawer-h { display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); }
.drawer-h .av { width:38px;height:38px;border-radius:10px; overflow:hidden; background:var(--vidi-accent); flex:none; position:relative; box-shadow:0 0 18px var(--vidi-glow); }
.drawer-h .av img { width:100%; height:100%; object-fit:cover; object-position:center 28%; transform:scale(1.42); transform-origin:50% 28%; }
.drawer-msgs { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.msg { display:flex; gap:10px; max-width:92%; }
.msg .av { width:28px;height:28px;border-radius:8px;flex:none;overflow:hidden;background:var(--vidi-accent); position:relative; }
.msg .av img{ width:100%;height:100%;object-fit:cover;object-position:center 28%;transform:scale(1.45);transform-origin:50% 28%; }
.msg .bub { background: var(--bg-3); border:1px solid var(--line); padding:10px 12px; border-radius:12px; border-top-left-radius:3px; font-size:13px; line-height:1.5; }
.msg.me { align-self:flex-end; flex-direction:row-reverse; }
.msg.me .bub { background: var(--vidi-accent); border-color:transparent; color:#fff; border-radius:12px; border-top-right-radius:3px; }
.msg .bub .chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:9px; }
.msg .bub .chips .chip { cursor:pointer; }
.msg .bub .chips .chip:hover { border-color: var(--line-accent); color:#fff; }
.typing { display:flex; gap:4px; padding:4px 2px; }
.typing i { width:6px;height:6px;border-radius:99px;background:var(--vidi-accent-ink);animation: bnc 1.1s infinite; }
.typing i:nth-child(2){animation-delay:.15s;} .typing i:nth-child(3){animation-delay:.3s;}
@keyframes bnc { 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-5px);opacity:1;} }
.drawer-foot { padding:12px; border-top:1px solid var(--line); }
.drawer-mascot { padding: 10px 16px 0; display:flex; justify-content:center; }

/* assistant FAB (when closed) */
.fab { position: fixed; right: 22px; bottom: 22px; z-index:55; width:62px;height:62px;border-radius:18px; background: var(--vidi-accent); border:none; cursor:pointer; box-shadow: 0 10px 34px var(--vidi-glow); overflow:hidden; transition: transform .18s; }
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab img { width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.4);transform-origin:50% 30%; }
.fab .ping { position:absolute; top:-3px; right:-3px; width:14px;height:14px;border-radius:99px;background:var(--ok); border:2px solid var(--bg-1); }

/* ---------- Inspector ---------- */
.inspector { width: 320px; flex:none; border-left:1px solid var(--line); background: var(--bg-0); overflow-y:auto; }
.insp-sec { padding:14px 16px; border-bottom:1px solid var(--line); }
.insp-sec h4 { margin:0 0 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12.5px; align-items:baseline; }
.kv .k { color: var(--tx-3); white-space:nowrap; flex:none; } .kv .v { color: var(--tx-1); font-weight:500; text-align:right; min-width:0; }

/* ---------- Timeline / marks ---------- */
.player { aspect-ratio: 16/9; background:#000; position:relative; border-radius:var(--rad); overflow:hidden; border:1px solid var(--line); }
.scrubber { position:relative; height:46px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; margin-top:10px; cursor:pointer; overflow:hidden; }
.scrubber .filled { position:absolute; left:0;top:0;bottom:0; background: linear-gradient(90deg, rgba(138,43,226,0.35), rgba(138,43,226,0.12)); }
.scrubber .play-head { position:absolute; top:0;bottom:0; width:2px; background:#fff; box-shadow:0 0 8px #fff; z-index:4; }
.mark-pin { position:absolute; top:0; transform:translateX(-50%); z-index:3; cursor:pointer; }
.mark-pin .stem { width:2px; height:46px; background:var(--vidi-accent); margin:0 auto; }
.mark-pin .head { width:14px;height:14px;border-radius:99px;background:var(--vidi-accent);border:2px solid var(--bg-1); margin:-7px auto 0; box-shadow:0 0 8px var(--vidi-glow); }
.mark-pin:hover .head, .mark-pin.active .head { transform:scale(1.25); }
.mark-row { display:flex; gap:12px; padding:11px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); cursor:pointer; transition:.14s; }
.mark-row:hover { border-color: var(--line-accent); }
.mark-row.active { border-color: var(--vidi-accent); background: rgba(138,43,226,0.07); }
.mark-row .tc { font-family:var(--ff-mono); font-size:12px; color:var(--vidi-accent-ink); font-weight:600; flex:none; }
.mark-thumb { width:88px; aspect-ratio:16/9; border-radius:6px; flex:none; overflow:hidden; position:relative; }

/* board builder */
.board-track { display:flex; gap:0; align-items:stretch; padding:14px; background: var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); overflow-x:auto; min-height:160px; }
.cut { width:188px; flex:none; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--bg-3); cursor:grab; position:relative; transition: border-color .14s, transform .12s, opacity .12s; }
.cut.dragging { opacity:.4; cursor:grabbing; }
.cut.over { border-color: var(--vidi-accent); }
.cut.sel { border-color: var(--vidi-accent); box-shadow: 0 0 0 2px var(--vidi-glow-soft); }
.cut .n { position:absolute; top:6px; left:6px; z-index:3; width:22px;height:22px;border-radius:6px; background:rgba(8,8,11,.78); display:grid;place-items:center; font-family:var(--ff-mono); font-size:11px; font-weight:600; }
.cut-body { padding:8px 9px; }
.cut-body .t { font-size:12px; font-weight:600; line-height:1.25; }
.cut-body .m { font-family:var(--ff-mono); font-size:10.5px; color:var(--tx-3); margin-top:4px; display:flex; gap:6px; }
.drop-gap { width:4px; flex:none; border-radius:99px; background:transparent; transition:.12s; margin:0 2px; }
.drop-gap.show { background: var(--vidi-accent); box-shadow:0 0 10px var(--vidi-glow); }
.cut-add { width:120px; flex:none; border:1.5px dashed var(--line-2); border-radius:8px; display:grid;place-items:center; color:var(--tx-3); cursor:pointer; gap:6px; }
.cut-add:hover { border-color: var(--line-accent); color:var(--vidi-accent-ink); }

/* moodfilm */
.timeline-lane { display:flex; gap:3px; align-items:center; height:64px; padding:0 4px; }
.tl-clip { height:48px; border-radius:6px; flex:none; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); }
.tl-clip .lbl { position:absolute; bottom:3px; left:5px; font-size:10px; font-family:var(--ff-mono); text-shadow:0 1px 3px #000; }

/* progress */
.bar { height:6px; border-radius:99px; background: var(--bg-4); overflow:hidden; }
.bar > i { display:block; height:100%; background: linear-gradient(90deg, var(--vidi-accent), var(--vidi-accent-2)); border-radius:99px; }

/* upload dropzone */
.dropzone { border:1.5px dashed var(--line-2); border-radius:var(--rad); padding:36px; display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center; transition:.16s; cursor:pointer; }
.dropzone:hover, .dropzone.drag { border-color: var(--vidi-accent); background: rgba(138,43,226,0.05); }
.dropzone .ic { width:54px;height:54px;border-radius:14px; background:rgba(138,43,226,0.14); display:grid;place-items:center;color:var(--vidi-accent-ink); }

/* avatar / team */
.av-circ { border-radius:99px; background-size:cover; background-position:center; flex:none; border:1px solid var(--line-2); }
.toggle { width:38px;height:22px;border-radius:99px;background:var(--bg-4);border:1px solid var(--line-2); position:relative; cursor:pointer; transition:.16s; flex:none; }
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:var(--tx-2);transition:.16s;}
.toggle.on{background:var(--vidi-accent);border-color:transparent;} .toggle.on::after{left:18px;background:#fff;}

/* tweaks panel host */
.tweaks-host { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* misc utility */
.row { display:flex; align-items:center; gap: var(--gap); }
.col { display:flex; flex-direction:column; }
.wrap { flex-wrap:wrap; }
.between { justify-content:space-between; }
.grow { flex:1; }
.divider { height:1px; background:var(--line); }
.empty { padding: 48px; text-align:center; color: var(--tx-3); }
.empty .ic { width:56px;height:56px;border-radius:16px;background:var(--bg-3);display:grid;place-items:center;margin:0 auto 14px;color:var(--tx-3); }

.fade-in { animation: fadeUp .4s cubic-bezier(.2,0,0,1) both; }
@keyframes twk { 0%,100%{ opacity:.2; } 50%{ opacity:.9; } }
@keyframes fadeUp { from { transform: translateY(12px);} to {transform:none;} }
.stagger > * { animation: fadeUp .45s cubic-bezier(.2,0,0,1) both; }

/* ===== 반응형: 창 크기에 맞춰 레이아웃 변경 ===== */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-1); cursor: pointer; flex: none; }
.nav-toggle:hover { background: var(--bg-3); }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 70; backdrop-filter: blur(2px); }

/* 태블릿/좁은 가로: 히어로 2단을 세로로 쌓고 폭을 100%로 */
@media (max-width: 1180px) {
  .hero-overlay { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; overflow-y: auto; }
  .hero-left { width: 100%; }
  .hero-right { width: 100%; max-width: 440px; transform: none; }
  .mascot-stage { left: 72%; opacity: 0.5; }
}

/* 모바일: 사이드바를 오프캔버스(햄버거)로 전환, 메인은 전체 폭 */
@media (max-width: 860px) {
  .app, .app.drawer-open { grid-template-columns: 1fr; }
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 80;
         transform: translateX(-102%); transition: transform .26s cubic-bezier(.2,0,0,1);
         box-shadow: 0 0 50px rgba(0,0,0,0.55); }
  .app.nav-open .nav { transform: none; }
  .app.nav-open .nav-backdrop { display: block; }
  .nav-toggle { display: inline-flex; }
  .mascot-stage { display: none; }
  .hero { min-height: auto; }
  .hero-overlay { position: static; inset: auto; padding: 22px var(--pad) 44px; }
  .hero-fog, .hero-scrim { display: none; }
}

/* 소형 모바일: 여백·그리드 추가 축소 */
@media (max-width: 560px) {
  :root { --pad: 16px; }
  .hero-right { max-width: none; }
  .topbar { gap: 10px; }
  .grid-posters, .grid-posters.dense { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}