/* 보험 접수 시스템 — 공통 스타일
   팔레트: 네이비 #0f1d36~#1b2a4a / 블루 #2563eb / 골드 #d97706
   외부 CDN 사용 없음 (B7) — 모든 자원은 서버에서 직접 제공 */

:root {
  --navy-900: #0f1d36;
  --navy-800: #16294a;
  --navy-700: #1b2a4a;
  --navy-600: #24365c;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #60a5fa;
  --gold: #d97706;
  --gold-light: #f59e0b;
  --green: #059669;
  --red: #dc2626;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 29, 54, .06);
  --shadow: 0 4px 14px rgba(15, 29, 54, .10);
  --shadow-lg: 0 18px 40px rgba(15, 29, 54, .18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  color: var(--gray-800);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 아이콘 (인라인 SVG — 이모지 금지) ---------- */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.18em; stroke-width: 2; }
.ic-lg { width: 1.6em; height: 1.6em; }

/* ---------- 레이아웃 ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 620px at 12% 8%, rgba(37, 99, 235, .38), transparent 60%),
    radial-gradient(950px 560px at 88% 18%, rgba(124, 58, 237, .34), transparent 62%),
    radial-gradient(800px 620px at 50% 108%, rgba(217, 119, 6, .22), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700) 55%, #101d38);
}

/* ---------- 카드 ---------- */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px 24px; }
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--gray-200);
  font-weight: 700;
  color: var(--navy-700);
}
.card-head .ic { color: var(--blue); }

/* ---------- 로그인 ---------- */
.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, .98);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 28px;
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #7c3aed 55%, var(--gold));
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .logo {
  width: 78px; height: 78px;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
}
.login-brand h1 { font-size: 19px; margin: 0 0 4px; color: var(--navy-800); }
.login-brand p { margin: 0; font-size: 13px; color: var(--gray-500); }

/* ---------- 폼 ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.field .hint { font-weight: 400; color: var(--gray-500); font-size: 12px; }
input[type="text"], input[type="password"], input[type="tel"], input[type="number"],
input[type="date"], input[type="email"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-800);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
input:disabled, select:disabled { background: var(--gray-100); color: var(--gray-500); }
textarea { resize: vertical; min-height: 64px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-ghost { background: #fff; color: var(--navy-700); border-color: var(--gray-300); }
.btn-ghost:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--navy-800); }
/* 금색 버튼 — 흰 글자/아이콘이 밝은 주황 위에서 잘 안 보여(대비 3.2) 진한 주황으로 낮췄다 (2026-09-30) */
.btn-gold { background: #b45309; border-color: #b45309; }
.btn-gold:hover { background: #92400e; border-color: #92400e; }
.btn-danger { background: var(--red); border-color: var(--red); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; }

/* ---------- 알림 ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.alert-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.hidden { display: none !important; }

/* ---------- 안내 띠 (비밀번호 변경 요청) ---------- */
.pw-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(90deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  color: #92400e;
  font-size: 13.5px;
  margin-bottom: 16px;
}
/* 배너 안내 아이콘만 금색 — 2026-09-30 수정: 종전 규칙이 버튼 안 아이콘까지 물들여
   '지금 변경' 버튼의 열쇠 아이콘이 배경과 같은 색(금색 위 금색)이 되어 보이지 않았다 */
.pw-banner > .ic { color: #b45309; flex: 0 0 auto; }
.pw-banner .btn .ic { color: #fff; flex: 0 0 auto; }
.pw-banner .grow { flex: 1; }
.pw-banner button { flex: 0 0 auto; }

/* ---------- 헤더 ---------- */
.topbar {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: 13px 0;
  box-shadow: var(--shadow);
}
.topbar .wrap { display: flex; align-items: center; gap: 14px; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.topbar .brand .logo { width: 32px; height: 32px; display: block; object-fit: contain; }
.topbar .spacer { flex: 1; }
.topbar .who {
  font-size: 13px;
  color: var(--gray-300);
  text-align: right;
  line-height: 1.4;
  white-space: nowrap;          /* 권한·단체가 두 줄로 감기지 않게 */
  display: flex;
  align-items: center;
  gap: 7px;
}
.topbar .who b { color: #fff; font-size: 13.5px; }
.topbar .who .who-group { color: var(--gray-300); font-size: 12.5px; }

/* 화면에서 쓰는 강조 제목·라벨 (색을 한 곳에서 관리해 다크에서도 보이게) */
.toc-head { font-weight: 800; color: var(--navy-700); margin-bottom: 6px; }
.lbl-strong { color: var(--navy-700); }
.role-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(217, 119, 6, .22);
  color: #fcd34d;
  border: 1px solid rgba(217, 119, 6, .45);
}

/* ---------- 모달 ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15, 29, 54, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  background: var(--navy-700); color: #fff;
  font-weight: 700;
}
.modal-body { padding: 20px; }
.modal-foot {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* ---------- 유틸 ---------- */
.muted { color: var(--gray-500); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.mt0 { margin-top: 0; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; }
.spin {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   다크 모드 (2026-09-30)
    · html[data-theme="dark"] 로 켠다 (assets/theme.js)
    · 회색 단계를 뒤집어 쓰고, 하드코딩된 면은 아래에서 덮는다
   ============================================================ */
html[data-theme="dark"] {
  --navy-900: #0b1220;
  --navy-800: #101a2f;
  --navy-700: #16233c;
  --navy-600: #1e2d4d;
  --blue: #5b93f8;
  --blue-dark: #2563eb;
  --blue-light: #93c5fd;
  --gold: #f59e0b;
  --gray-50: #0b1220;
  --gray-100: #17223a;
  --gray-200: #26324c;
  --gray-300: #2f3d5a;
  --gray-400: #7d8ca6;
  --gray-500: #93a3bd;
  --gray-600: #b3c0d4;
  --gray-700: #d3dced;
  --gray-800: #e9eff9;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .65);
}
html[data-theme="dark"] body { background: #0b1220; color: #e9eff9; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal { background: #141d33; border-color: #26324c; }
html[data-theme="dark"] .card-head { color: #dbe6f7; }
html[data-theme="dark"] .modal-head { background: #1b2a4a; }
html[data-theme="dark"] .modal-foot { background: #101a2f; border-color: #26324c; }
html[data-theme="dark"] .modal-back { background: rgba(3, 7, 18, .72); }
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0f1a2e; color: #e9eff9; border-color: #2f3d5a; color-scheme: dark;
}
html[data-theme="dark"] ::placeholder { color: #6b7c96; }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled {
  background: #17223a; color: #93a3bd;
}
html[data-theme="dark"] .btn-ghost { background: #17223a; color: #d3dced; border-color: #2f3d5a; }
html[data-theme="dark"] .btn-ghost:hover { background: #1e2d4d; color: #fff; border-color: #3d4d6e; }
html[data-theme="dark"] .alert-error { background: #2a1416; border-color: #6b1f22; color: #fca5a5; }
html[data-theme="dark"] .alert-info { background: #12203a; border-color: #1e3a6b; color: #93c5fd; }
html[data-theme="dark"] .alert-warn { background: #2a2110; border-color: #6b5312; color: #fcd34d; }
html[data-theme="dark"] .alert-ok { background: #0d231c; border-color: #14532d; color: #6ee7b7; }
html[data-theme="dark"] .pw-banner {
  background: linear-gradient(90deg, #2a2110, #322711); border-color: #6b5312; color: #fcd34d;
}
html[data-theme="dark"] .login-card { background: rgba(20, 29, 51, .98); }
html[data-theme="dark"] .login-brand h1 { color: #e9eff9; }
html[data-theme="dark"] .topbar { background: linear-gradient(120deg, #0b1220, #16233c); }
html[data-theme="dark"] .center-page {
  background:
    radial-gradient(1100px 620px at 12% 8%, rgba(37, 99, 235, .30), transparent 60%),
    radial-gradient(950px 560px at 88% 18%, rgba(124, 58, 237, .26), transparent 62%),
    radial-gradient(800px 620px at 50% 108%, rgba(217, 119, 6, .16), transparent 60%),
    linear-gradient(160deg, #070c17, #0f1a2f 55%, #0a1424);
}

/* 테마 전환 버튼 — 라이트에서는 '어둡게', 다크에서는 '밝게' */
.theme-toggle .t-light, .theme-toggle .t-dark { display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle .t-dark { display: none; }
html[data-theme="dark"] .theme-toggle .t-light { display: none; }
html[data-theme="dark"] .theme-toggle .t-dark { display: inline-flex; }

/* 고객 접수 화면(index.php) 보정 */
html[data-theme="dark"] .sheet { background: #141d33; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .agent-card { background: #0d2b22; border-color: #10b981; color: #a7f3d0; }
html[data-theme="dark"] .sec { background: #1b2540; color: #dbe6f7; border-left-color: var(--blue); }
html[data-theme="dark"] .grp { border-bottom-color: #1c2740; }
html[data-theme="dark"] .sig-wrap { background: #0f1a2e; border-color: #2f3d5a; }
html[data-theme="dark"] .sig-wrap .wm { color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .submit-sec { background: #141d33; }
html[data-theme="dark"] #insuredSection { background: #101a2f !important; }
html[data-theme="dark"] .done .okicon { background: #0d2b22; color: #34d399; }
html[data-theme="dark"] .done h2 { color: #e9eff9; }
html[data-theme="dark"] .no-box { background: #1b2540; border-color: #2f3d5a; color: #e9eff9; }
html[data-theme="dark"] .pdf-frame { background: #101a2f; border-color: #2f3d5a; }

/* 사용 안내(help.php) 보정 */
html[data-theme="dark"] .sec-head { border-bottom-color: #26324c; color: #dbe6f7; }
html[data-theme="dark"] .sec-body { color: #cbd5e1; }
html[data-theme="dark"] .toc a { color: #b3c0d4; }
html[data-theme="dark"] .ms-table td { border-bottom-color: #1c2740; }
html[data-theme="dark"] .ms-table td.ms-key { color: #d3dced; }
html[data-theme="dark"] .ms-btns td { border-bottom-color: #26324c; }
html[data-theme="dark"] .ms-btns td.ms-btn { color: #dbe6f7; }
html[data-theme="dark"] .ms-fgroup { color: #dbe6f7; }
html[data-theme="dark"] .ms-q { color: #dbe6f7; }

/* 다크에서 대비가 부족하던 버튼·아이콘 (2026-09-30 재관님 지적)
   골드 버튼은 흰 글자/아이콘이 밝은 주황 위에 놓여 잘 보이지 않았다 → 더 진한 주황으로 낮춘다 */
html[data-theme="dark"] .btn-gold { background: #b45309; border-color: #b45309; color: #fff; }
html[data-theme="dark"] .btn-gold:hover { background: #92400e; border-color: #92400e; }
html[data-theme="dark"] .pw-banner > .ic { color: #fbbf24; }
html[data-theme="dark"] .pw-banner .btn .ic { color: #fff; }
html[data-theme="dark"] .role-badge { color: #fcd34d; }

/* ---- 다크에서 사라지던 요소 보정 (2026-09-30 재관님 지적 + 자동 대비 점검 결과) ---- */
html[data-theme="dark"] .topbar .who .who-group { color: #93a3bd; }  /* 상단 단체명 (배경과 같았음) */
html[data-theme="dark"] .toc-head,
html[data-theme="dark"] .lbl-strong { color: #dbe6f7; }          /* 목차 제목·라벨 */
html[data-theme="dark"] .sec .ic { color: #60a5fa; }             /* 접수 화면 구역 아이콘 */
/* 상단 로고는 이미지(회사 로고)라 다크 전용 배경 규칙이 필요 없다 (2026-09-30) */
/* 채워진 파란 버튼만 더 진한 파랑으로 (흰 글자 대비 확보)
   ★ 고스트·골드·위험 버튼은 제외한다 — 예전에 .btn 으로만 잡았다가 고스트 버튼이 파랗게 변했다 */
html[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-gold):not(.btn-danger) {
  background: #2563eb; border-color: #2563eb; }
html[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-gold):not(.btn-danger):hover {
  background: #1d4ed8; border-color: #1d4ed8; }