/* =====================================================================
   머니펄스 화면 기준 — 한 팔레트 · 한 글꼴 (RC11 · T-20260928-22 · B88·B96)
   기준: 고급 업종 탐색형 — 흰색 바탕 · 딥네이비 · 절제된 파란색 (CLAUDE.md 2절 · 방 카드)
   색 정본: dongne.html(2026-09-23 모바일 기준 화면)의 색을 여기로 올렸다.
   ★ 손님 화면은 색·글꼴을 아래 --kmp-* 변수로만 쓴다. 화면마다 따로 색을 박으면 다시 두 벌이 된다.
   ★ 그림(assets/renewal/*.png — 09-11 1안 "종이 위의 발견")은 그대로 두고 틀만 이 팔레트로.
   ★ 웹 글꼴을 내려받지 않는다(예전 나눔고딕 두 벌 약 4MB — B96). assets/fonts 는 PDF 가 쓴다.
   ===================================================================== */

:root {
  --kmp-page: #f6f8fb;          /* 화면 바탕 */
  --kmp-bg: #ffffff;            /* 카드·칸 */
  --kmp-surface: #f1f4f8;       /* 안쪽 칸·입력 */
  --kmp-surface-2: #e9eef5;
  --kmp-navy: #1b2a4a;          /* 딥네이비 — 제목·주 단추·메뉴 (흰 바탕 14.2:1) */
  --kmp-navy-hover: #243760;
  --kmp-ink: #1f2530;           /* 본문 */
  --kmp-ink-2: #3a4351;         /* 둘째 글 (10.0:1) */
  --kmp-muted: #5b6472;         /* 보조 글 (흰 바탕 5.98:1 · 안쪽 칸 5.4:1) */
  --kmp-faint: #8a929e;         /* 꺼진 것 표시에만 (3.1:1) */
  --kmp-line: #e2e7ee;
  --kmp-line-strong: #cbd3de;
  --kmp-blue: #245a9e;          /* 절제된 파란색 — 링크·강조 (흰 바탕 6.9:1) */
  --kmp-blue-soft: #edf3fb;
  --kmp-blue-line: #c7d8ef;
  --kmp-red: #a3342c;
  --kmp-red-soft: #fbefee;
  --kmp-green: #1d6b46;
  --kmp-green-soft: #edf6f1;
  --kmp-on-navy: #ffffff;
  --kmp-on-navy-2: #d6ddea;     /* 딥네이비 위 보조 글 (10.4:1) */
  --kmp-on-navy-3: #b9c8e3;     /* 딥네이비 위 눈썹 글 (8.3:1) */
  --kmp-radius: 16px;           /* 카드 (옛 10·12·14·16·18·20 → 둘: 카드 16 · 큰 머리 카드 20) */
  --kmp-radius-sm: 10px;
  --kmp-radius-lg: 20px;
  --kmp-card-pad: 20px;         /* 카드 안쪽 여백 (옛 14~28) */
  --kmp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --kmp-shadow-lift: 0 10px 30px rgba(16, 24, 40, 0.12);
  --kmp-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --kmp-tabbar-h: 60px;
  --kmp-topbar-h: 58px;

  /* 화면 틀 한 벌 — T-20261010-47 (홈 인트로 → 각 화면 "다짜깁기" 정리 · B165 · B194) */
  --kmp-w-read: 680px;          /* 글 · 폼 · 결제 한 줄 폭 (옛 430·440·560·680) */
  --kmp-w-wide: 1200px;         /* 목록 · 상세 폭 — 홈 인트로 .gi-wrap 과 같은 폭 (옛 1040·1100·1120) */
  --kmp-gutter: 16px;           /* 좌우 여백 — 홈 인트로 --intro-pad 와 같음 (옛 13·14·16·18·20) */
  --kmp-fs-hero: clamp(28px, 7vw, 40px);   /* 네이비 큰 머리 카드 제목 */
  --kmp-fs-h1: clamp(24px, 6.4vw, 30px);   /* 화면 제목 */
  --kmp-fs-h2: 20px;
  --kmp-fs-h3: 17px;
  --kmp-fs-body: 15px;
  --kmp-fs-small: 13px;
  --kmp-lh-body: 1.7;
  --kmp-btn-h: 52px;            /* 단추 높이 (옛 44·48·52·54·56) */
  --kmp-btn-h-sm: 44px;
  --kmp-btn-r: 12px;
  --kmp-btn-fs: 16px;           /* 단추 글자 (옛 14·15·16·18) */
  --kmp-mark: #3182f6;          /* 머리글 로고 원 — 홈 로고 원과 같은 값 (B164 ⑤ 대표 결정 전 · 바꿀 때 이 한 곳) */

  /* 옛 이름 — 이 이름을 쓰는 CSS 가 남아 있어도 같은 팔레트로 보인다 */
  --renewal-paper: var(--kmp-page);
  --renewal-paper-light: var(--kmp-bg);
  --renewal-ink: var(--kmp-ink);
  --renewal-muted: var(--kmp-muted);
  --renewal-line: var(--kmp-line);
  --renewal-ochre: var(--kmp-blue);
  --renewal-forest: var(--kmp-navy);
  --renewal-red: var(--kmp-navy);
  --renewal-shadow: rgba(16, 24, 40, 0.06);
}
@media (min-width: 768px) {
  :root { --kmp-gutter: 24px; }
}
@media (max-width: 540px) {
  :root { --kmp-card-pad: 18px; }
}

/* ---------- 모든 손님 화면 공통 ---------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--kmp-focus, var(--kmp-blue));
  outline-offset: 2px;
}
.kmp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Clipping must not disguise layout defects. */
body.renewal-paper *, body.editorial-workbook * { box-sizing: border-box; }
body.renewal-paper [hidden], body.editorial-workbook [hidden] { display: none !important; }

body.renewal-paper,
body.editorial-workbook {
  max-width: 100%;
  margin: 0;
  background: var(--kmp-page);
  color: var(--kmp-ink);
  font-family: var(--kmp-font);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.renewal-paper :is(button, .cta, .go, .button, .tab),
body.editorial-workbook :is(button, .action, .go, .pay, .login) { min-height: 44px; }
body.renewal-paper :is(.top, .row), body.editorial-workbook .top { flex-wrap: wrap; gap: 12px; }
body.renewal-paper :is(p, li, a, h1, h2),
body.editorial-workbook :is(p, li, a, h1, h2) { overflow-wrap: anywhere; }
body.renewal-paper :is(button, input, select, textarea),
body.editorial-workbook :is(button, input, select, textarea) { font-family: inherit; }
body.renewal-paper :is(input, select, textarea),
body.editorial-workbook :is(input, select, textarea) { max-width: 100%; font-size: 16px; }

/* 글 — 요소 이름만 보는 넓은 규칙은 :where 로 무게 0 (화면 규칙이 늘 이긴다 — B92 원인이던 덮어쓰기 막음) */
:where(body.renewal-paper, body.editorial-workbook) :where(h1, h2, h3) {
  color: var(--kmp-navy);
  font-family: var(--kmp-font);
  letter-spacing: -0.02em;
}
:where(body.renewal-paper, body.editorial-workbook) :where(p, li) { color: var(--kmp-ink-2); }
:where(body.renewal-paper, body.editorial-workbook) :where(a) { color: var(--kmp-blue); }

/* 칸 — 폭 둘(읽는 폭 680 · 넓은 폭 1200) · 좌우 여백 하나(--kmp-gutter). 목록·상세 화면은 <body class="kmp-wide"> (T-20261010-47) */
body.renewal-paper,
body.editorial-workbook { --kmp-w: var(--kmp-w-read); }
body.kmp-wide { --kmp-w: var(--kmp-w-wide); }
:is(body.renewal-paper, body.editorial-workbook) :is(.wrap, .page, .plans-wrap) {
  box-sizing: border-box;
  width: min(var(--kmp-w), calc(100% - 2 * var(--kmp-gutter)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

body.renewal-paper :is(.brand, .top) b { color: var(--kmp-blue); }

/* 카드·칸 — 선 굵기·색은 --kmp-card-bw · --kmp-card-bc (RC3: 홈 쪽지 카드와 같은 2px 먹선 · 값이 없으면 예전 1px 연한 선) */
body.renewal-paper :is(.card, .panel, .faq, .empty, .draft, .refund-box) {
  border: var(--kmp-card-bw, 1px) solid var(--kmp-card-bc, var(--kmp-line));
  border-radius: var(--kmp-radius);
  background: var(--kmp-bg);
  box-shadow: var(--kmp-shadow);
}
body.renewal-paper .draft {
  background: var(--kmp-blue-soft);
  border-width: 1px;
  border-color: var(--kmp-blue-line);
  color: var(--kmp-ink-2);
  box-shadow: none;
}

/* 머리 띠 — 딥네이비 한 가지 (RC3: --kmp-band 가 있으면 홈 녹청 띠 색) */
body.renewal-paper .hero {
  border: 0;
  border-radius: var(--kmp-radius);
  background: var(--kmp-band, var(--kmp-navy));
  color: var(--kmp-on-navy);
  box-shadow: none;
}
body.renewal-paper .hero :is(h1, h2) { color: var(--kmp-on-navy); }
body.renewal-paper .hero :is(p, li) { color: var(--kmp-on-navy-2); }

/* 입력 */
body.renewal-paper :is(input, textarea, select) {
  border: 1px solid var(--kmp-line-strong);
  border-radius: var(--kmp-radius-sm);
  background: var(--kmp-bg);
  color: var(--kmp-ink);
}
/* 초점 고리 색 — RC4 · B294: 옛 파랑 18% 한 겹은 카드 위 1.3:1 이라 체크 칸 · 글상자에서 안 보였다 → 홈과 같은 먹색(--kmp-focus). 굵기 · 간격은 그대로. 값이 없는 곳(:has 를 모르는 옛 브라우저)은 예전 그대로 */
body.renewal-paper :is(input, textarea, select):focus {
  border-color: var(--kmp-blue);
  outline: 2px solid var(--kmp-focus, rgba(36, 90, 158, 0.18));
  outline-offset: 1px;
}
body.renewal-paper input[type="checkbox"],
body.editorial-workbook input[type="checkbox"] { accent-color: var(--kmp-navy); }

/* 단추 — 주 단추는 딥네이비 한 가지 (RC3: --kmp-action* 값이 있는 하위 화면은 홈 황토 단추 · 값이 없는 홈 회원 화면은 예전 그대로) */
body.renewal-paper :is(.cta, .go, .button, .login a, .refund-action, .pay),
.kmp-btn {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: var(--kmp-action-border, 1px solid var(--kmp-navy));
  border-radius: 12px;
  background: var(--kmp-action, var(--kmp-navy));
  color: var(--kmp-on-action, var(--kmp-on-navy));
  font-family: var(--kmp-font);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--kmp-action-sh, none);
  cursor: pointer;
}
/* 단추 한 크기(T-20261010-47) — 홈 인트로(index.html)는 이 범위 밖이라 .kmp-btn 이 그대로 48px */
:is(body.renewal-paper, body.editorial-workbook) :is(.cta, .go, .button, .login a, .refund-action, .pay, .kmp-btn) {
  min-height: var(--kmp-btn-h);
  border-radius: var(--kmp-btn-r);
  font-size: var(--kmp-btn-fs);
}
body.renewal-paper :is(.cta, .go, .button, .login a, .refund-action, .pay):hover,
.kmp-btn:hover { background: var(--kmp-action-hover, var(--kmp-navy-hover)); }
body.renewal-paper :is(.go, .pay, .refund-action):disabled,
.kmp-btn:disabled,
.kmp-btn[aria-disabled="true"] {
  border-color: var(--kmp-line);
  background: var(--kmp-surface);
  color: var(--kmp-faint);
  box-shadow: none;
  cursor: default;
}
body.renewal-paper .refund-action.secondary,
.kmp-btn--line {
  border: var(--kmp-sub-border, 1px solid var(--kmp-line-strong));
  background: var(--kmp-bg);
  color: var(--kmp-navy);
  box-shadow: none;
}
body.renewal-paper .refund-action.secondary:hover,
.kmp-btn--line:hover { background: var(--kmp-surface); }

/* 탭·고르기 칸 */
body.renewal-paper :is(.tab, .opt) {
  border-radius: var(--kmp-radius-sm);
}
body.renewal-paper :is(.tab.active, .opt.on) {
  border-color: var(--kmp-navy);
  background: var(--kmp-blue-soft);
  color: var(--kmp-navy);
}
body.renewal-paper :is(.why, .num, .plan-badge) { border-radius: 999px; }

/* 표 — 좁은 화면에서는 칸 안에서 옆으로 */
body.renewal-paper table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* 배지 */
.kmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid var(--kmp-blue-line);
  border-radius: 999px;
  background: var(--kmp-blue-soft);
  color: var(--kmp-blue);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.kmp-badge--muted {
  border-color: var(--kmp-line);
  background: var(--kmp-surface);
  color: var(--kmp-ink-2);
}

/* 결제 순서 줄 */
.purchase-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kmp-muted);
}
.purchase-steps li {
  padding: 7px 11px;
  border: 1px solid var(--kmp-line);
  border-radius: 999px;
  background: var(--kmp-bg);
}
.purchase-steps [aria-current="step"] {
  border-color: var(--kmp-navy);
  background: var(--kmp-navy);
  color: var(--kmp-on-navy);
  font-weight: 800;
}
/* 계좌이체 주문 결과 칸 — checkout.html 의 이 줄들은 코덱스 가지와 붙어 있어 화면 파일 대신 여기서 색만 맞춘다 */
body.renewal-payment-page .transfer-result { border: 1px solid var(--kmp-blue-line); background: var(--kmp-blue-soft); }
body.renewal-payment-page .transfer-result h2 { color: var(--kmp-navy); }
body.renewal-payment-page .transfer-result .amount { color: var(--kmp-navy); }
body.renewal-payment-page .transfer-result p { color: var(--kmp-ink-2); }

/* 그림 — 1안 일러스트는 그대로, 틀만 */
.renewal-scene {
  display: block;
  width: 100%;
  height: clamp(138px, 22vh, 220px);
  margin: 0;
  border: 1px solid var(--kmp-line);
  border-radius: var(--kmp-radius);
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}
.renewal-scene--checkout { object-position: center 54%; }
.renewal-scene--account { object-position: center 58%; }
body.renewal-account-page .renewal-scene { height: clamp(120px, 18vh, 170px); }
/* WebP 우선 <picture> — 상자 없이 img 만 그린다(source 를 숨기지 않으면 격자에 높이 0 칸이 생김) */
picture { display: contents; }
picture > source { display: none; }

/* ---------- 메뉴 한 벌 (B83·B84) ----------
   휴대폰: 화면 아래 고정 탭 다섯 · 768px 이상: 화면 위 고정 한 줄. 이름 목록은 customer-navigation.js 하나. */
.customer-navigation {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
  border-top: 1px solid var(--kmp-line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
  font-family: var(--kmp-font);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
}
.customer-navigation a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: var(--kmp-tabbar-h);
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kmp-muted) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.customer-navigation a svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.customer-navigation a[aria-current="page"] { color: var(--kmp-navy) !important; font-weight: 800; }
.customer-navigation a[aria-current="page"] svg { stroke-width: 2.2; }
.customer-navigation .kmp-nav-full { display: none; }
.customer-navigation a:focus-visible { outline-offset: -3px; }
body.kmp-has-nav { padding-bottom: calc(var(--kmp-tabbar-h) + env(safe-area-inset-bottom) + 12px) !important; }

@media (min-width: 768px) {
  .customer-navigation {
    top: 0;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap: 4px;
    height: var(--kmp-topbar-h);
    padding: 0 16px;
    border-top: 0;
    border-bottom: 1px solid var(--kmp-line);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
  }
  .customer-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    margin: auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--kmp-ink-2) !important;
    font-size: 14px;
  }
  .customer-navigation a svg { width: 18px; height: 18px; }
  .customer-navigation a:hover { background: var(--kmp-surface); }
  .customer-navigation a[aria-current="page"] { background: var(--kmp-navy); color: var(--kmp-on-navy) !important; }
  .customer-navigation .kmp-nav-full { display: inline; }
  .customer-navigation .kmp-nav-short { display: none; }
  body.kmp-has-nav { padding-bottom: 0 !important; padding-top: calc(var(--kmp-topbar-h) + 4px) !important; }
}
@media print {
  .customer-navigation { display: none !important; }
  body.kmp-has-nav { padding: 0 !important; }
}

/* ---------- 선택 창 (B89 — assets/renewal/kmp-picker.js) ---------- */
.kmp-picker-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.kmp-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--kmp-line-strong);
  border-radius: 12px;
  background: var(--kmp-bg);
  color: var(--kmp-ink);
  font-family: var(--kmp-font);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kmp-picker-trigger:hover { border-color: var(--kmp-navy); }
.kmp-picker-trigger:disabled { background: var(--kmp-surface); color: var(--kmp-faint); cursor: default; border-color: var(--kmp-line); }
.kmp-picker-trigger .kmp-picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmp-picker-trigger .kmp-picker-value.is-placeholder { color: var(--kmp-muted); font-weight: 500; }
.kmp-picker-trigger svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--kmp-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kmp-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  align-items: end;
  justify-items: center;
  background: var(--kmp-scrim, rgba(15, 23, 42, 0.46));
}
.kmp-picker-sheet[hidden] { display: none !important; }
.kmp-picker-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  width: 100%;
  max-width: 560px;
  height: min(86vh, 720px);
  height: min(86dvh, 720px);
  border-radius: 20px 20px 0 0;
  background: var(--kmp-bg);
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.22);
  font-family: var(--kmp-font);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.kmp-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 8px 20px;
}
.kmp-picker-head strong { color: var(--kmp-navy); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.kmp-picker-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--kmp-surface);
  color: var(--kmp-ink-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.kmp-picker-search-wrap { padding: 4px 16px 8px; }
.kmp-picker-search {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--kmp-line-strong);
  border-radius: 12px;
  background: var(--kmp-surface);
  color: var(--kmp-ink);
  font-family: inherit;
  font-size: 16px;
}
.kmp-picker-search:focus { border-color: var(--kmp-blue); background: var(--kmp-bg); outline: 2px solid rgba(36, 90, 158, 0.18); outline-offset: 1px; }
.kmp-picker-chips {
  display: flex;
  gap: 6px;
  padding: 2px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kmp-picker-chips::-webkit-scrollbar { display: none; }
.kmp-picker-chips[hidden],
.kmp-picker-count[hidden] { display: none !important; }
.kmp-picker-chip {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--kmp-line);
  border-radius: 999px;
  background: var(--kmp-bg);
  color: var(--kmp-ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.kmp-picker-chip[aria-pressed="true"] { border-color: var(--kmp-navy); background: var(--kmp-navy); color: var(--kmp-on-navy); }
.kmp-picker-list {
  min-height: 0;
  margin: 0;
  padding: 0 8px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--kmp-line);
}
.kmp-picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 12px 12px 6px;
  background: var(--kmp-bg);
  color: var(--kmp-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.kmp-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--kmp-ink);
  font-size: 15.5px;
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kmp-picker-option small { flex: none; color: var(--kmp-muted); font-size: 12px; }
.kmp-picker-option:hover,
.kmp-picker-option.is-active { background: var(--kmp-surface); }
.kmp-picker-option[aria-selected="true"] { color: var(--kmp-navy); font-weight: 800; }
.kmp-picker-option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 9px;
  height: 15px;
  margin-right: 4px;
  border: solid var(--kmp-navy);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
}
.kmp-picker-option[aria-disabled="true"] { color: var(--kmp-faint); cursor: default; }
.kmp-picker-option mark { background: transparent; color: var(--kmp-blue); font-weight: 800; }
.kmp-picker-empty { margin: 0; padding: 22px 16px; color: var(--kmp-muted); font-size: 14px; text-align: center; }
.kmp-picker-count { padding: 0 20px 6px; color: var(--kmp-muted); font-size: 12px; }
body.kmp-picker-open { overflow: hidden; }
@media (min-width: 768px) {
  .kmp-picker-sheet { align-items: center; padding: 24px; }
  .kmp-picker-panel { height: min(76vh, 680px); border-radius: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kmp-picker-sheet:not([hidden]) .kmp-picker-panel { animation: kmpSheetIn 0.18s ease-out; }
}
@keyframes kmpSheetIn {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 접이식 (약관·근거 보기 등) ---------- */
.kmp-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}
.kmp-fold > summary::-webkit-details-marker { display: none; }
.kmp-fold > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 4px 0;
  border: solid var(--kmp-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.kmp-fold[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }

/* 접이식 문서 — 약관·이용 고지 (B86 · assets/renewal/kmp-fold.js) */
.fold-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 2px 0;
}
.fold-tools p { margin: 0; color: var(--kmp-muted); font-size: 13px; }
.fold-tools .kmp-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
details[data-fold-chapter] { display: block; padding: 0 !important; scroll-margin-top: 16px; }
details[data-fold-chapter] > summary { min-height: 56px; padding: 16px 20px; }
details[data-fold-chapter] > summary :is(h2, h3) { margin: 0; font-size: 16px; }
details[data-fold-chapter][open] > summary { border-bottom: 1px solid var(--kmp-line); }
details[data-fold-chapter] > :not(summary) { margin: 12px 20px 0; }
details[data-fold-chapter] > :last-child:not(summary) { margin-bottom: 20px; }
@media (min-width: 768px) { details[data-fold-chapter] { scroll-margin-top: 76px; } }
@media print {
  details[data-fold-chapter] > summary::after { display: none; }
}

@media (max-width: 520px) {
  body.renewal-login-page .renewal-scene { height: 64px; }
  .renewal-scene { height: 140px; }
}
.customer-navigation-home { max-width: none; }

/* =====================================================================
   화면 틀 한 벌 — T-20261010-47 (홈 인트로 → 각 화면 "다짜깁기" 정리 · B165 · B194)
   틀: 머리글 → 제목 블록 → 본문 카드 → 바닥 안내. 부품은 한 번 정의하고 모든 손님 화면이 쓴다.
   ★ 색 값은 위 --kmp-* 그대로(정본 — 흰 · 딥네이비 · 절제된 파랑). 인트로 구역 색(--intro-*)은 인트로에만(B164 ②).
     이 블록은 모양(머리글 · 글자 위계 · 폭 · 모서리 · 단추 · 상태)만 맞춘다.
   ★ 홈 인트로(index.html · intro-v2.css)는 이 블록의 범위 밖이다 — body.renewal-paper · body.editorial-workbook 과 .kmp-* 만 읽는다.
   ===================================================================== */

/* 머리글 — 펄스 마크(홈 로고 원과 같은 그림) + 브랜드 글자(화면이 쓰던 글자 그대로 · 쓰던 글자가 없던 화면은 KMoneyPulse — 한글로 통일할지는 대표 결정 B272 전) + 화면 이름 + 오른쪽 링크 */
.kmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-height: 52px;
  margin: 0 0 4px;
  padding: 4px 0;
  font-family: var(--kmp-font);
}
.kmp-head-main { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; min-width: 0; }
.kmp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--kmp-brand-gap, 8px);
  min-height: var(--kmp-btn-h-sm);
  color: var(--kmp-navy);
  font-size: var(--kmp-brand-fs, 18px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.kmp-brand b { color: inherit; font-weight: 800; }
.kmp-head-label { color: var(--kmp-muted); font-size: 14px; font-weight: 700; }
.kmp-head-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.kmp-head-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kmp-btn-h-sm);
  color: var(--kmp-ink-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kmp-head-links a:hover { color: var(--kmp-navy); }
.kmp-mark {
  position: relative;
  flex: none;
  width: var(--kmp-mark-size, 28px);
  height: var(--kmp-mark-size, 28px);
  overflow: hidden;
  border-radius: 50%;
  background: var(--kmp-mark);
}
.kmp-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 20H9Q10.4 20 11 18.6Q11.8 16.7 12.7 18.6Q13.3 20 14 20H15.6L16.3 22.7L17.7 9.2L19 27L20.3 20H23Q25 20 26 16.5Q27.4 13.5 28.7 16.5Q29.5 19 30.6 20H38' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 뒤로가기 — 글(「← …」)은 화면이 쓰던 그대로, 모양만 하나 */
.kmp-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--kmp-btn-h-sm);
  padding: 0 2px;
  color: var(--kmp-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kmp-back:hover { text-decoration: underline; }
/* 머리글 아래 한 줄 — 왼쪽 뒤로가기 · 오른쪽 보조 링크 */
.kmp-subhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 14px; margin: 0 0 4px; }
.kmp-subhead > .kmp-head-links { margin-left: auto; }

/* 제목 블록 — 화면 제목 · 설명 · 눈썹 */
.kmp-h1 {
  margin: 0 0 8px;
  color: var(--kmp-navy);
  font-family: var(--kmp-font);
  font-size: var(--kmp-fs-h1);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.kmp-lead { margin: 0; color: var(--kmp-ink-2); font-size: var(--kmp-fs-body); line-height: var(--kmp-lh-body); }
.kmp-eyebrow { color: var(--kmp-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }

/* 큰 머리 카드 — 딥네이비 한 가지 (자료 목록 · 동네 보고서 · 고객센터) */
.kmp-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 0;
  border-radius: var(--kmp-radius-lg);
  background: var(--kmp-band, var(--kmp-navy));
  color: var(--kmp-on-navy);
  box-shadow: none;
}
.kmp-hero .kmp-eyebrow { color: var(--kmp-on-navy-3); }
body .kmp-hero h1 {
  margin: 8px 0 12px;
  color: var(--kmp-on-navy);
  font-family: var(--kmp-font);
  font-size: var(--kmp-fs-hero);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
body .kmp-hero p { margin: 0; color: var(--kmp-on-navy-2); font-size: var(--kmp-fs-body); line-height: var(--kmp-lh-body); }
@media (max-width: 540px) {
  .kmp-hero { padding: 22px 20px; }
}

/* 상태 상자 — 불러오는 중 · 비었음 · 오류가 같은 모양 + 뼈대 줄 */
.kmp-state {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--kmp-line);
  border-radius: var(--kmp-radius);
  background: var(--kmp-bg);
  color: var(--kmp-ink-2);
  font-size: var(--kmp-fs-body);
  line-height: var(--kmp-lh-body);
}
.kmp-state strong { color: var(--kmp-navy); }
.kmp-skeleton {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--kmp-surface), var(--kmp-surface-2), var(--kmp-surface));
  background-size: 200% 100%;
  animation: kmpSkeleton 1.2s linear infinite;
}
.kmp-skeleton--short { width: 62%; }
@keyframes kmpSkeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .kmp-skeleton { animation: none; }
}

/* =====================================================================
   인트로 중심 통일 — RC3 (T-20261011 · 대표 10-11 "전체 페이지들 연결감이 통일감 중요시 인트로 페이지랑 이질감 느끼지 않게 인트로 페이지의 중심으로")
   기준 = 홈 인트로(intro-v2.css --intro-*)가 실제로 쓰는 값 · 홈에서 단추를 눌러 닿는 하위 화면이 같은 종이 · 먹 · 황토로 이어지게 한다.
   ★ 범위: 하위 화면(body.renewal-paper · body.editorial-workbook)이 있는 문서의 :root 에만 얹는다. 홈(index.html)은 body.viewer-* 라 걸리지 않는다 —
     홈이 읽는 :root 값과 홈 요소의 계산 스타일은 그대로다(독립 판정이 요소 897개 계산 스타일 차이 0 으로 확인하는 방식).
   ★ :has() 를 모르는 아주 옛 브라우저에서는 이 블록이 통째로 빠져 예전 색(RC2)으로 보인다 — 위쪽 규칙들이 var(--값, 예전 값)으로 안전하게 되돌아간다.
   ★ 공용 메뉴(.customer-navigation)는 홈과 같은 한 부품이라 홈이 쓰는 값으로 다시 못 박는다(홈 ↔ 하위 화면에서 메뉴가 안 바뀌게).
   ===================================================================== */
:root:has(body.renewal-paper),
:root:has(body.editorial-workbook) {
  /* 종이 · 먹 · 녹청 · 황토 (intro-v2.css:40-53 와 같은 값) */
  --kmp-page: #f6f2e9;          /* --intro-paper */
  --kmp-bg: #fbf9f4;            /* --intro-card */
  --kmp-surface: #efe9db;       /* 안쪽 칸 — 카드와 구간 바탕(--intro-paper-2) 사이 */
  --kmp-surface-2: #e7dfcf;     /* --intro-paper-2 */
  --kmp-navy: #16302c;          /* --intro-ink — 제목 · 선택 칸 · 먹색 면 */
  --kmp-navy-hover: #26443e;
  --kmp-ink: #16302c;           /* 본문 (종이 위 12.6:1) */
  --kmp-ink-2: #2b413c;         /* 둘째 글 (카드 위 10.4:1) */
  --kmp-muted: #3e534e;         /* --intro-muted — 보조 글 (카드 위 7.8:1) */
  --kmp-faint: #8c8a7c;         /* 꺼진 것 표시에만 (카드 위 3.3:1) */
  --kmp-line: #ddd5c3;          /* 카드 안 가는 줄 */
  --kmp-line-strong: #bcc0b8;   /* --intro-line — 입력 칸 · 칩 테두리 */
  --kmp-blue: #8a4426;          /* 강조 글 · 링크 — --intro-clay 를 글자 대비에 맞게 어둡게 (카드 위 6.8:1) */
  --kmp-blue-soft: #f4e8d0;     /* 강조 상자 바탕 — 황토를 옅게 */
  --kmp-blue-line: #e0c99b;
  --kmp-red-soft: #f8e9e3;
  --kmp-green-soft: #eaf1e4;
  --kmp-on-navy: #fbf5e6;       /* --intro-on-dark */
  --kmp-on-navy-2: #dbdacd;     /* --intro-on-dark-2 */
  --kmp-on-navy-3: #c9c8b8;
  --kmp-radius: 14px;           /* 홈 카드 모서리 */
  --kmp-radius-sm: 10px;
  --kmp-radius-lg: 14px;
  --kmp-shadow: none;           /* 홈 카드는 그림자 없음 */
  --kmp-shadow-lift: 0 10px 30px rgba(22, 48, 44, 0.16);
  --kmp-scrim: rgba(22, 48, 44, 0.5);
  --renewal-shadow: rgba(22, 48, 44, 0.06);

  /* 역할 값 — 홈의 단추 · 카드 · 띠 */
  --kmp-band: #163635;          /* --intro-green — 어두운 띠 · 큰 머리 카드 */
  --kmp-action: #d99c43;        /* --intro-ochre — 주 단추 바탕 (그 위 먹색 글자 5.88:1 · 흰 글자는 2.39:1 이라 못 씀) */
  --kmp-action-hover: #e3ab5a;
  --kmp-on-action: #16302c;
  --kmp-action-border: 2px solid #16302c;
  --kmp-action-sh: 0 3px 0 rgba(22, 48, 44, 0.5);
  --kmp-action-sh-dark: 0 3px 0 rgba(0, 0, 0, 0.32);   /* 녹청 띠 위 황토 단추 그림자 (--intro .gi-btn--end) */
  --kmp-sub-border: 2px solid #16302c;
  --kmp-card-bw: 2px;           /* 홈 질문 쪽지 · 받는 방법 상자와 같은 2px 먹선 */
  --kmp-card-bc: #16302c;
  --kmp-card-hi: #f4e8d0;       /* 골라 둔 카드 바탕(추천 이용권) — 황토 옅게 */
  --kmp-bg-rgb: 251, 249, 244;  /* --kmp-bg 의 rgb — 그림 위 덮개 그라데이션용 */
  --kmp-focus: #16302c;
  --kmp-up: #245a9e;            /* 동네 결과 "늘었어요 · 앞서요" 글자 — 데이터 의미 색(오름 파랑 · 줄어듦 빨강)이라 옛 파랑 그대로(색약에도 가려지는 짝) */
  --kmp-placeholder: #656a60;   /* 입력 칸 안내 글 — 크림 카드 위 5.3:1 · 종이 위 5.0:1 (브라우저 기본 #757575 는 카드 위 4.38:1 로 4.5 미달) */

  /* 크기 — 홈 단추 56/18 · 로고 32(PC 36)/19(PC 21) */
  --kmp-btn-h: 56px;
  --kmp-btn-fs: 18px;
  --kmp-mark-size: 32px;
  --kmp-brand-fs: 19px;
  --kmp-brand-gap: 10px;
}
@media (min-width: 900px) {
  :root:has(body.renewal-paper), :root:has(body.editorial-workbook) { --kmp-mark-size: 36px; --kmp-brand-fs: 21px; }
}
/* 공용 메뉴 — 홈과 같은 값으로 못 박기(홈 :root 값 그대로) */
:root:has(body.renewal-paper) .customer-navigation,
:root:has(body.editorial-workbook) .customer-navigation {
  color: #1f2530;               /* 홈 본문 글자색(--kmp-ink 옛 값) — 선 색 계산값(currentColor)까지 홈과 같게 */
  --kmp-line: #e2e7ee;
  --kmp-muted: #5b6472;
  --kmp-navy: #1b2a4a;
  --kmp-ink-2: #3a4351;
  --kmp-surface: #f1f4f8;
  --kmp-on-navy: #ffffff;
  --kmp-blue: #245a9e;
  --kmp-focus: #245a9e;
}

/* 화면 제목(h1) 굵기 — 홈 제목과 같은 800 한 가지 (RC3 · 옛 700/800 혼재 정리) */
:is(body.renewal-paper, body.editorial-workbook) h1 { font-weight: 800; }

/* 키보드 초점 고리 — 어두운 띠(큰 머리 카드 · 끝 띠 · 도서관 머리) 안에서는 홈처럼 밝은 고리(먹색 고리는 녹청 바탕 위 1.08:1 로 안 보임 · 밝은 고리 11.97:1)
   ★ 어두운 띠만 겨냥한다 — `.hero` 선택자는 뺐다(F1 · 독립 판정 10-12): 상품 상세의 `.hero` 는 밝은 카드(#fbf9f4)라 크림 고리가 1.03:1 로 안 보였다.
     어두운 `.hero`(고객센터 · 자료 목록)는 `kmp-hero` 도 달고 있어 이 규칙에 그대로 잡히고, 밝은 카드 위 구매 단추는 위쪽 기본 고리(먹색 12.6:1)로 돌아간다. */
:is(body.renewal-paper, body.editorial-workbook) :is(.kmp-hero, .cta, .library-intro) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--kmp-on-navy, #fff); }
/* 입력 칸 안내 글 */
:is(body.renewal-paper, body.editorial-workbook) :is(input, textarea)::placeholder { color: var(--kmp-placeholder, #757575); opacity: 1; }

/* 키보드 초점이 화면 아래 고정 메뉴 뒤로 숨지 않게 — RC4 · B293
   휴대폰(768px 미만)은 공용 메뉴가 화면 아래에 붙어(position: fixed) 있어서, Tab 으로 닿은 칸이 메뉴 뒤에 가려져도 브라우저는 「화면 안에 있다」고 보고 그대로 둔다.
   스크롤 여백(scroll-padding-bottom)을 메뉴 높이만큼 주면 브라우저가 그 칸을 메뉴 위로 끌어올린다. 값은 본문 아래 여백(body.kmp-has-nav 의 padding-bottom)과 같은 식.
   ★ 범위: 하위 화면(body.renewal-paper · body.editorial-workbook)이 있는 문서의 :root 에만 — 홈(body.viewer-*)의 :root 는 그대로. 768px 이상은 메뉴가 위 한 줄이라 해당 없음.
   ★ :has() 를 모르는 아주 옛 브라우저에서는 이 규칙이 빠질 뿐 화면이 깨지지 않는다(위 RC3 블록과 같은 사정). */
@media (max-width: 767.98px) {
  :root:has(body.renewal-paper),
  :root:has(body.editorial-workbook) { scroll-padding-bottom: calc(var(--kmp-tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
}