/* frontend/css/home.css — 홈 런처(다섯 진입점) + 화면 상태 셋 (계약 ~/Desktop/control/HOME-LAUNCHER.md, 2026-09-26)
   상태(body, app.js가 관리 — 서로 배타):
     .home-launcher  런처(기본, 문장 없음 · 입력 판면 안 열림)
     .input-open     입력 판면(텍스트 분석 타일)
     .has-sentences  작업(현행 화면 그대로 — 이 파일은 손대지 않는다)
   앱 셸(html.app-shell)은 범위 밖 — 모든 상태 규칙은 html:not(.app-shell)로 게이트, 런처 DOM은 display:none.
   색은 전부 theme.css 토큰(새 리터럴 0).
   v1.1(2026-09-27, 계약 ~/Desktop/control/HOME-DECLARATION.md §1): 평행사변형 판 타일 · 76px 위 정렬 열 · 알약 삭제 ·
   선택 반전(--field) · 아이콘 끔 스탬프. 선언 전환 자체는 css/declaration.css + js/declaration.js. */

/* ===== 런처 DOM 기본: 상태가 켠다 ===== */
#homeLauncher { display: none; }
html:not(.app-shell) body.home-launcher #homeLauncher { display: flex; }
#homeLauncher[hidden] { display: none !important; }
html.app-shell #homeLauncher { display: none !important; }

/* ===== 상태 전이: 무엇이 보이는가 =====
   런처 = 런처만(작업 판면·입력 판면·푸터(폰) 숨김) / 입력 = 입력 판면만(런처 열 폭) / 작업 = 현행 */
html:not(.app-shell) body.home-launcher #app { display: none; }
html:not(.app-shell) body.input-open #app {
  display: block;
  max-width: 640px;
}
html:not(.app-shell) body.input-open #app > :not(#inputPanel) { display: none !important; }

/* 헤더 — 뷰 스위처는 문장이 있을 때만(런처·입력에서 숨김; DOM·폴링 계약은 그대로) */
html:not(.app-shell) body.home-launcher .header-mode-seg,
html:not(.app-shell) body.input-open .header-mode-seg { display: none; }

/* 런처↔입력 전환 페이드 120ms — JS가 전이 때만 body.home-anim을 붙인다(첫 페인트는 즉시). */
@keyframes home-fade-in { from { opacity: 0; } to { opacity: 1; } }
html:not(.app-shell) body.home-anim.home-launcher #homeLauncher,
html:not(.app-shell) body.home-anim.input-open #inputPanel {
  animation: home-fade-in 120ms ease-out both;
}
/* 헤더·푸터 페이드는 끝나면 흔적을 남기지 않는다(backwards) — 채움이 남으면 헤더가 쌓임 맥락이 되어 계정 메뉴가 타일 아래로 깔린다 */
html:not(.app-shell) body.home-anim.home-anim-hdr.home-launcher #header-container,
html:not(.app-shell) body.home-anim.home-anim-hdr.home-launcher #siteFooter {
  animation: home-fade-in 120ms ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.app-shell) body.home-anim.home-launcher #homeLauncher,
  html:not(.app-shell) body.home-anim.input-open #inputPanel,
  html:not(.app-shell) body.home-anim.home-anim-hdr.home-launcher #header-container,
  html:not(.app-shell) body.home-anim.home-anim-hdr.home-launcher #siteFooter { animation: none; }
}
/* 홈 v1.3.2 §9-14 — 작업·리더·이야기에서 홈으로(app.js goHome, body.home-anim-hdr): 헤더 모양이 바뀌는 순간(리더 머리 띠 →
   런처 헤더) 헤더가 옆·아래로 뛰어 보였고, 넓은 화면의 푸터는 긴 글 아래에서 화면 맨 아래로 끌려 올라왔다.
   헤더·푸터도 런처와 같은 120ms 페이드로 들어온다 — 처음 보이는 프레임부터 제자리. */

/* ===== 런처 열 — 폰 포함 공통: 헤더 아래 24px에서 시작하는 위 정렬 열, 타일 76px · 간격 10px =====
   v1.1(HOME-DECLARATION §1): 화면을 채우지 않는다(v1.0의 flex 균등 분할 폐지). 넓은 화면은 폭만 맞춘다(≤640, 중앙).
   헤더 margin-bottom(16/10)과 이 margin-top(24)은 겹쳐 접혀 헤더 아래 24px가 된다. */
#homeLauncher {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin: 24px auto 0;
}

/* ===== 타일: 판(slab)만 -10° 기울고 글자·아이콘은 판 밖 층에 똑바로 =====
   [아이콘 22] [제목 18/700 + 상태 한 줄 13] [꺾쇠 20 | 자물쇠] — 내용 좌우 들여 30/28(사선 모서리 회피), 간격 12.
   판 = 평면 --card · 1px --line-green · 모서리 각짐 · 그림자/그라데이션 없음. 좌우 8px 들여(기울어진 모서리가 열 폭 안). */
.tile {
  position: relative;
  display: block;
  height: 76px;
  padding: 0;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tile-slab {
  position: absolute;
  inset: 0 8px;
  transform: skewX(-10deg);
  background: var(--card);
  border: 1px solid var(--line-green);
  border-radius: 0;
}
.tile-row {
  position: absolute;
  inset: 0 28px 0 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tile-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--green);
}
/* 설정 「아이콘: 끔」 — 아이콘만 숨김(나머지 배치 동일). 스탬프는 theme.js가 첫 페인트 전에 찍는다. */
html[data-home-icons="off"] #homeLauncher .tile-icon { display: none; }

.tile-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 제목 글꼴·굵기 = 선언 글자와 같은 변수(css/declaration.css) — 따로 놀지 않게 */
.tile-title {
  font-family: var(--home-font);
  font-size: 18px;
  font-weight: var(--home-title-weight);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-status {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  min-height: 1.3em;               /* loading = 빈 줄(높이 유지) */
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 상태 줄이 빈 문자열인 타일(sputnik 첫 주 — NOA-MESSENGER-SPUTNIK §5)은 줄을 접어 제목만 세로 가운데에(다른 타일의 제목+상태
   덩어리와 같은 광학 중심). 다섯 타일의 loading 동안 빈 줄은 그대로 둔다 — 응답이 와서 문구가 찰 때 제목이 뛰지 않게(렌더 불변).
   sputnik은 loading에서도 접는다 — 첫 페인트(loading) → open에서 상태 줄이 비어 있는 그대로라 제목이 움직이지 않는다
   (layout-shift 0, e2e_main_nav h15). */
.tile:not([data-state="loading"]) .tile-status:empty,
.tile[data-tile="sputnik"] .tile-status:empty { display: none; }

.tile-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 20px;
}
.tile-chevron, .tile-lock { display: none; }
.tile-chevron { width: 20px; height: 20px; color: var(--green); }
.tile-lock { width: 18px; height: 18px; color: var(--muted); }

/* 상태별 우측 — open = 꺾쇠, login·locked = 자물쇠(알약은 v1.1에서 삭제) */
.tile[data-state="open"] .tile-chevron { display: block; }
.tile[data-state="login"] .tile-lock,
.tile[data-state="locked"] .tile-lock { display: block; }

/* 상호작용 — 판에만 건다. 전이 없음(선택 반전은 즉시). */
@media (hover: hover) and (min-width: 700px) {
  .tile[data-state="open"]:hover .tile-slab { border-color: var(--green); }
}
.tile:not([aria-disabled="true"]):active .tile-slab { background: var(--panel2); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-slab { outline: 2px solid var(--green); outline-offset: 3px; }

/* 선택(open 타일 탭) = 즉시 반전 — 판 --field, 글자·아이콘·꺾쇠 --on-accent. 선언이 끝나면 js/declaration.js가 푼다. */
.tile.is-picked .tile-slab { background: var(--field); border-color: var(--field); }
.tile.is-picked .tile-title,
.tile.is-picked .tile-status,
.tile.is-picked .tile-icon,
.tile.is-picked .tile-chevron { color: var(--on-accent); }

/* 잠김(login·locked) — v1.0 규칙 그대로: 카드보다 한 단계 가라앉은 면 = 페이지 바탕(--bg), 테두리 동일.
   (v1.0 이탈 보고: --panel2는 다크에서 녹색 틴트라 잠긴 타일이 오히려 도드라지고 라이트 상태 줄 대비 미달) */
.tile[data-state="login"] .tile-slab,
.tile[data-state="locked"] .tile-slab { background: var(--bg); }
.tile[data-state="login"] .tile-icon,
.tile[data-state="locked"] .tile-icon,
.tile[data-state="loading"] .tile-icon { color: var(--muted); }
.tile[data-state="login"] .tile-title,
.tile[data-state="locked"] .tile-title { color: var(--muted); }
.tile[aria-disabled="true"] { cursor: default; }

/* ===== sputnik 타일 색(NOA-MESSENGER-SPUTNIK v1.2) — 이 타일만. 다섯 타일 무변경. 토큰 = theme.css --sputnik-*.
   라이트: 판 테두리 SKY · 아이콘·꺾쇠 NAVY · hover 테두리 NAVY · 눌림 TINT · 선택 반전 SKY 판 + NAVY 글자.
   다크: 아이콘·꺾쇠 SKY · 판 테두리 NAVY · hover 테두리 SKY · 눌림 SKY 16% · 선택 반전 NAVY 판 + 흰 글자.
   키보드 포커스 링: 라이트 NAVY · 다크 SKY(공용 --green 대신).
   잠김(login·locked): 판 면·자물쇠·제목은 기존 규칙 그대로, 테두리·아이콘은 sputnik 파랑(10/1 형권님 — 권한·로그인 무관 전용 테두리). */
.tile[data-tile="sputnik"] .tile-slab { border-color: var(--sputnik-sky); }
.tile[data-tile="sputnik"] .tile-icon,
.tile[data-tile="sputnik"] .tile-chevron { color: var(--sputnik-navy); }
@media (hover: hover) and (min-width: 700px) {
  .tile[data-tile="sputnik"][data-state="open"]:hover .tile-slab { border-color: var(--sputnik-navy); }
}
html:not([data-theme="dark"]) .tile[data-tile="sputnik"]:not([aria-disabled="true"]):active .tile-slab { background: var(--sputnik-tint); }
.tile[data-tile="sputnik"].is-picked .tile-slab { background: var(--sputnik-sky); border-color: var(--sputnik-sky); }
.tile[data-tile="sputnik"]:focus-visible .tile-slab { outline-color: var(--sputnik-navy); }
.tile[data-tile="sputnik"].is-picked .tile-title,
.tile[data-tile="sputnik"].is-picked .tile-status,
.tile[data-tile="sputnik"].is-picked .tile-icon,
.tile[data-tile="sputnik"].is-picked .tile-chevron { color: var(--sputnik-navy); }

html[data-theme="dark"] .tile[data-tile="sputnik"] .tile-slab { border-color: var(--sputnik-navy); }
/* 다크 눌림(10/1 형권님 — 초록 번쩍임 제거): 공용 --panel2(= 브랜드 초록 16%)의 sputnik 짝 = SKY 16%. */
html[data-theme="dark"] .tile[data-tile="sputnik"]:not([aria-disabled="true"]):active .tile-slab { background: rgba(133, 198, 240, 0.16); }
html[data-theme="dark"] .tile[data-tile="sputnik"] .tile-icon,
html[data-theme="dark"] .tile[data-tile="sputnik"] .tile-chevron { color: var(--sputnik-sky); }
@media (hover: hover) and (min-width: 700px) {
  html[data-theme="dark"] .tile[data-tile="sputnik"][data-state="open"]:hover .tile-slab { border-color: var(--sputnik-sky); }
}
html[data-theme="dark"] .tile[data-tile="sputnik"]:focus-visible .tile-slab { outline-color: var(--sputnik-sky); }
html[data-theme="dark"] .tile[data-tile="sputnik"].is-picked .tile-slab { background: var(--sputnik-navy); border-color: var(--sputnik-navy); }
html[data-theme="dark"] .tile[data-tile="sputnik"].is-picked .tile-title,
html[data-theme="dark"] .tile[data-tile="sputnik"].is-picked .tile-status,
html[data-theme="dark"] .tile[data-tile="sputnik"].is-picked .tile-icon,
html[data-theme="dark"] .tile[data-tile="sputnik"].is-picked .tile-chevron { color: #ffffff; }

/* ===== 학습 통계 타일(STATS-TILE-UNLOCK §6, 2026-10-10) — 일반 타일 규격. 이 타일만의 상태 = challenge(개방 요건 진행).
   challenge: 판 = --bg와 --card의 중간(잠김보다 한 단계 떠 있고 열림보다 가라앉음) · 아이콘 --green · 제목 --text ·
   상태 줄 「개방 요건: 연속 학습 N / 20일」(N만 --green 600 고정폭 숫자) · 우측 자물쇠(--muted) · 탭 무동작(aria-disabled).
   진행선(B안): 판 안 바닥 3px 트랙(--line-green) + 채움(--green, 너비 N/20 — homeLauncher.js). 판의 skew를 그대로 따르고
   판 밖으로 넘치지 않는다(overflow hidden). 선택 반전·hover는 open에만(기존 규칙 그대로). */
.tile[data-state="challenge"] .tile-slab {
  background: color-mix(in srgb, var(--bg) 50%, var(--card));
  overflow: hidden;
}
.tile[data-state="challenge"] .tile-lock { display: block; }
.tile[data-state="challenge"] { cursor: default; }
.tile-progress { display: none; }
.tile[data-state="challenge"] .tile-progress {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line-green);
}
.tile-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
}
.tile-num {
  color: var(--green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ===== 학습 통계 v1.1(STATS-TILE-UNLOCK §11-1·§11-2, 2026-10-11) =====
   「개방됨」 — 꺾쇠 바로 왼쪽(간격 8px) 맨 글자 18px · 600 · --green · skewX(-10deg)(가짜 이탤릭 금지) · 배경·테두리 없음 ·
   line-height 1 · nowrap · 줄이지 않는다(상태 줄이 말줄임). 개방 기록 사용자의 첫 열람 전(homeLauncher.js가 is-fresh).
   개방 모션(js/statsUnlock.js): data-unlock="hold" = 20/20(challenge 그대로) 머묾 → "go" = 실제 open으로 바꾸되 시작 모습은
   challenge(중간색 판·진행선 가득·자물쇠·옛 상태 줄)로 두고, su-on에서 끝 모습으로 전이 — 판 600 · 진행선 600 · 자물쇠↔꺾쇠 400 ·
   상태 줄 교차 400 · 「개방됨」 페이드인 400. 동작 줄이기면 js가 모션 없이 바로 연다(전이 규칙도 끈다). */
.tile-new {
  display: none;
  flex: 0 0 auto;
  margin-right: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--green);
  white-space: nowrap;
  transform: skewX(-10deg);
}
.tile[data-tile="stats"][data-state="open"].is-fresh .tile-new { display: block; }
.tile.is-picked .tile-new { color: var(--on-accent); }

.tile[data-unlock] { cursor: default; }
.tile[data-unlock="go"] .tile-slab {
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 50%, var(--card));
  transition: background-color 600ms ease;
}
.tile[data-unlock="go"].su-on .tile-slab { background: var(--card); }
.tile[data-unlock="go"] .tile-progress {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line-green);
  transition: opacity 600ms ease;
}
.tile[data-unlock="go"] .tile-progress-fill { width: 100% !important; }
.tile[data-unlock="go"].su-on .tile-progress { opacity: 0; }
.tile[data-unlock="go"] .tile-end { position: relative; }
.tile[data-unlock="go"] .tile-lock {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -9px;
  transition: opacity 400ms ease;
}
.tile[data-unlock="go"] .tile-chevron { opacity: 0; transition: opacity 400ms ease; }
.tile[data-unlock="go"].su-on .tile-lock { opacity: 0; }
.tile[data-unlock="go"].su-on .tile-chevron { opacity: 1; }
.tile[data-unlock="go"] .tile-new { opacity: 0; transition: opacity 400ms ease; }
.tile[data-unlock="go"].su-on .tile-new { opacity: 1; }
.tile[data-unlock="go"] .tile-status { position: relative; }
.tile .su-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 400ms ease; }
.tile .su-s.su-to { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.tile.su-on .su-s.su-from { opacity: 0; }
.tile.su-on .su-s.su-to { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tile[data-unlock] .tile-slab, .tile[data-unlock] .tile-progress, .tile[data-unlock] .tile-lock,
  .tile[data-unlock] .tile-chevron, .tile[data-unlock] .tile-new, .tile .su-s { transition: none; }
}

/* ===== 폰(<700) — 열은 위 정렬(화면을 채우지 않는다). 375×660 사파리 최악에서도 다섯 타일 + 스크롤 0.
   푸터는 폰 런처에서 빠진다(계정 메뉴 「서비스 소개」가 보상). 그 밖의 폰 요소는 #app 안이라 함께 숨는다. */
@media (max-width: 699px) {
  /* 이야기·책을 여는 중(body.story-opening·book-opening — 리더 판면이 먼저 선다)에는 리더의 여백 규칙이 이긴다 */
  html:not(.app-shell) body.home-launcher:not(.story-opening):not(.book-opening) { padding-bottom: calc(16px + var(--safeBottom, 0px)); }
  html:not(.app-shell) body.home-launcher #homeLauncher { max-width: none; }
  html:not(.app-shell) body.home-launcher #siteFooter { display: none; }
}

/* 짧은 화면(일곱 타일 — STATS-TILE-UNLOCK §7): 76×7 + 10×6 = 592px는 375×660(사파리 최악)에서 넘친다 → 이 범위만 타일 70px ·
   간격 8px(538px). 390×844 등 일반 폰·데스크톱은 76/10 그대로, ≤520은 아래 압축 모드(56px). 폭 무관.
   body.home-launcher로 게이트하지 않는다 — 복귀 전환(body.decl-return 등) 중에도 같은 치수여야 도착 순간 타일이 뛰지 않는다(h15). */
@media (max-height: 700px) and (min-height: 521px) {
  html:not(.app-shell) #homeLauncher { gap: 8px; }
  html:not(.app-shell) #homeLauncher .tile { height: 70px; }
}

/* 압축 모드(짧은 화면, 폭 무관 — 폰 가로 모드 포함) — v1.0 규칙: 상태 줄 없이 제목만, 타일 56px. 이때만 스크롤 허용. */
@media (max-height: 520px) {
  html:not(.app-shell) body.home-launcher .tile-status { display: none; }
  html:not(.app-shell) body.home-launcher .tile { height: 56px; }
}

/* ===== 홈 v1.3 (계약 ~/Desktop/control/HOME-DECLARATION.md §9-1·§9-7) ===== */
/* §9-1 문맥 홈 버튼(‹) 폐지 — 홈 복귀는 워드마크 「은하」가 전담. id·DOM·goHome 계약은 그대로 두고 보이지만 않게
   (app.js syncHomeBtn이 인라인 display를 켜도 이 규칙이 이긴다). 앱 셸은 원래 숨긴다(무접촉). */
html:not(.app-shell) #homeBtn { display: none !important; }

/* §9-7 사이트 푸터 = 화면 최하단(sticky footer) — body를 세로 flex(최소 높이 100dvh는 main.css), 푸터 바로 앞의
   빈 칸(.site-footer-spacer)이 남는 높이를 먹는다. 내용이 짧으면 푸터가 뷰포트 맨 아래, 길면 내용 뒤(푸터의 위 여백
   40px 그대로). position:fixed 아님 — 내용을 가리지 않는다. 푸터의 표시·숨김 규칙은 그대로(폰 런처 숨김 등). */
html:not(.app-shell) body { display: flex; flex-direction: column; }
html:not(.app-shell) .site-footer-spacer { flex: 1 0 0; }
/* flex 항목의 가로 auto 여백은 늘이기를 끈다 — 가운데 정렬 상자가 폭을 잃지 않게(런처·리더는 이미 width:100%) */
html:not(.app-shell) body > #app { width: 100%; }
/* 넓은 화면(>980)의 body 아래 여백 18px은 푸터 밑에 남는 틈이었다 — 푸터가 화면 맨 아래에 닿도록 0
   (≤980은 mobile.css가 이미 정한다: 빈 상태 0 · 문장 있음 = 하단 바 자리) */
@media (min-width: 981px) { html:not(.app-shell) body { padding-bottom: 0; } }
/* flex 항목은 여백이 겹쳐 접히지 않는다 — 머리 아래 여백(16/10)과 런처 위 여백(24)이 더해지지 않게 런처에서는 머리 쪽을 0
   (런처 = 헤더 아래 24px, v1.1 §1 그대로) */
html:not(.app-shell) body.home-launcher #mainHeader { margin-bottom: 0; }

/* 선언 복귀 중(js/declaration.js, body.decl-return) — 런처는 옆에서 밀려 들어온다. 입력 판면은 제자리에 고정된 채
   오른쪽으로 빠지고(판면이 흐름에서 빠진 자리에 런처가 선다), 머리도 처음부터 런처 모양(‹홈·기록 없음).
   전환 페이드(home-anim)와 겹치지 않게 끈다. */
html:not(.app-shell) body.decl-return #homeLauncher { display: flex; animation: none !important; }
/* 복귀 중 헤더 아래 여백 = 런처 값(0) — 입력 판면의 헤더 여백(폰 10·넓은 화면 16px)이 남아 런처가 그만큼 낮게 들어왔다가
   끝나는 순간(goHome → home-launcher) 위로 튀었다(홈 v1.3.2 §9-14). 판면은 제자리에 fixed로 고정돼 있어 영향 없다. */
html:not(.app-shell) body.decl-return #mainHeader { margin-bottom: 0; }
html:not(.app-shell) body.decl-return #homeBtn,
html:not(.app-shell) body.decl-return #historyNavBtn { display: none !important; }

/* ===== 라이카 「조우」 진입(LAIKA-ENCOUNTER §1, 2026-10-19) =====
   index.html 머리 스크립트가 ?laika=encounter면 html[data-laika="encounter"]를 첫 페인트 전에 찍는다(앱 셸 제외).
   그동안 바탕은 처음부터 검정(--d-field)이고 런처·헤더는 자리만 지킨 채 보이지 않는다(visibility — 홈 페인트는 평소대로
   진행되고 가려질 뿐). 장면 층(.laika)은 <html> 직속이라 이 규칙 밖. 표식은 js/laika/encounter.js가 걷는다.
   v1.5 §1: 장면 바탕 캔버스가 첫 불투명 프레임을 칠한 직후 엔진이 표식 값을 "lit"으로 바꾼다 → 아래 규칙(값 "encounter")이 풀려
   런처가 캔버스 아래에 평소대로 그려지고 별 구멍으로 비친다. 게이트 실패 땐 지금처럼 표식 자체를 걷는다. */
html[data-laika="encounter"]:not(.app-shell),
html[data-laika="encounter"]:not(.app-shell) body { background: var(--d-field) !important; }  /* mobile.css 폰 html,body !important 위 */
html[data-laika="encounter"]:not(.app-shell) body > * { visibility: hidden !important; }