/* Hallmark · genre: modern-minimal · macrostructure: Carousel Marquee 히어로 + Narrative Workflow 본문 · design-system: design.md · designed-as-app
 * hero knobs: slides=4, transition=crossfade 500ms + copy rise 8px, controls=자세히 보기 필 + 원형 좌/우 화살표 + 카운터, autoplay=5s(pause on hover/focus/hidden, off on reduced-motion)
 * nav: N1b 풀와이드 상단 바(2026-09-04 대표 피드백으로 N5 필에서 교체) · footer: Ft1 Mast-headed
 * theme: custom · vibe: "토스식 투톤 — 밝은 블루가 움직이고, 네이비가 받친다" · paper: oklch(99.4% 0.001 240) · accent: oklch(61% 0.2 259) · navy: oklch(36% 0.13 263)
 * display: Pretendard 700–800 · body: Pretendard 400 · outlier: JetBrains Mono(단계 숫자·데이터 수치·카운터)
 * enrichment: 대표 제공 AI 생성 풀블리드 3장(brand-dark·tax-light·desk-blue) + 보유 렌더(이벤트·서비스 카드) · studied: 인터랙션 패턴만(사용자 제시 레퍼런스) · 픽셀 카피 아님
 * body: 서비스 카드 2단 → 절차 리스트(박스 없음) → 로고월 → 클로징 (2026-09-04 대표 피드백 반영: 옛 토스 탈피, display 하향)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  word-break: keep-all;   /* 한국어 어절 단위 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }

.skip {
  position: absolute;
  left: var(--space-md); top: var(--space-md);
  z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-btn);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ── N1b · 풀와이드 상단 바 ──────────────────────── */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 70%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: var(--rule-hair) solid color-mix(in oklch, var(--color-paper) 40%, transparent);
  box-shadow: 0 1px 12px oklch(24% 0.015 255 / 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 3.75rem;
}
.nav-bar .brand { display: flex; align-items: center; }
.nav-bar .brand img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: var(--space-md);
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav-links a:hover { color: var(--color-accent); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.login-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-xs) var(--space-sm);
}
.nav-cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out);
}
.nav-cta:hover { background: var(--color-accent-2); }
.menu-button {
  display: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.mobile-login-cta { display: none; }
/* JS(mobile-menu-v3)가 항상 주입하는 로그인 항목 — 데스크톱에선 숨김 */
@media (min-width: 60.0625rem) {
  .mobile-menu-actions { display: none; }
}

/* 모바일 시트(JS가 data-open 토글, .mobile-menu-actions 주입) */
@media (max-width: 60rem) {
  .nav-inner {
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: var(--space-md); right: var(--space-md);
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-paper);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-xs);
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links a,
  .mobile-menu-action {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-btn);
    min-height: 44px;
  }
  .nav-links a:hover,
  .mobile-menu-action:hover { background: var(--color-paper-3); }
  .mobile-menu-actions {
    border-top: var(--rule-hair) solid var(--color-rule-2);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
  }
  .login-link { display: none; }
  .nav-cta { display: none; }
  .mobile-login-cta {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-ink);
    background: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    min-height: 0;
  }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; }
}

/* ── 히어로 캐러셀 — 토스뱅크식 슬라이드 ─────────── */
.hero { position: relative; }
.hero-viewport {
  display: grid;
  overflow: clip;
}
/* 장면 전환 — 서서히 블러되며 사라지고, 블러가 걷히며 나타난다 */
.hero-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  min-height: var(--hero-h);
  padding-top: var(--space-3xl);   /* 상단 바 자리 */
  padding-bottom: var(--space-2xl);
  opacity: 0;
  filter: blur(14px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-slide) var(--ease-in-out),
              filter var(--dur-slide) var(--ease-in-out),
              visibility 0s linear var(--dur-slide);
}
.hero-slide.is-active {
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-slide) var(--ease-in-out),
              filter var(--dur-slide) var(--ease-in-out);
}
/* 슬라이드별 무드 — 저채도 파스텔 틴트 → 종이색으로 풀림 */
.slide-blue { background: linear-gradient(180deg, var(--color-slide-blue) 0%, var(--color-paper) 92%); }
.slide-mint { background: linear-gradient(180deg, var(--color-slide-mint) 0%, var(--color-paper) 92%); }
.slide-warm { background: linear-gradient(180deg, var(--color-slide-warm) 0%, var(--color-paper) 92%); }
.slide-gray { background: linear-gradient(180deg, var(--color-slide-gray) 0%, var(--color-paper) 92%); }

/* 브랜드 슬라이드 — 사무실 실사 풀블리드. 복잡한 왼쪽은 블러 사본을 마스크로 얹어 흐리게 */
.slide-brand {
  position: relative;
  background: var(--color-hero-dark) url("image/hero-brand-office-20260904.png") center right / cover no-repeat;
}
.slide-brand::before {
  content: "";
  position: absolute;
  inset: -20px;   /* 블러 가장자리 번짐 방지 여유분 */
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-hero-dark) 68%, transparent) 0%,
      color-mix(in oklch, var(--color-hero-dark) 42%, transparent) 45%,
      transparent 70%),
    url("image/hero-brand-office-20260904.png") center right / cover no-repeat;
  filter: blur(9px);
  -webkit-mask-image: linear-gradient(90deg, black 40%, transparent 66%);
  mask-image: linear-gradient(90deg, black 40%, transparent 66%);
  pointer-events: none;
}
.slide-brand .hero-grid { position: relative; grid-template-columns: minmax(0, 1fr); }
.slide-brand .hero-copy h1,
.slide-brand .hero-copy h2 { color: var(--color-paper); }
.slide-brand .hero-copy p { color: var(--color-hero-dark-muted); }

/* TAX 라이트 풀블리드 슬라이드 — 좌측 여백에 네이비 헤드라인 */
.slide-tax {
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-slide-blue) 88%, transparent) 0%,
      color-mix(in oklch, var(--color-slide-blue) 34%, transparent) 42%,
      transparent 62%),
    var(--color-slide-blue) url("image/hero-tax-light-20260904.png") center right / cover no-repeat;
}
.slide-tax .hero-grid { grid-template-columns: minmax(0, 1fr); }
.slide-tax .hero-copy h1,
.slide-tax .hero-copy h2 { color: var(--color-navy); }
.slide-tax .hero-copy p { color: var(--color-ink-2); }

/* 야근 실사 풀블리드 슬라이드(부가세) — 웜 다크 위 흰 헤드라인 */
.slide-work {
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-hero-dark) 78%, transparent) 0%,
      color-mix(in oklch, var(--color-hero-dark) 38%, transparent) 46%,
      transparent 70%),
    var(--color-hero-dark) url("image/hero-vatax-work-20260904.png") center right / cover no-repeat;
}
.slide-work .hero-grid { grid-template-columns: minmax(0, 1fr); }
.slide-work .hero-copy h1,
.slide-work .hero-copy h2 { color: var(--color-paper); }
.slide-work .hero-copy p { color: var(--color-hero-dark-muted); }

/* 카페 씬 슬라이드(종소세) — 데스크톱은 사진을 우측에, 왼쪽은 다크 배경 + 페더 경계 */
.slide-cafe {
  position: relative;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-hero-dark) 74%, transparent) 0%,
      color-mix(in oklch, var(--color-hero-dark) 40%, transparent) 46%,
      color-mix(in oklch, var(--color-hero-dark) 8%, transparent) 70%),
    var(--color-hero-dark) url("image/hero-gitax-cafe-20260904.png") center right / cover no-repeat;
}
@media (min-width: 60.0625rem) {
  .slide-cafe { background: var(--color-hero-dark); }
  .slide-cafe::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        color-mix(in oklch, var(--color-hero-dark) 58%, transparent) 0%,
        color-mix(in oklch, var(--color-hero-dark) 26%, transparent) 42%,
        transparent 66%),
      url("image/hero-gitax-cafe-20260904.png") right center / auto 135% no-repeat;
    /* 이미지 폭 ≈ 2.03 × 히어로 높이 — 왼쪽 가장자리 안쪽부터 다크로 페더 */
    -webkit-mask-image: linear-gradient(to left,
      black calc(var(--hero-h) * 1.6),
      transparent calc(var(--hero-h) * 2.05));
    mask-image: linear-gradient(to left,
      black calc(var(--hero-h) * 1.6),
      transparent calc(var(--hero-h) * 2.05));
    pointer-events: none;
  }
  .slide-cafe .hero-grid { position: relative; }
}
.slide-cafe .hero-grid { grid-template-columns: minmax(0, 1fr); }
.slide-cafe .hero-copy h1,
.slide-cafe .hero-copy h2 { color: var(--color-paper); }
.slide-cafe .hero-copy p { color: var(--color-hero-dark-muted); }

/* 다크 슬라이드 활성 시 컨트롤 반전(JS가 .is-dark 토글) */
.hero.is-dark .hero-arrow {
  background: color-mix(in oklch, var(--color-paper) 16%, transparent);
  color: var(--color-paper);
}
.hero.is-dark .hero-arrow:hover {
  background: color-mix(in oklch, var(--color-paper) 30%, transparent);
}
.hero.is-dark .hero-count { color: var(--color-hero-dark-muted); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
}
.hero-copy h1,
.hero-copy h2 {
  font-size: var(--text-display);
  letter-spacing: -0.025em;
}
.hero-copy p {
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-md);
  max-width: 30rem;
}
.hero-art {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.hero-art img {
  width: 100%;
  max-width: 30rem;
  max-height: clamp(15rem, 44vh, 26rem);
  object-fit: contain;
}

/* 컨트롤 행 — [자세히 보기] (‹) (›) · 카운터 */
.hero-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(var(--space-lg), 6vh, var(--space-2xl));
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  z-index: var(--z-raised);
}
.hero-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.hero-detail:hover { background: var(--color-paper-3); transform: translateY(-1.5px); }
.hero-detail:active { transform: translateY(1px); }
.hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-paper) 72%, transparent);
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.hero-arrow:hover { background: var(--color-paper); }
.hero-arrow:active { transform: translateY(1px); }
.hero-arrow svg { width: 18px; height: 18px; display: block; }
.hero-count {
  margin-left: var(--space-xs);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-muted-2);
}

/* ── 섹션 헤드 — 센터 스택(토스 보이스) ──────────── */
.section-head {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
}
.section-head h2 { font-size: var(--text-2xl); }
.section-head p {
  margin-top: var(--space-sm);
  color: var(--color-muted);
}

/* ── 서비스 카드 2단 — 텍스트 좌상 · 3D 오브젝트 우하 ── */
.services { padding-block: var(--space-3xl) 0; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 15rem;
  background: var(--color-paper-3);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  text-decoration: none;
  overflow: clip;
  transition: transform var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.service-card:hover { transform: translateY(-2px); }
.service-card:active { transform: translateY(1px); }
.service-card h3 { font-size: var(--text-lg); }
.service-card > p {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 56%;
}
/* 부가세 — 실사 데스크 씬(약한 블러), 네이비 텍스트. 배경은 ::before로 분리해 글자는 또렷하게 */
.service-card-vat {
  position: relative;
  background: var(--color-slide-blue);
}
.service-card-vat::before {
  content: "";
  position: absolute;
  inset: -12px;   /* 블러 가장자리 번짐을 카드 밖으로 밀어낸다 */
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-slide-blue) 82%, transparent) 0%,
      color-mix(in oklch, var(--color-slide-blue) 38%, transparent) 48%,
      color-mix(in oklch, var(--color-slide-blue) 8%, transparent) 100%),
    var(--color-slide-blue) url("image/card-vat-desk-20260904.png") center right / cover no-repeat;
  filter: blur(1.5px);
  pointer-events: none;
}
.service-card-vat > * { position: relative; }
.service-card-vat h3 { color: var(--color-navy); }
/* 종소세 — 데스크 블루 씬 배경(흐리게), 흰 텍스트 */
.service-card-gitax {
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--color-hero-dark) 90%, transparent) 0%,
      color-mix(in oklch, var(--color-hero-dark) 78%, transparent) 50%,
      color-mix(in oklch, var(--color-hero-dark) 62%, transparent) 100%),
    var(--color-hero-dark) url("image/hero-desk-blue-20260904.png") center right / cover no-repeat;
}
.service-card-gitax h3 { color: var(--color-paper); }
.service-card-gitax > p { color: var(--color-hero-dark-muted); }
.service-card-gitax .service-link { color: var(--color-paper); }
.service-link {
  margin-top: auto;
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--text-sm);
}
.service-card:hover .service-link { text-decoration: underline; text-underline-offset: 3px; }

/* ── 절차 01–05 — 카드별 파스텔 그라데이션 + 순차 등장 ── */
.flow { padding-block: var(--space-3xl); }
.flow ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  max-width: 44rem;
  margin-inline: auto;
}
.flow li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-lg);
  align-items: baseline;
  border-radius: 0;
  padding: var(--space-lg) var(--space-xl);
}
.flow li {
  border: var(--rule-hair) solid var(--color-rule-2);
}
/* 다닥다닥 — 붙는 면의 보더 중복 제거(모바일: 세로 스택) */
.flow li + li { border-top: 0; }
.flow li { background: linear-gradient(135deg, var(--color-card-white) 0%, var(--color-card-silver) 100%); }
.flow li:nth-child(odd)  .stage-num { color: var(--color-card-accent-1); }
.flow li:nth-child(even) .stage-num { color: var(--color-card-accent-2); }
/* 데스크톱: 5장을 한 줄로 — 카드 내부는 세로 스택 */
@media (min-width: 60.0625rem) {
  .flow ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
    gap: 0;
  }
  .flow li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-lg);
  }
  /* 가로 행: 위 보더 복원, 붙는 왼쪽 보더만 제거 */
  .flow li + li { border-top: var(--rule-hair) solid var(--color-rule-2); border-left: 0; }
}

/* 순차 등장 — JS가 data-animate를 켠 뒤 li마다 .is-in을 시차로 부여(다다다닥) */
.flow ol[data-animate] li {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 500ms var(--ease-in), transform 500ms var(--ease-in);
}
.flow ol[data-animate] li.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.flow .stage-head { display: contents; }
.flow .stage-num {
  grid-column: 1;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-accent);
}
.flow h3 {
  grid-column: 2;
  font-size: var(--text-md);
  font-weight: 700;
}
.flow .stage-body {
  grid-column: 2;
  color: var(--color-muted);
}
.flow .stage-body a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 데스크톱 5열에서는 번호·제목·본문이 전부 1열 세로 스택 */
@media (min-width: 60.0625rem) {
  .flow h3 { grid-column: 1; font-size: var(--text-md); }
  .flow .stage-body { grid-column: 1; font-size: var(--text-sm); }
}

/* ── 로고월 — 컬러 워드마크, 모바일은 한 줄 마퀴 ── */
.logo-wall {
  padding-block: var(--space-2xl);
  text-align: center;
  overflow: clip;
}
.logo-wall-head {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
  margin-bottom: var(--space-lg);
}
.logo-track { display: flex; justify-content: center; }
.logo-wall ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-2xl);
}
.logo-track ul[aria-hidden="true"] { display: none; }
.logo-wall li { display: grid; place-items: center; }
.logo-wall img {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── 클로징 — 밝은 밴드 + 흰 카드 폼 ─────────────── */
.closing {
  background: var(--color-paper-2);
  margin-top: var(--space-xl);
  padding-block: var(--space-3xl);
}
.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}
.closing h2 { font-size: var(--text-2xl); }
.closing-copy p {
  margin-top: var(--space-md);
  color: var(--color-muted);
  max-width: 30rem;
}
.closing-contact {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-xs);
}
.closing-contact div {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}
.closing-contact dt {
  font-size: var(--text-sm);
  color: var(--color-muted-2);
  min-width: 4.5rem;
}
.closing-contact dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.closing-contact .num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.closing-contact a { color: var(--color-ink); text-decoration: none; }
.closing-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.quick-form {
  display: grid;
  gap: var(--space-md);
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}
.quick-form h3 { font-size: var(--text-md); }
.quick-form label {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.quick-form select {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-input);
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
}
.quick-form select:hover { border-color: var(--color-rule); }
.quick-form button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-btn);
  padding: var(--space-sm) var(--space-lg);
  min-height: 48px;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.quick-form button:hover { background: var(--color-accent-2); transform: translateY(-1.5px); }
.quick-form button:active { transform: translateY(1px); }
.quick-kakao {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}
.quick-kakao a {
  color: var(--color-ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Ft1 · 마스트헤드 푸터 ───────────────────────── */
.foot {
  padding-block: var(--space-2xl) var(--space-xl);
}
.foot-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.foot-mast img { height: 24px; width: auto; }
.foot-tagline {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.foot-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.foot-links a {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.foot-links a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal {
  padding-top: var(--space-lg);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--color-muted-2);
}
.foot-legal strong { font-weight: 500; color: var(--color-ink-2); }
.foot-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.foot-social a { display: inline-flex; opacity: 0.55; transition: opacity var(--dur-micro) var(--ease-out); }
.foot-social a:hover { opacity: 1; }
.foot-social img { height: 22px; width: 22px; filter: grayscale(1); }

/* ── 모바일 스티키 CTA(C4) ───────────────────────── */
.mobile-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.mobile-sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-btn);
}
.mobile-sticky-cta a:first-child {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.mobile-sticky-cta a:last-child {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width: 60rem) {
  .hero-slide {
    min-height: 0;
    padding-top: calc(var(--space-3xl) + var(--space-2xl) + var(--space-md));
    padding-bottom: calc(var(--space-2xl) + var(--space-2xl));
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .hero-art { order: -1; }
  .hero-art img { max-height: clamp(11rem, 34vw, 15rem); }
  .hero-copy p { margin-top: var(--space-md); }
  /* 모바일: 워드마크 이미지 전체 노출 — 가로 100%, 컨트롤 위에 배치, 상하 다크 블렌딩
   * padding-bottom이 이미지 높이(≈85vw)를 예약해 텍스트와 절대 겹치지 않게 한다 */
  /* 모바일: 풀블리드 커버, 뷰포인트를 오른쪽으로 — 사이니지가 통째로 들어오게 */
  .slide-brand {
    padding-bottom: calc(50vw + 6rem);
    background: var(--color-hero-dark) url("image/hero-brand-office-20260904.png") 87% center / cover no-repeat;
  }
  .slide-brand::before {
    inset: -14px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--color-hero-dark) 74%, transparent) 0%,
        color-mix(in oklch, var(--color-hero-dark) 48%, transparent) 60%,
        transparent 85%),
      url("image/hero-brand-office-20260904.png") 87% center / cover no-repeat;
    filter: blur(9px);
    -webkit-mask-image: linear-gradient(180deg, black 48%, transparent 72%);
    mask-image: linear-gradient(180deg, black 48%, transparent 72%);
  }
  .slide-tax {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--color-slide-blue) 80%, transparent) 0%,
        color-mix(in oklch, var(--color-slide-blue) 30%, transparent) 100%),
      var(--color-slide-blue) url("image/hero-tax-light-20260904.png") 70% center / cover no-repeat;
  }
  .slide-cafe {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--color-hero-dark) 78%, transparent) 0%,
        color-mix(in oklch, var(--color-hero-dark) 52%, transparent) 55%,
        color-mix(in oklch, var(--color-hero-dark) 34%, transparent) 100%),
      var(--color-hero-dark) url("image/hero-gitax-cafe-20260904.png") 35% center / cover no-repeat;
  }
  .slide-work {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--color-hero-dark) 80%, transparent) 0%,
        color-mix(in oklch, var(--color-hero-dark) 55%, transparent) 55%,
        color-mix(in oklch, var(--color-hero-dark) 36%, transparent) 100%),
      var(--color-hero-dark) url("image/hero-vatax-work-20260904.png") 60% center / cover no-repeat;
  }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot-links { margin-left: 0; }
  .mobile-sticky-cta { display: grid; }
  body { padding-bottom: 4.5rem; }
}
@media (max-width: 40rem) {
  .hero-copy h1,
  .hero-copy h2 { font-size: var(--text-display-s); }
  .section-head h2, .closing h2 { font-size: var(--text-xl); }
  .service-card { min-height: 12rem; }
  .service-card > p { max-width: 58%; }
  .service-card img { width: 8rem; }
  .hero-count { display: none; }

  /* 로고월 마퀴 — 한 줄로 흐름, 트랙 2개(복제)로 무한 루프 */
  .logo-track {
    justify-content: flex-start;
    width: max-content;
    animation: logo-scroll 18s linear infinite;
  }
  .logo-wall ul,
  .logo-track ul[aria-hidden="true"] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
  .logo-wall li { flex: none; }
  .logo-wall {
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
  .btn:hover, .hero-detail:hover, .quick-form button:hover { transform: none; }
  /* 로고월 마퀴 해제 → 정적 랩 배치 */
  .logo-track { animation: none; width: auto; justify-content: center; }
  .logo-wall { mask-image: none; -webkit-mask-image: none; }
  .logo-wall ul { flex-wrap: wrap; }
  .logo-track ul[aria-hidden="true"] { display: none; }
}