/* frontend/css/laika.css — 라이카 「조우」 장면 층 (계약 ~/Desktop/control/LAIKA-ENCOUNTER.md §2 + v1.1 §A + v1.2 §A + v1.5 §1, 2026-10-20)
   층(.laika)은 js/laika/encounter.js가 <html>의 자식으로 붙인다(선언 층과 같은 방식) — 홈 런처 위를 덮는 한 장.
   색은 전부 theme.css 토큰. 스크립트가 장면 시작 순간의 토큰 값을 층에 --lk-* 로 못박는다(장면 중 테마 전환 무시, §5) —
   못박기 전·실패 때는 토큰 그대로(var 폴백). 새 리터럴 색 없음 — 예외 하나: 대사 창 color-mix 미지원 폴백
   rgba(11,15,12,.88)(= --d-field 88%, 계약 v1.1 §A가 허용).
   두 단계: 꺼짐(data-phase="off", 비트 0~3·13) = --d-field 바탕 / 켜짐(data-phase="on", 비트 4~12) = --bg 바탕.
   전환은 컷(transition 없음). 화면 밖 런처 첫 페인트 가림은 css/home.css(html[data-laika]).
   v1.1: ADV 창(목업 ~/Desktop/laika/design/encounter-adv-20261020/) — 초상은 층 아래쪽(대사 창 뒤), 아래 대사 창(양 테마 공통
   어두운 판)·이름표·▼, 선택지는 덮개 위 가운데.
   v1.2 §A: 꺼짐 단계의 콘솔·블록 커서 폐지 — 대사 창은 비트 0부터 두 단계 모두에 있고, 키릴(비트 1·2)·첫 한국어(비트 3)도
   대사 창 안에 찍힌다(줄 교체). 단계가 바꾸는 것은 층 바탕과 초상뿐.
   v1.5 §1: 바탕(꺼짐 --d-field / 켜짐 --bg)·초상·알갱이는 전부 전면 캔버스 .laika-field(스크립트가 칠한다). 초상 전용 캔버스
   (.laika-portrait)는 없어졌다.
   v1.6 §C: 구멍 폐지 — 층은 다시 불투명. 캔버스는 매 프레임 전면을 불투명으로 칠하고(clearRect 없음, 별 = 잉크 점), 층 루트도 단계
   바탕색을 다시 가진다(캔버스가 없거나 칠하기 전에도 아래 홈이 비치지 않게).
   쌓임: 바탕 캔버스 0 < 덮개 2 < 대사 창 3 < 선택지 4 (목업과 같이 대사 창은 덮개 위). */

.laika {
  position: fixed;
  inset: 0;
  z-index: 2147483100;            /* 선언 층(.decl 2147483000) 위 */
  overflow: hidden;
  background: var(--lk-field, var(--d-field));   /* v1.6 §C — 불투명(그림은 .laika-field 캔버스가 위에 칠한다) */
  color: var(--lk-ink, var(--d-ink));
  font-family: var(--home-font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.laika[data-phase="on"] { color: var(--lk-text, var(--text)); background: var(--lk-bg, var(--bg)); }   /* 바탕 = v1.6 §C(캔버스와 같은 값) */

/* 바탕 캔버스(v1.5 §1) — 층 전체, 백킹은 스크립트가 뷰포트 × DPR로. 초상(가운데·아래 22%·폭 84% 상한 420px)도 여기에 칸 단위로. */
.laika-field {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* safe-area 인셋 재기(보이지 않음) — 화면 안 출발 칸에서 뺀다(v1.5 §2) */
.laika-safe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* 자막 줄 — 대사 창 본문(줄마다 교체, 3줄 자리). 두 단계 공통(v1.2 §A). 키릴 줄(비트 1·2)은 불투명도 .6(v1 §2 유지). */
.laika-lines {
  min-height: calc(3 * 1.6em);
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.laika-line { min-height: 1.6em; }
.laika-line.is-dim .laika-text { opacity: .6; }   /* 키릴 줄(비트 1·2)과 dim 줄(비트 3, v1.4 §A) — 같은 음영 */

/* 1Hz 깜빡임(steps) — ▼ */
@keyframes laika-blink { 50% { opacity: 0; } }

/* 대사 창 — 두 단계 모두(v1.2 §A: 비트 0부터), 양 테마 공통: --d-field 88% 판 · --d-ink 글자 · 윗변 1px(--d-ink 35%) · 둥글기 0.
   폭은 좌우 12px 안쪽(넓은 화면 상한 640px 가운데), 높이 층의 27%, 아래 16px + 홈 막대 인셋. */
.laika-box {
  display: block;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  height: 27%;
  max-width: 640px;
  margin: 0 auto;
  z-index: 3;
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(11, 15, 12, .88);                                   /* = --d-field 88% (color-mix 미지원 폴백, 계약 §A) */
  background: color-mix(in srgb, var(--lk-field, var(--d-field)) 88%, transparent);
  color: var(--lk-ink, var(--d-ink));
}
.laika-box::before {                    /* 윗변 1px — 글자색 35% */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--lk-ink, var(--d-ink));
  opacity: .35;
  pointer-events: none;
}
.laika-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: normal;              /* 목업과 같은 줄 높이 */
  margin-bottom: 8px;
  min-height: 1.2em;                /* 이름이 비어 있을 때(비트 0·4)도 본문 자리 고정 */
}
.laika-body { font-size: 16px; line-height: 1.6; }

/* 다음 신호 ▼ — 줄이 다 찍히고 음성이 끝난 뒤에만(.is-ready, 비트 0은 시작 탭 대기), 오른쪽 아래, 1Hz 깜빡임.
   찍는 동안·음성 중·정렬 중·선택지 동안은 없다. 두 단계 공통(v1.2 §A). */
.laika-next {
  display: none;
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 12px;
  line-height: 1;
  opacity: .85;
}
.laika.is-ready .laika-next { display: block; animation: laika-blink 1s steps(1, end) infinite; }

/* 선택지(비트 10, v1.4 번호) — 줄이 끝나면 층 전체에 --d-field 45% 덮개, 그 위 가운데(top 46%, 좌우 24px) 세로 쌓기 버튼.
   버튼 = --d-ink 판 · --d-field 글자 16px · 둥글기 6px · 가운데 정렬, 눌림 = 불투명도 .8. 덮개 탭은 진행하지 않는다. */
.laika-dim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--lk-field, var(--d-field));
  opacity: .45;
}
.laika-choices {
  display: none;
  position: absolute;
  left: 24px;
  right: 24px;
  top: 46%;
  max-width: 640px;
  margin: 0 auto;
  z-index: 4;
  flex-direction: column;
  gap: 12px;
}
.laika.is-choosing .laika-dim { display: block; }
.laika.is-choosing .laika-choices { display: flex; }
.laika-choice {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--lk-ink, var(--d-ink));
  color: var(--lk-field, var(--d-field));
  font: inherit;
  font-size: 16px;
  line-height: normal;              /* 목업과 같은 버튼 높이 */
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.laika-choice:active,
.laika-choice.is-pressed { opacity: .8; }
.laika-choice:focus { outline: none; }
.laika-choice:focus-visible { outline: 1px solid var(--lk-ink, var(--d-ink)); outline-offset: 2px; }

/* 컷(비트 15 끝, v1.4 번호) — 층 전체가 검정(바탕 캔버스가 --d-field로 칠해짐, 잉크 점 포함 전부), 자막·대사 창·덮개·선택지가
   같은 순간 사라진다. 바탕 캔버스만 남는다. */
.laika.is-cut > :not(.laika-field) { visibility: hidden; }