/* 해운사 — 실사 산사 위의 한지 패널. 낮·노을은 밝은 한지, 새벽·밤은 먹빛 한지. */
:root {
  --ink: #2a241d;
  --ink-soft: #6a5f52;
  --paper: rgba(250, 246, 237, 0.86);
  --paper-solid: #f8f3e9;
  --paper-tint: rgba(255, 255, 255, 0.4);
  --paper-line: rgba(70, 52, 34, 0.14);
  /* 유리 메뉴판(아래 메뉴): 뒤가 비치는 반투명 + 살짝 흐림 + 가는 밝은 테두리.
     처음엔 42%·blur 20px 였는데 뒤 돌바닥이 다 뭉개져 예전 판과 거의 같아 보였음(사용자: "바꾼 거 맞니") → 16~22%·blur 6px */
  --glass: rgba(255, 255, 255, 0.22);
  --glass-line: rgba(255, 255, 255, 0.55);
  --glass-hover: rgba(255, 255, 255, 0.3);
  --glass-ink: #2a241d;
  --glass-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  --dan-red: #b8432f;
  --dan-green: #23706b;
  --dan-gold: #d6a23f;
  --shadow: 0 18px 48px rgba(18, 14, 10, 0.3);
  --radius: 18px;
  --font-title: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --font-body: 'Gowun Dodum', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-brush: 'Nanum Brush Script', 'Gowun Batang', serif; /* 등·연등·기와에 쓰는 붓글씨 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --hanji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-phase='night'],
body[data-phase='dawn'] {
  --ink: #f1e9dc;
  --ink-soft: #b8ae9f;
  --paper: rgba(24, 27, 38, 0.8);
  --paper-solid: #222634;
  --paper-tint: rgba(255, 255, 255, 0.06);
  --paper-line: rgba(255, 255, 255, 0.12);
  --glass: rgba(28, 32, 46, 0.16);
  --glass-line: rgba(255, 255, 255, 0.32);
  --glass-hover: rgba(255, 255, 255, 0.14);
  --glass-ink: #fffaf0;
  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1c2230;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--dan-gold); outline-offset: 2px; }

/* ── 장면 ─────────────────────────────────── */
.scene { position: fixed; inset: 0; overflow: hidden; }
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 10, 16, 0.42), transparent 20%, transparent 72%, rgba(8, 10, 16, 0.32));
}
.parallax { position: absolute; inset: 0; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stage { position: absolute; }
.stage.panning { animation: pan 80s ease-in-out infinite alternate; }
.zoom {
  position: absolute;
  inset: 0;
  transform-origin: 40% 72%;
  animation: kenburns 70s ease-in-out infinite alternate;
}
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.bg.show { opacity: 1; }
.sky,
.yard { position: absolute; inset: 0; pointer-events: none; }
/* 사진 마당: 내 캐릭터가 걸어갈 자리 표시 · 걷는 동안 그림 캐릭터는 통통 */
.walk-mark { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 12px; margin: -6px 0 0 -17px; border: 2px solid rgba(255, 244, 220, 0.9); border-radius: 50%; animation: walkMark 0.9s ease-out forwards; pointer-events: none; z-index: 1; }
@keyframes walkMark { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(1.4); } }
.pilgrim.walking .figure { animation: walkBob 0.36s ease-in-out infinite; } /* 나(마우스로 옮김)·거니는 도반·인물 */
@keyframes walkBob { 50% { transform: translateY(-4%); } }
/* 날씨 덮개(scene.js createParticles): 흐림·안개·비·눈이면 마당을 조금 어둡게(밤엔 절반). 안개 낀 낮은 회색 빛으로 뿌옇게 */
.weather-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgb(40, 48, 60); opacity: var(--veil, 0); transition: opacity 4s ease; }
body[data-weather="fog"]:not([data-phase="night"]) .weather-veil { background: rgb(196, 202, 208); }
body[data-weather="snow"]:not([data-phase="night"]) .weather-veil { background: rgb(150, 162, 176); }
.fx {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes pan { from { transform: translateX(0); } to { transform: translateX(var(--pan)); } }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.09); } }

/* ── 하늘 연등 ─────────────────────────────── */
.lantern {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2.1%;
  aspect-ratio: 0.575;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: bob var(--dur, 6s) ease-in-out var(--delay, 0s) infinite, lanternDrift calc(var(--dur, 6s) * 2.3) ease-in-out var(--delay, 0s) infinite alternate;
  filter: drop-shadow(0 0 0.5vw color-mix(in srgb, var(--c) 65%, transparent));
  transition: filter 0.4s, opacity 2.5s ease, visibility 2.5s;
}
/* 연등은 밤하늘에만 떠 있다 */
body:not([data-phase='night']) .sky .lantern { opacity: 0; visibility: hidden; }
@keyframes lanternDrift { from { translate: -0.35vw 0; } to { translate: 0.35vw 0; } }
/* 막 띄운 연등: 마당 앞줄에서 바람에 살짝 흔들리며 9초 동안 제자리로 떠오른다 */
.lantern.rising { animation: lanternRise 9s cubic-bezier(0.22, 0.55, 0.3, 1) both, bob var(--dur, 6s) ease-in-out 9s infinite; }
/* 연등 태우기: 밝게 타오르며 작아지고 위로 날아가 사라진다(lanterns.js BURN_MS 3.2초) */
.lantern.burning { animation: lanternBurn 3.2s ease-in forwards; pointer-events: none; }
@keyframes lanternBurn {
  0% { filter: drop-shadow(0 0 0.5vw var(--c)); }
  25% { filter: drop-shadow(0 0 1.6vw #ffb347) brightness(1.9) saturate(1.4); scale: 1.08; }
  70% { filter: drop-shadow(0 0 2vw #ff8a2a) brightness(2.3) sepia(0.6); scale: 0.6; translate: 0 -2.5vw; opacity: 0.85; }
  100% { filter: drop-shadow(0 0 0.4vw #ff8a2a) brightness(2.5); scale: 0.1; translate: 0 -6vw; opacity: 0; }
}
@keyframes lanternRise {
  0% { translate: var(--fromX) var(--fromY); scale: 0.5; opacity: 0; }
  8% { opacity: 1; }
  30% { translate: calc(var(--fromX) * 0.72 + 1.2vw) calc(var(--fromY) * 0.66); scale: 0.7; }
  62% { translate: calc(var(--fromX) * 0.3 - 0.9vw) calc(var(--fromY) * 0.27); scale: 0.88; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}
.l-body { animation: candle 3.1s ease-in-out infinite alternate; }
@keyframes candle { 0% { filter: brightness(0.95); } 40% { filter: brightness(1.12); } 70% { filter: brightness(1.0); } 100% { filter: brightness(1.16); } }
.night-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(40, 52, 92, 0.1); color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.lantern:hover { filter: drop-shadow(0 0 1.1vw var(--c)) brightness(1.12); }
body[data-phase='night'] .lantern,
body[data-phase='dawn'] .lantern { filter: drop-shadow(0 0 1vw var(--c)) brightness(1.1); }
.l-body { position: absolute; inset: 0; --lit: 0.7; }
.lantern.mine::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -24%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px #fff;
  transform: translateX(-50%);
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0) rotate(-2deg); }
  50% { transform: translate(-50%, -14%) rotate(2deg); }
}

/* ── 마당의 도반 ───────────────────────────── */
.pilgrim {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);
  width: 5.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -100%) scale(var(--scale));
  transform-origin: 50% 100%;
  pointer-events: auto;
}
.pilgrim:hover .name { background: rgba(10, 12, 18, 0.72); }
.yard-menu { width: auto; min-width: 160px; text-align: center; }
.yard-menu .wish { margin-bottom: 10px; }
.pilgrim .dongja { width: 100%; height: auto; overflow: visible; animation: breathe 4.2s ease-in-out var(--delay) infinite; }
.pilgrim .name {
  margin-top: -2px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(10, 12, 18, 0.5);
  color: #fff;
  font-size: clamp(10px, 0.72vw, 13px);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.pilgrim.me .name { background: var(--dan-red); }
.pilgrim .bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding: 4px 9px;
  border-radius: 10px;
  background: #f8f3e9;
  color: #2a241d;
  font-size: clamp(10px, 0.78vw, 13px);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.3s, transform 0.3s;
}
.pilgrim .bubble.show { opacity: 1; transform: translate(-50%, 0); }

.dongja .upper { transform-box: view-box; transform-origin: 50px 100px; }
.dongja .body { transform-box: view-box; transform-origin: 50px 124px; }
.dongja.bow .upper { animation: bowUpper 1.3s ease-in-out; }
.dongja.bow .body { animation: bowBody 1.3s ease-in-out; }
.dongja .glow { animation: flicker 2.4s ease-in-out infinite; }

@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes bowUpper { 0%, 100% { transform: none; } 45%, 62% { transform: translateY(26px) scale(0.9, 0.7); } }
@keyframes bowBody { 0%, 100% { transform: none; } 45%, 62% { transform: scaleY(0.62); } }
@keyframes flicker { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.5; } }

/* ── 상단 ─────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: calc(14px + var(--safe-t)) 18px 0;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
/* 관리자 모드 들어가는 점(사용자: "오른쪽 맨 위에 점 하나 찍어 줘, 그거 클릭하면 들어가게") — 소리 버튼 바깥 모서리 여백(위 10~14px·오른쪽 12~18px) 안에 */
.admin-dot { position: fixed; top: var(--safe-t); right: 0; z-index: 11; display: block; width: 12px; height: 12px; }
.admin-dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }
.admin-dot:hover::after, .admin-dot:focus-visible::after { background: #fff; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.brand > div { min-width: 0; }
.brand p.weather-line { margin-top: 1px; opacity: 0.8; overflow: visible; text-overflow: clip; } /* 오른쪽 빈자리(소리 버튼 왼쪽)까지 이어서 — 기온이 잘리지 않게 */ /* 날씨·위치(사용자: "날씨 표시를 해 주고 위치도 표시해 줘, 그래야 오해가 없지") */
@media (max-width: 600px) { .brand { min-width: 9.6em; } } /* '지금 불자 N명 함께'는 다 보이게(오른쪽 버튼이 줄을 바꿔 내려가도 장소 줄이 그 아래로 따라감) */
.brand h1 { margin: 0; font-family: var(--font-title); font-size: 24px; font-weight: 700; letter-spacing: 0.05em; }
.brand p { margin: 2px 0 0; font-size: 12.5px; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 한 줄로만(휴대폰 카카오 브라우저에서 여러 줄로 늘어나 장소 버튼 줄과 겹쳤음) */
.seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--dan-red);
  color: #f7efe0;
  font-family: var(--font-title);
  font-size: 22px;
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(255, 240, 220, 0.25);
  transform: rotate(-4deg);
}
.seal.big { width: 58px; height: 58px; margin: 0 auto; font-size: 31px; }
.status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 1 auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(14, 16, 24, 0.38);
  color: #fff;
  font-size: 13px;
  text-shadow: none;
  white-space: nowrap;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
button.chip { cursor: pointer; }
button.chip:hover { background: rgba(14, 16, 24, 0.55); }
.chip.merit span { font-size: 12px; opacity: 0.8; }
.chip strong { font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.merit strong { color: #ffd98a; font-size: 14px; }
.chip.icon { justify-content: center; width: 34px; padding: 0; }
.chip.icon svg { width: 18px; height: 18px; fill: #fff; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.chip.icon .mix { fill: none; }
.mixer { width: 236px; padding: 14px 16px 12px; }
.temple-menu { width: 248px; padding: 14px 16px 12px; }
.temple-menu h3 { margin: 0 0 8px; font-size: 14px; }
.temple-go { display: grid; gap: 2px; margin: 4px -8px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.temple-go:hover, .temple-go:focus-visible { background: rgba(0, 0, 0, 0.06); }
.temple-go strong { font-weight: 700; font-size: 15px; }
.temple-go span { font-size: 12px; color: var(--ink-soft, #6a5f52); }
.mixer h3 { margin: 0 0 8px; font-size: 14px; }
.mixer label { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.mixer input[type=range] { width: 100%; accent-color: var(--dan-red, #b5432c); }
.mixer output { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft, #6a5f52); font-size: 12px; }
.mixer .note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-soft, #6a5f52); line-height: 1.4; }
.chip.icon .wave { fill: none; opacity: 0.25; transition: opacity 0.3s; }
.chip.icon.on .wave { opacity: 1; }

/* ── 정시 예불 배너 · 합장 알림 ─────────────── */
.service-banner {
  position: fixed;
  top: calc(66px + var(--safe-t));
  left: 50%;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(214, 162, 63, 0.55);
  border-radius: 999px;
  background: var(--hanji), var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.service-banner.live { border-color: var(--dan-gold); box-shadow: 0 0 0 3px rgba(214, 162, 63, 0.25), var(--shadow); }
.service-mark { color: var(--dan-gold); font-family: var(--font-title); }
.service-banner.live .service-mark { animation: flicker 2.4s ease-in-out infinite; }
.service-text { font-variant-numeric: tabular-nums; }

/* 알림은 예불 배너 아래 가운데에 쌓는다(오른쪽 위에 두면 배너와 겹친다) */
.notices {
  position: fixed;
  left: 50%;
  top: calc(122px + var(--safe-t));
  z-index: 45;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  transform: translateX(-50%);
}
.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  background: var(--hanji), var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  animation: noticeIn 0.3s ease-out;
}
.notice-actions { display: flex; flex: none; gap: 6px; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-8px); } }

/* ── 하단 메뉴 ─────────────────────────────── */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-b));
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--glass); /* 사용자: "글래스 메뉴판 스타일로, 투명도 있게" — 예전엔 한지 무늬 + 80~86% 불투명 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 26px rgba(0, 0, 0, 0.16);
  transform: translateX(-50%);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
}
.dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 74px;
  height: 58px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dock button:hover { background: var(--glass-hover); color: var(--ink); }
.dock button { color: var(--glass-ink); text-shadow: var(--glass-shadow); } /* 비치는 바탕 위에서도 글씨가 읽히게 */
.dock button.on { background: var(--dan-red); color: #fff8ee; }
.dock svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 패널 ─────────────────────────────────── */
.panel {
  position: fixed;
  right: 20px;
  bottom: calc(96px + var(--safe-b));
  z-index: 15;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 200px);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--hanji), var(--paper);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.panel.open { opacity: 1; pointer-events: auto; transform: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.panel-head h2 { margin: 0; font-family: var(--font-title); font-size: 19px; font-weight: 700; }
.close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-tint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.panel-body { overflow: auto; overscroll-behavior: contain; padding: 4px 18px 18px; }

.seg { display: flex; gap: 3px; margin: 4px 0 12px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.06); }
body[data-phase='night'] .seg,
body[data-phase='dawn'] .seg { background: rgba(255, 255, 255, 0.07); }
.seg button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}
.seg button.on { background: var(--paper-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

.btn {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: var(--paper-solid);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s, opacity 0.2s;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn.primary { border-color: transparent; background: var(--dan-red); color: #fff8ee; box-shadow: 0 6px 16px rgba(184, 67, 47, 0.32); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.small { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.hint { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; text-align: center; line-height: 1.5; }
.section { margin: 18px 0 8px; color: var(--ink-soft); font-family: var(--font-title); font-size: 15px; font-weight: 400; }
.empty { color: var(--ink-soft); font-size: 13.5px; text-align: center; }

/* ── 수행 ─────────────────────────────────── */
.tally { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 4px; }
.tally .label,
.tally .sub { color: var(--ink-soft); font-size: 12.5px; }
.tally .count { font-family: var(--font-title); font-size: 36px; font-weight: 400; font-variant-numeric: tabular-nums; }
.practice-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0; }

.moktak, .ring {
  width: 230px;
  max-width: 72%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.moktak svg, .ring-svg { display: block; width: 100%; height: auto; }
.moktak-body { fill: #8a5326; }
.moktak .mallet { transform-box: view-box; transform-origin: 150px 6px; }
.moktak.hit svg { animation: knock 0.18s ease-out; }
.moktak.hit .mallet { animation: mallet 0.18s ease-out; }
@keyframes knock { 35% { transform: scale(0.96) translateY(3px); } }
@keyframes mallet { 40% { transform: rotate(-16deg); } }

.ring-string { stroke: rgba(150, 100, 50, 0.4); stroke-width: 1.2; }
.bead { fill: #7b4a2a; transition: fill 0.25s; }
.bead.passed { fill: var(--dan-gold); }
.bead.current { fill: #fff3cf; stroke: var(--dan-gold); stroke-width: 1; }
.bead.guru { fill: var(--dan-red); }
.tassel { stroke: var(--dan-red); stroke-width: 2; stroke-linecap: round; }
.round { margin: 0; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }

.bow-stage { display: grid; place-items: end center; width: 150px; height: 170px; }
.dongja.big { width: 140px; height: auto; overflow: visible; }
.bar { width: 100%; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, 0.08); }
body[data-phase='night'] .bar,
body[data-phase='dawn'] .bar { background: rgba(255, 255, 255, 0.12); }
.bar span { display: block; width: var(--p, 0%); height: 100%; background: linear-gradient(90deg, var(--dan-gold), var(--dan-red)); transition: width 0.4s; }

.float-merit {
  position: fixed;
  z-index: 50;
  color: #ffd98a;
  font-family: var(--font-title);
  font-size: 20px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: floatUp 0.9s ease-out forwards;
}
@keyframes floatUp {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -48px); }
}

/* ── 연등 패널 ─────────────────────────────── */
.wish-form { display: grid; gap: 10px; }
.field { position: relative; }
textarea,
input {
  width: 100%;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: var(--paper-solid);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
}
textarea { display: block; padding: 12px 14px 24px; resize: none; }
.counter { position: absolute; right: 12px; bottom: 7px; color: var(--ink-soft); font-size: 11.5px; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.swatch.on { outline: 3px solid var(--dan-gold); outline-offset: 2px; }
.lantern-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lantern-list li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: var(--paper-tint);
}
.lantern-list li.empty { display: block; }
.dot { width: 12px; height: 16px; border-radius: 40%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.wish { margin: 0; font-size: 14.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.meta { margin: 2px 0 0; color: var(--ink-soft); font-size: 12px; }

.popover {
  position: fixed;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 14px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  background: var(--hanji), var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.popover .wish { margin: 0 0 6px; font-family: var(--font-title); font-size: 16px; }
.popover .meta { margin: 0 0 10px; }

/* ── 동자승 꾸미기 ─────────────────────────── */
.closet-head { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px; margin-bottom: 12px; }
.closet-head .dongja.big { width: 104px; }
.nick-row { display: flex; gap: 6px; }
.nick-row input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 10px; font-size: 14px; }
.merit-line { margin: 8px 0 2px; font-size: 13.5px; }
.closet-head .hint { text-align: left; }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: var(--paper-tint);
}
.item.worn { border-color: var(--dan-gold); box-shadow: inset 0 0 0 1px var(--dan-gold); }
.thumb { width: 62px; height: auto; overflow: visible; }
.iname { font-size: 13px; text-align: center; }
.item .btn { width: 100%; padding: 0 6px; }

/* ── 대웅전(스님) ──────────────────────────── */
.hall {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center; /* 대화 상자는 늘 화면 한가운데 */
  padding: 16px;
  background: #120e0a url('/img/hall.jpg') center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.hall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(10, 8, 6, 0.15), rgba(10, 8, 6, 0.78));
}
.hall.open { opacity: 1; visibility: visible; }
.hall-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  height: min(760px, calc(100vh - 32px));
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 220, 170, 0.18);
  border-radius: 20px;
  background: rgba(24, 19, 14, 0.6);
  color: #f3e9da;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hall-head .tts-toggle { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 236, 200, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #f0e6d6; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.hall-head .tts-toggle[aria-pressed="false"] { opacity: 0.7; }
/* 스님 말씀 듣기 🔊(누르면 읽어 주고, 읽는 중엔 ■ 로 멈춤) */
.msg .who .speak { margin-left: 6px; padding: 0 4px; border: 0; background: transparent; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0.7; vertical-align: 1px; }
.msg .who .speak:hover, .msg .who .speak:focus-visible { opacity: 1; }
.msg .who .speak.on { opacity: 1; color: var(--dan-red, #b5432c); }
/* 스님 고르기: 주지스님 · 큰스님 */
.monk-pick { display: flex; gap: 6px; margin: 2px 0 6px; }
.monk-pick .chip { height: 30px; padding: 0 14px; border: 1px solid rgba(255, 236, 200, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #f0e6d6; font-family: var(--font-title); font-size: 13.5px; cursor: pointer; }
.monk-pick .chip[aria-selected="true"] { background: var(--dan-red, #b5432c); border-color: transparent; color: #fff; }
.hall-head { display: flex; align-items: center; gap: 10px; }
.hall-head h2 { margin: 0; font-family: var(--font-title); font-size: 18px; font-weight: 400; }
.hall .back { height: 34px; border-color: rgba(255, 255, 255, 0.22); color: #f3e9da; font-size: 13.5px; }
.disclaimer { margin: 10px 0 8px; color: rgba(243, 233, 218, 0.7); font-size: 12px; line-height: 1.5; }
.crisis { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(184, 67, 47, 0.92); color: #fff; font-size: 13.5px; line-height: 1.55; }
.crisis a { color: #fff; font-weight: 700; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 6px 2px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.msg p { margin: 0; }
.msg.monk { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(255, 244, 225, 0.94); color: #2a241d; }
.msg.monk .who { display: block; margin-bottom: 2px; color: #8a6a45; font-family: var(--font-title); font-size: 11.5px; }
.msg.me { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(184, 67, 47, 0.94); color: #fff8ee; }
.msg.note { align-self: center; background: rgba(0, 0, 0, 0.5); color: #f3e9da; font-size: 13px; }
.msg.waiting p { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.chat-form { display: grid; gap: 8px; margin-top: 8px; }
.chat-form textarea { padding: 12px 14px; border: 0; background: rgba(255, 250, 240, 0.95); color: #2a241d; }
.chat-form .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.remaining { color: rgba(243, 233, 218, 0.72); font-size: 12px; }

/* ── 첫 방문·알림 ──────────────────────────── */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 12, 18, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.welcome-card {
  width: min(420px, 100%);
  padding: 28px 26px 22px;
  border-radius: 22px;
  background: var(--hanji), var(--paper-solid);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow);
}
.welcome-card h2 { margin: 14px 0 8px; font-family: var(--font-title); font-size: 22px; }
.welcome-card p { margin: 6px 0; line-height: 1.6; }
.welcome-card ul { max-width: 300px; margin: 12px auto; padding-left: 20px; line-height: 1.85; text-align: left; }
.welcome-card .small { color: var(--ink-soft); font-size: 12.5px; }
.welcome-card .actions { display: grid; gap: 8px; margin-top: 16px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + var(--safe-b));
  z-index: 70;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(20, 18, 15, 0.9);
  color: #fff8ee;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 80; padding: 12px; border-radius: 12px; background: #f8f3e9; color: #2a241d; }

/* ── 좁은 화면 ─────────────────────────────── */
@media (max-width: 720px) {
  .topbar { padding: calc(10px + var(--safe-t)) 12px 0; }
  .brand h1 { font-size: 20px; }
  .brand p { font-size: 11.5px; }
  .seal { width: 34px; height: 34px; font-size: 19px; }
  .chip { height: 30px; padding: 0 10px; font-size: 12px; }
  .chip.icon { width: 30px; }
  .dock { bottom: calc(10px + var(--safe-b)); }
  .dock button { width: 66px; height: 54px; }
  .panel { left: 8px; right: 8px; bottom: calc(80px + var(--safe-b)); width: auto; max-height: 62vh; }
  .pilgrim { width: 6.4%; }
  .lantern { width: 2.6%; }
  /* left:50% 기준이면 오른쪽 절반 폭에 갇혀 세로로 길어지므로 좌우 여백 기준으로 */
  .service-banner { top: calc(52px + var(--safe-t)); left: 12px; right: 12px; max-width: none; padding: 8px 10px; border-radius: 16px; font-size: 12.5px; transform: none; }
  .notices { right: 12px; left: 12px; top: auto; bottom: calc(80px + var(--safe-b)); width: auto; transform: none; }
  .toast { bottom: calc(88px + var(--safe-b)); }
}
@media (max-width: 420px) {
  .brand h1 { white-space: nowrap; }
  .brand p { font-size: 11px; white-space: nowrap; }
  .brand p .rest { display: none; } /* 좁은 화면은 '지금 N명 함께'만 */
  .brand p .wl-pre { display: none; } /* 날씨 줄은 '노고단 · 비 5.7°'만 */
  .status { gap: 5px; }
  .chip { padding: 0 9px; }
  .chip .auto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
}

/* ── 해운사: 운해 영상 · 들어가는 곳(법당·석굴암·탑) ─────────────────── */
/* 운해 영상: 다음 편을 위에 겹쳐(.top) 1.8초에 걸쳐 드러낸다(loop-video.js FADE_S 와 같게) */
.bgv, .place-video { z-index: 0; transition: opacity 1.8s linear; }
.bgv.top, .place-video.top { z-index: 1; }
.zoom > .sky, .zoom > .yard, .zoom > .spots { z-index: 2; }

.spots { position: absolute; inset: 0; pointer-events: none; }
.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(calc(-50% + var(--nudge, 0px)), -50%); /* --nudge: 화면 밖으로 나가면 안쪽으로 밀어 넣음(places.js) */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid rgba(255, 244, 222, 0.55);
  border-radius: 999px;
  background: rgba(22, 18, 14, 0.42);
  color: #fff6e6;
  font: 500 14px/1 var(--font-title);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.3s, transform 0.3s;
}
.spot:hover, .spot:focus-visible { background: rgba(22, 18, 14, 0.66); transform: translate(calc(-50% + var(--nudge, 0px)), -50%) scale(1.05); }
.spot:focus-visible { outline: 2px solid var(--dan-gold); outline-offset: 3px; }
.spot .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd79a; box-shadow: 0 0 0 0 rgba(255, 215, 154, 0.7); animation: spotPulse 2.8s ease-out infinite; }
@keyframes spotPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 154, 0.65); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 215, 154, 0); } }

.place {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #0b0907;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.place.open { opacity: 1; visibility: visible; }
/* 장소 안에서 새로고침: 장소가 다시 열릴 때까지 마당을 덮어 둔다(app.js) */
body.restoring::before { content: ''; position: fixed; inset: 0; z-index: 54; background: #0d0b09; }
body.restoring .place { transition: none; }
.place-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place video.place-media { opacity: 0; }
.place video.place-media.show { opacity: 1; }
.place::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 6, 4, 0.55), transparent 26%, transparent 78%, rgba(8, 6, 4, 0.35));
}
.place-head {
  position: absolute;
  z-index: 3;
  top: calc(14px + var(--safe-t));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #f6ecdc;
}
.place .back { flex: none; height: 36px; border-color: rgba(255, 255, 255, 0.3); color: #f6ecdc; background: rgba(20, 16, 12, 0.35); }
.place-text h2 { margin: 2px 0 4px; font: 400 22px/1.2 var(--font-title); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.place-text p { margin: 0; color: rgba(246, 236, 220, 0.82); font-size: 14px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
@media (max-width: 520px) {
  .spot { font-size: 13px; padding: 6px 11px 6px 9px; }
  .place-text h2 { font-size: 19px; }
  .place-text p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .spot .dot { animation: none; }
}

/* 세로 화면(4:5 미만)만 위쪽 줄 버튼: 사진이 좌우로 천천히 움직여서. 가로 화면은 사진 위 버튼을 숨기지 않고 화면 안으로 밀어 넣는다(places.js keepSpotsVisible) — 사용자 "화면 줄일 때 사라지지 않게" */
.place-bar { display: none; }
@media (max-aspect-ratio: 4/5) {
  .spots { display: none; }
  .place-bar {
    position: fixed;
    z-index: 11;
    top: calc(var(--topbar-h, 64px) + 6px);
    left: 12px;
    display: flex;
    gap: 6px;
  }
  .place-bar .chip { height: 32px; padding: 0 12px; font-family: var(--font-title); font-size: 13.5px; }
}

/* ── 해운사 SD 캐릭터(투명 배경 그림) ─────────────────── */
.pilgrim .figure {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.28));
  animation: breathe 4.2s ease-in-out var(--delay) infinite;
  user-select: none;
  -webkit-user-drag: none;
}
/* 발밑 그림자 */
.pilgrim::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0.9em;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32), transparent 70%);
  pointer-events: none;
}
.pilgrim .figure.bow { animation: bowFigure 1.3s ease-in-out; }
@keyframes bowFigure {
  0%, 100% { transform: none; }
  45%, 62% { transform: translateY(6%) scale(1.04, 0.84) rotate(-3deg); }
}
.pilgrim:has(.figure) { width: 4.3%; }
.pilgrim.npc { width: 4.9%; }
.pilgrim.npc .name { background: rgba(35, 112, 107, 0.78); }
@media (prefers-reduced-motion: reduce) {
  .pilgrim .figure { animation: none; }
}

/* 주지스님·보살님 말풍선: 크게, 여러 줄 */
.pilgrim.npc .bubble {
  bottom: calc(100% + 6px);
  width: max-content;
  /* 도반 그림이 scale(var(--scale)) 로 줄어 있으므로 그만큼 키워 실제로 보이는 크기를 맞춘다 */
  max-width: calc(min(78vw, 300px) / var(--scale));
  padding: calc(10px / var(--scale)) calc(14px / var(--scale));
  border-radius: 14px;
  font-size: calc(clamp(14px, 1.15vw, 17px) / var(--scale));
  line-height: 1.55;
  white-space: normal;
  word-break: keep-all;
  text-align: left;
  z-index: 5;
}

/* 대웅전: 주지스님이 대화창 옆에 서 계시고, 스님 말풍선 옆에 얼굴 */
.msg-row { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.msg-row .msg { max-width: 100%; }
.msg-row.waiting .msg p { animation: pulse 1.6s ease-in-out infinite; }
.msg-row .avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 6%;
  background: rgba(255, 244, 225, 0.9);
  border: 1.5px solid rgba(255, 220, 170, 0.6);
}
.hall-monk {
  /* 가운데 대화 상자(폭 640)의 왼쪽 바깥에 붙어 선다. 왼쪽 빈자리 폭에 맞춰 키가 줄어 겹치지 않는다(그림 가로:세로 ≈ 0.62) */
  position: absolute;
  z-index: 1;
  right: calc(50% + 320px + 22px);
  bottom: 4vh;
  height: min(58vh, 460px, calc((50vw - 320px - 44px) / 0.64));
  width: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
  transform-origin: 50% 100%;
  animation: breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}
.hall-monk.nod { animation: bowFigure 1.4s ease-in-out; }
/* 3D 스님: 그림과 같은 자리·키, 가로:세로 0.64 상자에 그림판 */
.hall-monk3d { width: auto; aspect-ratio: 0.64; animation: none; contain: size layout; }
.hall-monk3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 959px) { .hall-monk { display: none; } }
@media (prefers-reduced-motion: reduce) { .hall-monk { animation: none; } }

/* 내 캐릭터 고르기 */
.closet-head .cbig { width: 92px; height: auto; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.char-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.char-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  border: 1.5px solid var(--paper-line);
  border-radius: 14px;
  background: var(--paper-tint);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.char-pick:hover { transform: translateY(-2px); }
.char-pick.on { border-color: var(--dan-red); box-shadow: 0 0 0 2px rgba(184, 67, 47, 0.25); }
.char-pick .cthumb { height: 86px; width: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
.char-pick .cname { font-size: 12px; line-height: 1.3; text-align: center; word-break: keep-all; }
.char-pick.auto .auto-mark { height: 86px; display: grid; place-items: center; font-size: 34px; }
/* 수행 화면의 절하는 내 캐릭터(진짜 3D 모델로 바꾸기 전 임시) */
.bow-stage .bow-figure { height: 170px; width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)); }
.bow-stage .bow-figure.bow { animation: bowFigure 1.3s ease-in-out; }

/* 궁예 집중 코치 */
.coach {
  position: fixed;
  z-index: 58;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(92px + var(--safe-b));
  display: flex;
  align-items: flex-end;
  gap: 4px;
  max-width: min(440px, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.coach.in { opacity: 1; transform: none; }
.coach-figure { flex: none; }
.coach-img { display: block; height: 150px; width: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)); transform-origin: 50% 100%; animation: coachJolt 0.6s ease-out; }
@keyframes coachJolt { 0% { transform: translateY(14px) scale(0.92); } 60% { transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
.coach-card {
  margin-bottom: 70px;
  padding: 12px 14px 10px;
  border-radius: 16px 16px 16px 4px;
  background: rgba(32, 22, 14, 0.92);
  color: #fff3df;
  border: 1px solid rgba(214, 162, 63, 0.55);
  box-shadow: var(--shadow);
}
.coach-line { margin: 0 0 10px; font: 400 17px/1.45 var(--font-title); word-break: keep-all; }
.coach-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.coach-actions .ghost { color: #f3e9da; border-color: rgba(255, 255, 255, 0.25); }
@media (prefers-reduced-motion: reduce) { .coach { transition: none; } .coach-img { animation: none; } }

/* 3D(염주·큰절) 캔버스 */
.kit-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bow-stage { position: relative; }
/* 108배 마음가짐: 절하는 모습 위(엎드리면 비는 자리)에 겹쳐 나타났다 사라짐 */
.mantra { position: absolute; z-index: 2; left: 50%; top: 0; width: min(280px, 80vw); margin: 0; transform: translateX(-50%); text-align: center; font-size: 14px; line-height: 1.45; color: var(--ink, #2a241d); text-shadow: 0 0 8px rgba(255, 250, 242, 1), 0 0 3px rgba(255, 250, 242, 1); opacity: 0; pointer-events: none; word-break: keep-all; }
.mantra.show { animation: mantra 5.4s ease-in-out forwards; }
@keyframes mantra { 0% { opacity: 0; transform: translate(-50%, 6px); } 18% { opacity: 0.95; transform: translate(-50%, 0); } 78% { opacity: 0.95; } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .mantra.show { animation-duration: 0.01s; opacity: 1; } }
.practice-stage.moktak { width: 100%; max-width: none; } /* 수행 창 무대(부모)도 .moktak 이라 230px 로 묶이던 것 풀기 */
.moktak.moktak3d { position: relative; width: min(330px, 100%); max-width: none; height: min(250px, 36vh); padding: 0; border: 0; border-radius: 18px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 236, 210, 0.10), transparent 70%); cursor: pointer; }
.ring.ring3d { position: relative; width: min(300px, 80vw); height: min(400px, 52vh); padding: 0; border: 0; border-radius: 18px; background: radial-gradient(ellipse at 50% 45%, rgba(255, 240, 220, 0.10), transparent 70%); cursor: grab; touch-action: none; }
.bow-stage:has(.bow3d) { width: 220px; height: 240px; }
.bow3d { position: relative; overflow: hidden; width: 220px; height: 240px; display: grid; place-items: end center; }
.bow3d .bow-figure { height: 200px; }
.pilgrim .figure3d { display: block; width: 100%; height: auto; aspect-ratio: 0.62; min-height: 0; position: relative; overflow: visible; contain: size layout; }
.pilgrim .figure3d .figure { position: absolute; inset: 0; height: 100%; width: auto; margin: 0 auto; }
.pilgrim:has(.figure3d) { width: 4.8%; }

/* 법당·석굴암 안의 나: 불상을 바라보는 뒷모습 + 108배·합장·반배 (worship.js) */
.worship { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.worship-stage { position: absolute; inset: 0; contain: size layout; }
.worship-stage canvas { position: absolute; inset: 0; }
.worship-solo { position: absolute; left: 29%; bottom: calc(64px + var(--safe-b)); height: min(34vh, 300px); width: auto; transform: translateX(-50%); transform-origin: 50% 100%; }
.worship-solo.bow { animation: bowFigure 1.3s ease-in-out; }
.worship-tags { position: absolute; inset: 0; overflow: hidden; }
.worship-tag { position: absolute; left: 0; top: 0; padding: 2px 9px; border-radius: 999px; background: rgba(12, 9, 7, 0.5); color: #f6ecdc; font: 400 12.5px/1.4 var(--font-title); white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); will-change: transform; }
.worship-tag.me { background: rgba(181, 67, 44, 0.72); color: #fff; }
.worship-bar { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.worship-bar .btn { height: 40px; padding: 0 18px; border-color: rgba(255, 236, 200, 0.45); color: #fbf1df; background: rgba(20, 16, 12, 0.55); font-family: var(--font-title); font-size: 15px; letter-spacing: 0.04em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.worship-bar .btn:hover { background: rgba(40, 30, 20, 0.7); }
.worship-bar .btn[aria-pressed="true"] { background: rgba(181, 67, 44, 0.78); border-color: transparent; color: #fff; }
.worship-count { position: absolute; left: 50%; bottom: calc(66px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(12, 9, 7, 0.45); color: #f6ecdc; font: 400 15px/1.3 var(--font-title); letter-spacing: 0.03em; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
@media (max-width: 600px) {
  /* 오른쪽 아래 '전체 화면' 버튼과 겹치지 않게 왼쪽으로 */
  .worship-bar { left: 12px; transform: none; }
  .worship-count { left: 12px; transform: none; }
}

/* 전체 화면 보기(장소·운해·풍경 모음) 공용 도구 */
.place-nos { margin: 6px 0 0 !important; font-size: 12.5px !important; color: rgba(246, 236, 220, 0.66) !important; }
.place-tools {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: calc(18px + var(--safe-b));
  display: flex;
  gap: 8px;
}
.place-tools .btn { height: 36px; border-color: rgba(255, 255, 255, 0.3); color: #f6ecdc; background: rgba(20, 16, 12, 0.4); }
.place-head, .place-tools, .place::after { transition: opacity 1.2s ease; }
.place.idle .place-head, .place.idle .place-tools, .place.idle::after { opacity: 0; }
.place.idle { cursor: none; }
.place.ocean::after { background: linear-gradient(to bottom, rgba(8, 6, 4, 0.35), transparent 22%); }

/* 법당·석굴암 '영험한' 겹(aura.js): 살아 있는 듯 미세한 움직임(alive.js) + 빛줄기·광배·향 연기 */
.aura-live, .aura-halo, .aura-beam, .aura-fx { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.place.aura .aura-halo, .place.aura .aura-beam, .place.aura .aura-fx { opacity: 1; }
.aura-halo {
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgba(255, 214, 140, 0.26), rgba(255, 190, 110, 0.09) 14%, transparent 32%);
  mix-blend-mode: screen;
}
.place.aura .aura-halo { animation: auraBreath 9s ease-in-out infinite; }
@keyframes auraBreath { 0%, 100% { filter: brightness(0.92); } 50% { filter: brightness(1.08); } }
.aura-beam {
  background: conic-gradient(from 180deg at 50% -12%, transparent 0deg 165deg, rgba(255, 236, 196, 0.13) 172deg, rgba(255, 240, 210, 0.18) 180deg, rgba(255, 236, 196, 0.13) 188deg, transparent 195deg 360deg);
  mix-blend-mode: screen;
}
.place.aura .aura-beam { animation: auraBeam 14s ease-in-out infinite; }
@keyframes auraBeam { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .aura-halo, .aura-beam, .place.aura .aura-halo, .place.aura .aura-beam { animation: none; }
}
/* 석굴암은 조명을 조금 더(사용자: "석굴암에 조명을 조금만 더 넣어 줘"): 얼굴 광배 0.26→0.34, 빛줄기 0.13·0.18→0.18·0.24, 아래 촛불·바닥에 따뜻한 빛 한 겹 */
.place-seokguram .aura-halo {
  background:
    radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgba(255, 214, 140, 0.34), rgba(255, 190, 110, 0.13) 15%, transparent 34%),
    radial-gradient(ellipse 75% 38% at 50% 90%, rgba(255, 196, 120, 0.14), transparent 70%);
}
.place-seokguram .aura-beam {
  background: conic-gradient(from 180deg at 50% -12%, transparent 0deg 164deg, rgba(255, 236, 196, 0.18) 172deg, rgba(255, 240, 210, 0.24) 180deg, rgba(255, 236, 196, 0.18) 188deg, transparent 196deg 360deg);
}

/* 처마 끝 풍경: 종은 바람에 늘 살랑, 물고기 추는 한 박자 늦게 더 크게. 소리가 나는 순간(.ring) 크게 흔들렸다 잦아든다 */
.chime { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: calc(1.9% * var(--s, 1)); aspect-ratio: 24 / 66; translate: -50% 0; transform-origin: 50% 0; animation: chimeSway 3.8s ease-in-out var(--d, 0s) infinite alternate; pointer-events: none; }
.chime-swing { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
.chime-bell { position: absolute; left: 0; top: 0; width: 100%; height: 45.5%; overflow: visible; }
.chime-fishwrap { position: absolute; left: 0; top: 37%; width: 100%; height: 54.5%; transform-origin: 50% 0; animation: fishSway 2.6s ease-in-out calc(var(--d, 0s) - 0.7s) infinite alternate; }
.chime-fish { display: block; width: 100%; height: 100%; overflow: visible; }
.chime-swing.ring { animation: chimeRing 3.6s cubic-bezier(0.3, 0.6, 0.4, 1); }
.chime-swing.ring .chime-fishwrap { animation: fishRing 3.6s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes chimeSway { from { rotate: -5deg; } to { rotate: 6deg; } }
@keyframes fishSway { from { rotate: -9deg; } to { rotate: 11deg; } }
@keyframes chimeRing {
  0% { transform: rotate(0); }
  12% { transform: rotate(var(--amp, 16deg)); }
  30% { transform: rotate(calc(var(--amp, 16deg) * -0.75)); }
  48% { transform: rotate(calc(var(--amp, 16deg) * 0.5)); }
  66% { transform: rotate(calc(var(--amp, 16deg) * -0.3)); }
  84% { transform: rotate(calc(var(--amp, 16deg) * 0.12)); }
  100% { transform: rotate(0); }
}
@keyframes fishRing {
  0% { transform: rotate(0); }
  10% { transform: rotate(calc(var(--amp, 16deg) * -1.6)); }
  26% { transform: rotate(calc(var(--amp, 16deg) * 1.3)); }
  44% { transform: rotate(calc(var(--amp, 16deg) * -0.8)); }
  62% { transform: rotate(calc(var(--amp, 16deg) * 0.45)); }
  80% { transform: rotate(calc(var(--amp, 16deg) * -0.2)); }
  100% { transform: rotate(0); }
}
body[data-phase='night'] .chime-swing { filter: brightness(0.55) drop-shadow(0 0 2px rgba(255, 200, 120, 0.25)); }
body[data-phase='dawn'] .chime-swing, body[data-phase='dusk'] .chime-swing { filter: brightness(0.82) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
@media (prefers-reduced-motion: reduce) { .chime, .chime-fishwrap, .chime-swing.ring, .chime-swing.ring .chime-fishwrap { animation: none; } }

/* ── 3D 마당(첫 화면) ─────────────────────────────── */
.world-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.world-labels { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.w-tag, .w-place, .w-bubble { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.w-tag { padding: 2px 8px; border: 0; border-radius: 99px; background: rgba(10, 12, 18, 0.55); color: #fff; font: inherit; font-size: 12px; cursor: pointer; pointer-events: auto; backdrop-filter: blur(4px); }
.w-tag.me { background: var(--dan-red); pointer-events: none; }
.w-tag.npc { background: rgba(35, 112, 107, 0.82); }
.w-place { color: #fff8ee; font: 400 15px var(--font-title); letter-spacing: 0.08em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); }
.w-bubble { padding: 5px 10px; border-radius: 10px; background: #f8f3e9; color: #2a241d; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s; }
.w-bubble.show { opacity: 1; }
body.world-mode .scene::after { display: none; }
body.world-mode .place-bar { display: flex; position: fixed; z-index: 20; top: calc(var(--topbar-h, 64px) + 6px); left: 18px; gap: 6px; flex-wrap: wrap; max-width: calc(100vw - 30px); }
body.world-mode .place-bar .chip { height: 32px; padding: 0 13px; font-family: var(--font-title); font-size: 13.5px; }
.enter-btn { position: fixed; z-index: 25; left: 50%; bottom: calc(96px + var(--safe-b)); translate: -50% 0; height: 46px; padding: 0 22px; font-size: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.joy { position: fixed; z-index: 15; left: 18px; bottom: calc(100px + var(--safe-b)); width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); display: none; touch-action: none; }
.joy span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); pointer-events: none; }
@media (pointer: coarse) { body.world-mode .joy { display: block; } }
@media (max-width: 720px) { body.world-mode .place-bar { left: 12px; } }

/* 3D 마당 ↔ 사진 마당 */
.mode-link { text-decoration: none; }
.mode-link .short { display: none; }
@media (max-width: 420px) {
  .mode-link .long { display: none; }
  .mode-link .short { display: inline; }
}


/* 마당 채팅(chat.js): 왼쪽 아래 입력칸 · 머리 위 말풍선은 여러 줄로 */
.chat-bar { position: fixed; z-index: 21; left: 16px; bottom: calc(18px + var(--safe-b)); display: flex; gap: 6px; width: min(340px, calc(50vw - 190px)); padding: 6px; border: 1px solid var(--paper-line); border-radius: 18px; background: var(--hanji), var(--paper); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.chat-bar input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--paper-line); border-radius: 12px; background: #fffdf8; color: #2a241d; -webkit-text-fill-color: #2a241d; font: inherit; font-size: 14px; }
.chat-bar input:focus { outline: 2px solid var(--dan-gold); outline-offset: 1px; }
.chat-bar .btn { height: 34px; flex: none; }
body:has(.place.open) .chat-bar { z-index: 60; } /* 법당 안에서도 말할 수 있게 장소 화면 위로 */
@media (max-width: 760px) {
  .chat-bar { left: 12px; right: 12px; width: auto; bottom: calc(80px + var(--safe-b)); }
  body.world-mode .joy { bottom: calc(140px + var(--safe-b)); }
  .enter-btn { bottom: calc(140px + var(--safe-b)); }
  body:has(.place.open) .chat-bar { bottom: calc(70px + var(--safe-b)); }
}
.pilgrim .bubble.chat.show { transform: translate(calc(-50% + var(--shift, 0px)), 0); }
.pilgrim .bubble.chat { bottom: calc(100% + 6px); width: max-content; max-width: calc(min(70vw, 260px) / var(--scale, 1)); padding: calc(7px / var(--scale, 1)) calc(11px / var(--scale, 1)); font-size: calc(clamp(13px, 1vw, 15px) / var(--scale, 1)); line-height: 1.45; white-space: normal; word-break: keep-all; text-align: left; z-index: 6; }
.w-bubble { width: max-content; max-width: 260px; white-space: normal; word-break: keep-all; line-height: 1.45; }
.worship-say { position: absolute; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 240px; padding: 6px 11px; border-radius: 12px; background: #f8f3e9; color: #2a241d; font: 400 14px/1.45 var(--font-body, inherit); white-space: normal; word-break: keep-all; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.3s, transform 0.3s; text-shadow: none; }
.worship-say.show { opacity: 1; transform: translate(-50%, 0); }

/* 시작 범퍼(bumper.js): 운해 첫 장면 + 해운사 + [들어가기] → 8초 영상 → 서서히 사라지며 마당 */
.bumper { position: fixed; inset: 0; z-index: 300; background: #0b0907; opacity: 1; transition: opacity 0.9s ease; }
.bumper.out { opacity: 0; pointer-events: none; }
.bumper-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bumper::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45)); pointer-events: none; }
.bumper-title { position: absolute; left: 50%; top: 38%; z-index: 2; transform: translate(-50%, -46%); text-align: center; color: #fff8ee; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 1.4s ease, transform 1.6s ease; pointer-events: none; }
.bumper.show-title .bumper-title { opacity: 1; transform: translate(-50%, -52%); }
.bumper-title h1 { margin: 10px 0 6px; font: 400 clamp(40px, 7vw, 78px)/1.1 var(--font-title); letter-spacing: 0.2em; text-indent: 0.2em; }
.bumper-title p { margin: 0; font: 400 clamp(13px, 1.7vw, 19px)/1.4 var(--font-title); letter-spacing: 0.3em; opacity: 0.92; }
.bumper-gate { position: absolute; left: 50%; bottom: calc(16% + var(--safe-b)); z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bumper-enter { height: 52px; padding: 0 40px; font-family: var(--font-title); font-size: 18px; letter-spacing: 0.24em; text-indent: 0.24em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.bumper-quiet { border: 0; background: rgba(10, 8, 6, 0.28); padding: 4px 12px; border-radius: 999px; color: #fff8ee; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.bumper-skip { position: absolute; right: 20px; bottom: calc(22px + var(--safe-b)); z-index: 2; height: 36px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(10, 8, 6, 0.35); color: #fff8ee; font: inherit; font-size: 13.5px; cursor: pointer; backdrop-filter: blur(4px); }
/* 탑돌이(tapdori.js): 탑을 누르면 아래 가운데 창 → 도는 동안은 작은 줄 */
.tapdori { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 40; width: min(420px, calc(100vw - 24px)); padding: 16px 18px 14px; border-radius: 16px; background: rgba(20, 16, 12, 0.82); color: #f6ecdc; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tapdori h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--font-title); letter-spacing: 0.05em; }
.tapdori .info { margin: 0 0 8px; font-size: 13px; line-height: 1.55; opacity: 0.82; word-break: keep-all; }
.tapdori .ask { margin: 0 0 10px; font-size: 14px; line-height: 1.5; word-break: keep-all; }
.tapdori-form input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 236, 200, 0.35); background: rgba(255, 250, 240, 0.95); color: #2a241d; font-size: 15px; }
.tapdori-form .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tapdori .btn.ghost { border-color: rgba(255, 236, 200, 0.45); color: #fbf1df; background: transparent; }
.tapdori.walking { width: auto; max-width: calc(100vw - 24px); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tapdori .lap { margin: 0; font: 400 15px/1.4 var(--font-title); }
.btn.burn { white-space: normal; }
.lantern-list .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lantern-list .acts .btn { white-space: nowrap; }
/* 3D 마당 '🙏 탑돌이' 이름표: 누를 수 있는 단추처럼 */
.w-place.w-action { padding: 5px 13px; border: 1px solid rgba(255, 220, 150, 0.6); border-radius: 99px; background: rgba(40, 28, 12, 0.5); cursor: pointer; pointer-events: auto; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: tapdoriTag 2.6s ease-in-out infinite; }
.w-place.w-action:hover, .w-place.w-action:focus-visible { background: rgba(181, 67, 44, 0.8); border-color: transparent; outline: none; }
@keyframes tapdoriTag { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 130, 0.0); } 50% { box-shadow: 0 0 14px 2px rgba(255, 210, 130, 0.45); } }
/* 탑돌이 근심 글자: 머리 위에 떠 있다가 한 글자씩 날아가 흩어진다 */
.worry-float { position: absolute; left: 0; top: 0; will-change: transform; padding: 4px 12px; border-radius: 12px; background: rgba(20, 16, 12, 0.45); color: #fff4e0; font: 400 17px/1.3 var(--font-title); letter-spacing: 0.06em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); white-space: nowrap; transition: background 1.5s; }
.worry-float .ch { display: inline-block; }
.worry-float .ch.sp { width: 0.35em; }
.worry-float .ch.fly { animation: worryFly 1.8s ease-out forwards; }
@keyframes worryFly {
  0% { opacity: 1; filter: blur(0); }
  25% { color: #ffe6a8; text-shadow: 0 0 10px rgba(255, 220, 150, 0.9); }
  100% { opacity: 0; filter: blur(5px); transform: translate(var(--dx, 0), var(--dy, -60px)) rotate(var(--rot, 0deg)) scale(0.6); }
}
.worry-float.done { background: transparent; }
.tapdori .note { margin: 0; font-size: 13px; opacity: 0.78; }
.tapdori .lap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.tapdori .lap-chip { padding: 5px 11px; border: 1px solid rgba(255, 236, 200, 0.4); border-radius: 99px; background: transparent; color: #fbf1df; font-size: 13px; cursor: pointer; }
.tapdori .lap-chip[aria-pressed='true'] { background: rgba(181, 67, 44, 0.85); border-color: transparent; color: #fff; }
.tapdori .lap-time { margin-left: 4px; font-size: 12px; opacity: 0.7; }
/* 탑돌이 영상으로 남기기(record.js): 고르는 칸·녹화 중 표시·저장 단추. 녹화용 그림판은 안 보이게 붙여 둠 */
.tapdori-form .rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; font-size: 13.5px; cursor: pointer; }
.tapdori-form .rec-row input[type='checkbox'] { width: 17px; height: 17px; margin: 0; padding: 0; border: 0; accent-color: #b5432c; flex: none; }
.tapdori-form .rec-note { flex-basis: 100%; padding-left: 25px; font-size: 12px; opacity: 0.68; }
.tapdori .rec-dot { font-size: 12.5px; color: #ff9d8c; white-space: nowrap; animation: recBlink 1.6s ease-in-out infinite; }
@keyframes recBlink { 50% { opacity: 0.45; } }
.tapdori .rec-ok { font-size: 13px; opacity: 0.88; }
.rec-canvas { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
.rec-link { display: none; }
/* 사진 마당 탑돌이: 탑 뒤를 지날 때 흐리게(가려진 듯), 근심 글자는 머리 위에 */
.pilgrim.me > .figure3d, .pilgrim.me > img, .pilgrim.me > svg, .pilgrim.me > .name { transition: opacity 0.5s ease; }
.pilgrim.me.behind > .figure3d, .pilgrim.me.behind > img, .pilgrim.me.behind > svg, .pilgrim.me.behind > .name { opacity: 0.12; }
.pilgrim .worry-float { top: auto; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 3; pointer-events: none; }
/* 탑돌이 중: 가리는 것 숨기기 + 진행 줄은 위쪽에 작게 */
.chat-bar, .dock, #joy, #enterBtn { transition: opacity 0.4s ease; }
body.tapdori-on .chat-bar, body.tapdori-on .dock, body.tapdori-on #joy, body.tapdori-on #enterBtn { opacity: 0; pointer-events: none; }
.tapdori.walking { top: calc(118px + env(safe-area-inset-top, 0px)); bottom: auto; padding: 8px 14px; gap: 10px; }
@media (max-width: 600px) {
  .tapdori.walking { top: calc(104px + env(safe-area-inset-top, 0px)); }
  .tapdori.walking .note { display: none; }
  .tapdori.walking .lap { font-size: 14px; }
}
/* 휴대폰: 수행·연등 등 창이 열려 있으면 말하기 칸을 숨긴다(창 아래 버튼을 덮었음) */
@media (max-width: 759px) { body.panel-open .chat-bar { opacity: 0; pointer-events: none; } }
@media (max-width: 759px) { body.incense-on .chat-bar { opacity: 0; pointer-events: none; } } /* 향이 타는 동안 향로를 덮지 않게 */
/* 탑돌이 근심 구름: 돌수록(--p 0→1) 작아지고 밝아지고 옅어진다 */
.worry-float { padding: 0; background: transparent; }
.worry-cloud { --p: 0; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(32, 30, 36, calc(0.82 - var(--p) * 0.62)); box-shadow: 0 0 calc(14px + var(--p) * 22px) rgba(30, 28, 34, calc(0.7 - var(--p) * 0.6)), 0 0 calc(var(--p) * 26px) rgba(255, 226, 160, calc(var(--p) * 0.55)); color: rgb(calc(205 + var(--p) * 50), calc(205 + var(--p) * 45), calc(212 + var(--p) * 28)); opacity: calc(1 - var(--p) * 0.45); transform: scale(calc(1 - var(--p) * 0.35)); transform-origin: 50% 100%; transition: transform 0.6s ease, opacity 0.6s ease; }
.worry-float.done .worry-cloud { animation: cloudGone 2.2s ease forwards; }
@keyframes cloudGone { to { opacity: 0; transform: scale(0.3) translateY(-30px); filter: blur(8px); box-shadow: 0 0 40px rgba(255, 226, 160, 0.8); } }
/* 근심 막대 */
.worry-meter { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.worry-meter .bar { width: 110px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.worry-meter .fill { display: block; width: 100%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6f6a78, #a49fb0); transition: width 0.6s linear; }
.worry-meter .pct { min-width: 34px; opacity: 0.8; }
/* 바퀴마다 한마디 */
.tapdori-msg { position: fixed; left: 50%; top: 38%; z-index: 45; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 999px; background: rgba(20, 16, 12, 0.55); color: #fff4e0; font: 400 20px/1.4 var(--font-title); letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); white-space: nowrap; pointer-events: none; animation: lapMsg 3.2s ease forwards; }
.tapdori-msg.last { color: #ffe6a8; animation-duration: 4.2s; box-shadow: 0 0 30px rgba(255, 220, 150, 0.35); }
@keyframes lapMsg { 0% { opacity: 0; transform: translate(-50%, -30%); } 15% { opacity: 1; transform: translate(-50%, -50%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
@media (max-width: 600px) { .tapdori-msg { font-size: 17px; } .worry-meter .bar { width: 80px; } }
/* 등 달 곳 고르기 */
.place-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.place-pick .chip[aria-pressed='true'] { background: var(--dan-red); border-color: transparent; color: #fff8ee; }
/* ── 등 달기(사진 위): 늘어진 줄 + 매단 등(한지 등 + 이름표). 사진 마당 처마(.eave)·법당 천장(.ceiling) ── */
.hang-lamps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hang-cords { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hang-cords path { fill: none; stroke: rgba(40, 26, 14, 0.85); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.hang-lamp { position: absolute; left: var(--x); top: var(--y); width: 1.3%; padding: var(--cord) 0 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: translateX(-50%); transform-origin: 50% 0; animation: lampSway 6s ease-in-out var(--sway, 0s) infinite; }
.hang-lamp::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: var(--cord); background: rgba(40, 26, 14, 0.85); }
.hang-lamp .body { width: 100%; }
.hang-lamp .tag { display: block; width: 30%; aspect-ratio: 1 / 3; margin: 1px auto 0; border-radius: 1px; background: #f6efe0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.hang-lamp.mine .tag { background: #fff6d8; box-shadow: 0 0 6px rgba(255, 226, 160, 0.9); }
.hang-lamp:hover .body, .hang-lamp:focus-visible .body { filter: brightness(1.25); }
body[data-phase='night'] .hang-lamp .body, body[data-phase='dusk'] .hang-lamp .body { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 75%, transparent)); }
@keyframes lampSway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.hang-lamps.ceiling .hang-lamp { width: clamp(16px, 1.7vw, 30px); }
/* 사진 마당 처마 줄등은 인물(.yard, z 2) 뒤에 — 처마는 인물보다 멀다(사용자 화면: 주지스님 머리 앞에 등이 겹쳐 보였음) */
.zoom > .hang-lamps.eave { z-index: 1; }
/* 기와 더미(사진 마당): 둥근 기와를 네 줄로 포갬 + 단추 */
.giwa-pile { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 6.5%; container-type: inline-size; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.giwa-stack { position: relative; width: 100%; height: calc(var(--levels, 2) * 9cqw + 30cqw); cursor: pointer; }

.giwa-pile .giwa-spot { position: relative; left: auto; top: auto; transform: none; margin-top: 6px; white-space: nowrap; }
.giwa-pile .giwa-spot:hover, .giwa-pile .giwa-spot:focus-visible { transform: scale(1.05); }
/* ── 직접 쓰는 물건: 연등·등 + 한지(소원지·이름표), 기와 — 붓글씨(--font-brush) ── */
.write-obj { position: relative; display: flex; flex-direction: column; align-items: center; margin: 2px auto 4px; width: 100%; }
.write-lamp .w-lamp { width: 74px; --lit: 0.55; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 50%, transparent)); }
.write-lamp .w-cord { display: block; width: 1px; height: 14px; background: #3b2a1e; }
.w-paper { position: relative; width: min(100%, 300px); padding: 12px 14px 18px; border-radius: 2px; background: var(--hanji), #f7f0de; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); color: #2a2018; }
.w-paper::before { content: ''; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: #c9b896; } /* 끈 구멍 */
.write-obj textarea, .write-obj input { display: block; width: 100%; padding: 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font: 400 27px/1.35 var(--font-brush); text-align: center; resize: none; }
.w-paper textarea, .w-paper input { color: #2a2018; }
.w-paper textarea::placeholder, .w-paper input::placeholder { color: rgba(70, 50, 30, 0.38); }
.w-paper input.w-name { font-size: 32px; }
.w-paper input.w-wish { font-size: 23px; }
.w-paper .counter { right: 8px; bottom: 3px; color: rgba(70, 50, 30, 0.5); }
.write-obj textarea:focus, .write-obj input:focus { background: rgba(255, 255, 255, 0.0); box-shadow: none; outline: none; }
.w-paper:focus-within { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(201, 162, 39, 0.55); }
/* 기와: 둥근 회색 기와 위에 흰 붓글씨 */
.write-giwa { width: min(100%, 300px); height: auto; aspect-ratio: 1.32; justify-content: center; padding: 12% 11% 13% 15%; gap: 4px; border-radius: 0; background: url("/textures/giwa-h.webp?v=2") center / 100% 100% no-repeat; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5)); } /* 실사 기와(189번, 볼록한 등이 위)를 눕히고 실제 암키와 비율(길이:폭 ≈ 1.3:1)로 — 사진 그대로는 2.3:1 로 너무 길었음(사용자: "기와가 왜 이리 길어") */
.write-giwa > * { width: 100%; }
.write-giwa input, .write-giwa textarea, .write-giwa .w-text { color: #f3efe6; text-shadow: 0 0 1px rgba(255, 255, 255, 0.35); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat; word-break: keep-all; overflow-wrap: anywhere; } /* 흰 물감 붓글씨: 마른 붓처럼 군데군데 옅게(잡음 마스크) */
.write-giwa input::placeholder, .write-giwa textarea::placeholder { color: rgba(243, 239, 230, 0.5); }
.write-giwa textarea { padding: 0; line-height: 1.25; text-align: center; resize: none; overflow: hidden; }
.write-giwa textarea.w-name, .write-giwa input.w-name, .write-giwa .w-text.w-name { font-size: 28px; line-height: 1.12; }
.write-giwa textarea.w-wish, .write-giwa input.w-wish, .write-giwa .w-text.w-wish { font-size: 21px; line-height: 1.25; }
.write-giwa:focus-within { filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 4px rgba(230, 181, 74, 0.9)); }
/* 팝업용 작은 판 */
.w-text { margin: 0; font: 400 24px/1.3 var(--font-brush); text-align: center; word-break: keep-all; }
.w-paper .w-text { color: #2a2018; }
.w-text.w-name { font-size: 28px; }
.write-obj.small { margin-bottom: 8px; }
.write-obj.small .w-lamp { width: 44px; }
.write-obj.small .w-paper { width: min(240px, 100%); padding: 10px 12px 12px; }
.write-obj.small.write-giwa { width: min(100%, 240px); height: auto; }
.popover .write-obj + .meta { margin-top: 4px; }
/* ── 소원 기도터 ── */
.w-place.w-zodiac { padding: 2px 8px; border: 1px solid rgba(255, 236, 200, 0.28); border-radius: 4px; background: rgba(40, 36, 30, 0.72); font-size: 12px; letter-spacing: 0.02em; transform-origin: 50% 0; } /* 받침돌에 붙인 돌 명패 */
.w-place.w-zodiac.mine { border-color: transparent; background: linear-gradient(135deg, #e6b54a, #b5432c); color: #fff; box-shadow: 0 0 12px rgba(255, 210, 120, 0.7); }
.w-place.w-zodiac.mine:not(.far)::after { content: ' · 내 띠'; }
.w-place.w-zodiac.far { padding: 1px 4px; font-size: 15px; }
.w-place.w-zodiac.lit { border-color: #ffd98a; background: linear-gradient(135deg, rgba(230, 181, 74, 0.9), rgba(160, 110, 30, 0.9)); color: #fff; box-shadow: 0 0 14px rgba(255, 210, 120, 0.9); }
.w-place.w-zodiac.far .t { display: none; }
.w-place.w-gido { padding: 3px 12px; border-radius: 99px; background: rgba(20, 16, 12, 0.5); font-size: 14px; color: #ffe6a8; }
.tapdori.gido { width: min(440px, calc(100vw - 24px)); }
.tapdori.gido input { width: 100%; box-sizing: border-box; height: 40px; margin: 8px 0 0; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 236, 200, 0.35); background: rgba(255, 250, 240, 0.95); color: #2a241d; font-size: 15px; }
.tapdori.gido .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.tapdori.gido .row.acts .btn.primary { flex: 1; min-width: 70px; }
.tapdori.gido .note { margin: 8px 0 0; font-size: 14px; color: #ffe6a8; }
.gido-head { display: flex; gap: 12px; align-items: center; }
.gido-face { width: 56px; height: 96px; object-fit: cover; object-position: 50% 0; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.gido-head h3 { margin: 0 0 4px; }
.tti-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.tti-chips .chip { padding: 5px 11px; border: 1px solid rgba(255, 236, 200, 0.4); border-radius: 99px; background: transparent; color: #fbf1df; font-size: 13px; cursor: pointer; }
.tti-chips .chip[aria-pressed='true'] { background: rgba(181, 67, 44, 0.85); border-color: transparent; color: #fff; }
.tti-pick { margin-top: 8px; font-size: 13px; opacity: 0.85; }
.tti-pick summary { cursor: pointer; }
/* 사진 마당 기도터 화면: 열두 분이 줄지어(넘치면 옆으로 넘겨 봄) */
.gido-screen { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 18%, rgba(255, 214, 150, 0.16), transparent 55%), linear-gradient(#141923 0%, #1d2330 55%, #2a2722 100%); color: #f6ecdc; }
.gido-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 6px; }
.gido-top h2 { margin: 0; font: 700 20px/1.2 var(--font-title); letter-spacing: 0.06em; }
.gido-top p { grid-column: 2; margin: 0; font-size: 13px; opacity: 0.75; }
.gido-top .btn.ghost { grid-row: span 2; border-color: rgba(255, 236, 200, 0.45); color: #fbf1df; background: transparent; }
.gido-row { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 0 18px 46vh; overflow-x: auto; scroll-snap-type: x proximity; }
/* 가운데 정렬(넓은 화면에서 왼쪽으로 쏠렸음) — 넘칠 때는 처음부터 옆으로 넘겨 볼 수 있게 auto 여백으로 */
.gido-row > :first-child { margin-left: auto; }
.gido-row > :last-child { margin-right: auto; }
.gido-statue { position: relative; flex: none; width: clamp(60px, min(10vw, 13vh), 130px); display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; scroll-snap-align: center; transition: transform 0.3s; }
.gido-statue img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) brightness(0.88); transition: filter 0.3s; }
.gido-statue .gido-label { margin-top: 6px; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.4); font-size: 12.5px; white-space: nowrap; }
.gido-statue.on { transform: scale(1.12); z-index: 1; }
.gido-statue.on img { filter: drop-shadow(0 0 18px rgba(255, 220, 150, 0.55)) brightness(1.05); }
.gido-statue.mine .gido-label { background: rgba(181, 67, 44, 0.85); }
.gido-me3d { aspect-ratio: 0.72; contain: size layout; }
.gido-me3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gido-me3d .gido-me-img { position: absolute; left: 0; bottom: 0; width: 100%; }
.gido-me { position: absolute; left: 50%; bottom: 18px; width: 64%; transform: translate(-50%, 0); transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.gido-me.bow { animation: bowFigure 1.3s ease-in-out; }
.gido-me.big { animation: bowFigure 2.4s ease-in-out; }
.gido-wish { position: absolute; left: 50%; bottom: 62%; transform: translateX(-50%); padding: 4px 10px; border-radius: 12px; background: rgba(20, 16, 12, 0.6); color: #fff4e0; font: 400 15px/1.3 var(--font-brush); white-space: nowrap; animation: lapMsg 6s ease forwards; pointer-events: none; }
body.gido-on .chat-bar, body.gido-on .dock { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .gido-row { padding-bottom: 50vh; } .gido-statue { width: 80px; } .gido-statue .gido-label { white-space: normal; font-size: 11px; line-height: 1.25; text-align: center; } } /* 휴대폰: 이름표를 두 줄로(옆 이름표와 겹쳤음) */
/* 3D 마당 기도 창은 오른쪽 위에(아래 가운데는 절하는 내 캐릭터를 가렸음) — 사진 마당 기도터 화면은 부처님이 위라 아래 그대로 */
body.world-mode .tapdori.gido { left: auto; right: 16px; top: calc(112px + env(safe-area-inset-top, 0px)); bottom: auto; transform: none; width: min(360px, calc(100vw - 32px)); }
@media (max-width: 600px) { body.world-mode .tapdori.gido { right: 12px; left: 12px; width: auto; top: calc(100px + env(safe-area-inset-top, 0px)); } body.world-mode .tapdori.gido .gido-face { width: 40px; height: 68px; } body.world-mode .tapdori.gido .info { display: none; } }
/* 올린 기와 = 기와 카드 모음(내 기와 먼저·금테) */
.giwa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.giwa-grid li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px 8px; border: 1px solid var(--paper-line); border-radius: 14px; }
.giwa-grid li.mine { border-color: #e6b54a; box-shadow: 0 0 12px rgba(230, 181, 74, 0.35); }
.giwa-grid li.empty { grid-column: 1 / -1; display: block; text-align: center; }
.giwa-grid .write-giwa.small { width: 100%; height: auto; margin: 0; }
.giwa-grid .write-giwa .w-text.w-name { font-size: 19px; }
.giwa-grid .write-giwa .w-text.w-wish { font-size: 13px; }
.giwa-grid .meta { margin: 0; font-size: 11.5px; color: var(--ink-soft); text-align: center; }
.gido-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; z-index: -1; filter: blur(2px) brightness(0.42) saturate(0.9); transform: scale(1.04); }
.gido-screen { isolation: isolate; }
.gido-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 30%, rgba(255, 214, 150, 0.16), transparent 60%), linear-gradient(rgba(10, 12, 18, 0.2), rgba(10, 8, 6, 0.55)); }
/* 향 세 대: 붉은 대(손잡이)는 남고, 갈색 향이 3분(--dur) 동안 타들어 간다. 불씨는 타는 끝을 따라 내려오고 작은 연기가 오른다 */
.incense { position: absolute; left: var(--x, 50%); top: var(--y, 80%); z-index: 1; display: flex; gap: var(--gap, 4px); align-items: flex-end; height: var(--h, 13%); transform: translate(-50%, -100%); pointer-events: none; } /* 아래 끝 = 사진 속 향로 입구 앞 테두리(worship.js placeIncense) */
.incense .stick { display: flex; flex-direction: column; justify-content: flex-end; width: var(--w, 3px); height: 100%; transform: rotate(var(--tilt)); transform-origin: 50% 100%; }
.incense .burn { position: relative; display: block; height: 78%; background: linear-gradient(90deg, #4a3020, #7a5236 50%, #4a3020); border-radius: 1px 1px 0 0; animation: incenseBurn var(--dur) linear forwards; }
.incense .handle { display: block; height: 22%; background: linear-gradient(to top, rgba(26, 8, 4, 0.85), transparent 30%), linear-gradient(90deg, #8c1f17, #d0412e 50%, #8c1f17); } /* 아래 끝은 어둡게 — 향로 입구 속으로 들어간 듯 */
.incense-smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* 향 끝 연기(worship.js startSmoke) */
/* 향을 피우는 동안 사진에 그려진 향로 연기를 걷어 냄(places.js setSmoke): 연기 든 영상은 사진으로 넘어가고, 사진을 다시 그리지 않는 화면에선 지운 조각을 그 자리에 얹는다 */
.place-clean { position: absolute; left: var(--l, 0); top: var(--t, 0); width: var(--w, 0); height: var(--h, 0); z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.place.clean-on .place-clean.ready { opacity: 1; }
.place.clean-on video.place-media { opacity: 0 !important; transition: opacity 1.2s ease !important; }
.incense .ember { position: absolute; left: 50%; top: -2px; width: 5px; height: 6px; transform: translateX(-50%); border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 60%, #fff1b0 0 20%, #ff8a2a 55%, #7a2a10 100%); box-shadow: 0 0 6px 2px rgba(255, 140, 50, 0.8), 0 0 14px 4px rgba(255, 120, 40, 0.35); animation: emberGlow 1.6s ease-in-out infinite alternate; }
.incense .burn::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 7px; background: linear-gradient(#9a948c, transparent); opacity: 0.8; } /* 불씨 아래 재 */
@keyframes incenseBurn { from { height: 78%; } to { height: 5%; } }
@keyframes emberGlow { from { filter: brightness(0.85); } to { filter: brightness(1.25); } }
.incense.out .ember { animation: none; opacity: 0; transition: opacity 2s; }
.incense.out { animation: incenseFade 8s ease forwards; }
@keyframes incenseFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
/* 사진 마당 기와 더미: 나무 받침 위에 세 줄로 포갠 암키와(앞에서 본 오목한 둥근 테가 겹겹이) + 앞에 소원 쓴 기와 한 장 */
/* 기와 더미 보기(누르면): 기와 한 장씩 크게, 좌우로 넘김, + 로 추가 */
.giwa-pile-view { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 600px); justify-content: center; align-content: center; padding: 16px; background: rgba(8, 6, 4, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gpv-card { position: relative; width: 100%; min-width: 0; padding: 16px 18px 18px; border-radius: 20px; background: rgba(24, 22, 20, 0.94); color: #f6ecdc; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.gpv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gpv-head h3 { flex: 1; margin: 0; font: 700 19px/1.3 var(--font-title); letter-spacing: 0.04em; }
.gpv-head .close, .gpv-add { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #f6ecdc; font-size: 20px; line-height: 1; cursor: pointer; }
.gpv-add { background: linear-gradient(135deg, #e6b54a, #b5432c); color: #fff; font-size: 24px; box-shadow: 0 2px 10px rgba(230, 181, 74, 0.4); }
.gpv-stage { position: relative; min-width: 0; }
.gpv-track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gpv-track::-webkit-scrollbar { display: none; }
.gpv-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 6px; }
.gpv-slide .write-giwa { width: min(380px, 76vw); height: auto; margin: 0; }
.gpv-slide .write-giwa .w-text.w-name { font-size: clamp(26px, 6.5vw, 40px); }
.gpv-slide .write-giwa .w-text.w-wish { font-size: clamp(17px, 4.2vw, 26px); }
.gpv-slide.mine .write-giwa { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(230, 181, 74, 0.55)); }
.gpv-slide .meta { margin: 2px 0 0; font-size: 13px; color: rgba(246, 236, 220, 0.7); }
.gpv-slide .joins { margin: 0; font-size: 13px; color: #ffe6a8; }
.gpv-nav { position: absolute; top: 42%; z-index: 1; width: 40px; height: 40px; border: 1px solid rgba(255, 236, 200, 0.35); border-radius: 50%; background: rgba(20, 16, 12, 0.7); color: #f6ecdc; font-size: 26px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.gpv-nav.prev { left: -6px; }
.gpv-nav.next { right: -6px; }
.gpv-count { display: block; margin-top: 4px; text-align: center; font-size: 13px; opacity: 0.75; min-height: 1em; }
.gpv-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: min(380px, 76vw); aspect-ratio: 1.32; border: 2px dashed rgba(255, 236, 200, 0.4); border-radius: 14px; background: rgba(255, 255, 255, 0.03); color: #f6ecdc; cursor: pointer; }
.gpv-blank span { font-size: 54px; line-height: 1; color: #e6b54a; }
.gpv-blank small { font-size: 13px; opacity: 0.8; }
/* ── 소원 기도터 공간(사진 마당): 돌마당 무대 위에 열두 분 ── */
.gido-screen { background: #1a1612; }
.gido-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.gido-scroll::-webkit-scrollbar { display: none; }
.gido-stage { position: absolute; left: 0; }
.gido-terrace { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body[data-phase='night'] .gido-terrace { filter: brightness(0.45) saturate(0.7) hue-rotate(-12deg); }
body[data-phase='dawn'] .gido-terrace { filter: brightness(0.85) saturate(0.9); }
.gido-stage .gido-statue { position: absolute; left: var(--x); top: var(--y); z-index: var(--z); width: auto; height: var(--h); aspect-ratio: 0.33; padding: 0; border: 0; background: none; transform: translate(-50%, -100%); transition: filter 0.3s; scroll-snap-align: none; }
.gido-stage .gido-statue img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)) brightness(0.96); }
.gido-stage .gido-statue:hover img, .gido-stage .gido-statue.on img { filter: drop-shadow(0 0 16px rgba(255, 220, 150, 0.65)) brightness(1.06); }
.gido-stage .gido-statue { transition: transform 0.45s ease, filter 0.3s; transform-origin: 50% 100%; }
.gido-stage .gido-statue.on { transform: translate(-50%, -100%) scale(1.18); z-index: 98; } /* 고른 분: 빛나며 조금 커짐(사용자: "선택하면 그 불상이 하이라이트되면서 좀 더 커지게") */
.gido-stage .gido-statue.on img { filter: sepia(0.55) saturate(1.9) hue-rotate(-8deg) brightness(1.2) drop-shadow(0 0 6px rgba(255, 226, 140, 1)) drop-shadow(0 0 26px rgba(255, 196, 70, 0.95)) drop-shadow(0 0 60px rgba(255, 180, 60, 0.6)); animation: goldPulse 2.6s ease-in-out infinite; } /* 금빛(사용자: "선택하면 하이라이트를 좀 더 — 금빛으로") */
.gido-stage .gido-statue::before { content: ''; position: absolute; left: 50%; top: 14%; z-index: 0; width: 170%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0.6); background: radial-gradient(circle, rgba(255, 230, 150, 0.75), rgba(255, 190, 80, 0.35) 38%, transparent 70%); opacity: 0; transition: opacity 0.5s, transform 0.5s; pointer-events: none; }
.gido-stage .gido-statue.on::before { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: goldHalo 2.6s ease-in-out infinite; }
.gido-stage .gido-statue::after { content: ''; position: absolute; left: 50%; bottom: -4%; z-index: 0; width: 150%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 210, 110, 0.7), transparent 70%); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.gido-stage .gido-statue.on::after { opacity: 1; }
@keyframes goldPulse { 50% { filter: sepia(0.55) saturate(1.9) hue-rotate(-8deg) brightness(1.3) drop-shadow(0 0 8px rgba(255, 232, 160, 1)) drop-shadow(0 0 34px rgba(255, 200, 80, 1)) drop-shadow(0 0 80px rgba(255, 180, 60, 0.7)); } }
@keyframes goldHalo { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.gido-shadow { position: absolute; left: 50%; bottom: -3%; width: 120%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%); }
.gido-stage .gido-label { position: absolute; left: 50%; top: 100%; z-index: 2; margin-top: 2px; transform: translateX(-50%); padding: 1px 6px; border-radius: 3px; background: rgba(40, 36, 30, 0.78); color: #f6ecdc; font-size: clamp(9px, 0.75vw, 12px); white-space: nowrap; }
.gido-stage .gido-statue.mine .gido-label { background: linear-gradient(135deg, #e6b54a, #b5432c); color: #fff; }
.gido-stage .gido-me { position: absolute; left: var(--x, 50%); top: var(--y, 91%); z-index: 99; height: var(--h, 18%); aspect-ratio: 0.72; width: auto; bottom: auto; transform: translate(-50%, -100%) scale(var(--s, 1)); transform-origin: 50% 100%; pointer-events: none; will-change: left, top, transform; }
.gido-stage .gido-statue:focus { outline: none; } /* 누른 뒤 남던 네모 테(사용자 화면) — 강조는 금빛으로만 */
.gido-stage .gido-statue:focus-visible { outline: none; }
.gido-stage .gido-statue:focus-visible img { filter: drop-shadow(0 0 10px rgba(255, 226, 140, 0.9)); }
.gido-stage .gido-me.walking:not(.gido-me3d) .gido-me-img { animation: walkBob 0.36s ease-in-out infinite; }
.gido-stage .gido-me .gido-me-img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.gido-stage .gido-wish { bottom: 104%; }
.gido-screen .gido-top { position: relative; z-index: 2; background: linear-gradient(rgba(10, 8, 6, 0.55), transparent); }
/* 기도 창은 하늘 쪽(오른쪽 위)에 — 바닥의 부처님을 가리지 않게 */
body.gido-on .tapdori.gido { left: auto; right: 16px; top: calc(86px + env(safe-area-inset-top, 0px)); bottom: auto; transform: none; width: min(380px, calc(100vw - 32px)); }
@media (max-width: 600px) { body.gido-on .tapdori.gido { left: 12px; right: 12px; width: auto; top: calc(92px + env(safe-area-inset-top, 0px)); } body.gido-on .tapdori.gido .info { display: none; } body.gido-on .tapdori.gido .gido-face { width: 36px; height: 60px; } }
/* ── 실사 한지 연등(186번, 사용자: "등도 리얼하게"): 아이보리 한지 사진에 고른 색을 곱해 물들이고(multiply), 안에서 불빛(screen) ── */
.real-lamp { position: relative; display: block; aspect-ratio: 0.596; isolation: isolate; background: url("/textures/lamp-real.webp?v=1") center / 100% 100% no-repeat; }
.real-lamp::before, .real-lamp::after { content: ''; position: absolute; inset: 0; -webkit-mask: url("/textures/lamp-real.webp?v=1") center / 100% 100% no-repeat; mask: url("/textures/lamp-real.webp?v=1") center / 100% 100% no-repeat; pointer-events: none; }
.real-lamp::before { background: var(--c, #e0503e); mix-blend-mode: multiply; }
.real-lamp::after { background: radial-gradient(ellipse 44% 30% at 50% 45%, rgba(255, 244, 210, var(--lit, 0.3)), rgba(255, 220, 160, calc(var(--lit, 0.3) * 0.4)) 55%, transparent 80%); mix-blend-mode: screen; }
body[data-phase='night'] .real-lamp, body[data-phase='dusk'] .real-lamp { --lit: 0.85; }
/* 기와 더미: 실사 기와를 세 줄로 포갬(위 기와가 아래 기와 뒤쪽을 덮어 글씨가 일부만 보임), 새 기와는 위에서 내려앉음 */
.giwa-stack .gpallet { position: absolute; left: 0; right: 0; bottom: 0; height: 6cqw; border-radius: 2px; background: linear-gradient(#7a5434, #4e3420); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.giwa-stack .ptile { position: absolute; left: calc(var(--col) * 33cqw); bottom: calc(5cqw + var(--lv) * 9cqw); z-index: calc(var(--lv) * 3 + var(--col)); width: 34cqw; aspect-ratio: 1.32; background: url("/textures/giwa-h.webp?v=2") center / 100% 100% no-repeat; transform: rotate(var(--tilt)); filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, 0.55)); }
.giwa-stack .ptile .pw { position: absolute; left: 16%; right: 14%; top: 18%; display: flex; flex-direction: column; align-items: center; color: #f3efe6; font-family: var(--font-brush); line-height: 1.05; white-space: nowrap; overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E") 0 0 / 60px 60px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E") 0 0 / 60px 60px repeat; }
.giwa-stack .ptile .pn { font-size: 5.5cqw; }
.giwa-stack .ptile .pwish { font-size: 3.6cqw; opacity: 0.9; }
.giwa-stack .ptile.mine { filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1.6cqw rgba(255, 214, 140, 0.9)); }
.giwa-stack .ptile.drop { animation: tileDrop 1.1s cubic-bezier(0.3, 0.6, 0.4, 1) both; }
@keyframes tileDrop { 0% { transform: translateY(-60cqw) rotate(-14deg); opacity: 0; } 55% { transform: translateY(1.2cqw) rotate(var(--tilt)); opacity: 1; } 70% { transform: translateY(-1.5cqw) rotate(var(--tilt)); } 100% { transform: rotate(var(--tilt)); } }
.giwa-pile .giwa-spot { margin-top: 4px; }
/* 하늘로 날리는 소원 연등 = 실사 풍등(187번): 안에서 불이 켜진 한지 — 고른 색을 살짝 곱하고(밝게 남도록 soft-light) 불빛은 그대로 */
.sky-lamp { position: relative; display: block; aspect-ratio: 0.575; isolation: isolate; background: url("/textures/sky-lantern.webp?v=1") center / 100% 100% no-repeat; }
.sky-lamp::before { content: ''; position: absolute; inset: 0; -webkit-mask: url("/textures/sky-lantern.webp?v=1") center / 100% 100% no-repeat; mask: url("/textures/sky-lantern.webp?v=1") center / 100% 100% no-repeat; background: var(--c, #e0503e); mix-blend-mode: color; opacity: 0.55; pointer-events: none; }
.write-lamp .w-lamp.sky-lamp { width: 70px; filter: drop-shadow(0 0 16px rgba(255, 190, 110, 0.6)); }
/* ── 수행 증표(milestones.js): 금빛이 퍼지고 연꽃잎이 내리며 인장 증표 ── */
.milestone { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(40, 26, 8, 0.55), rgba(6, 4, 2, 0.82)); animation: msIn 0.6s ease both; }
.milestone.out { animation: msOut 0.7s ease forwards; }
@keyframes msIn { from { opacity: 0; } }
@keyframes msOut { to { opacity: 0; } }
.ms-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.16) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); mask: radial-gradient(circle, #000 0, transparent 55%); animation: msSpin 24s linear infinite; }
@keyframes msSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ms-glow { position: absolute; left: 50%; top: 45%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 228, 150, 0.6), rgba(255, 190, 80, 0.18) 45%, transparent 70%); animation: msPulse 3s ease-in-out infinite; }
@keyframes msPulse { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.85; } }
.ms-petal { position: absolute; top: -6%; left: var(--x); width: calc(18px * var(--s)); height: calc(26px * var(--s)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fff3f5, #f5a9bd 70%, #e17c99); opacity: 0.9; transform: rotate(var(--r)); animation: msFall var(--t) linear var(--d) infinite; }
@keyframes msFall { to { top: 106%; transform: rotate(calc(var(--r) + 540deg)) translateX(40px); } }
.ms-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(380px, calc(100vw - 40px)); padding: 26px 22px 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(40, 30, 16, 0.92), rgba(22, 16, 10, 0.94)); border: 1px solid rgba(255, 214, 140, 0.5); box-shadow: 0 0 40px rgba(255, 200, 90, 0.35), 0 20px 50px rgba(0, 0, 0, 0.55); color: #fbf1df; text-align: center; animation: msPop 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both; }
@keyframes msPop { from { opacity: 0; transform: scale(0.6) translateY(30px); } }
.ms-seal { display: grid; place-items: center; width: 104px; height: 104px; margin-top: -70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c4, #e6b54a 45%, #9c6a1c 100%); box-shadow: 0 0 0 4px rgba(255, 236, 190, 0.5), 0 0 30px rgba(255, 210, 110, 0.9); animation: msSeal 1.2s cubic-bezier(0.2, 1.3, 0.4, 1) 0.3s both; }
.ms-seal span { color: #7a2414; font: 700 40px/1 var(--font-title); letter-spacing: -0.04em; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); }
@keyframes msSeal { from { transform: scale(0) rotate(-120deg); } }
.ms-kicker { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.3em; color: #e6b54a; }
.ms-title { margin: 0; font: 700 26px/1.25 var(--font-title); letter-spacing: 0.04em; background: linear-gradient(90deg, #fff2c8, #ffd36b, #fff2c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-sub { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.9; word-break: keep-all; }
.ms-note { margin: 2px 0 0; font-size: 13px; color: #ffe6a8; opacity: 0.85; }
.ms-ok { margin-top: 12px; min-width: 160px; }
@media (prefers-reduced-motion: reduce) { .ms-rays, .ms-glow, .ms-petal { animation: none; } .ms-petal { display: none; } }
/* 2단계(공덕 10,000) 증표: 1단계보다 확실히 크게 — 처음 번쩍임, 빛줄기 두 겹(반대로 돎), 더 큰 빛무리, 금빛 가루가 오름, 큰 인장 + 도는 금빛 고리 */
.milestone.grand { background: radial-gradient(ellipse at 50% 45%, rgba(90, 58, 14, 0.6), rgba(10, 6, 2, 0.88)); }
.milestone.grand .ms-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0.3) 0deg 5deg, transparent 5deg 14deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); mask: radial-gradient(circle, #000 0, transparent 62%); }
.milestone.grand .ms-rays.rev { background: repeating-conic-gradient(from 7deg, rgba(255, 246, 210, 0.16) 0deg 2deg, transparent 2deg 11deg); animation-direction: reverse; animation-duration: 36s; }
.milestone.grand .ms-glow { width: 105vmin; height: 105vmin; background: radial-gradient(circle, rgba(255, 238, 180, 0.85), rgba(255, 196, 90, 0.32) 42%, transparent 70%); }
.ms-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 250, 230, 1), rgba(255, 220, 140, 0.7) 40%, rgba(255, 200, 90, 0) 75%); pointer-events: none; animation: msFlash 1.4s ease-out forwards; }
@keyframes msFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.ms-spark { position: absolute; bottom: -4%; left: var(--x); width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%; background: #fff4c8; box-shadow: 0 0 10px 3px rgba(255, 214, 120, 0.9); opacity: 0; animation: msRise var(--t) ease-out var(--d) infinite; }
@keyframes msRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-92vh) translateX(18px); } }
.milestone.grand .ms-card { border: 2px solid rgba(255, 224, 150, 0.85); box-shadow: 0 0 60px rgba(255, 210, 110, 0.6), 0 0 0 6px rgba(255, 214, 120, 0.12), 0 20px 50px rgba(0, 0, 0, 0.6); }
.milestone.grand .ms-seal { position: relative; width: 136px; height: 136px; margin-top: -92px; box-shadow: 0 0 0 5px rgba(255, 236, 190, 0.6), 0 0 50px rgba(255, 214, 120, 1), 0 0 90px rgba(255, 190, 80, 0.6); }
.milestone.grand .ms-seal span { font-size: 54px; }
.milestone.grand .ms-seal::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(255, 226, 150, 0.85); animation: msRing 14s linear infinite; }
.milestone.grand .ms-seal::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255, 226, 150, 0.45); animation: msRing 22s linear infinite reverse; }
@keyframes msRing { to { transform: rotate(360deg); } }
.milestone.grand .ms-title { font-size: 32px; }
.milestone.grand .ms-kicker { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .ms-spark, .ms-flash { display: none; } .milestone.grand .ms-seal::before, .milestone.grand .ms-seal::after { animation: none; } }
/* 작은 알림(염주 한 바퀴·108배): 위쪽 가운데에 잠깐 — 화면을 덮지 않고 누르기도 막지 않음 */
.ms-notice { position: fixed; left: 50%; top: calc(var(--topbar-h, 56px) + 58px); z-index: 80; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(34, 25, 13, 0.82); border: 1px solid rgba(255, 214, 140, 0.45); box-shadow: 0 0 18px rgba(255, 200, 90, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35); color: #fbf1df; pointer-events: none; transform: translateX(-50%); animation: msNoticeIn 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.ms-notice.out { animation: msNoticeOut 0.6s ease forwards; }
.ms-notice-seal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c4, #e6b54a 50%, #9c6a1c); color: #7a2414; font: 700 17px/1 var(--font-title); }
.ms-notice-seal.two { font-size: 12px; letter-spacing: -0.06em; }
.ms-notice-text { display: flex; flex-direction: column; line-height: 1.25; }
.ms-notice-text strong { font: 700 15px/1.25 var(--font-title); color: #ffe3a0; }
.ms-notice-text span { font-size: 12.5px; opacity: 0.85; }
@keyframes msNoticeIn { from { opacity: 0; transform: translate(-50%, -10px) scale(0.92); } }
@keyframes msNoticeOut { to { opacity: 0; transform: translate(-50%, -8px); } }
/* 휴대폰: 기와·염주가 창을 넘치지 않게(카카오 브라우저 실화면에서 기와가 창을 가득 채워 '올리기' 버튼이 밀려났음) */
@media (max-width: 600px) {
  .ring.ring3d { height: min(330px, 42vh); }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* ── 수행 단계 빛(사진 마당): 정진 = 발밑 금빛 원, 대원 = + 머리 뒤 작은 광배. 이룬 순간 = 금빛 기둥 ── */
.pilgrim.tier1::before, .pilgrim.tier2::before { content: ''; position: absolute; left: 50%; bottom: 14%; z-index: -1; width: 120%; height: 18%; transform: translate(-50%, 50%); border-radius: 50%; background: radial-gradient(ellipse, transparent 38%, rgba(255, 214, 120, 0.85) 56%, rgba(255, 190, 80, 0.25) 70%, transparent 74%); animation: auraBreath2 3.4s ease-in-out infinite; pointer-events: none; }
.pilgrim.tier2::after { content: ''; position: absolute; left: 50%; top: 2%; z-index: -1; width: 72%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, 0.28) 0 52%, rgba(255, 214, 120, 0.9) 60%, rgba(255, 200, 90, 0.2) 68%, transparent 72%); animation: auraBreath2 3.4s ease-in-out infinite; pointer-events: none; }
/* 2단계는 1단계와 한눈에 다르게(사용자: "공덕 1000이랑 10000이랑 차이가 별로 없는데"): 발밑 원 두 겹으로 크고 밝게, 광배 크게 + 금빛 테 두 줄, 몸 둘레 금빛 */
.pilgrim.tier2::before { width: 165%; height: 24%; background: radial-gradient(ellipse, rgba(255, 236, 180, 0.35) 0 30%, transparent 36%, rgba(255, 222, 140, 1) 50%, rgba(255, 200, 90, 0.35) 58%, transparent 62%, rgba(255, 214, 120, 0.7) 70%, rgba(255, 200, 90, 0.15) 76%, transparent 80%); }
.pilgrim.tier2::after { top: -6%; width: 104%; background: radial-gradient(circle, rgba(255, 240, 200, 0.42) 0 40%, rgba(255, 226, 160, 0.2) 50%, rgba(255, 220, 140, 1) 57%, rgba(255, 210, 110, 0.3) 61%, transparent 63%, rgba(255, 220, 140, 0.75) 67%, rgba(255, 200, 90, 0.15) 70%, transparent 74%); }
.pilgrim.tier2 .figure { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 4px rgba(255, 222, 140, 0.95)) drop-shadow(0 0 14px rgba(255, 196, 90, 0.7)); }
@keyframes auraBreath2 { 50% { opacity: 0.65; } }
.gold-pillar { position: absolute; left: 50%; bottom: 10%; z-index: 5; width: 150%; height: 900%; transform: translateX(-50%); background: linear-gradient(to top, rgba(255, 216, 120, 0.85), rgba(255, 226, 150, 0.4) 45%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mix-blend-mode: screen; animation: pillarLife var(--life, 3.6s) ease forwards; pointer-events: none; }
.gold-pillar.grand { width: 240%; height: 1100%; background: linear-gradient(to top, rgba(255, 236, 170, 1), rgba(255, 226, 150, 0.6) 50%, transparent); }
.gold-pillar i { position: absolute; bottom: 0; left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px 2px rgba(255, 220, 140, 0.9); animation: moteUp 2.2s ease-out var(--d) infinite; }
@keyframes pillarLife { 0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); transform-origin: 50% 100%; } 15% { opacity: 1; transform: translateX(-50%) scaleY(1); } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes moteUp { from { bottom: 0; opacity: 1; } to { bottom: 70%; opacity: 0; } }
/* 휴대폰 법당·석굴암: 버튼 다섯 개가 두 줄 글씨로 깨지고 화면 밖으로 나갔음(사용자 아이폰) → 한 줄 글씨, 3+2 칸 */
@media (max-width: 600px) {
  .worship-bar { left: 10px; right: 10px; transform: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .worship-bar .btn { grid-column: span 2; height: 38px; padding: 0 6px; font-size: 14px; white-space: nowrap; letter-spacing: 0; }
  .worship-bar .btn:nth-child(4), .worship-bar .btn:nth-child(5) { grid-column: span 3; }
  .worship-count { left: 50%; transform: translateX(-50%); bottom: calc(108px + var(--safe-b)); }
  body:has(.place.open) .chat-bar { bottom: calc(108px + var(--safe-b)); }
}


/* 주소 옮기기(move.js): 옛 주소에서 새 주소로 넘어가는 동안 화면을 그리지 않는다 */
html.moving body { visibility: hidden; }