/* ── ScanDeck v7 — Apple HIG ─────────────────────────────── */
/* "제거할 수 있는 것은 전부 제거한다"                          */

:root {
  --bg: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-sidebar: #fafafa;

  --text: #1d1d1f;
  --text-secondary: #48484a;
  --text-tertiary: #86868b;
  --text-placeholder: #aeaeb2;

  --red: #ff3b30;
  --red-bg: rgba(255, 59, 48, 0.06);
  --blue: #007aff;
  --blue-bg: rgba(0, 122, 255, 0.06);
  --green: #34c759;
  --green-bg: rgba(52, 199, 89, 0.06);
  --yellow: #ff9500;
  --yellow-bg: rgba(255, 149, 0, 0.06);
  --purple: #af52de;
  --purple-bg: rgba(175, 82, 222, 0.06);

  --separator: rgba(0, 0, 0, 0.04);
  --separator-opaque: rgba(0, 0, 0, 0.06);

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* ── 타이포그래피 ────────────────────────────────────────── */

.title-page {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 36px;
}

.title-section {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}

.title-card {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.caption {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ── 레이아웃 ────────────────────────────────────────────── */

#app-shell {
  display: flex;
  min-height: 100vh;
}

#main-content {
  flex: 1;
  padding: 40px 48px;
  overflow-y: auto;
  max-height: 100vh;
}

/* ── 사이드바 ────────────────────────────────────────────── */

#sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s;
}

#sidebar.collapsed { width: 56px; }
#sidebar.collapsed .s-brand-text,
#sidebar.collapsed .s-label,
#sidebar.collapsed .s-badge,
#sidebar.collapsed .s-user-info { display: none; }
#sidebar.collapsed .s-item { justify-content: center; padding: 10px 0; }
#sidebar.collapsed .s-header { justify-content: center; }
#sidebar.collapsed .s-user { justify-content: center; }

.s-header {
  padding: 20px 16px;
  display: flex;
  align-items: center;
}

.s-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.s-brand-icon {
  width: 26px;
  height: 26px;
  background: var(--text);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s-brand-icon svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.s-brand-text {
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.04em;
}

.s-nav {
  flex: 1;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.15s;
  letter-spacing: -0.01em;
  position: relative;
}

.s-item:hover { color: var(--text); }

.s-item.active {
  color: var(--text);
  font-weight: 600;
}

.s-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
}

.s-item .s-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-item .s-icon svg,
.s-item .s-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.s-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}

.s-version {
  padding: 10px 16px;
  border-top: 1px solid #1e2a3a;
  font-size: 11px;
  color: #4a5568;
  line-height: 1.4;
}

.s-footer {
  padding: 12px 8px;
}

.s-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 8px;
}

.s-avatar {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.s-user-name { color: var(--text); font-size: 13px; font-weight: 500; }
.s-user-role { color: var(--text-tertiary); font-size: 11px; }

.s-toggle {
  text-align: center;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 14px;
  padding: 4px;
}

/* ── 톱바 ────────────────────────────────────────────────── */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-date {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 400;
}

.btn-logout {
  padding: 8px 16px;
  border-radius: 12px;
  border: 0.5px solid var(--separator-opaque);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 500;
  transition: all 0.15s;
  height: 36px;
  display: inline-flex;
  align-items: center;
}
.btn-logout:hover { color: var(--text); border-color: rgba(0, 0, 0, 0.12); }

/* ── 배지 ────────────────────────────────────────────────── */

.badge {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 980px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  letter-spacing: -0.01em;
}

.badge-red { background: var(--red-bg); color: var(--red); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-muted { background: rgba(0, 0, 0, 0.03); color: var(--text-tertiary); }
.badge-dark { background: var(--text); color: #fff; }

/* ── 카드 ────────────────────────────────────────────────── */

.card {
  background: var(--bg-secondary);
  border-radius: 16px;
  border: none;
}

.card-inner {
  background: var(--bg);
  border-radius: 12px;
}

.card-header {
  padding: 16px 24px;
}

.card-header-title {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card-body { padding: 24px 28px; }
.card-pad { padding: 24px 28px; }

.card-section-header {
  padding: 20px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 0.5px solid var(--separator);
}

/* ── 통계 카드 ───────────────────────────────────────────── */

.stat-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-grid-5 { grid-template-columns: repeat(5, 1fr); }
.stat-grid-dashboard-top { grid-template-columns: 1fr 1fr 1fr 1fr 2fr; }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }

.stat-card {
  padding: 24px 28px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 16px;
}

.stat-card-accent {
  background: var(--text);
}
.stat-card-accent .stat-label { color: rgba(255, 255, 255, 0.5); }
.stat-card-accent .stat-value { color: #fff; }

.stat-label {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── 테이블 ──────────────────────────────────────────────── */

.table-wrap {
  background: var(--bg-secondary);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 13px;
}

.data-table td {
  padding: 14px 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}

.data-table thead tr { border-bottom: 0.5px solid var(--separator); }
.data-table tbody tr {
  border-bottom: 0.5px solid var(--separator);
  height: 52px;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(0, 0, 0, 0.015); }

/* 한국 증시 컨벤션 */
.c-up { color: var(--red); }
.c-down { color: var(--blue); }
.c-green { color: var(--green); }
.c-yellow { color: var(--yellow); }
.c-purple { color: var(--purple); }
.c-text { color: var(--text); }
.c-sec { color: var(--text-secondary); }
.c-mut { color: var(--text-tertiary); }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }

/* ── 버튼 ────────────────────────────────────────────────── */

.btn-primary {
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  border: none;
  background: var(--text);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-secondary:hover { background: rgba(0, 0, 0, 0.03); }
.btn-secondary:active { transform: scale(0.98); }

.btn-sm {
  height: 36px;
  font-size: 13px;
  padding: 0 16px;
}

.btn-danger {
  background: var(--red);
  color: #fff;
}

.btn-success {
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  border: none;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 입력 필드 ───────────────────────────────────────────── */

.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--bg);
  border: 0.5px solid var(--separator-opaque);
  border-radius: 12px;
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: all 0.2s;
}
.input:focus {
  border-color: var(--blue);
  border-width: 2px;
  padding: 0 14.5px;
}
.input::placeholder { color: var(--text-placeholder); }

.input-sm-center {
  width: 72px;
  height: 36px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 0 8px;
}

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── 토글 ────────────────────────────────────────────────── */

.toggle {
  width: 38px; height: 22px;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.08);
  border: none;
}
.toggle.active { background: var(--green); }
.toggle::after {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px; left: 2px;
  transition: left 0.2s;
}
.toggle.active::after { left: 18px; }

/* ── 탭 그룹 ────────────────────────────────────────────── */

.tab-group {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 3px;
}

.tab-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.tab-btn.active {
  background: #fff;
  color: var(--text);
  font-weight: 600;
}

/* ── 날짜 선택 버튼 ──────────────────────────────────────── */

.date-picker-wrap {
  margin-bottom: 24px;
}

.date-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.date-picker-btn:hover { opacity: 0.7; }

/* flatpickr 캘린더 커스텀 */
.flatpickr-calendar {
  font-family: var(--font) !important;
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.06) !important;
  padding: 8px !important;
}
.flatpickr-months { padding: 4px 0 8px !important; }
.flatpickr-month { color: var(--text) !important; }
.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.flatpickr-weekday {
  font-family: var(--font) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}
.flatpickr-day {
  font-family: var(--font) !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: none !important;
  color: var(--text) !important;
}
.flatpickr-day:hover { background: var(--bg-secondary) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--text) !important;
  color: #fff !important;
}
.flatpickr-day.today {
  border: 1.5px solid var(--text-secondary) !important;
}
.flatpickr-day.today.selected { border-color: var(--text) !important; }
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: var(--text-tertiary) !important;
  background: none !important;
  opacity: 0.35 !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { stroke: var(--text) !important; }
.flatpickr-input { display: none !important; }

/* ── 모달 ────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--bg);
  border-radius: 16px;
  width: 380px;
  max-width: 90vw;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}
.modal-header h3 {
  font-size: 17px;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-body { padding: 20px 24px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 24px;
}
.modal-error {
  padding: 10px 14px;
  background: var(--red-bg);
  border-radius: 12px;
  color: var(--red);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── 사용자 카드 ─────────────────────────────────────────── */

.user-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.user-card {
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.user-card.selected { outline: 2px solid var(--blue); outline-offset: -2px; }
.user-card.blocked { opacity: 0.4; }

/* ── 규칙 편집 패널 ──────────────────────────────────────── */

.rules-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 20px;
  padding: 24px;
}

.rules-col-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px 28px;
}

.rules-col-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

.rule-label {
  color: #48484a;
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.rule-hint {
  color: var(--text-tertiary);
  font-size: 11px;
  margin-top: 4px;
  text-align: left;
}

/* ── 스텝퍼 ──────────────────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepper-inner {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 0.5px solid var(--separator-opaque);
  border-radius: 12px;
  overflow: hidden;
  width: 170px;
}

.stepper-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font);
  line-height: 1;
  transition: color 0.15s;
}
.stepper-btn:hover { color: var(--text); }

.stepper-value {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font);
  background: transparent;
  border: none;
  color: var(--text);
  outline: none;
  font-variant-numeric: tabular-nums;
}

.stepper-suffix {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

/* ── D-N 차단 버튼 ──────────────────────────────────────── */

.dn-grid { display: flex; gap: 5px; flex-wrap: wrap; }

.dn-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.dn-btn.blocked {
  background: var(--red-bg);
  color: var(--red);
}

/* ── 규칙 요약 ───────────────────────────────────────────── */

.rules-summary {
  padding: 14px 24px;
  background: #f0f0f3;
  border-radius: 12px;
  margin: 0 24px 24px;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 28px;
  font-size: 13px;
  overflow-x: auto;
  align-items: center;
}

.rules-summary-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rules-summary-item .label { color: var(--text-tertiary); }
.rules-summary-item .value { font-weight: 600; }

.rules-readonly {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
}

.rules-tag {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 980px;
  background: var(--bg);
}
.rules-tag .label { color: var(--text-tertiary); }
.rules-tag .value { color: var(--text); font-weight: 600; }

/* ── 알림 로그 ───────────────────────────────────────────── */

.alert-log-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--separator);
}
.alert-log-item:last-child { border-bottom: none; }

.alert-log-time {
  color: var(--text-tertiary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}
.alert-log-msg { font-size: 14px; }

/* ── 페이지 섹션 ─────────────────────────────────────────── */

.page-section { display: none; }
.page-section.active { display: block; }

/* ── 빈 상태 ─────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-tertiary);
}
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.empty-state-desc { font-size: 13px; }

/* ── 백테스트 기간 선택 ──────────────────────────────────── */

.bt-period-select {
  display: block;
  width: 100%;
  margin-top: 12px;
  height: 36px;
  padding: 0 32px 0 10px;
  border: 0.5px solid var(--separator-opaque);
  border-radius: 10px;
  background: var(--bg);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.bt-period-select:focus { outline: none; border-color: var(--text); }

/* ── 백테스트 바차트 ─────────────────────────────────────── */

.bar-chart { display: flex; flex-direction: column; gap: 8px; }

.bar-row { display: flex; align-items: center; gap: 12px; }

.bar-label {
  width: 80px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: left;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  min-width: 2px;
  transition: width 0.3s;
}
.bar-fill.positive { background: var(--red); opacity: 0.6; }
.bar-fill.negative { background: var(--blue); opacity: 0.6; }

.bar-wr {
  width: 50px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
}

.bar-value {
  width: 80px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── 인사이트 카드 ───────────────────────────────────────── */

.insight-card {
  padding: 16px 20px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 8px;
}
.insight-card .insight-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.insight-card .insight-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── 규칙 카드 ───────────────────────────────────────────── */

.rule-card { padding: 24px; }

.rule-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.rule-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--separator);
  font-size: 14px;
}
.rule-row:last-child { border-bottom: none; }

.rule-row-label { color: var(--text-secondary); font-weight: 400; }
.rule-row-value { color: var(--text); font-weight: 600; }

/* ── 설정 그리드 ─────────────────────────────────────────── */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--separator);
}
.setting-item:last-child { border-bottom: none; }

.setting-label {
  font-size: 14px;
  font-weight: 500;
}

.setting-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── 유틸리티 레이아웃 ───────────────────────────────────── */

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mt-16 { margin-top: 16px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }

.text-center { text-align: center; }

.hidden { display: none !important; }

.overflow-hidden { overflow: hidden; }
.text-link { text-decoration: none; color: inherit; }
.text-link:hover { color: var(--text); }

.empty-cell { text-align: center; padding: 32px 16px !important; }

.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.rules-editor-header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
}

.toggle-sm { width: 32px; height: 18px; border-radius: 9px; }

.open-sl-box {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg);
  border: 0.5px solid var(--separator-opaque);
}

.notice-box {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
}

.success-msg {
  padding: 10px 14px;
  background: var(--green-bg);
  border-radius: 12px;
  color: var(--green);
  font-size: 13px;
}

.accent-highlight { border-left: 3px solid var(--yellow); }

/* ── 하단 탭바 ───────────────────────────────────────────── */

#bottom-tab-bar { display: none; }

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
  text-decoration: none;
  color: var(--text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.tab-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; }
.tab-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tab-label { font-size: 11px; line-height: 1; font-weight: 500; }
.tab-item { color: #c7c7cc; }
.tab-item.active { color: #1d1d1f; }
.tab-item.active .tab-icon svg { stroke-width: 2; }
.tab-item.active .tab-icon::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1d1d1f;
}

.tab-more-menu {
  display: none;
  position: fixed;
  bottom: 89px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0.5px solid var(--separator-opaque);
  border-radius: 16px;
  z-index: 1001;
  padding: 8px 0;
  min-width: 160px;
}
.tab-more-menu.show { display: block; }

.tab-more-item {
  display: block;
  padding: 12px 20px;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}
.tab-more-item:hover { background: rgba(0, 0, 0, 0.03); }
.tab-more-item.active { color: var(--text); font-weight: 600; }

/* ── 반응형 ──────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .user-cards { grid-template-columns: repeat(3, 1fr); }
  .rules-panel { grid-template-columns: 1fr 1fr; }
  .stat-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid-dashboard-top { grid-template-columns: repeat(3, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #sidebar { display: none !important; }

  #bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 83px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 0.5px solid var(--separator-opaque);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: flex-start;
    padding-top: 8px;
  }

  #main-content {
    padding: 16px;
    padding-bottom: 99px;
    max-height: none;
  }

  .top-bar { margin-bottom: 20px; }
  .title-page { font-size: 24px; }
  .title-section { font-size: 18px; }

  /* 그리드 */
  .stat-grid-5,
  .stat-grid-4,
  .stat-grid-dashboard-top { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-3 { grid-template-columns: 1fr; }
  .stat-value { font-size: 20px; }
  .user-cards { grid-template-columns: 1fr; }
  .rules-panel { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .grid-2col { grid-template-columns: 1fr; }

  /* 규칙 편집 패널 모바일 */
  .rules-col-card { padding: 20px; margin-bottom: 0; }
  .stepper { width: 100%; }
  .stepper-inner { width: auto; flex: 1; }
  .dn-grid { flex-wrap: wrap; }

  /* 규칙 요약 바: 2×3 그리드 */
  .rules-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    flex-wrap: unset;
    overflow-x: visible;
    font-size: 11px;
  }
  .rules-summary-item { white-space: normal; flex-shrink: unset; }

  /* 테이블 가로 스크롤 */
  .card { overflow-x: auto; }
  .data-table { min-width: auto; }

  /* 모바일에서 숨기는 컬럼 */
  .hide-mobile { display: none; }

  .modal { width: 100%; max-width: calc(100vw - 32px); }

}

/* ── period-filter-bar 모바일 ────────────────────────────── */
@media (max-width: 640px) {
  .period-filter-bar {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 4px;
    padding: 10px 12px;
  }
  .period-label { display: none; }
  .date-input,
  input[type="date"].date-input {
    width: 110px;
    font-size: 12px;
    padding: 4px 4px;
  }
  .period-sep { flex-shrink: 0; }
  .btn-query {
    padding: 5px 10px;
    font-size: 12px;
    flex-shrink: 0;
  }
  /* C1/C2 모바일: table-layout auto 복원 */
  #c1-table, #c2-table { table-layout: auto; }
  #c1-table th:nth-child(n), #c2-table th:nth-child(n) { width: auto; }
}

/* ── 로그인 페이지 ───────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-wrap {
  width: 100%;
  max-width: 360px;
}

.login-brand {
  text-align: center;
  margin-bottom: 40px;
}

.login-brand .s-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto 16px;
}

.login-brand .s-brand-icon svg {
  width: 26px;
  height: 26px;
}

.login-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 15px;
  color: var(--text-tertiary);
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.login-btn {
  width: 100%;
}

/* ── 기존 호환 ───────────────────────────────────────────── */

#pnlChart { max-height: 160px; }
#chart { background: var(--bg); }

/* ── C2 통계 가로 3열 ────────────────────────────────────── */
.c2-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.stat-mini-card {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px 20px;
}
.stat-mini-card .label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.stat-mini-card .value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.stat-mini-card .value.orange { color: #f97316; }

/* ── 종목명 줄바꿈 방지 / D-N 뮤트 ──────────────────────── */
.data-table td.stock-name {
  white-space: nowrap;
  min-width: 80px;
}
.data-table td.dn-col {
  color: #9ca3af;
  font-size: 12px;
}

/* ── flatpickr 달력 스타일 ───────────────────────────────── */
.flatpickr-calendar {
  font-family: inherit;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #3b82f6;
  border-color: #3b82f6;
}

/* ── 테이블 세로 중앙 정렬 ───────────────────────────────── */
table th, table td { vertical-align: middle; }
.data-table th, .data-table td { vertical-align: middle; }
.data-table th { white-space: nowrap; }
.user-holdings th,
.user-holdings td { vertical-align: middle !important; }

/* ── 기간 필터 바 ───────────────────────────────────────── */
.period-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  font-size: 13px;
}
.period-label {
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}
.period-sep { color: #9ca3af; }

.date-input,
input[type="date"].date-input {
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  background: #fff;
  cursor: pointer;
  width: 130px;
  text-align: center;
}
.date-input:focus,
input[type="date"].date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

.btn-query {
  flex-shrink: 0;
  padding: 5px 14px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-query:hover { background: #2563eb; }

/* ── 테이블 셀 nowrap + 가로 스크롤 ────────────────────── */
.data-table th:last-child,
.data-table td:last-child { min-width: 60px; }
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── C1/C2 컬럼 너비 고정 (table-layout: fixed) ─────────── */
#c1-table, #c2-table {
  table-layout: fixed;
  width: 100%;
}
#c1-table th:nth-child(1), #c2-table th:nth-child(1) { width: 11%; } /* 시간 */
#c1-table th:nth-child(2), #c2-table th:nth-child(2) { width: 27%; } /* 종목 */
#c1-table th:nth-child(3), #c2-table th:nth-child(3) { width: 13%; } /* 상승률/중심선 */
#c1-table th:nth-child(4), #c2-table th:nth-child(4) { width: 16%; } /* 구분/이중지지 */
#c1-table th:nth-child(5), #c2-table th:nth-child(5) { width: 20%; } /* 거래대금 */
#c1-table th:nth-child(6), #c2-table th:nth-child(6) { width: 13%; } /* D-N */