/* 고요사 — 모바일 먼저, PC에서도 단정하게
   원칙: 3D 화면 가운데는 비워 둔다 · 손가락 닿는 곳은 44px 이상 · 흐림(backdrop-filter) 없음
         움직임은 느리고 부드럽게, prefers-reduced-motion이면 멈춘다 */
:root {
  --paper: #f7f2e7;
  --paper-2: #fffdf7;
  --ink: #26332e;
  --ink-soft: #59645c;
  --line: rgba(60, 50, 40, 0.16);
  --accent: #254f43;
  --accent-ink: #fff8ec;
  --gold: #ffe2b0;
  /* 흐림 대신 단색 반투명: 모바일 GPU가 뒤 화면을 다시 그리지 않는다 */
  --glass: rgba(22, 26, 27, 0.62);
  --glass-2: rgba(22, 26, 27, 0.48);
  --glass-line: rgba(255, 244, 222, 0.14);
  --glass-ink: #f7f1e3;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --st: max(10px, env(safe-area-inset-top));
  --sb: max(10px, env(safe-area-inset-bottom));
  --sl: max(12px, env(safe-area-inset-left));
  --sr: max(12px, env(safe-area-inset-right));
  --dock-h: 62px;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1f2a2e;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #277e65; outline-offset: 3px; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* 48차: 3D가 준비되기 전 바탕 그림. 3D 첫 프레임 뒤 .gone으로 걷힌다 (카드·HUD보다 아래, 3D 화면보다 위) */
#backdrop48 { position: fixed; inset: 0; background: #1f272c center / cover no-repeat; pointer-events: none; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
#backdrop48.gone { opacity: 0; visibility: hidden; }

/* ---------- 시트: 아래에서 올라온다 (한 손 엄지로) ---------- */
.sheet-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(14, 16, 18, 0.42);
  z-index: 20;
  animation: fade 0.28s ease-out;
}
.sheet {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - var(--st) - 14px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  padding: 26px 20px calc(var(--sb) + 14px);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
  animation: rise 0.36s var(--ease);
}
/* 손잡이 */
.sheet::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  width: 38px; height: 4px;
  margin-left: -19px;
  border-radius: 4px;
  background: rgba(60, 50, 40, 0.18);
}
.sheet.center { text-align: center; }
@keyframes rise { from { transform: translateY(28px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

.eyebrow { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.12em; color: var(--ink-soft); }
h1 { margin: 0 0 8px; font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: 0.08em; }
h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; font-weight: 700; }
h3.group { margin: 16px 0 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-soft); }
.lede { margin: 0 0 16px; line-height: 1.65; color: var(--ink-soft); font-size: 15px; word-break: keep-all; }
.lede.tight { margin-bottom: 4px; font-size: 14px; }
.fine { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; word-break: keep-all; }
.muted { color: var(--ink-soft); font-weight: 400; font-size: 12px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 14px; margin-bottom: 8px; }
.field em { font-style: normal; font-weight: 700; color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
input:not([type]), input[type="text"], textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 16px;
  outline: none;
  min-height: 44px;
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: none; line-height: 1.5; }
.counter { text-align: right; font-size: 12px; color: var(--ink-soft); margin: 4px 0 12px; }
.scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
.chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

button.primary, button.ghost {
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 46px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.2s;
}
button.primary { background: var(--accent); color: var(--accent-ink); }
button.primary:active, button.ghost:active { transform: scale(0.98); }
button.primary.big { width: 100%; font-size: 17px; padding: 14px; margin-top: 4px; min-height: 52px; }
button.ghost { background: transparent; border-color: var(--line); white-space: normal; max-width:100%; overflow-wrap:anywhere; }
button.ghost.light { color: var(--glass-ink); border-color: rgba(255, 255, 255, 0.3); padding: 8px 18px; }
button.ghost.wide { width: 100%; margin-top: 8px; }
button.ghost.small { padding: 6px 14px; font-size: 13px; margin-top: 10px; min-height: 40px; }
button:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) {
  button.ghost:hover { background: rgba(60, 50, 40, 0.06); }
  button.primary:hover { background: #1b4035; }
}

.scale-chips { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.scale-chips button {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2);
  font-size: 14px; cursor: pointer; padding: 0;
}
.scale-chips button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.profile { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 6px; }
.profile summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 12px 0; min-height: 44px; }
.profile[open] summary { margin-bottom: 6px; }

/* ---------- 위: 시계 · 함께 있는 사람 · 소리/도움/나가기 ---------- */
#hud {
  position: fixed;
  top: var(--st);
  left: var(--sl); right: var(--sr);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  z-index: 10;
  pointer-events: none;
}
#hud button { pointer-events: auto; }
.hud-left {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  padding: 6px 12px 7px 8px;
  border-radius: 16px;
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  color: var(--glass-ink);
}
.hud-right { display: flex; gap: 6px; }
button.icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-2);
  color: var(--glass-ink);
  border: 1px solid var(--glass-line);
  cursor: pointer;
  padding: 0;
}
button.icon svg { width: 21px; height: 21px; fill: currentColor; }
button.icon svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.icon svg.stroke .dot { fill: currentColor; stroke: none; }
button.icon.off #soundWave { display: none; }
button.icon.off { opacity: 0.7; }
@media (hover: hover) { button.icon:hover { background: var(--glass); } }

/* 해와 달 시계 */
.clock { display: flex; align-items: center; gap: 8px; }
.clock-face { width: 52px; height: 28px; flex: none; overflow: visible; }
.clock-arc { fill: none; stroke: rgba(255, 236, 200, 0.55); stroke-width: 1.1; stroke-dasharray: 2 2.4; }
.clock-horizon { stroke: rgba(255, 236, 200, 0.4); stroke-width: 1; }
.orb { transition: transform 1.2s var(--ease); }
.sun { fill: #ffcf7a; }
.sun-halo { fill: rgba(255, 207, 122, 0.22); }
.moon { display: none; }
.moon-lit { fill: #f3ead2; }
.moon-shade { fill: #2b3236; }
.clock.night .sun, .clock.night .sun-halo { display: none; }
.clock.night .moon { display: inline; }
.clock.night .clock-arc { stroke: rgba(190, 200, 230, 0.35); }
.clock-text { display: flex; flex-direction: column; line-height: 1.2; }
.clock-name { font-family: var(--serif); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; white-space: nowrap; }
.clock-time { font-size: 11.5px; opacity: 0.72; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.room { font-size: 11.5px; opacity: 0.78; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.room small { opacity: 0.85; font-size: inherit; }
body.no-clock .clock { display: none; }
body.no-clock .hud-left { padding: 9px 12px; }

/* ---------- 좋은 말씀: 위쪽 가운데 작은 명조 한 줄 ---------- */
.saying {
  position: fixed;
  left: 50%;
  top: calc(var(--st) + 66px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  margin: 0;
  padding: 7px 14px;
  border-radius: 14px;
  background: rgba(22, 26, 27, 0.34);
  color: #fbf4e4;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease, visibility 0s linear 1.6s;
}
.saying.show { opacity: 1; visibility: visible; transition: opacity 1.6s ease, visibility 0s; }
/* 42차: 말씀 출처 (법구경·숫타니파타·선사 이름) */
.saying .saying-src { display: inline-block; opacity: .68; font-size: .82em; letter-spacing: 0; white-space: nowrap; }
body:not(.ui-in) .saying, body.no-sayings .saying,
body.ui-sheet .saying, body.ui-practice .saying, body.ui-breath .saying, body.ui-toast .saying, body.ui-card .saying, body.calm .saying,
body.ui-invite .saying /* 48차 (검토: 도착 권유 카드 밑으로 말씀 글이 비쳤다) */,
body:has(#hint:not([hidden])) .saying /* 48차: 폰에서 걷기 안내와 말씀이 위에서 겹쳤다 */ {
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* ---------- 알림 ---------- */
.toast {
  position: fixed;
  top: calc(var(--st) + 66px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  background: rgba(24, 30, 28, 0.78); /* 47차 (검토 3인): 반투명 유리가 밝은 바위·하늘 위에서 읽히지 않았다 */
  background: rgba(22, 28, 26, 0.9); box-shadow: 0 2px 12px rgba(0,0,0,.28); /* 48차 (검토: 숲 위 길 안내 알림이 거의 안 보였다) */
  color: #fbf6ea;
  padding: 9px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  z-index: 15;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
  transition: opacity 0.6s;
  animation: fade 0.5s ease-out;
}
.hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sb) + var(--dock-h) + 72px);
  width: max-content;
  max-width: calc(100vw - 40px); margin: 0;
  color: var(--glass-ink); font-size: 14px; text-align: center; word-break: keep-all;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); z-index: 9; pointer-events: none;
  transition: opacity 0.8s;
}

/* ---------- 가까이 가면 떠오르는 버튼 ---------- */
.ctx {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sb) + var(--dock-h) + 18px);
  transform: translate(-50%, 10px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  width: max-content;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.ctx.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.45s ease, transform 0.45s var(--ease), visibility 0s; }
.ctx.show > * { pointer-events: auto; }
body:not(.ui-in) .ctx, body.ui-sheet .ctx, body.ui-practice .ctx, body.ui-breath .ctx, body.calm .ctx { opacity: 0; visibility: hidden; }
body:not(.ui-in) .ctx > *, body.ui-sheet .ctx > *, body.ui-practice .ctx > *, body.ui-breath .ctx > *, body.calm .ctx > * { pointer-events: none; }
.ctx button {
  flex-shrink: 0;
  min-height: 48px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-main {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(255, 236, 200, 0.6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}
.ctx-main b { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; }
.ctx-main small { font-size: 12px; color: var(--ink-soft); }
.ctx-main kbd { display: none; }
.ctx-more {
  padding: 8px 15px;
  background: var(--glass);
  color: var(--glass-ink);
  border: 1px solid var(--glass-line);
  font-size: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .ctx-main kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 6px; border: 1px solid var(--line);
    font: 500 11px/1 var(--sans); color: var(--ink-soft);
  }
  .ctx-main:hover { background: #fffaf0; }
  .ctx-more:hover { background: rgba(22, 26, 27, 0.75); }
}

/* ---------- 숨 고르기 ---------- */
#breath {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sb) + var(--dock-h) + 24px);
  transform: translateX(-50%);
  text-align: center;
  color: var(--glass-ink);
  z-index: 9;
  pointer-events: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.breath-ring {
  width: 120px; height: 120px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 244, 220, 0.5);
  display: grid; place-items: center;
}
#breathDot {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.75), rgba(255, 210, 150, 0.12) 70%);
  transform: scale(0.35);
}
#breathWord { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: 0.1em; }
#breathMeta { margin: 4px auto 0; font-size: 13px; opacity: 0.85; max-width: 260px; word-break: keep-all; text-wrap: balance; }
#breathEnd { margin-top: 10px; min-height: 44px; }
.breath-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 260px; margin: 8px auto 0; }
.breath-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 240, 210, 0.25); }
.breath-dots i.done { background: rgba(255, 226, 170, 0.9); }
/* 첫 숨: 위쪽 1/4 (가운데 인물은 가리지 않게) */
#breath.first { top: calc(var(--st) + 96px); bottom: auto; }
#breath.first .breath-ring { width: 96px; height: 96px; }
#breath.side { left: auto; right: var(--sr); transform: none; bottom: calc(var(--sb) + var(--dock-h) + 20px); }
#breath.side .breath-ring { width: 96px; height: 96px; }

/* 숨 고르는 동안 화면이 물러난다 */
#hud, #actions { transition: opacity 0.6s; }
body.calm #hud, body.calm #actions, body.calm .toast, body.calm .hint { opacity: 0; pointer-events: none; transition: opacity 1.6s; }
body.calm #hud button, body.calm #actions button { pointer-events: none; }
/* 앉아 가만히 있으면 아래 바와 상황 버튼이 조용히 물러난다 (손대면 바로 돌아옴) */
body.seated-quiet #actions, body.seated-quiet #ctx, body.seated-quiet #hint { opacity: 0; pointer-events: none; transition: opacity 1.6s; }
body.calm #breathMeta { opacity: 0.85; }
/* 쉬는 중에도 마치기는 찾기 쉽고 읽을 수 있게 남겨 둔다. */
#breathEnd { background: rgba(22, 26, 27, 0.72); text-shadow: none; }
body.calm #breathEnd { opacity: 1; }

/* ---------- 절·염불 진행: 막대 바로 위, 엄지 닿는 곳 ---------- */
.practice-hud {
  position: fixed; left: 50%;
  bottom: calc(var(--sb) + var(--dock-h) + 18px);
  transform: translateX(-50%);
  z-index: 11;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(36, 30, 26, 0.72);
  border: 1px solid var(--glass-line);
  color: #f7efe0;
  white-space: nowrap;
  animation: fade 0.4s ease-out;
}
.practice-hud b { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; }
.practice-hud small { opacity: 0.85; font-variant-numeric: tabular-nums; font-size: 14px; }
.practice-hud button { color: #f7efe0; border-color: rgba(247, 239, 224, 0.35); padding: 6px 16px; min-height: 44px; }
/* 48차 (폰 검토): 염불 안내 문장이 화면보다 길어 '나무아미타불'과 [그만]이 잘렸고, 108배에서는 [그만]이 세로로 꺾였다.
   막대는 화면 안(양옆 16px)에 두고, 좁은 화면에서는 염불 문구 아래 줄에 진행을 적는다. 버튼은 늘 한 줄 */
.practice-hud { max-width: calc(100vw - 32px); box-sizing: border-box; }
.practice-hud b, .practice-hud button { white-space: nowrap; flex: 0 0 auto; }
.practice-hud small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .practice-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 6px 6px 6px 16px; border-radius: 22px; white-space: normal; }
  .practice-hud:has(small:not(:empty)) { width: min(330px, calc(100vw - 32px)); }
  .practice-hud b { font-size: 16px; letter-spacing: 0.05em; grid-column: 1; grid-row: 1; }
  .practice-hud small { grid-column: 1; grid-row: 2; font-size: 12px; line-height: 1.35; white-space: normal; word-break: keep-all; }
  .practice-hud button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 14px; }
}
/* 염불·절을 시작하면 숨 고르기 원과 [마치기]는 물러난다 (두 수행이 한 화면에 겹치지 않게) */
body.practicing #breath { display: none !important; }

/* ---------- 연등 읽기 카드 (위쪽, 가운데를 비켜) ---------- */
.card {
  position: fixed;
  left: 50%;
  top: calc(var(--st) + 66px);
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 32px));
  background: var(--paper);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  z-index: 12;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-top: 6px solid var(--lantern, #f3b27a);
  animation: fade 0.4s ease-out;
}
#lanternCardText { margin: 0 0 8px; font-family: var(--serif); font-size: 17px; line-height: 1.6; word-break: keep-all; }
#lanternCardMeta { margin: 0; font-size: 12px; color: var(--ink-soft); }
/* 소원을 읽는 동안 입장·지역 안내가 글을 덮지 않도록 한다. */
body.ui-card .toast { visibility: hidden; pointer-events: none; }

/* ---------- 시트 안 버튼 묶음 ---------- */
.help { padding-left: 18px; margin: 0 0 4px; line-height: 1.65; font-size: 14.5px; color: var(--ink); word-break: keep-all; }
.help li { margin-bottom: 8px; }
.help b { color: var(--accent); margin-right: 4px; }
.help .keys { display: none; }
@media (hover: hover) and (pointer: fine) { .help .keys { display: list-item; } }
kbd { font: 500 12px/1 var(--sans); padding: 2px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--paper-2); }

.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2);
  font-size: 18px; font-weight: 500; cursor: pointer; min-height: 56px;
}
.choice small { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.choice.recommend { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.dest-list, .grid-buttons { display: grid; gap: 8px; }
.grid-buttons, .dest-list { grid-template-columns: repeat(2, 1fr); }
.grid-buttons.three { grid-template-columns: repeat(3, 1fr); }
.grid-buttons.four { grid-template-columns: repeat(4, 1fr); }
.dest-list button, .grid-buttons button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer;
  min-height: 54px;
  transition: background-color 0.2s;
}
.grid-buttons.four button, .grid-buttons.three button { align-items: center; text-align: center; padding: 10px 4px; }
.dest-list button b, .grid-buttons button b { font-size: 15.5px; font-weight: 500; }
.dest-list button small, .grid-buttons button small { font-size: 12px; color: var(--ink-soft); white-space: normal; word-break: keep-all; }
.grid-buttons button:disabled { opacity: 0.45; }
.grid-buttons button.span2 { grid-column: 1 / -1; }
@media (hover: hover) { .dest-list button:hover, .grid-buttons button:hover, .choice:hover { background: #fff; } }
.chips.vis { margin: 12px 0 4px; }
.more-here .grid-buttons button { background: #fff7e6; border-color: rgba(122, 59, 42, 0.28); }
.more-here .grid-buttons button b { font-family: var(--serif); font-weight: 700; }

/* 설정 토글 */
.setting-list { display: grid; gap: 8px; }
.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 54px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2);
  text-align: left; cursor: pointer;
}
.toggle span { display: flex; flex-direction: column; font-size: 15px; }
.toggle small { font-size: 12px; color: var(--ink-soft); }
.toggle i { flex: none; position: relative; width: 42px; height: 24px; border-radius: 12px; background: rgba(60, 50, 40, 0.2); transition: background-color 0.25s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--ease); }
.toggle[aria-pressed="true"] i { background: var(--accent); }
.toggle[aria-pressed="true"] i::after { transform: translateX(18px); }

.care-lines { display: grid; gap: 8px; margin: 4px 0 14px; font-size: 16px; }
a.call {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; min-height: 48px;
}
a.call small { font-weight: 400; color: var(--ink-soft); }
.notice-line { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: #f3e2d2; color: #6a3a22; font-size: 14px; line-height: 1.5; }
.history { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 60px; margin: 6px 0 12px; }
.history span { width: 14px; background: #c9a07a; border-radius: 4px 4px 0 0; opacity: 0.85; position: relative; }
.history span.empty { background: var(--line); height: 6px !important; }

/* ---------- 스님과 차담 ---------- */
.sheet.ask { display: flex; flex-direction: column; }
.ai-note { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.ask-log { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: min(48dvh, 460px); margin: 0 0 12px; }
.ask-log:empty { display: none; }
.msg { line-height: 1.75; font-size: 15px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #efe5d2; }
.msg.monk { padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--paper-2); border: 1px solid var(--line); font-family: var(--serif); }
.msg.monk.wait { color: var(--ink-soft); font-family: var(--sans); font-size: 14px; }
.msg.monk sup { font-family: var(--sans); font-size: 11px; color: var(--accent); padding: 0 1px; }
.msg.err { color: var(--accent); font-size: 14px; }
.msg details { margin-top: 10px; font-family: var(--sans); font-size: 13px; white-space: normal; }
.msg summary { cursor: pointer; color: var(--ink-soft); }
.msg ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.msg ol a { color: var(--accent); text-decoration: none; }
.msg ol small { display: block; color: var(--ink-soft); line-height: 1.5; }
.ask-suggest { margin: 0 0 12px; }
.ask-suggest button { font-size: 13px; }
.ask-form { display: flex; gap: 8px; align-items: flex-end; }
.ask-form textarea { flex: 1; min-height: 48px; }
.ask-form button { min-height: 48px; }
.ask .care-lines { margin: 10px 0 0; }

/* ---------- 작은 폰 ---------- */
@media (max-width: 360px) {
  .grid-buttons.four { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 34px; }
}

/* ---------- 넓은 화면 (태블릿·PC): 시트는 아래 가운데 카드, 말씀은 위쪽 가운데 줄 ---------- */
@media (min-width: 720px) {
  .sheet-wrap { padding: 0 16px calc(var(--sb) + 14px); }
  .sheet { width: min(440px, 100%); border-radius: 22px; padding: 28px 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
  .sheet.ask { width: min(540px, 100%); }
  .saying { top: calc(var(--st) + 6px); max-width: min(520px, calc(100vw - 600px)); font-size: 14px; }
  .toast { top: calc(var(--st) + 64px); }
  .room { max-width: 260px; }
}
/* PC: 입장 카드는 왼쪽에 두어 돌아보는 경내를 가리지 않는다 */
@media (min-width: 1000px) and (min-height: 640px) {
  /* 47차: 입장 화면 규칙은 파일 끝 '입장 화면 (47차)' 묶음으로 옮겼다 */
}
@media (min-width: 720px) and (max-width: 1000px) {
  .saying { top: calc(var(--st) + 66px); max-width: 480px; }
}

/* ---------- 가로로 눕힌 폰: 떠오른 버튼은 막대 오른쪽 같은 줄로 ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --dock-h: 52px; }
  .ctx { left: auto; right: var(--sr); bottom: var(--sb); transform: translate(0, 10px); max-width: calc(50vw - 200px); }
  .ctx.show { transform: none; }
  .ctx button { min-height: 46px; }
  .ctx-more, .ctx-main small { display: none; }
  .practice-hud { bottom: calc(var(--sb) + var(--dock-h) + 16px); }
  .saying { top: calc(var(--st) + 4px); max-width: calc(100vw - 520px); font-size: 12.5px; padding: 5px 12px; }
  .toast { top: calc(var(--st) + 58px); }
  .sheet { max-height: calc(100dvh - 12px); padding-top: 20px; }
  .hint { bottom: calc(var(--sb) + var(--dock-h) + 20px); }
  #breath.first { top: calc(var(--st) + 56px); }
  #breath.side { bottom: calc(var(--sb) + var(--dock-h) + 12px); }
  #breath.side .breath-ring, #breath.first .breath-ring { width: 72px; height: 72px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .saying { max-width: calc(100vw - 400px); font-size: 12px; }
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  #breathDot { transform: scale(0.65) !important; }
  .ctx, .ctx.show, .orb, .toggle i::after, .kit-btn { transition: none !important; }
  .ctx { transform: translate(-50%, 0); }
  .saying, .saying.show { transition: opacity 0.3s linear, visibility 0s !important; }
}

/* 해안·모닥불: 한 손으로 닿는 휴식 컨트롤, 모바일 safe area */
.coast-rest,.hearth-panel{position:fixed;z-index:45;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);box-sizing:border-box;width:min(92vw,420px);padding:20px 24px;border:1px solid #b7ac9038;border-radius:22px;background:#f8f3e9ed;color:#3c443c;text-align:center;box-shadow:0 10px 42px #182c3030;backdrop-filter:none}
.coast-rest{display:flex;flex-direction:column;gap:14px;background:#f8f3e9f2}.hearth-panel h2{font-size:21px;line-height:1.5;margin:8px 0}.hearth-panel p{font-size:14px;line-height:1.65}.hearth-panel small{color:#7b725f;letter-spacing:.12em}.hearth-panel button,.coast-rest button{min-height:48px;padding:12px 18px;border:1px solid #8a785d55;border-radius:14px;background:#fffaf0;color:#4e5547;font:inherit;cursor:pointer}.hearth-hold{width:100%;margin:8px 0;background:#83513c!important;color:#fff8ed!important;touch-action:none}.hearth-close{width:100%}.hearth-panel button:focus-visible,.coast-rest button:focus-visible{outline:3px solid #bf8b42;outline-offset:3px}
/* 47차: 바다 바라보기는 앉은 내 몸과 바다가 보이게 낮은 한 줄 띠 (글 + 일어나기) */
.coast-rest.coast-rest-sea{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:auto;max-width:min(92vw,420px);padding:8px 8px 8px 20px;border-radius:999px;bottom:max(20px,env(safe-area-inset-bottom))}.coast-rest.coast-rest-sea span{font-size:15px;white-space:nowrap}.coast-rest.coast-rest-sea button{min-height:44px;padding:8px 18px;border-radius:999px;white-space:nowrap}
body:is(.coast-active,.hearth-active) .ctx{visibility:hidden;pointer-events:none}
body:is(.coast-active,.hearth-active,.camp-hide) #hint{visibility:hidden;pointer-events:none}
body.ui-toast #hint[data-kind="navigation"]{visibility:hidden;pointer-events:none}

/* 이동 패드는 하단 동작 바보다 위, 주변 동작 버튼보다 아래에 둔다. */
.navigation-controls { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.navigation-pad {
  display: none; position: absolute; left: var(--sl);
  bottom: calc(var(--sb) + var(--dock-h) + 22px);
  width: 116px; height: 116px; padding: 0; border: 1px solid rgba(247,241,227,.4);
  border-radius: 50%; background: rgba(34,39,36,.34); color: var(--glass-ink);
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
}
.navigation-ring { position: absolute; inset: 15px; border: 1px solid rgba(247,241,227,.3); border-radius: 50%; }
.navigation-knob { position: absolute; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-radius: 50%; background: rgba(247,241,227,.72); border: 1px solid rgba(255,255,255,.65); }
.navigation-pad-label { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 11px; }
.navigation-pad.active { background: rgba(34,39,36,.55); border-color: var(--gold); }
.navigation-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:not(.ui-in) .navigation-controls,
body:is(.ui-sheet,.ui-practice,.ui-breath,.calm,.seated-quiet,.coast-active,.hearth-active,.pond-active,.camp-hide) .navigation-controls { display: none; }
@media (pointer: coarse) {
  .navigation-pad { display: block; }
  /* The centre belongs to the player's body; contextual actions sit above the right controls. */
  body.ui-in:not(.ui-sheet) .ctx { left:auto;right:var(--sr);bottom:calc(var(--sb) + var(--dock-h) + 82px);transform:translateY(10px);width:min(140px,34vw);max-height:40vh;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;flex-wrap:nowrap;align-items:stretch; }
  body.ui-in:not(.ui-sheet) .ctx.show { transform:translateY(0); }
  /* Guided travel adds a second 44px button. Keep the nearby action above both. */
  body.ui-in:not(.ui-sheet):has([data-navigation-stop]:not([hidden])) .ctx { bottom:calc(var(--sb) + var(--dock-h) + 133px); }
  .ctx > button { width:100%;white-space:normal;border-radius:16px;padding:9px 10px; }
  .ctx-main { flex-direction:column;gap:2px; }
  .ctx-main b { font-size:14px;letter-spacing:0; }
  .hint { top:calc(var(--st) + 134px);bottom:auto; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .navigation-pad { width: 92px; height: 92px; bottom: calc(var(--sb) + var(--dock-h) + 14px); }
  body.ui-in:not(.ui-sheet) .ctx { bottom: calc(var(--sb) + var(--dock-h) + 112px); }
  .hint { top:auto;bottom: calc(var(--sb) + var(--dock-h) + 160px); }
}
body.pond-active #ctx, body.pond-active #hint { display:none!important; }
body.onsen-active :is(#hint,.hint,#ctx,.navigation-controls) { display:none!important; }

/* A single nearby object's name and action, placed by projection rather than a
   second bottom menu. Off-screen objects never masquerade as edge buttons. */
body #ctx.object-prompt37,body.ui-in:not(.ui-sheet) #ctx.object-prompt37 {
 position:fixed;left:var(--prompt-x,-1000px);top:var(--prompt-y,-1000px);right:auto;bottom:auto;
 transform:translate(-50%,-100%)!important;width:max-content;min-width:140px;max-width:min(240px,calc(100vw - 28px));
 max-height:none;overflow:visible;display:flex;flex-direction:column;align-items:stretch;gap:4px;
 padding:8px;border:1px solid #e4d7b587;border-radius:14px;background:#27372de8;color:#fff8e6;
 box-shadow:0 4px 16px #101c2430;transition:opacity .16s ease,visibility .16s;z-index:14;
}
#ctx.object-prompt37::after {content:'';position:absolute;left:50%;top:100%;height:var(--prompt-line-length,17px);width:1px;background:linear-gradient(to bottom,#f4e4b7b3 0%,#f4e4b7b3 var(--prompt-line-mask-start,100%),transparent var(--prompt-line-mask-start,100%),transparent var(--prompt-line-mask-end,100%),#f4e4b7b3 var(--prompt-line-mask-end,100%),#f4e4b7b3 100%);pointer-events:none;transform-origin:top center;transform:rotate(var(--prompt-line-angle,0rad))!important;}
#ctx.object-prompt37::before {content:'';position:absolute;left:calc(50% + var(--prompt-anchor-dx,0px) - 2.5px);top:calc(100% + var(--prompt-anchor-dy,17px) - 2.5px);width:5px;height:5px;border-radius:50%;background:#f4e4b7;opacity:var(--prompt-anchor-opacity,1);pointer-events:none;}
#ctx.object-prompt37 .ctx-object-name {font-family:var(--serif);font-size:12px;line-height:1.4;text-align:center;letter-spacing:.025em;color:#efdfb9;pointer-events:none;padding:1px 6px 3px;}
#ctx.object-prompt37 button {box-sizing:border-box;min-height:44px;width:100%;white-space:normal;padding:9px 12px;border-radius:9px;font:inherit;line-height:1.4;touch-action:manipulation;}
#ctx.object-prompt37 .ctx-main {display:flex;flex-direction:row;justify-content:center;gap:10px;background:#fbf5e7;color:#263c2b;border:1px solid #f0e2bf;}
#ctx.object-prompt37 .ctx-main b {font-family:var(--sans);font-size:14px;letter-spacing:0;}
#ctx.object-prompt37 .ctx-main kbd {display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:22px;height:22px;border:1px solid #68735c66;border-radius:5px;background:#e7e7d9;color:#344838;font:12px var(--sans);}
#ctx.object-prompt37 button:focus-visible {outline:3px solid #edc774;outline-offset:3px;}
#ctx.object-prompt37[aria-hidden="true"] {opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important;}
@media(pointer:coarse){#ctx.object-prompt37 .ctx-main kbd{display:none;}}
body:is(.camp-dancing,.practice-place-active,.guided-practice-active) #ctx.object-prompt37 {visibility:hidden;pointer-events:none;}
:root { --practice-paper: #f5eedf; }
.practice-place-panel { word-break:keep-all;text-wrap:pretty;position:fixed;z-index:46;right:18px;bottom:max(18px,env(safe-area-inset-bottom));width:min(350px,calc(100vw - 28px));box-sizing:border-box;padding:16px;border:1px solid #a98b5a66;border-radius:18px;background:var(--practice-paper);color:#38493e;box-shadow:0 8px 28px #13251d26;font-size:14px;line-height:1.6; }
.practice-place-panel h2 { margin:0 0 6px;font-size:19px; }
.practice-place-panel p { margin:6px 0 12px; }
.practice-place-panel button { min-height:48px;padding:9px 14px;border:1px solid #a08a67;border-radius:10px;background:#fffaf0;color:inherit;font:inherit;touch-action:none; }
.practice-place-panel .practice-place-action { margin-right:8px; }
.practice-place-panel canvas { display:block;width:180px;height:180px;margin:8px auto 12px;touch-action:none;background:#f0e5ce;border-radius:8px; }
.practice-place-panel :focus-visible { outline:3px solid #aa763a;outline-offset:3px; }
@media(max-width:540px) { .practice-place-panel.practice-scribe{display:grid;grid-template-columns:1fr auto;gap:4px 10px}.practice-scribe h2,.practice-scribe p{grid-column:1 / -1}.practice-place-panel.practice-scribe canvas{grid-column:1;grid-row:3 / 5;margin:0 auto;width:140px;height:140px}.practice-scribe .practice-place-action{grid-column:2;grid-row:3;margin:0;align-self:end;max-width:130px}.practice-scribe .practice-place-exit{grid-column:2;grid-row:4;align-self:start} }
body.practice-place-active :is(#ctx,#hint,.navigation-controls,#saying) { visibility:hidden;pointer-events:none; }
@media(max-width:540px) { .practice-place-panel{left:14px;right:14px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;padding:12px 14px}.practice-place-panel canvas{width:150px;height:150px}.practice-place-panel p{font-size:13px;margin:4px 0 8px} }
@media(max-height:500px) { .practice-place-panel{left:auto;right:12px;width:300px;max-height:calc(100dvh - 24px);overflow:auto}.practice-place-panel canvas{width:120px;height:120px} }

/* Non-modal guidance leaves the view and walking controls available. */
.guided-practice{position:fixed;z-index:46;top:max(65px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(390px,calc(100vw - 32px));box-sizing:border-box;padding:12px 16px;background:#f4eddded;color:#34483c;border:1px solid #9e8b6255;border-radius:14px;box-shadow:0 4px 18px #152e1820;font-size:14px;line-height:1.55}
.guided-practice[hidden]{display:none}.guided-practice h2{font-size:16px;margin:0 0 4px}.guided-practice p{margin:0 0 8px}.guided-practice button{font:inherit;color:inherit;background:#fff9ec;border:1px solid #b5a382;border-radius:9px;padding:8px 12px;min-height:44px;margin-right:8px}.guided-practice :focus-visible{outline:3px solid #97723c;outline-offset:3px}
@media(max-height:500px){.guided-practice{top:10px;left:auto;right:12px;transform:none;width:290px;font-size:12px;padding:8px 12px}}

.guided-practice-active :is(#ctx,#saying,#hint){display:none} /* 47차: 탑돌이 중 '멈추기'와 '마치기'가 함께 있어 헷갈렸다 */

/* 33: quiet entry, progressive disclosure, and language-safe controls. */
html:lang(ja){--sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
html:lang(zh){--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
html:lang(en){--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
/* 47차: 태국어·베트남어 — 기기 글꼴 (태국어는 Leelawadee/Thonburi/Noto Sans Thai, 베트남어 성조 부호는 Segoe UI·SF·Roboto가 받친다) */
html:lang(th){--sans:"Leelawadee UI","Thonburi","Noto Sans Thai",system-ui,sans-serif}
html:lang(vi){--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
/* 47차: 번역문이 한 낱말만 다음 줄로 떨어지지 않게 */
html:not([lang=ko]) :is(p,h2,h3,small,label,.lede,.toast,#toast){text-wrap:pretty}
/* 47차: 짧은 글은 줄 길이를 고르게 (한 낱말·한 글자만 다음 줄로 떨어지지 않게) — 우리말 포함 */
.dest-list :is(b,small),.gate-foot,#gate .lede,.saying,#ctx .ctx-main b,.ctx-object-name{text-wrap:balance}
/* 47차: 아래 단추 이름은 한 줄 (번역이 길어도 두 줄로 꺾이지 않게) */
html:not([lang=ko]) .dock b{white-space:nowrap}
/* 47차: 상표 「합장」은 어느 말에서도 우리 명조 */
/* 47차: 말씀 출처 앞 띄어쓰기 (inline-block 첫 빈칸이 사라진다) · 우리말 시트는 낱말 단위로 줄바꿈 */
.saying .saying-src{margin-left:.3em}
html:lang(ko) .sheet :is(p,dd,dt,small,li,span){word-break:keep-all}
#gate h1#gateTitle{font-family:"Noto Serif KR","Nanum Myeongjo",var(--serif);font-weight:700;letter-spacing:.1em}
html:not(:lang(ko)) :is(.lede,.fine,.help,.dest-list button small){word-break:normal;overflow-wrap:anywhere}
.sheet h1,.sheet h2{color:var(--accent);letter-spacing:.025em}
/* 열릴 때 제목으로 옮긴 초점은 화면 읽기용이다. 마우스·터치 진입에서 초록 테가 뜨지 않게 */
#gate h1:focus:not(:focus-visible),#gate h1:focus{outline:none}
.quiet-details{border-top:1px solid var(--line);margin-top:14px;padding-top:2px}
.quiet-details>summary{min-height:48px;display:list-item;cursor:pointer;font-size:15px;font-weight:500;padding:13px 4px;line-height:1.5}
.quiet-details[open]>summary{color:var(--accent)}
.language-field,.setting-select{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 0;font-size:14px}
select{min-height:48px;max-width:70%;padding:10px 30px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);font-size:16px;cursor:pointer}
.sheet-close{position:absolute;right:12px;top:10px;width:44px;height:44px;padding:0;border:0;display:grid;place-items:center;background:transparent;cursor:pointer;color:var(--ink)}
.sheet-close svg{width:22px;height:22px}
#helpSheet h2{padding-right:32px}
.help-essentials{margin:18px 0}.help-essentials>div{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.help-essentials dt{font-weight:700;color:var(--accent);font-size:15px}.help-essentials dd{margin:0;font-size:14px;line-height:1.65}
.keyboard-guide{font-size:14px;line-height:2}
.dest-list button{min-height:70px}.dest-list button small{font-size:13px;line-height:1.5}
button.ghost,button.primary,.chips button{min-height:48px}
#hud .hud-left{background:rgba(247,242,231,.94);color:var(--ink);border-color:var(--line)}
#hud button.icon{background:rgba(247,242,231,.94);color:var(--ink);border-color:var(--line)}
[data-locale-fallback="ko"]::after{content:" KO";font-family:var(--sans);font-size:10px;font-weight:500;opacity:.75;vertical-align:super;letter-spacing:0}
@media(max-width:420px){.help-essentials>div{grid-template-columns:70px 1fr;gap:10px}.sheet{padding-left:18px;padding-right:18px}.hud-right{gap:4px}#hud button.icon{width:44px;height:44px}.hud-left{max-width:calc(100vw - 172px)}.room{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sheet-wrap,.sheet{animation:none}}

.scale-chips button{min-height:44px;min-width:0;font-size:14px}
body.ui-breath #hint{visibility:hidden;pointer-events:none}
/* Round 39: one quiet menu, compact nearby actions and a fading thumb pad. */
#hud .quiet-menu-toggle{background:#243c3280;border-color:#e6ddbf66}
.quiet-menu{max-width:320px;background:#f2eee4ed}
.quiet-menu-actions{display:grid;gap:8px;margin:16px 0}
.quiet-menu-action{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 14px;border:1px solid #a59c8550;border-radius:12px;background:#ffffff60;color:#304b3c;font:inherit;text-align:left}
.quiet-menu-action svg{width:24px;height:24px;fill:currentColor;flex:none}
.quiet-menu-action svg.stroke{fill:none;stroke:currentColor;stroke-width:1.6}
.quiet-menu-action.off #soundWave{display:none}
body #ctx.object-prompt37,body.ui-in:not(.ui-sheet) #ctx.object-prompt37{min-width:112px;max-width:min(208px,calc(100vw - 28px));padding:5px;gap:2px;border-radius:11px;background:#26392d9c;box-shadow:0 2px 8px #101c2420}
#ctx.object-prompt37 .ctx-object-name{font-size:11px;padding:1px 3px}
#ctx.object-prompt37 .ctx-main{background:#f5f0dfcf;border-color:#f0e2bf77;gap:7px;padding:7px 9px}
#ctx.object-prompt37 .ctx-main b{font-size:13px;font-weight:500}
#ctx.object-prompt37 .ctx-local-actions{pointer-events:auto;color:#fff8e8}
#ctx.object-prompt37 .ctx-local-actions summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;touch-action:manipulation;list-style:none}
#ctx.object-prompt37 .ctx-local-actions summary::after{content:'⌄';margin-left:8px}
#ctx.object-prompt37 .ctx-local-actions[open] summary::after{content:'⌃'}
#ctx.object-prompt37 .ctx-local-actions summary::-webkit-details-marker{display:none}
#ctx.object-prompt37 .ctx-local-actions .ctx-more{display:block;pointer-events:auto;color:#fff8e8;background:#24372dcc;border:1px solid #d3c6a73a;margin-top:3px;font-size:12px}
#ctx.object-prompt37 .ctx-local-actions summary:focus-visible{outline:3px solid #edc774;outline-offset:2px}
@media(pointer:coarse){
 .navigation-pad{width:160px;height:150px;left:0;bottom:var(--sb);border:0;background:transparent!important;opacity:.22;transition:opacity .45s;--pad-x:70px;--pad-y:80px}
 .navigation-pad.active,.navigation-pad:focus-visible{opacity:.85;transition:opacity .12s}
 .navigation-ring{inset:auto;left:calc(var(--pad-x) - 43px);top:calc(var(--pad-y) - 43px);width:86px;height:86px;background:#23392e20;border-color:#fff6df77}
 .navigation-knob{width:32px;height:32px;left:calc(var(--pad-x) - 16px);top:calc(var(--pad-y) - 16px);background:#f7f1e388}
 .navigation-pad-label{left:calc(var(--pad-x) - 28px);top:calc(var(--pad-y) + 23px);bottom:auto;right:auto;width:56px;font-size:10px}
 .hud-left{max-width:calc(100vw - 80px)}
}
@media(prefers-reduced-motion:reduce){.navigation-pad{transition:none}}
#hud button.quiet-menu-toggle{background:#243c3280;border-color:#e6ddbf66;color:#fff7e5}
#ctx.object-prompt37 .ctx-local-actions[open]{max-height:142px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
#ctx.object-prompt37 .ctx-local-actions[open] summary{position:sticky;top:0;background:#2b4039ed;border-radius:7px;z-index:1}
/* 45차 산사 수첩: 인주 빛 도장, 한지 바탕 */
:root{--inju:#b4352b}
.journal-count{font-style:normal;font-size:10.5px;opacity:.75;margin-left:2px}
.seal{display:inline-grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border:2px solid var(--inju);border-radius:5px;color:var(--inju);font:600 22px/1 'Noto Serif KR','Batang','Nanum Myeongjo',serif;opacity:.22;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px #fff0,inset 0 0 0 3px #b4352b33}
.seal.big{width:56px;height:56px;font-size:32px;opacity:.9;margin:0 auto 10px;background:#b4352b0d}
.sheet.journal{max-height:min(86vh,760px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper) radial-gradient(circle at 20% 10%,#fffaf0 0,#0000 60%)}
.journal-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.journal-items li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:#fffdf7a8;border:1px solid #e6dcc6}
.journal-items li .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.journal-items li b{font-weight:600;font-size:14.5px}
.journal-items li small{font-size:12px;line-height:1.45;color:var(--ink-soft);word-break:keep-all}
.journal-items li.done .seal{opacity:.95;background:radial-gradient(circle at 40% 35%,#b4352b14,#b4352b05)}
.journal-items li.done{border-color:#d9b9a8;background:#fffaf2}
.journal-items li button.go{min-height:40px;padding:6px 12px;font-size:13px;flex:0 0 auto}
.welcome .lede{text-align:center}
.row.center{justify-content:center;flex-wrap:wrap;margin-top:6px}
.stamp-pop{position:fixed;left:50%;top:calc(var(--st,12px) + 74px);transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:#f7f2e7f2;border:1px solid #e3d6bb;box-shadow:0 8px 28px #0002;pointer-events:none;max-width:min(92vw,420px)}
.stamp-pop .seal{width:46px;height:46px;font-size:27px;opacity:.95}
.stamp-pop b{display:block;font-size:14px;color:var(--ink)}
.stamp-pop small{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.45;word-break:keep-all}
.stamp-pop.show{animation:stamp-in .5s ease-out both,stamp-out .8s ease-in 3.4s both}
.stamp-pop.show .seal{animation:seal-press .45s cubic-bezier(.3,1.6,.5,1) .12s both}
@keyframes stamp-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes stamp-out{to{opacity:0;transform:translate(-50%,-6px)}}
@keyframes seal-press{from{transform:scale(1.8) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(-4deg);opacity:.95}}
.service-invite{position:fixed;left:50%;top:calc(var(--st,12px) + 64px);transform:translateX(-50%);z-index:29;width:min(92vw,380px);padding:12px 14px;border-radius:16px;background:#22362dee;color:#fff7e5;box-shadow:0 8px 28px #0003}
.service-invite p{margin:0 0 10px;font-size:14px;line-height:1.5;word-break:keep-all}
.service-invite div{display:flex;gap:8px;justify-content:flex-end}
.service-invite button{min-height:44px}
/* 47차: 도착해서 띄운 권유(온천 몸 담그기 등)는 한 가지만 권한다 — 둘째 단추는 조용한 글자 닫기 */
.service-invite.here div{align-items:center;gap:16px}
.service-invite.here button[data-dismiss]{background:none;border:0;box-shadow:none;padding:0 8px;min-width:56px;color:#fff7e5e0;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#fff7e566}
.service-invite.here button[data-dismiss]:hover{background:none;color:#fff7e5}
@media(prefers-reduced-motion:reduce){.stamp-pop.show,.stamp-pop.show .seal{animation:none}}
.journal-next{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin:0 0 14px;border-radius:14px;background:#fffdf7;border:1px solid #e3d6bb}
.journal-next .eyebrow{margin:0}
.journal-next b{font-size:16px;font-weight:600}
.journal-next small{font-size:13px;color:var(--ink-soft);line-height:1.5;word-break:keep-all;margin-bottom:8px}
.journal-next button{align-self:flex-start}
.seal-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 6px;padding:6px 0 4px}
.seal-cell{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.seal-cell .seal{width:44px;height:44px;font-size:24px;opacity:.16}
.seal-cell.done .seal{opacity:.95;background:radial-gradient(circle at 40% 35%,#b4352b14,#b4352b05)}
.seal-cell small{font-size:10.5px;line-height:1.3;color:var(--ink-soft);word-break:keep-all}
.seal-cell.done small{color:var(--ink)}
body.ui-sheet .service-invite{display:none}
/* 검토 3인: 한 번에 하나만. 권유·도장이 떠 있는 동안 사물 버튼·말씀·길잡이는 물러난다 */
body.ui-invite :is(#ctx,#saying,#hint){visibility:hidden;pointer-events:none}
.seal-board{grid-template-columns:repeat(4,1fr)}
.seal-cell:not(.done) .seal{opacity:.14;border-style:dashed}
/* 숨 고르기: 8초 뒤엔 마치기도 옅게 (누르거나 가리키면 다시 또렷) */
body.calm #breathEnd{opacity:.3;transition:opacity .6s}
body.calm #breathEnd:is(:hover,:focus-visible,:active){opacity:1}
body.calm #breathMeta{opacity:0;transition:opacity .8s}
/* 알림 한 줄(위쪽)과 도장이 겹치지 않게 도장은 그 아래에 */
.stamp-pop{top:calc(var(--st,12px) + 132px)}
/* 45차 걸린 등 둘러보기: 등 색 띠를 단 짧은 글, 읽기만 */
.sheet.lantern-browse{max-height:min(86vh,760px);overflow-y:auto;overscroll-behavior:contain}
.lantern-notes{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.lantern-notes li{position:relative;padding:10px 12px 10px 18px;border-radius:12px;background:#fffdf7;border:1px solid #e6dcc6}
.lantern-notes li::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:5px;border-radius:3px;background:var(--lantern,#e9a23b)}
.lantern-notes li p{margin:0 0 3px;font-size:15px;line-height:1.5;word-break:keep-all}
.lantern-notes li small{font-size:12px;color:var(--ink-soft)}
.lantern-notes li.empty{padding-left:12px;color:var(--ink-soft);font-size:13px}
.lantern-notes li.empty::before{display:none}
button.linkish{background:none;border:0;padding:0;min-height:0;color:var(--accent,#264d40);text-decoration:underline;font:inherit;cursor:pointer}
.lantern-notes li.mine{background:#fff6e6;border-color:#e8c98f}
.lantern-notes li.mine small{color:#8a5a14;font-weight:600}
.lantern-pager{justify-content:center;gap:12px;margin-top:8px}
.lantern-pager button{min-height:40px;padding:6px 14px}
.lantern-pager button:disabled{opacity:.35}

/* ---------- 45차: 산문 밖 말풍선 입력 · 대나무숲 메아리 두루마리 ---------- */
.say-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + var(--dock-h) + 22px);width:min(calc(100vw - 24px),440px);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;background:rgba(255,251,242,.97);border:1.5px solid rgba(43,36,32,.55);border-radius:24px;box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:14;animation:fade .25s ease-out}
.say-bar[hidden]{display:none}
/* 48차: 최근 말 여섯 줄 (한마디 창 위, 놓친 말을 다시 읽는다) */
.say-bar{flex-wrap:wrap}
.say-log{flex:1 1 100%;order:-1;list-style:none;margin:2px 4px 2px 0;padding:0 0 6px;max-height:128px;overflow-y:auto;border-bottom:1px solid rgba(43,36,32,.14);font:500 13px/1.45 var(--sans);color:#3b332c}
.say-log[hidden]{display:none}
.say-log li{margin:1px 0;word-break:keep-all;overflow-wrap:anywhere}
.say-log b{color:#a8452e;font-weight:700;margin-right:6px}
#actions .kit-chat[data-unread]{position:relative}
#actions .kit-chat[data-unread]::after{content:attr(data-unread);position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#c8553a;color:#fff;font:700 10.5px/16px var(--sans);text-align:center;pointer-events:none}
.say-bar[data-mode="shout"]{background:#f1f3e2;border-color:#6f7f45}
.say-input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:500 15px/1.4 var(--sans);color:#2b2420;padding:8px 0;outline:none}
.say-input::placeholder{color:#8b8276}
.say-count{font-size:11px;color:#8b8276;min-width:0;white-space:nowrap}
.say-count.long{color:#b5562f;font-weight:600}
.say-send{flex:0 0 auto;min-height:38px;padding:6px 14px;border:0;border-radius:18px;background:var(--accent);color:#fffaf0;font:600 14px var(--sans);cursor:pointer}
.say-bar[data-mode="shout"] .say-send{background:#5d6f37}
.say-close{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#6a6258;font-size:15px;cursor:pointer}
.say-close:hover{background:rgba(0,0,0,.06)}

/* 47차: 대나무숲 쪽지판 하나 — 접으면 한 줄(竹 대나무숲 메아리 n), 펴면 최근 메아리 + 입력 하나 + 외치기 하나 */
.bamboo-board{position:fixed;top:calc(var(--st) + 64px);right:12px;width:min(calc(100vw - 24px),300px);z-index:9;color:#2b3324;font-family:var(--sans);
  background:linear-gradient(#f6f1dd,#efe7cc);border-radius:6px;border-top:5px solid #7a5b38;border-bottom:5px solid #7a5b38;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:fade .4s ease-out}
.bamboo-board[hidden]{display:none}
.bamboo-board.closed{width:auto;max-width:calc(100vw - 24px);border:0;border-radius:20px;background:rgba(246,241,221,.94);box-shadow:0 3px 12px rgba(0,0,0,.18)}
.bb-head{display:flex;width:100%;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.bb-head b{flex:1;font-size:14px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.bb-head b::before{content:"竹 ";color:#5d6f37}
.bb-n{min-width:20px;padding:1px 7px;border-radius:10px;background:#5d6f37;color:#f6f1dd;font-size:11px;text-align:center}
.bb-n:empty{display:none}
.bb-chev{width:8px;height:8px;margin:0 2px 3px;border-right:1.7px solid #5d6f37;border-bottom:1.7px solid #5d6f37;transform:rotate(45deg);transition:transform .2s}
.bamboo-board:not(.closed) .bb-chev{margin-bottom:-3px;transform:rotate(-135deg)}
.bamboo-board.closed .bb-body{display:none}
.bb-body{padding:0 12px 10px}
.bb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(36vh,280px);overflow:auto}
.bb-list li{position:relative;padding:7px 9px 6px;background:#fffdf3;border:1px solid rgba(93,111,55,.25);border-radius:3px;box-shadow:1px 1px 0 rgba(122,91,56,.15)}
.bb-list li:nth-child(odd){transform:rotate(-.4deg)}
.bb-list li:nth-child(even){transform:rotate(.35deg)}
.bb-list li.mine{background:#f6f8e6;border-color:#9bab6c}
.bb-list li.bb-empty{background:transparent;border:0;box-shadow:none;transform:none;color:#6f745e;font-size:13px;text-align:center;padding:6px 0 2px;word-break:keep-all}
.bb-list p{margin:0;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.bb-list small{display:block;margin-top:3px;font-size:11px;color:#7c816b}
.bb-del{position:absolute;right:6px;bottom:4px;border:0;background:transparent;color:#7a5b38;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:2px}
.bb-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:7px}
.bb-foot button{min-width:32px;min-height:30px;border:1px solid rgba(93,111,55,.35);background:#fffdf3;border-radius:15px;color:#3d4a26;font:600 14px var(--sans);cursor:pointer;padding:0 8px}
.bb-foot button:disabled{opacity:.35;cursor:default}
.bb-page{font-size:11.5px;color:#6b705a;min-width:34px;text-align:center}
.bb-foot.single{display:none}
.bb-say{display:flex;gap:6px;margin-top:9px}
.bb-input{flex:1;min-width:0;height:40px;padding:0 13px;border:1px solid rgba(93,111,55,.45);border-radius:20px;background:#fffdf3;color:#2b3324;font:15px var(--sans)}
.bb-input::placeholder{color:#8b8f7a}
.bb-input:focus{outline:2px solid rgba(93,111,55,.55);outline-offset:1px}
.bb-cry{flex:0 0 auto;height:40px;padding:0 15px;border:0;border-radius:20px;background:#5d6f37;color:#f6f1dd;font:700 14px var(--sans);cursor:pointer}
.bb-lede{margin:6px 0 0;font-size:11.5px;line-height:1.4;color:#6b705a;text-align:center;word-break:keep-all}
@media (pointer:coarse){.bamboo-board{top:calc(var(--st) + 58px)}.bamboo-board:not(.closed){top:calc(var(--st) + 70px)}.bb-input{font-size:16px}.bb-list{max-height:min(22vh,190px)}}
/* 47차 (검토 3인): 시트를 열 때 제목에 초점을 옮기면 초록 사각 테두리가 오류처럼 보였다. 키보드 초점 링은 단추에 그대로 남긴다 */
.sheet-wrap h2:focus:not(:focus-visible), .sheet-wrap h2[tabindex]:focus { outline: none; box-shadow: none; }
/* 47차: 목록이 길면 닫기 단추가 화면 아래로 밀려 보이지 않았다 */
.lantern-browse .lantern-notes { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
/* 47차 (검토 3인 세 차례): 체험 패널이 화면 오른쪽 아래 4분의 1을 덮어 비질·돌 얹기·발우가 가려졌다 → 얇은 한지 띠.
   제목·안내 한 줄, 단추는 그 옆 한 줄 (손가락 닿는 높이 44px는 지킨다). 사경은 글자판이 필요해 따로 둔다 */
.practice-place-panel { width:min(300px,calc(100vw - 28px)); padding:11px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.practice-place-panel h2 { font-size:16px; margin:0 0 2px; }
.practice-place-panel p { margin:2px 0 8px; }
.practice-place-panel button { min-height:44px; padding:7px 13px; }
@media(max-width:540px) {
  .practice-place-panel:not(.practice-scribe) { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:2px 8px; left:12px; right:12px; padding:9px 12px; }
  /* 제목은 한 줄 전체, 그 아래 안내와 단추가 한 줄 (단추 글이 길면 제목이 네 줄로 쪼개졌다) */
  .practice-place-panel:not(.practice-scribe) h2 { grid-column:1 / -1; font-size:14.5px; margin:0; }
  .practice-place-panel:not(.practice-scribe) p { grid-column:1; grid-row:2; font-size:12.5px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .practice-place-panel:not(.practice-scribe) button { grid-row:2; margin:0; white-space:nowrap; }
  .practice-place-panel:not(.practice-scribe) .practice-place-action { margin:0; }
  .practice-place-panel.practice-scribe canvas { width:118px; height:118px; margin:4px 0; }
  .practice-place-panel.practice-scribe { padding:9px 12px; }
  .practice-place-panel.practice-scribe p { font-size:12.5px; margin:2px 0 4px; }
}
/* 47차: 막 건 내 등을 바라보는 동안 카드는 아래로 (위에 두면 내 등을 덮었다) */
#lanternCard.glance { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 74px); }

/* ---------- 입장 화면 (47차): 한지 한 장, 먹 글씨, 낙관 하나. 경내는 뒤에서 숨 쉬게 ---------- */
#gate {
  --hanji: #f6f0e2; --hanji-2: #efe6d3; --meok: #1e2622; --meok-soft: #4c5650; --inju: #b3321f; --hair: rgba(90, 70, 40, 0.16);
  /* 한지 결: 구름무늬(밀도 얼룩) + 가는 닥나무 섬유. 그림 파일 없이 SVG 잡음 한 조각 */
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='turbulence' baseFrequency='.045 .03' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .27 -14 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.12'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .33 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)' opacity='.06'/%3E%3C/svg%3E");
  background: linear-gradient(to bottom, rgba(12, 16, 18, 0) 0 52%, rgba(12, 16, 18, 0.3) 100%);
}
/* 밤: 종이를 한 톤 낮춰 어두운 경내에서 눈부시지 않게 (main.js가 .night를 바꾼다) */
#gate.night { --hanji: #ddd1b6; --hanji-2: #d1c3a5; --hair: rgba(70, 55, 30, 0.2); }
#gate .gate-paper {
  display: flex; flex-direction: column; text-align: center; color: var(--meok);
  background: var(--fiber), var(--mottle), linear-gradient(170deg, var(--hanji), var(--hanji-2));
  border-radius: 12px 12px 0 0; padding: 22px 24px calc(var(--sb) + 6px);
  box-shadow: 0 -6px 34px rgba(0, 0, 0, 0.2);
  animation: gatePaper 0.7s var(--ease) both;
}
#gate.night .gate-paper { box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.45); }
#gate .gate-paper::before { display: none; } /* 끌어 내리는 시트가 아니므로 손잡이를 없앤다 */
/* 낙관은 제목 오른쪽 아래에 살짝 걸쳐 찍는다: 제목은 제자리 가운데 */
.gate-brand { position: relative; align-self: center; }
#gate h1 { margin: 0; padding-left: 0.1em; font-family: var(--serif); font-weight: 700; font-size: 52px; line-height: 1.08; letter-spacing: 0.1em; color: var(--meok); animation: gateInk 1.4s ease 0.15s both; }
#gate h1:focus, #gate h1:focus:not(:focus-visible) { outline: none; }
.gate-seal { position: absolute; right: -32px; bottom: -2px; width: 31px; height: 31px; transform: rotate(-3deg); mix-blend-mode: multiply; opacity: 0.94; animation: gateSeal 0.5s ease 0.9s both; }
.gate-seal .seal-ground { fill: var(--inju); }
.gate-seal .seal-mark { fill: none; stroke: var(--hanji); stroke-width: 2.2; stroke-linejoin: miter; stroke-linecap: square; }
#gate .brand-sub { text-wrap: balance; margin: 10px auto 0; max-width: 24em; font-size: 14px; letter-spacing: 0.1em; color: var(--meok-soft); word-break: keep-all; }
#gate .gate-intro { margin: 10px 0 14px; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.6; color: var(--meok); }
#gate #enterBtn {
  width: 100%; min-height: 52px; margin: 0; padding: 12px 18px; border-radius: 4px; border: 1px solid #222a25;
  background: #353c36; color: #f8f2e4; font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: 0.14em; text-indent: 0.14em;
  box-shadow: inset 0 0 0 1px rgba(244, 236, 216, 0.16); transition: background 0.2s ease, transform 0.15s ease;
}
#gate #enterBtn:disabled { opacity: 0.62; letter-spacing: 0.04em; text-indent: 0; font-size: 15px; }
@media (hover: hover) { #gate #enterBtn:not(:disabled):hover { background: #424a43; } }
#gate #enterBtn:not(:disabled):active { transform: translateY(1px); }
#gate :focus-visible { outline: 3px solid #2f7d65; outline-offset: 3px; }
/* 이름: 종이에 적힌 한 줄처럼 (밑줄만). 다시 = 작은 둥근 화살표 */
.gate-name { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 8px auto 0; max-width: 100%; }
.gate-name label { flex-basis: 100%; font-size: 13px; letter-spacing: 0.04em; color: var(--meok-soft); }
#gate .gate-name input { width: 15em; max-width: 100%; min-height: 44px; margin: 0; padding: 6px 42px 4px; border: 0; border-bottom: 1px solid rgba(40, 34, 26, 0.42); border-radius: 0; background: transparent; text-align: center; font-size: 18px; color: var(--meok); outline-offset: 2px; }
#gate .gate-name input:focus { border-bottom-color: var(--meok); }
.gate-reroll { position: relative; margin-left: -44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--meok-soft); display: grid; place-items: center; cursor: pointer; }
.gate-reroll svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .gate-reroll:hover { color: var(--meok); background: rgba(40, 34, 26, 0.06); } }
/* 고르지 않아도 되는 것들: 가는 선 아래 작은 글씨 한 줄. 연 것만 그 자리에서 펼친다 */
.gate-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--hair); }
#gate .gate-more > details { margin: 0; padding: 0; border: 0; text-align: left; }
#gate .gate-more > details > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 2px; margin: 0; font-size: 14px; font-weight: 400; color: #454f49; cursor: pointer; }
#gate .gate-more > details > summary::-webkit-details-marker { display: none; }
#gate .gate-more > details > summary::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.2px 1.2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; opacity: 0.7; }
#gate .gate-more > details[open] { flex-basis: 100%; padding: 0 0 8px; }
#gate .gate-more > details[open] > summary { color: var(--meok); }
#gate .gate-more > details[open] > summary::after { transform: translateY(1px) rotate(225deg); }
#gate #profile > .field:first-of-type > span { display: none; } /* 제목 '옷차림'과 겹친다 */
#gate .gate-more .field { margin: 2px 0 6px; }
#gate .gate-more .field > span { font-size: 13px; color: var(--meok-soft); }
#gate .gate-more .chips button { background: rgba(255, 253, 247, 0.7); border-radius: 6px; }
#gate .gate-more .swatches button { width: 40px; height: 40px; border-width: 5px; }
#gate .gate-more .chips button[aria-pressed="true"] { background: rgba(255, 253, 247, 0.9); border-color: var(--meok); box-shadow: inset 0 0 0 1px var(--meok); color: var(--meok); font-weight: 700; } /* 고른 옷: 먹 테두리만 (검은 덩어리 대신) */
#gate .scale-chips button[aria-checked="true"] { background: var(--meok); border-color: var(--meok); color: #f8f2e4; }
#gate .gate-more .swatches button { border-color: var(--hanji); }
#gate .gate-more .swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--meok); }
#gate .language-field { margin: 0; gap: 0; }
#gate .language-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#gate .language-field select { appearance: none; -webkit-appearance: none; field-sizing: content; min-height: 44px; max-width: 160px; padding: 6px 20px 6px 4px; border: 0; border-radius: 6px; color: var(--meok-soft); font-size: 16px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 3.6 5 6.1 7.5 3.6' fill='none' stroke='%234c5650' stroke-width='1.2'/%3E%3C/svg%3E") right 4px center / 11px no-repeat; }
@media (hover: hover) { #gate .language-field select:hover { background-color: rgba(40, 34, 26, 0.06); } }
#gate [data-language-status] { flex-basis: 100%; margin: 4px 0 0; }
#gate .gate-foot { text-wrap: balance; max-width: 22em; margin: 2px auto 0; padding: 0; border: 0; font-size: 12.5px; line-height: 1.55; color: var(--meok-soft); }
html:not(:lang(ko)) #gate :is(.brand-sub, #enterBtn) { letter-spacing: 0.03em; text-indent: 0; }
html:not(:lang(ko)) #gate h1 { letter-spacing: 0.03em; padding-left: 0; font-size: 44px; font-weight: 500; }
html:not(:lang(ko)) .gate-seal { right: -36px; }
@keyframes gatePaper { from { opacity: 0; transform: translateY(24px); } }
@keyframes gateInk { from { opacity: 0; filter: blur(3px); } }
@keyframes gateSeal { from { opacity: 0; transform: rotate(-4deg) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { #gate .gate-paper, #gate h1, .gate-seal { animation: none; } }
/* 태블릿: 아래 가운데 카드 */
@media (min-width: 720px) {
  #gate .gate-paper { width: min(400px, 100%); border-radius: 3px; padding: 38px 34px 22px; box-shadow: 0 10px 40px rgba(20, 25, 15, 0.28); outline: 1px solid rgba(150, 125, 75, 0.38); outline-offset: -10px; }
  #gate.night .gate-paper { box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5); }
}
/* PC: 왼쪽에 가벼운 종이 한 장. 오른쪽 2/3는 경내가 그대로 보인다 */
@media (min-width: 1000px) and (min-height: 600px) {
  #gate { justify-content: flex-start; align-items: center; padding: 0 0 0 max(6vw, 40px); background: linear-gradient(to right, rgba(12, 16, 18, 0.36), rgba(12, 16, 18, 0) 40%); }
  #gate .gate-paper { width: 360px; padding: 42px 30px 24px; max-height: calc(100dvh - 48px); }
  #gate .gate-more { gap: 0 18px; }
  #gate h1 { font-size: 62px; }
  html:not(:lang(ko)) #gate h1 { font-size: 50px; }
  .gate-seal { width: 34px; height: 34px; right: -36px; }
}
/* 47차 (원어민 검토 6인): 떠 있는 안내 줄·말씀 띠가 밝은 하늘·바위 위에서 흐리고, 안내 카드 부제가 옅었다 */
.hint { background: rgba(22, 28, 26, 0.58); padding: 6px 14px; border-radius: 14px; text-shadow: none; color: #fbf6ea; }
.saying { background: rgba(22, 26, 27, 0.52); }
.dest-list button small, .grid-buttons button small { color: #4a544b; }
/* 47차 (태국어 원어민 검토): 태국어는 띄어쓰기 없이 낱말 사이에서 줄을 바꿔야 한다 — keep-all·anywhere가 낱말 가운데를 잘랐다.
   브라우저 사전 줄바꿈(word-break: normal)을 쓰고 엄격한 줄바꿈 규칙을 켠다 */
html:lang(th) :is(body, .saying, .toast, .hint, .lede, .fine, p, small, b, button, li, label, .practice-place-panel) { word-break: normal; overflow-wrap: normal; line-break: strict; }
/* 대숲 메아리 판이 떠 있는 동안 위쪽 말씀 띠는 쉰다 (서로 겹쳐 둘 다 가렸다) */
body:has(.bamboo-board:not([hidden])) .saying { display: none; }
/* 말씀 띠: 석굴·마애불의 밝은 바위 위에서도 읽히게 한 단계 더 짙게 */
.saying { background: rgba(20, 24, 24, 0.66); }
/* 47차 (원어민 검토): 조이스틱 '이동' 글자가 거의 보이지 않았다 */
.navigation-pad-label { color: rgba(255, 250, 238, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* 48차: 동물 친구 대사 — 3D 판 글씨 대신 화면 글자 (어떤 해상도에서도 또렷하게) */
.animal-line48{position:fixed;left:0;top:0;z-index:7;pointer-events:none;opacity:0;visibility:hidden;max-width:min(78vw,340px);box-sizing:border-box;padding:16px 14px 9px;border-radius:20px;background:rgba(255,251,242,.97);border:2px solid rgba(43,36,32,.72);box-shadow:0 4px 14px rgba(20,16,12,.18);color:#2b2420;font:600 15px/1.4 var(--sans,system-ui),sans-serif;text-align:center;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty;will-change:transform,opacity}
.animal-line48.on{visibility:visible}
.animal-line48::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:inherit;border-right:2px solid rgba(43,36,32,.72);border-bottom:2px solid rgba(43,36,32,.72)}
.animal-line48 b{position:absolute;left:14px;top:-12px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 10px;border-radius:12px;background:#c8553a;color:#fffaf0;font-weight:700;font-size:13px;line-height:1.3}
.animal-line48 span{display:block}
/* 48차 2차 검수: 가까운 동물 친구에게도 손님처럼 머리 위 이름표 (사람 이름표와 같은 결, 조금 옅게) */
.animal-tag48{position:fixed;left:0;top:0;z-index:6;pointer-events:none;visibility:hidden;padding:1px 8px 2px;border-radius:10px;background:rgba(20,16,12,.32);color:#fffaf0;font:700 13px/1.35 var(--sans,system-ui),sans-serif;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45);opacity:.88;will-change:transform}
.animal-tag48.on{visibility:visible}
@media (min-width:768px){.animal-line48{font-size:16px}}

/* 48차: 왼쪽 위 — 작게, 한지 띠에 붓글씨 날짜(불기·서기)와 시각, 붉은 「고요」 낙관 */
#hud .hud-left{padding:5px 10px 6px 7px;border-radius:12px;gap:1px;background:linear-gradient(180deg,rgba(250,245,233,.95),rgba(242,234,216,.95));border:1px solid rgba(120,96,64,.28);box-shadow:0 2px 10px rgba(30,24,16,.12)}
.clock{gap:6px;align-items:center}
.clock-face{width:30px;height:17px}
.clock-arc{stroke:rgba(120,96,64,.6);stroke-width:1.4}
.clock-horizon{stroke:rgba(120,96,64,.35)}
.clock.night .clock-arc{stroke:rgba(80,90,120,.45)}
.moon-shade{fill:#e9e0cc}
.clock-text{line-height:1.15;min-width:0}
.clock-date{font-family:"Song Myung",var(--serif);font-weight:400;font-size:13.5px;letter-spacing:.03em;color:#2a221c;white-space:nowrap}
[data-brush48="ja"] .clock-date{font-family:"Yuji Syuku",var(--serif);font-size:13.5px}
[data-brush48="zh"] .clock-date{font-family:"Ma Shan Zheng",var(--serif);font-size:15px}
[data-brush48=""] .clock-date{font-family:var(--serif);font-size:12.5px;font-weight:600}
.clock-line{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.clock-line .clock-time{font-family:"Song Myung",var(--serif);font-size:13.5px;letter-spacing:.04em;color:#2a221c}
.clock-line .clock-name{font-family:var(--sans);font-size:11px;font-weight:500;opacity:.7;letter-spacing:.02em}
.clock-seal{flex:none;align-self:center;width:18px;padding:2px 0;border-radius:3px;background:#b8432f;color:#fff3e6;font-family:var(--serif);font-weight:700;font-size:8.5px;line-height:1.05;text-align:center;writing-mode:vertical-rl;letter-spacing:.05em;box-shadow:inset 0 0 0 1px rgba(255,240,220,.35);opacity:.9}
#hud .room{font-size:10.5px;opacity:.62;padding-left:2px}
@media(max-width:420px){.clock-date{font-size:12.5px}.clock-line .clock-time{font-size:12.5px}.clock-face{width:24px;height:14px}.clock-seal{display:none}}

/* 48차 (2): 흰 상자 없이 — 경내 위에 먹·한지빛 글씨만 은은하게 (낮엔 먹색 그림자, 밤엔 달빛) */
#hud .hud-left{background:none;border:0;box-shadow:none;padding:4px 6px;gap:0}
#hud .room{display:none}
#hud .room.offline{display:block;font-size:11px;opacity:.85;color:#fff7e5;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.clock-date,.clock-line .clock-time{color:#fffaf0;text-shadow:0 0 2px rgba(20,16,12,.55),0 1px 6px rgba(20,16,12,.45)}
.clock-line .clock-name{color:#fffaf0;opacity:.8;text-shadow:0 1px 4px rgba(20,16,12,.6)}
.clock-arc{stroke:rgba(255,246,226,.7)}
.clock-horizon{stroke:rgba(255,246,226,.45)}
.clock.night .clock-arc{stroke:rgba(220,228,255,.55)}
.moon-shade{fill:#3a4048}
.clock-face{filter:drop-shadow(0 1px 2px rgba(20,16,12,.45))}
.clock-seal{opacity:.78;box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* 48차 (2): 알림 권유 카드도 작게·옅게 — 경내를 덮지 않게 (글 한 줄 + 작은 단추) */
.service-invite{width:auto;max-width:min(88vw,340px);padding:8px 10px 8px 14px;border-radius:14px;background:#22362dcc;box-shadow:0 4px 14px #0002;display:flex;align-items:center;gap:10px}
.service-invite p{margin:0;font-size:13px;line-height:1.4}
.service-invite div{flex:none;gap:4px}
.service-invite button{min-height:36px;padding:0 12px;font-size:13px}
/* 48차: [더 보기]가 어두운 카드 위 12px 흐린 글씨라 읽히지 않았다 → 작은 칩으로 (글씨 13px, 테두리) */
#ctx.object-prompt37 .ctx-local-actions summary{font-size:13px;font-weight:600;margin-top:4px;padding:0 12px;border-radius:999px;background:#24372dd9;border:1px solid #f3e6c455;color:#fff8e8;text-shadow:0 1px 2px #0008}
/* 48차 (칸 넘침 자동 검사): 폰의 수행 자리 띠에서 안내 글이 75 px 칸에 두 줄로 잘려 「…」로 숨었다 →
   안내는 한 줄 전체로, 단추는 그 아래 줄. 경내 방문자 수 줄은 말줄임 대신 두 줄까지 감싼다 */
@media(max-width:540px) {
  .practice-place-panel:not(.practice-scribe) { grid-template-columns:auto auto 1fr; }
  .practice-place-panel:not(.practice-scribe) p { grid-column:1 / -1; grid-row:2; display:block; -webkit-line-clamp:unset; overflow:visible; margin:0 0 4px; }
  .practice-place-panel:not(.practice-scribe) button { grid-row:3; }
}
.room { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* 일본어·중국어에는 낱말 사이 띄어쓰기가 없어 keep-all이면 문장 전체가 한 덩이가 되어 칸 밖으로 나갔다 → 글자 사이에서 줄을 바꾸고, 금칙(、。」 등)은 지킨다 */
html:is(:lang(ja), :lang(zh)) :is(body, body *) { word-break: normal; line-break: strict; }
/* 48차 (마당 검수 P1-3): 기원 타종 중 안내 한 줄이 사람 몸 위에 얹혔다 → 타종 시점에서는 위쪽(말씀 줄 아래)으로 */
body.bell-ritual48 .hint { top: calc(var(--st) + 64px); bottom: auto; }
/* 48차 (마당 검수 P1-1·P2): 환영 카드가 아바타를 통째로 덮었다 → 화면을 어둡게 하지 않는 위쪽 작은 카드 (누르는 곳만 받는다) */
#welcomeSheet { align-items: flex-start; background: transparent; pointer-events: none; padding: calc(var(--st) + 62px) 12px 0; animation: none; }
#welcomeSheet .sheet { pointer-events: auto; width: min(400px, 100%); border-radius: 18px; padding: 14px 18px 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); }
#welcomeSheet .sheet::before { display: none; }
#welcomeSheet .seal.big { width: 34px; height: 34px; font-size: 18px; margin-bottom: 2px; }
#welcomeSheet h2 { font-size: 18px; margin: 2px 0 4px; }
#welcomeSheet .lede { font-size: 13.5px; margin: 0 0 8px; }
/* 48차 (P2): PC에서 길 안내·수첩·소원등 시트가 가운데 아래에서 나를 덮었다 → 넓은 화면에서는 오른쪽에 세우고 가림막을 옅게 */
@media (min-width: 1000px) and (min-height: 600px) {
  .sheet-wrap:not(#gate):not(#farewell):not(#welcomeSheet) { justify-content: flex-end; align-items: center; padding: 0 24px; background: rgba(14, 16, 18, 0.16); }
}
@media (max-width: 720px) { #welcomeSheet .seal.big { display: none; } #welcomeSheet .sheet { padding: 12px 16px; } #welcomeSheet .row button { min-height: 40px; padding: 8px 18px; } }
/* 48차 (마당 검수 P2): 해·달 시계가 24 px로 작고 밤 달은 어둠 위 검은 점이었다 → 조금 크게, 달은 밝은 달빛과 옅은 빛무리, 그림자 쪽은 밤하늘색 */
.clock-face{width:40px;height:22px}
@media(max-width:420px){.clock-face{width:34px;height:19px}}
.clock.night .moon-lit{fill:#fff3c4}
.clock.night .moon{filter:drop-shadow(0 0 3px rgba(255,240,190,.95))}
.moon-shade{fill:#26304a;fill-opacity:.78}
/* 48차 (P2): 밤 등불 위 어두운 알림이 어둠에 묻혔다 → 옅은 달빛 테두리 */
.toast{border:1px solid rgba(255,244,220,.32);box-shadow:0 3px 14px rgba(0,0,0,.35)}
/* 48차: [더 보기] 옆 '⌄' 글자는 글꼴 밑줄에 붙어 축 처져 보였다 → 가운데 맞춘 그린 꺾쇠 */
#ctx.object-prompt37 .ctx-local-actions summary::after{content:"";width:6px;height:6px;margin-left:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;opacity:.85}
#ctx.object-prompt37 .ctx-local-actions[open] summary::after{content:"";transform:translateY(2px) rotate(225deg)}
/* 48차: 쉬는 동안 화면 요소를 옅게 (경내가 주인공) */
#actions,.hint{transition:opacity 1.2s ease}
body.ui-rest .hint{opacity:0}
body.ui-rest #hud .hud-right{opacity:.45;transition:opacity 1.2s ease}

/* 48차 (사용자: 알약형 버튼은 우리 안 쓴다, 통일하자 · 스크롤이 인터넷 창 같다):
   사물 위 단추는 모두 같은 둥근 모서리 사각(10px), [더 보기] 칩도 같은 모양. 펼친 목록의 스크롤은 얇은 한지빛 막대 */
#ctx.object-prompt37 button,#ctx.object-prompt37 .ctx-main,#ctx.object-prompt37 .ctx-more,#ctx.object-prompt37 .ctx-local-actions summary,.ctx button{border-radius:10px}
#ctx.object-prompt37 .ctx-local-actions[open]{scrollbar-width:thin;scrollbar-color:#e9dcbc88 transparent;padding-right:2px;max-height:168px;mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent)}
#ctx.object-prompt37 .ctx-local-actions[open]::-webkit-scrollbar{width:4px}
#ctx.object-prompt37 .ctx-local-actions[open]::-webkit-scrollbar-track{background:transparent}
#ctx.object-prompt37 .ctx-local-actions[open]::-webkit-scrollbar-thumb{background:#e9dcbc88;border-radius:4px}
#ctx.object-prompt37 .ctx-local-actions[open] summary{border-radius:10px}
/* 48차: 스님과 함께할 때 한 줄 자막 (말 대신 무엇이 일어나는지만). 아래 바 위, 화면 가운데 */
.monk-caption48{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 32px));box-sizing:border-box;
  padding:7px 14px;border-radius:12px;background:rgba(22,28,26,.62);color:#fbf6ea;font:500 14px/1.5 var(--serif,serif);text-align:center;word-break:keep-all;overflow-wrap:anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none;z-index:14;opacity:0;transition:opacity .7s ease}
.monk-caption48.show{opacity:1}
@media (max-width:520px){.monk-caption48{font-size:13px;bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}}
/* 48차 2차 검수 (P1-6): 흰 붓 글씨가 낮 하늘·흰 구름·소나무 가지 위에서 거의 읽히지 않았고, 폰에서는 「고요」 낙관이 빠졌다 →
   상자 없이, 글씨 뒤로 번지는 옅은 먹빛 안개(가장자리가 사라지는 타원) + 조금 더 짙은 먹 그림자. 폰에도 작은 낙관 */
#hud .hud-left{position:relative;isolation:isolate}
#hud .hud-left::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12px -26px -14px -14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,24,18,.42),rgba(30,24,18,.26) 55%,rgba(30,24,18,0));filter:blur(5px)}
.clock-date,.clock-line .clock-time{text-shadow:0 0 1px rgba(20,16,12,.85),0 0 3px rgba(20,16,12,.6),0 1px 8px rgba(20,16,12,.45)}
.clock-line .clock-name{opacity:.92;text-shadow:0 0 1px rgba(20,16,12,.85),0 1px 5px rgba(20,16,12,.6)}
@media(max-width:420px){.clock-seal{display:block;width:15px;font-size:7.5px;padding:2px 0}}
/* 48차 2차 검수 (P2-2): 폰 영어·베트남어에서 아래 버튼 넷의 글이 길어 오른쪽 정렬 줄이 왼쪽 화면 밖으로 밀렸고([Notebook]·[Sổ tay]),
   손가락 이동판(투명 160×150)이 맨 아래에서 [수첩] 위에 겹쳤다 → 좁은 화면에서는 버튼 줄을 양 끝까지 같은 폭으로 나누고 긴 이름은 두 줄로,
   이동판은 버튼 줄 위로 */
@media(max-width:540px){
}
@media(pointer:coarse){.navigation-pad{bottom:calc(var(--sb) + 52px);height:132px}}

/* 48차 남은 것 (사용자: 화면 가리는 요소 최소화 · 사물 막대와 걷기 안내가 다리를 덮었다)
   PC 걷기 안내도 폰처럼 위쪽 가운데 (말씀 자리. 안내가 떠 있는 동안 말씀은 숨는다). 사람은 화면 가운데 아래에 선다 */
@media (pointer: fine) and (min-height: 521px) {
  .hint { top: calc(var(--st) + 66px); bottom: auto; }
}
/* 폰 사물 막대: 좁은 화면 격자(오른쪽 칸 하나)에 [치기]·[마치기] 두 단추가 겹쳐 그려졌다 → 한 줄 */
@media (max-width: 520px) {
  .practice-hud.instrument-hud { display: flex; align-items: center; width: auto; }
  .practice-hud.instrument-hud button { padding: 6px 12px; }
}


/* ===== 48차 UI 3차 (3차 독립 검수 P2-2·P2-6·P2-7·P2-8·P2-18) ===== */
/* [더 보기]: 여섯까지는 감추지 않고 바로, 셋 이상은 두 칸 격자로 낮게. 안쪽 스크롤·스크롤 막대 없음 (7개 이상일 때만 접고, 펼쳐도 격자) */
body #ctx.object-prompt37:has(.ctx-more-grid),body.ui-in:not(.ui-sheet) #ctx.object-prompt37:has(.ctx-more-grid){max-width:min(252px,calc(100vw - 28px));min-width:200px}
#ctx.object-prompt37 .ctx-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:3px}
#ctx.object-prompt37 .ctx-more-grid.odd>.ctx-more:last-child{grid-column:1 / -1}
#ctx.object-prompt37 .ctx-local-actions[open]{max-height:none;overflow:visible;mask-image:none;padding-right:0}
#ctx.object-prompt37 .ctx-local-actions[open] summary{position:static}
/* 사물 위 단추 한 벌 (P2-7 마음등 마당: '소원등 걸기'는 작은 밝은 글, '걸린 등 둘러보기'는 큰 어두운 글이었다):
   주 단추 = 한지, 곁 단추 = 먹빛. 글씨 크기·굵기·높이·모서리는 같다 */
#ctx.object-prompt37 .ctx-main,#ctx.object-prompt37 .ctx-more{min-height:42px;padding:7px 10px;border-radius:10px;font:500 13px/1.3 var(--sans);letter-spacing:0;white-space:normal;overflow-wrap:break-word;text-align:center;justify-content:center}
#ctx.object-prompt37 .ctx-main b{font:500 13px/1.3 var(--sans);letter-spacing:0}
#ctx.object-prompt37 .ctx-more,#ctx.object-prompt37 .ctx-local-actions .ctx-more{display:flex;align-items:center;width:100%;margin-top:3px;color:#fff8e8;background:#22352bd6;border:1px solid #efe2c055;text-shadow:none;box-shadow:none}
#ctx.object-prompt37 .ctx-more-grid>.ctx-more{margin-top:0;min-height:40px;padding:6px;font-size:12.5px}
@media (hover:hover) and (pointer:fine){#ctx.object-prompt37 .ctx-more:hover{background:#2c4337e6}}

/* 아래 바 (P2-6): 쉬는 동안에도 어느 바탕(풀·흙·눈)에서나 읽히게 — 옅은 먹빛 바탕 + 한지빛 테두리, 옅어지는 정도를 줄인다.
   [한마디]는 산문 밖에서만 보이지만 자리는 늘 맡아 둔다 (맨 앞 칸) → 버튼이 3↔4개로 바뀌어도 [수첩]·[염주]·[길 안내] 자리는 그대로 */
body.ui-rest #actions{opacity:.66}
/* 폰: 네 칸을 늘 맡으면 칸이 좁아 'Notebook'이 낱말 중간에서 끊겼다 → 그림 위·글 아래 (탭 막대처럼), 낱말은 끊지 않는다 */
@media(max-width:540px){
}
@media(pointer:coarse){.navigation-pad{opacity:.34}}

/* 시계 낙관 (P2-8): 여섯 말 모두 같은 「고요」 붉은 도장 — 번역하지 않고, 바로 선 두 글자, 날짜와 10px 띄움, 두 줄 글의 가운데 */
.clock-seal,html .clock-seal{display:grid!important;place-items:center;flex:none;align-self:center;box-sizing:border-box;width:17px;height:32px;margin-left:10px;padding:0;border-radius:3px;
  writing-mode:vertical-rl;text-orientation:upright;font:700 9px/1 "Noto Serif KR","Nanum Myeongjo",var(--serif);letter-spacing:1px;color:#fff3e6;background:#b5402c;
  box-shadow:inset 0 0 0 1px rgba(255,240,220,.4),0 1px 3px rgba(0,0,0,.3);opacity:.86;transform:rotate(-3deg)}
@media(max-width:420px){.clock-seal,html .clock-seal{width:15px;height:28px;font-size:8px;margin-left:8px}}
.clock{flex-wrap:nowrap}
.clock-text{flex:0 1 auto;min-width:0}
/* 폰에서 일본어·중국어 붓글씨 날짜가 넓어 낙관이 밀렸다 → 좁은 화면에서 날짜 글씨를 조금 좁게 */
@media(max-width:420px){[data-brush48="ja"] .clock-date,[data-brush48="zh"] .clock-date{font-size:12.5px;letter-spacing:0}[data-brush48=""] .clock-date{font-size:12px}}

/* 첫 화면 (P2-18): 환영 카드가 떠 있는 동안 걷기 안내는 숨어 기다린다 (ui.js가 카드가 접힌 뒤 한 번 다시 띄운다) */
body:has(#welcomeSheet:not([hidden])) #hint{visibility:hidden}
/* 동물 말풍선 꼬리: 화면 가장자리·내 몸을 피해 말풍선을 옮겨도 꼬리는 말하는 동물을 가리킨다 (animals.js가 --tail-x를 쓴다) */
.animal-line48::after{left:calc(50% + var(--tail-x,0px))}

/* ======================================================================
   48차 UI 키트 (사용자 17번 — "그리드, 오와열 딱딱 맞추고 통일된 환경 · 공통모듈화")
   한 벌의 토큰(--k-*)과 부품(.kit-btn · .kit-icon · .kit-pop · #kitStop48 · .kit-rail · .kit-count)만 쓴다. js/ui-kit48.js
   격자 8px · 단추 높이 48(작게 44) · 모서리 10px · 아이콘은 글 왼쪽(장작 넣기 단추처럼) · 한지 바탕 + 먹 글씨
   화면 네 귀: 왼쪽 위 시계 / 오른쪽 위 메뉴 + 미니맵 / 왼쪽 아래 이동 패드(폰) / 오른쪽 아래 바닥 줄 [한마디][인사][염주] (체험 중 [그만])
   ====================================================================== */
:root{
  --k-u:8px;--k-gap:8px;--k-h:48px;--k-h-s:44px;--k-r:10px;--k-icon:22px;
  --k-ex:max(16px,env(safe-area-inset-left));--k-exr:max(16px,env(safe-area-inset-right));
  --k-eb:max(16px,env(safe-area-inset-bottom));--k-et:max(12px,env(safe-area-inset-top));
  --k-dock:calc(var(--k-eb) + var(--k-h) + 16px);
  --k-map:84px;
  --k-top:calc(var(--k-et) + 44px + var(--k-gap) + var(--k-map) + 16px);
  --k-paper:rgba(251,246,234,.94);--k-paper-press:#ece2cb;--k-ink:#2f3a33;--k-ink-soft:#66705f;
  --k-edge:rgba(122,96,62,.3);--k-lift:0 2px 0 rgba(122,96,62,.24),0 4px 14px rgba(16,22,20,.14);
  --k-glass:rgba(24,31,28,.62);--k-glass-ink:#f7f1e3;--k-glass-edge:rgba(255,244,222,.24);
  --k-accent:#254f43;--k-accent-ink:#fff8ec;--k-fs:15px;
  --sb:var(--k-eb);--dock-h:48px;--sr:var(--k-exr);--sl:var(--k-ex);
}
@media (min-width:720px){:root{--k-map:128px;--k-top:calc(var(--k-et) + 66px)}}
@media (orientation:landscape) and (max-height:520px){:root{--k-map:72px;--k-top:calc(var(--k-et) + 8px)}}

/* ---- 단추 ---- */
.kit-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;box-sizing:border-box;min-height:var(--k-h);margin:0;padding:0 16px 0 12px;
  border:1px solid var(--k-edge);border-radius:var(--k-r);background:var(--k-paper);color:var(--k-ink);box-shadow:var(--k-lift);
  font:600 var(--k-fs)/1.2 var(--sans);letter-spacing:0;white-space:nowrap;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .2s,transform .08s}
.kit-btn .kit-label{min-width:0}
.kit-svg{flex:none;width:var(--k-icon);height:var(--k-icon);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kit-btn:active{transform:translateY(1px);background:var(--k-paper-press)}
@media (hover:hover) and (pointer:fine){.kit-btn:hover{background:#fffaf0}.kit-btn.kit-quiet:hover{background:rgba(24,31,28,.78)}}
.kit-btn.kit-sm{min-height:var(--k-h-s);font-size:14px}
.kit-btn.kit-quiet{background:var(--k-glass);color:var(--k-glass-ink);border-color:var(--k-glass-edge);box-shadow:0 2px 10px rgba(0,0,0,.16)}
.kit-btn.kit-accent{background:var(--k-accent);color:var(--k-accent-ink);border-color:transparent}
.kit-btn[aria-pressed="true"]{background:#f3e3bd;border-color:#a9834a}
.kit-icon{display:inline-grid;place-items:center;box-sizing:border-box;width:var(--k-h);height:var(--k-h);margin:0;padding:0;border:1px solid var(--k-edge);border-radius:50%;
  background:var(--k-paper);color:var(--k-ink);box-shadow:var(--k-lift);cursor:pointer;touch-action:manipulation}
.kit-icon.kit-accent{background:var(--k-accent);color:var(--k-accent-ink);border-color:transparent}
.kit-icon.kit-quiet{background:var(--k-glass);color:var(--k-glass-ink);border-color:var(--k-glass-edge);box-shadow:none}
.kit-btn:focus-visible,.kit-icon:focus-visible{outline:3px solid #c98e44;outline-offset:2px}
/* 키 안내: 실제 키보드를 쓸 때만 (터치·화면 키보드에는 없다) */
.kit-key{display:none;margin-left:auto;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;place-items:center;border:1px solid currentColor;border-radius:5px;background:none;
  font:600 11px/1 var(--sans);opacity:.55}
html[data-input="kb"] .kit-key{display:inline-grid}
html:not([data-input="kb"]) kbd{display:none!important}
html:not([data-input="kb"]) .keyboard-guide{display:none}
/* 세는 칩 */
.kit-count{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--k-r);background:var(--k-glass);color:var(--k-glass-ink);font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums}

/* ---- 바닥 줄: 오른쪽 아래 한 줄. 칸은 늘 같은 자리 ([한마디]가 숨어도 자리는 남는다) ---- */
#actions.kit-row{position:fixed;left:auto;right:var(--k-exr);bottom:var(--k-eb);transform:none;z-index:30;display:grid;grid-template-columns:var(--k-h) 1fr 1fr;grid-auto-flow:column;
  align-items:center;gap:var(--k-gap);width:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;pointer-events:none}
#actions.kit-row>*{pointer-events:auto;min-width:0}
#actions.kit-row .kit-btn{width:100%}
#actions.kit-row .kit-chat[hidden]{display:inline-grid!important;visibility:hidden;pointer-events:none}
#actions .kit-greet{position:relative}
#actions #kitStop48{grid-column:2 / span 2;justify-content:center}
body.kit-busy #actions :is(.kit-greet,.kit-yeomju){display:none}
#actions .kit-chat[data-unread]{position:relative}
#actions .kit-chat[data-unread]::after{top:-2px;right:-2px}
/* 인사 고르기: 단추 바로 위로 세 개 (같은 폭, 8px 간격) */
.kit-pop{position:absolute;right:0;bottom:calc(100% + var(--k-gap));display:grid;gap:var(--k-gap);min-width:100%;z-index:2}
.kit-pop .kit-btn{width:100%}
/* 숨 고르기·앉아 쉬기: 줄은 남기되 옅게 (닿으면 또렷) */
body:is(.calm,.seated-quiet,.ui-rest) #actions.kit-row{opacity:.72;transition:opacity 1.2s}
body:is(.calm,.seated-quiet) #actions.kit-row,body:is(.calm,.seated-quiet) #actions.kit-row button{pointer-events:auto}
body:not(.ui-in) #actions.kit-row,body.ui-sheet #actions.kit-row{visibility:hidden}
/* 체험 화면이 다른 것을 다 감출 때(camp-hide 등)에도 바닥 줄([한마디]·[그만])은 남는다 */
body.camp-hide #actions.kit-row{opacity:1!important;pointer-events:none!important}
body.camp-hide #actions.kit-row>*{pointer-events:auto!important}
/* 모듈마다 따로 있던 끝내기 단추는 하나뿐인 [그만]으로 모였다 */
#practiceStop,#breathEnd{display:none!important}

/* ---- 체험 단추 줄: 바닥 줄 바로 위 오른쪽, 세로로 같은 폭 ---- */
.kit-rail{position:fixed;right:var(--k-exr);bottom:var(--k-dock);display:flex;flex-direction:column;align-items:stretch;gap:var(--k-gap);z-index:31;pointer-events:none}
.kit-rail>*{pointer-events:auto}

/* ---- 사물 곁 카드 (#ctx.object-prompt37): 같은 토큰 ---- */
body #ctx.object-prompt37,body.ui-in:not(.ui-sheet) #ctx.object-prompt37{padding:6px;gap:4px;border-radius:var(--k-r);background:rgba(28,40,33,.8);border:1px solid var(--k-glass-edge)}
#ctx.object-prompt37 .ctx-main,#ctx.object-prompt37 .ctx-more{min-height:var(--k-h-s);border-radius:8px;font:600 14px/1.25 var(--sans)}
#ctx.object-prompt37 .ctx-main{background:var(--k-paper);color:var(--k-ink);border:1px solid var(--k-edge)}
#ctx.object-prompt37 .ctx-main b{font:600 14px/1.25 var(--sans)}
#ctx.object-prompt37 .ctx-more-grid{gap:4px;margin-top:0}
#ctx.object-prompt37 .ctx-more,#ctx.object-prompt37 .ctx-local-actions .ctx-more{margin-top:0;font-weight:500}
#ctx.object-prompt37 .ctx-main kbd,#ctx .ctx-main kbd{display:none}
html[data-input="kb"] #ctx.object-prompt37 .ctx-main kbd{display:inline-grid}
.ctx button{border-radius:var(--k-r)}

/* ---- 알림·안내·말씀: 폰에서는 미니맵 아래 한 자리 ---- */
@media (max-width:719px){
  .toast,.saying{top:var(--k-top)}
  .hint,body .hint{top:var(--k-top);bottom:auto}
}
.toast,.saying{border-radius:var(--k-r)}

/* ---- 오른쪽 위: 메뉴 + 미니맵 (세로로, 오른쪽 끝 맞춤) ---- */
#hud .hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--k-gap)}
.minimap48{position:relative;display:block;width:var(--k-map);height:var(--k-map);margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;pointer-events:auto}
.minimap48 canvas{display:block;width:100%;height:100%;border-radius:50%}
.minimap48:focus-visible{outline:3px solid #c98e44;outline-offset:2px}
body:not(.ui-in) .minimap48,body.calm .minimap48{visibility:hidden}
/* 큰 지도 (길 안내 시트 맨 위) */
.map-sheet .map48-full{position:relative;margin:4px 0 12px;border-radius:var(--k-r);overflow:hidden;background:#e9dfc8;border:1px solid var(--k-edge)}
.map-sheet .map48-full canvas{display:block;width:100%;height:min(46dvh,360px);touch-action:manipulation;cursor:pointer}
@media (min-width:720px){.sheet.map-sheet{width:min(560px,100%)}}

/* ---- 이동 패드 (폰): 왼쪽 아래 넓은 빈 자리, 닿은 곳에 고리가 뜨는 거의 투명한 조이스틱 ---- */
@media (pointer:coarse){
  #navigationControls .navigation-pad{display:block;left:0;bottom:var(--k-dock);width:min(52vw,240px);height:min(40vh,280px);border:0;border-radius:0;background:transparent!important;opacity:1;
    --pad-x:calc(var(--k-ex) + 44px);--pad-y:calc(100% - 52px)}
  #navigationControls .navigation-ring{inset:auto;left:calc(var(--pad-x) - 44px);top:calc(var(--pad-y) - 44px);width:88px;height:88px;border:1.5px solid rgba(255,248,232,.34);background:rgba(20,28,24,.06);
    border-radius:50%;opacity:.5;transition:opacity .35s}
  #navigationControls .navigation-knob{width:34px;height:34px;left:calc(var(--pad-x) - 17px);top:calc(var(--pad-y) - 17px);background:rgba(255,248,232,.3);border:1px solid rgba(255,255,255,.4);opacity:.55;transition:opacity .35s}
  #navigationControls .navigation-pad.active .navigation-ring{opacity:1;border-color:rgba(255,236,190,.7);background:rgba(20,28,24,.16);transition:none}
  #navigationControls .navigation-pad.active .navigation-knob{opacity:1;background:rgba(255,248,232,.72);transition:none}
  #navigationControls .navigation-pad.walked:not(.active) :is(.navigation-ring,.navigation-knob){opacity:.2}
}

/* ---- 한마디: 입력 한 줄 격자 [닫기][입력][보내기], 그 위 짧은 말 넷, 맨 위 최근 말 ---- */
.say-bar,body .say-bar{position:fixed;left:auto;right:var(--k-exr);transform:none;bottom:calc(var(--k-dock) + var(--kb-lift48,0px));z-index:32;box-sizing:border-box;
  width:min(calc(100vw - var(--k-ex) - var(--k-exr)),440px);display:grid;grid-template-columns:var(--k-h) minmax(0,1fr) var(--k-h);
  grid-template-areas:"log log log" "quick quick quick" "close field send";gap:var(--k-gap);align-items:center;padding:var(--k-gap);flex-wrap:nowrap;
  border:1px solid var(--k-edge);border-radius:var(--k-r);background:rgba(251,246,234,.97);box-shadow:0 6px 24px rgba(16,22,20,.22)}
.say-bar[hidden]{display:none}
.say-bar .say-log{grid-area:log;margin:0;padding:0 4px 8px;order:0}
.say-bar .say-quick{grid-area:quick;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--k-gap)}
.say-bar .say-quick .kit-btn{justify-content:center;padding:0 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;box-shadow:none}
.say-bar[data-mode="shout"] .say-quick{display:none}
.say-bar .say-field{grid-area:field;position:relative;min-width:0}
.say-bar .say-input{box-sizing:border-box;width:100%;height:var(--k-h);min-height:var(--k-h);padding:0 44px 0 12px;border:1px solid var(--k-edge);border-radius:var(--k-r);background:#fffdf7;font:500 16px/1.2 var(--sans)}
.say-bar .say-input:focus{border-color:var(--k-accent)}
.say-bar .say-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px}
.say-bar .say-close{grid-area:close;box-shadow:none}
.say-bar .say-send{grid-area:send}
.say-bar[data-mode="shout"] .say-send{background:#5d6f37}

/* ---- 체험 패널 한 벌: 모두 바닥 줄 위(--k-dock), 같은 가장자리(--k-exr)·같은 모서리(--k-r) ---- */
body :is(.coast-rest,.hearth-panel){bottom:var(--k-dock);border-radius:var(--k-r)}
body :is(.practice-place-panel,.contemplative-panel){bottom:var(--k-dock);right:var(--k-exr);border-radius:var(--k-r)}
body .guided-practice{border-radius:var(--k-r)}
@media (max-width:719px){body .guided-practice{top:var(--k-top)}}
body .practice-hud{border-radius:var(--k-r);bottom:var(--k-dock)}
body :is(.practice-place-panel,.contemplative-panel,.hearth-panel,.coast-rest,.guided-practice,.practice-hud) button:not([hidden]):not(.kit-icon){border-radius:var(--k-r);min-height:var(--k-h-s)}
/* 앉아 바라보기 띠(바다·연지): 글 한 줄만 남았으니 낮고 가운데로 */
body .coast-rest.coast-rest-sea,body .coast-rest:not(:has(button:not([hidden]))){padding:12px 16px;width:auto;max-width:min(calc(100vw - 32px),420px);pointer-events:none}


html:not([data-input="kb"]) .kb-only,html[data-input="kb"] .touch-only{display:none}
body.ui-sheet .say-bar{visibility:hidden}
/* 긴 말(영어·베트남어)에서도 바닥 줄은 화면 안: 칸은 같은 폭으로 줄고 글은 두 줄까지 */
#actions.kit-row{max-width:calc(100vw - var(--k-ex) - var(--k-exr));grid-template-columns:var(--k-h) minmax(0,1fr) minmax(0,1fr)}
#actions.kit-row .kit-btn .kit-label{white-space:normal;line-height:1.15;overflow-wrap:normal;word-break:keep-all}
#actions.kit-row .kit-btn{padding:0 12px 0 10px}
/* 1차 페르소나 검수 반영: 아이콘 단추도 같은 10px 모서리 · 한마디 닫기는 오른쪽 위 · 체험 단추 줄과 [그만]은 같은 폭 */
.kit-icon{border-radius:var(--k-r)}
:root{--k-col:96px}@media (min-width:720px){:root{--k-col:120px}}
#actions.kit-row{grid-template-columns:var(--k-h) minmax(min(var(--k-col),calc((100vw - var(--k-ex) - var(--k-exr) - var(--k-h) - 2 * var(--k-gap)) / 2)),1fr) minmax(min(var(--k-col),calc((100vw - var(--k-ex) - var(--k-exr) - var(--k-h) - 2 * var(--k-gap)) / 2)),1fr)}
.kit-rail{width:calc(2 * var(--k-col) + var(--k-gap))}
.kit-rail .kit-btn{width:100%}
.say-bar,body .say-bar{grid-template-columns:minmax(0,1fr) var(--k-h);grid-template-areas:"log log" "quick close" "field send"}
.map-sheet .sheet-close{position:absolute;top:12px;right:12px;z-index:2}
.map-sheet h2{padding-right:56px}
.say-bar .say-quick .kit-btn{font-size:13px}.say-bar .say-quick .kit-label{overflow:hidden;text-overflow:ellipsis}