/* ============================================================
KooVIS Work — 공통 디자인 시스템 (단일 소스)
신규/수정 페이지는 이 파일을 에서 링크하고 토큰·컴포넌트를 재사용한다.
============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
/* 표면·텍스트 */
--bg: #f0f2f5;
--surface: #ffffff;
--surface2: #f7f8fa;
--border: #e2e5ea;
--border-accent: #00b09a;
--text: #111827;
--text-sub: #4b5563;
--text-muted: #9ca3af;
/* 브랜드 액센트 (전 페이지 통일값) */
--accent: #00b09a;
--accent-mid: #00a08c;
--accent-dark: #008b7a;
--accent-light: #e6f7f5;
/* 보조 색 */
--purple: #8b5cf6;
--purple-bg: #f3effe;
--blue: #3b82f6;
/* 감성(VOC) */
--pos: #10b981; --pos-bg: #e7f7f1;
--neu: #9ca3af; --neu-bg: #f3f4f6;
--neg: #ef4444; --neg-bg: #fdecec;
/* 그림자 */
--s1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--s2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
--s3: 0 12px 28px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
--shadow-sm: var(--s1);
--shadow: var(--s2);
--shadow-lg: var(--s3);
/* 반경 */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
}
/* ── 기본 ── */
.kv * { box-sizing: border-box; }
.kv-body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
min-height: 100vh;
}
/* ── 네비게이션 ── */
.kv-nav {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 24px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--s1);
}
.kv-nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kv-nav-brand {
font-size: 15px; font-weight: 800; color: var(--accent);
text-decoration: none; letter-spacing: -0.3px; white-space: nowrap;
}
.kv-nav-back { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.kv-nav-back:hover { color: var(--accent); }
.kv-nav-divider { color: var(--border); }
.kv-nav-title { font-size: 13px; color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.kv-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kv-nav-link {
font-size: 13px; color: var(--text-sub); text-decoration: none;
padding: 6px 12px; border-radius: var(--radius-sm); min-height: 36px;
display: inline-flex; align-items: center; transition: background .15s, color .15s;
}
.kv-nav-link:hover { background: var(--surface2); color: var(--text); }
.kv-nav-link.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }
/* ── 전역 상단 네비 (work-nav.js가 .nav-tabs를 채움 · 전 페이지 통일) ──
페이지의