/* ==========================================================================
   찾아옴 디자인 토큰
   chajaom.com 및 고객이 마주하는 모든 화면(대시보드 포함)의 공통 기준.
   이 파일이 색·서체·간격의 정본입니다. 값을 하드코딩하지 마세요.
   ========================================================================== */

/* ⚠️ 2026-10-22 사용자 결정: 제목 명조를 빼고 Pretendard 하나(메인 · /naver · /start 새 판). 아래 명조는 아직 시안에서 뽑은
   다른 쪽(/ai-search · 인사이트 · 약관 · 길목 지도)의 CSS 가 글꼴 이름을 그대로 적어 두어 남겨 둔다 — 그 쪽들을 다시 뽑으면 지운다. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* Pretendard — 구글 폰트에 없어 자체 호스팅합니다.
   가변 폰트 하나로 400~800을 전부 씁니다. 파일: fonts/PretendardVariable.woff2
   서브셋을 적용하면 실제 로딩은 더 작아집니다. */
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 색: 배경 ------------------------------------------------------- */
  --ivory:        #FAF8F3;  /* 보조 배경(증거 칸). 2026-10-22 부터 기본 배경은 흰색 */
  --ivory-2:      #F2EEE5;  /* 섹션 구분, 카드 헤더 */
  --white:        #FFFFFF;  /* 카드 */

  /* --- 색: 글자 ------------------------------------------------------- */
  --ink:          #16181F;  /* 제목, 강조 본문 */
  --ink-2:        #3A3F4C;  /* 일반 본문 */
  --muted:        #5C6170;  /* 설명, 보조 */
  --muted-2:      #6F747F;  /* 캡션 (아이보리 위 최소 대비 4.5:1) */

  /* --- 색: 강조 ------------------------------------------------------- */
  --navy:         #1E2B55;  /* 강조 블록 배경, 폼 주 버튼 */
  --navy-2:       #22252F;  /* 어두운 배경 위 카드 */
  --orange:       #D9541E;  /* CTA 버튼, 포인트 */
  --orange-ink:   #B8430F;  /* 링크 (밝은 배경 위) */
  --orange-soft:  #F5A05E;  /* 어두운 배경 위 숫자 강조 */
  --orange-bg:    #FFF7EE;  /* 강조 박스 배경 */
  --orange-line:  #F0D9BF;  /* 강조 박스 테두리 */

  /* --- 색: 어두운 배경 위 글자 ---------------------------------------- */
  --on-dark:      #FAF8F3;  /* 제목 */
  --on-dark-2:    #C9CBD2;  /* 본문 */
  --on-dark-3:    #9BA0AB;  /* 보조 */
  --on-navy-2:    #C3C8D6;  /* 남색 배경 위 본문 */
  --on-navy-3:    #B9BFD0;  /* 남색 배경 위 라벨 */
  --on-orange:    #FFF0E4;  /* 주황 배경 위 본문 */

  /* --- 색: 선 --------------------------------------------------------- */
  --line:         #E4DFD4;  /* 카드·표 테두리 */
  --line-2:       #DDD7C9;  /* 입력창 테두리 */
  --line-dark:    #2B2E38;  /* 어두운 배경 구분선 */

  /* --- 색: 상태 ------------------------------------------------------- */
  --danger:       #C0492E;  /* 하지 않는 것, 오류 */
  --success:      #3E7A4C;  /* 하는 것, 성공 */

  /* --- 서체 ----------------------------------------------------------- */
  --font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;  /* 2026-10-22 명조 → Pretendard */
  --font-body:    'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* --- 타입 스케일: 데스크톱 ------------------------------------------ */
  --fs-hero:      62px;  /* 히어로 h1 */
  --fs-h2:        44px;  /* 섹션 제목 */
  --fs-h3:        24px;  /* 카드 제목 */
  --fs-lead:      21px;  /* 히어로 부제 */
  --fs-body:      17px;
  --fs-body-lg:   19px;
  --fs-sm:        15px;
  --fs-caption:   14px;

  /* --- 모양 ----------------------------------------------------------- */
  --radius-card:  10px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-btn:    8px;
  --radius-pill:  22px;

  /* --- 간격 ----------------------------------------------------------- */
  --space-section: 96px;  /* 섹션 위아래 */
  --space-gutter:  40px;  /* 좌우 여백 */
  --space-card:    32px;  /* 카드 안쪽 */

  /* --- 폭 ------------------------------------------------------------- */
  --w-content:    1080px;  /* 일반 섹션 */
  --w-narrow:      860px;  /* FAQ, 법적 문서 */
  --w-form:        620px;  /* 신청 폼 카드 */

  /* --- 버튼 ----------------------------------------------------------- */
  --btn-h:         60px;
  --btn-h-sm:      46px;  /* 최소. 이보다 낮추지 않음 */
}

/* --- 모바일 (768px 이하) ---------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-hero:      33px;
    --fs-h2:        27px;
    --fs-h3:        19px;
    --fs-lead:      16px;
    --fs-body:      15px;
    --fs-body-lg:   16px;
    --fs-sm:        14px;
    --fs-caption:   13px;

    --space-section: 56px;
    --space-gutter:  16px;
    --space-card:    20px;

    --btn-h:         52px;
  }
}

/* ==========================================================================
   기본 스타일
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);  /* 2026-10-22 사용자 결정: 아이보리 → 흰색. 고객 대시보드(static/site/tokens.css)는 따로라 이 파일과 무관 */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: -0.01em;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
h1 { font-size: var(--fs-hero); line-height: 1.26; }
h2 { font-size: var(--fs-h2);   line-height: 1.36; }
h3 { font-size: var(--fs-h3);   line-height: 1.5; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

a { color: var(--orange-ink); }
a:hover { color: #8F3309; }

img { max-width: 100%; height: auto; display: block; }

/* 상단바 높이만큼 앵커 여백 */
[id] { scroll-margin-top: 80px; }

/* 키보드 포커스 — 반드시 보이게 */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 터치 타깃 최소 크기 */
button, a[role="button"], .btn { min-height: var(--btn-h-sm); }

/* ==========================================================================
   공통 컴포넌트
   ========================================================================== */

.container        { max-width: var(--w-content); margin: 0 auto; padding-inline: var(--space-gutter); }
.container-narrow { max-width: var(--w-narrow);  margin: 0 auto; padding-inline: var(--space-gutter); }

.section      { padding-block: var(--space-section); }
.section--alt { background: var(--ivory-2); border-block: 1px solid var(--line); }
.section--dark{ background: var(--ink);  color: var(--on-dark); }
.section--navy{ background: var(--navy); color: var(--on-dark); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: 36px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--orange); color: #FFFFFF; }
.btn--navy    { background: var(--navy);   color: #FFFFFF; }
.btn--ghost   { background: var(--white);  color: var(--ink-2); border: 1px solid var(--line-2); }

/* 모바일 하단 고정 CTA */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 10px var(--space-gutter) 14px;
  background: rgba(250, 248, 243, 0.96);
  border-top: 1px solid var(--line);
}
@media (min-width: 769px) { .sticky-cta { display: none; } }

/* 1px 구분선으로 묶인 표·목록 */
.hairline-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hairline-group > * { background: var(--white); }

/* 폼 */
.field-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.field-hint  { font-size: 13px; line-height: 1.7; color: var(--muted-2); }
.field-input, .field-textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;   /* iOS 자동 확대 방지: 16px 미만 금지 */
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
}
.field-input { height: 52px; padding-block: 0; }
.field--error { border-color: var(--danger); }
.field-error-msg { font-size: 14px; color: var(--danger); }

/* 선택 칩 */
.chip {
  padding: 10px 16px;
  min-height: var(--btn-h-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.chip[aria-pressed="true"] { color: #FFFFFF; background: var(--navy); border-color: var(--navy); }

/* 폰트 로딩 중 레이아웃 흔들림 완화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}