/* Qube7 AICENT 견적 시뮬레이터
   디자인 토큰 출처: .docs/stitch/DESIGN.md (Enterprise Cobalt)
   외부 CDN / 웹폰트 없음. */

:root{
  --primary:#0d6efd;
  --primary-strong:#0057cd;
  --on-primary:#ffffff;

  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-soft:#f1f5f9;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;

  --text:#0b1c30;
  --text-muted:#475569;
  --text-dim:#64748b;

  --banner-bg:#eff4ff;
  --subtotal-bg:#eff6ff;
  --subtotal-border:#bfdbfe;
  --total-bg:#1e293b;
  --total-fg:#ffffff;

  --badge-m-bg:#f1f5f9; --badge-m-fg:#475569;
  --badge-o-bg:#e0f2fe; --badge-o-fg:#0284c7;

  --error:#ba1a1a;
  --error-bg:#ffdad6;

  --r-sm:4px;
  --r-md:8px;

  --gap:16px;
  --pad:20px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
              "Segoe UI", "Malgun Gothic", Roboto, sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:1760px;
  margin:0 auto;
  padding:24px 16px 40px;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}

/* ---------- 헤더 ---------- */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding:var(--pad);
  flex-wrap:wrap;
}
.page-head h1{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  border-left:4px solid var(--primary);
  padding-left:10px;
}
.page-head p{
  margin:6px 0 0 14px;
  color:var(--text-muted);
  font-size:13px;
}

.btn{
  font:inherit;
  font-weight:600;
  font-size:13px;
  height:36px;
  padding:0 16px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.btn--ghost{
  background:var(--surface);
  border:1px solid var(--border-strong);
  color:var(--text-muted);
}
.btn--ghost:hover{ background:var(--surface-soft); }
.btn--ghost:active{ background:var(--border); }
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- 레이아웃 ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gap);
  align-items:start;
}

.panel{ overflow:hidden; }
.panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px var(--pad);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.panel__head h2{ margin:0; font-size:16px; font-weight:600; }
.panel__meta{ font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:.02em; }

.table-scroll{ overflow-x:auto; }

/* ---------- 표 ---------- */
.grid{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.grid th{
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}
.grid td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.grid tbody tr:last-child td{ border-bottom:none; }

.col-cat   { width:52px;  text-align:center; }
.col-name  { min-width:200px; }
.col-num   { text-align:right; width:118px; }
.col-in    { text-align:center; width:96px; }
.col-amount{ width:140px; }
.col-opt   { width:96px; text-align:center; }

.grid td.col-cat{ text-align:center; color:var(--text-dim); font-size:11px; font-weight:600; }
.grid td.col-num{ text-align:right; font-variant-numeric:tabular-nums; }
.grid td.col-in { text-align:center; }
.grid td.col-opt{ text-align:center; }

.item-name{ font-weight:600; }
.item-desc{ color:var(--text-dim); font-size:11.5px; margin-top:2px; }

/* 배너 행 */
tr.row-banner td{
  background:var(--banner-bg);
  color:var(--primary-strong);
  font-weight:700;
  font-size:12px;
  letter-spacing:.01em;
  padding:7px 10px;
}
/* 하위 설명 행 */
tr.row-sub td{
  color:var(--text-dim);
  font-size:12px;
  padding:5px 10px 5px 10px;
}
tr.row-sub td.col-name{ padding-left:22px; }

/* 소계 행 */
tr.row-subtotal td{
  background:var(--subtotal-bg);
  border-top:1px solid var(--subtotal-border);
  border-bottom:1px solid var(--subtotal-border);
  font-weight:700;
}
tr.row-subtotal td.subtotal-label{ text-align:right; color:var(--text-muted); }
tr.row-subtotal td.subtotal-value{
  text-align:right;
  color:var(--primary);
  font-size:15px;
  font-variant-numeric:tabular-nums;
}

/* ---------- 입력 ---------- */
.cell-input{
  width:100%;
  max-width:84px;
  height:34px;
  padding:0 8px;
  text-align:right;
  font:inherit;
  /* 16px 미만이면 모바일 Safari 가 포커스 시 화면을 확대한다. PMO 조건: 16px 이상 */
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
}
.cell-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(13,110,253,.15);
  color:var(--primary-strong);
}
/* 스피너 제거로 폭 확보 */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cell-input[type=number]{ -moz-appearance:textfield; }

.amount{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- 합계 ---------- */
.total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding:16px var(--pad);
  background:var(--total-bg);
  color:var(--total-fg);
}
.total__label strong{ font-size:15px; font-weight:700; }
.total__value{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ---------- 솔루션상세 ---------- */
.grid--detail td{ vertical-align:top; }
.grid--detail td.col-cat{
  color:var(--primary-strong);
  font-weight:700;
  font-size:11.5px;
  white-space:nowrap;
  text-align:left;
  width:120px;
}
.feature-list{ margin:0; padding-left:16px; }
.feature-list li{ margin:1px 0; color:var(--text-muted); font-size:12.5px; }

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--r-sm);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.badge--mandatory{ background:var(--badge-m-bg); color:var(--badge-m-fg); }
.badge--option   { background:var(--badge-o-bg); color:var(--badge-o-fg); }

.footnote{
  margin:0;
  padding:12px var(--pad) 16px;
  color:var(--text-dim);
  font-size:11.5px;
  line-height:1.6;
  border-top:1px solid var(--border);
}

/* ---------- 기타 ---------- */
.notice{ padding:var(--pad); }
.notice--error{ border-color:var(--error); background:var(--error-bg); }
.notice h2{ margin:0 0 8px; font-size:16px; color:var(--error); }
.notice p{ margin:6px 0; }
.notice pre{
  margin:10px 0 0;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  overflow-x:auto;
  font-size:12px;
}
code{ font-size:12px; background:var(--surface-soft); padding:1px 5px; border-radius:3px; }
.notice--error code{ background:rgba(255,255,255,.6); }

.page-foot{
  display:flex;
  justify-content:space-between;
  gap:var(--gap);
  padding:4px 4px;
  color:var(--text-dim);
  font-size:11.5px;
  flex-wrap:wrap;
}

/* ---------- 반응형 ---------- */
@media (max-width:1199px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .page{ padding:16px 12px 32px; }
  .page-head h1{ font-size:19px; }
  .total__value{ font-size:22px; }
}
@media (max-width:640px){
  .page{ padding:12px 8px 24px; }
  .col-name{ min-width:160px; }
  .grid{ font-size:12.5px; }
}