중간세이브 - 메뉴수정 - INVYONE 스튜디오 작업
This commit is contained in:
@@ -570,7 +570,7 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
|
||||
.v5-theme-fade.in{opacity:1;}
|
||||
|
||||
/* ===== CONTENT PLACEHOLDER ===== */
|
||||
.v5-content{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
|
||||
.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;
|
||||
@@ -627,3 +627,473 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
|
||||
.v5-si{font-size:.72rem;padding:.45rem .6rem;}
|
||||
.v5-content{padding:1rem;}
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
V5 MENU MANAGEMENT (v5-mm-*) — 3-column Cascade (Scope / Tree / Detail)
|
||||
모든 색/간격 토큰은 v5 변수 재사용. 새 토큰은 :root 에 추가.
|
||||
=================================================================== */
|
||||
:root{
|
||||
--v5-mm-bg:#ffffff;
|
||||
--v5-mm-panel:#ffffff;
|
||||
--v5-mm-sunk:#f5f5f8;
|
||||
--v5-mm-hover:#faf9fc;
|
||||
--v5-mm-faint:#c9c7d5;
|
||||
--v5-mm-border:#e5e3ec;
|
||||
--v5-mm-border-2:#eeedf3;
|
||||
--v5-mm-text:#1a1825;
|
||||
--v5-mm-text-sec:#4e4c5e;
|
||||
--v5-mm-text-muted:#8a8899;
|
||||
--v5-mm-accent:#6c5ce7;
|
||||
--v5-mm-accent-soft:rgba(108,92,231,.08);
|
||||
--v5-mm-accent-line:rgba(108,92,231,.22);
|
||||
--v5-mm-ring:rgba(108,92,231,.14);
|
||||
--v5-mm-green:#0a9975;
|
||||
--v5-mm-red:#dc2626;
|
||||
--v5-mm-amber:#c87d18;
|
||||
}
|
||||
.dark{
|
||||
--v5-mm-bg:#0a0a12;
|
||||
--v5-mm-panel:#13131c;
|
||||
--v5-mm-sunk:#0f0f18;
|
||||
--v5-mm-hover:#1a1a24;
|
||||
--v5-mm-faint:#4a4859;
|
||||
--v5-mm-border:#1f1f26;
|
||||
--v5-mm-border-2:#19191f;
|
||||
--v5-mm-text:#f1eff8;
|
||||
--v5-mm-text-sec:#a5a2ba;
|
||||
--v5-mm-text-muted:#72708a;
|
||||
--v5-mm-accent:#a991ff;
|
||||
--v5-mm-accent-soft:rgba(169,145,255,.09);
|
||||
--v5-mm-accent-line:rgba(169,145,255,.22);
|
||||
--v5-mm-ring:rgba(169,145,255,.22);
|
||||
--v5-mm-green:#5eeabc;
|
||||
--v5-mm-red:#ff6a7a;
|
||||
--v5-mm-amber:#f2b45e;
|
||||
}
|
||||
|
||||
/* 전체 shell — admin content 안에 들어감 (반응형 fluid) */
|
||||
.v5-mm{display:grid;
|
||||
grid-template-columns:clamp(220px,16vw,300px) clamp(280px,18vw,360px) minmax(0,1fr);
|
||||
height:100%;min-height:0;border-top:1px solid var(--v5-border);}
|
||||
|
||||
/* 공통 컬럼 셸 */
|
||||
.v5-mm-col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--v5-mm-border);
|
||||
background:var(--v5-mm-panel);animation:v5-mm-colIn .35s cubic-bezier(.16,1,.3,1);}
|
||||
.v5-mm-col:last-child{border-right:none;}
|
||||
@keyframes v5-mm-colIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
|
||||
|
||||
/* 컬럼 헤더 공통 */
|
||||
.v5-mm-col-hd{padding:1rem 1rem .6rem;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;}
|
||||
.v5-mm-col-hd > div:first-child{min-width:0;}
|
||||
.v5-mm-step{display:inline-flex;align-items:center;gap:.35rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
|
||||
color:var(--v5-mm-text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
|
||||
.v5-mm-step .num{padding:.06rem .32rem;border-radius:3px;background:var(--v5-mm-sunk);
|
||||
border:1px solid var(--v5-mm-border);color:var(--v5-mm-accent);}
|
||||
.v5-mm-col-hd h3{margin:.3rem 0 .1rem;font-size:.95rem;font-weight:700;letter-spacing:-.018em;color:var(--v5-mm-text);}
|
||||
.v5-mm-col-hd p{margin:0;font-size:.64rem;color:var(--v5-mm-text-muted);}
|
||||
|
||||
.v5-mm-hd-add{width:28px;height:28px;border-radius:7px;border:1px solid var(--v5-mm-border);
|
||||
background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);cursor:pointer;display:flex;
|
||||
align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
|
||||
.v5-mm-hd-add:hover{border-color:var(--v5-mm-accent);color:var(--v5-mm-accent);background:var(--v5-mm-sunk);}
|
||||
.v5-mm-hd-add svg{width:12px;height:12px;}
|
||||
|
||||
/* ========= COL 1: SCOPE ========= */
|
||||
.v5-mm-col-scope{background:var(--v5-mm-sunk);}
|
||||
.v5-mm-scope-list{padding:.3rem .6rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto;}
|
||||
.v5-mm-scope{display:flex;flex-direction:column;gap:.5rem;padding:.85rem;border-radius:10px;
|
||||
background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);cursor:pointer;transition:all .15s;}
|
||||
.v5-mm-scope:hover{border-color:rgba(108,92,231,.2);}
|
||||
.dark .v5-mm-scope:hover{border-color:rgba(162,155,254,.2);}
|
||||
.v5-mm-scope.on{background:rgba(108,92,231,.08);border-color:var(--v5-mm-accent);}
|
||||
.dark .v5-mm-scope.on{background:rgba(162,155,254,.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(108,92,231,.14);}
|
||||
.dark .v5-mm-tree-srch input:focus{box-shadow:0 0 0 2px rgba(162,155,254,.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(108,92,231,.08);}
|
||||
.dark .v5-mm-node.on{background:rgba(162,155,254,.09);}
|
||||
.v5-mm-node.on .v5-mm-node-name{color:var(--v5-mm-accent);font-weight:600;}
|
||||
|
||||
.v5-mm-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
|
||||
color:var(--v5-mm-text-muted);flex-shrink:0;border-radius:3px;transition:all .1s;}
|
||||
.v5-mm-caret:hover{background:var(--v5-mm-panel);color:var(--v5-mm-text);}
|
||||
.v5-mm-caret svg{width:9px;height:9px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
|
||||
.v5-mm-node.open > .v5-mm-caret svg{transform:rotate(90deg);}
|
||||
.v5-mm-node.leaf .v5-mm-caret{opacity:0;pointer-events:none;}
|
||||
|
||||
.v5-mm-node-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
|
||||
background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);flex-shrink:0;border:1px solid var(--v5-mm-border-2);}
|
||||
.v5-mm-node.on .v5-mm-node-ico{background:var(--v5-mm-accent);color:white;border-color:transparent;}
|
||||
.v5-mm-node-ico svg{width:13px;height:13px;}
|
||||
|
||||
.v5-mm-node-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
|
||||
.v5-mm-node-name{font-size:.88rem;font-weight:500;color:var(--v5-mm-text);letter-spacing:-.005em;
|
||||
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.v5-mm-node-meta{font-size:.68rem;color:var(--v5-mm-text-muted);font-family:'JetBrains Mono',monospace;
|
||||
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
|
||||
.v5-mm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--v5-mm-faint);}
|
||||
.v5-mm-dot.on{background:var(--v5-mm-green);}
|
||||
|
||||
.v5-mm-cnt{font-size:.68rem;font-weight:700;color:var(--v5-mm-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;
|
||||
padding:.15rem .5rem;border-radius:5px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border-2);}
|
||||
.v5-mm-node.on .v5-mm-cnt{color:var(--v5-mm-accent);background:var(--v5-mm-panel);
|
||||
border-color:rgba(108,92,231,.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(108,92,231,.2);background:rgba(108,92,231,.05);}
|
||||
.dark .v5-mm-node.l1:hover{border-color:rgba(162,155,254,.2);background:rgba(162,155,254,.05);}
|
||||
.v5-mm-node.l1.on{border-color:var(--v5-mm-accent);background:rgba(108,92,231,.08);}
|
||||
.dark .v5-mm-node.l1.on{background:rgba(162,155,254,.08);}
|
||||
.v5-mm-node.l1 .v5-mm-caret{width:18px;height:18px;}
|
||||
.v5-mm-node.l1 .v5-mm-caret svg{width:11px;height:11px;}
|
||||
.v5-mm-node.l1 .v5-mm-node-ico{width:38px;height:38px;border-radius:10px;}
|
||||
.v5-mm-node.l1 .v5-mm-node-ico svg{width:18px;height:18px;}
|
||||
.v5-mm-node.l1 .v5-mm-node-name{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;}
|
||||
.v5-mm-node.l1.on .v5-mm-node-name{font-weight:700;color:var(--v5-mm-accent);}
|
||||
.v5-mm-node.l1 .v5-mm-cnt{font-size:.74rem;padding:.2rem .6rem;font-weight:700;}
|
||||
|
||||
/* L2/L3 들여쓰기 + connector line */
|
||||
.v5-mm-node.l2{padding-left:2.1rem;}
|
||||
.v5-mm-node.l3{padding-left:3.3rem;}
|
||||
.v5-mm-node.l2::before{content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
|
||||
.v5-mm-node.l2::after{content:'';position:absolute;left:1.4rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}
|
||||
.v5-mm-node.l3::before{content:'';position:absolute;left:2.5rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
|
||||
.v5-mm-node.l3::after{content:'';position:absolute;left:2.5rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}
|
||||
|
||||
/* 서브트리 펼침 — stagger fade-in + blur */
|
||||
.v5-mm-sub{display:none;margin:0;padding:0;}
|
||||
.v5-mm-node.open + .v5-mm-sub{display:block;animation:v5-mm-subIn .35s cubic-bezier(.16,1,.3,1);}
|
||||
@keyframes v5-mm-subIn{
|
||||
from{opacity:0;transform:translateY(-6px);filter:blur(3px);}
|
||||
to{opacity:1;transform:none;filter:none;}
|
||||
}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node{animation:v5-mm-nodeIn .38s cubic-bezier(.16,1,.3,1) backwards;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(1){animation-delay:.03s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(2){animation-delay:.07s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(3){animation-delay:.11s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(4){animation-delay:.15s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(5){animation-delay:.19s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(6){animation-delay:.23s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(7){animation-delay:.27s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(8){animation-delay:.31s;}
|
||||
.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(n+9){animation-delay:.35s;}
|
||||
@keyframes v5-mm-nodeIn{
|
||||
from{opacity:0;transform:translateX(-10px) scale(.98);}
|
||||
to{opacity:1;transform:none;}
|
||||
}
|
||||
|
||||
/* caret 회전 부드럽게 */
|
||||
.v5-mm-caret svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
|
||||
|
||||
/* 선택 상태 진입 애니메이션 */
|
||||
.v5-mm-node.on{animation:v5-mm-selectPulse .5s cubic-bezier(.16,1,.3,1);}
|
||||
@keyframes v5-mm-selectPulse{
|
||||
0%{box-shadow:inset 0 0 0 0 rgba(108,92,231,0);}
|
||||
50%{box-shadow:inset 0 0 0 2px rgba(108,92,231,.3);}
|
||||
100%{box-shadow:inset 0 0 0 0 rgba(108,92,231,0);}
|
||||
}
|
||||
.dark .v5-mm-node.on{animation-name:v5-mm-selectPulseDark;}
|
||||
@keyframes v5-mm-selectPulseDark{
|
||||
0%{box-shadow:inset 0 0 0 0 rgba(162,155,254,0);}
|
||||
50%{box-shadow:inset 0 0 0 2px rgba(162,155,254,.35);}
|
||||
100%{box-shadow:inset 0 0 0 0 rgba(162,155,254,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;backdrop-filter:blur(0);}
|
||||
to{opacity:1;backdrop-filter:blur(6px);}
|
||||
}
|
||||
.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(108,92,231,.35);}
|
||||
.dark .v5-mm-sv-hero-ico{color:var(--v5-mm-bg);box-shadow:0 2px 10px -2px rgba(162,155,254,.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(85,239,196,.08);border-color:rgba(85,239,196,.22);}
|
||||
.v5-mm-chip.scope{color:var(--v5-cyan);background:rgba(0,206,201,.08);border-color:rgba(0,206,201,.24);}
|
||||
.dark .v5-mm-chip.scope{background:rgba(85,239,196,.06);border-color:rgba(85,239,196,.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(108,92,231,.14);}
|
||||
.dark .v5-mm-inp:focus{box-shadow:0 0 0 3px rgba(162,155,254,.2);}
|
||||
.v5-mm-inp[readonly]{background:var(--v5-mm-sunk);color:var(--v5-mm-text-muted);}
|
||||
textarea.v5-mm-inp{height:auto;min-height:72px;padding:.55rem .85rem;resize:vertical;line-height:1.55;}
|
||||
select.v5-mm-inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
|
||||
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239998ad' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
|
||||
background-repeat:no-repeat;background-position:right .65rem center;background-size:12px;}
|
||||
|
||||
.v5-mm-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border);width:fit-content;}
|
||||
.v5-mm-seg button{padding:.45rem .9rem;border:none;border-radius:6px;background:transparent;color:var(--v5-mm-text-muted);
|
||||
font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem;}
|
||||
.v5-mm-seg button.on{background:var(--v5-mm-panel);color:var(--v5-mm-text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
|
||||
.v5-mm-seg button.on svg{color:var(--v5-mm-accent);}
|
||||
.v5-mm-seg button svg{width:13px;height:13px;}
|
||||
|
||||
.v5-mm-tg{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;height:36px;padding:0 .85rem;
|
||||
border:1px solid var(--v5-mm-border);border-radius:8px;background:var(--v5-mm-panel);}
|
||||
.dark .v5-mm-tg{background:var(--v5-mm-sunk);}
|
||||
.v5-mm-tg .sw{width:38px;height:22px;border-radius:999px;background:var(--v5-mm-faint);position:relative;transition:background .2s;
|
||||
box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
|
||||
.v5-mm-tg .sw::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;
|
||||
transition:left .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2);}
|
||||
.v5-mm-tg.on .sw{background:var(--v5-mm-accent);}
|
||||
.v5-mm-tg.on .sw::after{left:18px;}
|
||||
.v5-mm-tg .lbl{font-size:.76rem;color:var(--v5-mm-text-sec);font-weight:500;}
|
||||
.v5-mm-tg.on .lbl{color:var(--v5-mm-text);font-weight:600;}
|
||||
|
||||
.v5-mm-sv-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
|
||||
padding:1.2rem 0 .5rem;margin-top:1rem;border-top:1px solid var(--v5-mm-border);}
|
||||
.v5-mm-unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--v5-mm-amber);font-weight:600;margin-right:.35rem;}
|
||||
.v5-mm-unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--v5-mm-amber);animation:v5-mm-pulse 1.6s ease-in-out infinite;}
|
||||
@keyframes v5-mm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
|
||||
|
||||
.v5-mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
|
||||
height:34px;padding:0 1rem;border-radius:8px;border:1px solid var(--v5-mm-border);
|
||||
background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);font-family:inherit;font-size:.74rem;font-weight:600;
|
||||
cursor:pointer;transition:all .15s;outline:none;}
|
||||
.v5-mm-btn:hover{border-color:var(--v5-mm-text-muted);color:var(--v5-mm-text);}
|
||||
.v5-mm-btn svg{width:13px;height:13px;}
|
||||
.v5-mm-btn.primary{background:var(--v5-mm-accent);color:white;border-color:var(--v5-mm-accent);
|
||||
box-shadow:0 2px 6px -1px rgba(108,92,231,.35),inset 0 1px 0 rgba(255,255,255,.22);}
|
||||
.v5-mm-btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;transform:translateY(-1px);
|
||||
box-shadow:0 4px 12px -2px rgba(108,92,231,.4);}
|
||||
.dark .v5-mm-btn.primary{color:var(--v5-mm-bg);}
|
||||
.dark .v5-mm-btn.primary:hover{background:#b8b2ff;border-color:#b8b2ff;color:var(--v5-mm-bg);}
|
||||
.v5-mm-btn.danger{color:var(--v5-mm-red);}
|
||||
.v5-mm-btn.danger:hover{border-color:var(--v5-mm-red);background:rgba(255,71,87,.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(108,92,231,.08);border-color:rgba(108,92,231,.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(255,71,87,.08);border-color:rgba(255,71,87,.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;}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user