/* LUMEN — 짙은 청회색·따뜻한 석재·무광 금색·버건디. 3D 를 가리지 않게 UI 는 가장자리에 얇게. */
:root {
  --ink: #141a22;
  --glass: rgba(20, 27, 36, 0.72);
  --glass-strong: rgba(18, 24, 32, 0.9);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f3eee4;
  --muted: #b9b3a8;
  --gold: #d9bf8c;
  --gold-deep: #a9874c;
  --burgundy: #8a2f3e;
  --paper: #f5f0e6;
  --paper-ink: #1d2128;
  --paper-muted: #6d6a64;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body {
  margin: 0; background: #12161c; color: var(--text); overflow: hidden; height: 100dvh;
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#world, #world canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

/* 불러오기 */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; text-align: center; gap: 14px; background: radial-gradient(ellipse at 50% 40%, #2a2a33, #111419 70%); color: var(--gold); font: 400 26px/1 Georgia, 'Noto Serif KR', serif; letter-spacing: 6px; transition: opacity 0.8s; }
#loading .mark { font-size: 44px; letter-spacing: 0; }
#loading small { font: 13px system-ui, sans-serif; letter-spacing: 1px; color: var(--muted); }
#loading.gone { opacity: 0; pointer-events: none; }

/* 위 */
.top { position: fixed; top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px); display: flex; gap: 8px; align-items: center; z-index: 5; pointer-events: none; }
.top > * { pointer-events: auto; }
.chip, .status { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; }
.status { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 42px; text-align: center; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: 1px; }
.dot.live { background: #ff6b6b; box-shadow: 0 0 0 0 #ff6b6b99; animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px #ff6b6b00; } 100% { box-shadow: 0 0 0 0 #ff6b6b00; } }

/* 자막 */
#caption { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 168px); transform: translate(-50%, 8px); width: min(680px, calc(100% - 24px)); padding: 14px 18px; border-radius: 14px; background: var(--glass-strong); border: 1px solid rgba(217, 191, 140, 0.28); line-height: 1.75; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s; z-index: 4; }
#caption.show { opacity: 1; transform: translate(-50%, 0); }
#caption .who { display: inline-block; margin-right: 10px; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(217, 191, 140, 0.18); color: var(--gold); vertical-align: 1px; }
#caption[data-who='all'] .who { background: rgba(138, 47, 62, 0.45); color: #ffd9de; }
#caption[data-who='all'] .text { font-weight: 600; }
body.bigcap #caption { font-size: 19px; }

#toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 66px); transform: translate(-50%, -6px); width: max-content; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 6; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 아래: 지금 기도 막대 + 동작 줄 */
#bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 78px); width: min(680px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); z-index: 5; }
#bar .seg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#segStep { font-size: 11px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#segTitle { font: 600 15px/1.3 Georgia, 'Noto Serif KR', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progress { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: 4px; }
#progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width 1s linear; }
.primary { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid #f1deb6; background: linear-gradient(135deg, #f0dcb2, #c19c5d); color: #2b2418; font-weight: 600; white-space: nowrap; }
.primary.ghost { background: transparent; color: var(--gold); border-color: rgba(217, 191, 140, 0.5); }

#actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 12px); width: min(680px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; z-index: 5; }
#actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 11.5px; }
#actions button.on { border-color: rgba(217, 191, 140, 0.7); color: var(--gold); background: rgba(60, 48, 30, 0.75); }

/* 작은 창(패널) — 3D 위 */
dialog#panel { width: min(520px, calc(100% - 24px)); max-height: min(78dvh, 760px); padding: 0; border-radius: 18px; border: 1px solid #c9b48a; background: var(--paper); color: var(--paper-ink); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); overflow: hidden; display: none; flex-direction: column; color-scheme: light; }
dialog#panel[open] { display: flex; }
dialog#panel::backdrop { background: rgba(10, 14, 22, 0.45); backdrop-filter: blur(3px); }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; border-bottom: 1px solid #e3dac8; }
.ptitle { margin: 0; font: 600 19px/1.3 Georgia, 'Noto Serif KR', serif; }
.pclose { width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: #6d6a64; border-radius: 10px; }
.pbody { padding: 14px 18px 20px; overflow: auto; font-size: 14px; line-height: 1.65; }
.pbody h3 { font-size: 14px; margin: 20px 0 8px; color: #7a5d2c; }
.pbody p { margin: 0 0 10px; }
.pbody a { color: #8a6526; }
.muted { color: var(--paper-muted); font-size: 12.5px; }
.lead { font-weight: 600; }
.notice { margin: 14px 0 6px; padding: 12px 14px; border-radius: 10px; background: #ece4d4; font-size: 12.5px; line-height: 1.7; color: #4e4a43; }
.notice.warn { background: #f5dfd6; color: #7a2f22; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin: 0 4px 0 6px; vertical-align: -1px; border: 1px solid #0003; }
.menu { display: grid; gap: 8px; }
.menu button, .prog { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid #e0d6c3; background: #fffdf8; color: var(--paper-ink); }
.menu small { color: var(--paper-muted); font-size: 12px; }
.pbody .primary { color: #2b2418; }
.mini { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid #d3c5a8; background: #fffdf8; color: #5b4520; font-size: 12.5px; white-space: nowrap; }
.link { border: 0; background: none; color: #8a6526; text-decoration: underline; padding: 6px 0; }
.evs .ev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e6ddcb; }
.ev b { min-width: 52px; color: #8a6526; display: flex; flex-direction: column; }
.ev span { flex: 1; display: flex; flex-direction: column; }
.ev small { color: var(--paper-muted); font-size: 12px; font-weight: 400; }
.ev.now { background: #f3e6c9; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; }
.wks .wk { display: flex; gap: 14px; padding: 6px 0; font-size: 13px; }
.wk b { min-width: 28px; color: #8a6526; }
.wk.today { font-weight: 700; }
ol.order { list-style: none; padding: 0; margin: 10px 0; }
ol.order li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #e0d6c3; }
ol.order em { font-style: normal; min-width: 42px; color: var(--paper-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; padding-top: 1px; }
ol.order span { display: flex; flex-direction: column; }
ol.order small { color: var(--paper-muted); font-size: 11.5px; }
ol.order li.cur { color: #7a2f22; font-weight: 700; }
ol.order li.done { color: #a39e95; }
.altar { text-align: center; color: #8a6526; padding-bottom: 8px; margin: 8px 0; border-bottom: 1px solid #d9c9a8; }
.smap { display: grid; gap: 4px; }
.srow { display: grid; grid-template-columns: 18px 1fr 14px 1fr; align-items: center; gap: 4px; }
.srow small { font-size: 9.5px; color: #9b8e78; text-align: right; }
.srow > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.srow button { height: 18px; border: 0; border-radius: 3px; background: #d9c9aa; padding: 0; }
.srow button.occ { background: #a3a4ab; }
.srow button.mine { background: #3f6f8f; }
.views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.views button { min-height: 46px; border-radius: 12px; border: 1px solid #e0d6c3; background: #fffdf8; color: var(--paper-ink); }
.views button.on { border-color: #a9874c; background: #f3e6c9; font-weight: 600; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ebe3d3; }
.row input[type='range'] { width: 46%; accent-color: #a9874c; }
.row input[type='checkbox'] { width: 20px; height: 20px; accent-color: #a9874c; }
.row select { max-width: 60%; padding: 7px 8px; border-radius: 8px; border: 1px solid #d9cfbb; background: #fffdf8; color: inherit; font: inherit; font-size: 13.5px; }
.sw { display: flex; gap: 8px; }
.sw button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #0002; }
.sw button.on { box-shadow: 0 0 0 2px #a9874c; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.about div { padding: 10px 12px; border-radius: 10px; background: #fffdf8; border: 1px solid #e6ddcb; display: flex; flex-direction: column; user-select: none; }
.about span { font-size: 11.5px; color: var(--paper-muted); }
.gate { display: grid; gap: 12px; }
.gate label { display: grid; gap: 6px; font-size: 13px; }
.gate input, .pbody textarea, .row input:not([type='checkbox']):not([type='range']) { min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #d3c5a8; background: #fff; font: inherit; color: var(--paper-ink); }
.pbody textarea { width: 100%; padding: 10px 12px; margin: 8px 0; }
.atabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #e3dac8; }
.atabs button { white-space: nowrap; min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid #e0d6c3; background: #fffdf8; color: var(--paper-ink); font-size: 12.5px; }
.atabs button.on { background: #f3e6c9; border-color: #a9874c; }
.checks { list-style: none; padding: 0; }
.checks li { padding: 6px 0; }
.checks .ok { color: #2f6b44; }
.checks .no { color: #9a2532; }
.errs { font-size: 12px; padding-left: 18px; }
.filebtn { display: inline-flex; align-items: center; }

@media (max-width: 420px) {
  .chip span { display: none; }
  .chip { padding: 0 12px; }
  .status { font-size: 12px; padding: 0 10px; }
  #segTitle { font-size: 14px; }
  .primary { padding: 0 14px; }
  #caption { font-size: 14px; bottom: calc(var(--safe-b) + 162px); }
}
@media (min-width: 900px) {
  #bar { bottom: calc(var(--safe-b) + 86px); }
  #caption { bottom: calc(var(--safe-b) + 180px); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 화면 최적화 ── */
/* 긴 독서·강론 자막이 3D 를 다 덮지 않게(넘치면 자막 안에서 스크롤) */
#caption { max-height: 30vh; max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; }
/* 가로 휴대폰·짧은 화면: 지금 기도 막대와 동작 줄을 한 줄로, 아이콘만 */
@media (max-height: 520px) {
  .top { top: calc(var(--safe-t) + 6px); }
  .chip, .status { min-height: 36px; line-height: 36px; }
  #bar { left: calc(var(--safe-l) + 10px); transform: none; bottom: calc(var(--safe-b) + 8px); width: calc(55% - 16px); padding: 6px 6px 6px 12px; }
  #bar #segStep, #progress { display: none; }
  #actions { left: auto; right: calc(var(--safe-r) + 10px); transform: none; bottom: calc(var(--safe-b) + 8px); width: calc(45% - 14px); gap: 4px; }
  #actions button { min-height: 50px; }
  #actions span { display: none; }
  #caption { bottom: calc(var(--safe-b) + 70px); max-height: 38vh; max-height: 38dvh; font-size: 14px; }
  .primary { min-height: 38px; }
  #toast { top: calc(var(--safe-t) + 50px); }
}
/* 아주 좁은 휴대폰 */
@media (max-width: 350px) {
  #actions span { font-size: 10px; }
  #segStep { display: none; }
}
/* 큰 화면(태블릿 가로·PC): 동작 줄을 막대 옆 오른쪽 아래로 모아 가운데를 비운다 */
@media (min-width: 1100px) and (min-height: 600px) {
  #bar { left: calc(var(--safe-l) + 24px); transform: none; bottom: calc(var(--safe-b) + 24px); width: 520px; }
  #actions { left: auto; right: calc(var(--safe-r) + 24px); transform: none; bottom: calc(var(--safe-b) + 24px); width: 420px; }
  #caption { bottom: calc(var(--safe-b) + 110px); }
}
/* 저사양: 유리 흐림(backdrop-filter)은 휴대폰 GPU 에 비싸다 → 불투명 배경 */
html[data-tier='low'] .chip, html[data-tier='low'] .status, html[data-tier='low'] #bar, html[data-tier='low'] #actions button { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 27, 36, 0.9); }
html[data-tier='low'] dialog#panel::backdrop { backdrop-filter: none; }