/* Lumi 글로벌 베이스 — reset + 기본 타이포 + a11y */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* HTML hidden 속성이 컴포넌트 CSS의 display: flex/grid 등에 덮이지 않도록 강제. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-system);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /* overflow-x: hidden / clip 둘 다 iOS Safari 에서 position:fixed 의 containing
     block 을 body 로 만들어 하단 탭바 fixed 가 깨지는 알려진 케이스. lumi 의
     모든 콘텐츠는 .wrap max-width 600 + .stories 자체 overflow-x:auto 로 가둔
     상태라 body 측 가로 차단 불필요. fixed 회복 우선. */
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

input, textarea, select {
  font: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  /* iOS Safari 자동 줌 방지: 폼 요소 font-size < 16px 일 때 focus 시
     자동으로 zoom in 되고 새로고침해도 그 상태가 남는 버그.
     컴포넌트 측에서 var(--text-body) 같은 작은 값을 지정해도 16px 하한 보장.
     !important 로 컴포넌트 selector (.field__input 등) 의 override 차단 — 한
     곳이라도 누락되면 사장님 iPhone 에서 zoom 발동. */
  font-size: max(16px, var(--text-body, 15px)) !important;
}

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

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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

/* === utility class — audit #1 후속: inline style="" 제거용 (CSP style-src 'unsafe-inline' 제거 준비) === */

/* 화면엔 안 보이지만 screen reader 가 읽는 텍스트 (h2 section title 등) */
.u-sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 키보드 사용자용 본문 바로가기 — 평소 숨김, 포커스 시 상단에 노출 */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -200%);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--neutral-0);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-snap) var(--ease-toss);
}
.skip-link:focus {
  transform: translate(-50%, var(--space-2));
  outline: none;
}

/* footer 안 메일/전화 링크 — 부모 색 그대로 (legal-style 페이지 공통) */
.u-link-inherit { color: inherit; }

/* legal 페이지 (privacy/refund/support) 안내 박스 */
.u-info-box {
  background: var(--bg-soft);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
}

/* legal 페이지 끝 footer (signature + 연락처) */
.u-legal-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

/* "다른 문서 보기 →" 류 link 한 줄 — 가운데 정렬, 위 여유 */
.u-link-row { margin-top: var(--space-6); text-align: center; }
.u-link-pink { color: var(--pink-500); text-decoration: none; }
/* 강조 링크 — pink + bold + underline (가이드 링크 등). CSP: 인라인 style 추출용 */
.u-link-pink-strong { color: var(--pink-500); font-weight: var(--weight-semibold); text-decoration: underline; }
.u-text-center { text-align: center; }
.u-mb-2 { margin-bottom: var(--space-2); }

/* vertical stack — 작은 영역 (settings 의 action button 묶음 등) */
.u-stack-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* small caption label (settings modal 안 "대분류" 같은) */
.u-caption-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

/* signup.html 의 보조 안내 — muted hint */
.u-hint-muted {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

/* 텍스트 색만 muted */
.u-text-muted { color: var(--ink-muted); }

/* 링크 plain — 부모 색 + 밑줄 제거 */
.u-link-plain { text-decoration: none; color: inherit; }

/* 2-column grid (settings region row 등) */
.u-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* small hint — caption 크기 + muted + 살짝 margin */
.u-hint-small {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* dashboard 의 scheduled-card thumb default — signature gradient 폴백 */
.u-thumb-signature {
  background: var(--gradient-signature);
}

/* animation-delay 기반 stagger — style="--idx:N" 제거용 (audit #1 후속).
   기존: index/tutorial 의 bento/feature/gallery cards 가 style 로 --idx 주입 → CSP 차단.
   새: class 로 --idx 정의. 0~15 까지 cover (lumi 사용 최대 8). */
.u-idx-0  { --idx: 0; }
.u-idx-1  { --idx: 1; }
.u-idx-2  { --idx: 2; }
.u-idx-3  { --idx: 3; }
.u-idx-4  { --idx: 4; }
.u-idx-5  { --idx: 5; }
.u-idx-6  { --idx: 6; }
.u-idx-7  { --idx: 7; }
.u-idx-8  { --idx: 8; }
.u-idx-9  { --idx: 9; }
.u-idx-10 { --idx: 10; }
.u-idx-11 { --idx: 11; }
.u-idx-12 { --idx: 12; }
.u-idx-13 { --idx: 13; }
.u-idx-14 { --idx: 14; }
.u-idx-15 { --idx: 15; }