/* ===== 디자인 토큰 ===== */
:root {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-light: #eef2ff;
  --accent-border: #c7d2fe;

  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  --success: #16a34a;
  --success-light: #f0fdf4;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, .08);

  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;

  /* Bootstrap 5.3 변수 오버라이드 — 별도 Sass 빌드 없이 CDN만으로 전역 재테마 */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border);
  --bs-success: var(--success);
  --bs-success-rgb: 22, 163, 74;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 217, 119, 6;
}

body {
  background-color: var(--bg);
  font-family: var(--font-sans);
  color: var(--text);
}

::selection { background: var(--accent-border); }

/* ===== 카드 ===== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}

/* ===== 버튼 ===== */
.btn {
  font-weight: 500;
}

/* Bootstrap 5.3.0 CDN 빌드는 .btn-primary 등에서 --bs-primary를 참조하지 않고
   고정 hex(#0d6efd)를 직접 박아두므로, :root 변수 오버라이드만으로는 안 바뀜.
   컴포넌트가 실제로 읽는 --bs-btn-* 변수를 여기서 직접 덮어쓴다. */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent-border);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent-border);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-muted);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--text-muted);
  --bs-btn-hover-border-color: var(--text-muted);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem var(--accent-light);
}

/* 클래식/AI 모드 같은 segmented 토글 버튼 (JS가 btn-primary <-> btn-outline-* 클래스를 스왑) */
.mode-btn,
#btn-extract-classic,
#btn-extract-ai {
  border-radius: var(--radius-sm) !important;
}

/* ===== 폼 ===== */
.form-control,
.form-select {
  border-color: var(--border-strong);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ===== 탭 ===== */
.nav-tabs {
  border-bottom-color: var(--border);
}
.nav-tabs .nav-link {
  border: none;
  color: var(--text-muted);
  font-weight: 500;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.nav-tabs .nav-link:hover {
  border: none;
  background: var(--accent-light);
  color: var(--accent);
}
.nav-tabs .nav-link.active {
  border: none;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

/* ===== 배지 ===== */
.badge {
  font-weight: 500;
  border-radius: var(--radius-sm);
}

/* ===== 모달 ===== */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}
.modal-header {
  border-bottom-color: var(--border);
}

/* ===== 알림 / toast (dom-utils.js의 notify()) ===== */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 브랜드 아이콘 (navbar, login 등에서 공용으로 사용) */
.brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* ===== 상단 네비게이션 ===== */
.app-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-navbar .navbar-brand {
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-navbar .nav-link {
  color: var(--text-muted);
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.app-navbar .nav-link:hover {
  color: var(--accent);
  background: var(--accent-light);
}
.app-navbar .nav-link.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}
.app-navbar .btn-logout {
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .8rem;
}
.app-navbar .btn-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-light);
}

/* ===== 초안 생성 화면 ===== */
.draft-area {
  height: calc(100vh - 200px);
  min-height: 300px;
  resize: none;
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .draft-area {
    height: 300px;
  }
}