/* ==========================================================================
   차고 (CharGO) — 홍보 사이트 스타일
   디자인 토큰은 Wanted Design System 기준, 브랜드 컬러는 CharGO 블루(#054FFF).
   보더는 CSS border 대신 inset box-shadow를 씁니다 (레이아웃이 밀리지 않게).
   ========================================================================== */

:root {
  /* 브랜드 */
  --cg: #054FFF;
  --cg-strong: #0040D6;
  --cg-heavy: #0033AB;
  --cg-on-dark: #4C86FF;

  /* 중립 (쿨 램프) */
  --ink: #171719;
  --dark: #06080E;
  --paper: #F7F7F8;

  /* 텍스트 투명도 사다리 */
  --t88: rgba(55, 56, 60, .88);
  --t61: rgba(55, 56, 60, .84); /* WCAG AA 4.5:1 확보 (흰색/페이퍼 배경 기준 ~6.5:1) */
  --t28: rgba(55, 56, 60, .28);

  /* 라인 · 필 */
  --line: rgba(112, 115, 124, .16);
  --line8: rgba(112, 115, 124, .08);

  /* 다크 위 */
  --on-dark-1: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .72);
  --on-dark-3: rgba(255, 255, 255, .45);
  --on-dark-line: rgba(255, 255, 255, .1);

  /* 서체 */
  --ui: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 레이아웃 */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --sec-y: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ui);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

a { color: var(--cg); text-decoration: none; transition: color 120ms var(--ease); }
a:hover { color: var(--cg-strong); }

.mono { font-family: var(--mono); }
.wrap { max-width: var(--max); margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.form__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .reveal, .reveal-card { opacity: 1; transform: none; transition: none; }
}

/* ── 헤더 ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cg);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14);
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
}

.site-header__logo { flex: none; display: flex; align-items: center; }
.site-header__logo img { height: 22px; width: auto; }

/* 좁은 화면에서는 메뉴가 가로 스크롤됩니다 (줄바꿈으로 헤더가 커지지 않게).
   오른쪽 끝을 mask로 페이드아웃해서, 글자가 중간에서 뚝 잘린 것처럼 보이지
   않고 "더 있어요, 스크롤하세요"로 읽히게 합니다. */
.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 20px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

.site-nav a {
  font: 600 14px/1 var(--ui);
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}

.btn--pill { height: 44px; padding: 0 20px; border-radius: 999px; font: 600 14px/1 var(--ui); }
.btn--lg   { height: 52px; padding: 0 26px; border-radius: 12px; font: 600 16px/1 var(--ui); }
.btn--md   { height: 44px; padding: 0 20px; border-radius: 12px; font: 600 14px/1 var(--ui); }
.btn--block { width: 100%; height: 52px; border-radius: 12px; font: 600 16px/1 var(--ui); }

.btn--white { background: #fff; color: var(--cg); }
.btn--white:hover { background: #EAF0FF; color: var(--cg); }

.btn--ghost-white {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42);
}
.btn--ghost-white:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.btn--brand { background: var(--cg); color: #fff; }
.btn--brand:hover { background: var(--cg-strong); color: #fff; }

.btn--float { box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }

/* 주요 CTA에만 붙이는 방향 신호 — 평소엔 가만히, 호버하면 살짝 밀려나요 */
.btn__arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── 히어로 ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--cg);
  overflow: hidden;
  isolation: isolate;
}

.hero__watermark {
  position: absolute;
  top: -8%;
  right: -14%;
  width: min(760px, 72vw);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

/* JS가 채우는 배경 모션 레이어 */
.hero__motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 11vw, 132px) var(--gutter) clamp(56px, 9vw, 104px);
}

.hero h1 {
  font: 800 clamp(40px, 7.8vw, 88px)/1.08 var(--ui);
  letter-spacing: -.038em;
  color: #fff;
  text-wrap: balance;
}

.hero__actions {
  margin-top: clamp(20px, 3vw, 28px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 설명 + 태그를 하나로 묶어, 헤드라인이 아니라 버튼 다음에 "증거"처럼 붙입니다 */
.hero__proof {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(20px, 2.6vw, 28px);
  max-width: 44ch;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.hero__lead {
  font: 400 clamp(14px, 1.4vw, 16px)/1.6 var(--ui);
  color: rgba(255, 255, 255, .78);
  text-wrap: pretty;
}

.hero__tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font: 600 14px/1 var(--ui);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.tag--solid { background: #fff; color: var(--cg); box-shadow: none; }
.tag--dim { color: rgba(255, 255, 255, .85); }

/* ── 섹션 공통 ────────────────────────────────────────────────────────── */

.section { padding: var(--sec-y) var(--gutter); }
.section--light { background: #fff; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--dark); position: relative; overflow: hidden; }
.section--ink { background: var(--ink); }

.section__title {
  font: 700 clamp(30px, 4.4vw, 50px)/1.18 var(--ui);
  letter-spacing: -.03em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.section--dark .section__title,
.section--ink .section__title { color: #fff; }
.section__title em { font-style: normal; color: var(--cg); }

.section__lead {
  margin-top: 16px;
  max-width: 46ch;
  font: 400 clamp(15px, 1.5vw, 17px)/1.65 var(--ui);
  color: var(--t61);
  text-wrap: pretty;
}
.section--dark .section__lead,
.section--ink .section__lead { color: var(--on-dark-2); }

/* 제목과 설명을 한 문장 흐름으로 합치는 변형 (일부 섹션 전용, .section__title/.section__lead 기본값은 건드리지 않음) */
.section__lead-block { max-width: 62ch; }
.section__title--merge,
.section__lead--merge {
  display: inline;
  font: 400 clamp(21px, 2.6vw, 30px)/1.55 var(--ui);
  letter-spacing: -.012em;
}
.section__title--merge { font-weight: 700; color: #fff; }
.section__lead--merge { color: var(--on-dark-2); }

/* 손글씨 물결 밑줄 강조 — 굵게/색상 대신 쓰는 대안 */
.mark {
  font-weight: 700;
  color: var(--cg);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--cg);
}
.hero__lead .mark,
.section--dark .section__lead .mark,
.section--ink .section__lead .mark,
.section--dark .section__lead--merge .mark,
.section--ink .section__lead--merge .mark {
  color: #fff;
  text-decoration-color: #fff;
}

.section__note {
  margin-top: clamp(28px, 3.5vw, 40px);
  font: 400 15px/1.7 var(--ui);
  color: var(--t61);
  max-width: 56ch;
  text-wrap: pretty;
}

.dark-watermark {
  position: absolute;
  left: -10%;
  bottom: -18%;
  width: min(560px, 58vw);
  opacity: .035;
  pointer-events: none;
}

/* ── 필러 카드 ────────────────────────────────────────────────────────── */

.pillars {
  margin-top: clamp(32px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.pillar {
  position: relative;
  border-radius: 16px;
  padding: clamp(28px, 3vw, 36px);
  overflow: hidden;
}
.pillar--brand { background: var(--cg); }
.pillar--paper { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pillar--ink { background: var(--ink); }

.pillar h3 {
  margin-top: 18px;
  font: 600 clamp(21px, 2.2vw, 26px)/1.32 var(--ui);
  letter-spacing: -.014em;
  color: var(--ink);
}
.pillar p {
  margin-top: 12px;
  font: 400 15px/1.6 var(--ui);
  color: var(--t61);
  text-wrap: pretty;
}
.pillar--brand h3, .pillar--ink h3 { color: #fff; }
.pillar--brand p { color: rgba(255, 255, 255, .85); }
.pillar--ink p { color: var(--on-dark-2); }

/* 카드 스포트라이트 — 커서를 따라다니는 은은한 글로우. main.js가 마우스 위치로
   --sx/--sy를 채운다. 클릭이 안 되는 카드라 리프트는 안 넣고, 이 글로우만
   준다 — "눌러보세요" 신호가 아니라 순수하게 분위기를 살리는 용도. */
.pillar h3, .pillar p { position: relative; }
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(5, 79, 255, .14), transparent 70%);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
}
.pillar:hover::before { opacity: 1; }
.pillar--brand::before,
.pillar--ink::before {
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .16), transparent 70%);
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font: 600 12px/1 var(--ui);
}
.badge--brand { background: var(--cg); color: #fff; }
.badge--on-brand { background: rgba(255, 255, 255, .18); color: #fff; }
.badge--on-ink { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }

/* 요금 숫자 판 */
.price-plate {
  margin-top: 26px;
  height: 96px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
.price-plate__row { display: flex; align-items: baseline; gap: 7px; }
.price-plate__num {
  font: 600 clamp(42px, 5vw, 56px)/1 var(--mono);
  color: #fff;
  letter-spacing: -.02em;
}
.price-plate__unit { font: 500 16px/1 var(--mono); color: rgba(255, 255, 255, .85); }
.price-plate__note { margin-top: 12px; font: 500 13px/1.5 var(--mono); color: rgba(255, 255, 255, .85); }

/* 포인트 막대 */
.bars {
  margin-top: 26px;
  height: 96px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 18px;
}
.bars span { flex: 1; border-radius: 4px; background: rgba(5, 79, 255, .24); }

/* 준비 중 목록 */
.soon { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.soon__row {
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.soon__name { font: 600 14px/1 var(--ui); color: rgba(255, 255, 255, .86); }
.soon__when { font: 500 12px/1 var(--mono); color: var(--on-dark-3); }

/* ── 앱 소개 ──────────────────────────────────────────────────────────── */

.app-body {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  align-items: flex-start;
}

.app-features { flex: 1 1 340px; min-width: 280px; }

.feature-timeline { position: relative; padding-left: 28px; }
.feature-timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--on-dark-line);
}

.feature {
  position: relative;
  padding: 22px 4px;
  box-shadow: inset 0 -1px 0 var(--on-dark-line);
}
.feature-timeline .feature::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 26px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--on-dark-2);
  transition: background-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.feature-timeline .feature.is-revealed::before {
  background: var(--cg-on-dark);
  box-shadow: inset 0 0 0 1.5px var(--cg-on-dark);
  transform: scale(1.15);
}
.feature h3 { font: 600 17px/1.4 var(--ui); color: #fff; }
.feature p {
  margin-top: 6px;
  font: 400 14px/1.6 var(--ui);
  color: var(--on-dark-2);
  text-wrap: pretty;
}

.app-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-static {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 500 14px/1 var(--ui);
  color: rgba(255, 255, 255, .72);
}

.shots {
  flex: 1 1 420px;
  min-width: 280px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}

.shot {
  flex: 0 1 208px;
  max-width: 238px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.shot__frame {
  width: 100%;
  aspect-ratio: 390 / 844;
  border-radius: 26px;
  background: linear-gradient(160deg, #2a2d34, #141519);
  padding: 5px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: cg-float 5.6s ease-in-out infinite;
}
.shot:nth-child(2) .shot__frame { animation-duration: 6.1s; }
.shot:nth-child(3) .shot__frame { animation-duration: 5.2s; }
.shot:nth-child(4) .shot__frame { animation-duration: 6.4s; }
.shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  background: var(--paper);
}
.shot figcaption {
  font: 500 13px/1.4 var(--ui);
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* 회원카드 밴드 */
.card-band {
  margin-top: clamp(40px, 5vw, 72px);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.card-band__copy { flex: 1 1 300px; min-width: 270px; padding: clamp(28px, 3.4vw, 44px); }
.card-band__copy h3 {
  margin-top: 18px;
  font: 700 clamp(21px, 2.4vw, 28px)/1.32 var(--ui);
  letter-spacing: -.021em;
  color: #fff;
  text-wrap: balance;
}
.card-band__copy p {
  margin-top: 14px;
  max-width: 38ch;
  font: 400 15px/1.65 var(--ui);
  color: var(--on-dark-2);
  text-wrap: pretty;
}
.card-band__chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-outline {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 500 13px/1 var(--ui);
  color: rgba(255, 255, 255, .72);
}
.card-band__photo {
  flex: 1 1 320px;
  min-width: 280px;
  min-height: 260px;
  position: relative;
}
.card-band__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 타임라인 ─────────────────────────────────────────────────────────── */

.timeline {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.phase {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(24px, 2.6vw, 30px);
}
.phase--now { background: var(--cg); box-shadow: none; }

.phase__date {
  display: block;
  font: 600 13px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--cg);
}
.phase--now .phase__date { color: rgba(255, 255, 255, .85); }

.phase__track {
  display: block;
  margin-top: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
}
.phase--now .phase__track { background: rgba(255, 255, 255, .28); }
.phase__fill { display: block; height: 3px; border-radius: 999px; background: var(--cg); }
.phase--now .phase__fill { background: #fff; }

.phase h3 {
  margin-top: 20px;
  font: 600 19px/1.36 var(--ui);
  letter-spacing: -.014em;
  color: var(--ink);
}
.phase p { margin-top: 9px; font: 400 14px/1.6 var(--ui); color: var(--t61); text-wrap: pretty; }
.phase--now h3 { color: #fff; }
.phase--now p { color: rgba(255, 255, 255, .85); }

/* 운영 예정 장소 */
.sites-card {
  margin-top: clamp(36px, 4.5vw, 56px);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(24px, 3vw, 36px);
}
.sites-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.sites-card__head h3 {
  font: 600 19px/1.4 var(--ui);
  letter-spacing: -.014em;
  color: var(--ink);
}
.sites-card__head span { font: 400 14px/1.5 var(--ui); color: var(--t61); }

.sites-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 10px;
  list-style: none;
}
.sites-grid li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper);
  font: 600 14px/1.4 var(--ui);
  color: var(--t88);
}
.sites-grid li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cg);
}
.sites-card__note { margin-top: 20px; font: 400 13px/1.6 var(--ui); color: var(--t61); }

/* ── 파트너 · 문의 ────────────────────────────────────────────────────── */

.partners {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.partner {
  position: relative;
  display: block;
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 30px);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
  overflow: hidden;
}
/* 클릭 가능한 카드(링크)에만 호버 반응을 준다 — .article 변형은 클릭이 안 되므로 그대로 둔다.
   a.partner는 .reveal보다 명시도가 높아서(요소+클래스 > 클래스) transition이 밀리지 않는다. */
a.partner {
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
a.partner:hover {
  box-shadow: inset 0 0 0 1px var(--cg), 0 8px 24px rgba(5, 79, 255, .1);
  transform: translateY(-3px);
}
a.partner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(5, 79, 255, .14), transparent 70%);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
}
a.partner:hover::before { opacity: 1; }
.partner h3, .partner p { position: relative; }
.partner h3 {
  font: 600 18px/1.4 var(--ui);
  letter-spacing: -.014em;
  color: var(--ink);
}
.partner p { margin-top: 10px; font: 400 14px/1.65 var(--ui); color: var(--t61); text-wrap: pretty; }

.inquiry {
  margin-top: clamp(36px, 4.5vw, 56px);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
}
.inquiry__copy { flex: 1 1 280px; min-width: 260px; }
.inquiry__copy h3 {
  font: 700 clamp(22px, 2.6vw, 30px)/1.3 var(--ui);
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
.inquiry__copy > p { margin-top: 14px; font: 400 15px/1.7 var(--ui); color: var(--t61); text-wrap: pretty; }

.meta-list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.meta-list div { display: flex; gap: 10px; align-items: baseline; }
.meta-list dt, .meta-list__k { flex: none; font: 600 12px/1.6 var(--mono); color: var(--cg); }
.meta-list dd, .meta-list__v { font: 500 15px/1.6 var(--ui); color: var(--t88); margin: 0; }

/* 폼 */
.form { flex: 1 1 340px; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.form__kinds { display: flex; flex-wrap: wrap; gap: 8px; }

.kind {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 18px;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: #fff;
  color: var(--t88);
  font: 600 14px/1 var(--ui);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.kind:hover { background: #F0F0F2; }
/* 선택은 검정 — Wanted 시스템의 규칙 */
.kind[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.field {
  height: 52px;
  padding: 0 16px;
  border: none;
  outline: none;
  border-radius: 12px;
  background: #fff;
  font: 400 15px/1 var(--ui);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow 120ms var(--ease);
}
textarea.field {
  height: auto;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}
.field::placeholder { color: var(--t28); }
.field:focus { box-shadow: inset 0 0 0 2px var(--cg); }
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #FF4242; }

.form__error {
  font: 500 13px/1.5 var(--ui);
  color: #E23434;
  min-height: 0;
}
.form__error:empty { display: none; }

.form__privacy { font: 400 12px/1.6 var(--ui); color: var(--t61); }

.form__done {
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 20px;
  font: 500 15px/1.6 var(--ui);
  color: var(--t88);
}

/* ── 회사 소개 ────────────────────────────────────────────────────────── */

.company {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
}
.company__copy { flex: 1 1 320px; min-width: 270px; }
.company__copy h2 {
  font: 700 clamp(26px, 3.4vw, 40px)/1.26 var(--ui);
  letter-spacing: -.024em;
  color: #fff;
  text-wrap: balance;
}
.company__copy p {
  margin-top: 18px;
  font: 400 clamp(15px, 1.5vw, 17px)/1.7 var(--ui);
  color: var(--on-dark-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.company__facts { flex: 1 1 320px; min-width: 270px; }
.company__facts div {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  box-shadow: inset 0 -1px 0 var(--on-dark-line);
}
.company__facts dt {
  flex: none;
  width: clamp(80px, 10vw, 116px);
  font: 600 13px/1.6 var(--ui);
  color: rgba(255, 255, 255, .42);
}
.company__facts dd {
  flex: 1;
  margin: 0;
  font: 500 15px/1.6 var(--ui);
  color: #fff;
  text-wrap: pretty;
}

/* ── 푸터 ─────────────────────────────────────────────────────────────── */

.site-footer { background: var(--cg); padding: clamp(44px, 6vw, 72px) var(--gutter); }
.site-footer__top {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer__brand img { height: 26px; width: auto; }
.site-footer__brand p {
  margin-top: 16px;
  font: 400 14px/1.7 var(--ui);
  color: rgba(255, 255, 255, .85);
  max-width: 34ch;
  text-wrap: pretty;
}
.site-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h4 { font: 600 13px/1 var(--ui); color: rgba(255, 255, 255, .5); }
.site-footer__col a { font: 500 14px/1.4 var(--ui); color: rgba(255, 255, 255, .86); }
.site-footer__col a:hover { color: #fff; }

.site-footer__bottom {
  max-width: var(--max);
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding-top: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font: 400 13px/1.6 var(--ui);
  color: rgba(255, 255, 255, .85);
}
.site-footer__legal { max-width: 50ch; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.site-footer__legal-links a { color: rgba(255, 255, 255, .85); }
.site-footer__legal-links a:hover { color: #fff; }

/* ── 토스트 ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1.4 var(--ui);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  animation: cg-fadeup .18s var(--ease);
}
.toast[hidden] { display: none; }

/* ── 스크롤 리빌 ──────────────────────────────────────────────────────── */
/* 역할별로 다른 무게감을 준다: 텍스트/리스트는 조용한 페이드만(.reveal),
   카드형 그리드는 스케일이 붙는 통통 튀는 등장(.reveal-card). 모든 요소가
   똑같이 움직이던 걸 정보 성격에 따라 갈랐다. */

.reveal {
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.reveal.is-revealed { opacity: 1; }

.reveal-card {
  opacity: 0;
  transform: translateY(20px) scale(.94);
  transition: opacity 480ms cubic-bezier(.16, 1, .3, 1), transform 480ms cubic-bezier(.16, 1, .3, 1);
}
.reveal-card.is-revealed { opacity: 1; transform: none; }

/* ── 키프레임 ─────────────────────────────────────────────────────────── */

@keyframes cg-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-104vh); opacity: 0; }
}
@keyframes cg-gridup {
  0%   { transform: translateY(60%); }
  100% { transform: translateY(-160%); }
}
@keyframes cg-waveup {
  0%   { transform: translateY(40%) scaleY(1); }
  100% { transform: translateY(-180%) scaleY(1.3); }
}
@keyframes cg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes cg-fadeup {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── 좁은 화면 조정 ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hero__tags { margin-top: 40px; }
  .card-band__photo { min-height: 220px; order: -1; }
  .inquiry { padding: 24px 20px; }
  .toast { bottom: 20px; }
}