/* ============================================================================
   디자인 시스템 — 이 페이지의 크기·여백·위계를 정의하는 단 하나의 파일

   원칙
   1) 4px 그리드. 여백과 글자 크기는 모두 4px의 배수이며, 16px 이상은 8px 배수를 우선한다.
   2) 같은 위계는 같은 스타일. 크기·굵기·행간·자간을 위계(role) 단위로 한 번만 정의하고,
      그 위계에 속하는 모든 요소를 한 규칙에 모아 적는다.
   3) 데스크톱 최소 글자 크기는 16px. 태블릿/모바일은 같은 위계 단위로 한 단계씩 축소하되
      16px 밑으로는 내려가지 않는다.

   이 파일은 다른 CSS 뒤에 로드되며, 크기·여백·행간·자간은 여기에서만 정한다.
   다른 파일은 색·배경·위치·모션만 담당한다.
   ========================================================================== */

:root {
  /* ── 간격: 4px 그리드 ─────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;

  /* 페이지 좌우 여백과 섹션 상하 여백. 화면 단계마다 한 칸씩 줄어든다 */
  --page-gutter: 72px;
  --scene-gutter: var(--space-12); /* 강점 씬처럼 화면을 꽉 채우는 장면의 좌우 여백 */
  --section-space: var(--space-12);

  /* ── 글자 크기: 기존 값의 4px 근사치 (데스크톱) ─────────────────────────
     display-*  숫자·한 단어짜리 주인공
     title-*    섹션 제목부터 문단 소제목까지
     card-title 카드·항목의 제목
     lead       제목을 받는 설명 문단
     body       본문, 버튼, 라벨, 캡션 — 최소 크기 16px
     ------------------------------------------------------------------- */
  --text-display-2xl: 240px; /* 기존 240 */
  --text-display-xl: 116px; /* 기존 115 */
  --text-display-l: 88px; /* 기존 88~90 */
  --text-title-1: 56px; /* 기존 54~58 */
  --text-title-2: 40px; /* 기존 42~44 */
  --text-title-3: 36px; /* 기존 36 */
  --text-title-4: 28px; /* 기존 26~30 */
  --text-title-5: 24px; /* 기존 22~23 */
  --text-card-title: 20px; /* 기존 19~21 */
  --text-lead: 20px; /* 기존 18~20 */
  --text-body: 16px; /* 기존 12~17 — 최소 글자 크기 */

  /* 행간: 크기 × 비율이 항상 4px(대부분 8px) 배수가 되도록 위계마다 따로 정한다 */
  --leading-display-2xl: 1; /* 240 */
  --leading-display-xl: 1; /* 116 */
  --leading-display-l: 1.0909; /* 96 */
  --leading-title-1: 1.1429; /* 64 */
  --leading-title-2: 1.2; /* 48 */
  --leading-title-3: 1.3333; /* 48 */
  --leading-title-4: 1.2857; /* 36 */
  --leading-title-5: 1.3333; /* 32 */
  --leading-card-title: 1.4; /* 28 */
  --leading-lead: 1.6; /* 32 */
  --leading-body: 1.5; /* 24 */

  /* 자간: 큰 글씨일수록 좁힌다 */
  --tracking-display: -0.055em;
  --tracking-title: -0.03em;
  --tracking-text: -0.01em;

  /* 굵기: 네 단계만 쓴다 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  /* ── 모서리 ─────────────────────────────────────────────────────────── */
  --radius-control: 8px; /* 버튼, 입력, 칩 */
  --radius-card: 16px; /* 카드, 패널 */
  --radius-panel: 24px; /* 큰 컨테이너 */
  --radius-pill: 999px;

  /* ── 컴포넌트 치수 ───────────────────────────────────────────────────── */
  --control-height: 44px; /* 버튼·칩 (기존 44) */
  --control-height-compact: 36px; /* 헤더 액션 (기존 36) */
  --field-height: 52px; /* 입력 필드, 상태 박스 (기존 52) */
  --control-padding-x: var(--space-4);
  --card-padding: var(--space-5);
  --stack-gap: var(--space-4);
  --layout-gap: var(--space-11); /* 2단 레이아웃의 단 사이 */
  --grid-gap: var(--space-11); /* 카드 그리드의 열 사이 */
}

/* 태블릿: 큰 위계만 한 단계 내려간다. 본문(16px)은 그대로 */
@media (max-width: 980px) {
  :root {
    --page-gutter: var(--space-7);
    --scene-gutter: var(--space-10);
    --section-space: var(--space-11);

    --text-display-2xl: 160px;
    --text-display-xl: 80px;
    --text-display-l: 72px;
    --text-title-1: 36px;
    --text-title-2: 32px;
    --text-title-3: 28px;

    --leading-display-l: 1.1111; /* 80 */
    --leading-title-1: 1.3333; /* 48 */
    --leading-title-2: 1.25; /* 40 */
    --leading-title-3: 1.2857; /* 36 */

    --layout-gap: var(--space-9);
    --grid-gap: var(--space-9);
  }
}

/* 모바일: 한 단계 더. 여기서도 16px 밑으로 내려가는 위계는 없다 */
@media (max-width: 760px) {
  :root {
    --page-gutter: var(--space-5);
    --scene-gutter: var(--space-5);
    --section-space: var(--space-10);

    --text-display-2xl: 120px;
    --text-display-xl: 40px;
    --text-display-l: 48px;
    --text-title-1: 32px;
    --text-title-2: 28px;
    --text-title-3: 20px;
    --text-title-4: 24px;
    --text-title-5: 20px;
    --text-card-title: 16px;
    --text-lead: 16px;

    --leading-display-l: 1.1667; /* 56 */
    --leading-title-1: 1.25; /* 40 */
    --leading-title-2: 1.2857; /* 36 */
    --leading-title-3: 1.4; /* 28 */
    --leading-title-4: 1.3333; /* 32 */
    --leading-title-5: 1.4; /* 28 */
    --leading-card-title: 1.5; /* 24 */
    --leading-lead: 1.5; /* 24 */

    --card-padding: var(--space-4);
    --layout-gap: var(--space-7);
    --grid-gap: var(--space-5);
  }
}

/* 카카오톡 챗봇 데모는 실제 앱 화면을 옮겨 그린 UI 목업이라, 16px 하한과 4px 그리드 대신
   원래 앱 화면의 비율을 그대로 쓴다. 이 토큰은 그 목업 안에서만 쓴다 */
:root {
  --ui-mock-12: 12px;
  --ui-mock-13: 13px;
  --ui-mock-14: 14px;
  --ui-mock-15: 15px;
  --ui-mock-18: 18px;
  /* 폰 목업의 기준 높이(9:16). 데스크톱에서는 이 크기를 기준으로 --chat-mock-zoom만큼
     프레임과 안쪽 UI가 함께 확대돼 지도 패널과 같은 높이가 된다 */
  --chat-mock-height: 604px;
}

/* 구버전 토큰을 새 스케일로 연결한다. 아직 이 이름을 쓰는 선언이 남아 있어도
   그리드와 16px 하한을 벗어나지 않게 하는 안전망 */
:root {
  --font-10: var(--text-body);
  --font-11: var(--text-body);
  --font-12: var(--text-body);
  --font-13: var(--text-body);
  --font-14: var(--text-body);
  --font-15: var(--text-body);
  --font-17: var(--text-body);
  --font-body: var(--text-body);
  --font-18: var(--text-lead);
  --font-20: var(--text-lead);
  --font-emphasis: var(--text-title-4);
  --font-28: var(--text-title-3);
  --font-34: var(--text-title-2);
  --font-40: var(--text-title-2);
  --font-h3: var(--text-title-3);
  --font-h2: var(--text-title-2);
  --font-h1: var(--text-title-1);
  --leading-h1: var(--leading-title-1);
  --leading-h2: var(--leading-title-2);
  --leading-h3: var(--leading-title-3);
  --section-title-size: var(--text-title-1);
  --scene-title-size: var(--text-display-l);
  --scene-title-gap: var(--space-6);
}

/* ============================================================================
   위계 — 크기·행간·굵기·자간은 각 위계에서 한 번만 정의한다
   ========================================================================== */

/* display-2xl — 배경으로 깔리는 큰 숫자 */
.ds-display-2xl,
.carousel-card::before {
  font-size: var(--text-display-2xl);
  line-height: var(--leading-display-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

/* display-xl — 한 화면을 대표하는 숫자 */
.ds-display-xl,
#heroTitle.hero-title--catchphrase,
.kpi-grid strong,
.kpi-grid article strong,
.kpi-grid article:last-child strong,
.kpi-grid article:not(:last-child) strong,
.document-sheet--front strong {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

/* display-l — 장면의 제목과 성과 숫자 */
.ds-display-l,
.scene-title,
.proof-number {
  font-size: var(--text-display-l);
  line-height: var(--leading-display-l);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

/* title-1 — 섹션 제목 */
.ds-title-1,
h1,
#heroTitle,
.tds-top--section .tds-top__title,
.split-content-section__title,
#intro .split-content-section__title,
.carousel-card strong {
  font-size: var(--text-title-1);
  line-height: var(--leading-title-1);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

/* title-2 — 섹션 안에서 혼자 서는 큰 링크와 숫자 */
.ds-title-2,
h2,
.contact-actions button,
.contact-actions a,
.project-outcome strong,
.metric-grid strong,
.dozer-output {
  font-size: var(--text-title-2);
  line-height: var(--leading-title-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
}

/* title-3 — 한 화면을 끌고 가는 문장 */
.ds-title-3,
.doubt-question,
.scratch-content strong,
.document-sheet b {
  font-size: var(--text-title-3);
  line-height: var(--leading-title-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
}

/* title-4 — 블록 제목 */
.ds-title-4,
h3,
.project-brief h3,
.career-instruction,
.intro-reading-mark,
.loading-screen p,
.dozer-bottomline > p,
.carousel-arrow,
#scratch .ticket-heading > span {
  font-size: var(--text-title-4);
  line-height: var(--leading-title-4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
}

/* title-5 — 씬 안의 링크와 큰 기호 */
.ds-title-5,
.text-action span,
.document-sheet--front strong small,
.document-sheet--front > span,
.review-controls button,
.checklist li::after,
.testimonial-rating {
  font-size: var(--text-title-5);
  line-height: var(--leading-title-5);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-text);
}

/* card-title — 카드의 제목 */
.ds-card-title,
.proof-label,
.dozer-copy .text-action,
.strength-copy .text-action,
.carousel-card span,
.scratch-content p > span {
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-text);
}

/* lead — 본문보다 한 단계 큰 문단 */
.ds-lead,
.tds-top--section .tds-top__subtitle--bottom,
.doubt-context,
.strength-copy > p,
.testimonial-quote,
.prompt-line,
.scratch-content {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* body — 본문, 설명, 버튼, 라벨, 캡션. 페이지의 최소 글자 크기 */
.ds-body,
body,
.lead,
.top-nav a,
.header-action,
.text-action,
.text-button,
.text-link,
.chip-button,
.faq-item b,
.faq-item button,
.faq-answer,
.checklist li,
.checklist li::before,
.carousel-card p,
.dozer-topline p,
.dozer-bottomline p,
.document-sheet > span,
.paper-invitation > span:first-child,
.paper-invitation button,
.paper-invitation__hint,
.ticket-heading,
.ticket-footer,
.ticket-heading > span:first-child,
.ticket-heading > span:last-child,
.ticket-footer > span,
.ticket-footer .text-action,
.solid-button,
.badge,
.project-brief .badge,
.project-brief > p,
.section-kicker,
.proof-desc,
.career-context,
.career-star,
.career-discovery strong,
.career-discovery span,
.career-discovery p,
.document-caption,
.capybara-portrait figcaption,
.feature-card__number,
.feature-card__meaning,
.feature-card__proof,
.zone-field label,
.zone-radio-group,
.zone-status-box,
.zone-notice,
.zone-inline-status,
.zone-autocomplete-item strong,
.zone-autocomplete-item span,
.map-point-marker,
.metric-grid span,
.kpi-grid span,
.kpi-grid article span,
.review-controls > span,
.review-controls #reviewAutoplay,
.testimonial-author,
.scratch-content small,
.contact-status,
.highlight-message,
.footer-grid,
.copyright,
.loading-screen span,
.tds-text-field__label,
.tds-text-field__help,
.tds-text-area__label,
.tds-text-area__help,
.field-input,
.form-field label {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

/* 누르는 것과 항목 제목은 본문 크기에 굵기만 올린다 */
.header-action,
.chip-button,
.solid-button,
.badge,
.project-brief .badge,
.text-action,
.text-button,
.text-link,
.faq-item button,
.career-discovery strong,
.ticket-heading > span:first-child,
.zone-field label,
.form-field label,
.tds-text-field__label,
.tds-text-area__label,
.section-kicker {
  font-weight: var(--weight-bold);
}

/* 이름표와 화자 표시는 본문과 같은 크기에 한 단계만 무게를 준다 */
.top-nav a,
.testimonial-author,
.testimonial-quote,
.doubt-context,
.loading-screen p {
  font-weight: var(--weight-medium);
}

/* 설명 문단과 캡션은 굵기를 올리지 않는다 */
.faq-answer,
.proof-desc,
.career-star,
.career-context,
.career-discovery p,
.career-discovery span,
.kpi-grid span,
.kpi-grid article span,
.metric-grid span,
.footer-grid,
.copyright,
.contact-status,
.document-caption,
.capybara-portrait figcaption {
  font-weight: var(--weight-regular);
}

/* 스크래치 카드의 당첨 문구만 예외로 가장 굵다(기존 900) */
.scratch-content strong {
  font-weight: var(--weight-black);
}

/* 지원서 일러스트 안의 글자는 실제 서류를 축소해 그린 그림이라 본문 스케일 밖이다.
   대신 이 그림 안에서도 4px 그리드를 지킨다 */
.paper-title {
  font-size: var(--space-6);
  line-height: var(--leading-title-2);
  letter-spacing: var(--tracking-display);
}

.paper-intro,
.paper-section-role,
.paper-section-keywords,
.paper-section-desc,
.paper-section-label {
  font-size: var(--space-3);
  line-height: var(--leading-body);
}

/* ============================================================================
   컴포넌트 — 같은 역할을 하는 요소는 같은 치수를 쓴다
   ========================================================================== */

/* 섹션: 좌우는 페이지 여백, 상하는 섹션 여백 */
.content-section,
.content-section--auto,
.contact-section {
  padding: var(--section-space) var(--page-gutter);
}

/* 섹션 제목 블록 */
.tds-top--section .tds-top__subtitle--bottom {
  margin-top: var(--space-5);
}

.section-copy {
  margin: 0;
}

/* 누르는 것: 버튼·칩은 같은 높이와 곡률을 쓴다 */
.solid-button,
.chip-button {
  min-height: var(--control-height);
  padding: 0 var(--control-padding-x);
  border-radius: var(--radius-control);
}

/* 헤더 액션은 헤더 높이에 맞춘 한 단계 낮은 컨트롤이다 */
.header-action {
  min-height: var(--control-height-compact);
  padding: 0 var(--control-padding-x);
  border-radius: var(--radius-control);
}

/* 입력 필드와 그 옆에 서는 상태 박스는 한 단계 높은 규격 */
.tds-text-field__control,
.zone-status-box {
  min-height: var(--field-height);
}

.text-action {
  gap: var(--space-2);
  padding: 0;
  border-radius: var(--radius-control);
}

/* 이름표 */
.badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

/* 카드: 안쪽 여백, 요소 간격, 곡률을 한 벌로 맞춘다 */
.testimonial-card,
.career-discovery {
  padding: var(--card-padding);
  border-radius: var(--radius-card);
}

/* 영업 가능 여부 박스는 주소 검색 입력과 같은 줄에 서는 컨트롤이라 같은 규격을 쓴다 */
.zone-status-box {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
}

.testimonial-card {
  gap: var(--stack-gap);
}

.zone-demo {
  padding: var(--space-5);
  gap: var(--space-4);
  border-radius: var(--radius-card);
}

.proof-card {
  padding: var(--space-6) 0 var(--space-7);
}

@media (min-width: 981px) {
  .proof-card {
    padding: var(--space-4) 0;
  }
}

@media (max-width: 760px) {
  .proof-card {
    padding: var(--space-5) 0 var(--space-6);
  }
}

/* 목록: 항목 사이 간격 한 벌 */
.faq-item button {
  gap: var(--space-5);
  padding: var(--space-5) 0;
}

.faq-item.is-open .faq-answer {
  padding: 0 var(--space-6) var(--space-5) 0;
}

@media (min-width: 981px) {
  .faq-item button {
    padding: var(--space-4) 0;
  }

  .faq-item.is-open .faq-answer {
    padding: 0 var(--space-8) var(--space-4) 0;
    margin-top: calc(var(--space-1) * -1);
  }
}

/* TDS 컴포넌트(입력·말풍선·탭)도 같은 치수 체계 위에 올린다.
   원본 파일(src/components/tds-components.css)은 참고용 사본이라 그대로 두고 여기서만 맞춘다 */
.tds-text-field,
.tds-text-area {
  gap: var(--space-2);
}

.tds-text-field__control,
.tds-text-area__control {
  border-radius: var(--radius-control);
}

.tds-text-field__control {
  padding: 0 var(--space-4);
  gap: var(--space-2);
}

.tds-text-field__input {
  padding: 0;
}

.tds-text-area__input {
  padding: var(--space-4);
}

.tds-tab__item {
  padding: 0 var(--space-1);
}

.tds-tab--large .tds-tab__item,
.tds-tab--small .tds-tab__item {
  min-height: var(--control-height);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* 라디오·체크박스는 브라우저 기본 여백 대신 그리드 값을 쓴다 */
.zone-radio-group input[type="radio"],
.zone-radio-group input[type="checkbox"] {
  margin: 0 var(--space-2) 0 0;
}

.tds-confirm-dialog-button,
.tds-alert-dialog-button {
  border-radius: var(--radius-control);
}

/* 데스크톱에서 두 데모 패널은 섹션의 세로 공간을 그대로 채운다(높이를 고정값으로 재지 않고
   섹션 높이에서 받아오므로 두 탭의 높이가 항상 같다).
   - 영업구역: 폼·안내문·버튼을 뺀 나머지 높이를 지도가 전부 갖는다(1fr).
   - 챗봇: 같은 높이에 맞춰 9:16 폰 목업이 비율 그대로 확대된다. 안쪽 UI까지 함께 커져야
     하므로 --chat-mock-zoom(main.js가 남는 공간을 재서 넣는다)으로 확대한다 */
@media (min-width: 981px) {
  .zone-demo {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .zone-map-col {
    min-height: 0;
  }

  .zone-map-col .map-demo {
    height: 100%;
    /* 화면이 아주 낮아도 지도가 사라지지 않는 바닥값 */
    min-height: 128px;
  }

  /* 폰 프레임이 지도 카드와 위아래 선을 정확히 맞추도록 안쪽 여백을 두지 않는다 */
  #project-chatbot .demo-shell {
    padding: 0;
  }

  .chat-window {
    width: auto;
    height: var(--chat-mock-height);
    max-width: none;
    zoom: var(--chat-mock-zoom, 1);
  }
}

/* 인트로 질문 여섯 개는 한 화면에 들어가야 한다. 화면이 낮으면 줄 간격을 한 단계 줄인다 */
@media (min-width: 981px) and (max-height: 820px) {
  .doubt-grid {
    row-gap: var(--space-7);
  }

  #intro {
    padding-block: var(--space-6);
  }
}