/* ════════════════════════════════════════════════════════════════
   티옴타 UX 기본표준 v1.0  —  클로드 모바일앱식 직관성 (구조 레이어)
   ──────────────────────────────────────────────────────────────
   색/브랜드 토큰 = 티옴타디자인표준.css (choco/cream/gold)
   구조/타이포/터치/프레임 = 이 파일.  둘은 함께 로드(이 파일을 뒤에).

   7대 기본원칙
   ① 시원한 가독 타이포   본문 16px 기준, 13.5px 미만 본문 금지
   ② 모바일 우선 단일컬럼  가로 스크롤 0, 콘텐츠 640px 캡, 거터 16px
   ③ 넉넉한 터치 타깃      버튼/링크 ≥44px, 입력 ≥48px
   ④ 8pt 리듬 간격         모든 여백 --s-* 토큰 (4/8/12/16/24/32…)
   ⑤ 조용한 위계          크기·굵기·여백으로. 테두리·색 남발 금지
   ⑥ 부드러운 모서리       카드 18 / 버튼 12·pill / 큰 면 28
   ⑦ 한 화면 한 주행동     점진적 노출, 칩·배지 절제
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── ① 타이포 스케일 (모바일 우선, clamp 반응형) ── */
  --fs-micro:   12px;                  /* 마이크로 라벨(태그/배지/카운트)만 — 본문 금지 */
  --fs-caption: 13.5px;                /* 보조/메타 텍스트 최소선 */
  --fs-body:    16px;                  /* 기본 본문 (클로드 앱과 동급) */
  --fs-body-lg: 17px;                  /* 입력 필드 / 장문 읽기 */
  --fs-title:   20px;                  /* 카드 제목 */
  --fs-h3:      clamp(19px, 4.5vw, 22px);
  --fs-h2:      clamp(22px, 5.5vw, 28px);
  --fs-h1:      clamp(26px, 7vw, 34px);
  --fs-display: clamp(30px, 8.5vw, 46px);  /* 히어로 — 모바일에서 절대 안 잘림 */
  --lh-body: 1.55;  --lh-snug: 1.4;  --lh-tight: 1.2;
  --track-tight: -0.01em;  --track-label: 0.04em;

  /* ── ③ 터치 타깃 ── */
  --tap-min:   44px;                   /* 모든 버튼/링크/탭 최소 높이 (Apple HIG) */
  --tap-input: 48px;                   /* 입력 필드 최소 높이 */

  /* ── ② 모바일 프레임 ── */
  --content-max: 640px;                /* 읽기/폼/허브 콘텐츠 폭 캡 */
  --wide-max:   1080px;                /* 그리드/마케팅 넓은 폭 */
  --gutter:     16px;                  /* 화면 좌우 거터 (모바일) */
}
@media (min-width: 480px) { :root { --gutter: 20px; } }

/* ════ 안전 베이스 (전역, 보수적 — 레이아웃 안 깨는 범위) ════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
/* 제목·본문은 항상 줄바꿈 허용 → 가로 오버플로 차단 (① 원칙의 안전망) */
h1, h2, h3, h4, h5, p, figcaption, blockquote, li { overflow-wrap: break-word; word-break: keep-all; }

/* ════ opt-in 베이스 클래스 .tux (페이지가 body/main 에 명시 적용) ════
   ※ 내부 요소 규칙은 모두 :where() 0-특이도 "기본값" → 페이지 고유 클래스
      (.hub-title 등)가 항상 이김. 즉 성격·디자인 보존하며 빈자리만 표준이 채움. */
.tux { font-family: var(--sans, system-ui, -apple-system, 'Pretendard', sans-serif); }
:where(.tux) { font-size: var(--fs-body); line-height: var(--lh-body); }
:where(.tux) h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
:where(.tux) h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
:where(.tux) h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
:where(.tux) p, :where(.tux) li { font-size: var(--fs-body); line-height: var(--lh-body); }
:where(.tux) small, :where(.tux) .caption, :where(.tux) .meta { font-size: var(--fs-caption); line-height: var(--lh-snug); }
:where(.tux) .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }

/* 콘텐츠 프레임 (② 단일 컬럼) — 명시 유틸이라 일반 특이도 */
.tux-wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.tux-wrap.wide { max-width: var(--wide-max); }

/* 터치 타깃 (③) — :where() 0-특이도 "바닥값". 페이지가 더 크게 잡으면 그게 이김 */
:where(.tux) button, :where(.tux) .btn, :where(.tux) [role="button"], :where(.tux) a.tap { min-height: var(--tap-min); }
:where(.tux) input:not([type="checkbox"]):not([type="radio"]), :where(.tux) select, :where(.tux) textarea {
  min-height: var(--tap-input); font-size: var(--fs-body-lg);   /* iOS 16px↑ = 줌 방지 */
}

/* CTA 행 (⑦) — 아주 좁은 화면에서 세로 스택, 풀폭 터치 */
.tux-actions { display: flex; flex-wrap: wrap; gap: var(--s-3, 12px); align-items: center; }
@media (max-width: 420px) {
  .tux-actions { flex-direction: column; align-items: stretch; }
  .tux-actions > * { width: 100%; justify-content: center; }
}

/* 접근성: 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}