/* ==========================================================================
   2026 8월 DM 팜플렛 디자인 시스템 — 모바일 상담신청 페이지 테마
   원본: 팜플렛_4면_최종본.pdf (KB 스타일 · 크림 배경)
   규칙: 색감·폰트·디자인(배경/테두리/라운드)만 적용. 글씨 크기·내용 변경 금지.
   ========================================================================== */

/* ---------- 1. 폰트 (본고딕 웹 버전 = Noto Sans KR) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* ---------- 2. 디자인 토큰 (팜플렛과 동일한 HEX) ---------- */
:root {
  /* 4면(해법·신청) 메인 팔레트 */
  --dm-yellow:      #FFBC00;  /* KB옐로 — 버튼·칩·표 헤더·체크박스 */
  --dm-dark:        #3a3428;  /* 다크브라운 — 헤드라인·본문 진한 글씨 */
  --dm-gray:        #8c857a;  /* 그레이브라운 — 서브·캡션 */
  --dm-body:        #5c554a;  /* 표 본문 글씨 */
  --dm-line:        #eee8d8;  /* 표 구분선 */
  --dm-border:      #f0e9d8;  /* 카드 테두리 */
  --dm-bg:          #FFFDF5;  /* 크림 배경 (페이지 전체) */
  --dm-bg-soft:     #FCFAF3;  /* 표 짝수행·연한 박스 */
  --dm-box:         #FFF8E1;  /* QR·강조 박스 배경 (테두리 --dm-yellow 2px) */
  --dm-highlight:   #FFE38A;  /* 형광펜 강조 */
  --dm-highlight2:  #FFD54F;  /* 형광펜 강조(진한 버전) */
  --dm-gold:        #b0862c;  /* 골드 포인트 */
  --dm-disc:        #b8b2a6;  /* 하단 고지문 */

  /* 1~3면(문제 제기) 보조 팔레트 — 경고·수치 강조가 필요할 때 */
  --dm-navy:        #0b1f3a;
  --dm-red:         #b23842;

  --dm-radius:      14px;     /* 카드 라운드 */
  --dm-radius-pill: 20px;     /* 칩·배지 라운드 */
  --dm-font: 'Noto Sans KR', 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* ---------- 3. 페이지 기본 (색·폰트만 지정, font-size 지정 안 함) ---------- */
body.dm-theme {
  font-family: var(--dm-font);
  background: var(--dm-bg);
  color: var(--dm-dark);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 4. 컴포넌트 ---------- */

/* 노란 알약 배지 (팜플렛 키커) — 섹션 라벨용 */
.dm-kicker {
  display: inline-block;
  background: var(--dm-yellow);
  color: var(--dm-dark);
  font-weight: 900;
  padding: .45em 1.1em;
  border-radius: var(--dm-radius-pill);
}

/* 흰색 라운드 카드 (팜플렛 kcard) — 폼 섹션 컨테이너용 */
.dm-card {
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  padding: 16px 18px;
}

/* 카드 제목 (노란 점 불릿) */
.dm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--dm-dark);
}
.dm-card-title::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dm-yellow);
  flex-shrink: 0;
}

/* 형광펜 강조 */
.dm-hl  { background: linear-gradient(transparent 62%, var(--dm-highlight) 62%); }
.dm-hl2 { background: linear-gradient(transparent 60%, var(--dm-highlight2) 60%); font-weight: 900; }

/* 크림옐로 강조 박스 (팜플렛 QR박스) — 안내문·CTA 영역용 */
.dm-box {
  background: var(--dm-box);
  border: 2px solid var(--dm-yellow);
  border-radius: var(--dm-radius);
  padding: 14px 18px;
}

/* 메인 버튼 (상담신청 제출) */
.dm-btn {
  display: block;
  width: 100%;
  background: var(--dm-yellow);
  color: var(--dm-dark);
  font-family: var(--dm-font);
  font-weight: 900;
  border: none;
  border-radius: var(--dm-radius);
  padding: .9em 1em;
  cursor: pointer;
}
.dm-btn:active { filter: brightness(.95); }

/* 보조 버튼 (다크브라운 — 팜플렛 배지 톤) */
.dm-btn-dark {
  background: var(--dm-dark);
  color: #fff;
}
.dm-btn-dark b, .dm-btn-dark .accent { color: var(--dm-yellow); }

/* 입력 필드 — 크기 속성 없음, 색·테두리만 */
.dm-theme input[type="text"],
.dm-theme input[type="tel"],
.dm-theme input[type="email"],
.dm-theme input[type="number"],
.dm-theme select,
.dm-theme textarea {
  font-family: var(--dm-font);
  color: var(--dm-dark);
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: 10px;
  outline: none;
}
.dm-theme input:focus,
.dm-theme select:focus,
.dm-theme textarea:focus {
  border-color: var(--dm-yellow);
  box-shadow: 0 0 0 3px rgba(255,188,0,.18);
}
.dm-theme ::placeholder { color: var(--dm-disc); }

/* 라벨 */
.dm-label { font-weight: 900; color: var(--dm-dark); }
.dm-label-sub { color: var(--dm-gray); }

/* 체크박스·라디오 (팜플렛 노란 체크박스) */
.dm-theme input[type="checkbox"],
.dm-theme input[type="radio"] {
  accent-color: var(--dm-yellow);
}

/* 표 (팜플렛 비교표 문법) */
.dm-table { width: 100%; border-collapse: collapse; }
.dm-table th {
  background: var(--dm-yellow);
  color: var(--dm-dark);
  font-weight: 900;
}
.dm-table th.muted { background: #f2efe8; color: var(--dm-gray); }
.dm-table td {
  border-bottom: 1px solid var(--dm-line);
  color: var(--dm-body);
}
.dm-table td.key { font-weight: 800; color: var(--dm-dark); background: var(--dm-bg-soft); }
.dm-table tr:nth-child(even) td { background: var(--dm-bg-soft); }

/* 숫자 밴드 (2.7% / +8.9% / 비과세) */
.dm-band {
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  display: flex;
}
.dm-band > div { flex: 1; text-align: center; }
.dm-band > div + div { border-left: 1px solid var(--dm-line); }
.dm-band .chip {
  display: inline-block;
  background: var(--dm-yellow);
  color: var(--dm-dark);
  font-weight: 900;
  padding: .2em .8em;
  border-radius: 10px;
}
.dm-band .num { font-weight: 900; color: var(--dm-dark); }
.dm-band .cap { color: var(--dm-gray); font-weight: 700; }

/* 하단 고지문 */
.dm-disc { color: var(--dm-disc); }

/* 경고·수치 강조 (1~3면 톤이 필요할 때만) */
.dm-red  { color: var(--dm-red); font-weight: 800; }
.dm-navy { color: var(--dm-navy); font-weight: 900; }
.dm-gold { color: var(--dm-gold); font-weight: 800; }