/* ==============================================================
 * Theme: Glassmorphism (Blue)
 * - Vivid gradient backdrop with floating color blobs
 * - Frosted glass cards (backdrop-filter blur)
 * - Soft white borders, layered translucency
 * ============================================================== */
:root {
  /* glass surfaces — 카드 안쪽이 항상 배경보다 밝아 보이도록 거의 불투명한 화이트 */
  --glass:        rgba(255,255,255,.92);
  --glass-strong: rgba(255,255,255,.96);
  --glass-weak:   rgba(255,255,255,.80);
  --glass-border: rgba(255,255,255,.96);
  --glass-border-2: rgba(255,255,255,.92);

  /* shadows */
  --shadow-xs: 0 1px 3px rgba(15,40,90,.06);
  --shadow:    0 8px 24px rgba(15,40,90,.10), 0 1px 3px rgba(15,40,90,.06);
  --shadow-lg: 0 24px 60px rgba(15,40,90,.18), 0 8px 24px rgba(15,40,90,.10);

  /* text */
  --ink:       #0b1a33;
  --ink-soft:  #1e3a5f;
  --muted:     #5b7493;
  --muted-2:   #8ea4c1;

  /* lines */
  --line:      rgba(15,40,90,.10);
  --line-2:    rgba(15,40,90,.18);
  --line-soft: rgba(15,40,90,.06);
  --input-border: rgba(15,40,90,.22);     /* 입력 폼 전용 — 또렷한 보더 */
  --input-border-h: rgba(37,99,235,.45);  /* hover */

  /* accent */
  --accent:    #2563eb;
  --accent-d:  #1d4ed8;
  --accent-tint:rgba(37,99,235,.12);
  --accent-grad:linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

  /* status */
  --ok:        #16a34a;
  --warn:      #d97706;
  --danger:    #dc2626;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:'Pretendard', 'Inter', -apple-system, "SF Pro Text",
              "Noto Sans KR", sans-serif;
  color:var(--ink); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings: "tnum" on, "lnum" on, "kern" on;
  letter-spacing:-.005em;
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 88% 8%, rgba(96,165,250,.55) 0%, transparent 55%),
    radial-gradient(900px 700px at 5% 95%, rgba(139,92,246,.40) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(34,211,238,.25) 0%, transparent 60%),
    linear-gradient(135deg, #cfe1f6 0%, #dde6f7 40%, #e8d6f3 100%);
  background-attachment: fixed;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(420px 420px at 12% 18%, rgba(167,139,250,.35), transparent 60%),
    radial-gradient(380px 380px at 90% 80%, rgba(56,189,248,.45), transparent 60%);
  filter: blur(20px);
}
a { color:var(--accent-d); text-decoration:none; font-weight:500; }
a:hover { color:#1e40af; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }

button {
  padding:9px 18px; background:var(--accent-grad); color:#fff;
  border:1px solid rgba(255,255,255,.30); border-radius:var(--radius-sm);
  cursor:pointer; font-weight:600; font-size:13.5px;
  letter-spacing:-.01em;
  box-shadow:0 4px 14px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
button:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.40); }
button:active { transform:translateY(.5px); }

input, select, textarea {
  padding:9px 13px; border:1px solid var(--input-border); border-radius:var(--radius-sm);
  font:inherit; background:rgba(255,255,255,.95); color:var(--ink); font-size:13.5px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { background:#fff; border-color:var(--input-border-h); }
input:focus, select:focus, textarea:focus {
  outline:0; background:#fff; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-tint);
}
input:disabled { background:rgba(255,255,255,.78); color:var(--muted); }

.card {
  background:var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  padding:20px 22px; margin:14px 0;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
}
.err { color:var(--danger); font-weight:500; }
.ok  { color:var(--ok); font-weight:500; }
.hint{ color:var(--muted); font-size:12.5px; }
.muted { color:var(--muted); font-size:12.5px; margin-left:8px; }

/* ===== Login ===== */
.login-wrap { display:flex; min-height:100vh; position:relative; z-index:1; }
.login-left {
  flex:1.4; padding:64px 64px; position:relative; overflow:hidden;
  color:var(--ink);
}
.login-left::before {
  content:""; position:absolute; right:-160px; top:-120px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.55) 0%, transparent 65%);
  filter:blur(30px);
}
.login-left::after {
  content:""; position:absolute; left:-100px; bottom:-120px;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,.45) 0%, transparent 65%);
  filter:blur(30px);
}
.ll-stack { position:relative; z-index:1; max-width:540px; margin-top:14%; }
.ll-pill {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; margin-bottom:24px;
  background:rgba(255,255,255,.88); color:var(--accent-d); font-weight:600;
  font-size:12px; letter-spacing:1px; border-radius:99px;
  border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 4px 14px rgba(15,40,90,.08);
}
.ll-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.ll-title {
  font-size:60px; font-weight:700; letter-spacing:-2.2px;
  margin:0 0 22px; line-height:1.05; color:var(--ink);
}
.ll-lead {
  font-size:17px; line-height:1.6; color:var(--ink-soft);
  margin:0 0 32px; font-weight:400;
}
.ll-tags { display:flex; gap:8px; flex-wrap:wrap; }
.ll-tag {
  padding:6px 14px; font-size:12.5px; font-weight:500;
  background:rgba(255,255,255,.88); color:var(--ink);
  border:1px solid rgba(255,255,255,.92); border-radius:99px;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}

.login-right { flex:1; display:flex; align-items:center; justify-content:center; }
.login-right .card {
  width:400px; padding:36px 32px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:var(--shadow-lg);
}
.login-right h2 { margin:0 0 22px; font-size:28px; font-weight:700; letter-spacing:-.7px; }
.login-right label { font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.login-right input { width:100%; margin:6px 0 14px; padding:11px 13px; font-size:14.5px; }
.login-right button { width:100%; padding:12px; font-size:14px; }
.signup-link { margin:18px 0 0; text-align:center; font-size:13px; color:var(--muted); }

.center-wrap { max-width:600px; margin:40px auto; padding:0 16px; position:relative; z-index:1; }
.center-wrap input, .center-wrap textarea { width:100%; margin:4px 0 8px; }

/* ===== App layout ===== */
.app {
  display:grid; grid-template-columns:240px 1fr;
  grid-template-rows:60px 1fr; min-height:100vh;
  position:relative; z-index:1;
}
.topbar {
  grid-column:1/3; padding:0 26px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--glass-border);
}
.topbar .brand { font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.4px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar .who { text-align:right; line-height:1.35; }
.topbar .who-line1 { font-size:14px; color:var(--ink-soft); display:flex; gap:6px; align-items:baseline; justify-content:flex-end; }
.topbar .who-line1 .who-name { color:var(--ink); font-weight:700; }
.topbar .who-line2 { font-size:12px; display:flex; gap:8px; justify-content:flex-end; }
.topbar .who-sep { color:var(--line-2); }
.topbar-mypage {
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(37,99,235,.10));
  color:var(--accent-d); border:1px solid rgba(59,130,246,.22);
  font-weight:600; padding:7px 14px; border-radius:99px; text-decoration:none;
  font-size:13.5px; white-space:nowrap;
}
.topbar-mypage:hover { background:linear-gradient(135deg, rgba(59,130,246,.26), rgba(37,99,235,.16)); text-decoration:none; }
.topbar-mypage.on { box-shadow:0 0 0 2px rgba(59,130,246,.18); }
.topbar button {
  background:rgba(255,255,255,.92); color:var(--ink);
  border:1px solid var(--glass-border-2);
  font-weight:500; padding:7px 14px; border-radius:99px;
  box-shadow:0 1px 2px rgba(15,40,90,.06);
}
.topbar button:hover {
  background:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,40,90,.10);
  filter:none;
}
.sidebar {
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  padding:20px 0;
  display:flex; flex-direction:column; border-right:1px solid var(--glass-border);
}
.sidebar nav { flex:1; padding:0 12px; }
.sidebar a {
  display:block; color:var(--ink); padding:10px 14px; font-size:14.5px;
  font-weight:500; border-radius:var(--radius-sm); margin:2px 0;
  text-decoration:none; transition:background .14s;
}
.sidebar a:hover { background:rgba(255,255,255,.94); text-decoration:none; }
.sidebar a.on {
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(37,99,235,.10));
  color:var(--accent-d); font-weight:600;
  border:1px solid rgba(59,130,246,.20);
}
.sidebar .sep {
  padding:14px 14px 6px; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.7px; font-weight:600;
}
.sidebar .mypage {
  border-top:1px solid var(--glass-border); margin-top:10px;
  padding:14px 14px !important;
}
.content { padding:30px 36px 60px; overflow:auto; max-width:none; width:100%; }
.page-title {
  margin:0 0 22px; font-size:38px; color:var(--ink); font-weight:800;
  letter-spacing:-1.1px; padding-bottom:0; border-bottom:0;
}

/* ===== Stats ===== */
.stats {
  display:flex; gap:18px; align-items:center; flex-wrap:nowrap;
  background:var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  border:1px solid var(--line-2); box-shadow:var(--shadow);
  padding:16px 22px; border-radius:var(--radius);
  white-space:nowrap;
}
.stats span {
  color:var(--ink-soft); font-size:15px; font-weight:500;
  display:inline-flex; align-items:baseline; gap:6px;
  white-space:nowrap;
}
.stats span.stats-total { font-size:16px; font-weight:600; }
.stats b {
  color:var(--accent-d); font-size:22px; font-weight:700; margin:0 2px;
  font-feature-settings:"tnum"; letter-spacing:-.4px;
}

/* ===== Grid ===== */
table.grid {
  width:100%; border-collapse:collapse;
  background:var(--glass-strong);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  font-size:14px; border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow);
  /* overflow:hidden 제거 — 셀 내 툴팁이 잘리지 않도록 */
}
.grid th, .grid td {
  border-bottom:1px solid var(--line); padding:12px 14px;
  text-align:center; vertical-align:middle;
}
.grid th {
  background:rgba(255,255,255,.96); color:var(--ink); font-weight:800;
  border-bottom:1px solid var(--line-2); white-space:nowrap;
  font-size:14px; text-transform:none; letter-spacing:-.1px;
}
.grid th a { color:var(--muted); text-decoration:none; }
.grid th a:hover { color:var(--ink); }
.grid tr:hover td { background:rgba(255,255,255,.88); }
.grid td.empty { text-align:center; color:var(--muted); padding:48px; font-size:14px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.pager { margin:18px 0; display:flex; gap:6px; justify-content:center; }
.pager a, .pager b {
  padding:7px 14px; border:1px solid var(--glass-border-2); border-radius:99px;
  background:rgba(255,255,255,.90); color:var(--ink); font-size:12.5px; font-weight:500;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  text-decoration:none;
}
.pager a:hover { background:#fff; transform:translateY(-1px); }
.pager b { background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(37,99,235,.30); }

/* ===== Search box ===== */
.search-box {
  background:var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:20px 24px; margin:0 0 18px; box-shadow:var(--shadow);
  position:relative; z-index:500;
}
.search-box .sb-grid {
  display:grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px 16px;
}
.sb-field.sb-fullrow { grid-column: 1 / -1; }

/* 콤보박스 — 입력 + 드롭다운 목록 (입력 바로 아래 노출) */
.sb-field:has(.combo .combo-list:not([hidden])) { z-index:200; }
.combo { position:relative; }
.combo > input { width:100%; padding-right:32px; }
.combo .combo-toggle {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:transparent; color:var(--ink-soft); border:0;
  width:24px; height:24px; padding:0; box-shadow:none;
  font-size:14px; line-height:1; cursor:pointer;
}
.combo .combo-toggle:hover { background:var(--bg-tint); border-radius:4px; }
.combo .combo-list {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  z-index:9999;
  margin:0; padding:4px; list-style:none;
  background:#fff; border:1px solid var(--input-border);
  border-radius:var(--radius-sm);
  box-shadow:0 12px 32px rgba(15,40,90,.20);
  max-height:480px; overflow-y:auto;
}
.combo .combo-list li {
  padding:8px 11px; font-size:14px; color:var(--ink); cursor:pointer;
  border-radius:4px;
}
.combo .combo-list li:hover { background:var(--accent-tint); color:var(--accent-d); }
.combo .combo-list li.empty { color:var(--muted); cursor:default; padding:14px 10px; text-align:center; }
.combo .combo-list li.empty:hover { background:transparent; color:var(--muted); }
.combo .combo-list[hidden] { display:none; }
.combo .combo-list li.addable { color:var(--accent-d); font-style:italic; }
.combo .combo-list li.addable:hover { background:var(--accent-tint); }

/* 다중 선택 콤보 (모델명/색상) */
.combo-multi .multi-box {
  position:relative;
  background:#fff;
  border:1px solid var(--input-border); border-radius:var(--radius-sm);
  padding:3px 32px 3px 6px;
  min-height:36px; display:flex; align-items:center; flex-wrap:wrap;
  cursor:text;
}
.combo-multi .multi-box:focus-within {
  border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint);
}
.combo-multi .combo-toggle {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
}
.combo-multi .multi-tags {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  flex:1; min-width:60px;
}
.combo-multi .combo-input {
  flex:1; min-width:80px; border:0; outline:0; background:transparent;
  padding:5px 6px; font-size:13.5px; box-shadow:none;
}
.combo-multi .combo-input:focus { box-shadow:none; transform:none; }
.combo-multi .tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 4px 3px 9px; background:var(--accent-tint); color:var(--accent-d);
  border:1px solid rgba(37,99,235,.30); border-radius:99px;
  font-size:12.5px; font-weight:600;
  white-space:nowrap;
}
.combo-multi .tag-x {
  background:transparent; color:var(--accent-d); border:0;
  width:18px; height:18px; padding:0; box-shadow:none;
  font-size:14px; line-height:1; cursor:pointer; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
}
.combo-multi .tag-x:hover { background:rgba(37,99,235,.18); }
.search-box.compact .sb-grid { grid-template-columns: 180px 1fr; }
.sb-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sb-field.sb-wide { grid-column: span 2; }
.sb-field.sb-wide-2 { grid-column: span 3; }
.sb-field.sb-narrow select { padding-right:6px; }
.search-box .sb-grid > .sb-narrow { max-width: 110px; }
.sb-field > label {
  font-size:12px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.6px;
}
.sb-field input, .sb-field select {
  padding:9px 12px; font-size:14px; background:rgba(255,255,255,.95);
  border:1px solid var(--input-border); border-radius:var(--radius-sm); width:100%;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.sb-field input:hover, .sb-field select:hover { background:#fff; border-color:var(--input-border-h); }
.sb-field input:focus, .sb-field select:focus {
  outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); background:#fff;
}
.sb-field .range { display:flex; align-items:center; gap:6px; }
.sb-field .range span { color:var(--muted); font-size:12px; }
.sb-field .range input { flex:1; min-width:0; }
.sb-field .checks {
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  min-height:36px; padding:0 2px;
}
.sb-field .checks.inline { flex-wrap:wrap; }
.sb-field .checks.nowrap { flex-wrap:nowrap; overflow-x:auto; gap:14px; }
.sb-field .checks.nowrap::-webkit-scrollbar { height:4px; }
.sb-field .checks.nowrap::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:2px; }
.sb-field .checks label {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--ink); font-weight:500;
  white-space:nowrap; cursor:pointer; line-height:1; padding:2px 0;
}
.sb-field .checks input[type=checkbox] {
  width:16px; height:16px; margin:0; padding:0;
  accent-color:var(--accent); flex-shrink:0; cursor:pointer;
}
.sb-field .checks label > span { line-height:1; }

/* 계약기간: 월렌트/장기 2행 그리드 — 두 줄 높이 항상 고정 */
.sb-field .checks.term-grid {
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  height:72px;                       /* 30px × 2행 + gap 6px + 패딩 — 항상 고정 */
  align-items:stretch; padding:0 2px;
}
.sb-field .term-row {
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  min-height:30px;
}
.sb-field .term-pt-label {
  flex:0 0 auto; min-width:54px; text-align:center;
  font-size:12.5px; font-weight:800; letter-spacing:-.3px;
  padding:3px 10px; border-radius:5px;
  white-space:nowrap;
}
/* 월렌트 = 블루 진한 톤 */
.sb-field .term-row[data-pt-row="1"] .term-pt-label {
  color:#fff;
  background:linear-gradient(180deg, #1976d2 0%, #0d47a1 100%);
  border:1px solid #0d47a1;
  box-shadow:0 1px 2px rgba(13,71,161,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
/* 장기 = 그린 진한 톤 */
.sb-field .term-row[data-pt-row="3"] .term-pt-label {
  color:#fff;
  background:linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
  border:1px solid #1b5e20;
  box-shadow:0 1px 2px rgba(27,94,32,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
/* hint 안내 문구는 그리드와 겹치게 (자리 차지 X) */
.sb-field .term-grid .term-hint {
  position:absolute; left:62px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}
.sb-actions {
  display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.sb-actions .export-btn { margin-left:auto; }

/* ===== Buttons (extras) ===== */
.btn-primary {
  background:var(--accent-grad); color:#fff; padding:9px 22px; font-weight:600;
  border:1px solid rgba(255,255,255,.30); border-radius:var(--radius-sm);
  box-shadow:0 6px 18px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:13.5px;
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 10px 28px rgba(37,99,235,.46); }
.btn-secondary {
  background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--glass-border-2);
  padding:9px 18px; font-weight:500; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; font-size:13.5px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 1px 2px rgba(15,40,90,.06);
}
.btn-secondary:hover { background:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 14px rgba(15,40,90,.10); filter:none; }
.btn-link { padding:9px 14px; color:var(--ink-soft); }

/* ===== Excel download button (high-visibility) ===== */
.excel-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #e6f4ea 100%);
  color:#1b5e20;
  border:1.5px solid #2e7d32;
  border-radius:var(--radius-sm);
  font-weight:700; font-size:13.5px; white-space:nowrap;
  box-shadow: 0 2px 6px rgba(46,125,50,.20), inset 0 1px 0 rgba(255,255,255,.7);
  cursor:pointer;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.excel-btn::before {
  content:"XLS"; display:inline-block;
  font-size:10px; font-weight:800; letter-spacing:.5px;
  padding:2px 5px; border-radius:3px;
  background:#2e7d32; color:#fff;
}
.excel-btn:hover { background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%); box-shadow: 0 3px 10px rgba(46,125,50,.30); transform:translateY(-1px); text-decoration:none; }
.excel-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(46,125,50,.25); }
.excel-btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }

/* ===== Settings ===== */
.settings-form { max-width: 880px; }
.settings-card {
  background:var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:24px 26px; margin:0 0 18px; box-shadow:var(--shadow);
}
.settings-card > header { border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }
.settings-card > header h3 { margin:0; font-size:18px; color:var(--ink); font-weight:800; letter-spacing:-.4px; }
.settings-card > header .sub { margin:5px 0 0; color:var(--muted); font-size:13px; }
.settings-card .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.settings-card .field { display:flex; flex-direction:column; gap:6px; }
.settings-card .field.full { grid-column:1 / -1; }
.settings-card label {
  font-size:11.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:.5px;
}
.settings-card .hint { color:var(--muted); font-weight:400; font-size:11.5px; text-transform:none; letter-spacing:0; }
.settings-card .badge {
  display:inline-block; font-size:10.5px; font-weight:600;
  padding:2px 9px; border-radius:99px; background:var(--accent-tint); color:var(--accent-d);
  border:0;
}
.settings-card input {
  width:100%; padding:10px 13px; font-size:13.5px;
  background:rgba(255,255,255,.95); border:1px solid var(--input-border); border-radius:var(--radius-sm);
}
.settings-card input:hover { background:#fff; border-color:var(--input-border-h); }
.settings-card input:focus { background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.settings-actions { display:flex; justify-content:flex-end; gap:10px; max-width:880px; margin:6px 0 24px; }
.test-card { max-width:880px; }
.test-card .row { gap:10px; }

.toast {
  max-width:880px; margin:0 0 14px; padding:12px 18px; border-radius:var(--radius-sm);
  background:rgba(34,197,94,.18); color:#15803d; border:1px solid rgba(34,197,94,.32);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.toast::before { content:"✓"; font-weight:700; color:var(--ok); }

/* ===== Status pill / mini buttons ===== */
.status-pill {
  display:inline-block; padding:2px 10px; border-radius:99px;
  font-size:11px; font-weight:600; border:0;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.status-pill.st-0 { background:rgba(245,158,11,.18); color:#92400e; }
.status-pill.st-1 { background:rgba(34,197,94,.18);  color:#15803d; }
.status-pill.st-2 { background:rgba(239,68,68,.16);  color:#b91c1c; }
.status-pill.st-9 { background:rgba(15,40,90,.10);   color:var(--muted); }

.btn-mini {
  padding:5px 12px; font-size:11.5px; font-weight:500; border-radius:99px;
  background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--glass-border-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(15,40,90,.06);
}
.btn-mini:hover { background:#fff; }
.btn-mini.btn-danger { background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(239,68,68,.22); }
.btn-mini.btn-danger:hover { background:rgba(239,68,68,.20); }
.btn-mini.btn-edit { background:rgba(37,99,235,.12); color:var(--accent-d); border-color:rgba(37,99,235,.22); }
.btn-mini.btn-edit:hover { background:rgba(37,99,235,.20); }
.btn-mini.btn-warn { background:rgba(245,158,11,.14); color:#92400e; border-color:rgba(245,158,11,.28); }
.btn-mini.btn-warn:hover { background:rgba(245,158,11,.22); }
.actions { white-space:nowrap; }
.actions form, .actions button { margin-right:4px; }
.ellipsis { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Modal ===== */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(15,40,90,.32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  animation: fadeIn .14s ease-out;
}
.modal-backdrop[hidden] { display:none; }
.modal {
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(170%) blur(30px);
  backdrop-filter: saturate(170%) blur(30px);
  width:480px; max-width:92vw; max-height:90vh; overflow:auto;
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.96);
  box-shadow:var(--shadow-lg);
  animation: pop .18s cubic-bezier(.22,1,.36,1);
}
.modal > header {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; border-bottom:1px solid var(--line-2);
}
.modal > header h3 { margin:0; font-size:19px; color:var(--ink); font-weight:800; letter-spacing:-.4px; }
.modal-close { background:transparent; color:var(--muted); border:0; font-size:22px; padding:0 6px; box-shadow:none; }
.modal-close:hover { background:rgba(15,40,90,.06); color:var(--ink); border-radius:6px; }
.modal-body { padding:18px 24px; display:flex; flex-direction:column; gap:14px; }
.modal-body .field { display:flex; flex-direction:column; gap:5px; }
.modal-body label { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.modal-body input {
  padding:10px 13px; font-size:13.5px; background:rgba(255,255,255,.95);
  border:1px solid var(--input-border); border-radius:var(--radius-sm);
}
.modal-body input:hover { background:#fff; border-color:var(--input-border-h); }
.modal-body input:focus { outline:0; background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding-top:14px; border-top:1px solid var(--line-2); margin-top:6px; }
.cert-row {
  display:flex; gap:10px; align-items:center; padding:11px 14px;
  background:var(--accent-tint); border:1px solid rgba(37,99,235,.20);
  border-radius:var(--radius-sm);
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { transform:scale(.96) translateY(8px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }

/* ===== Loading overlay ===== */
#loadingOverlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,40,90,.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  animation: fadeIn .14s ease-out;
}
#loadingOverlay[hidden] { display:none; }
.loading-card {
  background:rgba(255,255,255,.96); padding:24px 30px; border-radius:var(--radius);
  min-width:280px; border:1px solid rgba(255,255,255,.96); box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:saturate(170%) blur(30px); backdrop-filter:saturate(170%) blur(30px);
  animation: pop .18s cubic-bezier(.22,1,.36,1);
}
.loading-text { margin-top:14px; text-align:center; font-size:13px; color:var(--ink-soft); font-weight:500; }
.loading-bar { position:relative; height:5px; width:100%; background:rgba(15,40,90,.08); border-radius:99px; overflow:hidden; }
.loading-bar > span {
  position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:var(--accent-grad); border-radius:99px;
  animation: loadingSlide 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes loadingSlide { 0%{left:-40%;} 100%{left:100%;} }

/* ===== Cars list extras ===== */
.diff-sub { color:var(--muted); font-size:11.5px; margin-top:2px; }
.id-sub { font-size:10.5px; color:var(--muted); margin-top:2px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:500; }

/* 목록 셀 내부 보조 텍스트(괄호/회색) — 본문과 동일 크기로 */
.grid td .muted,
.grid td .id-sub,
.grid td .diff-sub {
  font-size:14px;
  font-weight:500;
  margin-left:0;
  display:block;
  margin-top:2px;
}
.grid td .id-sub { font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.th-real, .td-real { color:var(--danger); font-size:12.5px; }
.th-sub { color:var(--muted); font-size:11px; font-weight:500; margin-top:2px; text-transform:none; letter-spacing:0; }

/* 정렬 가능한 컬럼 헤더 */
.grid th a.sortable {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  color:inherit; text-decoration:none;
}
.grid th a.sortable:hover { color:var(--accent-d); text-decoration:none; }
.grid th a.sortable .sort-ico {
  font-size:10px; line-height:1; color:var(--ink-soft);
  transition:color .12s, transform .12s;
  display:inline-block;
}
.grid th a.sortable.sort-on { color:var(--accent-d); }
.grid th a.sortable.sort-on .sort-ico { color:var(--accent); }
.grid th a.sortable .sort-ico.none { font-size:12px; opacity:.85; color:var(--ink-soft); font-weight:700; }
.grid th a.sortable:hover .sort-ico.none { color:var(--accent); opacity:1; }
.grid th.th-center a.sortable { justify-content:center; }
.grid th.th-center { text-align:center; }
.grid th.th-center a { display:block; }
.td-real b { color:var(--danger); font-weight:600; }
.td-real .diff-sub { color:#fca5a5; }
.real-tag { color:var(--danger); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.badge-unlimited {
  display:inline-block; padding:1px 9px; border-radius:99px;
  font-size:11px; font-weight:600; background:var(--accent-tint); color:var(--accent-d);
  border:0;
}
.trunc-5 {
  display:inline-block; max-width:5em; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom; cursor:help;
}

/* 즉시 표시 툴팁 (네이티브 title 의 딜레이 회피) */
.has-tip { position:relative; display:inline-block; overflow:visible; }
.has-tip::after {
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform: translateX(-50%);
  background:#0f172a; color:#fff; font-size:12.5px; font-weight:500;
  padding:6px 10px; border-radius:6px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(15,23,42,.30);
  opacity:0; pointer-events:none; z-index:9999;
  transition: opacity 60ms linear;
}
.has-tip::before {
  content:""; position:absolute; left:50%; bottom:calc(100% + 2px);
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#0f172a;
  opacity:0; pointer-events:none; z-index:9999;
  transition: opacity 60ms linear;
}
.has-tip:hover::after, .has-tip:hover::before { opacity:1; }
/* 다중 라인 (옵션 목록 등) — 줄바꿈 보존, 좌측 정렬, 폭 확장 */
.has-tip.tip-multi::after {
  white-space: pre; text-align: left;
  max-width: 520px; line-height: 1.6;
}

/* ===== 옵션 셀 호버 팝오버 (라이트, 모던) ===== */
.opt-cell { position: relative; }
.opt-label { position: relative; display: inline-block; cursor: default; }
.opt-tip {
  display: none;
  position: absolute; left: 0; top: 100%;
  margin-top: 2px;
  min-width: 320px; max-width: 460px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15,40,90,.16);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18), 0 4px 10px rgba(15,23,42,.08);
  padding: 12px 14px;
  z-index: 9999;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  animation: optTipFade 80ms linear;
}
.opt-label:hover .opt-tip { display: block; }
.grid td.opt-cell:hover { overflow: visible; position: relative; z-index: 10; }
@keyframes optTipFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

.opt-tip-section + .opt-tip-section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(15,40,90,.14); }
.opt-tip-h {
  font-weight: 800; font-size: 12px; letter-spacing: -.2px;
  color: var(--accent-d, #1d4ed8);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.opt-tip-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 99px; background: var(--accent-tint, #e0eaff);
  color: var(--accent-d, #1d4ed8);
  font-size: 11px; font-weight: 700;
}
.opt-tip ul { list-style: none; padding: 0; margin: 0; }
.opt-tip li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(15,40,90,.10);
}
.opt-tip li:last-child { border-bottom: none; }
.opt-tip .opt-nm { color: #0f172a; font-weight: 500; flex: 1; }
.opt-tip .opt-pv {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: #0f172a;
  white-space: nowrap;
}
.opt-tip .opt-pv em { font-style: normal; font-weight: 500; color: #64748b; margin-left: 2px; font-size: 11px; }

/* "인수가" 라벨 / 금액 — 시인성 강조 */
.sub-amt {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: 12px; line-height: 1.4;
}
.sub-amt-k {
  display: inline-block;
  padding: 1px 7px;
  background: #fff7ed;          /* 옅은 amber */
  color: #9a3412;               /* 진한 amber */
  border: 1px solid #fed7aa;
  border-radius: 99px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: -.2px;
}
.sub-amt-v {
  color: #ea580c;               /* amber-600 */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sub-amt-v em {
  font-style: normal; font-weight: 500;
  color: #9a3412; margin-left: 2px; font-size: 11px;
}
/* 셀이 툴팁을 자르지 않도록 */
.grid td:has(.has-tip:hover) { overflow:visible; position:relative; z-index:10; }
.price-line { display:flex; gap:6px; align-items:baseline; justify-content:center; font-size:13px; line-height:1.4; }
.td-price-left { text-align:left !important; }
.td-price-left .price-line { justify-content:flex-start; }
.price-line .pl-term {
  display:inline-block; min-width:30px; color:var(--accent-d); font-size:10.5px; font-weight:600;
  padding:1px 7px; border-radius:99px; background:var(--accent-tint); text-align:center;
}
.price-line .pl-amt  { font-weight:600; color:var(--ink); font-feature-settings:"tnum"; }
.price-line .pl-mileage { color:var(--muted); font-size:10.5px; }
.price-line .pl-diff { color:var(--muted); font-size:12px; font-weight:500; }
.td-real .price-line .pl-amt  { color:var(--danger); font-weight:700; }
.td-real .price-line .pl-diff { color:#fca5a5; }
/* "확인" 값이 없어 예측값으로 fallback 표시 — cc-pmark-est 와 동일 오렌지 톤 */
.td-real .price-line.is-est .pl-amt  { color:#92400e; font-weight:700; }
.td-real .price-line.is-est .pl-diff { color:#d97706; }
.td-real .price-line.is-est .pl-term { background:rgba(245,158,11,.18); color:#92400e; }

/* ===== Detail modal ===== */
.modal.modal-wide { width:1056px; max-width:96vw; }
.modal.modal-detail { width:1204px; max-width:96vw; }
.modal.modal-detail .dt-header {
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(170%) blur(20px);
  backdrop-filter:saturate(170%) blur(20px);
  color:var(--ink);
  padding:22px 26px; border-radius:var(--radius) var(--radius) 0 0;
  border-bottom:1px solid var(--line-2);
}
.modal.modal-detail .dt-header h3 { margin:0; color:var(--ink); font-size:26px; font-weight:800; letter-spacing:-.8px; }
.modal.modal-detail .dt-header .dt-sub { margin:6px 0 0; color:var(--muted); font-size:13px; }
.modal.modal-detail .modal-close { color:var(--muted); }
.modal.modal-detail .modal-close:hover { color:var(--ink); }
.dt-section { margin-bottom:24px; }
.dt-opt-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.dt-opt-row .dt-opt-col { margin-bottom:24px; min-width:0; }
@media (max-width:960px) { .dt-opt-row { grid-template-columns:1fr; gap:0; } }

.dt-info-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.dt-info-row .dt-info-col { margin-bottom:24px; min-width:0; }
.dt-info-row .dt-info-col .dt-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width:1080px) {
  .dt-info-row { grid-template-columns:1fr; gap:0; }
  .dt-info-row .dt-info-col .dt-grid { grid-template-columns: repeat(3, 1fr); }
}
.pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:11px; font-weight:600; }
.pill-pt { background:var(--accent-tint); color:var(--accent-d); }
/* 상세 제목 옆 상품구분 배지 */
#dt_title .pill-pt { font-size:14px; padding:4px 14px; vertical-align:middle; margin-left:10px; }
.pill-month { background:rgba(59,130,246,.16); color:#1d4ed8; }
.pill-long  { background:rgba(168,85,247,.16); color:#7e22ce; }
.dt-table { font-size:13px; }
.dt-real .real-edit { background:rgba(255,255,255,.90); border:1px solid var(--line-2); }

.dt-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px 22px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(170%) blur(20px);
  backdrop-filter:saturate(170%) blur(20px);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:18px 22px;
}
.dt-cell label {
  display:block; font-size:10.5px; color:var(--muted); font-weight:600;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.6px;
}
.dt-cell > div { font-size:13.5px; color:var(--ink); font-weight:500; }
.dt-cell .unit-tag {
  display:inline-block; margin-left:4px; padding:1px 7px; border-radius:99px;
  background:var(--accent-tint); color:var(--accent-d);
  font-size:10px; font-weight:700; letter-spacing:.3px;
  text-transform:none;
}
.dt-cell .unit-suffix { margin-left:4px; color:var(--muted); font-size:11.5px; font-weight:500; }
.dt-h {
  margin:24px 0 14px; font-size:16px; color:var(--ink); font-weight:800;
  letter-spacing:-.3px; padding:0 0 8px 12px; background:transparent; display:block;
  border:0; border-bottom:1px solid var(--line-2); text-transform:none;
  position:relative;
}
.dt-h::before {
  content:""; position:absolute; left:0; top:2px; bottom:10px; width:4px;
  background:var(--accent-grad); border-radius:2px;
}
.dt-h-row { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
.dt-h-row .dt-h { margin:0; }
.btn-site {
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 16px; font-size:12px; font-weight:600;
  color:#fff; background:var(--accent-grad); border:1px solid rgba(255,255,255,.30);
  border-radius:99px; text-decoration:none;
  box-shadow:0 4px 14px rgba(37,99,235,.32);
}
.btn-site:hover { filter:brightness(1.08); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.40); }
.btn-site-inline { padding:4px 12px; font-size:12px; vertical-align:middle; margin-left:10px; }
/* 상세 헤더: 수집/수정 일시 강조 */
.dt-dates { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
.dt-date { font-size:12px; font-weight:700; padding:3px 11px; border-radius:99px; }
.dt-date-add { background:rgba(34,197,94,.15); color:#15803d; }
.dt-date-mod { background:rgba(245,158,11,.18); color:#b45309; }
/* 상세 모달 내 사이트 데이터 뷰 */
.dt-siteview-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.dt-site-actions { display:inline-flex; gap:8px; align-items:center; }
.btn-site-ghost {
  background:#fff; color:var(--accent-d);
  border:1px solid rgba(59,130,246,.35); box-shadow:none;
}
.btn-site-ghost:hover { background:var(--accent-tint); color:var(--accent-d); box-shadow:none; transform:translateY(-1px); }

/* ===== Site-data (DETAIL_URL JSON) 렌더 ===== */
.sd-cnt { font-size:12px; font-weight:600; color:var(--accent-d); background:var(--accent-tint); padding:2px 9px; border-radius:99px; margin-left:6px; }
.sd-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:8px 12px;
}
.sd-cell {
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:10px; padding:8px 11px; min-width:0;
}
.sd-cell-wide { grid-column:1 / -1; background:transparent; border:0; padding:0; }
.sd-k { font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.sd-v { font-size:14px; color:var(--ink); word-break:break-word; }
.sd-card {
  background:rgba(255,255,255,.55); border:1px solid var(--line-2);
  border-radius:14px; padding:14px 16px; margin-bottom:12px;
}
.sd-card-h { font-size:13px; font-weight:800; color:var(--accent-d); margin-bottom:10px; }
.sd-raw {
  background:#0f172a; color:#e2e8f0; padding:16px; border-radius:12px;
  font-size:12.5px; overflow:auto; max-height:60vh; white-space:pre-wrap; word-break:break-word;
}

/* ===== Real edit ===== */
.real-edit { background:rgba(255,255,255,.90); border:1px solid var(--line-2); border-radius:var(--radius); padding:18px 20px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.re-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.re-row label { width:240px; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* 3-col 가로 레이아웃: 12 / 24 / 36 개월 */
.re-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:14px; }
.re-col { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:14px 16px; }
.re-col-head {
  font-size:14px; font-weight:800; color:var(--accent-d);
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line-2);
  text-align:center;
}
.re-field { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.re-field label { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.re-field input { padding:8px 11px; border:1px solid var(--input-border); border-radius:var(--radius-sm); background:#fff; font-weight:500; font-size:14px; }
.re-field input:hover { border-color:var(--input-border-h); }
.re-field input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.re-field input:disabled { background:var(--bg-soft); color:var(--ink-soft); }
@media (max-width:760px) { .re-grid { grid-template-columns:1fr; } }
.re-row input { flex:1; padding:10px 13px; border:1px solid var(--input-border); border-radius:var(--radius-sm); background:#fff; }
.re-row input:hover { border-color:var(--input-border-h); }
.re-row input:disabled { background:rgba(15,40,90,.04); color:var(--ink-soft); }
.re-actions { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-2); margin-top:6px; }
.re-msg { font-size:12.5px; }

/* ===== Contract table (전치) ===== */
.contract-table {
  width:100%; border-collapse:separate; border-spacing:0;
  table-layout:fixed;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(170%) blur(20px); backdrop-filter:saturate(170%) blur(20px);
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); font-size:13.5px;
}
.contract-table thead th {
  background:linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.10));
  color:var(--accent-d); font-weight:900;
  padding:13px 14px; text-align:center; font-size:15.5px;
  border-bottom:2px solid var(--accent); letter-spacing:-.3px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.contract-table tbody th.ct-rh {
  width:170px; background:rgba(255,255,255,.85);
  text-align:left; font-weight:700; color:var(--ink);
  padding:12px 14px; font-size:13px; vertical-align:middle;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.contract-table thead th.ct-rh { background:linear-gradient(180deg, rgba(37,99,235,.22), rgba(37,99,235,.14)); }
.contract-table tbody td {
  padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle;
  background:rgba(255,255,255,.6);
}
.contract-table tbody tr:last-child th,
.contract-table tbody tr:last-child td { border-bottom:0; }
.contract-table .ct-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
.contract-table .ct-price { display:flex; align-items:baseline; justify-content:flex-end; gap:4px; white-space:nowrap; }
.contract-table .ct-price .cc-pv { font-size:17px; font-weight:700; color:var(--ink); font-feature-settings:"tnum"; letter-spacing:-.5px; }
.contract-table .ct-price .cc-pu { font-size:11.5px; color:var(--muted); }
.contract-table .cc-diff {
  margin-top:6px; padding-top:5px; border-top:1px dashed rgba(15,40,90,.15);
  text-align:right; font-feature-settings:"tnum"; white-space:nowrap;
  letter-spacing:-.3px;
}
.contract-table .cc-diff .cc-diff-amt { font-size:13px; font-weight:800; }
.contract-table .cc-diff .cc-diff-pct { font-size:11.5px; font-weight:600; margin-top:1px; opacity:.85; }
.contract-table .cc-diff-down { color:#1b5e20; }   /* 금액 감소(절감) — 초록 */
.contract-table .cc-diff-up   { color:#c62828; }   /* 금액 증가 — 빨강 */
.contract-table .cc-diff-flat { color:var(--muted); font-weight:600; }
.contract-table .cc-diff-base { color:var(--muted); font-weight:500; font-style:italic; }

/* 장기 표: 항목/기존/변경 비교 */
.contract-table tbody th.ct-key {
  width:160px; background:rgba(255,255,255,.7); color:var(--ink);
  font-weight:600; font-size:13px; text-align:left;
  padding:11px 14px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.contract-table tbody th.ct-group {
  width:110px; vertical-align:middle; text-align:center;
  background:rgba(15,40,90,.04);
}
.contract-table thead th.ct-sub {
  font-size:13px; font-weight:800; padding:9px 10px;
  background:rgba(37,99,235,.08); color:var(--accent-d); letter-spacing:.3px;
  border-bottom:1px solid var(--line-2);
}
.contract-table thead th.ct-sub-new { background:rgba(245,158,11,.20); color:#92400e; }
.contract-table td.ct-old, .contract-table td.ct-new {
  padding:10px 12px; text-align:center; vertical-align:middle;
  font-size:13px; color:var(--ink); border-bottom:1px solid var(--line-2);
}
.contract-table td.ct-old { background:rgba(255,255,255,.6); }
.contract-table td.ct-new { background:rgba(245,158,11,.05); border-left:1px dashed var(--line-2); }
.contract-table td.ct-new.is-diff {
  background:rgba(245,158,11,.16); color:#92400e; font-weight:700;
}
.contract-table td.ct-old.is-diff-old {
  color:var(--ink-soft); text-decoration:line-through;
  text-decoration-color:rgba(15,40,90,.35); text-decoration-thickness:1px;
}
.contract-table td.ct-old.is-diff-old .ct-price .cc-pv { color:var(--ink-soft); }
.contract-table td.ct-old .ct-price,
.contract-table td.ct-new .ct-price { justify-content:center; }

/* 인수형 vs 선택형 가격 차이 라벨 */
.ct-diff-mark {
  display:inline-block; margin-left:6px; padding:2px 8px;
  border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.2px;
  vertical-align:middle;
}
.ct-diff-mark.is-up { background:rgba(239,68,68,.18); color:#b91c1c; }
.ct-diff-mark.is-dn { background:rgba(34,197,94,.18); color:#15803d; }

/* 12 / 24 / 36 개월 그룹 구분선 — 다음 기간의 "기존" 칸 왼쪽에 굵은 보더 */
.contract-table thead th.ct-ch + th.ct-ch { border-left:2px solid var(--accent); }
.contract-table thead th.ct-sub-new + th.ct-sub { border-left:2px solid var(--accent); }
.contract-table tbody td.ct-new + td.ct-old { border-left:2px solid var(--accent); }

/* ===== Contract cards ===== */
.contract-list { display:flex; flex-direction:column; gap:12px; }
.contract-card {
  background:rgba(255,255,255,.95); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  -webkit-backdrop-filter:saturate(170%) blur(20px); backdrop-filter:saturate(170%) blur(20px);
}
.cc-head {
  background:rgba(255,255,255,.88); padding:10px 16px;
  border-bottom:1px solid var(--line-2); font-size:12px; color:var(--muted);
  font-weight:600;
}
.cc-term { font-weight:700; color:var(--ink); font-size:13.5px; letter-spacing:-.2px; }
.cc-row {
  display:grid; grid-template-columns:96px minmax(0,1fr) 180px;
  gap:16px; align-items:center; padding:14px 18px;
}
.cc-row + .cc-row { border-top:1px solid var(--line-2); }
.cc-base { background:transparent; }
.cc-change { background:rgba(37,99,235,.06); }
.cc-label { font-size:11.5px; }
.cc-tag {
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:10.5px; font-weight:600; border:0;
}
.tag-base   { background:var(--accent-tint); color:var(--accent-d); }
.tag-change { background:rgba(245,158,11,.18); color:#92400e; }
.cc-chips { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; min-width:0; scrollbar-width:thin; }
.cc-chips::-webkit-scrollbar { height:6px; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.96); border:1px solid var(--line);
  border-radius:99px; padding:3px 11px; font-size:11.5px; line-height:1.3;
  color:var(--ink); white-space:nowrap;
}
.chip-k { color:var(--muted); font-size:10.5px; font-weight:500; }
.chip-v { color:var(--ink); font-weight:600; }
.cc-price {
  text-align:right; display:flex; align-items:baseline; justify-content:flex-end; gap:4px;
  white-space:nowrap;
}
.cc-pv { font-size:18px; font-weight:700; color:var(--ink); font-feature-settings:"tnum"; letter-spacing:-.5px; }
.cc-pu { font-size:11.5px; color:var(--muted); }
.cc-pmark {
  margin-right:8px; font-size:10px; font-weight:600; padding:2px 9px;
  border-radius:99px; border:0; text-transform:uppercase; letter-spacing:.4px;
}
.cc-pmark-est  { background:rgba(245,158,11,.18); color:#92400e; }
.cc-pmark-real { background:rgba(34,197,94,.18); color:#15803d; }

@media (max-width:760px) {
  .cc-row { grid-template-columns:1fr; }
  .cc-price { text-align:left; justify-content:flex-start; }
  .dt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1200px) { .search-box .sb-grid { grid-template-columns: repeat(4, 1fr); } .sb-field.sb-wide-2 { grid-column: span 4; } }
@media (max-width: 760px)  { .search-box .sb-grid { grid-template-columns: 1fr 1fr; } .sb-field.sb-wide, .sb-field.sb-wide-2 { grid-column: span 2; } }

.flash-update { animation: flashRow 1.2s ease-out; }
@keyframes flashRow {
  0%   { background:rgba(37,99,235,.18); }
  60%  { background:rgba(37,99,235,.08); }
  100% { background:transparent; }
}

/* ===== Mypage ===== */
.mp-tabs { display:flex; gap:8px; margin-bottom:20px; }
.mp-tab {
  padding:9px 18px; border-radius:99px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,.7); border:1px solid var(--line-2);
}
.mp-tab:hover { background:#fff; text-decoration:none; }
.mp-tab.on {
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(37,99,235,.10));
  color:var(--accent-d); border-color:rgba(59,130,246,.22);
}
.mp-form { max-width:560px; }
.mp-form label { display:block; margin:14px 0 5px; font-size:13.5px; font-weight:600; color:var(--ink); }
.mp-form input { width:100%; box-sizing:border-box; }
.mp-form input:disabled { background:rgba(15,40,90,.04); color:var(--muted); }
.mp-form .btn-primary { margin-top:22px; }
.mp-hint { margin:4px 0 0; font-size:13px; }
.mp-sep { border:0; border-top:1px solid var(--line); margin:20px 0 4px; }
.mp-editable {
  font-size:10.5px; font-weight:700; color:var(--accent-d);
  background:rgba(59,130,246,.14); padding:2px 8px; border-radius:99px; margin-left:4px;
}
.dl-badge {
  font-size:11px; font-weight:700; color:#15803d;
  background:rgba(34,197,94,.16); padding:3px 9px; border-radius:99px; white-space:nowrap;
}
.mp-log-grid { grid-template-columns: repeat(3, 1fr) !important; }
.rt-cnt { margin-left:3px; font-size:12px; color:var(--accent-d); font-weight:600; }
/* 회전율: 모델 차트 컨테이너 + 촘촘한 표 */
.chart-wrap { position:relative; width:100%; min-height:120px; }
.grid-tight th, .grid-tight td { padding:5px 12px !important; font-size:13px; }
/* 회전율 행별 인라인 가로 바 */
.tv-bar-cell { vertical-align:middle; }
.tv-bar {
  position:relative; height:12px; border-radius:99px;
  background:rgba(15,40,90,.07); overflow:hidden; min-width:60px;
}
.tv-bar-fill { position:absolute; left:0; top:0; height:100%; border-radius:99px; min-width:2px; }
.tv-bar-mini { height:6px; }
/* 모델 그룹: 상품구분별 행을 촘촘하게(얇게) */
.tv-group-table td { padding:3px 12px !important; vertical-align:middle; }
.tv-group-table .tv-grp-sub td { border-top:0; }
.tv-group-table .tv-grp-first td { border-top:1px solid var(--line-2); }
.tv-model-cell { vertical-align:middle !important; }
.tv-mo { display:inline-block; margin-right:8px; font-size:13px; }
.tv-mo i { font-style:normal; color:var(--muted); font-size:11px; margin-right:3px; }
.tv-mo-inline { color:var(--accent-d); font-weight:600; font-size:12px; }
.tv-detail-row { cursor:pointer; }
.tv-detail-row:hover { background:rgba(59,130,246,.08); }
.tv-total { font-size:11px; margin-top:2px; }
/* 좌측 정렬 검색박스 */
.sb-grid-left { display:flex !important; flex-wrap:wrap; gap:18px; justify-content:flex-start; align-items:flex-start; }
.sb-grid-left .sb-auto { flex:0 0 auto; }
.sb-grid-left .sb-combo-w { flex:0 0 320px; max-width:320px; }
/* 모델 그룹 → 드릴다운 링크 */
.tv-model-link { font-weight:600; color:var(--accent-d); text-decoration:none; }
.tv-model-link:hover { text-decoration:underline; }
.tv-go { color:var(--muted); font-weight:700; }
.tv-cnt { font-size:13px; font-weight:600; color:var(--ink-soft); background:rgba(15,40,90,.06); padding:2px 10px; border-radius:99px; }
.tv-detail-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.tv-model-badge { font-size:14px; font-weight:700; color:var(--accent-d); background:var(--accent-tint); padding:3px 12px; border-radius:99px; margin:0 6px; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(15,40,90,.18); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:rgba(15,40,90,.30); }