gbpark
15c74ae26c
Build & Deploy to K8s / build-and-deploy (push) Successful in 4m0s
- 패널/카드 배경을 솔리드 흰색으로 변경 - 캔버스/카드/보더 대비 강화 - v5 본문 라벤더 그라데이션 제거, 흰색 + 우측 보더 분리 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1449 lines
82 KiB
CSS
1449 lines
82 KiB
CSS
/* ===================================================================
|
||
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.60rem; /* labels, table headers, chips */
|
||
--v5-fs-caption-lg:0.68rem;
|
||
--v5-fs-body-sm:0.72rem; /* table rows */
|
||
--v5-fs-body:0.78rem; /* default body */
|
||
--v5-fs-body-lg:0.85rem; /* max body */
|
||
--v5-fs-h3:0.92rem;
|
||
--v5-fs-h2:1.00rem;
|
||
--v5-fs-h1:1.12rem; /* page/section title */
|
||
--v5-fs-display:1.60rem; /* 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:.72rem;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:.5rem .7rem;border-radius:10px;font-size:.77rem;color:var(--v5-text-sec);cursor:pointer;
|
||
transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:450;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;}
|