/* KAIA base.css — reset · 타이포 · 레이아웃 유틸 · 접근성. tokens.css 다음에 로드.
   재사용: 서브 6p는 tokens → base → components 3종을 그대로 로드하고 페이지 전용 CSS만 추가한다.
   여기에 페이지·섹션 전용 규칙을 넣지 말 것(공통 레이어). */

/* ═══ Reset ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
table { border-collapse: collapse; }
:target { scroll-margin-top: var(--scroll-offset); }  /* WCAG 2.4.11 포커스 가림 최소 */
[id] { scroll-margin-top: var(--scroll-offset); }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ═══ Base typography (DS §2.4) ════════════════════════════════ */
body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p  { text-wrap: pretty; }

a { color: var(--color-text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-text-link-hover); }

.tabular { font-variant-numeric: tabular-nums; }

/* ═══ 포커스 — 듀얼 링 (DS §3.1 FAIL 대응) ════════════════════ */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}
/* 스크림/브랜드 배경 위에서는 화이트 외측 링으로 대비 확보 */
.on-brand :focus-visible { --color-focus-ring: var(--ink-000); }

/* ═══ 접근성 유틸 ══════════════════════════════════════════════ */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skiplink);
  padding: var(--space-3) var(--space-5);
  min-height: var(--btn-height-md);
  display: inline-flex; align-items: center;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--color-text-on-brand); }

/* ═══ 레이아웃 유틸 ════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section {
  position: relative;
  padding-block: var(--section-py);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
.section--flush { padding-block: 0; }
.section--tight { padding-block: calc(var(--section-py) * 0.6); }

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(var(--grid-columns-md), minmax(0, 1fr)); gap: var(--grid-gap-md); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--space-5); } }

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* 섹션 헤더 (전 섹션 공통 골격) */
.section-head { max-width: var(--measure-wide); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-block-end: var(--space-3);
}
.section-desc {
  margin-block-start: var(--space-4);
  max-width: var(--measure-base);
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
}
.section-head--center .section-desc { margin-inline: auto; }

/* 텍스트 라인 클램프 */
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* ═══ 섹션 진입 애니메이션 (DS §4.3) ═══════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--shift-md), 0);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--stagger-base));
}
[data-reveal="lg"] { transform: translate3d(0, var(--shift-lg), 0); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* JS 없으면 항상 보이는 상태 (DS §4.3 하드 게이트) */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ═══ 페이지 전환 (DS §4.5) ════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--duration-base) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in var(--duration-slow) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translate3d(0,-8px,0); } }
@keyframes vt-in  { from { opacity: 0; transform: translate3d(0,12px,0); } }
.gnb, .footer { view-transition-name: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══ 플로팅 요소 (GLOBAL-FAB-01 / GLOBAL-TOP-01) ══════════════ */
.floating {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--shift-md), 0);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}
.floating.is-visible { opacity: 1; visibility: visible; transform: none; }

.floating__btn {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.floating__btn--sm { width: 48px; height: 48px; background: var(--color-surface-raised); color: var(--color-text-primary); }
@media (hover: hover) and (pointer: fine) {
  .floating__btn:hover { background: var(--color-brand-hover); }
  .floating__btn--sm:hover { background: var(--color-surface); }
}

.floating__popover {
  position: absolute;
  right: 0; bottom: calc(100% + var(--space-3));
  min-width: 15rem;
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}
.floating__popover[hidden] { display: none; }
.floating__popover a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--btn-height-md);
  padding-inline: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
}
@media (hover: hover) and (pointer: fine) {
  .floating__popover a:hover { background: var(--color-surface-glass); }
}

/* 스크롤 진행 인디케이터 (DS §4.2 C0) */
.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: calc(var(--z-gnb) + 1);
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* 아이콘 기본 */
.icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }
.icon--sm { width: 1.25rem; height: 1.25rem; }
.icon--lg { width: 3rem; height: 3rem; }

/* 상태 뱃지 (색 + 텍스트 병기 — WCAG 1.4.1) */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--brand   { background: var(--color-brand); color: var(--color-text-on-brand); }
.badge--warning { background: var(--color-warning); color: var(--color-text-on-status); }
.badge--success { background: var(--color-success); color: var(--color-text-on-status); }
.badge--muted   { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border-strong); }
.badge--accent  { background: var(--color-accent); color: var(--color-text-on-accent); }

/* 텍스트 링크 + 화살표 */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--btn-height-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-link);
}
.link-arrow svg { transition: transform var(--duration-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover svg { transform: translateX(var(--shift-xs)); }
}