/* ═══════════════════════════════════════════════════════════════
   VCOS — Premium White Design System v3
   Clean · Elevated · High-contrast · Apple-inspired
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #ffffff;
  --bg2:       #f8fafc;
  --bg3:       #f1f5f9;
  --bg4:       #e8eef4;
  --bg-glass:  rgba(255,255,255,.85);

  /* Borders */
  --border:    #e2e8f0;
  --border2:   #f1f5f9;

  /* Text — maximum contrast on white */
  --text:      #0a0f1e;   /* near-black */
  --text2:     #1e293b;   /* slate-800 — 본문 보조 */
  --text3:     #334155;   /* slate-700 — 설명 텍스트 (가독성 강화) */
  --text4:     #475569;   /* slate-600 — 힌트/플레이스홀더 (가독성 강화) */

  /* Brand */
  --accent:       #2563eb;   /* blue-600 */
  --accent2:      #1d4ed8;   /* blue-700 */
  --accent3:      #1e40af;   /* blue-800 */
  --accent-light: #eff6ff;   /* blue-50 */
  --accent-mid:   #bfdbfe;   /* blue-200 */

  /* Status */
  --green:     #16a34a;  --green2:  #15803d;  --green-bg:  #f0fdf4;
  --yellow:    #d97706;  --yellow2: #b45309;  --yellow-bg: #fffbeb;
  --red:       #dc2626;  --red2:    #b91c1c;  --red-bg:    #fef2f2;
  --purple:    #7c3aed;  --purple2: #6d28d9;  --purple-bg: #f5f3ff;
  --orange:    #ea580c;  --orange2: #c2410c;  --orange-bg: #fff7ed;
  --teal:      #0891b2;  --teal2:   #0e7490;  --teal-bg:   #ecfeff;
  --pink:      #db2777;  --pink-bg: #fdf2f8;

  /* Model colors */
  --haiku-c:   #15803d;
  --sonnet-c:  #2563eb;
  --opus-c:    #7c3aed;

  /* Shadows — layered, natural */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 28px rgba(15,23,42,.1),  0 4px 8px rgba(15,23,42,.05);
  --shadow-xl: 0 20px 48px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(37,99,235,.18);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Transitions */
  --ease:  cubic-bezier(.4,0,.2,1);
  --fast:  .15s var(--ease);
  --med:   .22s var(--ease);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
body {
  background:var(--bg2);
  color:var(--text);
  font-family:'Noto Sans KR','Inter','Malgun Gothic','Apple SD Gothic Neo','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;
}
a { color:var(--accent); text-decoration:none }

/* ── Header ─────────────────────────────────────────────────── */
.vcos-header {
  background:linear-gradient(135deg,#0c1852 0%,#1a3db8 50%,#0d2478 100%);
  padding:0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 24px rgba(10,24,120,.3);
}
.vcos-header::before {
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(96,165,250,.12) 0%,transparent 55%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0 5.5 4.5 10 10 10s10-4.5 10-10-4.5-10-10-10-10 4.5-10 10z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.header-inner {
  max-width:1400px;
  margin:0 auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
}
.logo-mark {
  font-size:23px;font-weight:900;letter-spacing:-1px;color:#fff;
  display:flex;align-items:center;gap:2px;flex-shrink:0;
}
.logo-mark span {
  background:linear-gradient(135deg,#93c5fd,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.logo-sub { font-size:10.5px;color:rgba(255,255,255,.88);letter-spacing:2px;text-transform:uppercase;margin-top:1px }
.nav-links { display:flex;gap:2px;margin-left:auto;flex-wrap:wrap }
.nav-link {
  padding:5px 10px;border-radius:var(--r-xs);font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.96);border:1px solid transparent;
  transition:all var(--fast);white-space:nowrap;letter-spacing:.1px;
}
.nav-link:hover { color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1) }
.nav-link.active {
  color:#fff;border-color:#ff2d78;
  background:linear-gradient(135deg,#ff2d78,#ff6fa3);
  font-weight:700;box-shadow:0 2px 10px rgba(255,45,120,.5);
}
.nav-num {
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:3px;
  background:rgba(255,255,255,.16);color:#fff;font-size:10.5px;font-weight:800;margin-right:3px;
}
.nav-link.active .nav-num { background:rgba(255,255,255,.35) }
.home-link {
  font-size:13.5px;font-weight:700;color:#fff;padding:6px 13px;
  border:1.5px solid rgba(255,255,255,.3);border-radius:var(--r-xs);
  background:rgba(255,255,255,.12);transition:all var(--fast);
}
.home-link:hover { background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5) }

/* ── Nav Dropdown ───────────────────────────────────────────── */
.nav-dropdown {
  position:relative;
}
.nav-dropdown-toggle {
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:var(--r-xs);font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.96);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;letter-spacing:.1px;
  transition:all var(--fast);user-select:none;
}
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle {
  color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1);
}
.nav-dropdown-toggle.active {
  color:#fff;border-color:#ff2d78;
  background:linear-gradient(135deg,#ff2d78,#ff6fa3);
  font-weight:700;box-shadow:0 2px 10px rgba(255,45,120,.5);
}
.nav-dropdown-toggle.active .nav-num { background:rgba(255,255,255,.35) }
.nav-dropdown-caret {
  font-size:9px;opacity:.7;transition:transform var(--fast);margin-left:1px;
}
.nav-dropdown:hover .nav-dropdown-caret { transform:rotate(180deg) }

.nav-dropdown-menu {
  display:none;
  position:absolute;top:100%;left:0;
  padding-top:6px;  /* 시각적 간격은 padding으로 — hover 영역 유지 */
  z-index:200;
}
.nav-dropdown-menu-inner {
  background:linear-gradient(160deg,#0f1f6e,#1a3db8);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);
  padding:6px;
  min-width:180px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
}
.nav-dropdown:hover .nav-dropdown-menu { display:block }
.nav-dropdown-menu-inner a {
  display:flex;align-items:center;gap:6px;
  padding:7px 11px;border-radius:6px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.95);
  white-space:nowrap;transition:all var(--fast);
}
.nav-dropdown-menu-inner a:hover {
  background:rgba(255,255,255,.12);color:#fff;
}
.nav-dropdown-menu-inner a.active {
  background:linear-gradient(135deg,#ff2d78,#ff6fa3);
  color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(255,45,120,.4);
}
.nav-dropdown-menu-inner a.active .nav-num { background:rgba(255,255,255,.35) }
.nav-dropdown-menu-inner .nav-num {
  background:rgba(255,255,255,.16);
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width:1400px;margin:0 auto;padding:0 24px }
.page-body { padding:18px 0 40px }

/* ── Phase Banner (모든 페이지 공통 히어로 배너) ────────────── */
.phase-banner {
  border-radius:var(--r-xl);padding:20px 28px;margin-bottom:20px;
  display:flex;align-items:center;gap:18px;
  border:1.5px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.phase-banner::after {
  content:'';position:absolute;right:-20px;top:-20px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.phase-banner-icon {
  font-size:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
  position:relative;z-index:1;flex-shrink:0;line-height:1;
}
.phase-banner-body { position:relative;z-index:1;flex:1;min-width:0 }
.phase-banner-title {
  font-size:20px;font-weight:900;color:#fff;letter-spacing:-.3px;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.phase-banner-desc { font-size:13px;color:rgba(255,255,255,.82);margin-top:3px;line-height:1.6 }
.phase-banner-tags { display:flex;gap:7px;flex-wrap:wrap;margin-top:8px }
.phase-banner-tag {
  padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2);
}

/* ── Page Hero (배너 아래 타이틀 행) ────────────────────────── */
.page-hero {
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.page-hero-icon {
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.page-hero-badge {
  font-size:11px;font-weight:800;padding:2px 9px;border-radius:9999px;
  display:inline-block;margin-bottom:4px;
}
.page-hero-name {
  font-size:22px;font-weight:900;color:var(--text);margin:0;letter-spacing:-.3px;
}
.page-hero-desc { margin:4px 0 0;font-size:13px;color:var(--text3);line-height:1.6 }
.page-hero-skill {
  font-size:11px;border-radius:4px;padding:1px 6px;
  font-family:'JetBrains Mono','Courier New',monospace;
}

/* ── Page Title ─────────────────────────────────────────────── */
.page-title {
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;padding-bottom:14px;
  border-bottom:2px solid var(--border);
}
.page-num {
  width:42px;height:42px;border-radius:var(--r-sm);
  color:#fff;font-size:19px;font-weight:900;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 3px 12px rgba(37,99,235,.35);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.page-name { font-size:23px;font-weight:800;color:var(--text);letter-spacing:-.4px;line-height:1.2 }
.page-eng  { font-size:13.5px;color:var(--text2);margin-top:4px;font-family:monospace;font-weight:600;letter-spacing:.2px }
.page-badge {
  margin-left:auto;font-size:11.5px;padding:4px 12px;border-radius:var(--r-full);
  border:1.5px solid var(--border);color:var(--text2);background:var(--bg2);
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
}

/* ── Grid ───────────────────────────────────────────────────── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px }
.grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
@media(max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr } }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr } }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:linear-gradient(145deg,#ffffff,#f8fafc);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--med), transform var(--med);
  position:relative;
  overflow:hidden;
}
.card::before {
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  opacity:.35;
}
.card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px) }
.card:hover::before { opacity:.75 }
.card-title {
  font-size:11.5px;font-weight:800;color:var(--text2);
  text-transform:uppercase;letter-spacing:1.4px;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1.5px solid var(--border2);
}
.card-sm {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:9px 11px;
}

/* Colored top-accent card */
.card-accent {
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.card-accent::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
}

/* Section card (left colored border) */
.section-card {
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:11px 14px;
  margin-bottom:7px;
  border-left:4px solid var(--accent);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--med), transform var(--med);
}
.section-card:hover { box-shadow:var(--shadow-sm);transform:translateX(2px) }

/* ── Notice ─────────────────────────────────────────────────── */
.notice {
  background:var(--accent-light);
  border:1.5px solid rgba(37,99,235,.18);
  border-radius:var(--r-md);
  padding:9px 13px;
  font-size:14px;
  color:var(--text);
  display:flex;gap:9px;align-items:flex-start;
  border-left:4px solid var(--accent);
  line-height:1.55;
}
.notice-warn    { background:var(--yellow-bg);border-color:rgba(217,119,6,.18);border-left-color:var(--yellow) }
.notice-success { background:var(--green-bg);border-color:rgba(22,163,74,.18);border-left-color:var(--green) }
.notice-error   { background:var(--red-bg);border-color:rgba(220,38,38,.18);border-left-color:var(--red) }
.notice-icon    { flex-shrink:0;font-size:17px;margin-top:1px }

/* ── Stats ──────────────────────────────────────────────────── */
.stat-row { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-bottom:14px }
.stat-box {
  background:linear-gradient(145deg,#ffffff,#f0f6ff);
  border:1.5px solid rgba(37,99,235,.18);
  border-top:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:12px 10px;
  text-align:center;
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--med), transform var(--med);
}
.stat-box:hover { box-shadow:0 6px 20px rgba(37,99,235,.15);transform:translateY(-2px) }
.stat-val { font-size:32px;font-weight:900;color:var(--accent);letter-spacing:-1.5px;line-height:1 }
.stat-lbl {
  font-size:11px;color:var(--text2);text-transform:uppercase;
  letter-spacing:1px;margin-top:5px;font-weight:700;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:12px }
label {
  display:block;font-size:12.5px;font-weight:800;color:var(--text);
  margin-bottom:7px;text-transform:uppercase;letter-spacing:.7px;
}
input[type=text], textarea, select {
  width:100%;background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);padding:8px 12px;
  font-size:14.5px;font-weight:500;
  transition:border-color var(--fast), box-shadow var(--fast);
  font-family:inherit;
}
input[type=text]:focus, textarea:focus, select:focus {
  outline:none;border-color:var(--accent);box-shadow:var(--ring);
}
input::placeholder, textarea::placeholder { color:var(--text3);font-weight:400 }
textarea { resize:vertical;min-height:80px;line-height:1.6 }

.tag-input {
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-sm);min-height:46px;cursor:text;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.tag-input:focus-within { border-color:var(--accent);box-shadow:var(--ring) }
.tag {
  display:inline-flex;align-items:center;gap:5px;
  background:var(--accent-light);border:1.5px solid rgba(37,99,235,.2);
  border-radius:var(--r-xs);padding:3px 9px;
  font-size:14px;color:var(--accent);font-weight:600;
}
.tag-x { cursor:pointer;color:var(--text3);font-size:12px;line-height:1;transition:color var(--fast) }
.tag-x:hover { color:var(--red) }
.tag-in { background:none;border:none;color:var(--text);font-size:15px;outline:none;min-width:80px;flex:1;font-family:inherit }

.checkbox-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px }
.cb-item {
  display:flex;align-items:center;gap:7px;padding:7px 10px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;transition:all var(--fast);
}
.cb-item:hover { border-color:var(--accent);background:var(--accent-light) }
.cb-item input { display:none }
.cb-box {
  width:17px;height:17px;border:2px solid var(--border);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--fast);background:var(--bg);
}
.cb-item input:checked ~ .cb-box { background:var(--accent);border-color:var(--accent) }
.cb-box::after { content:'✓';font-size:11px;color:#fff;display:none;font-weight:800 }
.cb-item input:checked ~ .cb-box::after { display:block }
.cb-label { font-size:13.5px;color:var(--text);font-weight:600 }
.cb-item:has(input:checked) { border-color:rgba(37,99,235,.3);background:var(--accent-light) }
.cb-item:has(input:checked) .cb-label { color:var(--accent);font-weight:600 }

.radio-group { display:flex;gap:6px;flex-wrap:wrap }
.radio-btn {
  padding:5px 12px;border:1.5px solid var(--border);border-radius:var(--r-full);
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);
  transition:all var(--fast);user-select:none;background:var(--bg);
}
.radio-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-light) }
.radio-btn.active {
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-light);font-weight:700;
  box-shadow:0 1px 4px rgba(37,99,235,.15);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;cursor:pointer;border:none;
  transition:all var(--fast);font-family:inherit;
  white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg,#3b82f6,var(--accent2));
  color:#fff;box-shadow:0 2px 10px rgba(37,99,235,.35);
}
.btn-primary:hover {
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  box-shadow:0 4px 16px rgba(37,99,235,.45);transform:translateY(-1px);
}
.btn-secondary {
  background:var(--bg);color:var(--text);
  border:1.5px solid var(--border);box-shadow:var(--shadow-xs);
}
.btn-secondary:hover {
  background:var(--bg2);border-color:var(--accent);color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.btn-success {
  background:linear-gradient(135deg,#22c55e,var(--green));
  color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.3);
}
.btn-success:hover { background:linear-gradient(135deg,var(--green),var(--green2));transform:translateY(-1px) }
.btn-danger {
  background:linear-gradient(135deg,#f87171,var(--red));
  color:#fff;box-shadow:0 2px 10px rgba(220,38,38,.25);
}
.btn-danger:hover { transform:translateY(-1px) }
.btn-ghost {
  background:transparent;color:var(--text);border:1.5px solid var(--border);
}
.btn-ghost:hover { background:var(--bg2);border-color:var(--text2);color:var(--text) }
.btn-lg  { padding:9px 22px;font-size:15px }
.btn-sm  { padding:5px 11px;font-size:13px }
.btn-full { width:100%;justify-content:center }
.btn-group { display:flex;gap:8px;flex-wrap:wrap }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:700;border:1.5px solid;
}
.badge-blue   { background:var(--accent-light);color:var(--accent);border-color:rgba(37,99,235,.25) }
.badge-green  { background:var(--green-bg);color:var(--green2);border-color:rgba(22,163,74,.25) }
.badge-yellow { background:var(--yellow-bg);color:var(--yellow);border-color:rgba(217,119,6,.25) }
.badge-orange { background:var(--orange-bg);color:var(--orange);border-color:rgba(234,88,12,.25) }
.badge-red    { background:var(--red-bg);color:var(--red);border-color:rgba(220,38,38,.25) }
.badge-purple { background:var(--purple-bg);color:var(--purple);border-color:rgba(124,58,237,.25) }
.badge-teal   { background:var(--teal-bg);color:var(--teal);border-color:rgba(8,145,178,.25) }

/* ── Dividers ────────────────────────────────────────────────── */
.divider { height:1.5px;background:var(--border);margin:14px 0 }
.divider-label { display:flex;align-items:center;gap:10px;margin:16px 0 }
.divider-label span {
  font-size:12px;color:var(--text);text-transform:uppercase;
  letter-spacing:1.4px;white-space:nowrap;font-weight:800;
  padding:3px 12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-full);
}
.divider-label::before, .divider-label::after { content:'';flex:1;height:1.5px;background:var(--border) }

/* ── Code Block ──────────────────────────────────────────────── */
.code-block {
  background:#0d1b2e;
  border:1.5px solid #1e3a5f;
  border-radius:var(--r-md);
  padding:18px 20px;
  font-family:'JetBrains Mono','Fira Code','Cascadia Code','Courier New',monospace;
  font-size:14px;line-height:1.9;white-space:pre-wrap;word-break:break-all;
  color:#e2e8f0;overflow-y:auto;position:relative;max-height:480px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
}
.copy-bar { display:flex;justify-content:flex-end;gap:8px;margin-top:10px }

/* ── Meter ───────────────────────────────────────────────────── */
.meter {
  height:7px;background:var(--bg3);border-radius:var(--r-full);
  overflow:hidden;margin:6px 0;border:1px solid var(--border);
}
.meter-fill { height:100%;border-radius:var(--r-full);transition:width .65s var(--ease) }

/* ── Axis Bar ────────────────────────────────────────────────── */
.axis-row { display:flex;align-items:center;gap:10px;margin-bottom:10px }
.axis-label { width:122px;font-size:13.5px;color:var(--text);flex-shrink:0;font-weight:700 }
.axis-bar { flex:1;height:8px;background:var(--bg3);border-radius:var(--r-full);overflow:hidden;border:1px solid var(--border) }
.axis-fill { height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width .65s var(--ease) }
.axis-num { width:28px;text-align:right;font-size:13.5px;color:var(--text);font-weight:800 }

/* ── Progress Steps ──────────────────────────────────────────── */
.progress-steps {
  display:flex;align-items:stretch;margin-bottom:14px;
  overflow-x:auto;border-radius:var(--r-sm);
  border:1.5px solid var(--border);overflow:hidden;
  box-shadow:var(--shadow-xs);background:var(--bg2);
}
.ps {
  display:flex;align-items:center;gap:6px;padding:7px 12px;
  font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;
  background:var(--bg2);transition:background var(--fast);
  flex:1;justify-content:center;
}
.ps + .ps { border-left:1.5px solid var(--border) }
.ps.done {
  color:var(--green2);background:var(--green-bg);font-weight:600;
}
.ps.active {
  color:var(--accent);background:var(--accent-light);font-weight:700;
  border-bottom:2.5px solid var(--accent);
}
.ps-num {
  width:19px;height:19px;border-radius:50%;
  background:var(--border);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--text3);
}
.ps.active .ps-num { background:var(--accent);color:#fff;box-shadow:0 1px 5px rgba(37,99,235,.35) }
.ps.done  .ps-num { background:var(--green);color:#fff }

/* ── Model Tags ──────────────────────────────────────────────── */
.mtag { font-size:11.5px;padding:2px 7px;border-radius:var(--r-xs);font-weight:700;letter-spacing:.2px }
.mtag-haiku  { background:rgba(22,163,74,.1);color:var(--haiku-c);border:1px solid rgba(22,163,74,.2) }
.mtag-sonnet { background:rgba(37,99,235,.1);color:var(--sonnet-c);border:1px solid rgba(37,99,235,.2) }
.mtag-opus   { background:rgba(124,58,237,.1);color:var(--opus-c);border:1px solid rgba(124,58,237,.2) }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px;height:5px }
::-webkit-scrollbar-track { background:var(--bg2) }
::-webkit-scrollbar-thumb { background:var(--bg4);border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--text3) }

/* ── Page Nav ────────────────────────────────────────────────── */
.page-nav {
  display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;padding-top:24px;border-top:2px solid var(--border);
}
.page-nav-center { text-align:center;font-size:12.5px;color:var(--text2);font-weight:700;letter-spacing:.5px }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state { text-align:center;padding:60px 20px;color:var(--text3) }
.empty-icon  { font-size:58px;margin-bottom:16px }
.empty-text  { font-size:18px;font-weight:700;color:var(--text) }
.empty-sub   { font-size:15px;margin-top:8px;color:var(--text2);line-height:1.6 }

/* ── Index Hero ──────────────────────────────────────────────── */
.hero {
  text-align:center;
  padding:60px 24px 44px;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% -20%,rgba(37,99,235,.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero-logo {
  font-size:74px;font-weight:900;letter-spacing:-4px;
  color:var(--text);position:relative;line-height:1;
}
.hero-logo span {
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-full {
  font-size:14px;color:var(--text2);letter-spacing:4px;
  text-transform:uppercase;margin-top:10px;font-weight:700;
}
.hero-desc {
  font-size:17.5px;color:var(--text);margin-top:18px;
  max-width:580px;margin-left:auto;margin-right:auto;
  line-height:1.8;font-weight:500;
}
.hero-badges {
  display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap;
}
.hero-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-full);padding:6px 15px;
  font-size:13px;color:var(--text);font-weight:600;
  box-shadow:var(--shadow-xs);
}
.dot-green {
  width:7px;height:7px;border-radius:50%;
  background:var(--green);animation:pulse-dot 2s infinite;flex-shrink:0;
}
@keyframes pulse-dot {
  0%,100% { opacity:1;transform:scale(1) }
  50%      { opacity:.45;transform:scale(.8) }
}

/* ── Menu Grid (index) ───────────────────────────────────────── */
.menu-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(295px,1fr));
  gap:14px;margin-top:28px;
}
.menu-card {
  background:linear-gradient(155deg,#f8fafc 0%,#ffffff 60%);
  border:1.5px solid var(--border);
  border-left:4px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px 16px;
  cursor:pointer;
  transition:all var(--med);
  text-decoration:none;
  display:block;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.menu-card::after {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  transform:scaleX(0);transform-origin:left;transition:transform var(--med);
}
.menu-card:hover {
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
}
.menu-card:hover::after { transform:scaleX(1) }
.menu-card-top { display:flex;align-items:center;gap:13px;margin-bottom:11px }
.menu-num {
  width:40px;height:40px;border-radius:var(--r-sm);
  color:#fff;font-size:19px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.menu-title { font-size:16.5px;font-weight:700;color:var(--text);line-height:1.25 }
.menu-eng   { font-size:11.5px;color:var(--text2);font-family:monospace;margin-top:2px;font-weight:600 }
.menu-desc  { font-size:14px;color:var(--text);line-height:1.65 }
.menu-footer {
  display:flex;align-items:center;gap:6px;
  margin-top:13px;padding-top:11px;
  border-top:1px solid var(--border2);
}
.menu-tag {
  font-size:11.5px;padding:2px 8px;border-radius:var(--r-full);
  border:1px solid var(--border);color:var(--text2);background:var(--bg2);font-weight:600;
}
.menu-arrow { margin-left:auto;color:var(--text2);font-size:16px;transition:color var(--fast) }
.menu-card:hover .menu-arrow { color:var(--accent);transform:translateX(3px) }
.status-dot     { width:7px;height:7px;border-radius:50%;flex-shrink:0 }
.status-required{ background:var(--red) }
.status-auto    { background:var(--yellow) }
.status-output  { background:var(--green) }

/* ── How Grid (index) ────────────────────────────────────────── */
.how-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px }
@media(max-width:700px){ .how-grid { grid-template-columns:1fr } }
.how-card {
  background:linear-gradient(145deg,#ffffff,#f8fafc);
  border:1.5px solid var(--border);
  border-top:3px solid var(--border);
  border-radius:var(--r-lg);padding:14px;text-align:center;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--med), transform var(--med);
}
.how-card:hover { box-shadow:var(--shadow-md);transform:translateY(-2px) }
.how-num {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;box-shadow:0 2px 10px rgba(37,99,235,.3);
}
.how-title { font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:7px }
.how-desc  { font-size:14px;color:var(--text);line-height:1.65;font-weight:500 }

/* ── Proj Bar (index) ────────────────────────────────────────── */
.proj-bar {
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:15px 20px;
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.proj-bar-icon   { font-size:28px }
.proj-bar-info   { flex:1 }
.proj-bar-name   { font-size:16.5px;font-weight:800;color:var(--text) }
.proj-bar-sub    { font-size:13px;color:var(--text2);margin-top:3px;font-weight:500 }
.proj-bar-actions{ display:flex;gap:8px }

/* ── Model Tags (squad/token) ────────────────────────────────── */
.model-badge      { font-size:11px;padding:2px 7px;border-radius:var(--r-xs);font-weight:700 }
.model-haiku   { background:rgba(22,163,74,.1);color:var(--green2);border:1px solid rgba(22,163,74,.25) }
.model-sonnet  { background:rgba(37,99,235,.1);color:var(--accent);border:1px solid rgba(37,99,235,.25) }
.model-opus    { background:rgba(124,58,237,.1);color:var(--purple);border:1px solid rgba(124,58,237,.25) }
.model-ext     { background:rgba(234,88,12,.1);color:var(--orange);border:1px solid rgba(234,88,12,.25) }

/* ── Footer ──────────────────────────────────────────────────── */
.vcos-footer {
  background:linear-gradient(135deg,#0c1852 0%,#1a3db8 50%,#0d2478 100%);
  margin-top:0;
}
.footer-inner { max-width:1400px;margin:0 auto;padding:14px 24px 10px }
.footer-top {
  display:grid;grid-template-columns:1fr auto auto;gap:24px;
  align-items:flex-start;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media(max-width:700px){ .footer-top { grid-template-columns:1fr;gap:22px } }
.footer-brand .footer-logo {
  font-size:32px;font-weight:900;letter-spacing:-1.5px;color:#fff;
}
.footer-brand .footer-logo span {
  background:linear-gradient(135deg,#93c5fd,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-brand .footer-tagline {
  font-size:14px;color:rgba(255,255,255,.92);
  margin-top:7px;line-height:1.65;font-weight:500;max-width:220px;
}
.footer-badge {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-full);padding:4px 11px;font-size:12px;
  color:rgba(255,255,255,.9);margin-top:13px;font-weight:600;
}
.footer-col-title {
  font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:13px;
}
.footer-links { list-style:none;display:flex;flex-direction:column;gap:7px }
.footer-links a {
  font-size:14.5px;color:rgba(255,255,255,.95);text-decoration:none;
  display:flex;align-items:center;gap:8px;transition:color var(--fast);font-weight:500;
}
.footer-links a:hover { color:#fff }
.footer-links .fn {
  width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.18);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:rgba(255,255,255,.9);
}
.footer-nav { display:flex;gap:32px;align-items:flex-start }
.footer-nav-col { min-width:110px }
.footer-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:340px }
.footer-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;transition:all var(--fast);white-space:nowrap;
}
.footer-btn-primary { background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35) }
.footer-btn-primary:hover { background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55) }
.footer-btn-ghost { background:transparent;color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.3) }
.footer-btn-ghost:hover { color:#fff;border-color:rgba(255,255,255,.5) }
.footer-bottom {
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;flex-wrap:wrap;gap:8px;
}
.footer-copy  { font-size:13px;color:rgba(255,255,255,.82);font-weight:500 }
.footer-chips { display:flex;gap:6px;flex-wrap:wrap }
.footer-chip  {
  font-size:11.5px;color:rgba(255,255,255,.82);font-weight:600;
  background:rgba(255,255,255,.13);border-radius:var(--r-xs);padding:2px 8px;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM COLOR CARD SYSTEM — 섹션/카드/버튼 컬러 시스템
════════════════════════════════════════════════════════════ */

/* Tinted background cards */
.card-tint-blue   { background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:rgba(37,99,235,.25) }
.card-tint-green  { background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:rgba(22,163,74,.25) }
.card-tint-yellow { background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:rgba(217,119,6,.25) }
.card-tint-red    { background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:rgba(220,38,38,.25) }
.card-tint-purple { background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-color:rgba(124,58,237,.25) }
.card-tint-orange { background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:rgba(234,88,12,.25) }
.card-tint-teal   { background:linear-gradient(135deg,#ecfeff,#cffafe);border-color:rgba(8,145,178,.25) }

/* Gradient header inside card */
.card-header-blue   { background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;padding:9px 14px;margin:-14px -16px 12px;font-size:12.5px;font-weight:700;letter-spacing:.5px }
.card-header-green  { background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;padding:9px 14px;margin:-14px -16px 12px;font-size:12.5px;font-weight:700;letter-spacing:.5px }
.card-header-purple { background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;padding:9px 14px;margin:-14px -16px 12px;font-size:12.5px;font-weight:700;letter-spacing:.5px }
.card-header-orange { background:linear-gradient(135deg,#ea580c,#c2410c);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;padding:9px 14px;margin:-14px -16px 12px;font-size:12.5px;font-weight:700;letter-spacing:.5px }
.card-header-red    { background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;padding:9px 14px;margin:-14px -16px 12px;font-size:12.5px;font-weight:700;letter-spacing:.5px }

/* Colored stat boxes */
.stat-box-blue   { border-color:rgba(37,99,235,.3);background:linear-gradient(135deg,#eff6ff,#fff) }
.stat-box-green  { border-color:rgba(22,163,74,.3);background:linear-gradient(135deg,#f0fdf4,#fff) }
.stat-box-purple { border-color:rgba(124,58,237,.3);background:linear-gradient(135deg,#f5f3ff,#fff) }
.stat-box-orange { border-color:rgba(234,88,12,.3);background:linear-gradient(135deg,#fff7ed,#fff) }
.stat-box-red    { border-color:rgba(220,38,38,.3);background:linear-gradient(135deg,#fef2f2,#fff) }
.stat-box-teal   { border-color:rgba(8,145,178,.3);background:linear-gradient(135deg,#ecfeff,#fff) }

/* Colored section cards (left border variants) */
.section-card-blue   { border-left-color:var(--accent) }
.section-card-green  { border-left-color:var(--green) }
.section-card-yellow { border-left-color:var(--yellow) }
.section-card-red    { border-left-color:var(--red) }
.section-card-purple { border-left-color:var(--purple) }
.section-card-orange { border-left-color:var(--orange) }
.section-card-teal   { border-left-color:var(--teal) }

/* Premium button variants */
.btn-blue-outline {
  background:var(--accent-light);color:var(--accent);border:1.5px solid rgba(37,99,235,.35);
  box-shadow:0 1px 4px rgba(37,99,235,.12);
}
.btn-blue-outline:hover { background:linear-gradient(135deg,#dbeafe,var(--accent-light));border-color:var(--accent);box-shadow:0 2px 10px rgba(37,99,235,.2);transform:translateY(-1px) }
.btn-green-outline {
  background:var(--green-bg);color:var(--green2);border:1.5px solid rgba(22,163,74,.3);
}
.btn-green-outline:hover { background:linear-gradient(135deg,#dcfce7,var(--green-bg));border-color:var(--green);transform:translateY(-1px) }
.btn-purple-outline {
  background:var(--purple-bg);color:var(--purple);border:1.5px solid rgba(124,58,237,.3);
}
.btn-purple-outline:hover { background:linear-gradient(135deg,#ede9fe,var(--purple-bg));border-color:var(--purple);transform:translateY(-1px) }

/* Gradient borders via box-shadow */
.border-gradient-blue   { box-shadow:0 0 0 2px rgba(37,99,235,.35),var(--shadow-sm) }
.border-gradient-green  { box-shadow:0 0 0 2px rgba(22,163,74,.35),var(--shadow-sm) }
.border-gradient-purple { box-shadow:0 0 0 2px rgba(124,58,237,.35),var(--shadow-sm) }
.border-gradient-orange { box-shadow:0 0 0 2px rgba(234,88,12,.35),var(--shadow-sm) }

/* Page section banners */
.section-banner {
  display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-radius:var(--r-lg);margin-bottom:12px;
  border:1.5px solid;position:relative;overflow:hidden;
}
.section-banner::before {
  content:'';position:absolute;right:-20px;top:-20px;
  width:100px;height:100px;border-radius:50%;
  background:currentColor;opacity:.05;pointer-events:none;
}
.section-banner-blue   { background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:rgba(37,99,235,.3);color:var(--accent) }
.section-banner-amber  { background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:rgba(217,119,6,.3);color:var(--yellow) }
.section-banner-red    { background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:rgba(220,38,38,.3);color:var(--red) }
.section-banner-green  { background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:rgba(22,163,74,.3);color:var(--green) }
.section-banner-purple { background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-color:rgba(124,58,237,.3);color:var(--purple) }
.section-banner-orange { background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:rgba(234,88,12,.3);color:var(--orange) }
.section-banner-sky    { background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:rgba(3,105,161,.3);color:#0369a1 }
.section-banner-icon   { font-size:26px;flex-shrink:0 }
.section-banner-title  { font-size:17px;font-weight:800;color:var(--text) }
.section-banner-sub    { font-size:12.5px;color:var(--text2);margin-top:2px;font-weight:500 }