/* ==========================================================================
   ZepLink 랜딩 페이지
   --------------------------------------------------------------------------
   "ZepLink Landing.dc.html"(Claude Design) 을 정적 사이트로 옮긴 것.
   시각 값은 전부 tokens.css 의 디자인 토큰을 쓴다 — 하드코딩된 색은
   디자인 원본에 그 값이 리터럴로 박혀 있던 자리(호버 틴트 등)에만 남겼다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 리셋 · 문서 기본값
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* 스티키 헤더(64px)에 앵커 타깃이 가리지 않도록 */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-weight: var(--font-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 한국어는 기본값이면 글자 단위로 끊긴다 — "집 밖은" 이 "집 밖 / 은" 으로,
     "합니다" 가 "합 / 니다" 로 갈라진다. keep-all 이면 어절(띄어쓰기)에서만
     끊는다. 띄어쓰기 없는 긴 문자열만 예외로 강제 줄바꿈. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 키보드 사용자를 위한 본문 바로가기 */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
  font-size: 14px;
  font-weight: var(--font-bold);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   2. 레이아웃 프리미티브
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: 112px;
}

.section--tint {
  background: var(--background);
}

.section__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}

.eyebrow {
  font-size: 11px;
  font-weight: var(--font-bold);
  letter-spacing: 1.2px;
  color: var(--brand-primary);
  text-transform: uppercase;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

h1,
h2 {
  letter-spacing: -0.4px;
  /* 제목은 줄 길이를 고르게 — pretty 는 "…월 1,000원 / 부터" 처럼
     마지막 줄에 한 단어만 남는 걸 못 막는다. */
  text-wrap: balance;
}

h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.25;
  font-weight: var(--font-bold);
}

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 두 칸 짜리 설명 + 시각물 배치 */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.split__figure {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   3. 디자인 시스템 프리미티브
   -------------------------------------------------------------------------- */

/* 버튼 — primary(그라디언트) · secondary(틴트) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding-inline: 22px;
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: var(--font-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, transform 0.06s ease;
}

.btn--primary {
  background-image: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.btn--primary:hover {
  filter: brightness(1.05);
  color: #fff;
}

.btn--secondary {
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
}

.btn--secondary:hover {
  background: #dce3fe; /* 디자인 시스템 Button 의 secondary 호버 값 */
  color: var(--brand-primary);
}

.btn:active {
  transform: scale(0.985);
  filter: brightness(0.94);
}

.btn--sm {
  height: 36px;
  padding-inline: 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* 호스트 상태 필 — 점 없이 색만으로 상태를 말한다 */
.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--font-bold);
  line-height: 1;
  white-space: nowrap;
}

.pill--online {
  background: var(--status-online-surface);
  color: var(--status-online-text);
}

.pill--away {
  background: var(--status-away-surface);
  color: var(--status-away-text);
}

/* 브랜드 그라디언트 배지 (Pro 라벨, 할인 라벨) */
.tag-grad {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background-image: var(--brand-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-bold);
  letter-spacing: 0.2px;
}

/* 브랜드 틴트 칩 */
.chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 28px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: var(--font-bold);
}

/* 그라디언트 체크 배지 */
.check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background-image: var(--brand-gradient);
  flex-shrink: 0;
}

/* 인라인 콜아웃 — 앞에 점 하나 붙는 틴트 노트 */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--info-surface);
  font-size: 13px;
  font-weight: var(--font-medium);
  line-height: 19px;
  color: var(--info-text);
}

.callout::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  flex-shrink: 0;
}

/* 아이콘 타일 */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--brand-primary-surface);
  color: var(--brand-primary);
}

.icon-tile--sm {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}

/* 카드 */
.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-0), var(--elevation-1);
}

/* --------------------------------------------------------------------------
   4. 헤더
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 64px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.wordmark:hover {
  color: var(--text-primary);
}

.wordmark img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.wordmark span {
  font-size: 18px;
  font-weight: var(--font-bold);
  letter-spacing: -0.46px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: var(--font-medium);
}

.site-nav a {
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--brand-primary);
}

/* 모바일 메뉴 토글 — 데스크톱에서는 숨긴다 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--fill-track);
}

/* --------------------------------------------------------------------------
   5. 히어로
   -------------------------------------------------------------------------- */

.hero {
  background: var(--gradient-login-bg);
  padding-top: 96px;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-12);
  align-items: end;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: 96px;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.15;
  font-weight: var(--font-bold);
  letter-spacing: -0.5px;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 460px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__proof svg {
  color: var(--success);
}

/* 스토어 배지 */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding-inline: 18px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: #fff;
  transition: filter 0.15s ease, transform 0.06s ease;
}

.store-badge:hover {
  color: #fff;
  filter: brightness(1.18);
}

.store-badge:active {
  transform: scale(0.985);
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  text-align: left;
}

.store-badge__text small {
  font-size: 10px;
  font-weight: var(--font-regular);
  opacity: 0.82;
}

.store-badge__text strong {
  font-size: 17px;
  font-weight: var(--font-bold);
  letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   6. 폰 목업 (히어로)
   -------------------------------------------------------------------------- */

.phone {
  /* 디자인 원본은 300px 였지만, 그러면 "최근 연결 1시간 전" 이 두 줄로 접혀
     카드 높이가 저 혼자 달라진다. 320px 면 세 줄 다 한 줄에 들어간다. */
  width: 320px;
  max-width: 100%;
  height: 520px;
  padding: var(--space-3) var(--space-3) 0;
  border-radius: 44px 44px 0 0;
  background: var(--text-primary);
  box-shadow: 0 10px 32px rgba(var(--shadow-tint), 0.16);
}

.phone__screen {
  height: 100%;
  padding: 52px var(--space-4) 0;
  border-radius: 34px 34px 0 0;
  background: var(--background);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}

.phone__titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone__titlebar strong {
  font-size: 22px;
  font-weight: var(--font-bold);
  letter-spacing: -0.46px;
}

.phone__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--avatar-surface);
}

.host-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.host-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.host-row__body strong {
  font-size: 15px;
  font-weight: var(--font-bold);
}

.host-row__body span {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 화면 하단 — 실제 앱의 FAB 가 있는 자리 */
.phone__foot {
  margin-top: auto;
  padding-bottom: var(--space-5);
  display: flex;
  justify-content: flex-end;
}

.phone__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-image: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-button);
}

/* --------------------------------------------------------------------------
   7. 무설정 페어링
   -------------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 16px rgba(var(--shadow-tint), 0.06);
}

.feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feature__text strong {
  font-size: 18px;
  font-weight: var(--font-bold);
}

.feature__text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 1 → 2 → 3 단계 스트립 */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--background);
}

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background-image: var(--brand-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: var(--font-bold);
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.step__body strong {
  font-size: 15px;
  font-weight: var(--font-bold);
}

.step__body span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   8. 외부망 접속
   -------------------------------------------------------------------------- */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
}

.checklist strong {
  font-weight: var(--font-bold);
}

/* 사전 연결 테스트 카드 */
.preflight {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-3);
}

.preflight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 17px;
  font-weight: var(--font-bold);
}

/* "연결 중…" 을 뜻하는 점선 회전 링 */
.spinner-ring {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px dashed var(--brand-primary);
  border-radius: var(--radius-pill);
  animation: zp-ring 1.6s linear infinite;
}

@keyframes zp-ring {
  to {
    transform: rotate(360deg);
  }
}

.preflight__steps li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--divider);
}

.preflight__steps li:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   9. 함께하기
   -------------------------------------------------------------------------- */

/* 시각물이 먼저 오고 설명이 뒤따른다 (데스크톱 기준) */
.coop__figure {
  order: 1;
}

.coop__copy {
  order: 2;
}

.invite {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--background);
}

.invite__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invite__head strong {
  font-size: 17px;
  font-weight: var(--font-bold);
}

.invite__head span {
  font-size: 13px;
  color: var(--text-secondary);
}

.code-boxes {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.code-boxes span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-input);
  font-size: 24px;
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}

.players {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-radius: 14px;
  background: var(--surface);
}

.player__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: var(--font-bold);
}

.player__name {
  flex: 1;
  font-size: 14px;
  font-weight: var(--font-medium);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.mini-grid div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--brand-primary-surface);
}

.mini-grid strong {
  font-size: 15px;
  font-weight: var(--font-bold);
}

.mini-grid span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   10. 요금
   -------------------------------------------------------------------------- */

.pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: center;
}

.pricing__intro {
  text-align: center;
  max-width: 560px;
  align-items: center;
}

.pricing__intro .lede {
  text-wrap: balance;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: 960px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 16px rgba(var(--shadow-tint), 0.06);
}

/* 강조 플랜은 2px 인디고 인셋 링 */
.plan--featured {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--brand-primary), var(--elevation-3);
}

.plan__flag {
  position: absolute;
  top: -13px;
  left: var(--space-8);
  height: 26px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background-image: var(--brand-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
}

.plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan__name {
  font-size: 14px;
  font-weight: var(--font-bold);
  color: var(--text-secondary);
}

.plan__name--brand {
  color: var(--brand-primary);
}

.plan__namerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan__price b {
  font-size: 36px;
  font-weight: var(--font-bold);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.plan__sub {
  font-size: 13px;
  color: var(--text-muted);
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 14px;
}

.plan__features li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.plan__features svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.plan .btn {
  margin-top: auto;
}

/* 월간/연간 세그먼티드 컨트롤 */
.segmented {
  display: flex;
  gap: 2px;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--fill-track);
}

.segmented button {
  flex: 1;
  height: 34px;
  padding-inline: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: var(--font-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented button[aria-selected="true"] {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: var(--font-bold);
  box-shadow: 0 1px 3px rgba(var(--shadow-tint), 0.1);
}

.pricing__fineprint {
  max-width: 560px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. 마무리 CTA · 푸터
   -------------------------------------------------------------------------- */

.closing {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.closing img {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  box-shadow: var(--elevation-3);
}

.closing__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-8);
  font-size: 13px;
  color: var(--text-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--font-bold);
}

.site-footer__brand img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-footer__links a {
  color: var(--text-muted);
}

.site-footer__links a:hover {
  color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   11-1. 문서 페이지 (개인정보 처리방침 등)
   -------------------------------------------------------------------------- */

.doc {
  padding-block: var(--space-12) 96px;
}

.doc__inner {
  max-width: 800px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-primary);
}

.doc h1 {
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.doc h2 {
  font-size: 20px;
  line-height: 1.4;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.doc h3 {
  font-size: 16px;
  font-weight: var(--font-bold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.doc p,
.doc ul {
  margin-block: 0 var(--space-4);
}

.doc ul {
  padding-left: 1.25em;
}

.doc li + li {
  margin-top: var(--space-1);
}

.doc__meta {
  color: var(--text-muted);
  font-size: 13px;
}

/* 표는 좁은 화면에서 가로로 넘치므로 감싼 상자 안에서만 스크롤한다 — 페이지 전체가
   옆으로 밀리면 본문까지 흔들린다. */
.doc__table {
  overflow-x: auto;
  margin-block: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

.doc caption {
  text-align: left;
  font-weight: var(--font-bold);
  padding: var(--space-3) var(--space-4) 0;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  min-width: 120px;
}

.doc thead th {
  background: var(--brand-primary-surface);
  font-weight: var(--font-bold);
  white-space: nowrap;
}

.doc tbody th {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.doc tr:last-child > td,
.doc tr:last-child > th {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   12. 반응형
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .section {
    padding-block: 80px;
  }

  /* 데스크톱 내비를 접고 토글 버튼을 연다 */
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-6) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--elevation-2);
    font-size: 16px;
  }

  /* 기본은 닫힘. JS 가 .is-open 을 토글한다 — 클래스로 하면
     스크립트가 실행되기 전에 메뉴가 펼쳐 보이는 깜빡임이 없다. */
  .site-nav:not(.is-open) {
    display: none;
  }

  .site-nav a {
    padding-block: 14px;
    border-bottom: 1px solid var(--divider);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }

  /* 헤더의 CTA 버튼은 좁은 화면에서 숨긴다 — 히어로/마무리에 같은 버튼이 있다 */
  .site-header .btn {
    display: none;
  }

  .hero {
    padding-top: 64px;
  }

  .hero__copy {
    padding-bottom: 64px;
  }

  /* 함께하기: 좁은 화면에서는 설명이 먼저 */
  .coop__figure {
    order: 2;
  }

  .coop__copy {
    order: 1;
  }
}

@media (max-width: 560px) {
  .shell {
    padding-inline: var(--space-5);
  }

  .section {
    padding-block: 64px;
  }

  .stack {
    gap: var(--space-10);
  }

  .split {
    gap: var(--space-10);
  }

  .feature,
  .preflight,
  .invite,
  .plan,
  .steps {
    padding: var(--space-5);
  }

  .plan__flag {
    left: var(--space-5);
  }

  .store-badge {
    flex: 1 1 auto;
    justify-content: center;
  }

  .code-boxes span {
    width: 100%;
    height: 52px;
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   13. 모션 최소화 · 인쇄
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .phone {
    display: none;
  }

  .section {
    padding-block: var(--space-8);
    break-inside: avoid;
  }
}