/* =====================================================================
   안착(anchak) — 세그먼트 입력 스타일
   SPEC §2(여의도점집 크림/아이보리 톤 계승) · §7(빌드 도구 없음)

   토큰은 :root에 기본값을 두되 전부 var()로 참조한다. 앱 전역 팔레트가 생기면
   그쪽 값이 이깁니다 — 여기 값은 이 컴포넌트만 단독으로 열어도 깨지지 않게 하는 폴백이다.
   ★ 색 규칙(여의도점집에서 계승): 빨강 = 상승/길, 파랑 = 하락/주의.
   ===================================================================== */
/* ★ 토큰은 assets/theme.css 한 파일이 소유한다 (디자인 토큰 단일 소스 규칙).
   예전엔 이 컴포넌트를 단독으로 열어도 안 깨지게 여기에 폴백 팔레트를 뒀는데,
   theme.css 가 항상 먼저 실리는 지금은 값이 두 곳에 있는 게 오히려 위험하다. */


/* 양력/음력 · 성별 같은 2~3지선다 */
.seg {
  display: flex; gap: var(--sp-1);
  background: var(--surface); border-radius: var(--r-1);
  padding: var(--sp-1); margin-bottom: var(--sp-1);
}
.seg-btn {
  flex: 1; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--muted);
  padding: var(--sp-2) 0; border: none; background: none; border-radius: var(--r-1);
  font-family: inherit; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
/* 그림자 대신 보더로 구분 — 전체 톤을 플랫하게 */
.seg-btn.on { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* 숫자 세그먼트 (YYYY.MM.DD / HH:MM) */
.numseg {
  display: flex; align-items: center; gap: var(--sp-1);
  background: var(--card); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-1); padding: var(--sp-1) var(--sp-2);
  transition: border-color .15s ease;
}
.numseg:focus-within { border-color: var(--ink); }
.numseg input {
  flex: 1 1 0; min-width: 0; width: 100%;
  border: none; background: none; border-radius: var(--r-1);
  font-family: inherit; font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink);
  padding: var(--sp-3) var(--sp-1); text-align: center; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;              /* 숫자 폭이 흔들리지 않게 */
  appearance: none; -webkit-appearance: none;
}
.numseg input::placeholder { color: var(--faint); font-weight: var(--fw-normal); letter-spacing: .06em; }
.numseg input:focus { outline: none; background: var(--surface); }
.numseg input:focus-visible { outline: none; }
/* 연도 칸은 네 자리라 조금 넓게 */
.numseg input[data-seg="Y"] { flex: 1.7 1 0; }
.numseg input.bad { color: var(--down); }
.numseg .nseg-sep { flex: none; color: var(--faint); font-size: var(--fs-body); font-weight: var(--fw-bold); padding-bottom: var(--sp-1); }

/* '시간 몰라요'가 켜졌을 때 — 비활성이라는 걸 눈으로 알려준다 */
.numseg.off { background: var(--surface); border-color: var(--border); }
.numseg input:disabled { color: var(--faint); cursor: not-allowed; }
.numseg input:disabled::placeholder { color: var(--faint); opacity: .6; }

/* 입력 즉시 뜨는 오류 한 줄 */
.seg-err {
  font-size: var(--fs-caption); color: var(--down); font-weight: var(--fw-bold);
  margin-top: var(--sp-1); line-height: var(--lh-lead);
}
.seg-err[hidden] { display: none; }

/* 앱인토스 웹뷰 — 하단 안전영역 (SPEC §7) */
@supports (padding: max(0px)) {
  .seg-safe-bottom { padding-bottom: max(var(--sp-1), env(safe-area-inset-bottom)); }
}