:root {
  color-scheme: light;

  /* Toss Design System(TDS) 그레이 스케일. 원색(브랜드 메인/서브)만 우리 값으로 바꾸고
     나머지 뉴트럴/시맨틱 컬러는 TDS 코드를 그대로 가져왔다.
     https://tossmini-docs.toss.im/tds-mobile/foundation/colors/ */
  --grey-50: #f9fafb;
  --grey-100: #f2f4f6;
  --grey-200: #e5e8eb;
  --grey-300: #d1d6db;
  --grey-400: #b0b8c1;
  --grey-500: #8b95a1;
  --grey-600: #6b7684;
  --grey-700: #4e5968;
  --grey-800: #333d4b;
  --grey-900: #191f28;

  /* TDS 시맨틱 컬러(빨강/파랑/초록/주황/청록). 지금은 공동사업구역 데모 쪽 칩 컬러(--chip-*)가
     이미 별도로 존재해서 여기 적용하진 않았지만, 앞으로 상태 표시가 필요할 때 이 톤을 쓴다 */
  --red-500: #f04452;
  --blue-500: #3182f6;
  --green-500: #03b26c;
  --orange-500: #fe9800;
  --teal-500: #18a5a5;

  /* 사이트 전반에서 쓰는 뉴트럴 시맨틱 토큰. 전부 위 TDS 그레이 스케일을 참조한다 */
  --bg: var(--grey-50);
  --surface: #ffffff;
  --surface-soft: var(--grey-100);
  --surface-mid: var(--grey-200);
  --text: var(--grey-900);
  --muted: var(--grey-700);
  --line: var(--grey-300);
  --line-strong: var(--grey-900);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
  /* 카드형 컨테이너 전용 radius 토큰. 버튼(10px)과는 구분되는, 토스 느낌의 넉넉한 곡률.
     이 토큰만 바꾸면 모든 카드의 둥근 정도가 한 번에 맞춰진다 (지원서 카드는 예외) */
  --radius-card: 16px;
  --footer-visible-height: 152px;

  /* 공동사업구역(zone-demo) 데모 전용 칩 컬러: 실제 Figma 시안에 맞춘 값이라
     이번 TDS 전환 대상에서 제외했다 */
  --chip-red: #ed594d;
  --chip-blue: #00c0ef;
  --chip-green: #00cd00;
  --chip-yellow: #ffb800;

  /* 브랜드 메인 컬러: 100%(원색)부터 10%(거의 배경색)까지 흰색과 섞은 10단 스케일.
     버튼/활성 상태/포커스 등 "지금 중요한 조작"을 표시하는 액션 컬러로 쓴다 */
  --primary-100: #6f42c1;
  --primary-90: color-mix(in oklch, #6f42c1 90%, white);
  --primary-80: color-mix(in oklch, #6f42c1 80%, white);
  --primary-70: color-mix(in oklch, #6f42c1 70%, white);
  --primary-60: color-mix(in oklch, #6f42c1 60%, white);
  --primary-50: color-mix(in oklch, #6f42c1 50%, white);
  --primary-40: color-mix(in oklch, #6f42c1 40%, white);
  --primary-30: color-mix(in oklch, #6f42c1 30%, white);
  --primary-20: color-mix(in oklch, #6f42c1 20%, white);
  --primary-10: color-mix(in oklch, #6f42c1 10%, white);

  /* 브랜드 서브 컬러: 중요한 강조 표현의 밑줄, 별점 등 일부 아이콘에만 쓴다.
     절대 글자색(color)으로는 쓰지 않는다 */
  --secondary: #ffb800;

  /* TDS Mobile Typography(https://tossmini-docs.toss.im/tds-mobile/foundation/typography/)
     스케일을 그대로 적용했다. TDS는 11~30px(Typography 1~7 + sub 1~13) 범위만 정의하는
     모바일 전용 스케일이라, 데스크톱 상한(clamp 상한)은 TDS 범위 밖이라 기존 값을 유지했다 */
  --font-h1: clamp(30px, 6vw, 60px); /* Typography 1: 30 / 40 */
  --font-h2: clamp(26px, 4vw, 42px); /* Typography 2: 26 / 35 */
  --font-h3: clamp(22px, 3vw, 30px); /* Typography 3: 22 / 31 */
  --font-emphasis: clamp(16px, 1.6vw, 22px); /* sub Typography 10(16) ~ Typography 3(22) */
  --font-body: 17px; /* Typography 5: 17 / 25.5 */

  --leading-h1: 1.3333; /* 40 / 30 */
  --leading-h2: 1.3462; /* 35 / 26 */
  --leading-h3: 1.4091; /* 31 / 22 */

  /* 위 5개(h1/h2/h3/emphasis/body) 외에 컴포넌트 전반에서 쓰는 나머지 크기도
     TDS의 1px 단위 스케일(11~30px)과 값이 그대로 겹쳐 전부 TDS 토큰에 대응한다.
     30px를 넘는 --font-40/--font-34, 11px 밑인 --font-10만 TDS 범위 밖이라 기존 값을 유지했다 */
  --font-40: 40px; /* TDS 범위(11~30px) 밖 - 기존 값 유지 */
  --font-34: 34px; /* TDS 범위(11~30px) 밖 - 기존 값 유지 */
  --font-28: 28px; /* sub Typography 2: 28 / 37 */
  --font-20: 20px; /* Typography 4: 20 / 29 */
  --font-18: 18px; /* sub Typography 9: 18 / 27 */
  --font-15: 15px; /* Typography 6: 15 / 22.5 */
  --font-14: 14px; /* sub Typography 11: 14 / 21 */
  --font-13: 13px; /* Typography 7: 13 / 19.5 */
  --font-12: 12px; /* sub Typography 12: 12 / 18 */
  --font-11: 11px; /* sub Typography 13: 11 / 16.5 */
  --font-10: 10px; /* TDS 범위(11~30px) 밖 - 기존 값 유지 */
}

* {
  box-sizing: border-box;
}

html {
  /* 브라우저/입력장치에 따라 CSS만으로는 scroll-snap-type이 안 먹는 경우가 있어(트랙패드 등),
     실제 섹션 스냅은 main.js가 휠/키보드/터치를 가로채 JS로 직접 보장한다.
     여기서는 두 메커니즘이 서로 다른 목표로 충돌하지 않도록 CSS 스냅은 꺼둔다 */
  scroll-snap-type: none;
  /* html에 overflow-x/y를 직접 명시하면 body의 overflow가 뷰포트로 "전파"되는 게 막혀서
     body가 별도 스크롤 컨테이너 취급을 받고, 그 결과 헤더의 position: sticky가 뷰포트가 아니라
     body 기준으로 계산되어 버려(고정되지 않고 같이 스크롤되어 사라짐) 여기서는 지정하지 않는다.
     가로 스크롤 방지는 body의 overflow-x: hidden이 전파되어 그대로 처리해준다 */
  /* 좌우 방향 오버스크롤(러버밴드/스와이프 내비게이션 제스처)만 항상 막아
   화면이 미세하게 좌우로 흔들리는 느낌을 없앤다. 세로 방향은 그대로 둔다 */
  overscroll-behavior-x: none;
  /* 인트로 잠금이 풀리며 세로 스크롤바가 나타날 때 뷰포트 폭이 줄어들어
   화면이 가로로 밀리지 않도록, 스크롤바 자리를 항상 예약해둔다 */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* 접속 직후 카드를 다 치우기 전까지 스크롤을 완전히 막는다.
   실제 스크롤 컨테이너는 body가 아니라 html(문서 루트)이므로 둘 다 잠가야 한다 */
html.is-intro-locked,
html.is-intro-locked body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

button,
a,
input {
  font: inherit;
}

/* 버튼 기본값: 라인 없이 색만 채워진 상태. 개별 버튼(.solid-button 등)마다 매번
   border/outline 제거를 반복하지 않도록 여기 기본 컴포넌트 레벨에서 한 번만 정한다.
   라인이 필요한 예외(.icon-button--border 등)는 각자 자기 border를 직접 선언해서 덮어쓴다 */
button {
  min-height: 44px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* 마우스 호버로는 버튼에 라인(아웃라인)을 그리지 않는다. 키보드 포커스(:focus-visible)는
   접근성을 위해 그대로 유지한다 */
button:focus-visible,
a:hover,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary-100);
  outline-offset: 2px;
}

/* 버튼 호버 공통 컴포넌트: 배경을 옅게 채우고 글자를 그 버튼의 원래 색으로 바꾸는 호버를
   버튼마다 새로 작성하지 않는다. 각 버튼은 자기 기본 규칙에 --btn-hover-bg/--btn-hover-color
   두 값만 선언하면 되고(안 정해두면 중립 톤으로 대체), 실제 전환은 여기 한 곳에서만 담당한다 */
button:hover {
  background: var(--btn-hover-bg, var(--surface-soft));
  color: var(--btn-hover-color, var(--text));
}

a {
  color: inherit;
}

p {
  margin: 0;
}

main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* 로딩 화면 */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--bg);
  color: var(--text);
  transition: opacity 240ms ease;
}

.loading-screen p {
  margin: 0;
}

.loading-screen span {
  color: var(--muted);
  font-size: var(--font-14);
}

.loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Progress Bar 참고: normal 높이(4px), 진행률(progress 0.0~1.0)만큼 fill 너비를 늘린다.
   실제 로딩 신호가 없는 정적 페이지라 main.js가 hideLoadingScreen 타이밍에 맞춰 0 -> 100%로 채운다 */
.progress-bar {
  width: 160px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--grey-200);
}

.progress-bar__fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--primary-100);
  transition: width 480ms linear;
}

/* 헤더 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  /* 페이지 배경(--bg)과 무관한 임의의 rgba(246,246,246)를 쓰고 있어서, 반투명 + blur로
     스크롤되는 콘텐츠 색이 섞이면 페이지 배경과 미묘하게 다른(누르스름한) 톤으로 보였다.
     --bg 토큰에서 직접 파생시켜 색 자체를 페이지와 동일한 기준으로 맞춘다 */
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  font-weight: 800;
  text-decoration: none;
}

/* 헤더 로고는 링크 전체가 그리드 첫 컬럼(1fr)만큼 늘어나 있던 탓에, 위 justify-self/width로
   박스 자체를 로고 크기로 줄여도 전역 a:hover 아웃라인(위 147번째 줄)은 여전히 뜬다.
   헤더에서는 마우스 호버만으로 뜨는 그 아웃라인이 불필요해서 여기서만 끈다.
   키보드 포커스(:focus-visible) 표시는 접근성을 위해 그대로 남겨둔다 */
.brand:hover {
  outline: none;
}

.brand-logo {
  display: block;
  /* 헤더 상하 패딩을 14px -> 12px로 줄인 비율(14/12)만큼 로고를 키워서, 줄어든 여백을
     로고 크기로 보전한다: 32px * 14/12 ≈ 37px */
  height: 37px;
  width: auto;
}

.top-nav {
  display: flex;
  /* gap은 nav-links.js의 renderNavLinks(..., { itemGap })가 인라인으로 지정한다 */
  padding: 4px;
}

.top-nav a {
  padding: 9px 14px;
  color: var(--muted);
  text-decoration: none;
  /* 18px가 너무 커 보여서 TDS 스케일 한 단계 아래(15px)로 낮춤. header-action과 동일 크기 유지 */
  font-size: var(--font-15);
  font-weight: 500;
  transition: color 150ms ease;
}

/* 전역 a:hover 아웃라인(line 147 부근)이 탭에도 라인 박스를 그리므로 여기서만 끄고,
   대신 텍스트 색만 진하게 바뀌는 효과로 대체한다. 키보드 포커스(:focus-visible)는
   접근성을 위해 그대로 유지한다 */
.top-nav a:hover {
  outline: none;
  color: var(--text);
}

/* 지금 보고 있는 섹션은 배경을 칠하는 대신 텍스트를 굵게 + 메인 컬러 + 밑줄로 표시한다 */
.top-nav a.is-active {
  color: var(--primary-100);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.header-action {
  padding: 0 19px;
  border-radius: 10px;
  background: var(--primary-100);
  color: var(--surface);
  /* 18px가 너무 커 보여서 TDS 스케일 한 단계 아래(15px)로 낮춤. .top-nav a와 동일 크기 유지 */
  font-size: var(--font-15);
  font-weight: 700;
  /* 진한 채움 버튼이라 호버 시 배경을 메인 컬러의 80% 톤으로 살짝만 밝게 하고, 글자는
     흰색 그대로 유지한다(80%면 여전히 진해서 흰 글자 대비가 충분하다).
     실제 전환은 공통 button:hover 컴포넌트(위 button:hover 규칙)가 담당한다 */
  --btn-hover-bg: var(--primary-80);
  --btn-hover-color: var(--surface);
  transition: background-color 150ms ease, color 150ms ease;
}

/* 히어로 */
.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  padding: 165px 0 56px;
  /* CSS scroll-snap은 꺼뒀지만(main.js가 JS로 스냅), scroll-margin-top은
     scrollIntoView()가 스티키 헤더 높이를 피해 정렬할 때 그대로 쓰인다 */
  scroll-margin-top: 73px;
}

.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section-kicker {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: var(--font-14);
  font-weight: 700;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: var(--font-h1);
  line-height: var(--leading-h1);
}

h2 {
  font-size: var(--font-h2);
  line-height: var(--leading-h2);
}

h3 {
  font-size: var(--font-h3);
  line-height: var(--leading-h3);
}

/* 지원서가 다 치워지고 진짜 타이틀로 전환되는 순간에만 한 번 지나가는 무채색 반짝임(샤인) 효과.
   main.js의 revealCatchphrase()가 텍스트를 바꾸며 .is-revealed를 붙이는 시점에 실행된다 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #heroTitle.is-revealed {
    background-image: linear-gradient(
      100deg,
      var(--text) 40%,
      var(--grey-400) 48%,
      #ffffff 50%,
      var(--grey-400) 52%,
      var(--text) 60%
    );
    background-size: 240% 100%;
    background-position: 160% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: title-shimmer 1800ms ease-in-out 1;
    animation-fill-mode: both;
  }
}

@keyframes title-shimmer {
  0% {
    background-position: 160% 0;
  }
  100% {
    background-position: -60% 0;
  }
}

/* 히어로 서브카피 전용. 각 섹션 타이틀/설명은 이제 TDS Top 컴포넌트(.tds-top--section)가
   같은 값(max-width/font-size/line-height)으로 통일해서 담당한다 */
.lead {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1.7;
}

.hero-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 96px;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-60);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
  transition: color 150ms ease;
  --btn-hover-bg: transparent;
  --btn-hover-color: var(--primary-100);
}

.hero-scroll-cue.is-visible {
  pointer-events: auto;
  animation:
    scroll-cue-fade-in 420ms ease-out both,
    scroll-cue-bounce 1450ms cubic-bezier(0.34, 1.56, 0.64, 1) 540ms infinite;
}

.hero-scroll-cue svg {
  display: block;
  width: 42px;
  height: 42px;
  margin: auto;
  overflow: visible;
}

.hero-scroll-cue path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes scroll-cue-bounce {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  45% {
    transform: translate(-50%, 12px);
  }
  62% {
    transform: translate(-50%, 5px);
  }
}

@keyframes scroll-cue-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 체크리스트: 사용자가 클릭해서 체크하는 게 아니라 이미 확인된 항목을 읽는 용도라
   실제 <input type="checkbox">가 아닌 순수 텍스트/장식용 마크로만 표현한다 */
.checklist {
  list-style: none;
  max-width: 640px;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checklist li {
  position: relative;
  padding-left: 34px;
  color: var(--text);
  font-size: var(--font-body);
  line-height: 1.5;
}

/* ===== TDS Mobile Checkbox 참고 =====
   https://tossmini-docs.toss.im/tds-mobile/components/checkbox/
   원형 배경 없이 체크 아이콘만 메인 컬러로 보여준다.
   전부 "이미 확인된 항목"이라 항상 checked 상태만 있고 unchecked/disabled는 없다 */
.checklist li::after {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: var(--primary-100);
}

/* 찾으시던 PM 기능: 체크리스트에서 환기한 니즈를 곧바로 받아, 제품 랜딩의 feature card처럼
   한태희 PM이 제공하는 핵심 기능을 보여준다 */
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.feature-card {
  min-height: 260px;
  padding: 32px 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.feature-card span {
  display: block;
  color: var(--primary-100);
  font-size: var(--font-14);
  font-weight: 800;
}

.feature-card h3 {
  margin-top: 56px;
}

.feature-card p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.6;
}

/* ===== TDS Mobile Button 참고 =====
   https://tossmini-docs.toss.im/tds-mobile/components/button/
   fill(고채도, 주요 액션) / weak(반투명 배경, 보조 액션) 2 variant + pressed/disabled 상태를
   기존 .solid-button(=fill) / .ghost-button(=weak) 클래스에 그대로 얹었다 */
.solid-button,
.ghost-button,
.wide-button {
  padding: 0 18px;
  border-radius: 10px;
}

.solid-button,
.wide-button {
  background: var(--primary-100);
  color: var(--surface);
  /* header-action과 동일한 호버 컴포넌트: 배경 80% 톤 + 흰 글자 유지 */
  --btn-hover-bg: var(--primary-80);
  --btn-hover-color: var(--surface);
}

.ghost-button {
  /* weak: 진한 색을 그대로 칠하지 않고 옅게 섞어서 배경 위에 은은하게 얹는다 */
  background: color-mix(in oklch, var(--primary-100) 12%, white);
  color: var(--primary-100);
  /* 이미 옅은 톤이 기본값이라, 호버에서는 한 단계 더 진한 톤(20%)으로만 깊어진다 */
  --btn-hover-bg: var(--primary-20);
  --btn-hover-color: var(--primary-100);
}

.solid-button:active,
.wide-button:active,
.ghost-button:active,
.header-action:active {
  /* pressed: 눌렀을 때 색이 살짝 어두워지는 오버레이 느낌 */
  filter: brightness(0.92);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.text-button,
.text-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--font-14);
  text-decoration: underline;
}

.text-button {
  color: var(--muted);
}

.text-link {
  color: var(--primary-100);
}

/* 히어로 지원서 인터랙션: 헤더까지 포함해 뷰포트 전체를 완전히 덮는 오버레이.
   position:fixed로 히어로 섹션의 위치와 무관하게 항상 뷰포트 기준 전체를 덮는다 */
.paper-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 60;
  pointer-events: none;
}

.paper-layer {
  position: absolute;
  inset: 0;
}

.paper {
  position: absolute;
  width: 38vw;
  min-width: 300px;
  max-width: 480px;
  height: 46vh;
  min-height: 320px;
  max-height: 540px;
  padding: 28px;
  background: var(--surface);
  box-shadow:
    0 -4px 14px rgba(25, 31, 40, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translate(var(--enter-x, 0px), var(--enter-y, -140%)) rotate(var(--rot, 0deg));
  pointer-events: none;
  /* 모바일에서 손가락으로 훑을 때 브라우저가 이 제스처를 스크롤/팬으로 가로채
     pointercancel을 발생시키면 마우스와 달리 연속 pointermove가 끊긴다.
     touch-action: none으로 브라우저의 기본 제스처 해석을 꺼서 데스크톱과 동일하게
     손가락이 스치는 카드마다 handleStageScratch가 계속 반응하도록 한다 */
  touch-action: none;
}

/* 종이가 사방에서 날아드는 낙하 모션: 방향 반전 없이 하나의 매끄러운 곡선으로 감속 */
@keyframes paper-fall-in {
  0% {
    opacity: 0;
    transform: translate(var(--enter-x, 0px), var(--enter-y, -140%)) rotate(var(--enter-rot, var(--rot, 0deg)));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--rot, 0deg));
  }
}

/* 로딩 후 잠깐 뒤 지원서가 쏟아져 내려 화면을 완전히 덮는 단계 */
.paper-layer.is-fallen .paper {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
  animation: paper-fall-in 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
}

.paper strong {
  display: block;
  margin-bottom: 20px;
  font-size: var(--font-emphasis);
}

.paper span {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 14px;
  background: var(--surface-mid);
}

/* 종이가 바람에 스르륵 쓸려 나가듯 하나의 매끄러운 곡선으로 가속하며 사라지는 모션 */
@keyframes paper-sweep-away {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--rot, 0deg));
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sweep-x, 0px), var(--sweep-y, 60vh)) rotate(var(--sweep-rot, 40deg));
  }
}

.paper.is-cleared,
.paper-layer.is-fallen .paper.is-cleared {
  opacity: 0;
  transform: translate(var(--sweep-x, 0px), var(--sweep-y, 60vh)) rotate(var(--sweep-rot, 40deg));
  animation: paper-sweep-away 650ms cubic-bezier(0.45, 0, 0.3, 1) both;
  pointer-events: none;
}

/* 공통 섹션: 한 화면에 한 섹션만 보이도록 전체 높이 확보 (스냅 이동은 main.js가 담당).
   스크롤 스냅은 scroll-margin-top(84px, 스티키 헤더 높이)만큼 헤더 아래에서 섹션 top을 맞추는데,
   섹션 높이를 뷰포트 전체(100vh)로 잡으면 그만큼 섹션 박스 아래쪽이 화면 밖으로 넘어가 버려서,
   그 안에서 뭔가를 세로 중앙 정렬해도 화면상으로는 아래로 치우쳐 보인다. 처음부터 실제로 보이는
   높이(뷰포트 - 헤더)로 맞춰서, 이 안에서 하는 모든 정렬이 눈에 보이는 기준과 일치하게 한다 */
.content-section,
.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  padding: clamp(12px, 2vw, 20px) 0;
  scroll-margin-top: 84px;
}

/* 2단 섹션(경력/스크래치/커피챗): 기본은 단일 컬럼 섹션과 똑같이 위에서부터 정렬한다(align-items:start).
   그래야 타이틀(.section-copy)이 1단이든 2단이든 항상 같은 절대 위치에서 시작한다. 오른쪽 칸을
   세로 중앙에 두고 싶은 경우(카드처럼 짧은 콘텐츠)는 그 칸에만 align-self:center를 개별로 준다
   (예: .scratch-card) - 컨테이너 전체를 중앙 정렬하면 타이틀까지 같이 밀려 내려가 버린다 */
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: 28px;
  align-items: start;
}

/* 섹션 타이틀/설명 블록의 공통 wrapper. 1단/2단 여부와 무관하게 모든 섹션에서 상단 여백을
   동일하게 준다(TDS Top 컴포넌트가 실제 타이틀/설명 마크업과 타이포를 렌더링해서 이 안에 붙는다) */
.section-copy {
  margin-top: 36px;
}

/* 경력 요약 */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.summary-strip article {
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.summary-strip span {
  display: block;
  color: var(--muted);
  font-size: var(--font-14);
}

.summary-strip strong {
  display: block;
  margin-top: 8px;
  font-size: var(--font-28);
}

/* 경력 캐러셀: 카드가 원형으로 배치된 입체(3D) 캐러셀. 드래그하거나 화살표로 돌린다 */
.career-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* .scratch-card와 동일한 패턴: split-section 오른쪽 칸의 콘텐츠만 화면상 세로 중앙에 오도록
     이 칸에만 align-self:center를 준다(왼쪽 타이틀 위치는 .split-section의 align-items:start 유지) */
  align-self: center;
}

.carousel-stage {
  flex: 1;
  min-width: 0;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.carousel-track {
  position: relative;
  width: 220px;
  height: 280px;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
}

.carousel-track.is-dragging {
  cursor: grabbing;
}

.carousel-track.is-snapping {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  user-select: none;
}

/* ===== TDS Mobile IconButton 참고 =====
   https://tossmini-docs.toss.im/tds-mobile/components/icon-button/
   원형 아이콘 전용 버튼. border(테두리 있음) variant를 적용했다 */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.icon-button--border {
  /* 이름은 --border지만 지금은 라인 없이 배경 채움만으로 원형 버튼임을 표시한다 */
  background: var(--surface-mid);
  --btn-hover-bg: var(--grey-300);
  --btn-hover-color: var(--text);
}

.icon-button--clear {
  background: transparent;
}

.icon-button:active {
  background: var(--btn-hover-bg, var(--surface-mid));
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  min-height: 44px;
  font-size: var(--font-20);
  line-height: 1;
}

.prompt-line {
  font-size: var(--font-18);
  font-weight: 700;
}

/* 대표 성과 */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  /* 타이틀 블록(.section-copy)과의 간격. .section-title-row가 하던 역할을 대신한다 */
  margin-top: 24px;
}

.proof-card {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.proof-toggle {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border: 0;
  background: transparent;
  text-align: left;
}

.proof-toggle span {
  color: var(--muted);
  font-size: var(--font-14);
}

/* ===== TDS Mobile GridList 참고 =====
   https://tossmini-docs.toss.im/tds-mobile/components/grid-list/
   항목당 이미지 + 텍스트 구성과, 모바일에서 누르면 살짝 줄어드는 터치 피드백만 가져왔다.
   기존 아코디언(펼치기/접기) 동작은 그대로 두고 라벨 앞에 이미지만 얹었다 */
.proof-toggle-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.proof-toggle-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted) !important;
  font-size: var(--font-10) !important;
  text-align: center;
}

.proof-toggle:active {
  transform: scale(0.98);
}

.proof-toggle b {
  display: grid;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  /* <b> 태그라 공통 button 리셋 대상이 아니어서, 라인 대신 채움으로 직접 원형을 표시한다 */
  background: var(--surface-mid);
  font-weight: 400;
}

.proof-card.is-open .proof-toggle b {
  background: var(--primary-100);
  color: var(--surface);
}

/* 펼쳐도 카드/그리드의 흐름 높이에 영향을 주지 않도록 자리 위에 겹쳐 아래로만 늘어나게 한다.
   그래야 안 펼친 카드가 같이 커지거나, 타이틀 등 위쪽 내용이 밀려 움직이지 않는다 */
.proof-detail {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 18px 18px;
  background: var(--surface);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow);
  z-index: 5;
}

.proof-card.is-open .proof-detail {
  display: block;
}

.proof-detail strong {
  display: block;
  font-size: var(--font-40);
}

.proof-detail p {
  margin-top: 12px;
  color: var(--muted);
  /* Paragraph 컴포넌트의 t6(15/22.5) variant 참고. 원래 명시적 크기 없이 브라우저 기본값을
     그대로 상속하고 있던 걸 이번에 명시적 토큰으로 고정했다 */
  font-size: var(--font-15);
  line-height: 1.5;
}

/* 프로젝트 체험 */
.project-detail {
  display: none;
  grid-template-columns: minmax(240px, 0.4fr) minmax(0, 0.6fr);
  gap: 22px;
  align-items: stretch;
  /* 타이틀 블록(.section-copy)과의 간격. .section-title-row가 하던 역할을 대신한다 */
  margin-top: 24px;
}

.project-detail.is-active {
  display: grid;
}

.project-brief,
.demo-shell {
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  box-shadow: var(--shadow);
}

.project-brief {
  padding: 24px;
}

.project-brief-facts {
  margin-top: 14px;
}

.demo-shell {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  min-height: 400px;
  padding: 10px;
}

/* 공동사업구역 등록 폼 데모: 다른 카드/버튼과 같은 디자인 토큰(--radius-card, --primary-100 등)을
   그대로 쓰고, 이 사이트 컴포넌트들의 원칙대로 테두리 선은 쓰지 않는다(색을 채운 면으로만
   경계를 표시 - button/TextField와 동일한 방식) */
.zone-demo {
  grid-template-rows: none;
  gap: 14px;
  align-content: start;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 24px;
  box-shadow: var(--shadow);
}

.zone-field {
  display: grid;
  gap: 6px;
}

.zone-field label {
  font-weight: 700;
  font-size: var(--font-13);
  color: var(--text);
}

/* 공통 입력 필드 표면 컴포넌트: TDS TextField(.tds-text-field__control)와 동일한 시각 언어
   (라인 없이 배경만 채워진 기본값, 포커스 시 배경만 --primary-10 톤으로 전환)를, 그 컴포넌트를
   쓰지 않는 나머지 input/select에도 그대로 적용한다. 새 필드를 추가할 때도 이 클래스 하나만
   붙이면 통일되고, border/포커스 색을 필드마다 새로 정의할 필요가 없다 */
.field-input {
  /* TDS TextField(.tds-text-field__control)와 동일한 반경으로 통일 */
  border: 0;
  border-radius: 12px;
  background-color: var(--surface-soft);
  color: var(--text);
  font: inherit;
  transition: background-color 120ms ease;
}

.field-input:focus {
  outline: none;
  background-color: var(--primary-10);
}

.zone-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.zone-input-group {
  display: flex;
  gap: 8px;
  min-width: 0;
  /* TextField는 라벨까지 포함해서 세로로 더 길어서, 옆 버튼은 라벨 옆이 아니라
     입력창(맨 아래)과 나란하도록 아래쪽 기준으로 맞춘다 */
  align-items: flex-end;
}

.zone-autocomplete {
  position: relative;
  flex: 1;
  min-width: 0;
}

.zone-autocomplete input {
  width: 100%;
}

.zone-autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
}

.zone-autocomplete-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.zone-autocomplete-item:hover,
.zone-autocomplete-item.is-active {
  background: var(--surface-soft);
}

.zone-autocomplete-item strong {
  font-size: var(--font-13);
  font-weight: 700;
  color: var(--text);
}

.zone-autocomplete-item span {
  font-size: var(--font-12);
  color: var(--muted);
}

.zone-input-group input {
  flex: 1;
  min-width: 0;
}

.zone-inline-status {
  min-height: 14px;
  margin: 0;
  font-size: var(--font-12);
  color: var(--muted);
}

.zone-radio-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 32px;
  font-size: var(--font-14);
}

.zone-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

.zone-radio-group input[type="radio"] {
  accent-color: var(--primary-100);
}

.zone-status-box {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--font-14);
}

.zone-status-box.is-included {
  background: color-mix(in oklch, var(--chip-green) 16%, white);
  color: color-mix(in oklch, var(--chip-green) 65%, black);
  font-weight: 800;
}

.zone-status-box.is-excluded {
  background: color-mix(in oklch, var(--chip-red) 16%, white);
  color: color-mix(in oklch, var(--chip-red) 65%, black);
  font-weight: 800;
}

.zone-notice {
  margin: 0;
  padding: 0;
  font-size: var(--font-13);
  line-height: 1.5;
  color: var(--muted);
}

.zone-notice strong {
  color: var(--chip-red);
}

/* 좌표는 이제 지도 클릭/드래그/우클릭만으로 다루므로(값을 직접 타이핑하는 경로가 없다),
   지도가 칼럼을 나눠 쓸 필요 없이 이 폭 전체를 차지한다 */
.zone-map-col {
  display: grid;
  gap: 12px;
}

.zone-map-col .map-demo {
  margin: 0;
  /* 지도가 이제 칼럼 전체 폭을 쓰다 보니(1.5단계 전에는 폭이 좁아 aspect-ratio로도 안전했지만),
     4:6 비율로 폭이 넓어지면서 aspect-ratio를 쓰면 카드 전체 높이가 한 화면(섹션) 높이를
     넘어버렸다. 폭과 무관한 고정 높이로 바꿔서 섹션 안에 항상 들어오게 한다.
     기본 .map-demo의 min-height:220px가 바닥값으로 이겨버려서 여기서 같이 낮춰준다 */
  min-height: 0;
  height: 280px;
}

.zone-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.zone-actions--footer {
  margin-top: 4px;
}

/* 중립(회색) 칩 버튼. 색이 필요한 주요 액션은 .chip-button--primary(브랜드 컬러)를 추가로 붙인다 -
   .solid-button/.ghost-button과 같은 --primary-100 토큰을 그대로 재사용한다 */
.chip-button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--surface-mid);
  color: var(--text);
  font-weight: 700;
  font-size: var(--font-14);
  white-space: nowrap;
  --btn-hover-bg: var(--grey-300);
  --btn-hover-color: var(--text);
}

.chip-button--primary {
  background: var(--primary-100);
  color: var(--surface);
  --btn-hover-bg: var(--primary-80);
  --btn-hover-color: var(--surface);
}

.demo-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}

.demo-toolbar span {
  color: var(--muted);
  font-size: var(--font-12);
}

.map-demo {
  position: relative;
  min-height: 220px;
  margin: 14px 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    linear-gradient(var(--surface-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-soft) 1px, transparent 1px),
    #ffffff;
  background-size: 32px 32px;
  cursor: crosshair;
}

.map-demo-fallback {
  margin: 0;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.map-point-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--chip-red);
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: var(--font-12);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;
}

.map-point-marker:active {
  cursor: grabbing;
}

.map-origin-marker {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111111;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #111111;
}

.search-demo {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.result-list {
  display: grid;
  gap: 10px;
}

.result-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  min-height: 78px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.result-item strong {
  min-width: 104px;
}

.result-item p {
  margin: 0;
  color: var(--muted);
  /* Paragraph t7(13/19.5) variant 참고 */
  font-size: var(--font-13);
  line-height: 1.45;
}

.testimonial-marquee {
  display: flex;
  align-items: center;
  margin-top: 32px;
  /* mask-image는 적용된 엘리먼트를 자기 레이아웃 박스 크기의 버퍼에 합성하면서, 그 박스 밖으로
     번지는 것(카드 box-shadow)까지 함께 잘라낸다(overflow와 무관). 카드 위에 별도 그라디언트
     오버레이를 얹는 방식은 실제 카드 내용(별점 등)까지 덮어버려 더 안 좋았다.
     그래서 mask는 그대로 두되, 박스 자체를 그림자가 완전히 들어갈 만큼(그림자 offset 18px +
     blur 48px 기준 위 30px/아래 66px 필요) 넉넉한 여백으로 키워서 잘릴 게 없게 만든다 */
  padding: 40px 0 80px;
  /* 좌우 끝을 투명하게 페이드아웃시켜, 카드가 잘려나가는 느낌 없이 자연스럽게 흘러가 보이게 한다 */
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.testimonial-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* 카드 4장을 뒤에 통째로 한 번 더 복제해 뒀기 때문에(marked aria-hidden),
     -50% 지점이 정확히 원본 세트의 시작과 같아 보여서 끊김 없이 반복된다 */
  animation: testimonial-scroll 10s linear infinite;
}

@keyframes testimonial-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.testimonial-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  /* 카드 자체를 세로가 긴 3:4 비율로 고정한다 */
  width: 340px;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.testimonial-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--font-13);
}

.testimonial-rating {
  /* 별점은 글자가 아니라 아이콘 취급: 서브 컬러를 쓸 수 있는 유일한 자리 중 하나 */
  color: var(--secondary);
  font-size: var(--font-20);
  letter-spacing: 3px;
}

.testimonial-quote {
  margin: 0;
  align-self: center;
  /* 코멘트가 두 줄 정도 들어가므로, 그보다 짧아도 카드 높이가 흔들리지 않게 최소 높이를 준다 */
  min-height: calc(1.55em * 2);
  color: var(--muted);
  /* Paragraph t6(15/22.5) variant 참고 */
  font-size: var(--font-15);
  line-height: 1.55;
}

.testimonial-author {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

/* 스크래치: 세로 중앙 정렬(카드가 짧아도 붕 뜨지 않게)은 .split-section의 align-items:center가,
   왼쪽 텍스트 상단 여백은 .section-copy가 공통으로 담당한다(둘 다 다른 split-section과 공유) */
.scratch-card {
  position: relative;
  /* split-section 오른쪽 칸에 놓이므로 justify-self로 칸 안에서 카드 크기만큼만 차지하고,
     원래 360px였던 기준 너비를 1.5배(540px)로 키웠다. 카드만 세로 중앙에 오도록 이 칸에만
     align-self:center를 준다(.split-section 자체는 align-items:start라 타이틀 위치는 그대로 유지) */
  width: min(540px, 100%);
  justify-self: start;
  align-self: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.scratch-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-18);
  font-weight: 700;
  text-align: center;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* 터치로 긁을 때 브라우저 기본 스크롤/줌 제스처와 충돌하지 않게 막는다 */
  touch-action: none;
}

.scratch-canvas:active {
  cursor: grabbing;
}

/* 커피챗 폼 */
.coffeechat-form {
  display: grid;
  gap: 16px;
  align-content: start;
  /* .scratch-card/.career-carousel와 동일한 패턴: split-section 오른쪽 칸만 화면상
     세로 중앙에 오도록 align-self:center를 준다 */
  align-self: center;
}

.form-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  font-weight: 800;
}

/* 나머지 입력 필드는 전부 TDS TextField/TextArea 컴포넌트(src/components/text-field.js,
   text-area.js)로 대체됐고, select만 네이티브 엘리먼트로 남아있어 그 옆의 TextField와 같은
   모양(둥근 모서리 + 채움 배경)으로 직접 맞춰준다 */
.form-field select {
  min-height: 52px;
  padding: 0 40px 0 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234e5968' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
  cursor: pointer;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* FAQ */
/* ===== TDS Mobile 컴포넌트 참고 (Badge / Board Row / Border) =====
   @toss/tds-mobile은 React 전용 패키지라 이 프로젝트(순수 HTML/CSS)에는 설치할 수 없어서,
   문서에 정리된 구조(variant/색상/크기 체계)만 CSS로 재구현했다.
   색상 값은 TDS 팔레트 대신 기존 --chip-* 토큰(red/blue/green/yellow)을 그대로 썼다 */

/* Badge: 상태/카테고리 태그. fill(진한 배경) / weak(옅은 배경) 2 variant */
.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: var(--font-12);
  font-weight: 700;
  line-height: 1.5;
}

.badge--fill.badge--blue {
  background: var(--chip-blue);
  color: #ffffff;
}

.badge--fill.badge--red {
  background: var(--chip-red);
  color: #ffffff;
}

.badge--fill.badge--green {
  background: var(--chip-green);
  color: #ffffff;
}

.badge--fill.badge--yellow {
  background: var(--chip-yellow);
  color: var(--text);
}

.badge--weak.badge--blue,
.badge--weak.badge--red,
.badge--weak.badge--green,
.badge--weak.badge--yellow {
  background: color-mix(in oklch, var(--badge-hue) 16%, white);
  color: color-mix(in oklch, var(--badge-hue) 65%, black);
}

.badge--weak.badge--blue {
  --badge-hue: var(--chip-blue);
}

.badge--weak.badge--red {
  --badge-hue: var(--chip-red);
}

.badge--weak.badge--green {
  --badge-hue: var(--chip-green);
}

.badge--weak.badge--yellow {
  --badge-hue: var(--chip-yellow);
}

.project-brief .badge {
  margin-bottom: 12px;
}


/* Board Row: 타이틀 + 화살표 아이콘으로 여닫는 아코디언 행.
   개별 박스 카드 대신 Border로 구분되는 플랫 리스트로 구성한다 */
.faq-list {
  display: flex;
  flex-direction: column;
  /* 구분선 대신 이 간격으로 항목을 나눈다 */
  gap: 8px;
  /* 타이틀 블록(.section-copy)과의 간격. .section-title-row가 하던 역할을 대신한다 */
  margin-top: 24px;
}

.faq-item button {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--font-15);
  font-weight: 700;
}

.faq-item b {
  display: grid;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  place-items: center;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
  transition: transform 180ms ease, color 180ms ease;
}

.faq-item b::before {
  content: "⌄";
}

.faq-answer {
  display: none;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: var(--font-14);
  line-height: 1.65;
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-item.is-open b {
  color: var(--primary-100);
  transform: rotate(180deg);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* 성격이 다른 3개 지표를 나란히 비교하는 용도라, 세로로 쌓지 않고 균등한 3열 그리드로
   한눈에 비교되게 한다. 카드 자체가 눈에 잘 띄도록 폭 제한 없이 섹션 너비를 꽉 채우고,
   패딩/숫자 크기를 크게 키워 이 섹션의 핵심(숫자)에 시선이 먼저 가게 한다 */
.kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.metric-grid article {
  padding: 32px 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--font-15);
}

.kpi-grid span {
  font-size: var(--font-18);
}

.metric-grid strong {
  display: block;
  margin-top: 16px;
  font-size: var(--font-34);
}

.kpi-grid strong {
  font-size: var(--font-h1);
  color: var(--primary-100);
}

/* Contact */
.contact-section {
  border-bottom: none;
  min-height: calc(100vh - 84px - var(--footer-visible-height));
  min-height: calc(100svh - 84px - var(--footer-visible-height));
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.contact-actions button {
  min-height: 74px;
  padding: 0 18px;
  border-radius: 10px;
}

.contact-status {
  margin-top: 18px;
  padding-top: 18px;
  color: var(--muted);
}

/* Footer */
.site-footer {
  box-sizing: border-box;
  min-height: var(--footer-visible-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0 40px;
  background: var(--surface-soft);
}

.site-footer .prompt-line,
.site-footer .footer-grid,
.site-footer .copyright {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-footer .prompt-line {
  font-size: var(--font-15);
  font-weight: 400;
  color: var(--muted);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--font-14);
}

.footer-grid a {
  color: var(--primary-100);
  text-decoration: underline;
}

.copyright {
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--font-13);
}

/* ===== TDS Mobile Highlight 참고 =====
   https://tossmini-docs.toss.im/tds-mobile/components/highlight/
   지정한 영역만 남기고 화면 전체를 어둡게 덮어 시선을 유도하는 원타임 코치마크.
   TDS는 네이티브 오버레이라 여기선 box-shadow로 "구멍 뚫린" 어둠을 CSS로 재현했다 */
.highlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  cursor: pointer;
}

.highlight-overlay[hidden] {
  display: none;
}

.highlight-overlay::before {
  content: "";
  position: fixed;
  left: var(--highlight-x, 0px);
  top: var(--highlight-y, 0px);
  width: var(--highlight-w, 0px);
  height: var(--highlight-h, 0px);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.highlight-message {
  position: fixed;
  left: var(--highlight-x, 0px);
  top: calc(var(--highlight-y, 0px) + var(--highlight-h, 0px) + 14px);
  max-width: 260px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-14);
  font-weight: 700;
  line-height: 1.5;
  box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .top-nav {
    display: none;
  }

  .split-section,
  .project-detail {
    grid-template-columns: 1fr;
  }

  .zone-field-row,
  .form-field-row {
    grid-template-columns: 1fr;
  }

  .proof-grid,
  .feature-card-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --footer-visible-height: 220px;
  }

  main {
    width: min(100% - 24px, 1180px);
  }

  .site-header {
    padding: 12px;
  }

  .header-action {
    padding: 0 12px;
  }

  .hero-section {
    padding-top: 28px;
  }

  .summary-strip,
  .proof-grid,
  .feature-card-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .map-demo {
    min-height: 300px;
  }

  .result-item {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    flex-direction: column;
    gap: 8px;
  }
}