/* ============================================================
   base.css — 변수 · 리셋 · 타이포 · 페이지 배경
   v6: 디자이너 키비주얼 색상표를 토큰화(--navy · --teal · --sky …) · UI 주색은 틸/네이비
       위원회 CI 컬러(--kmrb-*)는 로고 · 서약서 시그니처 · 도장 등 CI 요소에만 사용
   ============================================================ */

@font-face {
  font-family: 'Pretendard';
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('../assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
/* 아이 '따라 쓰기' 서명용 손글씨체 — 나눔손글씨 펜(OFL · assets/fonts/OFL-NanumPenScript.txt) */
@font-face {
  font-family: 'NanumPen';
  src: url('../assets/fonts/NanumPenScript-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 키비주얼 색상표(디자이너 제공) ---- */
  --navy: #264A94;        /* 메인 · 타이틀 · 강조 텍스트 */
  --teal: #00A29A;        /* 메인 · ON 토글 · 지붕 · CTA 시작색 */
  --sky: #86D5F7;         /* 페이지 배경 상단 */
  --lightblue: #A8D4FC;   /* 글자 면 · 휴대폰 화면 우측 */
  --mint: #DBF7EF;        /* 휴대폰 화면 좌측 */
  --blue: #5BAADB;        /* CTA 끝색 */
  --white: #FFFFFF;
  --rate-12: #EBBD00; --rate-15: #DD7218; --rate-all: #00974C; --rate-19: #D71E28;
  --char-2: #EDCC42; --char-5: #EB973B; --char-green: #AAC467; --char-7: #EC6D65;

  /* ---- 위원회 CI (로고 · 시그니처 · 도장에만) ---- */
  --kmrb-emerald: #00A79D;
  --kmrb-blue:    #31317F;
  --kmrb-silver:  #9FA0A0;
  --kmrb-gold:    #C79935;

  /* ---- 파생 토큰 ---- */
  --teal-deep: #00857F;
  --navy-deep: #1E3B78;
  --teal-tint: #E5F6F5;
  --navy-tint: #EAF0FA;
  --sky-tint: #EEF8FE;
  --mint-tint: #EAFBF5;
  --gold-tint: #F8F2E4;
  --coral: #EC6D65;
  --coral-tint: #FDEDEC;
  /* v5 이름과의 호환(의미는 새 토큰으로) */
  --emerald-tint: var(--teal-tint);
  --blue-tint: var(--navy-tint);
  --emerald-deep: var(--teal-deep);
  --blue-deep: var(--navy-deep);

  --grad-cta: linear-gradient(90deg, var(--teal) 0%, var(--blue) 100%);
  --grad-band: linear-gradient(90deg, #00A29A 0%, #2FB0C4 50%, #5BAADB 100%);
  --grad-screen: linear-gradient(90deg, var(--mint) 0%, var(--lightblue) 100%);

  --ink: #16181F; --text: #3A3D48; --sub: #787D89; --line: #DCE3EC; --soft: #F3F6FA; --bg: #FFFFFF;

  /* ---- 형태 ---- */
  --r-btn: 14px;
  --r-card: 24px;
  --r-sm: 12px;
  --shadow-card: 0 2px 4px rgba(38, 74, 148, 0.04), 0 14px 36px rgba(38, 74, 148, 0.09);
  --shadow-float: 0 12px 32px rgba(38, 74, 148, 0.18);
  --shadow-cta: 0 8px 20px rgba(0, 162, 154, 0.28);

  /* ---- 크기 ---- */
  --container: 1200px;
  --gutter: 20px;
  --header-h: 60px;
  --cta-h: 76px;

  /* ---- 타이포 ---- */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-hand: 'NanumPen', 'Pretendard', sans-serif;
  --fs-body: 15px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --header-h: 72px;
    --fs-body: 16px;
    --fs-h1: 34px;
    --fs-h2: 26px;
    --fs-h3: 19px;
    --fs-sm: 14px;
    --fs-xs: 13px;
  }
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity .25s ease;
  position: relative;
}
body.is-ready { opacity: 1; }
body.has-sticky { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { body.has-sticky { padding-bottom: 0; } }

/* 페이지 배경 — 시안: 상단 스카이 블루 → 화이트 그라데이션 + 연한 도트 패턴(고정 레이어)
   서약서 카드(.cert) · PNG 내보내기 영역(#exportArea)은 흰 배경 위에 그려지므로 영향 없음 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #BFE6F9 0%, #E7F5FD 32%, #FFFFFF 50%, #FFFFFF 62%, #D6EEFB 86%, #A9DDF7 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1.6px, transparent 1.8px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 64%, #000 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 64%, #000 100%);
  opacity: .9;
}
body.is-embed::before, body.is-embed::after { display: none; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: middle; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--mint); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 타이포 ---------- */
.h1 { font-size: var(--fs-h1); line-height: 1.25; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.3; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; }
.h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; color: var(--ink); }
.lead { font-size: calc(var(--fs-body) + 1px); color: var(--text); line-height: 1.65; }
.sub { color: var(--sub); font-size: var(--fs-sm); line-height: 1.55; }
/* 시안에는 영문 아이브로우가 없어 숨깁니다(마크업은 유지) */
.eyebrow { display: none; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.text-emerald, .text-teal { color: var(--teal); }
.text-blue, .text-navy { color: var(--navy); }
.text-gold { color: var(--kmrb-gold); }
.text-ink { color: var(--ink); }
.text-center { text-align: center; }
.fw-500 { font-weight: 500; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }

/* ---------- 레이아웃 ---------- */
#main { overflow-x: clip; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 840px; }
.section { padding: 28px 0; }
.section--tight { padding: 20px 0; }
.section--soft, .section--emerald, .section--blue, .section--gold { background: transparent; }
.section__head { margin-bottom: 20px; }
.section__head .h2 { margin-top: 0; }
.section__head .sub { margin-top: 8px; }
@media (min-width: 1024px) {
  .section { padding: 40px 0; }
  .section--tight { padding: 28px 0; }
  .section__head { margin-bottom: 28px; }
  .section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
}

.stack > * + * { margin-top: 16px; }
.stack--sm > * + * { margin-top: 8px; }
.stack--lg > * + * { margin-top: 28px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid { gap: 24px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.only-pc { display: none !important; }
@media (min-width: 1024px) { .only-pc { display: initial !important; } .only-mo { display: none !important; } }

/* ---------- 지붕 모티프(섹션 타이틀 · 카드 좌상단) ---------- */
.roof-title { position: relative; padding-top: 30px; }
.roof-title::before {
  content: ''; position: absolute; left: -2px; top: 0; width: 72px; height: 24px;
  background: url('../assets/kv2/_extracted/roof.svg') no-repeat left bottom / contain;
}
.card--roof { position: relative; margin-top: 24px; }
.card--roof::before {
  content: ''; position: absolute; left: 26px; top: -22px; width: 76px; height: 25px;
  background: url('../assets/kv2/_extracted/roof.svg') no-repeat left bottom / contain; pointer-events: none;
}
@media (min-width: 1024px) {
  .roof-title { padding-top: 36px; }
  .roof-title::before { width: 86px; height: 29px; }
  .card--roof::before { left: 36px; top: -26px; width: 90px; height: 30px; }
}

/* 모션 축소 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}