johngreen
d306ac2865
Build & Deploy to K8s / build-and-deploy (push) Successful in 6m43s
오늘 시리즈 후속 UX 다듬기 + 회귀 fix:
1) ColumnDetailPanel: dropdown key 중복 방어
- codeInfoOptions 에 placeholder "none" + 데이터 "none" 중복 시 React 가 'two children
with the same key, none' 으로 거부 → filter 로 사전 제거.
- refTableOpts 도 referenceTableOptions/tables 어디서든 중복 들어오면 같은 증상 →
Set 기반 dedupe.
2) ColumnDetailPanel: hook 순서 위반 수정
- 기존 'if (!column) return null' 이 useMemo(refTableOpts) 앞에 있어서
column null/존재 케이스마다 hook 호출 수가 달라짐 (Rules of Hooks 위반).
overlay 패턴 도입 후 column null 케이스가 자주 들어오면서 드러남.
- early return 을 모든 hook 뒤로 이동.
3) v5-layout.css 탭바: Chrome 식 outline 스타일
- 비활성 탭도 각자 outline 보이게 (border:1px solid var(--v5-border))로 카드처럼 분리.
- 활성 탭은 border + surface-hover 배경 + 위쪽 primary 1px inset 강조선.
- 위 모서리 rounded, margin-bottom:-1px 로 탭바 하단 border 와 seamless 연결.
4) 좌측 테이블 list 폰트 사이즈 축소
- 한글명 16px → 13px, 영문명 12px → 10.5px, 행 padding 7px → 6px.
- 280px 좁은 패널에 맞는 컴팩트 비율로 v5 컨벤션 정렬.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1803 lines
114 KiB
CSS
1803 lines
114 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.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:#0a0b0d; --v5-bg-subtle:#111215;
|
||
--v5-surface:rgba(23,24,27,0.5); --v5-surface-solid:#17181b;
|
||
--v5-surface-hover:#1f2025;
|
||
--v5-text:#ebecee; --v5-text-sec:#8e8f92; --v5-text-muted:#5a5b5e;
|
||
--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(255,255,255,0.08); --v5-border-subtle:rgba(255,255,255,0.04);
|
||
--v5-glass:rgba(23,24,27,0.45); --v5-glass-strong:rgba(23,24,27,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;
|
||
--primary:217 91% 60%; --ring:217 91% 60%; --sidebar-primary:217 91% 60%; --sidebar-ring:217 91% 60%;}
|
||
html.dark[data-color="blue"]{
|
||
--v5-primary-rgb:147,197,253; --v5-cyan-rgb:125,211,252; --v5-pink-rgb:129,140,248;
|
||
--primary:213 93% 78%; --ring:213 93% 78%; --sidebar-primary:213 93% 78%; --sidebar-ring:213 93% 78%;}
|
||
|
||
/* --- GREEN --- */
|
||
html[data-color="green"]{
|
||
--v5-primary-rgb:16,185,129; --v5-cyan-rgb:20,184,166; --v5-pink-rgb:132,204,22;
|
||
--primary:160 84% 39%; --ring:160 84% 39%; --sidebar-primary:160 84% 39%; --sidebar-ring:160 84% 39%;}
|
||
html.dark[data-color="green"]{
|
||
--v5-primary-rgb:110,231,183; --v5-cyan-rgb:94,234,212; --v5-pink-rgb:190,242,100;
|
||
--primary:156 73% 67%; --ring:156 73% 67%; --sidebar-primary:156 73% 67%; --sidebar-ring:156 73% 67%;}
|
||
|
||
/* --- ORANGE --- */
|
||
html[data-color="orange"]{
|
||
--v5-primary-rgb:249,115,22; --v5-cyan-rgb:6,182,212; --v5-pink-rgb:251,146,60;
|
||
--primary:25 95% 53%; --ring:25 95% 53%; --sidebar-primary:25 95% 53%; --sidebar-ring:25 95% 53%;}
|
||
html.dark[data-color="orange"]{
|
||
--v5-primary-rgb:253,186,116; --v5-cyan-rgb:103,232,249; --v5-pink-rgb:252,165,165;
|
||
--primary:32 97% 72%; --ring:32 97% 72%; --sidebar-primary:32 97% 72%; --sidebar-ring:32 97% 72%;}
|
||
|
||
/* --- PINK --- */
|
||
html[data-color="pink"]{
|
||
--v5-primary-rgb:236,72,153; --v5-cyan-rgb:168,85,247; --v5-pink-rgb:244,114,182;
|
||
--primary:330 81% 60%; --ring:330 81% 60%; --sidebar-primary:330 81% 60%; --sidebar-ring:330 81% 60%;}
|
||
html.dark[data-color="pink"]{
|
||
--v5-primary-rgb:244,114,182; --v5-cyan-rgb:192,132,252; --v5-pink-rgb:249,168,212;
|
||
--primary:330 86% 70%; --ring:330 86% 70%; --sidebar-primary:330 86% 70%; --sidebar-ring:330 86% 70%;}
|
||
|
||
/* --- CYAN --- */
|
||
html[data-color="cyan"]{
|
||
--v5-primary-rgb:8,145,178; --v5-cyan-rgb:14,165,233; --v5-pink-rgb:6,182,212;
|
||
--primary:191 91% 36%; --ring:191 91% 36%; --sidebar-primary:191 91% 36%; --sidebar-ring:191 91% 36%;}
|
||
html.dark[data-color="cyan"]{
|
||
--v5-primary-rgb:125,211,252; --v5-cyan-rgb:103,232,249; --v5-pink-rgb:165,243,252;
|
||
--primary:200 94% 74%; --ring:200 94% 74%; --sidebar-primary:200 94% 74%; --sidebar-ring:200 94% 74%;}
|
||
|
||
/* --- PURPLE (기본) — 사이트 :root 토큰을 그대로 쓰지만 명시적으로 매핑해서
|
||
다른 preset → purple 로 돌아갈 때 이전 값이 남지 않게 */
|
||
html[data-color="purple"]{
|
||
--primary:245 75% 57%; --ring:245 75% 57%; --sidebar-primary:245 75% 57%; --sidebar-ring:245 75% 57%;}
|
||
html.dark[data-color="purple"]{
|
||
--primary:245 85% 68%; --ring:245 85% 68%; --sidebar-primary:245 85% 68%; --sidebar-ring:245 85% 68%;}
|
||
|
||
/* ===== 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;
|
||
}
|
||
.v5-admin-mode .v5-hdr-icon.v5-mode-toggle{
|
||
color:var(--v5-primary);
|
||
background:rgba(var(--v5-primary-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-primary);background:rgba(var(--v5-primary-rgb),.10);}
|
||
.v5-admin-mode .v5-admin-btn:hover{color:var(--v5-primary);background:rgba(var(--v5-primary-rgb),.16);}
|
||
.v5-admin-mode .v5-admin-btn .v5-admin-label{color:var(--v5-primary);}
|
||
|
||
/* 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),.14),rgba(var(--v5-primary-rgb),.06));
|
||
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),.14),rgba(var(--v5-primary-rgb),.06));
|
||
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-primary);
|
||
box-shadow:0 0 8px var(--v5-primary-glow);animation:v5-bdPulse 2s infinite;}
|
||
@keyframes v5-bdPulse{0%,100%{box-shadow:0 0 4px var(--v5-primary-glow)}50%{box-shadow:0 0 12px var(--v5-primary-glow)}}
|
||
|
||
/* ===== SOLID TABS ===== */
|
||
.v5-tabs{height:36px;display:flex;align-items:stretch;padding:4px .5rem 0;gap:2px;overflow-x:auto;
|
||
background:var(--v5-surface-solid);
|
||
border-bottom:1px solid var(--v5-border);position:relative;z-index:15;flex-shrink:0;
|
||
scrollbar-width:none;-ms-overflow-style:none;}
|
||
.v5-tabs::-webkit-scrollbar{display:none;}
|
||
/* Chrome 식 outline 탭: 비활성도 카드처럼 각각 outline. 활성 탭은 본문과 seamless + primary 강조선 */
|
||
.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;white-space:nowrap;transition:color .15s,border-color .15s,background .15s;
|
||
border:1px solid var(--v5-border);border-radius:8px 8px 0 0;margin-bottom:-1px;}
|
||
.v5-tab:hover{color:var(--v5-text-sec);background:var(--v5-surface-hover);}
|
||
.v5-tab.on{color:var(--v5-primary);font-weight:600;
|
||
border-color:var(--v5-border);border-bottom-color:var(--v5-surface-hover);
|
||
background:var(--v5-surface-hover);box-shadow:0 -1px 0 var(--v5-primary) inset;}
|
||
.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;}
|
||
.v5-side.collapsed .v5-side-toggle{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;}
|
||
.v5-side.collapsed .v5-si:nth-child(9){animation-delay:.40s;}
|
||
.v5-side.collapsed .v5-si:nth-child(10){animation-delay:.44s;}
|
||
.v5-side.collapsed .v5-si:nth-child(11){animation-delay:.48s;}
|
||
.v5-side.collapsed .v5-si:nth-child(12){animation-delay:.52s;}
|
||
.v5-side.collapsed .v5-si:nth-child(13){animation-delay:.56s;}
|
||
.v5-side.collapsed .v5-si:nth-child(14){animation-delay:.60s;}
|
||
.v5-side.collapsed .v5-si:nth-child(15){animation-delay:.64s;}
|
||
.v5-side.collapsed .v5-si:nth-child(16){animation-delay:.68s;}
|
||
.v5-side.collapsed .v5-si:nth-child(17){animation-delay:.72s;}
|
||
.v5-side.collapsed .v5-si:nth-child(18){animation-delay:.76s;}
|
||
.v5-side.collapsed .v5-si:nth-child(19){animation-delay:.80s;}
|
||
.v5-side.collapsed .v5-si:nth-child(20){animation-delay:.84s;}
|
||
@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;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(9){animation-delay:.29s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(10){animation-delay:.32s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(11){animation-delay:.35s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(12){animation-delay:.38s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(13){animation-delay:.41s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(14){animation-delay:.44s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(15){animation-delay:.47s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(16){animation-delay:.50s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(17){animation-delay:.53s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(18){animation-delay:.56s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(19){animation-delay:.59s;}
|
||
.v5-side:not(.collapsed) .v5-si:nth-child(20){animation-delay:.62s;}
|
||
@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;}
|
||
.v5-side-flyout .fly-item:nth-child(8){animation-delay:.21s;}
|
||
.v5-side-flyout .fly-item:nth-child(9){animation-delay:.24s;}
|
||
.v5-side-flyout .fly-item:nth-child(10){animation-delay:.27s;}
|
||
.v5-side-flyout .fly-item:nth-child(11){animation-delay:.30s;}
|
||
.v5-side-flyout .fly-item:nth-child(12){animation-delay:.33s;}
|
||
.v5-side-flyout .fly-item:nth-child(13){animation-delay:.36s;}
|
||
.v5-side-flyout .fly-item:nth-child(14){animation-delay:.39s;}
|
||
.v5-side-flyout .fly-item:nth-child(15){animation-delay:.42s;}
|
||
.v5-side-flyout .fly-item:nth-child(16){animation-delay:.45s;}
|
||
.v5-side-flyout .fly-item:nth-child(17){animation-delay:.48s;}
|
||
.v5-side-flyout .fly-item:nth-child(18){animation-delay:.51s;}
|
||
.v5-side-flyout .fly-item:nth-child(19){animation-delay:.54s;}
|
||
.v5-side-flyout .fly-item:nth-child(20){animation-delay:.57s;}
|
||
@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-primary-rgb),.12),rgba(var(--v5-primary-rgb),.05));
|
||
color:var(--v5-primary);border-color:rgba(var(--v5-primary-rgb),.2);}
|
||
.v5-admin-side .v5-si.on .ic{opacity:1;}
|
||
.v5-admin-side .v5-si::before{background:var(--v5-primary);}
|
||
.dark .v5-admin-side .v5-si.on{background:linear-gradient(135deg,rgba(var(--v5-primary-rgb),.12),rgba(var(--v5-primary-rgb),.05));
|
||
border-color:rgba(var(--v5-primary-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-primary),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 ===== */
|
||
.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-primary-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-primary-rgb),0) 15%,
|
||
rgba(var(--v5-primary-rgb),.95) 50%,
|
||
rgba(var(--v5-primary-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:flex;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
|
||
background:transparent;color:var(--v5-text-sec);cursor:pointer;
|
||
align-items:center;justify-content:center;transition:all .2s var(--v5-ease-move);flex-shrink:0;}
|
||
.v5-mobile-toggle:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
|
||
|
||
.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-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:rgb(var(--v5-primary-rgb));
|
||
--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-surface-solid(#17181b) 와 톤 맞춤.
|
||
보라빛은 제거하고 테마색은 accent-* 토큰으로만 은은히 들어옴. */
|
||
--v5-mm-bg:#0a0a0c;
|
||
--v5-mm-panel:#161618;
|
||
--v5-mm-sunk:#111113;
|
||
--v5-mm-hover:#1c1c1f;
|
||
--v5-mm-faint:#4a4a4e;
|
||
--v5-mm-border:#26262a;
|
||
--v5-mm-border-2:#1c1c20;
|
||
--v5-mm-text:#f2f2f4;
|
||
--v5-mm-text-sec:#a5a5ac;
|
||
--v5-mm-text-muted:#72727a;
|
||
--v5-mm-accent:rgb(var(--v5-primary-rgb));
|
||
--v5-mm-accent-soft:rgba(var(--v5-primary-rgb),.09);
|
||
--v5-mm-accent-line:rgba(var(--v5-primary-rgb),.22);
|
||
--v5-mm-ring:rgba(var(--v5-primary-rgb),.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:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
|
||
color:var(--v5-mm-text-muted);flex-shrink:0;border-radius:6px;transition:all .1s;margin:-4px 0;}
|
||
.v5-mm-caret:hover{background:var(--v5-mm-hover);color:var(--v5-mm-text);}
|
||
.dark .v5-mm-caret:hover{background:rgba(255,255,255,.06);}
|
||
.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:28px;height:28px;border-radius:8px;}
|
||
.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;}
|
||
/* 가로 stub — 세로선은 .v5-mm-sub 컨테이너가 통합으로 그려 노드 간 끊김 없음 */
|
||
.v5-mm-node.l2::after{content:'';position:absolute;left:1.4rem;top:50%;width:.7rem;height:1px;background:var(--v5-mm-border);}
|
||
.v5-mm-node.l3::after{content:'';position:absolute;left:2.5rem;top:50%;width:.7rem;height:1px;background:var(--v5-mm-border);}
|
||
.dark .v5-mm-node.l2::after,
|
||
.dark .v5-mm-node.l3::after{background:rgba(255,255,255,.22);}
|
||
|
||
/* 서브트리 — grid-template-rows 트릭으로 펼침/접힘 양방향 애니메이션 */
|
||
.v5-mm-sub{
|
||
display:grid;grid-template-rows:0fr;opacity:0;position:relative;
|
||
transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;
|
||
}
|
||
.v5-mm-sub.is-open{grid-template-rows:1fr;opacity:1;}
|
||
.v5-mm-sub > .v5-mm-sub-inner{overflow:hidden;min-height:0;}
|
||
|
||
/* 통합 세로선 — L2 기본, 중첩 시 L3 들여쓰기 */
|
||
.v5-mm-sub::before{
|
||
content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;
|
||
background:var(--v5-mm-border-2);pointer-events:none;
|
||
}
|
||
.v5-mm-sub .v5-mm-sub::before{left:2.5rem;}
|
||
.dark .v5-mm-sub::before{background:rgba(255,255,255,.18);}
|
||
|
||
/* 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;}
|
||
|
||
/* MenuIconPicker 슬롯 — 내부 shadcn Button(h-10=40px) 을 v5-mm-inp 높이(36px) 로 정렬 */
|
||
.v5-mm-iconpicker-slot > .space-y-2{margin-top:0;}
|
||
.v5-mm-iconpicker-slot .menu-icon-picker-trigger{
|
||
height:36px!important;min-height:36px!important;
|
||
border-radius:8px!important;font-size:.78rem!important;
|
||
}
|
||
.v5-mm-iconpicker-slot .menu-icon-picker-option{
|
||
height:auto!important;min-height:68px!important;
|
||
border-radius:8px!important;font-size:inherit!important;
|
||
}
|
||
.v5-mm-iconpicker-slot .menu-icon-picker-option svg{
|
||
width:20px;height:20px;flex-shrink:0;
|
||
}
|
||
|
||
.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:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);
|
||
border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);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:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);
|
||
border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);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;}
|
||
|
||
|
||
/* ===================================================================
|
||
V5 NUMBERING RULE MANAGEMENT (v5-nrm-*) — 통짜 작업대 레이아웃
|
||
채번 = 독립 자원 · 컬럼 N:M 연결 · 카드 X · 통짜 + 2-col split
|
||
=================================================================== */
|
||
/* .v5-nrm 자체에는 background 안 깔아서 body 의 .dark radial-gradient (globals.css) 가 비치게 둠.
|
||
sidebar 와 main 만 surface-solid 로 깔고, 헤더 영역은 투명 → 테마 컬러가 자연스럽게 헤더에 비침. */
|
||
.v5-nrm{display:flex;flex-direction:column;height:100%;overflow:hidden;}
|
||
.v5-nrm-body{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr;overflow:hidden;}
|
||
|
||
/* ── 좌측 sidebar ── */
|
||
.v5-nrm-side{border-right:1px solid var(--v5-border);background:var(--v5-surface-solid);display:flex;flex-direction:column;overflow:hidden;}
|
||
.v5-nrm-side-srch{position:relative;padding:.55rem .65rem;border-bottom:1px solid var(--v5-border);}
|
||
.v5-nrm-side-srch input{width:100%;height:30px;padding:0 2rem 0 1.85rem;background:var(--v5-bg-subtle);border:1px solid var(--v5-border);border-radius:6px;color:var(--v5-text);font-size:.72rem;outline:none;font-family:inherit;}
|
||
.v5-nrm-side-srch input:focus{border-color:var(--v5-primary);background:var(--v5-surface-solid);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.12);}
|
||
.v5-nrm-side-srch > svg{position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);color:var(--v5-text-muted);width:12px;height:12px;}
|
||
.v5-nrm-side-srch .kbd-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:.55rem;color:var(--v5-text-muted);padding:1px 5px;background:var(--v5-surface-solid);border:1px solid var(--v5-border);border-radius:3px;}
|
||
.v5-nrm-side-filters{display:flex;gap:3px;padding:.45rem .65rem;border-bottom:1px solid var(--v5-border);overflow-x:auto;}
|
||
.v5-nrm-filt{padding:3px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--v5-text-sec);font-size:.62rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:all .12s;font-family:inherit;}
|
||
.v5-nrm-filt:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
|
||
.v5-nrm-filt.on{background:rgba(var(--v5-primary-rgb),.08);color:var(--v5-primary);}
|
||
.v5-nrm-filt b{color:var(--v5-text);font-weight:700;}
|
||
.v5-nrm-filt.on b{color:var(--v5-primary);}
|
||
.v5-nrm-side-section{font-family:'JetBrains Mono',monospace;font-size:.54rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.65rem .85rem .25rem;display:flex;justify-content:space-between;}
|
||
.v5-nrm-side-list{flex:1;overflow-y:auto;}
|
||
.v5-nrm-item{display:grid;grid-template-columns:28px 1fr auto;gap:.55rem;align-items:center;padding:.55rem .85rem;cursor:pointer;transition:background .12s;position:relative;border-bottom:1px solid rgba(var(--v5-primary-rgb),.06);}
|
||
.v5-nrm-item:hover{background:var(--v5-surface-hover);}
|
||
.v5-nrm-item.on{background:rgba(var(--v5-primary-rgb),.06);}
|
||
.v5-nrm-item.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--v5-primary);}
|
||
.v5-nrm-item .v5-nrm-tone{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||
.v5-nrm-item .v5-nrm-tone svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.75;}
|
||
.v5-nrm-item-body{min-width:0;}
|
||
.v5-nrm-item-name{font-size:.76rem;font-weight:600;color:var(--v5-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:1px;}
|
||
.v5-nrm-item.on .v5-nrm-item-name{color:var(--v5-primary);font-weight:700;}
|
||
.v5-nrm-item-pat{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-item-pat .pfx{color:var(--v5-cyan);}
|
||
.v5-nrm-item-pat .seq{color:var(--v5-pink);}
|
||
.v5-nrm-item-right{text-align:right;font-family:'JetBrains Mono',monospace;font-size:.55rem;color:var(--v5-text-muted);display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
|
||
.v5-nrm-item-right .cnt{color:var(--v5-cyan);font-weight:700;font-size:.58rem;}
|
||
.v5-nrm-dot{width:6px;height:6px;background:rgb(var(--v5-green-rgb));border-radius:50%;}
|
||
.v5-nrm-dot.live{animation:v5-nrm-pulse 1.6s ease-in-out infinite;}
|
||
.v5-nrm-dot.warn{background:rgb(var(--v5-amber-rgb));}
|
||
.v5-nrm-dot.off{background:var(--v5-text-muted);opacity:.4;}
|
||
@keyframes v5-nrm-pulse{0%,100%{opacity:1;}50%{opacity:.35;transform:scale(.88);}}
|
||
.v5-nrm-side-foot{padding:.5rem .65rem;border-top:1px solid var(--v5-border);display:flex;gap:.3rem;}
|
||
|
||
/* tone colors */
|
||
.v5-nrm-tone{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
|
||
.v5-nrm-tone svg{display:block;}
|
||
.v5-nrm-tone.primary{background:rgba(var(--v5-primary-rgb),.12);color:var(--v5-primary);}
|
||
.v5-nrm-tone.cyan{background:rgba(var(--v5-cyan-rgb),.12);color:rgb(var(--v5-cyan-rgb));}
|
||
.v5-nrm-tone.pink{background:rgba(var(--v5-pink-rgb),.14);color:rgb(var(--v5-pink-rgb));}
|
||
.v5-nrm-tone.green{background:rgba(var(--v5-green-rgb),.12);color:rgb(var(--v5-green-rgb));}
|
||
.v5-nrm-tone.amber{background:rgba(var(--v5-amber-rgb),.18);color:rgb(var(--v5-amber-rgb));}
|
||
.v5-nrm-tone.red{background:rgba(var(--v5-red-rgb),.12);color:rgb(var(--v5-red-rgb));}
|
||
.v5-nrm-tone.muted{background:var(--v5-bg-subtle);color:var(--v5-text-muted);}
|
||
|
||
/* ── 우측 main (통짜) ── */
|
||
.v5-nrm-main{overflow-y:auto;background:var(--v5-surface-solid);position:relative;}
|
||
|
||
/* HERO (통짜, 카드 X) */
|
||
.v5-nrm-hero{padding:1rem 1.5rem 1.1rem;border-bottom:1px solid var(--v5-border);position:relative;}
|
||
.v5-nrm-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgb(var(--v5-cyan-rgb)),var(--v5-primary),rgb(var(--v5-pink-rgb)));}
|
||
.v5-nrm-hero-top{display:flex;align-items:center;gap:.9rem;margin-bottom:.85rem;}
|
||
.v5-nrm-hero-top .v5-nrm-tone{width:40px;height:40px;border-radius:10px;}
|
||
.v5-nrm-hero-top .v5-nrm-tone svg{width:18px;height:18px;}
|
||
.v5-nrm-hero-info{flex:1;min-width:0;}
|
||
.v5-nrm-hero-row1{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;min-width:0;}
|
||
.v5-nrm-hero-info{min-width:0;}
|
||
.v5-nrm-hero-info h2{margin:0;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--v5-text);}
|
||
.v5-nrm-hero-meta{display:flex;gap:1rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-hero-meta b{color:var(--v5-text-sec);font-weight:600;}
|
||
.v5-nrm-hero-actions{display:flex;gap:.3rem;align-items:center;}
|
||
.v5-nrm-hero-codes{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1.5rem;}
|
||
.v5-nrm-hero-code-block .lbl{font-family:'JetBrains Mono',monospace;font-size:.52rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;}
|
||
.v5-nrm-hero-code-block .code{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:800;letter-spacing:.04em;line-height:1;color:var(--v5-text);}
|
||
.v5-nrm-hero-code-block.right{text-align:right;}
|
||
.v5-nrm-hero-code-block .code .pfx{color:rgb(var(--v5-cyan-rgb));}
|
||
.v5-nrm-hero-code-block .code .seq{color:rgb(var(--v5-pink-rgb));}
|
||
.v5-nrm-hero-code-block .code .sep{color:var(--v5-text-muted);opacity:.55;margin:0 .08em;font-weight:400;}
|
||
.v5-nrm-hero-code-block .sub{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-hero-arrow{color:var(--v5-primary);align-self:center;margin-bottom:4px;}
|
||
.v5-nrm-hero-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
|
||
/* row + 2-col split */
|
||
.v5-nrm-row{padding:1rem 1.5rem 1.1rem;border-bottom:1px solid var(--v5-border);}
|
||
.v5-nrm-row-hd{display:flex;align-items:center;gap:8px;margin-bottom:.75rem;}
|
||
.v5-nrm-row-hd h3{margin:0;font-size:.82rem;font-weight:800;color:var(--v5-text);letter-spacing:-.005em;}
|
||
.v5-nrm-row-hd .num{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:rgb(var(--v5-cyan-rgb));font-weight:800;padding:1px 6px;background:rgba(var(--v5-cyan-rgb),.1);border-radius:4px;}
|
||
.v5-nrm-row-hd .desc{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);margin-left:6px;}
|
||
.v5-nrm-row-hd .actions{margin-left:auto;display:flex;gap:.25rem;}
|
||
.v5-nrm-row-split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--v5-border);}
|
||
.v5-nrm-row-split > div{padding:1rem 1.5rem 1.1rem;}
|
||
.v5-nrm-row-split > div + div{border-left:1px solid var(--v5-border);}
|
||
|
||
/* pipeline editor */
|
||
.v5-nrm-pipe-canvas{padding:.9rem 1rem;background:var(--v5-bg-subtle);border:1px dashed var(--v5-border);border-radius:8px;display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;margin-bottom:.55rem;}
|
||
.v5-nrm-block{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:.5rem .75rem;background:var(--v5-surface-solid);border:2px solid var(--v5-border);border-radius:8px;cursor:pointer;transition:all .15s;min-width:78px;}
|
||
.v5-nrm-block:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(var(--v5-primary-rgb),.25);}
|
||
.v5-nrm-block.sel{border-color:var(--v5-primary);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.14);}
|
||
.v5-nrm-block .pin{position:absolute;top:-6px;left:-6px;width:16px;height:16px;background:var(--v5-primary);color:#fff;border-radius:50%;font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--v5-surface-solid);}
|
||
.v5-nrm-block .x{position:absolute;top:-6px;right:-6px;width:15px;height:15px;background:var(--v5-surface-solid);border:1px solid var(--v5-border);color:var(--v5-text-muted);border-radius:50%;font-size:.68rem;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;}
|
||
.v5-nrm-block:hover .x{display:flex;}
|
||
.v5-nrm-block .x:hover{color:rgb(var(--v5-red-rgb));border-color:rgb(var(--v5-red-rgb));}
|
||
.v5-nrm-block .typ{font-family:'JetBrains Mono',monospace;font-size:.52rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
|
||
.v5-nrm-block .val{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:800;color:var(--v5-text);}
|
||
.v5-nrm-block.text{border-color:rgba(var(--v5-cyan-rgb),.4);}
|
||
.v5-nrm-block.text .val{color:rgb(var(--v5-cyan-rgb));}
|
||
.v5-nrm-block.date{border-color:rgba(var(--v5-primary-rgb),.35);}
|
||
.v5-nrm-block.date .val{color:var(--v5-primary);}
|
||
.v5-nrm-block.sequence{border-color:rgba(var(--v5-pink-rgb),.4);}
|
||
.v5-nrm-block.sequence .val{color:rgb(var(--v5-pink-rgb));}
|
||
.v5-nrm-block.number{border-color:rgba(var(--v5-amber-rgb),.4);}
|
||
.v5-nrm-block.number .val{color:rgb(var(--v5-amber-rgb));}
|
||
.v5-nrm-block.category{border-color:rgba(var(--v5-primary-rgb),.35);}
|
||
.v5-nrm-block.category .val{color:var(--v5-primary);}
|
||
.v5-nrm-block.reference{border-color:rgba(var(--v5-green-rgb),.4);}
|
||
.v5-nrm-block.reference .val{color:rgb(var(--v5-green-rgb));}
|
||
.v5-nrm-jn{align-self:center;color:var(--v5-text-muted);font-family:'JetBrains Mono',monospace;font-weight:700;padding:0 2px;font-size:.85rem;}
|
||
.v5-nrm-drop{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:.5rem .65rem;border:2px dashed rgba(var(--v5-primary-rgb),.22);border-radius:8px;color:var(--v5-text-muted);cursor:pointer;font-size:.56rem;font-weight:700;min-width:64px;background:transparent;transition:all .15s;font-family:inherit;}
|
||
.v5-nrm-drop:hover{border-color:var(--v5-primary);color:var(--v5-primary);background:rgba(var(--v5-primary-rgb),.03);}
|
||
.v5-nrm-drop svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
|
||
/* inspector */
|
||
.v5-nrm-insp{background:var(--v5-bg-subtle);border:1px solid var(--v5-border);border-radius:8px;padding:.65rem .85rem;margin-bottom:.55rem;}
|
||
.v5-nrm-insp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
|
||
.v5-nrm-insp-hd .l{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--v5-text);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
|
||
.v5-nrm-insp-hd .l .pin{background:var(--v5-primary);color:#fff;padding:1px 6px;border-radius:4px;font-size:.54rem;font-weight:800;}
|
||
.v5-nrm-insp-hd .l b{color:rgb(var(--v5-pink-rgb));}
|
||
.v5-nrm-insp-grid{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end;}
|
||
.v5-nrm-insp-field{display:flex;flex-direction:column;gap:3px;}
|
||
.v5-nrm-insp-field.w80{flex:0 0 80px;}
|
||
.v5-nrm-insp-field.grow{flex:1;min-width:200px;}
|
||
.v5-nrm-insp-field label{font-size:.56rem;color:var(--v5-text-sec);font-weight:600;}
|
||
.v5-nrm-insp-inp{height:26px;padding:0 .45rem;background:var(--v5-surface-solid);border:1px solid var(--v5-border);border-radius:5px;color:var(--v5-text);font-family:'JetBrains Mono',monospace;font-size:.68rem;outline:none;width:100%;}
|
||
.v5-nrm-insp-inp:focus{border-color:var(--v5-primary);box-shadow:0 0 0 2px rgba(var(--v5-primary-rgb),.14);}
|
||
.v5-nrm-seg{display:inline-flex;gap:1px;padding:2px;background:var(--v5-surface-solid);border:1px solid var(--v5-border);border-radius:5px;width:fit-content;}
|
||
.v5-nrm-seg button{padding:3px 12px;border:none;background:transparent;color:var(--v5-text-muted);font-size:.58rem;font-weight:700;border-radius:3px;cursor:pointer;min-width:36px;font-family:inherit;}
|
||
.v5-nrm-seg button.on{background:var(--v5-primary);color:#fff;min-width:44px;}
|
||
|
||
/* palette */
|
||
.v5-nrm-palette{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
|
||
.v5-nrm-palette .lbl{font-family:'JetBrains Mono',monospace;font-size:.54rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.08em;margin-right:4px;text-transform:uppercase;}
|
||
.v5-nrm-palette-item{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:transparent;border:1px solid var(--v5-border);border-radius:5px;color:var(--v5-text);font-size:.62rem;font-weight:700;cursor:pointer;transition:all .12s;font-family:inherit;}
|
||
.v5-nrm-palette-item:hover{border-color:var(--v5-primary);color:var(--v5-primary);background:var(--v5-surface-hover);}
|
||
.v5-nrm-palette-item svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
|
||
/* usage list */
|
||
.v5-nrm-usage-list{display:flex;flex-direction:column;}
|
||
.v5-nrm-usage-row{display:grid;grid-template-columns:22px minmax(160px,1.5fr) 90px 80px 60px 22px;gap:.85rem;align-items:center;padding:.55rem 0;border-bottom:1px solid rgba(var(--v5-primary-rgb),.06);transition:background .12s;}
|
||
.v5-nrm-usage-row:hover{background:var(--v5-surface-hover);margin:0 -.5rem;padding-left:.5rem;padding-right:.5rem;border-radius:5px;}
|
||
.v5-nrm-usage-row:last-child{border-bottom:0;}
|
||
.v5-nrm-usage-row .ic{width:22px;height:22px;border-radius:5px;background:rgba(var(--v5-cyan-rgb),.12);color:rgb(var(--v5-cyan-rgb));border:1px solid rgba(var(--v5-cyan-rgb),.22);display:flex;align-items:center;justify-content:center;}
|
||
.v5-nrm-usage-row .ic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
.v5-nrm-usage-row .target{min-width:0;}
|
||
.v5-nrm-usage-row .target .nm{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;color:var(--v5-text);}
|
||
.v5-nrm-usage-row .target .nm .tbl{color:rgb(var(--v5-cyan-rgb));}
|
||
.v5-nrm-usage-row .target .nm .sep{color:var(--v5-text-muted);margin:0 3px;}
|
||
.v5-nrm-usage-row .target .desc{font-size:.56rem;color:var(--v5-text-muted);margin-top:1px;}
|
||
.v5-nrm-usage-row .uses{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--v5-text);font-weight:700;}
|
||
.v5-nrm-usage-row .uses .lbl{display:block;font-size:.48rem;color:var(--v5-text-muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1px;}
|
||
.v5-nrm-usage-row .mini-spark{display:flex;align-items:flex-end;gap:1px;height:18px;}
|
||
.v5-nrm-usage-row .mini-spark > div{flex:1;background:var(--v5-primary);border-radius:1px;min-height:1.5px;opacity:.75;}
|
||
.v5-nrm-usage-row .last-use{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);text-align:right;}
|
||
.v5-nrm-usage-row .x-btn{width:22px;height:22px;background:none;border:none;color:var(--v5-text-muted);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .12s;opacity:0;}
|
||
.v5-nrm-usage-row:hover .x-btn{opacity:1;}
|
||
.v5-nrm-usage-row .x-btn:hover{background:rgba(var(--v5-red-rgb),.08);color:rgb(var(--v5-red-rgb));}
|
||
.v5-nrm-usage-row .x-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
.v5-nrm-usage-add{margin-top:.55rem;display:flex;align-items:center;justify-content:center;gap:6px;padding:.4rem .5rem;background:transparent;border:1.5px dashed rgba(var(--v5-primary-rgb),.22);border-radius:6px;color:var(--v5-text-muted);cursor:pointer;font-size:.66rem;font-weight:600;transition:all .15s;width:100%;font-family:inherit;}
|
||
.v5-nrm-usage-add:hover{border-color:var(--v5-primary);color:var(--v5-primary);background:rgba(var(--v5-primary-rgb),.03);}
|
||
.v5-nrm-usage-add svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
|
||
/* sequence stats */
|
||
.v5-nrm-seq-stats{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.4rem;margin-bottom:.85rem;}
|
||
.v5-nrm-seq-stat{display:flex;flex-direction:column;gap:4px;}
|
||
.v5-nrm-seq-stat .lbl{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
|
||
.v5-nrm-seq-stat .val{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:800;color:var(--v5-text);line-height:1;letter-spacing:-.02em;}
|
||
.v5-nrm-seq-stat .val .u{font-size:.6rem;color:var(--v5-text-muted);font-weight:600;}
|
||
.v5-nrm-seq-stat .val.accent{color:var(--v5-primary);}
|
||
.v5-nrm-seq-stat .delta{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:rgb(var(--v5-green-rgb));font-weight:700;}
|
||
|
||
.v5-nrm-seq-edit{display:grid;grid-template-columns:1fr auto auto;gap:.45rem;align-items:end;padding-top:.85rem;border-top:1px solid rgba(var(--v5-primary-rgb),.06);}
|
||
.v5-nrm-seq-edit label{display:flex;flex-direction:column;gap:3px;}
|
||
.v5-nrm-seq-edit label .lbl{font-size:.56rem;color:var(--v5-text-sec);font-weight:600;}
|
||
.v5-nrm-seq-edit-inp{height:30px;padding:0 .55rem;background:var(--v5-bg-subtle);border:1.5px solid var(--v5-border);border-radius:6px;color:var(--v5-text);font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:800;outline:none;width:100%;}
|
||
.v5-nrm-seq-edit-inp:focus{border-color:var(--v5-primary);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.12);}
|
||
.v5-nrm-warn{margin-top:.55rem;display:flex;gap:6px;align-items:flex-start;padding:.4rem .6rem;background:rgba(var(--v5-amber-rgb),.07);border-left:2px solid rgb(var(--v5-amber-rgb));border-radius:4px;font-size:.62rem;color:var(--v5-text);}
|
||
.v5-nrm-warn svg{color:rgb(var(--v5-amber-rgb));flex-shrink:0;margin-top:1px;width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
.v5-nrm-warn code{font-family:'JetBrains Mono',monospace;font-size:.56rem;background:rgba(var(--v5-amber-rgb),.15);padding:1px 4px;border-radius:3px;}
|
||
|
||
/* chart */
|
||
.v5-nrm-chart-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
|
||
.v5-nrm-chart-hd .legend{display:flex;gap:.85rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-chart-hd .legend .it{display:inline-flex;align-items:center;gap:4px;}
|
||
.v5-nrm-chart-hd .legend .it::before{content:'';width:9px;height:2px;background:currentColor;}
|
||
.v5-nrm-chart svg{width:100%;height:160px;display:block;}
|
||
.v5-nrm-chart-x{display:flex;justify-content:space-between;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:.54rem;color:var(--v5-text-muted);}
|
||
|
||
/* activity */
|
||
.v5-nrm-activity{display:flex;flex-direction:column;}
|
||
.v5-nrm-act{display:grid;grid-template-columns:60px 22px 1fr auto;gap:.55rem;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(var(--v5-primary-rgb),.06);font-size:.68rem;}
|
||
.v5-nrm-act:hover{background:var(--v5-surface-hover);margin:0 -.5rem;padding-left:.5rem;padding-right:.5rem;border-radius:5px;}
|
||
.v5-nrm-act:last-child{border-bottom:0;}
|
||
.v5-nrm-act .time{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-act .typ{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;border:1px solid;}
|
||
.v5-nrm-act .typ.add{background:rgba(var(--v5-green-rgb),.12);color:rgb(var(--v5-green-rgb));border-color:rgba(var(--v5-green-rgb),.25);}
|
||
.v5-nrm-act .typ.edit{background:rgba(var(--v5-primary-rgb),.1);color:var(--v5-primary);border-color:rgba(var(--v5-primary-rgb),.22);}
|
||
.v5-nrm-act .typ.reset{background:rgba(var(--v5-amber-rgb),.15);color:rgb(var(--v5-amber-rgb));border-color:rgba(var(--v5-amber-rgb),.3);}
|
||
.v5-nrm-act .typ.link{background:rgba(var(--v5-cyan-rgb),.12);color:rgb(var(--v5-cyan-rgb));border-color:rgba(var(--v5-cyan-rgb),.25);}
|
||
.v5-nrm-act .typ svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;}
|
||
.v5-nrm-act .desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||
.v5-nrm-act .desc b{font-weight:700;}
|
||
.v5-nrm-act .desc .code{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--v5-text);font-weight:700;}
|
||
.v5-nrm-act .user{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-sec);}
|
||
|
||
/* save bar */
|
||
.v5-nrm-savebar{position:sticky;bottom:0;background:var(--v5-surface-solid);border-top:1px solid var(--v5-border);padding:.55rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;box-shadow:0 -4px 14px -8px rgba(0,0,0,.12);z-index:10;}
|
||
.v5-nrm-unsaved{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;color:rgb(var(--v5-amber-rgb));}
|
||
.v5-nrm-unsaved .d{width:6px;height:6px;border-radius:50%;background:rgb(var(--v5-amber-rgb));animation:v5-nrm-pulse 1.4s ease-in-out infinite;}
|
||
|
||
/* buttons */
|
||
.v5-nrm-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 .7rem;border-radius:6px;font-size:.68rem;font-weight:600;border:1px solid var(--v5-border);background:transparent;color:var(--v5-text);cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);white-space:nowrap;font-family:inherit;}
|
||
.v5-nrm-btn:hover{border-color:var(--v5-primary);color:var(--v5-primary);background:var(--v5-surface-hover);}
|
||
.v5-nrm-btn.primary{background:var(--v5-primary);border-color:var(--v5-primary);color:#fff;box-shadow:0 2px 6px -1px rgba(var(--v5-primary-rgb),.25);}
|
||
.v5-nrm-btn.primary:hover{color:#fff;box-shadow:0 4px 12px -2px rgba(var(--v5-primary-rgb),.4);}
|
||
.v5-nrm-btn.danger{color:rgb(var(--v5-red-rgb));}
|
||
.v5-nrm-btn.danger:hover{border-color:rgb(var(--v5-red-rgb));background:rgba(var(--v5-red-rgb),.06);color:rgb(var(--v5-red-rgb));}
|
||
.v5-nrm-btn.sm{height:26px;padding:0 .55rem;font-size:.64rem;gap:4px;}
|
||
.v5-nrm-btn.icon-only{padding:0;width:28px;justify-content:center;}
|
||
.v5-nrm-btn.icon-only.sm{width:26px;}
|
||
.v5-nrm-btn.ghost{border-color:transparent;}
|
||
.v5-nrm-btn.ghost:hover{background:var(--v5-surface-hover);border-color:var(--v5-border);}
|
||
.v5-nrm-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.75;}
|
||
.v5-nrm-btn.sm svg{width:11px;height:11px;}
|
||
|
||
/* page head extension — 인비원 PageHead 안에 stats 추가 */
|
||
.v5-nrm-pagestats{display:flex;gap:1rem;padding-left:1rem;border-left:1px solid var(--v5-border);font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-pagestats b{color:var(--v5-text);font-weight:700;}
|
||
.v5-nrm-pagestats .green{color:rgb(var(--v5-green-rgb));}
|
||
.v5-nrm-pagestats .amber{color:rgb(var(--v5-amber-rgb));}
|
||
|
||
/* chip */
|
||
.v5-nrm-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;background:var(--v5-bg-subtle);border:1px solid var(--v5-border);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:800;color:var(--v5-text-sec);letter-spacing:.04em;text-transform:uppercase;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||
.v5-nrm-chip.active{background:rgba(var(--v5-green-rgb),.1);color:rgb(var(--v5-green-rgb));border-color:rgba(var(--v5-green-rgb),.25);}
|
||
.v5-nrm-chip.live::before{content:'';width:5px;height:5px;background:rgb(var(--v5-green-rgb));border-radius:50%;animation:v5-nrm-pulse 1.8s ease-in-out infinite;}
|
||
|
||
/* command palette (⌘K) */
|
||
.v5-nrm-cmdk-bg{position:fixed;inset:0;background:rgba(15,14,26,.55);z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;animation:v5-nrm-cmdk-overlay .2s ease;}
|
||
.dark .v5-nrm-cmdk-bg{background:rgba(0,0,0,.72);}
|
||
.v5-nrm-cmdk-bg.on{display:flex;}
|
||
@keyframes v5-nrm-cmdk-overlay{from{opacity:0;}to{opacity:1;}}
|
||
.v5-nrm-cmdk{width:min(640px,92vw);max-height:70vh;background:var(--v5-surface-solid);border:1px solid var(--v5-border);border-radius:14px;box-shadow:0 24px 64px -16px rgba(0,0,0,.35),0 0 20px rgba(var(--v5-primary-rgb),.12);display:flex;flex-direction:column;overflow:hidden;animation:v5-nrm-cmdk-in .25s cubic-bezier(.16,1,.3,1);}
|
||
@keyframes v5-nrm-cmdk-in{0%{opacity:0;transform:scale(.96) translateY(-8px);}100%{opacity:1;transform:scale(1) translateY(0);}}
|
||
.v5-nrm-cmdk-srch{display:flex;align-items:center;gap:.65rem;padding:.9rem 1rem;border-bottom:1px solid var(--v5-border);}
|
||
.v5-nrm-cmdk-srch > svg{color:var(--v5-text-muted);width:16px;height:16px;flex-shrink:0;}
|
||
.v5-nrm-cmdk-srch input{flex:1;border:none;background:transparent;color:var(--v5-text);font-size:1rem;font-weight:500;outline:none;font-family:inherit;}
|
||
.v5-nrm-cmdk-srch input::placeholder{color:var(--v5-text-muted);}
|
||
.v5-nrm-cmdk-body{flex:1;min-height:0;overflow-y:auto;padding:.35rem 0 .5rem;}
|
||
.v5-nrm-cmdk-group{font-family:'JetBrains Mono',monospace;font-size:.52rem;color:var(--v5-text-muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.55rem 1rem .25rem;display:flex;align-items:center;justify-content:space-between;}
|
||
.v5-nrm-cmdk-group .num{background:var(--v5-bg-subtle);border:1px solid var(--v5-border);padding:1px 6px;border-radius:3px;color:var(--v5-text-sec);}
|
||
.v5-nrm-cmdk-item{display:grid;grid-template-columns:28px 1fr auto;gap:.65rem;align-items:center;padding:.5rem 1rem;cursor:pointer;border-left:2px solid transparent;transition:background .12s;}
|
||
.v5-nrm-cmdk-item:hover,.v5-nrm-cmdk-item.focus{background:var(--v5-surface-hover);border-left-color:var(--v5-primary);}
|
||
.v5-nrm-cmdk-item .ic{width:26px;height:26px;border-radius:6px;background:var(--v5-bg-subtle);color:var(--v5-text-sec);border:1px solid var(--v5-border);display:flex;align-items:center;justify-content:center;}
|
||
.v5-nrm-cmdk-item .ic svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.75;}
|
||
.v5-nrm-cmdk-item.action .ic{background:rgba(var(--v5-primary-rgb),.12);color:var(--v5-primary);border-color:rgba(var(--v5-primary-rgb),.25);}
|
||
.v5-nrm-cmdk-item.preset .ic{background:rgba(var(--v5-cyan-rgb),.1);color:rgb(var(--v5-cyan-rgb));border-color:rgba(var(--v5-cyan-rgb),.22);}
|
||
.v5-nrm-cmdk-row{min-width:0;display:flex;flex-direction:column;gap:2px;}
|
||
.v5-nrm-cmdk-title{font-size:.82rem;color:var(--v5-text);font-weight:600;}
|
||
.v5-nrm-cmdk-title b{color:var(--v5-primary);font-weight:700;}
|
||
.v5-nrm-cmdk-meta{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);}
|
||
.v5-nrm-cmdk-meta .pfx{color:rgb(var(--v5-cyan-rgb));}
|
||
.v5-nrm-cmdk-meta .seq{color:rgb(var(--v5-pink-rgb));}
|
||
.v5-nrm-cmdk-right{font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--v5-text-muted);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
|
||
.v5-nrm-cmdk-right .cnt{color:rgb(var(--v5-cyan-rgb));font-weight:700;}
|
||
.v5-nrm-cmdk-foot{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-top:1px solid var(--v5-border);background:var(--v5-bg-subtle);font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--v5-text-muted);gap:.85rem;}
|
||
.v5-nrm-cmdk-foot .hint{display:inline-flex;align-items:center;gap:4px;}
|
||
.v5-nrm-kbd{font-family:'JetBrains Mono',monospace;font-size:.58rem;padding:1px 5px;background:var(--v5-surface-solid);border:1px solid var(--v5-border);border-radius:4px;color:var(--v5-text-sec);}
|
||
.v5-nrm-cmdk-foot .v5-nrm-kbd{background:var(--v5-surface-solid);}
|
||
|
||
/* empty / loading states */
|
||
.v5-nrm-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;padding:4rem 2rem;color:var(--v5-text-muted);font-size:.78rem;text-align:center;}
|
||
.v5-nrm-empty svg{width:32px;height:32px;opacity:.5;stroke:currentColor;fill:none;stroke-width:1.5;}
|
||
.v5-nrm-empty .hint{font-size:.66rem;color:var(--v5-text-muted);}
|