/* ═══════════════════════════════════════════════════════════════════════
 * base.css — 정규화 레이어 (reset + WebView 엔진 차이 흡수)
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Kalarm의 화면은 iOS(WKWebView)와 Android(WebView)가 **같은 웹 UI 한 세트**를
 * 띄운 것이다. 같은 코드인데 OS 간 모양이 달라지면 그건 FE의 결함이다.
 * 엔진 차이는 전부 **이 파일 한 곳에서** 눌러 두고, 컴포넌트 CSS(style.css)는
 * 두 OS가 같다고 가정하고 쓴다.
 *
 * 규칙
 *   1. OS 분기(`html.is-android` 등)는 **이 파일에만** 둔다. 컴포넌트 CSS에 금지.
 *   2. OS 분기를 넣었다면 "어떤 OS 태생적 차이 때문인지"를 반드시 주석으로 남긴다.
 *   3. 네이티브 폼 컨트롤(checkbox·radio·select·date)의 기본 모양에 기대지 않는다.
 *      플랫폼마다 모양이 달라지므로 appearance를 끄고 직접 그린다.
 *   4. 색·치수는 tokens.css의 변수만 쓴다.
 *
 * 읽는 순서: tokens.css → base.css → style.css
 * ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
 * 1. safe-area 처리 규약 (iOS · Android 공용)
 * ───────────────────────────────────────────────────────────────────────
 * iOS(WKWebView)는 env(safe-area-inset-*)를 실제 인셋으로 채워준다.
 * Android WebView는 env()를 "지원은 하지만 항상 0px"으로 정의해 두기 때문에,
 * 네이티브(MainActivity)가 측정한 인셋을 --safe-top/-bottom/-left/-right
 * CSS 변수로 주입한다.
 *
 * 주의: env(x, fallback)의 fallback은 x가 "미정의"일 때만 쓰인다.
 * Android는 x를 0px로 "정의"하므로 env(x, var(--safe-X))는 영원히 0px이 되고
 * 헤더가 상태바에, 탭바가 제스처바에 겹친다. 그래서 중첩 폴백이 아니라
 * max()로 둘 중 큰 값을 취한다.
 *
 * iOS 영향 없음: iOS에는 --safe-*가 주입되지 않아 var()가 0px로 떨어지고,
 * 인셋은 음수가 될 수 없으므로 max(env, 0px) === env 로 픽셀 동일하다.
 *
 * 컴포넌트는 env()를 직접 쓰지 말고 아래 네 변수를 쓴다.
 * (OS 차이를 아는 자리를 이 네 줄로 좁히기 위해서다) */
:root {
  --safe-area-top: max(env(safe-area-inset-top), var(--safe-top, 0px));
  --safe-area-bottom: max(env(safe-area-inset-bottom), var(--safe-bottom, 0px));
  --safe-area-left: max(env(safe-area-inset-left), var(--safe-left, 0px));
  --safe-area-right: max(env(safe-area-inset-right), var(--safe-right, 0px));
}


/* ───────────────────────────────────────────────────────────────────────
 * 2. Reset
 * ─────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  /* 엔진이 글자를 임의로 키우지 않게 한다.
     시스템 글씨 크기는 iOS WKWebView가 이미 무시하고, Android는 네이티브에서
     textZoom = 100 으로 고정했다(MainActivity). 이 선언은 그 위에 엔진별
     자동 확대(text inflation)까지 막아 두 OS의 글자 크기를 같게 만든다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: var(--text-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input {
  font-family: inherit;
  font-size: var(--text-15);
}


/* ───────────────────────────────────────────────────────────────────────
 * 3. 폼 컨트롤 정규화 — 체크박스
 * ───────────────────────────────────────────────────────────────────────
 * OS 태생적 차이: 같은 `<input type="checkbox">`를 iOS WebKit은 둥근 사각형
 * (애플 스퀘어클), Android Chromium은 각진 사각형으로 그린다. `accent-color`는
 * 색만 바꿀 뿐 모양에는 손대지 못한다(2026-10-03 양 기기 실측 확인).
 * → appearance를 끄고 직접 그려 두 OS를 같게 만든다.
 *
 * 모양은 디자인 시스템 Checkbox 부품의 확정 값이다:
 *   20x20 고정 / radius-sm / 꺼짐은 border-control 1.5px + 면 없음 /
 *   켜짐은 brand 채움 + 흰 체크. 체크 표시는 인라인 SVG다 —
 *   유니코드 ✓는 플랫폼마다 글꼴이 달라 모양이 변한다.
 *
 * 체크박스 자체는 20px이라 44px 터치 하한에 못 미친다. 감싸는 행이
 * min-height로 영역을 벌려 준다(style.css의 .picker-item · .sheet-inline-item).
 *
 * appearance와 -webkit-appearance를 **반드시 같이** 준다. 하나만 주면 한쪽이 남는다. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--icon-md);
  height: var(--icon-md);
  /* 큰 글씨·좁은 폭에서도 네모가 찌그러지지 않게 고정한다 */
  flex: 0 0 var(--icon-md);
  margin: 0;
  /* 테두리는 border-control(0.15)이 아니라 더 진한 값을 쓴다.
     꺼진 체크박스는 "여기 고를 게 있다"를 말하는 **유일한** 신호인데,
     0.15는 surface-card(#3A3A3C) 위에서 대비 1.5:1로 비인터랙티브 요소 기준
     3:1에 한참 못 미쳐 거의 안 보였다(2026-10-03 재QA). 0.45는 3.3:1로 통과한다.
     입력 필드·보조 버튼이 0.15를 쓰는 것과 어긋나 보이지만, 그쪽은 50px 면과
     라벨이 같이 신호를 주고 이건 20px 네모 하나뿐이라 더 진해야 맞다. */
  border: 1.5px solid var(--checkbox-off-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: background-color var(--dur-state), border-color var(--dur-state);
}

input[type="checkbox"]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* 부분 선택(일부만 체크된 "전체 선택") — 가로 선 하나 */
input[type="checkbox"]:indeterminate {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}


/* ───────────────────────────────────────────────────────────────────────
 * 4. OS 분기 — **분기는 여기에만 둔다**
 * ───────────────────────────────────────────────────────────────────────
 * `html.is-android` 클래스는 index.html의 인라인 스크립트가 UA로 판정해 붙인다
 * (네이티브가 UA에 Android 토큰을 남긴다). iOS에는 이 클래스가 붙지 않으므로
 * 아래 규칙은 iOS 렌더에 영향을 주지 않는다.
 *
 * 지금 비어 있는 게 맞다. 2026-10-03 기준 남아 있던 OS 차이 두 가지는
 * 분기가 아니라 **원인 자리에서** 없앴다:
 *   - 시스템 글씨 크기: Android WebView만 textZoom이 시스템 font_scale을
 *     따라가 웹 텍스트가 1.3배가 됐다 → 네이티브에서 `textZoom = 100`으로 고정
 *     (MainActivity.setupWebView). CSS 분기로 덮지 않는다.
 *   - 체크박스 모양: 위 3번에서 양쪽 모두 직접 그린다.
 *
 * 새 분기를 넣기 전에 먼저 물어볼 것 — "이건 정말 OS 태생적 차이인가,
 * 아니면 한쪽만 고치면 되는 결함인가?" 대부분은 후자다.
 * 폭 기준 @media는 특히 조심한다: iPhone(약 402pt)에도 걸려 iOS가 같이 바뀐다.
 * 좁은 폭 대응은 @media가 아니라 유연한 레이아웃(flex, min-width:0, stretch)으로 한다. */