/* frontend/css/declaration.css — 시스템 선언의 판·글자 (계약 ~/Desktop/control/HOME-DECLARATION.md §3, 2026-09-27)
   index.html(런처 쪽, js/declaration.js)과 도착 페이지 korzina·book·workbench(js/declArrive.js)가 함께 읽는다.
   층(.decl)은 스크립트가 <html>의 자식으로 붙인다 — body가 움직여도(도착 화면 넘김) 판은 뷰포트에 고정.
   움직임은 전부 스크립트의 Web Animations(transform·opacity만). 여기는 정지 상태의 모양만 둔다.
   앱 셸(html.app-shell)에서는 스크립트가 층을 만들지 않는다. */

/* 선언 글꼴 = 타일 제목과 같은 글꼴·같은 굵기 — 한 변수로 묶는다(css/home.css .tile-title이 같은 변수를 쓴다).
   값은 index 본문 글꼴(main.css body)과 같은 목록이라 타일 제목의 외관은 종전 그대로다. */
:root {
  --home-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --home-title-weight: 700;
}

/* 처음 크기는 뷰포트(inset:0). 스크립트(build)가 잰 뒤 그 px(left/top 0 · width/height)로 못박는다 —
   넘김 중 레이아웃 뷰포트가 흔들려도 층·글자 자리가 그대로이게(검수 B1). */
.decl {
  position: fixed;
  inset: 0;
  z-index: 2147483000;           /* 모달·토스트·시트 위 — 판이 화면 전체를 덮는다 */
  overflow: hidden;
  pointer-events: auto;          /* 선언 중 아래 화면 입력 차단 + 판 누르기 = 건너뛰기 */
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.decl[hidden] { display: none; }

/* 판 — 기하(left·width)는 스크립트가 뷰포트로 계산: 뷰포트를 -10°로 빈틈없이 덮는 평행사변형.
   색 토큰은 theme.css가 정본. korzina.html은 theme.css를 읽지 않으므로(K-1 결정: 단어장은 iOS 팔레트)
   그 페이지에서만 var()의 대체값으로 같은 세 값을 받는다 — 새 색이 아니라 theme.css와 같은 값. */
.decl-plate {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.decl[data-mode="door"] .decl-plate { background: var(--decl-door, var(--field, #1f6f1f)); }
.decl[data-mode="slash"] .decl-plate {
  background: var(--decl-slash, var(--d-field, #0b0f0c));
  transform: skewX(-10deg);
}

/* 상태 막대 흐림(계약 §9-20) — 층(.decl)은 스크립트가 visibility:hidden으로 두고 판·글자·방패만 보인다. iOS 26(홈 화면
   웹 앱)은 윗변에 닿은 보이는 고정 요소의 색으로 상태 막대를 단색으로 칠하는데, 숨은 층은 표본이 되지 않으므로 판은 평범한
   화면 내용처럼 평소의 흐림 밑을 지나간다. 방패 = 숨은 층 대신 아래 화면 입력을 막는 투명 전면 상자(투명은 표본이 아니다). */
.decl-shield {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
}
/* 문서 간 도착 페이지: 선언 동안 body 배경 = 런처에서 누르기 전 색(흐림 색이 페이지 교체에서 바뀌지 않게). 판에 가려 보이지
   않고, 넘김 +60ms(판이 윗변을 드러내기 시작하는 순간 — 곡선상 +48~138ms)에 한 번에 풀린다(js/declArrive.js tintOff).
   전환(transition)은 주지 않는다: 넘김 동안 body는 position:fixed로 못박혀(slidePage) iOS가 띠 표본으로 삼는데, 전환 중간색을
   한 번 잡으면 그 색에 멈춘다(실측 — 실기 (220,227,220) 고착, 시뮬레이터 4/4 재현). 한 번에 바뀌면 끝 색이 정확하다. */
html[data-decl-tint] body { background-color: var(--decl-tint) !important; }

/* 선언별 색(층 data-name = 선언 이름, js/declArrive.js build) — 기본은 위의 초록 판·흰 글자(다섯 선언 무변경).
   sputnik(NOA-MESSENGER-SPUTNIK v1.2): 문(라이트) = SKY 판·NAVY 글자, 베기(다크) = NAVY 판·흰 글자.
   런처 쪽과 도착 페이지(sputnik.html)가 같은 규칙을 읽으므로 이음매 색이 같다. 움직임·시각·크기는 공용 그대로. */
.decl[data-name="sputnik"] {
  --decl-door: var(--sputnik-sky, #85C6F0);
  --decl-slash: var(--sputnik-navy, #3A4B81);
  --decl-ink: var(--sputnik-navy, #3A4B81);
}
.decl[data-name="sputnik"][data-mode="slash"] { --decl-ink: #ffffff; }

/* 글자 — `{name} system` 한 낱말(같은 크기·굵기·색). 크기(--decl-fs)와 한 줄/두 줄은 스크립트가 정한다. */
.decl-words {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24%;
  margin: 0;
  font-family: var(--home-font);
  font-weight: var(--home-title-weight);
  font-style: normal;
  font-size: var(--decl-fs, 88px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--decl-ink, var(--d-ink, #f2f5f2));
  opacity: 0;
  will-change: transform, opacity;
}
.decl-words span { display: block; }
.decl-words.one-line span { display: inline; }

/* sputnik 선언의 위성(NOA-MESSENGER-SPUTNIK §10) — 글자 요소 안(같은 transform 묶음), 문구 바로 위·왼쪽 끝 정렬.
   상자 = 정사각 --decl-sat = 0.85·min(W−48, H−48), 구체 왼쪽 = 문구 왼쪽(--decl-sat-left), 맨 아래 안테나 2/3 지점 = 문구 윗변(--decl-sat-top), 문구 뒤(10/1 §10 개정, declArrive fit()이 계산), 문구 상자 윗변과의 간격 = 글자 크기 0.12배. 두 줄이면 두 줄 위(문구 상자 = 두 줄).
   색 = 글자색 상속(currentColor — 라이트 네이비·다크 흰색). 흐름 밖(absolute)이라 문구 배치·크기 계산은 그대로. */
.decl-sat {
  position: absolute;
  left: var(--decl-sat-left, 0);
  top: var(--decl-sat-top, -200px);
  width: var(--decl-sat, 200px);
  height: var(--decl-sat, 200px);
  z-index: -1; /* 문구 뒤 — .decl-words가 transform으로 쌓임 문맥을 만들므로 판 위·글자 아래 */
  display: block;
  overflow: visible;
}

/* 폭 측정용(보이지 않음) — 다섯 선언을 같은 크기로 맞추는 기준 */
.decl-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  font-family: var(--home-font);
  font-weight: var(--home-title-weight);
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 공용 「은하」 홈 버튼(홈 v1.3 §9-2) — index 머리 워드마크(main.css .header-wordmark a#brandHome)와 같은 모양:
   글꼴(--home-font = index 본문 글꼴)·크기 20px(<700 18px)·굵기 800·자간 0.2px·색 --green·여백 4px 6px.
   표적은 40px 높이로 넓힌다(글자 자리는 같다). 작업대 문서 목록·책 목록 좌상단. 누르면 공용 길(§9-13, js/declArrive.js
   [data-eunha-home] 위임 — location.replace('/'): 뒤로가기로 이 화면에 돌아오지 않게). 앱 셸에는 없다. */
.eunha-home {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 8px;
  font-family: var(--home-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--green);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}
.eunha-home:hover { background: rgba(var(--green-rgb), 0.08); }
.eunha-home:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.eunha-home[hidden] { display: none; }
@media (max-width: 699px) { .eunha-home { font-size: 18px; } }
html.app-shell .eunha-home { display: none; }

/* 넘김·복귀 동안 가로 넘침 막기(js/declArrive.js clipX) — 옆으로 밀린 화면이 문서 폭을 키우면 모바일 레이아웃 뷰포트가
   넓어진다(375→453). html·body 둘 다 필요하다(한쪽만으로는 크롬 모바일에서 여전히 커진다 — 실측).
   clip은 스크롤 컨테이너를 만들지 않아 sticky 머리·스크롤 위치가 그대로다. */
html.decl-clip,
html.decl-clip body { overflow-x: clip; }