/* ===================================================================
   INVION v5 — Solid + Glow Layout System (revised 2026-04-21)
   Main-app surfaces are opaque. Shadows are primary-color glows, not black.
   Glass/blur is legal ONLY on the login page and builder-ide.
   All variables use --v5- prefix to avoid shadcn/Tailwind collision.
   =================================================================== */

/* ===== V5 CSS Variables ===== */
:root {
  /* RGB triplets for dynamic color theming (used as rgba(var(--v5-primary-rgb), .X)) */
  --v5-primary-rgb:108,92,231;
  --v5-cyan-rgb:0,206,201;
  --v5-pink-rgb:253,121,168;
  --v5-red-rgb:255,71,87;
  --v5-green-rgb:0,184,148;
  --v5-amber-rgb:253,203,110;

  --v5-bg:#fafaff; --v5-bg-subtle:#f3f2fa;
  --v5-surface:rgba(255,255,255,0.55); --v5-surface-solid:#ffffff;
  --v5-surface-hover:#f6f5fb;
  --v5-text:#0f0e1a; --v5-text-sec:#6b6a80; --v5-text-muted:#9998ad;
  --v5-primary:rgb(var(--v5-primary-rgb)); --v5-primary-light:#a29bfe; --v5-primary-glow:rgba(var(--v5-primary-rgb),0.25);
  --v5-cyan:rgb(var(--v5-cyan-rgb)); --v5-cyan-glow:rgba(var(--v5-cyan-rgb),0.2);
  --v5-pink:rgb(var(--v5-pink-rgb)); --v5-pink-glow:rgba(var(--v5-pink-rgb),0.15);
  --v5-red:rgb(var(--v5-red-rgb)); --v5-green:rgb(var(--v5-green-rgb)); --v5-amber:rgb(var(--v5-amber-rgb));
  --v5-border:rgba(var(--v5-primary-rgb),0.12); --v5-border-subtle:rgba(0,0,0,0.05);
  --v5-glass:rgba(255,255,255,0.45); --v5-glass-strong:rgba(255,255,255,0.65);
  --v5-glass-border:rgba(var(--v5-primary-rgb),0.12);
  --v5-glow-sm:0 0 20px rgba(var(--v5-primary-rgb),0.12);
  --v5-glow-md:0 0 40px rgba(var(--v5-primary-rgb),0.2);
  --v5-glow-lg:0 0 80px rgba(var(--v5-primary-rgb),0.25);
  --v5-glow-cyan-sm:0 0 16px rgba(var(--v5-cyan-rgb),0.20);
  --v5-glow-danger:0 0 16px rgba(var(--v5-red-rgb),0.25);
  --v5-sidebar-w:220px;

  /* ===== Motion / Easing (design-system tokens) =====
     enter = overshoot-to-settle, move = linear feel, exit = quick pull-away, bounce = playful (badges only). */
  --v5-ease-enter: cubic-bezier(.16,1,.3,1);
  --v5-ease-move: cubic-bezier(.4,0,.2,1);
  --v5-ease-exit: cubic-bezier(.5,0,.75,0);
  --v5-ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* ===== Radii ===== */
  --v5-radius-sm:8px;
  --v5-radius-md:10px;
  --v5-radius-md-2:12px;
  --v5-radius-lg:14px;
  --v5-radius-lg-2:16px;
  --v5-radius-modal:16px;
  --v5-radius-pill:999px;

  /* ===== Spacing (tight, ERP-dense) ===== */
  --v5-sp-1:0.3rem;
  --v5-sp-2:0.45rem;
  --v5-sp-3:0.6rem;
  --v5-sp-4:0.85rem;
  --v5-sp-5:1.1rem;
  --v5-gap-row:0.35rem;
  --v5-card-pad:0.625rem;

  /* ===== Fonts ===== */
  --v5-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Pretendard",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --v5-font-mono: 'JetBrains Mono', 'D2Coding', ui-monospace, SFMono-Regular, Monaco, Consolas, monospace;

  /* ===== Type scale (deliberately dense, ERP). Do not go above these. ===== */
  --v5-fs-caption:0.75rem;      /* labels, table headers, chips */
  --v5-fs-caption-lg:0.8125rem;
  --v5-fs-body-sm:0.8125rem;      /* table rows */
  --v5-fs-body:0.875rem;         /* default body */
  --v5-fs-body-lg:0.9375rem;      /* max body */
  --v5-fs-h3:1.0625rem;
  --v5-fs-h2:1.1875rem;
  --v5-fs-h1:1.375rem;           /* page/section title */
  --v5-fs-display:2rem;      /* KPI numbers only */

  --v5-fw-regular:400;
  --v5-fw-semi:600;
  --v5-fw-bold:700;

  --v5-lh-tight:1.25;
  --v5-lh-normal:1.45;
  --v5-lh-loose:1.6;

  --v5-ls-tight:-0.02em;
  --v5-ls-wide:0.08em;
  --v5-ls-wider:0.12em;

  /* ===== Template Grid System (2026-04-10) =====
     카드 내부 Template 컴포넌트 배치용 12-col grid 토큰.
     @container 쿼리 브레이크포인트는 카드 너비 기준. */
  --grid-cols:12;
  --grid-gap:.5rem;
  --grid-gap-narrow:.35rem;
  --grid-gap-normal:.45rem;
  --grid-gap-wide:.55rem;
  --card-narrow-max:520px;
  --card-normal-max:900px;
  --grid-line:rgba(var(--v5-primary-rgb),.08);
  --grid-line-hover:rgba(var(--v5-primary-rgb),.2);
  --grid-drop-preview:rgba(var(--v5-primary-rgb),.15);
  --grid-drop-preview-border:rgba(var(--v5-primary-rgb),.5);
}
.dark {
  /* Dark-mode RGB triplets — overridden by data-color presets when active */
  --v5-primary-rgb:162,155,254;
  --v5-cyan-rgb:85,239,196;
  --v5-pink-rgb:253,121,168;
  --v5-red-rgb:255,107,107;
  --v5-green-rgb:85,239,196;
  --v5-amber-rgb:255,234,167;

  --v5-bg:#06050e; --v5-bg-subtle:#0c0b18;
  --v5-surface:rgba(17,16,42,0.5); --v5-surface-solid:#11102a;
  --v5-surface-hover:#191840;
  --v5-text:#eae8f4; --v5-text-sec:#8d8ba8; --v5-text-muted:#5a587a;
  --v5-primary:rgb(var(--v5-primary-rgb)); --v5-primary-light:#c8c4ff; --v5-primary-glow:rgba(var(--v5-primary-rgb),0.25);
  --v5-cyan:rgb(var(--v5-cyan-rgb)); --v5-cyan-glow:rgba(var(--v5-cyan-rgb),0.15);
  --v5-pink:rgb(var(--v5-pink-rgb)); --v5-red:rgb(var(--v5-red-rgb)); --v5-green:rgb(var(--v5-green-rgb)); --v5-amber:rgb(var(--v5-amber-rgb));
  --v5-border:rgba(var(--v5-primary-rgb),0.1); --v5-border-subtle:rgba(255,255,255,0.04);
  --v5-glass:rgba(17,16,42,0.45); --v5-glass-strong:rgba(17,16,42,0.65);
  --v5-glass-border:rgba(var(--v5-primary-rgb),0.12);
  --v5-glow-sm:0 0 20px rgba(var(--v5-primary-rgb),0.1);
  --v5-glow-md:0 0 40px rgba(var(--v5-primary-rgb),0.18);
  --v5-glow-lg:0 0 80px rgba(var(--v5-primary-rgb),0.22);
  --v5-glow-cyan-sm:0 0 16px rgba(var(--v5-cyan-rgb),0.18);
  --v5-glow-danger:0 0 16px rgba(var(--v5-red-rgb),0.22);
  --grid-line:rgba(var(--v5-primary-rgb),.1);
  --grid-line-hover:rgba(var(--v5-primary-rgb),.25);
  --grid-drop-preview:rgba(var(--v5-primary-rgb),.15);
  --grid-drop-preview-border:rgba(var(--v5-primary-rgb),.5);
}

/* ===== COLOR THEME PRESETS =====
   Apply via <html data-color="purple|blue|green|orange|pink|cyan">.
   Each preset defines RGB triplets for light & dark modes.
   Default (no data-color) = purple — already defined in :root / .dark above. */

/* --- BLUE --- */
html[data-color="blue"]{
  --v5-primary-rgb:59,130,246; --v5-cyan-rgb:14,165,233; --v5-pink-rgb:99,102,241;}
html.dark[data-color="blue"]{
  --v5-primary-rgb:147,197,253; --v5-cyan-rgb:125,211,252; --v5-pink-rgb:129,140,248;}

/* --- GREEN --- */
html[data-color="green"]{
  --v5-primary-rgb:16,185,129; --v5-cyan-rgb:20,184,166; --v5-pink-rgb:132,204,22;}
html.dark[data-color="green"]{
  --v5-primary-rgb:110,231,183; --v5-cyan-rgb:94,234,212; --v5-pink-rgb:190,242,100;}

/* --- ORANGE --- */
html[data-color="orange"]{
  --v5-primary-rgb:249,115,22; --v5-cyan-rgb:6,182,212; --v5-pink-rgb:251,146,60;}
html.dark[data-color="orange"]{
  --v5-primary-rgb:253,186,116; --v5-cyan-rgb:103,232,249; --v5-pink-rgb:252,165,165;}

/* --- PINK --- */
html[data-color="pink"]{
  --v5-primary-rgb:236,72,153; --v5-cyan-rgb:168,85,247; --v5-pink-rgb:244,114,182;}
html.dark[data-color="pink"]{
  --v5-primary-rgb:244,114,182; --v5-cyan-rgb:192,132,252; --v5-pink-rgb:249,168,212;}

/* --- CYAN --- */
html[data-color="cyan"]{
  --v5-primary-rgb:8,145,178; --v5-cyan-rgb:14,165,233; --v5-pink-rgb:6,182,212;}
html.dark[data-color="cyan"]{
  --v5-primary-rgb:125,211,252; --v5-cyan-rgb:103,232,249; --v5-pink-rgb:165,243,252;}

/* ===== COSMIC BACKGROUND ===== */
.v5-cosmos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.v5-cosmos .star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;
  animation:v5-twinkle var(--d,3s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);opacity:0;}
.v5-cosmos .star.c{width:3px;height:3px;background:var(--sc);}
@keyframes v5-twinkle{0%{opacity:0;transform:scale(.5)}100%{opacity:var(--mo,.7);transform:scale(1)}}
html:not(.dark) .v5-cosmos .star{display:none;}
html:not(.dark) .v5-cosmos .shooting-star{display:none;}
html:not(.dark) .v5-cosmos .particle{display:none;}

.v5-cosmos .neb{position:absolute;border-radius:50%;filter:blur(140px);animation:v5-drift 16s ease-in-out infinite alternate;}
.v5-cosmos .neb-1{width:700px;height:700px;top:-20%;right:-15%;background:radial-gradient(circle,var(--v5-primary-glow),transparent 70%);animation-duration:18s;}
.v5-cosmos .neb-2{width:600px;height:600px;bottom:-25%;left:-10%;background:radial-gradient(circle,var(--v5-cyan-glow),transparent 70%);animation-duration:14s;animation-delay:-4s;}
.v5-cosmos .neb-3{width:450px;height:450px;top:35%;left:40%;background:radial-gradient(circle,var(--v5-pink-glow),transparent 70%);animation-duration:12s;animation-delay:-8s;}
.v5-cosmos .neb-4{width:350px;height:350px;top:60%;right:25%;background:radial-gradient(circle,rgba(var(--v5-primary-rgb),0.08),transparent 70%);animation-duration:20s;animation-delay:-2s;}
@keyframes v5-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-25px) scale(1.1)}}

html:not(.dark) .v5-cosmos{background:linear-gradient(180deg,#dcd4f0 0%,#e2dbf3 30%,#e6e0f5 60%,#dbd3ee 100%);}
html:not(.dark) .v5-cosmos .neb{filter:blur(100px);}
html:not(.dark) .v5-cosmos .neb-1{width:1200px;height:500px;top:auto;bottom:-10%;right:-15%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(240,233,255,0.55),rgba(220,210,250,0.35),transparent 70%);animation-duration:25s;}
html:not(.dark) .v5-cosmos .neb-2{width:1000px;height:400px;top:auto;bottom:-5%;left:-10%;
  background:radial-gradient(ellipse,rgba(238,232,250,0.5),rgba(200,220,250,0.3),transparent 70%);animation-duration:20s;}
html:not(.dark) .v5-cosmos .neb-3{width:800px;height:350px;top:auto;bottom:5%;left:30%;
  background:radial-gradient(ellipse,rgba(245,238,255,0.45),rgba(230,210,250,0.25),transparent 70%);animation-duration:22s;}
html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bottom:auto;
  background:radial-gradient(circle,rgba(var(--v5-primary-rgb),0.1),rgba(var(--v5-cyan-rgb),0.05),transparent 70%);}

.v5-cosmos .shooting-star{position:absolute;width:80px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0.6),transparent);
  transform:rotate(35deg);animation:v5-shoot 5s ease-in-out infinite;opacity:0;}
.v5-cosmos .shooting-star:nth-child(6){animation-delay:3s;top:25%;left:65%;width:55px;transform:rotate(40deg);}
@keyframes v5-shoot{0%{opacity:0;transform:rotate(35deg) translateX(0)}3%{opacity:0.7}12%{opacity:0;transform:rotate(35deg) translateX(-350px)}100%{opacity:0}}

.v5-cosmos .particle{position:absolute;width:var(--sz,4px);height:var(--sz,4px);background:var(--pc,var(--v5-primary));
  border-radius:50%;opacity:0;animation:v5-floatup var(--fd,9s) ease-in-out infinite;animation-delay:var(--fdl,0s);}
@keyframes v5-floatup{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-80px) scale(1)}}

/* ===== LAYOUT SHELL ===== */
.v5-shell{display:flex;flex-direction:column;height:100vh;position:relative;z-index:1;}

/* ===== SOLID HEADER (2026-04-21 no-glass 정책) ===== */
.v5-hdr{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;
  background:var(--v5-surface-solid);
  border-bottom:1px solid var(--v5-border);position:relative;z-index:20;flex-shrink:0;}
/* Light mode: solid white 위에 primary glow 살짝 */
html:not(.dark) .v5-hdr{
  background:var(--v5-surface-solid);
  border-bottom-color:rgba(var(--v5-primary-rgb),0.18);
  box-shadow:0 4px 20px rgba(var(--v5-primary-rgb),0.06);}
.v5-hdr-l{display:flex;align-items:center;gap:1rem;}
.v5-hdr-logo{font-size:1.05rem;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;cursor:default;}
.v5-hdr-bc{font-size:.8125rem;color:var(--v5-text-muted);}
.v5-hdr-bc b{color:var(--v5-text);font-weight:600;}
.v5-hdr-r{display:flex;align-items:center;gap:.65rem;}

/* Theme pill (legacy — design-system prefers single .v5-hdr-icon sun/moon toggle) */
.v5-pill{display:flex;background:var(--v5-bg-subtle);border:1px solid var(--v5-border);
  border-radius:999px;padding:2px;}
.v5-pill button{padding:.22rem .65rem;border-radius:999px;border:none;background:transparent;
  color:var(--v5-text-muted);cursor:pointer;font-size:.6rem;font-weight:600;font-family:inherit;
  transition:all .3s cubic-bezier(.4,0,.2,1);}
.v5-pill button.on{background:var(--v5-primary);color:white;box-shadow:var(--v5-glow-sm);}

/* ===== Design-system header icon button (Solid + Glow, borderless base) =====
   32×32, transparent by default, shows surface-hover bg + text on hover.
   Use for: theme, bell, tweaks, admin, tab-mini — anything next to .v5-avatar. */
.v5-hdr-icon{
  position:relative;width:32px;height:32px;border-radius:var(--v5-radius-md);
  border:1px solid transparent;background:transparent;color:var(--v5-text-sec);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s var(--v5-ease-move),color .2s var(--v5-ease-move),
             border-color .2s var(--v5-ease-move),box-shadow .2s var(--v5-ease-move),
             transform .15s var(--v5-ease-move);
}
.v5-hdr-icon svg{width:16px;height:16px;stroke-width:1.75;}
.v5-hdr-icon:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
.v5-hdr-icon:active{transform:scale(.95);}
.v5-hdr-icon.on{
  background:rgba(var(--v5-primary-rgb),.10);
  color:var(--v5-primary);
}
.v5-hdr-icon .v5-hdr-icon-dot{
  position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
  background:var(--v5-pink);
  box-shadow:0 0 6px rgba(var(--v5-pink-rgb),.8);
  animation:v5-pdot 2s infinite;
}
/* Admin mode tint: when .v5-admin-mode, the mode-toggle glows cyan. */
.v5-admin-mode .v5-hdr-icon.v5-mode-toggle{
  color:var(--v5-cyan);
  background:rgba(var(--v5-cyan-rgb),.10);
}

/* 대시보드 생성 버튼 (헤더, Light/Dark 토글 왼쪽) */
.v5-dash-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .7rem;
  border:1px solid var(--v5-border);background:var(--v5-surface-solid);
  border-radius:10px;color:var(--v5-text-muted);cursor:pointer;font-size:.62rem;font-weight:600;
  font-family:inherit;transition:all .2s var(--v5-ease-move);}
.v5-dash-btn:hover:not(:disabled){border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
.v5-dash-btn:disabled{opacity:.4;cursor:not-allowed;}
.v5-dash-btn.on{background:var(--v5-primary);border-color:var(--v5-primary);color:white;box-shadow:var(--v5-glow-sm);}
.v5-dash-btn.on:hover{color:white;}

/* Bell */
.v5-bell{position:relative;width:32px;height:32px;border-radius:10px;border:1px solid var(--v5-border);
  background:var(--v5-surface-solid);color:var(--v5-text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
/* Borderless base (Solid + Glow 2026-04-21): transparent until hover → surface-hover bg. */
.v5-bell{border:1px solid transparent !important;background:transparent !important;color:var(--v5-text-sec);}
.v5-bell:hover{border-color:transparent !important;background:var(--v5-surface-hover) !important;color:var(--v5-text);box-shadow:none;}
.v5-bell-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--v5-red);border-radius:50%;animation:v5-pdot 2s infinite;}
@keyframes v5-pdot{0%,100%{box-shadow:0 0 0 0 rgba(var(--v5-red-rgb),.4)}50%{box-shadow:0 0 0 5px rgba(var(--v5-red-rgb),0)}}

/* Tweaks button (sliders-horizontal) — 프로토타입 Tweaks UX. 클릭 시 SettingsModal 열림 */
.v5-tweaks-btn{position:relative;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--v5-text-sec);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s var(--v5-ease-move);}
.v5-tweaks-btn:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
.v5-tweaks-btn.on{background:rgba(var(--v5-primary-rgb),.10);color:var(--v5-primary);}

/* Admin button */
.v5-admin-btn{position:relative;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--v5-text-sec);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s var(--v5-ease-move);}
.v5-admin-btn:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:scale(1.05);}
.v5-admin-btn .v5-admin-label{position:absolute;top:110%;left:50%;transform:translateX(-50%);
  font-size:.52rem;font-weight:600;color:var(--v5-primary);white-space:nowrap;
  opacity:0;transition:opacity .2s,color .2s;pointer-events:none;}
.v5-admin-btn:hover .v5-admin-label{opacity:1;}
.v5-admin-btn .ic-gear{display:block;}
.v5-admin-btn .ic-home{display:none;}
.v5-admin-mode .v5-admin-btn .ic-gear{display:none;}
.v5-admin-mode .v5-admin-btn .ic-home{display:block;}
.v5-admin-mode .v5-admin-btn{color:var(--v5-cyan);background:rgba(var(--v5-cyan-rgb),.10);}
.v5-admin-mode .v5-admin-btn:hover{color:var(--v5-cyan);background:rgba(var(--v5-cyan-rgb),.16);}
.v5-admin-mode .v5-admin-btn .v5-admin-label{color:var(--v5-cyan);}

/* Avatar */
.v5-avatar-w{position:relative;}
.v5-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:white;
  cursor:pointer;transition:transform .2s,box-shadow .3s;}
.v5-avatar:hover{transform:scale(1.1);box-shadow:var(--v5-glow-sm);}

/* Avatar dropdown */
.v5-avatar-dd{position:absolute;top:calc(100% + 10px);right:0;width:220px;
  background:var(--v5-surface-solid);
  border:1px solid var(--v5-border);border-radius:16px;padding:.5rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-md);
  opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
  transition:all .25s var(--v5-ease-move);z-index:100;}
.dark .v5-avatar-dd{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
.v5-avatar-dd.open{opacity:1;transform:none;pointer-events:auto;}
.v5-avatar-dd .av-profile{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;
  border-bottom:1px solid var(--v5-border-subtle);margin-bottom:.35rem;}
.v5-avatar-dd .av-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:white;flex-shrink:0;}
.v5-avatar-dd .av-name{font-size:.78rem;font-weight:700;color:var(--v5-text);}
.v5-avatar-dd .av-email{font-size:.6rem;color:var(--v5-text-muted);margin-top:.1rem;}
.v5-avatar-dd .av-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
  border-radius:10px;font-size:.72rem;font-weight:500;color:var(--v5-text-sec);
  cursor:pointer;transition:all .15s;}
.v5-avatar-dd .av-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
.v5-avatar-dd .av-item .av-ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.6;flex-shrink:0;}
.v5-avatar-dd .av-item:hover .av-ic{opacity:1;}
.v5-avatar-dd .av-divider{height:1px;background:var(--v5-border-subtle);margin:.3rem .6rem;}
.v5-avatar-dd .av-item.danger{color:var(--v5-red);}
.v5-avatar-dd .av-item.danger:hover{background:rgba(var(--v5-red-rgb),.08);}

/* Notification panel */
.v5-noti-panel{position:absolute;top:calc(100% + 10px);right:0;width:300px;max-height:400px;
  background:var(--v5-surface-solid);
  border:1px solid var(--v5-border);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-md);
  opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
  transition:all .25s var(--v5-ease-move);z-index:100;overflow:hidden;}
.dark .v5-noti-panel{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
.v5-noti-panel.open{opacity:1;transform:none;pointer-events:auto;}
.v5-noti-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .85rem;
  border-bottom:1px solid var(--v5-border-subtle);}
.v5-noti-head .noti-title{font-size:.78rem;font-weight:700;color:var(--v5-text);}
.v5-noti-head .noti-clear{font-size:.58rem;font-weight:600;color:var(--v5-primary);cursor:pointer;
  border:none;background:none;font-family:inherit;transition:color .2s;}
.v5-noti-head .noti-clear:hover{color:var(--v5-cyan);}
.v5-noti-list{overflow-y:auto;max-height:330px;padding:.35rem;}
.v5-noti-item{display:flex;gap:.55rem;padding:.55rem .5rem;border-radius:10px;cursor:pointer;transition:all .15s;}
.v5-noti-item:hover{background:var(--v5-surface-hover);}
.v5-noti-item.unread{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.05),rgba(var(--v5-primary-rgb),.02));}
.dark .v5-noti-item.unread{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.06),rgba(var(--v5-primary-rgb),.02));}
.v5-noti-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:.3rem;}
.v5-noti-dot.info{background:var(--v5-primary);}
.v5-noti-dot.warn{background:var(--v5-amber);}
.v5-noti-dot.err{background:var(--v5-red);box-shadow:0 0 6px rgba(var(--v5-red-rgb),.4);}
.v5-noti-dot.ok{background:var(--v5-green);}
.v5-noti-body{flex:1;min-width:0;}
.v5-noti-msg{font-size:.7rem;font-weight:500;color:var(--v5-text);line-height:1.35;}
.v5-noti-msg b{font-weight:600;}
.v5-noti-time{font-size:.55rem;color:var(--v5-text-muted);margin-top:.15rem;}

/* Admin mode header accent */
.v5-admin-mode .v5-hdr{border-bottom-color:var(--v5-primary);}
.v5-admin-mode .v5-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--v5-primary),var(--v5-cyan));animation:v5-glowLine .6s ease-out both;}
@keyframes v5-glowLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* Admin badge — display:none 대신 opacity/transform 으로 hidden 해서 zoom-in/out 애니메이션 가능 */
.v5-admin-badge{display:flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
  background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.12),rgba(var(--v5-cyan-rgb),.08));
  border:1px solid rgba(var(--v5-primary-rgb),.2);font-size:.58rem;font-weight:700;color:var(--v5-primary);
  opacity:0;transform:scale(0) rotate(-30deg);pointer-events:none;}
.dark .v5-admin-badge{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.12),rgba(var(--v5-cyan-rgb),.08));
  border-color:rgba(var(--v5-primary-rgb),.2);color:var(--v5-primary-light);}
.v5-admin-mode .v5-admin-badge{opacity:1;transform:scale(1) rotate(0);pointer-events:auto;}
/* badge zoom — 모드 진입 시 bouncy in, 이탈 시 quick out */
.v5-admin-badge.mode-zoom-in{animation:v5-badge-zoom-in .55s cubic-bezier(.34,1.56,.64,1) both;}
.v5-admin-badge.mode-zoom-out{animation:v5-badge-zoom-out .35s cubic-bezier(.4,0,1,1) both;}
@keyframes v5-badge-zoom-in{
  0%{opacity:0;transform:scale(0) rotate(-30deg)}
  60%{opacity:1;transform:scale(1.15) rotate(5deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes v5-badge-zoom-out{
  0%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(0) rotate(30deg)}}
.v5-admin-badge .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--v5-cyan);
  box-shadow:0 0 8px var(--v5-cyan-glow);animation:v5-bdPulse 2s infinite;}
@keyframes v5-bdPulse{0%,100%{box-shadow:0 0 4px var(--v5-cyan-glow)}50%{box-shadow:0 0 12px var(--v5-cyan-glow)}}

/* ===== SOLID TABS ===== */
.v5-tabs{height:36px;display:flex;align-items:stretch;padding:0 .5rem;gap:1px;overflow-x:auto;
  background:var(--v5-surface-solid);
  border-bottom:1px solid var(--v5-border);position:relative;z-index:15;flex-shrink:0;}
.v5-tab{display:flex;align-items:center;gap:.4rem;padding:0 .85rem;font-size:.7rem;font-weight:500;
  color:var(--v5-text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .25s;}
.v5-tab:hover{color:var(--v5-text-sec);background:var(--v5-surface-hover);}
.v5-tab.on{color:var(--v5-primary);font-weight:600;border-bottom-color:var(--v5-primary);background:var(--v5-surface);}
.v5-tab-x{width:14px;height:14px;border-radius:3px;border:none;background:transparent;color:var(--v5-text-muted);
  font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;}
.v5-tab:hover .v5-tab-x{opacity:1;}
.v5-tab-x:hover{background:rgba(var(--v5-red-rgb),.15);color:var(--v5-red);}

/* Tab collapse — 탭 바에 통합된 좌측 핸들 (떠있는 박스 느낌 제거) */
.v5-tab-toggle{width:32px;height:36px;border:none;background:transparent;color:var(--v5-text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;font-family:inherit;
  border-right:1px solid var(--v5-glass-border);margin-right:.4rem;position:relative;
  transition:color .2s,background .2s;}
.v5-tab-toggle::after{content:'';position:absolute;left:4px;right:5px;top:6px;bottom:6px;border-radius:8px;
  background:transparent;transition:background .2s;pointer-events:none;}
.v5-tab-toggle:hover{color:var(--v5-primary);}
.v5-tab-toggle:hover::after{background:var(--v5-surface-hover);}
.v5-tab-toggle svg{position:relative;z-index:1;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.v5-tabs.collapsed .v5-tab-toggle svg{transform:rotate(180deg);}
.v5-tabs.collapsed{height:0;padding:0;border:none;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,border-width .3s;}
.v5-tabs:not(.collapsed){transition:height .3s cubic-bezier(.16,1,.3,1),padding .3s;}

/* Tab mini icon */
.v5-tab-mini{position:relative;display:none;width:32px;height:32px;border-radius:10px;border:1px solid var(--v5-border);
  background:var(--v5-surface-solid);color:var(--v5-text-muted);cursor:pointer;
  align-items:center;justify-content:center;transition:all .25s;}
.v5-tab-mini:hover{border-color:var(--v5-primary);color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
.v5-tab-mini.visible{display:flex;animation:v5-miniIn .3s cubic-bezier(.16,1,.3,1) both;}
@keyframes v5-miniIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.v5-tab-mini .tab-count{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;
  background:var(--v5-primary);color:white;font-size:.5rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;}

/* Tab dropdown */
.v5-tab-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;
  background:var(--v5-surface-solid);
  border:1px solid var(--v5-border);border-radius:14px;padding:.4rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-md);
  opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
  transition:all .25s var(--v5-ease-move);z-index:100;}
.dark .v5-tab-dropdown{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-md);}
.v5-tab-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
.v5-tab-dropdown .td-item{display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .65rem;border-radius:10px;font-size:.72rem;font-weight:500;
  color:var(--v5-text-sec);cursor:pointer;transition:all .15s;gap:.4rem;}
.v5-tab-dropdown .td-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
.v5-tab-dropdown .td-item.on{color:var(--v5-primary);font-weight:600;
  background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.1),rgba(var(--v5-primary-rgb),.04));}
.v5-tab-dropdown .td-close{width:16px;height:16px;border-radius:4px;border:none;
  background:transparent;color:var(--v5-text-muted);cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-size:.55rem;opacity:0;transition:all .15s;flex-shrink:0;}
.v5-tab-dropdown .td-item:hover .td-close{opacity:1;}
.v5-tab-dropdown .td-close:hover{background:rgba(var(--v5-red-rgb),.12);color:var(--v5-red);}
.v5-tab-dropdown .td-head{display:flex;align-items:center;justify-content:space-between;
  padding:.3rem .65rem .5rem;border-bottom:1px solid var(--v5-border-subtle);margin-bottom:.25rem;}
.v5-tab-dropdown .td-title{font-size:.6rem;font-weight:700;color:var(--v5-text-muted);text-transform:uppercase;letter-spacing:.08em;}
.v5-tab-dropdown .td-expand{font-size:.55rem;font-weight:600;color:var(--v5-primary);cursor:pointer;
  border:none;background:none;font-family:inherit;transition:color .2s;}
.v5-tab-dropdown .td-expand:hover{color:var(--v5-cyan);}

/* ===== GLASS SIDEBAR ===== */
.v5-body{display:flex;flex:1;overflow:hidden;position:relative;z-index:5;}
/* Light mode: 본문 영역은 흰색. 사이드바 우측 border 가 분리 역할 담당 */
html:not(.dark) .v5-body{background:#ffffff;}
.v5-side{width:var(--v5-sidebar-w);background:var(--v5-surface-solid);
  border-right:1px solid var(--v5-border);
  padding:.85rem .6rem;overflow-y:auto;display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
/* Light mode: solid 배경 + primary glow */
html:not(.dark) .v5-side{
  background:var(--v5-surface-solid);
  border-right-color:rgba(var(--v5-primary-rgb),0.16);
  box-shadow:4px 0 20px rgba(var(--v5-primary-rgb),0.05);}

.v5-side-sec{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--v5-text-muted);padding:1rem .65rem .35rem;
  transition:opacity .3s,height .3s,padding .3s;}
.v5-side-sec:first-child{padding-top:.25rem;}

.v5-si{padding:.55rem .75rem;border-radius:10px;font-size:.8125rem;color:var(--v5-text-sec);cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:500;display:flex;align-items:center;gap:.6rem;
  position:relative;overflow:hidden;height:auto;}
.v5-si .ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.65;flex-shrink:0;}
.v5-si:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
.v5-si.on{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.12),rgba(var(--v5-primary-rgb),.05));
  color:var(--v5-primary);font-weight:600;border:1px solid rgba(var(--v5-primary-rgb),.15);box-shadow:var(--v5-glow-sm);}
.v5-si.on .ic{opacity:1;}
.dark .v5-si.on{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.14),rgba(var(--v5-primary-rgb),.05));border-color:rgba(var(--v5-primary-rgb),.15);}
.v5-si::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--v5-primary);
  border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.v5-si:hover::before{transform:scaleY(.5);opacity:.4;}
.v5-si.on::before{transform:scaleY(1);opacity:1;}

/* Sidebar enter animation */
.v5-side-anim .v5-si{animation:v5-slideR .4s cubic-bezier(.16,1,.3,1) both;}
@keyframes v5-slideR{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* Sidebar toggle */
.v5-side-toggle{margin-top:auto;padding:.5rem .7rem;border-radius:10px;border:none;
  background:var(--v5-bg-subtle);color:var(--v5-text-muted);cursor:pointer;
  display:flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:500;font-family:inherit;
  transition:all .25s;flex-shrink:0;}
.v5-side-toggle:hover{background:var(--v5-surface-hover);color:var(--v5-primary);}
.v5-side-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1);}

/* ===== SIDEBAR COLLAPSE ===== */
/* Base transition for sidebar collapse/expand */
.v5-side{transition:width .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1),
  transform .35s cubic-bezier(.16,1,.3,1),opacity .25s,
  border-color .3s,box-shadow .3s;}

/* Content area stretches smoothly with sidebar */
.v5-body .v5-content{transition:all .5s cubic-bezier(.4,0,.2,1);}

.v5-side.collapsed{width:56px;padding:.85rem .4rem;overflow:visible;z-index:30;
  border-right-color:var(--v5-primary);box-shadow:var(--v5-glow-sm);}
.v5-side.collapsed .v5-side-toggle{box-shadow:var(--v5-glow-sm);border-color:var(--v5-primary);color:var(--v5-primary);}

/* Collapsed menu items — center icon */
.v5-side.collapsed .v5-si{justify-content:center;padding:.55rem;border-radius:10px;gap:0;position:relative;
  animation:v5-iconPop .35s cubic-bezier(.16,1,.3,1) both;}
.v5-side.collapsed .v5-si:nth-child(1){animation-delay:.08s;}
.v5-side.collapsed .v5-si:nth-child(2){animation-delay:.12s;}
.v5-side.collapsed .v5-si:nth-child(3){animation-delay:.16s;}
.v5-side.collapsed .v5-si:nth-child(4){animation-delay:.2s;}
.v5-side.collapsed .v5-si:nth-child(5){animation-delay:.24s;}
.v5-side.collapsed .v5-si:nth-child(6){animation-delay:.28s;}
.v5-side.collapsed .v5-si:nth-child(7){animation-delay:.32s;}
.v5-side.collapsed .v5-si:nth-child(8){animation-delay:.36s;}
@keyframes v5-iconPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* Hide text when collapsed */
.v5-side.collapsed .v5-si span:not(.ic){width:0;overflow:hidden;opacity:0;
  transition:width .3s cubic-bezier(.4,0,.2,1),opacity .2s;position:absolute;}

/* Tooltip on hover */
.v5-side.collapsed .v5-si:hover::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--v5-surface-solid);border:1px solid var(--v5-border);
  padding:.3rem .6rem;border-radius:8px;font-size:.68rem;font-weight:500;color:var(--v5-text);
  white-space:nowrap;z-index:100;box-shadow:0 4px 15px rgba(0,0,0,.1),var(--v5-glow-sm);pointer-events:none;
  animation:v5-tipIn .2s var(--v5-ease-move) both;}
@keyframes v5-tipIn{from{opacity:0;transform:translateX(-4px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}

.v5-side.collapsed .v5-si .ic{opacity:.7;margin:0;transition:opacity .25s,transform .25s;}
.v5-side.collapsed .v5-si.on .ic{opacity:1;}
.v5-side.collapsed .v5-si:hover .ic{transform:scale(1.15);}
.v5-side.collapsed .v5-si:hover{transform:none;}

/* Section headers — collapse with animation */
.v5-side.collapsed .v5-side-sec{height:0;overflow:hidden;padding:0;margin:0;opacity:0;
  transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,opacity .15s;}

/* Expand: text slides back in with stagger */
.v5-side:not(.collapsed) .v5-si span:not(.ic){opacity:1;
  transition:opacity .35s .2s cubic-bezier(.16,1,.3,1),width .35s .15s;}
.v5-side:not(.collapsed) .v5-si{animation:v5-menuSlideIn .4s cubic-bezier(.16,1,.3,1) both;}
.v5-side:not(.collapsed) .v5-si:nth-child(1){animation-delay:.05s;}
.v5-side:not(.collapsed) .v5-si:nth-child(2){animation-delay:.08s;}
.v5-side:not(.collapsed) .v5-si:nth-child(3){animation-delay:.11s;}
.v5-side:not(.collapsed) .v5-si:nth-child(4){animation-delay:.14s;}
.v5-side:not(.collapsed) .v5-si:nth-child(5){animation-delay:.17s;}
.v5-side:not(.collapsed) .v5-si:nth-child(6){animation-delay:.2s;}
.v5-side:not(.collapsed) .v5-si:nth-child(7){animation-delay:.23s;}
.v5-side:not(.collapsed) .v5-si:nth-child(8){animation-delay:.26s;}
@keyframes v5-menuSlideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.v5-side:not(.collapsed) .v5-side-sec{opacity:1;
  transition:opacity .35s .1s,height .35s .05s,padding .35s .05s;}

/* Category groups */
.v5-side-group{display:contents;}
.v5-side.collapsed .v5-side-group{display:flex;flex-direction:column;gap:1px;position:relative;}

/* Category header (collapsed only) */
.v5-side-cat{height:0;overflow:hidden;opacity:0;padding:0;margin:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;cursor:pointer;position:relative;color:var(--v5-text-muted);
  transition:height .3s,opacity .2s,padding .3s,margin .3s;}
.v5-side.collapsed .v5-side-cat{height:auto;overflow:visible;opacity:1;pointer-events:auto;
  padding:.55rem;margin-top:.4rem;
  animation:v5-catIn .4s cubic-bezier(.16,1,.3,1) both;}
.v5-side.collapsed .v5-side-cat:first-child{margin-top:0;}
.v5-side.collapsed .v5-side-cat:hover{background:var(--v5-surface-hover);color:var(--v5-primary);transform:scale(1.05);}
.v5-side.collapsed .v5-side-cat.open{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.1),rgba(var(--v5-primary-rgb),.04));color:var(--v5-primary);}
.dark .v5-side.collapsed .v5-side-cat.open{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.1),rgba(var(--v5-primary-rgb),.04));}
.v5-side-cat .cat-label{font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  margin-top:.15rem;text-align:center;line-height:1;}
.v5-side.collapsed .v5-side-group:nth-child(1) .v5-side-cat{animation-delay:.06s;}
.v5-side.collapsed .v5-side-group:nth-child(2) .v5-side-cat{animation-delay:.12s;}
.v5-side.collapsed .v5-side-group:nth-child(3) .v5-side-cat{animation-delay:.18s;}
.v5-side.collapsed .v5-side-group:nth-child(4) .v5-side-cat{animation-delay:.24s;}
@keyframes v5-catIn{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}

/* Hide items in collapsed (shown in flyout) */
.v5-side.collapsed .v5-side-group .v5-si{height:0;padding:0;margin:0;overflow:hidden;opacity:0;
  transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,opacity .2s,margin .3s;}
.v5-side.collapsed .v5-side-group .v5-side-sec{height:0;padding:0;margin:0;overflow:hidden;opacity:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);}
.v5-side:not(.collapsed) .v5-side-group .v5-si{
  transition:height .35s .12s cubic-bezier(.16,1,.3,1),padding .35s .12s,opacity .35s .15s,margin .35s .12s;}

/* ===== SUBMENU EXPAND/COLLAPSE =====
   grid-template-rows:0fr↔1fr 트릭은 직속 child 가 단 하나일 때만 동작 (여러 개면 implicit row 가 auto 로 펼쳐짐).
   그래서 .v5-submenu 안을 .v5-submenu-inner 로 감싸 항상 child 가 1개가 되도록 보장한다. */
.v5-submenu{display:grid;grid-template-rows:0fr;overflow:hidden;padding-left:1.5rem;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1),opacity .25s;}
.v5-submenu>*{overflow:hidden;min-height:0;}
.v5-submenu.expanded{grid-template-rows:1fr;opacity:1;}
.v5-submenu:not(.expanded){opacity:0;}
.v5-submenu-inner{display:flex;flex-direction:column;gap:1px;}

/* Sub items stagger slide in */
.v5-sub-item{transform:translateX(-10px);opacity:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s,background .2s,color .2s;}
.v5-submenu.expanded .v5-sub-item{transform:none;opacity:1;}

/* Sub items hover — indent effect */
.v5-sub-item:hover{padding-left:1rem !important;}

/* Hide child menus when sidebar collapsed */
.v5-side.collapsed .v5-si-child,
.v5-side.collapsed .v5-submenu{height:0;padding:0;margin:0;overflow:hidden;opacity:0;pointer-events:none;
  grid-template-rows:0fr !important;transition:none;}
/* Hide tooltip when flyout is open */
.v5-si:has(> .v5-side-flyout.open):hover::after{display:none !important;}

/* Collapsed toggle — icon rotates, text fades */
.v5-side.collapsed .v5-side-toggle span{width:0;overflow:hidden;opacity:0;
  transition:width .25s cubic-bezier(.4,0,.2,1),opacity .15s;}
.v5-side.collapsed .v5-side-toggle{justify-content:center;padding:.55rem;}
.v5-side.collapsed .v5-side-toggle svg{transform:rotate(180deg);}
.v5-side:not(.collapsed) .v5-side-toggle span{opacity:1;
  transition:opacity .35s .25s cubic-bezier(.16,1,.3,1);}
.v5-side:not(.collapsed) .v5-side-toggle span{opacity:1;transition:opacity .3s .2s;}

/* Flyout panel */
.v5-side-flyout{position:absolute;left:calc(100% + 8px);top:0;width:180px;
  background:var(--v5-surface-solid);
  border:1px solid var(--v5-border);border-radius:14px;padding:.4rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.12),var(--v5-glow-md);
  opacity:0;transform:translateX(-12px) scale(.92);pointer-events:none;
  transition:opacity .2s var(--v5-ease-move),transform .3s var(--v5-ease-move);z-index:100;}
.dark .v5-side-flyout{box-shadow:0 8px 32px rgba(0,0,0,0.5),var(--v5-glow-md);}
.v5-side-flyout.open{opacity:1;transform:none;pointer-events:auto;}
.v5-side-flyout .fly-item{animation:v5-flyItemIn .25s cubic-bezier(.16,1,.3,1) both;}
.v5-side-flyout .fly-item:nth-child(2){animation-delay:.03s;}
.v5-side-flyout .fly-item:nth-child(3){animation-delay:.06s;}
.v5-side-flyout .fly-item:nth-child(4){animation-delay:.09s;}
.v5-side-flyout .fly-item:nth-child(5){animation-delay:.12s;}
.v5-side-flyout .fly-item:nth-child(6){animation-delay:.15s;}
.v5-side-flyout .fly-item:nth-child(7){animation-delay:.18s;}
@keyframes v5-flyItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.v5-side-flyout .fly-title{font-size:.58rem;font-weight:700;color:var(--v5-text-muted);
  text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem .45rem;}
.v5-side-flyout .fly-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
  border-radius:10px;font-size:.72rem;font-weight:500;color:var(--v5-text-sec);
  cursor:pointer;transition:all .15s;}
.v5-side-flyout .fly-item:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}
.v5-side-flyout .fly-item.on{color:var(--v5-primary);font-weight:600;
  background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.1),rgba(var(--v5-primary-rgb),.04));}
.v5-side-flyout .fly-item .ic{width:14px;height:14px;display:flex;align-items:center;justify-content:center;opacity:.6;flex-shrink:0;}
.v5-side-flyout .fly-item.on .ic{opacity:1;}

/* Admin sidebar accent */
.v5-admin-side .v5-si.on{background:linear-gradient(135deg,rgba(var(--v5-cyan-rgb),.12),rgba(var(--v5-cyan-rgb),.05));
  color:var(--v5-cyan);border-color:rgba(var(--v5-cyan-rgb),.2);}
.v5-admin-side .v5-si.on .ic{opacity:1;}
.v5-admin-side .v5-si::before{background:var(--v5-cyan);}
.dark .v5-admin-side .v5-si.on{background:linear-gradient(135deg,rgba(var(--v5-cyan-rgb),.12),rgba(var(--v5-cyan-rgb),.05));
  border-color:rgba(var(--v5-cyan-rgb),.15);}

/* ===== MODE TRANSITION ===== */
.v5-mode-fade{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,var(--v5-primary-glow),transparent 70%);
  transition:opacity .5s cubic-bezier(.4,0,.2,1);}
.v5-mode-fade.in{opacity:1;}

.v5-side.slide-out{transform:translateX(-20px);opacity:0;transition:transform .3s cubic-bezier(.4,0,1,1),opacity .2s;}
.v5-side.slide-in{animation:v5-sideSlideIn .35s cubic-bezier(.16,1,.3,1) both;}
@keyframes v5-sideSlideIn{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}
.v5-tabs.fade-out{opacity:0;transition:opacity .2s;}
.v5-tabs.fade-in{animation:v5-tabsFadeIn .3s cubic-bezier(.16,1,.3,1) both;}
@keyframes v5-tabsFadeIn{from{opacity:0}to{opacity:1}}

/* ===== MODE TRANSITION — sidebar items morph (option b) ===== */
/* 각 .v5-si 가 stagger delay 로 사라졌다가 새 메뉴가 stagger 로 들어옴 */
.v5-si.mode-morph-out{animation:v5-mode-si-out .35s cubic-bezier(.4,0,1,1) forwards;}
.v5-si.mode-morph-in{animation:v5-mode-si-in .45s cubic-bezier(.16,1,.3,1) backwards;}
@keyframes v5-mode-si-out{
  0%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateX(-30px) scale(.92);filter:blur(4px)}}
@keyframes v5-mode-si-in{
  0%{opacity:0;transform:translateX(30px) scale(.92);filter:blur(4px)}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}

/* ===== MODE TRANSITION — header glow line flash (option c) ===== */
/* 헤더 아래 1px 라인이 mode change 시 굵게/번쩍 → 1px 로 settle */
.v5-hdr-glow{position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--v5-primary),transparent);
  opacity:0;pointer-events:none;}
.v5-admin-mode .v5-hdr-glow{background:linear-gradient(90deg,transparent,var(--v5-cyan),transparent);}
.v5-hdr-glow.mode-flash{animation:v5-mode-hdr-flash 1.4s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes v5-mode-hdr-flash{
  0%{opacity:0;height:1px;filter:blur(0)}
  20%{opacity:1;height:6px;filter:blur(8px)}
  40%{opacity:1;height:4px;filter:blur(6px)}
  100%{opacity:.6;height:1px;filter:blur(0)}}

/* ===== MODE TRANSITION — breadcrumb text swap (option e) ===== */
.v5-hdr-bc{display:inline-block;}
.v5-hdr-bc.mode-swap-out{animation:v5-mode-bc-out .25s ease-in forwards;}
.v5-hdr-bc.mode-swap-in{animation:v5-mode-bc-in .35s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes v5-mode-bc-out{
  to{opacity:0;transform:translateY(-8px) scale(.9);filter:blur(4px)}}
@keyframes v5-mode-bc-in{
  from{opacity:0;transform:translateY(8px) scale(.9);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

/* ===== MODE TRANSITION — toggle button burst (디자인시스템 mode-burst 포팅) =====
   JS 가 .v5-mode-burst 컨테이너를 fixed 위치(클릭점)에 append.
   기본 = primary(보라, → 사용자 모드), .admin = cyan(시안, → 관리자 모드). */
.v5-mode-burst{
  position:fixed;width:0;height:0;
  pointer-events:none;z-index:9998;
  --burst-rgb:var(--v5-primary-rgb);
}
.v5-mode-burst.admin{--burst-rgb:var(--v5-cyan-rgb);}

/* Center expanding ring */
.v5-mode-burst .burst-ring{
  position:absolute;left:0;top:0;
  width:28px;height:28px;margin-left:-14px;margin-top:-14px;
  border-radius:50%;
  border:2px solid rgba(var(--burst-rgb),.85);
  box-shadow:0 0 18px rgba(var(--burst-rgb),.55);
  animation:v5-mode-burst-ring .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes v5-mode-burst-ring{
  0%  {opacity:0;transform:scale(.2);}
  18% {opacity:1;border-width:2px;}
  100%{opacity:0;transform:scale(5.5);border-width:0;}
}

/* 10 radial particles. JS sets --tx / --ty per particle. */
.v5-mode-burst .burst-particle{
  position:absolute;left:0;top:0;
  width:5px;height:5px;margin-left:-2.5px;margin-top:-2.5px;
  border-radius:50%;
  background:rgb(var(--burst-rgb));
  box-shadow:0 0 6px rgba(var(--burst-rgb),.9);
  opacity:0;
  animation:v5-mode-burst-particle .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes v5-mode-burst-particle{
  0%  {opacity:0;transform:translate(0,0) scale(.4);}
  15% {opacity:1;}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2);}
}

/* ===== MODE TRANSITION — header sweep (좌→우 그라데이션 빛띠) =====
   JS 가 .v5-hdr 안에 .v5-mode-sweep 을 append, 0.85s 후 자동 제거. */
.v5-mode-sweep{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;overflow:hidden;
}
.v5-mode-sweep::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--v5-cyan-rgb),0) 15%,
    rgba(var(--v5-cyan-rgb),.9) 40%,
    rgba(var(--v5-primary-rgb),1) 50%,
    rgba(var(--v5-pink-rgb),.9) 60%,
    rgba(var(--v5-cyan-rgb),0) 85%,
    transparent 100%);
  filter:blur(.5px);
  transform:translateX(-100%);
  animation:v5-mode-sweep .85s cubic-bezier(.65,0,.35,1) forwards;
}
.v5-mode-sweep[data-mode="user"]::before{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--v5-primary-rgb),0) 15%,
    rgba(var(--v5-primary-rgb),.95) 50%,
    rgba(var(--v5-primary-rgb),0) 85%,
    transparent 100%);
  animation-direction:reverse;
}
@keyframes v5-mode-sweep{
  from{transform:translateX(-100%);}
  to  {transform:translateX(100%);}
}

/* ===== THEME TRANSITION ===== */
.v5-theme-fade{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  transition:opacity .4s cubic-bezier(.4,0,.2,1);}
.v5-theme-fade.in{opacity:1;}

/* ===== CONTENT PLACEHOLDER ===== */
.v5-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}
.v5-placeholder{
  flex:1;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--v5-border);border-radius:16px;
  background:var(--v5-bg-subtle);
  color:var(--v5-text-muted);font-size:.85rem;font-weight:500;min-height:300px;}

/* ===== V5 DROPDOWN SOLID OVERRIDES (2026-04-21 no-glass) ===== */
.v5-hdr-r [data-radix-popper-content-wrapper]{z-index:100 !important;}
.v5-hdr-r [role="menu"],
.v5-avatar-dd-content{
  background:var(--v5-surface-solid) !important;
  border:1px solid var(--v5-border) !important;border-radius:14px !important;
  box-shadow:0 12px 40px rgba(0,0,0,0.12),var(--v5-glow-md) !important;
  animation:v5-ddIn .25s var(--v5-ease-move) both !important;
  padding:.4rem !important;}
.dark .v5-hdr-r [role="menu"],
.dark .v5-avatar-dd-content{box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--v5-glow-lg) !important;}
@keyframes v5-ddIn{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:none}}

/* Avatar dropdown items glass style */
.v5-avatar-dd-content [role="menuitem"]{border-radius:8px !important;transition:all .15s !important;font-size:.75rem !important;}
.v5-avatar-dd-content [role="menuitem"]:hover{background:var(--v5-surface-hover) !important;transform:translateX(2px);}

/* ===== MOBILE RESPONSIVE ===== */
.v5-mobile-toggle{display:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--v5-border);
  background:var(--v5-surface-solid);color:var(--v5-text-muted);cursor:pointer;
  align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.v5-mobile-toggle:hover{border-color:var(--v5-primary);color:var(--v5-primary);}

.v5-side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:25;
  opacity:0;transition:opacity .3s;pointer-events:none;}
.v5-side-overlay.open{opacity:1;pointer-events:auto;}

@media(max-width:768px){
  .v5-mobile-toggle{display:flex;}
  .v5-side{position:fixed;left:0;top:0;bottom:0;z-index:30;
    transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    width:260px;padding-top:60px;}
  .v5-side.mobile-open{transform:none;}
  .v5-side-overlay{display:block;}
  .v5-hdr-bc{display:none;}
  .v5-admin-badge{display:none !important;}
  .v5-hdr-logo{font-size:.9rem;}
  .v5-tabs{padding:0 .3rem;}
  .v5-tab{padding:0 .6rem;font-size:.65rem;}
  .v5-tab-toggle{display:none;}
  .v5-content{padding:.75rem;}
  .v5-admin-label{display:none !important;}
  .v5-pill{display:none;}
}
@media(min-width:769px) and (max-width:1024px){
  :root{--v5-sidebar-w:180px;}
  .v5-si{font-size:.72rem;padding:.45rem .6rem;}
  .v5-content{padding:1rem;}
}

/* ===================================================================
   V5 MENU MANAGEMENT (v5-mm-*) — 3-column Cascade (Scope / Tree / Detail)
   모든 색/간격 토큰은 v5 변수 재사용. 새 토큰은 :root 에 추가.
   =================================================================== */
:root{
  --v5-mm-bg:#ffffff;
  --v5-mm-panel:#ffffff;
  --v5-mm-sunk:#f5f5f8;
  --v5-mm-hover:#faf9fc;
  --v5-mm-faint:#c9c7d5;
  --v5-mm-border:#e5e3ec;
  --v5-mm-border-2:#eeedf3;
  --v5-mm-text:#1a1825;
  --v5-mm-text-sec:#4e4c5e;
  --v5-mm-text-muted:#8a8899;
  --v5-mm-accent:#6c5ce7;
  --v5-mm-accent-soft:rgba(var(--v5-primary-rgb),.08);
  --v5-mm-accent-line:rgba(var(--v5-primary-rgb),.22);
  --v5-mm-ring:rgba(var(--v5-primary-rgb),.14);
  --v5-mm-green:#0a9975;
  --v5-mm-red:#dc2626;
  --v5-mm-amber:#c87d18;
}
.dark{
  --v5-mm-bg:#0a0a12;
  --v5-mm-panel:#13131c;
  --v5-mm-sunk:#0f0f18;
  --v5-mm-hover:#1a1a24;
  --v5-mm-faint:#4a4859;
  --v5-mm-border:#1f1f26;
  --v5-mm-border-2:#19191f;
  --v5-mm-text:#f1eff8;
  --v5-mm-text-sec:#a5a2ba;
  --v5-mm-text-muted:#72708a;
  --v5-mm-accent:#a991ff;
  --v5-mm-accent-soft:rgba(169,145,255,.09);
  --v5-mm-accent-line:rgba(169,145,255,.22);
  --v5-mm-ring:rgba(169,145,255,.22);
  --v5-mm-green:#5eeabc;
  --v5-mm-red:#ff6a7a;
  --v5-mm-amber:#f2b45e;
}

/* 전체 shell — admin content 안에 들어감 (반응형 fluid) */
.v5-mm{display:grid;
  grid-template-columns:clamp(220px,16vw,300px) clamp(280px,18vw,360px) minmax(0,1fr);
  height:100%;min-height:0;border-top:1px solid var(--v5-border);}

/* 공통 컬럼 셸 */
.v5-mm-col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--v5-mm-border);
  background:var(--v5-mm-panel);animation:v5-mm-colIn .35s cubic-bezier(.16,1,.3,1);}
.v5-mm-col:last-child{border-right:none;}
@keyframes v5-mm-colIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* 컬럼 헤더 공통 */
.v5-mm-col-hd{padding:1rem 1rem .6rem;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;}
.v5-mm-col-hd > div:first-child{min-width:0;}
.v5-mm-step{display:inline-flex;align-items:center;gap:.35rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
  color:var(--v5-mm-text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.v5-mm-step .num{padding:.06rem .32rem;border-radius:3px;background:var(--v5-mm-sunk);
  border:1px solid var(--v5-mm-border);color:var(--v5-mm-accent);}
.v5-mm-col-hd h3{margin:.3rem 0 .1rem;font-size:.95rem;font-weight:700;letter-spacing:-.018em;color:var(--v5-mm-text);}
.v5-mm-col-hd p{margin:0;font-size:.64rem;color:var(--v5-mm-text-muted);}

.v5-mm-hd-add{width:28px;height:28px;border-radius:7px;border:1px solid var(--v5-mm-border);
  background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.v5-mm-hd-add:hover{border-color:var(--v5-mm-accent);color:var(--v5-mm-accent);background:var(--v5-mm-sunk);}
.v5-mm-hd-add svg{width:12px;height:12px;}

/* ========= COL 1: SCOPE ========= */
.v5-mm-col-scope{background:var(--v5-mm-sunk);}
.v5-mm-scope-list{padding:.3rem .6rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto;}
.v5-mm-scope{display:flex;flex-direction:column;gap:.5rem;padding:.85rem;border-radius:10px;
  background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);cursor:pointer;transition:all .15s;}
.v5-mm-scope:hover{border-color:rgba(var(--v5-primary-rgb),.2);}
.dark .v5-mm-scope:hover{border-color:rgba(var(--v5-primary-rgb),.2);}
.v5-mm-scope.on{background:rgba(var(--v5-primary-rgb),.08);border-color:var(--v5-mm-accent);}
.dark .v5-mm-scope.on{background:rgba(var(--v5-primary-rgb),.08);}
.v5-mm-scope-top{display:flex;align-items:center;justify-content:space-between;}
.v5-mm-scope-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);border:1px solid var(--v5-mm-border-2);}
.v5-mm-scope.on .v5-mm-scope-ico{background:var(--v5-mm-accent);color:white;border-color:transparent;}
.v5-mm-scope-ico svg{width:15px;height:15px;}
.v5-mm-scope-cnt{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;color:var(--v5-mm-text);font-variant-numeric:tabular-nums;}
.v5-mm-scope.on .v5-mm-scope-cnt{color:var(--v5-mm-accent);}
.v5-mm-scope-name{font-size:.82rem;font-weight:700;letter-spacing:-.01em;color:var(--v5-mm-text);}
.v5-mm-scope-desc{font-size:.62rem;color:var(--v5-mm-text-muted);line-height:1.4;}

/* ========= COL 2: TREE ========= */
.v5-mm-col-tree{background:var(--v5-mm-panel);}
.v5-mm-tree-srch{padding:.2rem .75rem .55rem;flex-shrink:0;position:relative;}
.v5-mm-tree-srch > svg{position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);width:11px;height:11px;
  color:var(--v5-mm-text-muted);pointer-events:none;}
.v5-mm-tree-srch input{width:100%;height:28px;padding:0 .55rem 0 1.85rem;border:1px solid var(--v5-mm-border);border-radius:6px;
  background:var(--v5-mm-sunk);color:var(--v5-mm-text);font-size:.68rem;font-family:inherit;outline:none;transition:all .12s;}
.v5-mm-tree-srch input:focus{border-color:var(--v5-mm-accent);background:var(--v5-mm-panel);
  box-shadow:0 0 0 2px rgba(var(--v5-primary-rgb),.14);}
.dark .v5-mm-tree-srch input:focus{box-shadow:0 0 0 2px rgba(var(--v5-primary-rgb),.2);}

.v5-mm-tree{padding:.15rem .4rem 1rem;flex:1;overflow-y:auto;display:flex;flex-direction:column;}

/* Node 공통 — margin 없이 padding으로 세로 간격 확보, hit area 연속 */
.v5-mm-node{display:flex;align-items:center;gap:.55rem;padding:.72rem .7rem;border-radius:7px;margin:0 .15rem;
  cursor:pointer;transition:all .12s;position:relative;user-select:none;
  background-clip:padding-box;}
.v5-mm-node:hover{background:var(--v5-mm-sunk);}
.v5-mm-node.on{background:rgba(var(--v5-primary-rgb),.08);}
.dark .v5-mm-node.on{background:rgba(var(--v5-primary-rgb),.09);}
.v5-mm-node.on .v5-mm-node-name{color:var(--v5-mm-accent);font-weight:600;}

.v5-mm-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--v5-mm-text-muted);flex-shrink:0;border-radius:3px;transition:all .1s;}
.v5-mm-caret:hover{background:var(--v5-mm-panel);color:var(--v5-mm-text);}
.v5-mm-caret svg{width:9px;height:9px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
.v5-mm-node.open > .v5-mm-caret svg{transform:rotate(90deg);}
.v5-mm-node.leaf .v5-mm-caret{opacity:0;pointer-events:none;}

.v5-mm-node-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);flex-shrink:0;border:1px solid var(--v5-mm-border-2);}
.v5-mm-node.on .v5-mm-node-ico{background:var(--v5-mm-accent);color:white;border-color:transparent;}
.v5-mm-node-ico svg{width:13px;height:13px;}

.v5-mm-node-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.v5-mm-node-name{font-size:.88rem;font-weight:500;color:var(--v5-mm-text);letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.v5-mm-node-meta{font-size:.68rem;color:var(--v5-mm-text-muted);font-family:'JetBrains Mono',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.v5-mm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--v5-mm-faint);}
.v5-mm-dot.on{background:var(--v5-mm-green);}

.v5-mm-cnt{font-size:.68rem;font-weight:700;color:var(--v5-mm-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;
  padding:.15rem .5rem;border-radius:5px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border-2);}
.v5-mm-node.on .v5-mm-cnt{color:var(--v5-mm-accent);background:var(--v5-mm-panel);
  border-color:rgba(var(--v5-primary-rgb),.2);}

/* L1: 크게 강조 — margin 대신 padding을 써서 드래그 hit area를 여백까지 확장 */
.v5-mm-node.l1{padding:1.2rem 1rem .95rem;border-radius:11px;background:var(--v5-mm-panel);
  border:1px solid var(--v5-mm-border);margin:0 .15rem .15rem;gap:.75rem;
  background-clip:padding-box;}
.v5-mm-node.l1:hover{border-color:rgba(var(--v5-primary-rgb),.2);background:rgba(var(--v5-primary-rgb),.05);}
.dark .v5-mm-node.l1:hover{border-color:rgba(var(--v5-primary-rgb),.2);background:rgba(var(--v5-primary-rgb),.05);}
.v5-mm-node.l1.on{border-color:var(--v5-mm-accent);background:rgba(var(--v5-primary-rgb),.08);}
.dark .v5-mm-node.l1.on{background:rgba(var(--v5-primary-rgb),.08);}
.v5-mm-node.l1 .v5-mm-caret{width:18px;height:18px;}
.v5-mm-node.l1 .v5-mm-caret svg{width:11px;height:11px;}
.v5-mm-node.l1 .v5-mm-node-ico{width:38px;height:38px;border-radius:10px;}
.v5-mm-node.l1 .v5-mm-node-ico svg{width:18px;height:18px;}
.v5-mm-node.l1 .v5-mm-node-name{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;}
.v5-mm-node.l1.on .v5-mm-node-name{font-weight:700;color:var(--v5-mm-accent);}
.v5-mm-node.l1 .v5-mm-cnt{font-size:.74rem;padding:.2rem .6rem;font-weight:700;}

/* L2/L3 들여쓰기 + connector line */
.v5-mm-node.l2{padding-left:2.1rem;}
.v5-mm-node.l3{padding-left:3.3rem;}
.v5-mm-node.l2::before{content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
.v5-mm-node.l2::after{content:'';position:absolute;left:1.4rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}
.v5-mm-node.l3::before{content:'';position:absolute;left:2.5rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
.v5-mm-node.l3::after{content:'';position:absolute;left:2.5rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}

/* 서브트리 펼침 — stagger fade-in + blur */
.v5-mm-sub{display:none;margin:0;padding:0;}
.v5-mm-node.open + .v5-mm-sub{display:block;animation:v5-mm-subIn .35s cubic-bezier(.16,1,.3,1);}
@keyframes v5-mm-subIn{
  from{opacity:0;transform:translateY(-6px);filter:blur(3px);}
  to{opacity:1;transform:none;filter:none;}
}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node{animation:v5-mm-nodeIn .38s cubic-bezier(.16,1,.3,1) backwards;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(1){animation-delay:.03s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(2){animation-delay:.07s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(3){animation-delay:.11s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(4){animation-delay:.15s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(5){animation-delay:.19s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(6){animation-delay:.23s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(7){animation-delay:.27s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(8){animation-delay:.31s;}
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(n+9){animation-delay:.35s;}
@keyframes v5-mm-nodeIn{
  from{opacity:0;transform:translateX(-10px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* caret 회전 부드럽게 */
.v5-mm-caret svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1);}

/* 선택 상태 진입 애니메이션 */
.v5-mm-node.on{animation:v5-mm-selectPulse .5s cubic-bezier(.16,1,.3,1);}
@keyframes v5-mm-selectPulse{
  0%{box-shadow:inset 0 0 0 0 rgba(var(--v5-primary-rgb),0);}
  50%{box-shadow:inset 0 0 0 2px rgba(var(--v5-primary-rgb),.3);}
  100%{box-shadow:inset 0 0 0 0 rgba(var(--v5-primary-rgb),0);}
}
.dark .v5-mm-node.on{animation-name:v5-mm-selectPulseDark;}
@keyframes v5-mm-selectPulseDark{
  0%{box-shadow:inset 0 0 0 0 rgba(var(--v5-primary-rgb),0);}
  50%{box-shadow:inset 0 0 0 2px rgba(var(--v5-primary-rgb),.35);}
  100%{box-shadow:inset 0 0 0 0 rgba(var(--v5-primary-rgb),0);}
}

/* Drag & drop — box-shadow 인셋 방식 (connector ::before/::after 충돌 방지) */
.v5-mm-node[draggable="true"]{cursor:grab;}
.v5-mm-node[draggable="true"]:active{cursor:grabbing;}
.v5-mm-node.dragging{opacity:.4;}
.v5-mm-node.drop-before{box-shadow:inset 0 2px 0 var(--v5-mm-accent),0 -4px 8px -4px var(--v5-mm-ring);}
.v5-mm-node.drop-after{box-shadow:inset 0 -2px 0 var(--v5-mm-accent),0 4px 8px -4px var(--v5-mm-ring);}
.v5-mm-node.drop-into{background:var(--v5-mm-accent-soft);
  box-shadow:inset 0 0 0 2px var(--v5-mm-accent);}

/* ========= COL 3: DETAIL (Overview / Settings / Activity) ========= */
.v5-mm-col-detail{background:var(--v5-mm-sunk);overflow:hidden;}
.v5-mm-vt{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.65rem 1.4rem;border-bottom:1px solid var(--v5-mm-border);background:var(--v5-mm-panel);flex-shrink:0;}
.v5-mm-vt-list{display:flex;padding:3px;border-radius:8px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border);}
.v5-mm-vt-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border:none;border-radius:5px;
  background:transparent;color:var(--v5-mm-text-muted);font-family:inherit;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .12s;}
.v5-mm-vt-btn:hover{color:var(--v5-mm-text-sec);}
.v5-mm-vt-btn.on{background:var(--v5-mm-panel);color:var(--v5-mm-text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.dark .v5-mm-vt-btn.on{box-shadow:0 1px 3px rgba(0,0,0,.4);}
.v5-mm-vt-btn svg{width:12px;height:12px;}
.v5-mm-vt-btn .cnt{font-variant-numeric:tabular-nums;color:var(--v5-mm-text-muted);font-size:.6rem;font-weight:500;margin-left:.15rem;}
.v5-mm-vt-btn.on .cnt{color:var(--v5-mm-accent);}

/* 탭 뷰 전환 — fade + slide */
.v5-mm-pane{display:none;}
.v5-mm-pane.on{display:block;animation:v5-mm-paneIn .4s cubic-bezier(.16,1,.3,1);}
@keyframes v5-mm-paneIn{
  from{opacity:0;transform:translateY(10px);filter:blur(4px);}
  to{opacity:1;transform:none;filter:none;}
}
/* Settings 섹션 stagger */
.v5-mm-pane.on .v5-mm-sv-hero{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) .05s backwards;}
.v5-mm-pane.on .v5-mm-sv-grid{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) backwards;}
.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(1){animation-delay:.1s;}
.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(2){animation-delay:.16s;}
.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(3){animation-delay:.22s;}
.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(4){animation-delay:.28s;}
.v5-mm-pane.on .v5-mm-sv-ft{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) .35s backwards;}
.v5-mm-pane.on .v5-mm-stats .v5-mm-stat{animation:v5-mm-sectIn .4s cubic-bezier(.16,1,.3,1) backwards;}
.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(1){animation-delay:.08s;}
.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(2){animation-delay:.14s;}
.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(3){animation-delay:.20s;}
.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(4){animation-delay:.26s;}
.v5-mm-pane.on .v5-mm-act{animation:v5-mm-sectIn .4s cubic-bezier(.16,1,.3,1) backwards;}
.v5-mm-pane.on .v5-mm-act:nth-child(1){animation-delay:.08s;}
.v5-mm-pane.on .v5-mm-act:nth-child(2){animation-delay:.14s;}
.v5-mm-pane.on .v5-mm-act:nth-child(3){animation-delay:.20s;}
.v5-mm-pane.on .v5-mm-act:nth-child(4){animation-delay:.26s;}
@keyframes v5-mm-sectIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}

/* 탭 버튼 전환 */
.v5-mm-vt-btn{transition:all .22s cubic-bezier(.16,1,.3,1);}
.v5-mm-vt-btn.on{animation:v5-mm-tabPop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes v5-mm-tabPop{
  0%{transform:scale(.92);}
  60%{transform:scale(1.04);}
  100%{transform:scale(1);}
}

/* 스코프 카드 선택 */
.v5-mm-scope.on{animation:v5-mm-scopePop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes v5-mm-scopePop{
  0%{transform:scale(.96);}
  60%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

/* Toggle switch 부드러운 전환 */
.v5-mm-tg .sw{transition:background .3s cubic-bezier(.4,0,.2,1);}
.v5-mm-tg .sw::after{transition:left .3s cubic-bezier(.34,1.56,.64,1),transform .2s;}
.v5-mm-tg:active .sw::after{transform:scale(1.08);}

/* Input focus 전환 */
.v5-mm-inp{transition:border-color .2s,box-shadow .2s,background .2s;}

/* 드롭 인디케이터 pulse */
.v5-mm-node.drop-before,.v5-mm-node.drop-after,.v5-mm-node.drop-into{
  animation:v5-mm-dropGlow 1s ease-in-out infinite;
}
@keyframes v5-mm-dropGlow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.1);}
}

/* shadcn AlertDialog 우리 style로 강화 — 글래스 + bounce in */
[data-radix-popper-content-wrapper] [role="alertdialog"],
[role="alertdialog"][data-state]{
  animation:v5-mm-modalIn .35s cubic-bezier(.16,1,.3,1) !important;
}
[role="alertdialog"][data-state="closed"]{
  animation:v5-mm-modalOut .2s cubic-bezier(.4,0,1,1) !important;
}
@keyframes v5-mm-modalIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92);filter:blur(6px);}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.02);filter:blur(0);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
}
@keyframes v5-mm-modalOut{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.95);filter:blur(4px);}
}

/* Dialog overlay fade */
[data-radix-focus-guard] ~ [data-radix-portal] [data-state="open"][class*="fixed"][class*="inset"]{
  animation:v5-mm-overlayIn .3s ease-out !important;
}
@keyframes v5-mm-overlayIn{
  from{opacity:0;}
  to{opacity:1;}
}
.v5-mm-pane-wrap{padding:clamp(.9rem,1.6vw,1.4rem) clamp(1rem,2vw,1.75rem) 2rem;
  overflow-y:auto;height:100%;width:100%;}

/* Settings */
.v5-mm-sv-hero{padding-bottom:1.2rem;margin-bottom:.6rem;border-bottom:1px solid var(--v5-mm-border);}
.v5-mm-sv-hero-top{display:flex;align-items:center;gap:.8rem;}
.v5-mm-sv-hero-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--v5-mm-accent);color:white;flex-shrink:0;box-shadow:0 2px 8px -2px rgba(var(--v5-primary-rgb),.35);}
.dark .v5-mm-sv-hero-ico{color:var(--v5-mm-bg);box-shadow:0 2px 10px -2px rgba(var(--v5-primary-rgb),.35);}
.v5-mm-sv-hero-ico svg{width:20px;height:20px;}
.v5-mm-sv-hero-info{flex:1;min-width:0;}
.v5-mm-sv-hero-path{font-size:.7rem;color:var(--v5-mm-text-muted);margin-bottom:.2rem;}
.v5-mm-sv-hero-path b{color:var(--v5-mm-text-sec);font-weight:600;}
.v5-mm-sv-hero-info h2{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:.55rem;color:var(--v5-mm-text);}
.v5-mm-sv-hero-meta{margin-top:.6rem;font-size:.66rem;color:var(--v5-mm-text-muted);font-family:'JetBrains Mono',monospace;
  display:flex;gap:1.2rem;flex-wrap:wrap;}
.v5-mm-sv-hero-meta b{color:var(--v5-mm-text-sec);font-weight:600;}

.v5-mm-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .48rem;border-radius:5px;
  font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--v5-mm-sunk);color:var(--v5-mm-text-muted);border:1px solid var(--v5-mm-border);
  font-family:'JetBrains Mono',monospace;}
.v5-mm-chip.on{color:var(--v5-mm-green);background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.22);}
.dark .v5-mm-chip.on{background:rgba(var(--v5-cyan-rgb),.08);border-color:rgba(var(--v5-cyan-rgb),.22);}
.v5-mm-chip.scope{color:var(--v5-cyan);background:rgba(var(--v5-cyan-rgb),.08);border-color:rgba(var(--v5-cyan-rgb),.24);}
.dark .v5-mm-chip.scope{background:rgba(var(--v5-cyan-rgb),.06);border-color:rgba(var(--v5-cyan-rgb),.22);}

.v5-mm-sv-grid{display:grid;grid-template-columns:clamp(180px,18vw,260px) minmax(0,1fr);
  gap:clamp(1rem,2vw,2rem);padding:clamp(1rem,1.6vw,1.5rem) 0;
  border-bottom:1px solid var(--v5-mm-border-2);}
.v5-mm-sv-grid:last-of-type{border-bottom:none;}
.v5-mm-sv-side h4{margin:0 0 .35rem;font-size:.9rem;font-weight:700;letter-spacing:-.015em;color:var(--v5-mm-text);}
.v5-mm-sv-side p{margin:0;font-size:.7rem;color:var(--v5-mm-text-muted);line-height:1.55;}
.v5-mm-sv-fields{display:flex;flex-direction:column;gap:.85rem;max-width:720px;}
.v5-mm-sv-row{display:flex;flex-direction:column;gap:.35rem;}
.v5-mm-sv-row label{font-size:.68rem;color:var(--v5-mm-text-sec);font-weight:600;letter-spacing:-.005em;}
.v5-mm-sv-row label .req{color:var(--v5-mm-red);}
.v5-mm-sv-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
@media(max-width:640px){.v5-mm-sv-row-2{grid-template-columns:1fr;}}
.v5-mm-sv-row .help{font-size:.64rem;color:var(--v5-mm-text-muted);line-height:1.5;}

.v5-mm-inp{width:100%;height:36px;padding:0 .85rem;border:1px solid var(--v5-mm-border);border-radius:8px;
  background:var(--v5-mm-panel);color:var(--v5-mm-text);font-size:.78rem;font-family:inherit;outline:none;transition:all .15s;}
.dark .v5-mm-inp{background:var(--v5-mm-sunk);}
.v5-mm-inp:focus{border-color:var(--v5-mm-accent);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.14);}
.dark .v5-mm-inp:focus{box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.2);}
.v5-mm-inp[readonly]{background:var(--v5-mm-sunk);color:var(--v5-mm-text-muted);}
textarea.v5-mm-inp{height:auto;min-height:72px;padding:.55rem .85rem;resize:vertical;line-height:1.55;}
select.v5-mm-inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239998ad' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .65rem center;background-size:12px;}

.v5-mm-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border);width:fit-content;}
.v5-mm-seg button{padding:.45rem .9rem;border:none;border-radius:6px;background:transparent;color:var(--v5-mm-text-muted);
  font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem;}
.v5-mm-seg button.on{background:var(--v5-mm-panel);color:var(--v5-mm-text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.v5-mm-seg button.on svg{color:var(--v5-mm-accent);}
.v5-mm-seg button svg{width:13px;height:13px;}

.v5-mm-tg{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;height:36px;padding:0 .85rem;
  border:1px solid var(--v5-mm-border);border-radius:8px;background:var(--v5-mm-panel);}
.dark .v5-mm-tg{background:var(--v5-mm-sunk);}
.v5-mm-tg .sw{width:38px;height:22px;border-radius:999px;background:var(--v5-mm-faint);position:relative;transition:background .2s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.v5-mm-tg .sw::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;
  transition:left .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2);}
.v5-mm-tg.on .sw{background:var(--v5-mm-accent);}
.v5-mm-tg.on .sw::after{left:18px;}
.v5-mm-tg .lbl{font-size:.76rem;color:var(--v5-mm-text-sec);font-weight:500;}
.v5-mm-tg.on .lbl{color:var(--v5-mm-text);font-weight:600;}

.v5-mm-sv-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:1.2rem 0 .5rem;margin-top:1rem;border-top:1px solid var(--v5-mm-border);}
.v5-mm-unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--v5-mm-amber);font-weight:600;margin-right:.35rem;}
.v5-mm-unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--v5-mm-amber);animation:v5-mm-pulse 1.6s ease-in-out infinite;}
@keyframes v5-mm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

.v5-mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:34px;padding:0 1rem;border-radius:8px;border:1px solid var(--v5-mm-border);
  background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);font-family:inherit;font-size:.74rem;font-weight:600;
  cursor:pointer;transition:all .15s;outline:none;}
.v5-mm-btn:hover{border-color:var(--v5-mm-text-muted);color:var(--v5-mm-text);}
.v5-mm-btn svg{width:13px;height:13px;}
.v5-mm-btn.primary{background:var(--v5-mm-accent);color:white;border-color:var(--v5-mm-accent);
  box-shadow:0 2px 6px -1px rgba(var(--v5-primary-rgb),.35),inset 0 1px 0 rgba(255,255,255,.22);}
.v5-mm-btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;transform:translateY(-1px);
  box-shadow:0 4px 12px -2px rgba(var(--v5-primary-rgb),.4);}
.dark .v5-mm-btn.primary{color:var(--v5-mm-bg);}
.dark .v5-mm-btn.primary:hover{background:#b8b2ff;border-color:#b8b2ff;color:var(--v5-mm-bg);}
.v5-mm-btn.danger{color:var(--v5-mm-red);}
.v5-mm-btn.danger:hover{border-color:var(--v5-mm-red);background:rgba(var(--v5-red-rgb),.05);}
.v5-mm-btn.sm{height:28px;padding:0 .7rem;font-size:.66rem;}

/* Overview stats */
.v5-mm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem;}
.v5-mm-stat{padding:.7rem .8rem;border-radius:9px;background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);}
.v5-mm-stat-lbl{font-size:.52rem;font-weight:800;color:var(--v5-mm-text-muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;}
.v5-mm-stat-val{display:flex;align-items:baseline;gap:.35rem;}
.v5-mm-stat-val .n{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--v5-mm-text);font-variant-numeric:tabular-nums;}
.v5-mm-stat-val .n.ok{color:var(--v5-mm-green);}
.v5-mm-stat-val .n.off{color:var(--v5-mm-text-muted);}
.v5-mm-stat-val .u{font-size:.58rem;color:var(--v5-mm-text-muted);font-weight:500;}

/* Activity list */
.v5-mm-act-list{background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);border-radius:10px;overflow:hidden;}
.v5-mm-act{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-bottom:1px solid var(--v5-mm-border-2);font-size:.72rem;}
.v5-mm-act:last-child{border-bottom:none;}
.v5-mm-act-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);border:1px solid var(--v5-mm-border-2);flex-shrink:0;}
.v5-mm-act-ico svg{width:12px;height:12px;}
.v5-mm-act-ico.edit{color:var(--v5-mm-accent);background:rgba(var(--v5-primary-rgb),.08);border-color:rgba(var(--v5-primary-rgb),.18);}
.v5-mm-act-ico.add{color:var(--v5-mm-green);background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.2);}
.v5-mm-act-ico.del{color:var(--v5-mm-red);background:rgba(var(--v5-red-rgb),.08);border-color:rgba(var(--v5-red-rgb),.2);}
.v5-mm-act-body{flex:1;min-width:0;}
.v5-mm-act-title{color:var(--v5-mm-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.v5-mm-act-title b{font-weight:600;}
.v5-mm-act-meta{font-size:.58rem;color:var(--v5-mm-text-muted);margin-top:.1rem;font-family:'JetBrains Mono',monospace;}
.v5-mm-act-time{font-size:.58rem;color:var(--v5-mm-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;}

/* Empty state */
.v5-mm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:4rem 1rem;color:var(--v5-mm-text-muted);font-size:.75rem;text-align:center;}
.v5-mm-empty svg{width:40px;height:40px;opacity:.35;}

/* ==== Responsive breakpoints ==== */
@media(max-width:1280px){
  .v5-mm-sv-grid{grid-template-columns:minmax(0,1fr);gap:.9rem;}
  .v5-mm-sv-side{padding-bottom:.15rem;}
  .v5-mm-sv-side h4{font-size:.82rem;}
  .v5-mm-sv-side p{font-size:.66rem;}
}
@media(max-width:1100px){
  .v5-mm{grid-template-columns:clamp(200px,18vw,260px) clamp(280px,26vw,360px) minmax(0,1fr);}
  .v5-mm-stats{grid-template-columns:repeat(2,1fr);}
  .v5-mm-sv-hero-info h2{font-size:1.2rem;}
}
@media(max-width:900px){
  .v5-mm{grid-template-columns:minmax(220px,30vw) minmax(0,1fr);}
  .v5-mm-col-scope{display:none;}
  .v5-mm-col-scope.mobile-on{display:flex;}
}
@media(max-width:720px){
  .v5-mm{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;}
  .v5-mm-col{max-height:none;border-right:none;border-bottom:1px solid var(--v5-mm-border);}
  .v5-mm-col-scope{display:flex;}
  .v5-mm-col-scope .v5-mm-scope-list{flex-direction:row;padding:.5rem .6rem;overflow-x:auto;}
  .v5-mm-col-scope .v5-mm-scope{min-width:160px;flex-shrink:0;}
  .v5-mm-col-tree{max-height:40vh;}
  .v5-mm-col-detail{border-bottom:none;}
  .v5-mm-stats{grid-template-columns:1fr 1fr;}
  .v5-mm-sv-hero-top{flex-direction:column;align-items:flex-start;}
  .v5-mm-sv-hero-info h2{font-size:1.1rem;flex-wrap:wrap;}
  .v5-mm-vt{padding:.5rem .75rem;}
  .v5-mm-sv-ft{flex-direction:column;align-items:stretch;gap:.5rem;}
  .v5-mm-sv-ft > div{justify-content:space-between;}
}

/* ===== SETTINGS MODAL ===== */
.settings-section{display:flex;flex-direction:column;gap:.55rem;padding:.5rem 0;}
.settings-section + .settings-section{border-top:1px solid var(--v5-border-subtle);padding-top:1rem;}
.settings-label{font-size:.62rem;font-weight:700;color:var(--v5-text-muted);
  text-transform:uppercase;letter-spacing:.08em;}

/* 모드 토글 (라이트/다크) */
.settings-mode-row{display:flex;gap:.45rem;}
.settings-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .8rem;border-radius:10px;border:1px solid var(--v5-border);
  background:var(--v5-surface-solid);color:var(--v5-text-sec);cursor:pointer;
  font-size:.72rem;font-weight:500;font-family:inherit;
  transition:all .2s var(--v5-ease-move);}
.settings-mode-btn:hover{color:var(--v5-text);border-color:var(--v5-primary);}
.settings-mode-btn.on{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.12),rgba(var(--v5-primary-rgb),.05));
  color:var(--v5-primary);border-color:rgba(var(--v5-primary-rgb),.35);
  box-shadow:var(--v5-glow-sm);font-weight:600;}

/* 색상 스와치 그리드 */
.settings-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;}
.settings-color-swatch{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.55rem .35rem;border-radius:10px;border:1px solid transparent;
  background:transparent;cursor:pointer;font-family:inherit;
  transition:all .2s cubic-bezier(.4,0,.2,1);}
.settings-color-swatch:hover{background:var(--v5-surface-hover);border-color:var(--v5-glass-border);}
.settings-color-swatch.on{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.1),rgba(var(--v5-primary-rgb),.04));
  border-color:rgba(var(--v5-primary-rgb),.35);box-shadow:var(--v5-glow-sm);}
.swatch-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:white;box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s cubic-bezier(.16,1,.3,1);}
.settings-color-swatch:hover .swatch-circle{transform:scale(1.08);}
.settings-color-swatch.on .swatch-circle{transform:scale(1.05);box-shadow:0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);}
.swatch-label{font-size:.6rem;font-weight:500;color:var(--v5-text-sec);}
.settings-color-swatch.on .swatch-label{color:var(--v5-primary);font-weight:600;}

@media(max-width:480px){
  .settings-color-grid{grid-template-columns:repeat(3,1fr);}
}

/* ===== 컬러 테마 변경 — 절제된 클릭 피드백 =====
   화면으로 퍼지는 큰 ring/glow 는 과하므로 스와치 주변 ~80px 안에서만 짧게 끝남.
   메인 효과는 View Transitions cross-fade(전체 색 부드러운 보간) 가 담당. */
.v5-color-burst{
  position:fixed;pointer-events:none;z-index:9999;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  --burst-color:rgb(var(--v5-primary-rgb));
}
.v5-color-burst::before,
.v5-color-burst::after{
  content:'';position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);
}
/* 작은 글로우 — 스와치 바로 주변만 살짝 빛남 */
.v5-color-burst::before{
  width:80px;height:80px;
  background:radial-gradient(circle,var(--burst-color) 0%,transparent 70%);
  opacity:0;
  animation:v5-burst-glow .65s cubic-bezier(.16,1,.3,1) forwards;
}
/* inner pulse — 짧은 반짝임 */
.v5-color-burst::after{
  width:16px;height:16px;
  background:var(--burst-color);
  box-shadow:0 0 12px var(--burst-color);
  opacity:.85;
  animation:v5-burst-pulse .45s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes v5-burst-glow{
  0%   {transform:translate(-50%,-50%) scale(.3);opacity:.55;}
  100% {transform:translate(-50%,-50%) scale(1.4);opacity:0;}
}
@keyframes v5-burst-pulse{
  0%   {transform:translate(-50%,-50%) scale(.4);opacity:.85;}
  100% {transform:translate(-50%,-50%) scale(1.8);opacity:0;}
}

/* 선택된 스와치 — 클릭 직후 1회 부드러운 bounce (무한 펄스 X) */
@keyframes v5-swatch-bounce{
  0%   {transform:scale(1.05);}
  35%  {transform:scale(1.22);}
  70%  {transform:scale(1.0);}
  100% {transform:scale(1.05);}
}
.settings-color-swatch.on .swatch-circle{
  animation:v5-swatch-bounce .55s cubic-bezier(.34,1.4,.64,1) both;}

/* ===== 컬러 변경 시 — 색깔 들어간 요소들이 자기 자리에서 entrance 재생 =====
   글로벌 화면 효과 X. primary/cyan 색을 쓰는 요소들이 각자 짧게 fade+scale 로 다시 나타남.
   클릭 위치에서 가까운 요소부터 시간차(stagger) 로 일어나도록 자연스럽게 정렬되진 않지만
   동시 재생만으로도 "색깔 부분이 다시 그려진" 인상이 충분히 남.
   v5-color-burst 는 클릭한 스와치 자체의 클릭 피드백으로 유지. */

/* 살짝 scale 만 — opacity 변동 안 줘서 깜빡임 없음. 색은 즉시 swap, 요소만 살짝 "맥동" */
@keyframes v5-color-refresh{
  0%   {transform:scale(.96);}
  60%  {transform:scale(1.03);}
  100% {transform:scale(1);}
}
/* transform 부적절한 텍스트/배지 — 미세 saturate 펄스로 색이 한번 진해졌다 정상 */
@keyframes v5-color-refresh-sat{
  0%   {filter:saturate(1);}
  40%  {filter:saturate(1.6);}
  100% {filter:saturate(1);}
}

html.vt-color-changing .v5-hdr-logo,
html.vt-color-changing .v5-avatar,
html.vt-color-changing .v5-admin-badge,
html.vt-color-changing .v5-noti-dot.info,
html.vt-color-changing .swatch-circle{
  animation:v5-color-refresh-sat .6s cubic-bezier(.4,0,.2,1) both;}

html.vt-color-changing .v5-pill button.on,
html.vt-color-changing .v5-si.on,
html.vt-color-changing .v5-tab.on,
html.vt-color-changing .settings-mode-btn.on,
html.vt-color-changing .settings-color-swatch.on,
html.vt-color-changing .v5-bell,
html.vt-color-changing .v5-admin-btn{
  animation:v5-color-refresh .55s cubic-bezier(.34,1.4,.64,1) both;}

/* ===== Header separator (v5 redesign 2026-04-22) ===== */
.v5-hdr-sep{display:inline-block;width:1px;height:18px;background:var(--v5-border);margin:0 .35rem;flex-shrink:0;opacity:.7;}