/* =============================================
   Onlyone OneChat — Version Manager
   ============================================= */

:root {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-hover: #334155;
  --border: #334155;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;
  --brand: #3b82f6;
  --green: #22c55e;
  --green-bg: #14532d30;
  --yellow: #eab308;
  --yellow-bg: #713f1230;
  --red: #ef4444;
  --red-bg: #7f1d1d30;
  --radius: 12px;
  --sidebar-w: 240px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Apple SD Gothic Neo','Pretendard','Malgun Gothic',sans-serif;
  background: #0a0f1a; color: var(--text); line-height:1.6;
  overflow-x: hidden;
}

/* ── Layout ── */
.vm-layout { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.vm-sidebar {
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:100; overflow-y:auto;
}
.vm-brand {
  display:flex; align-items:center; gap:10px;
  padding:20px 18px; border-bottom:1px solid var(--border);
}
.vm-brand-icon { font-size:24px; }
.vm-brand-text strong { display:block; font-size:15px; color:var(--text); }
.vm-brand-text small { font-size:11px; color:var(--text3); }

.vm-nav {
  flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:2px;
}
.vm-nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; color:var(--text2); font-size:14px;
  transition:all 0.15s;
}
.vm-nav-link:hover { background:var(--bg-hover); color:var(--text); }
.vm-nav-link.active { background: var(--brand); color:#fff; font-weight:600; }
.vm-nav-link span { font-size:16px; width:22px; text-align:center; }

.vm-sidebar-footer {
  padding:14px 18px; border-top:1px solid var(--border);
}
.vm-current-mini {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:var(--bg-card); border-radius:20px;
  font-size:13px; font-weight:600; color:var(--green);
}
.vm-dot { width:7px; height:7px; border-radius:50%; background: var(--green); }
.vm-dot.live { animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Main Content ── */
.vm-main {
  flex:1; margin-left: var(--sidebar-w);
  padding:28px 32px 60px;
}

/* ── Top bar ── */
.vm-topbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.vm-topbar h1 { font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.vm-topbar-right { display:flex; align-items:center; gap:10px; }

.vm-pill {
  padding:5px 14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; font-size:12px; color:var(--text2);
}

/* ── Cards Grid ── */
.vm-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.vm-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  display:flex; align-items:center; gap:14px;
}
.vm-card-icon { font-size:28px; }
.vm-card-value { font-size:24px; font-weight:800; color:var(--text); }
.vm-card-label { font-size:12px; color:var(--text3); margin-top:2px; }

/* ── Panel ── */
.vm-panel {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px; margin-bottom:20px;
}
.vm-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; flex-wrap:wrap; gap:8px;
}
.vm-panel-header h2 { font-size:16px; font-weight:700; }
.vm-panel-desc { font-size:13px; color:var(--text3); }
.vm-link { color:var(--brand); text-decoration:none; font-size:13px; }
.vm-link:hover { text-decoration:underline; }

/* ── Grid 2 col ── */
.vm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }

/* ── Release Options ── */
.vm-release-options { display:flex; flex-direction:column; gap:8px; }
.vm-release-opt {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; background: var(--bg);
  border:1px solid var(--border); border-radius:10px;
  cursor:pointer; transition:all 0.15s;
}
.vm-release-opt:hover { border-color: var(--brand); background:var(--bg-hover); }
.vm-opt-icon { font-size:24px; flex-shrink:0; }
.vm-opt-info { flex:1; }
.vm-opt-info strong { display:block; font-size:14px; color:var(--text); margin-bottom:2px; }
.vm-opt-info code { font-size:12px; color:var(--text3); background:var(--bg-card); padding:2px 8px; border-radius:4px; }

.vm-radio-opt { cursor:pointer; }
.vm-radio-opt input[type="radio"] { margin-right:0; accent-color:var(--brand); }
.vm-radio-opt:has(input:checked) { border-color: var(--brand); background:rgba(59,130,246,0.08); }

/* ── Buttons ── */
.vm-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 20px; border-radius:8px; border:none;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.15s; text-decoration:none; white-space:nowrap;
}
.vm-btn-primary { background:var(--brand); color:#fff; }
.vm-btn-primary:hover { filter:brightness(1.15); transform:translateY(-1px); }
.vm-btn-green  { background:var(--green); color:#000; }
.vm-btn-yellow { background:var(--yellow); color:#000; }
.vm-btn-red    { background:var(--red); color:#fff; }
.vm-btn-ghost  { background:transparent; border:1px solid var(--border); color:var(--text2); }
.vm-btn-ghost:hover { background:var(--bg-hover); color:var(--text); }
.vm-btn-sm { padding:5px 12px; font-size:12px; }
.vm-btn-lg { padding:14px 32px; font-size:16px; width:100%; justify-content:center; }
.vm-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* ── Filter Tabs ── */
.vm-filter-tabs {
  display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap;
}
.vm-filter-tab {
  padding:7px 16px; border-radius:20px; text-decoration:none;
  font-size:13px; color:var(--text2); background:var(--bg-card);
  border:1px solid var(--border); transition:all 0.15s;
}
.vm-filter-tab:hover { border-color:var(--brand); }
.vm-filter-tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.vm-tab-red.active { background:var(--red); border-color:var(--red); }
.vm-tab-yellow.active { background: var(--yellow); color:#000; border-color:var(--yellow); }
.vm-tab-green.active { background: var(--green); color:#000; border-color:var(--green); }

/* ── List ── */
.vm-list { display:flex; flex-direction:column; }
.vm-list-row {
  display:flex; align-items:center; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.vm-list-row:last-child { border-bottom:none; padding-bottom:0; }
.vm-list-icon { font-size:16px; width:24px; text-align:center; }
.vm-list-content { flex:1; }
.vm-list-content strong { display:block; font-size:13px; color:var(--text); }
.vm-list-content small { font-size:11px; color:var(--text3); }
.vm-list-meta { font-size:12px; color:var(--text3); white-space:nowrap; }

/* ── Empty state ── */
.vm-empty {
  text-align:center; padding:40px 20px; color:var(--text3); font-size:14px;
}
.vm-empty-hint { text-align:center; color:var(--text3); font-size:12px; margin-top:-12px; margin-bottom:16px; }

/* ── History Timeline ── */
.vm-history-timeline { position:relative; padding-left:32px; }
.vm-history-timeline::before {
  content:''; position:absolute; left:11px; top:4px; bottom:4px;
  width:2px; background:var(--border);
}
.vm-timeline-item { display:flex; gap:14px; margin-bottom:16px; position:relative; }
.vm-timeline-marker {
  width:24px; height:24px; border-radius:50%; background:var(--bg-card);
  border:2px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:12px; flex-shrink:0;
  position:absolute; left:-32px; z-index:1;
}
.vm-timeline-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:14px 18px; flex:1;
}
.vm-timeline-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.vm-timeline-date { font-size:12px; color:var(--text3); }
.vm-timeline-note { font-size:13px; color:var(--text2); }
.vm-timeline-meta { margin-top:8px; font-size:12px; color:var(--text3); }
.vm-ver-from { font-size:12px; color:var(--text3); }

/* ── Version Badge ── */
.vm-ver-badge {
  padding:3px 10px; border-radius:4px; font-size:12px; font-weight:700;
}
.vm-ver-major  { background:var(--red-bg); color:var(--red); }
.vm-ver-minor  { background:var(--yellow-bg); color:var(--yellow); }
.vm-ver-patch  { background:var(--green-bg); color:var(--green); }
.vm-ver-released { background:var(--green-bg); color:var(--green); }
.vm-ver-pending  { background:rgba(250,204,21,0.1); color:var(--yellow); }

/* ── Tag ── */
.vm-tag {
  display:inline-block; padding:2px 8px; background:var(--bg-hover);
  border-radius:4px; font-size:11px; color:var(--text2);
}

/* ── Table ── */
.vm-table-wrap { overflow-x:auto; }
.vm-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.vm-table th {
  text-align:left; padding:10px 14px; color:var(--text3);
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; border-bottom:2px solid var(--border);
}
.vm-table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.vm-table tbody tr:hover { background:var(--bg-hover); }

/* ── Form ── */
.vm-form { display:flex; flex-direction:column; gap:10px; }
.vm-input, .vm-textarea {
  width:100%; padding:10px 14px; background:var(--bg);
  border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:14px; font-family:inherit;
  transition:border-color 0.15s;
}
.vm-input:focus, .vm-textarea:focus { border-color:var(--brand); outline:none; }
.vm-muted { color:var(--text3); }

/* ── Alert ── */
.vm-alert {
  padding:14px 20px; border-radius:var(--radius); margin-bottom:20px; font-size:14px;
}
.vm-alert-success { background:var(--green-bg); color:var(--green); border:1px solid var(--green); }

/* ── Result ── */
.vm-result {
  padding:24px; border-radius:var(--radius); margin-top:16px;
}
.vm-result-success { background:var(--green-bg); border:1px solid var(--green); }
.vm-result-success h3 { color:var(--green); margin-bottom:8px; }
.vm-result-error { background:var(--red-bg); border:1px solid var(--red); }
.vm-result-error h3 { color:var(--red); margin-bottom:8px; }

/* ── Improvements Checklist ── */
.vm-improvements-checklist {
  display:flex; flex-direction:column; gap:6px; max-height:400px; overflow-y:auto;
}
.vm-check-all {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:var(--bg); border-radius:8px;
  margin-bottom:4px; cursor:pointer; color:var(--text2); font-size:13px;
}
.vm-check-all input { accent-color:var(--brand); }
.vm-imp-check {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; background:var(--bg); border-radius:8px;
  cursor:pointer; border:1px solid transparent; transition:all 0.15s;
}
.vm-imp-check:hover { border-color:var(--border); }
.vm-imp-check:has(input:checked) { border-color:var(--brand); background:rgba(59,130,246,0.05); }
.vm-imp-check input { margin-top:3px; accent-color:var(--brand); flex-shrink:0; }
.vm-imp-check-body { flex:1; }
.vm-imp-check-body strong { display:block; font-size:13px; color:var(--text); margin-bottom:4px; }
.vm-imp-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text3); }

/* ── Preview (phone mockup) ── */
.vm-preview-box { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.vm-preview-phone {
  width:200px; background:#1a1a2e; border-radius:16px;
  overflow:hidden; border:2px solid var(--border); flex-shrink:0;
}
.vm-preview-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:linear-gradient(135deg,#1a1a2e,#0f3460);
  color:#fff; font-size:12px; font-weight:700;
}
.vm-preview-menu { padding:4px 0; }
.vm-preview-item {
  padding:8px 16px; font-size:12px; color:var(--text2);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.vm-preview-footer {
  padding:12px 14px; background:rgba(34,197,94,0.08);
  border-top:1px solid rgba(34,197,94,0.15);
}
.vm-preview-ver { font-size:11px; font-weight:700; color:var(--green); }
.vm-preview-info { flex:1; min-width:200px; }
.vm-preview-info h3 { font-size:15px; margin-bottom:8px; }
.vm-preview-info p { font-size:13px; color:var(--text2); margin-bottom:12px; }
.vm-preview-info code {
  display:block; padding:10px 14px; background:var(--bg);
  border-radius:6px; font-size:12px; color:var(--green);
}

/* ── Changelog ── */
.vm-changelog-header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vm-changelog-date { font-size:13px; color:var(--text3); }
.vm-changelog-type { font-size:12px; color:var(--text2); font-weight:600; }
.vm-changelog-note { margin-top:10px; font-size:14px; color:var(--text2); }
.vm-changelog-list { margin-top:8px; padding-left:20px; }
.vm-changelog-list li { font-size:13px; color:var(--text2); padding:3px 0; }
.vm-code-block {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:16px; font-size:13px; color:var(--text2); overflow-x:auto;
  font-family:'SF Mono','Consolas',monospace; white-space:pre-wrap;
}

/* ── Settings ── */
.vm-data-actions { display:flex; flex-direction:column; gap:12px; }
.vm-data-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px; background:var(--bg); border-radius:8px;
  flex-wrap:wrap;
}
.vm-data-info strong { display:block; font-size:14px; color:var(--text); margin-bottom:2px; }
.vm-data-info small { font-size:12px; color:var(--text3); }
.vm-status-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px; font-size:13px; color:var(--text2);
}
.vm-status-grid code { color:var(--green); background:var(--bg); padding:2px 8px; border-radius:4px; }

/* ── Site Selector (사이트 선택기) ── */
.vm-site-selector {
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.vm-site-selector-label {
  font-size:11px; color:var(--text3); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.vm-site-select {
  width:100%; padding:8px 12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; font-family:inherit;
  cursor:pointer; transition:border-color 0.15s;
}
.vm-site-select:focus { border-color:var(--brand); outline:none; }

/* ── Nav Divider ── */
.vm-nav-divider {
  height:1px; background:var(--border); margin:8px 14px;
}

/* ── Breadcrumb ── */
.vm-breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text2); margin-top:4px;
}
.vm-breadcrumb-sep { color:var(--text3); font-weight:bold; }
.vm-breadcrumb-env { color:var(--brand); font-weight:600; }

/* ── Section Title ── */
.vm-section-title {
  font-size:14px; font-weight:700; color:var(--text2);
  margin-bottom:12px; margin-top:4px;
  display:flex; align-items:center; gap:8px;
}

/* ── Environment Badge ── */
.vm-env-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px; font-size:11px;
  font-weight:600; white-space:nowrap;
}
.vm-env-production { background:rgba(34,197,94,0.12); color:var(--green); }
.vm-env-development { background:rgba(59,130,246,0.12); color:var(--brand); }
.vm-env-staging { background:rgba(234,179,8,0.12); color:var(--yellow); }

/* ── Pill Variants ── */
.vm-pill-production { color:var(--green); }
.vm-pill-development { color:var(--brand); }
.vm-pill-default { color:var(--text2); }

/* ── Table Row States ── */
.vm-row-active { background:rgba(59,130,246,0.06); }
.vm-row-active td { border-bottom-color:rgba(59,130,246,0.1); }
.vm-row-inactive { opacity:0.5; }

/* ── Filter Bar ── */
.vm-filter-bar {
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; font-size:13px; color:var(--text2);
}
.vm-filter-tag {
  display:inline-block; padding:5px 14px; border-radius:20px;
  text-decoration:none; font-size:12px; color:var(--text2);
  background:var(--bg); border:1px solid var(--border);
  transition:all 0.15s;
}
.vm-filter-tag:hover { border-color:var(--brand); color:var(--text); }
.vm-filter-tag.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ── Tag Variants ── */
.vm-tag-current { background:rgba(34,197,94,0.12); color:var(--green); }
.vm-tag-released { background:rgba(34,197,94,0.12); color:var(--green); }
.vm-tag-pending { background:rgba(234,179,8,0.12); color:var(--yellow); }
.vm-tag-major { background:var(--red-bg); color:var(--red); }
.vm-tag-minor { background:var(--yellow-bg); color:var(--yellow); }
.vm-tag-patch { background:var(--green-bg); color:var(--green); }

/* ── Timeline (재정의—신규 스타일) ── */
.vm-timeline { position:relative; padding-left:28px; }
.vm-timeline::before {
  content:''; position:absolute; left:11px; top:8px; bottom:8px;
  width:2px; background:var(--border);
}
.vm-timeline-item { display:flex; gap:12px; margin-bottom:20px; position:relative; }
.vm-timeline-item:last-child { margin-bottom:0; }
.vm-timeline-icon {
  width:24px; height:24px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
  position:absolute; left:-28px; z-index:1;
}
.vm-timeline-content {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:14px 18px; flex:1;
}
.vm-timeline-header {
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; margin-bottom:4px;
}
.vm-timeline-date { font-size:12px; color:var(--text3); margin-left:auto; }
.vm-timeline-from { font-size:12px; color:var(--text3); margin-bottom:4px; }
.vm-timeline-note {
  font-size:13px; color:var(--text2); margin-top:6px;
  background:var(--bg-card); padding:8px 12px; border-radius:6px;
}
.vm-timeline-changes {
  margin-top:10px; font-size:12px; color:var(--text2);
  background:rgba(59,130,246,0.04); padding:12px; border-radius:8px;
}
.vm-timeline-changes ul {
  list-style:none; padding:0; margin-top:6px;
}
.vm-timeline-changes ul li {
  padding:3px 0; display:flex; align-items:center; gap:6px;
}

/* ── Detail Grid ── */
.vm-detail-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.vm-detail-item {
  padding:12px 14px; background:var(--bg); border-radius:8px;
}
.vm-detail-label {
  font-size:11px; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:4px;
}
.vm-detail-value {
  font-size:14px; color:var(--text); word-break:break-all;
}
.vm-detail-value a { color:var(--brand); text-decoration:none; }
.vm-detail-value a:hover { text-decoration:underline; }

/* ── Relation Card ── */
.vm-relation-card {
  display:flex; align-items:center; gap:14px;
  padding:16px; background:var(--bg); border-radius:10px;
}

/* ── Form Grid ── */
.vm-form-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.vm-form-group label {
  display:block; margin-bottom:4px; font-size:13px;
  font-weight:600; color:var(--text2);
}

/* ── Config Table ── */
.vm-config-table {
  display:flex; flex-direction:column;
}
.vm-config-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:8px;
}
.vm-config-row:last-child { border-bottom:none; padding-bottom:0; }
.vm-config-label {
  font-size:13px; color:var(--text3); min-width:160px;
}
.vm-config-value {
  font-size:14px; color:var(--text); text-align:right;
}
.vm-config-value a { color:var(--brand); text-decoration:none; }
.vm-config-value a:hover { text-decoration:underline; }

/* ── Directory Tree ── */
.vm-directory-tree {
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:16px; overflow-x:auto;
}
.vm-directory-tree pre {
  font-family:'SF Mono','Consolas',monospace;
  font-size:12px; color:var(--text2); line-height:1.8;
  white-space:pre;
}

/* ── Version Badge (CHANGELOG) ── */
.vm-version-badge {
  display:inline-block; padding:4px 12px;
  background:linear-gradient(135deg,var(--brand),#1d4ed8);
  color:#fff; border-radius:6px; font-size:14px; font-weight:700;
}

/* ── Changelog Entry ── */
.vm-changelog-entry { margin-bottom:20px; }
.vm-changelog-header {
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:12px;
}
.vm-changelog-meta {
  display:flex; align-items:center; gap:8px;
}
.vm-changelog-changes {
  margin-top:12px; font-size:13px; color:var(--text2);
}
.vm-changelog-changes ul {
  list-style:none; padding:0; margin-top:8px;
}
.vm-changelog-changes ul li {
  padding:4px 0; display:flex; align-items:center; gap:6px;
}

/* ── Outlined Button ── */
.vm-btn-outline {
  background:transparent; border:1px solid var(--border);
  color:var(--text2);
}
.vm-btn-outline:hover { background:var(--bg-hover); color:var(--text); border-color:var(--text2); }

/* ── Responsive ── */
@media(max-width:960px) {
  .vm-cards { grid-template-columns:repeat(2,1fr); }
  .vm-grid-2 { grid-template-columns:1fr; }
  .vm-form-grid { grid-template-columns:1fr; }
  .vm-detail-grid { grid-template-columns:1fr; }
  .vm-sidebar { display:none; }
  .vm-main { margin-left:0; padding:20px 16px 40px; }
  .vm-topbar h1 { font-size:20px; }
  .vm-config-row { flex-direction:column; align-items:flex-start; }
  .vm-config-value { text-align:left; }
}