/* 좌우아카이브 - Production UI (White theme) */

:root{
  --bg:#ffffff;
  
  --line: rgba(15,23,42,.12);
  --text:#0f172a;
  --muted:#5b6473;
  --accent:#2563eb;
  --accent2:#7c3aed;
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --shadow: 0 10px 26px rgba(2,6,23,.07); /* ✅ 하단 밴드처럼 보이는 그림자 완화 */
  --radius: 18px;
  --radius2: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Apple SD Gothic Neo, "Malgun Gothic", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(1140px, calc(100% - 32px)); margin:0 auto; }

header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 0 12px;
}

.topbar{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; justify-content:space-between; }
.brand{ display:flex; gap:12px; align-items:center; min-width: 220px; }
.brandLogo{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  display:grid; place-items:center;
  font-weight: 950;
  overflow:hidden;
  user-select:none;
}
.brandLogo img{ width:100%; height:100%; object-fit: cover; display:block; }
.brandTitle{ display:grid; gap: 4px; }
.brandTitle h1{ margin:0; font-size: 16px; letter-spacing:.2px; line-height:1.2; }
.brandTitle p{ margin:0; font-size: 12px; color: var(--muted); line-height:1.45; }

.navRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.navLink{
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .15s ease;
}
.navLink:hover{ background: rgba(2,6,23,.02); }
.navLink:active{ transform: scale(.99); }
.navLink.active{
  border-color: rgba(37,99,235,.30);
  background: rgba(37,99,235,.07);
  font-weight: 900;
}

/* ✅ 하단 빈 공간 제거: footer와 배경이 갈라져 보이는 원인 제거 */
main{ padding: 18px 0 0; }

.panel{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panelHeader{
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(2,6,23,.02);
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  justify-content:space-between;
}
.panelHeader h2{ margin:0; font-size: 13px; letter-spacing:.2px; font-weight: 950; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.panelHeader .meta{ font-size: 12px; color: var(--muted); display:flex; flex-wrap:wrap; gap: 6px 10px; align-items:center; justify-content:flex-end; }
.panelBody{ padding: 12px 14px 14px; }

.badge{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.86);
  white-space: nowrap;
  user-select:none;
  font-weight: 900;
}
.badge.accent{ border-color: rgba(37,99,235,.24); background: rgba(37,99,235,.07); }
.badge.accent2{ border-color: rgba(124,58,237,.22); background: rgba(124,58,237,.06); }
.badge.good{ border-color: rgba(22,163,74,.26); background: rgba(22,163,74,.07); }
.badge.warn{ border-color: rgba(217,119,6,.28); background: rgba(217,119,6,.08); }
.badge.bad{ border-color: rgba(220,38,38,.26); background: rgba(220,38,38,.08); }

.tags{ display:flex; flex-wrap:wrap; gap: 6px; align-items:center; }
.tag{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.88);
  white-space: nowrap;
  user-select:none;
}
.tag.meta{ color: rgba(15,23,42,.70); background: rgba(2,6,23,.015); }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.btn{
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  color: var(--text);
}
.btn:hover{ background: rgba(2,6,23,.02); }
.btn:active{ transform: scale(.99); }
.btn.primary{
  border-color: rgba(37,99,235,.34);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.06));
  font-weight: 900;
}
.btn.good{
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.07);
  font-weight: 900;
}
.btn.bad{
  border-color: rgba(220,38,38,.30);
  background: rgba(220,38,38,.07);
  font-weight: 900;
}
.btn.ghost{ background: rgba(2,6,23,.015); }
.btn.small{ padding: 7px 10px; font-size: 12px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.note{
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: var(--radius2);
  padding: 12px 12px;
  background: rgba(255,255,255,.92);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}
.note b{ color: var(--text); font-weight: 950; }

.divider{ height:1px; background: var(--line); margin: 12px 0; }
.rowFlex{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; justify-content:space-between; }
.statLine{ font-size: 12px; color: var(--muted); display:flex; flex-wrap:wrap; gap: 8px 10px; align-items:center; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }
.field{ display:grid; gap: 6px; }
.field label{ font-size: 12px; color: rgba(15,23,42,.82); font-weight: 900; }
.input, .select, .textarea{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.96);
  color: var(--text);
  outline: none;
  font-size: 12px;
}
.textarea{ min-height: 92px; resize: vertical; }
.help{ font-size: 12px; color: var(--muted); line-height: 1.6; }

footer{
  border-top: 0;                 /* ✅ 경계선 제거(나뉘어 보임 감소) */
  padding: 22px 0 28px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  background: var(--bg);
}
.footerGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px){ .footerGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px){ .footerGrid{ grid-template-columns: 1fr; } }
footer h4{ margin:0 0 8px; font-size: 13px; color: var(--text); font-weight: 950; }

/* modal */
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 50;
}
.backdrop.show{ display:flex; }
.modal{
  width: min(560px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 60px rgba(2,6,23,.25);
  overflow:hidden;
}
.modalHeader{
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  background: rgba(2,6,23,.02);
}
.modalHeader h3{ margin:0; font-size: 13px; font-weight: 950; }
.modalBody{ padding: 12px 14px 14px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.modalBody b{ color: var(--text); }
.modalActions{ padding: 12px 14px 14px; border-top: 1px solid var(--line); display:flex; justify-content:flex-end; gap: 10px; }

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  color: rgba(15,23,42,.86);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  font-size: 12px;
  display:none;
  z-index: 60;
}
.toast.show{ display:block; }

/* page-specific helpers */
.progressBar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(37,99,235,.85);
}
.progressBar .fill{
  height: 100%;
  width: 0%;
  background: rgba(220,38,38,.85);
}