/* ============================================================================
   hannastudy — 들어가기(게이트) 화면 스타일
   SoT: docs/디자인UX.md(수치·게이트) · docs/배포_운영.md §4.6(엄격 CSP 'self')

   왜 외부 파일인가(엄수):
   - 서버·meta CSP 가 style-src 'self'(=인라인 스타일 차단, 'unsafe-inline' 0).
     CSP 를 강제하는 실제 브라우저에서 <style> 인라인은 차단된다 → 화면이 죽는다.
     그래서 모든 스타일은 self 의 외부 파일(이 파일)로 분리한다(XSS 방어 유지).
   - 전부 tokens.css 파생(리터럴 색·px 폰트크기 직박이 0 = G-TOKEN-2). 클라에 해시·정답 0.
   ============================================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-child);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  background: var(--c-bg);
  padding:
    env(safe-area-inset-top)  env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  overscroll-behavior: none;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  gap: var(--sp-4);
  text-align: center;
}

.lock { width: var(--icon-sz-lg); height: var(--icon-sz-lg); color: var(--c-ink); }
.lock path, .lock rect { fill: none; stroke: currentColor; stroke-width: var(--stroke-2);
                         stroke-linecap: round; stroke-linejoin: round; }

h1 { font-size: var(--fs-child-lg); font-weight: var(--fw-bold); margin: 0; }
.sub { font-size: var(--fs-child); color: var(--c-ink-soft); margin: 0; }

/* 입력 점 표시(숫자 가림): 채워진 만큼 점이 켜짐. */
.dots {
  min-height: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
}
.dot {
  width: var(--sp-3); height: var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--c-surface-sunken);
  border: var(--stroke-1) solid var(--c-border);
}
.dot.on { background: var(--c-primary); border-color: var(--c-primary);
          animation: dotPop var(--dur-fast) var(--ease-emphasized) 1; }
/* 자리 채울 때 살짝 '톡'(눌림 확인 — 즉각 피드백). 부드럽고 짧게(startling 0). */
@keyframes dotPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* 코드 안 맞을 때: 비난 0 — 점들이 부드럽게 '도리도리'(가벼운 좌우 흔들·강한 진동 아님). */
.dots.retry { animation: gentleWobble var(--dur-base) var(--ease-standard) 1; }
@keyframes gentleWobble {
  0% { transform: translateX(0); } 25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); }
}

/* 안내 메시지: 오답도 부드럽게(--c-gentle). 강한 빨강 실패색·금지 표식 안 씀(G-COLOR-3). */
.msg {
  min-height: var(--sp-5);
  font-size: var(--fs-child);
  font-weight: var(--fw-medium);
  color: var(--c-gentle);
}
.msg:empty { visibility: hidden; }

/* 숫자판: 3열. 키 = 일반 컨트롤 ≥60px, 확인(primary) ≥64px(G-TAP-1·G-TAP-4). */
.pad {
  display: grid;
  grid-template-columns: repeat(3, var(--tap-control));
  gap: var(--sp-4);                    /* 인접 간격(겹침 0) */
  justify-content: center;
}
.key {
  height: var(--tap-control);
  min-height: var(--tap-control);
  width: var(--tap-control);
  min-width: var(--tap-control);
  border: var(--stroke-1) solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-numeric);
  font-size: var(--fs-problem);        /* 28~48 대역(36px) */
  font-weight: var(--fw-bold);
  box-shadow: var(--elev-1);
  cursor: pointer;
}
.key:active { transform: translateY(2px); box-shadow: none; }

.key-icon { width: var(--icon-sz); height: var(--icon-sz); display: block; margin: 0 auto; }
.key-icon path { fill: none; stroke: currentColor; stroke-width: var(--stroke-2);
                 stroke-linecap: round; stroke-linejoin: round; }

/* 확인(primary) = 화면당 1개. 64px·강조면색. */
.key.ok {
  height: var(--tap-primary);
  min-height: var(--tap-primary);
  width: var(--tap-primary);
  min-width: var(--tap-primary);
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary);
}
.key.ok:active { background: var(--c-primary-press); }

.key.del { background: var(--c-surface-sunken); }

/* 게이트 모션 정적 등가(의미 손실 0: 점 채움·안내 글로 상태 전달 — 모션은 보조). */
@media (prefers-reduced-motion: reduce) {
  .dot.on { animation: none !important; transform: none !important; }
  .dots.retry { animation: none !important; transform: none !important; }
}