/* =====================================================================
   base.css — 모든 화면에 공통으로 깔리는 기본 모양

   이 파일이 하는 일
   - 브라우저마다 다른 기본 여백·글자 모양을 같게 맞춘다 (초기화).
   - 바탕색, 본문 글꼴 16px, 한글 줄바꿈 규칙을 정한다.
   - 앱 틀: 휴대폰 375px 기준으로 만들고, PC에서는 가운데 최대 480px로 보여 준다.
   - 키보드 초점 고리, 화면 읽기 전용 글자(.sr-only), "동작 줄이기" 대응.
   - 값은 모두 tokens.css 의 이름(var(--...))으로만 쓴다.

   ---------------------------------------------------------------------
   글꼴 불러오기 안내 (여기서 @import 하지 않는 이유)
   - CSS 안의 @import 는 이 파일을 다 받은 뒤에야 글꼴 주소를 알게 되어 첫 화면이 늦어진다.
   - 그래서 index.html 의 <head> 에 아래 4줄을 tokens.css 보다 먼저 넣는다.
     (주소의 버전은 고정: 개발 작업 규칙 1-1)

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

   - display=swap: 글꼴이 오기 전에는 기본 글꼴로 먼저 보여 줘서 글자가 안 보이는 시간이 없다.
   - 이 파일은 font-family 이름만 쓴다 (값은 tokens.css 의 --font-body, --font-pop).
   ===================================================================== */

/* ---------- 1. 초기화: 브라우저 기본 여백을 없애고 크기 계산을 쉽게 ---------- */
/* box-sizing: border-box → 너비에 테두리·안쪽 여백이 포함되어 "가로 375px"을 계산하기 쉽다 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%; /* 휴대폰을 가로로 돌려도 글자가 멋대로 커지지 않게 */
  background-color: var(--color-bg);
}

/* ---------- 2. 본문 기본 글자와 바탕 ---------- */
body {
  min-height: 100vh;
  min-height: 100dvh; /* 휴대폰 주소창 높이를 뺀 실제 화면 높이 (지원 안 하면 윗줄 100vh 사용) */
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);           /* 본문 16px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  word-break: keep-all;                  /* 한글 단어 중간에서 줄이 끊기지 않게 */
  overflow-wrap: break-word;             /* 아주 긴 영어·주소는 칸 끝에서 줄바꿈 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* 휴대폰에서 누를 때 회색 네모가 번쩍이지 않게 */
}

/* 그림은 줄 끝 빈틈 없이, 칸보다 커지지 않게 */
img,
svg {
  display: block;
  max-width: 100%;
}

/* 버튼·입력칸은 브라우저 기본 모양 대신 본문 글꼴을 그대로 받게 */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

/* 글자 링크: 네온 블루 + 밑줄 (크림 바탕 위 5.00:1, 흰 바탕 위 5.17:1) */
a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

/* 목록 앞의 점·번호는 부품에서 직접 그리므로 없앤다 */
ul,
ol {
  list-style: none;
}

/* 제목 태그(h1~h3)의 크기는 부품 클래스가 정한다 (태그는 문서 구조용) */
h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
}

/* ---------- 3. 숨김 규칙 ---------- */
/* hidden 속성을 붙이면 무조건 숨긴다.
   왜: 부품이 display:flex 등을 쓰면 브라우저 기본 hidden 이 무시되어
       "빈 항목 숨김"(F-04, D-24)이 안 될 수 있기 때문. JS는 el.hidden = true 만 하면 된다. */
[hidden] {
  display: none !important;
}

/* 자리는 그대로 두고 안 보이게만 할 때 (예: 1번 질문의 이전 버튼 → 진행 바 길이가 그대로 유지) */
.is-invisible {
  visibility: hidden;
}

/* 화면에는 안 보이지만 화면 읽기 프로그램(시각장애인용)은 읽어 주는 글자 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. 키보드 초점 고리 (네온 블루 3px) ---------- */
/* 마우스·손가락으로 누를 때는 안 보이고, 키보드(Tab)로 움직일 때만 보인다 */
:focus {
  outline: none;
}

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

/* ---------- 5. 앱 틀 ---------- */
/* 사용법: <body><main class="app"> … 화면들 … </main></body>
   - 휴대폰(375px)에서는 화면 가득, PC에서는 가운데 최대 480px.
   - 위아래로 쌓는 상자(flex column)라서 화면 안 버튼을 맨 아래로 밀기 쉽다(margin-top:auto). */
.app {
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  /* 아이폰을 가로로 돌렸을 때 화면 옆의 노치(카메라 자리)·둥근 모서리에 글자가 가리지 않게 그만큼 비운다.
     세로로 들 때나 노치가 없는 기기에서는 0 이라 아무 변화가 없다 (index.html 의 viewport-fit=cover 와 짝) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* 기울인 스티커가 옆으로 삐져나와도 가로 스크롤이 생기지 않게 (F-05) */
}

/* 화면 하나(시작·질문·분석 중·결과). 양옆 여백 20px(규칙 최소 16px), 아이폰 홈 막대만큼 아래 여백 */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
}

/* 화면 여백을 무시하고 양옆 끝까지 채우는 면 (예: 시작 화면 위쪽 노란 면) */
.bleed {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

/* ---------- 6. "동작 줄이기" 설정 대응 (작업 규칙 13장 6번) ---------- */
/* tokens.css 에서 움직임 시간을 0으로 바꾸고, 혹시 남은 움직임도 여기서 한 번 더 끈다.
   어지러움을 느끼는 사람을 배려하고, 조작이 느려지지 않게 하기 위함 (F-13). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 7. 강제 색 모드(Windows 고대비 등) 대응 ---------- */
/* 강제 색 모드에서는 브라우저가 모든 바탕색을 "시스템 바탕색"으로 바꾼다. 그래서 바탕색 + 모양 오리기(mask)로 그린
   아이콘(이전 화살표, 체크, 별, 자물쇠 등)과 진행 바 채움이 바탕과 같은 색이 되어 사라졌다. 주로 PC 저시력 사용자가 쓰는 모드다.
   → 이 그림들만 forced-color-adjust: none(바꾸지 말 것)으로 두고, 색 값 대신 "시스템 색 이름"으로 칠한다.
     CanvasText = 시스템 글자색, Canvas = 시스템 바탕색, Highlight = 시스템 "선택됨" 색. (#… 같은 색 값이 아니라서 13장 2번과 상관없다)
   → 그림자(box-shadow)도 이 모드에서는 사라지므로, "선택됨"은 테두리 선(outline)으로 한 번 더 표시한다.
   !important 를 쓰는 까닭: 이 파일은 components.css·result.css 보다 먼저 불러와서, 같은 이름표 규칙이면 뒤 파일이 이긴다.
     이 모드에서만큼은 아래 규칙이 이겨야 하므로 !important 로 앞세운다. */
@media (forced-colors: active) {
  .icon,
  .back-btn::before,
  .star::before,
  .feedback__thanks:not(:empty)::after,
  .analyze-step__mark::after {
    forced-color-adjust: none !important;
    background-color: CanvasText !important;
  }
  /* 별 안쪽 면: 빈 별은 바탕색, 채운 별(고른 별·난이도)은 "선택됨" 색 */
  .star::after {
    forced-color-adjust: none !important;
    background-color: Canvas !important;
  }
  .star.is-on::after {
    background-color: Highlight !important;
  }
  /* 진행 바 채움 */
  .progress__fill {
    forced-color-adjust: none !important;
    background-color: Highlight !important;
  }
  /* 질문 선택지 "선택됨": 배지는 "선택됨" 색 동그라미 + 체크 (글자 A·B·C 는 숨김), 선택지 둘레에 굵은 선 */
  .choice[aria-pressed="true"] .choice__badge {
    forced-color-adjust: none !important;
    background-color: Highlight !important;
    color: transparent !important;
  }
  .choice[aria-pressed="true"] .choice__badge::after {
    background-color: HighlightText !important;
  }
  .choice[aria-pressed="true"],
  .age-chip__input:checked + .age-chip__face {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  /* 결과 카드 아래 먹색 띠: 이 모드에서도 먹색 바탕 + 옐로 글자 그대로 둔다 (대비 12.08:1).
     왜: 띠가 카드 테두리 위를 덮는 자리라(components.css 의 음수 margin), 바탕이 시스템 바탕색으로 바뀌면 카드 아래 테두리가 사라졌다 */
  .result-card__band {
    forced-color-adjust: none !important;
  }
  /* 통계 화면(F-12) 키트별 추천 횟수 막대 채움: 진행 바와 같은 "선택됨" 색 (안 하면 막대가 모두 빈 틀로 보였다) */
  .bar-fill {
    forced-color-adjust: none !important;
    background-color: Highlight !important;
  }
  /* 통계 화면 연령대 색 견본: 원그래프 조각(이 모드에서도 색이 남음)과 같은 색을 그대로 둔다 (안 하면 5개가 똑같은 빈 네모) */
  .swatch {
    forced-color-adjust: none !important;
  }
  /* 통계 화면 "숫자 표로 보기" 앞 화살표 (바탕색 + 모양 오리기로 그린 그림) */
  .table-toggle > summary::before {
    forced-color-adjust: none !important;
    background-color: CanvasText !important;
  }
}