@font-face { font-family: "Nanum Myeongjo"; src: url(fonts/NanumMyeongjo-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nanum Myeongjo"; src: url(fonts/NanumMyeongjo-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --ink: #f6f1e7;
  --ink-dim: rgba(246, 241, 231, .68);
  --glass: rgba(14, 11, 22, .45);
  --glass-line: rgba(255, 255, 255, .14);
  --gold: #e9c98a;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0f0c1a; color: var(--ink); overflow: hidden;
  font-family: system-ui, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.serif { font-family: "Nanum Myeongjo", serif; }

/* ---------- 로그인 첫 화면 ---------- */
#gate { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: max(32px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 55% at 50% 30%, #3a2c55 0%, #1a1430 45%, #0f0c1a 80%); transition: opacity .9s; overflow-y: auto; }
#gate.off { opacity: 0; pointer-events: none; }
.gate-mark { width: 72px; height: 72px; }
.gate-name { font-size: 30px; font-weight: 700; letter-spacing: .16em; margin: 10px 0 34px; }
.gate-verse { margin: 0; max-width: 420px; }
.gate-verse .t { font-size: 19px; line-height: 1.9; margin: 0; color: var(--ink); }
.gate-verse .r { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: #2a1f10; background: #f0d49a; padding: 3px 12px; border-radius: 999px; }
.gate-actions { margin-top: 48px; width: 100%; max-width: 340px; opacity: 0; transform: translateY(8px); transition: opacity .8s .2s, transform .8s .2s; }
.gate-actions.ready { opacity: 1; transform: none; }
.google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; border-radius: 26px;
  background: #fff; color: #1f1f1f; font-size: 16px; font-weight: 500; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.google:disabled { opacity: .7; }
.gate-err { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: #ffb4a8; }
.gate-note { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); margin: 6px 0 0; }
.gate-link { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--gold); }
:lang(ko) .gate-name { letter-spacing: .3em; }

.top-left, .top-right { display: flex; gap: 6px; }
/* 광장 라디오: 내 계정 아래 작은 지금 재생 카드 */
.now-playing { position: absolute; right: max(16px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 46px);
  display: flex; align-items: center; gap: 8px; max-width: 190px; padding: 5px 12px 5px 5px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: npIn .5s ease; }
.now-playing[hidden] { display: none; }
.now-playing img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; }
.now-playing div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.now-playing b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing span { font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes npIn { from { opacity: 0; transform: translateY(-4px); } }
.top .pill { font-size: 13px; padding: 8px 13px; }
#scene.lobby .place-only, #scene.lobby .panel .row:first-child, #scene:not(.lobby) .lobby-only { display: none; }
#scene.lobby .panel .row + .row { margin-top: 0; }
/* 문을 지날 때 잠깐 어두워진다 */
#fade { position: fixed; inset: 0; z-index: 5; background: #0b0912; opacity: 0; pointer-events: none; transition: opacity 1.1s ease-out; }
#fade.on { opacity: 1; pointer-events: auto; transition: opacity .6s ease-in; }
/* 문 앞에 서면 뜨는 들어가기 버튼 */
#doorBtn { position: absolute; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 92px); transform: translate(-50%, 10px);
  padding: 13px 22px; font-size: 15px; background: rgba(233, 201, 138, .94); color: #2a1f10; border: 0; white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
#scene:not(.lobby) #doorBtn { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 140px); }
#doorBtn.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#together { font-size: 13px; color: var(--gold); }
.sw { display: block; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto; border: 2px solid rgba(255,255,255,.3); }
.sheet-note { font-size: 12px; color: var(--ink-dim); line-height: 1.6; margin: 0 4px 12px; text-align: center; }
.opt.danger { color: #ff9b8f; }
.credits { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); text-align: left; padding: 4px 6px; }
.credits b { color: var(--ink); font-weight: 500; }
.credits a { color: var(--gold); }

/* ---------- 장면 ---------- */
#scene { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#scene.on { opacity: 1; pointer-events: auto; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px; pointer-events: none; }
.top > * { pointer-events: auto; }
.pill { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.hint { position: absolute; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%);
  font-size: 12px; white-space: nowrap; color: var(--ink-dim); transition: opacity 1s; pointer-events: none; }
.hint.gone { opacity: 0; }
#verse { position: absolute; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px));
  top: calc(max(14px, env(safe-area-inset-top)) + 62px); text-align: center; padding: 16px 18px 14px; border-radius: 18px;
  background: rgba(12, 9, 20, .42); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgba(0,0,0,.6); opacity: 0; transition: opacity 1.4s; pointer-events: none; }
#verse.show { opacity: 1; }
#verse .t { font-size: 18px; line-height: 1.75; }
#verse .r { display: inline-block; font-size: 14px; font-weight: 700; color: #2a1f10; background: #f0d49a; margin-top: 10px;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .04em; text-shadow: none; }
#standBtn { position: absolute; right: 16px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 132px); opacity: 0; pointer-events: none; transition: opacity .6s; }
#standBtn.show { opacity: 1; pointer-events: auto; }
.panel { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto;
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 22px; padding: 14px 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row + .row { margin-top: 12px; }
.round { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
#trackBtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; padding: 6px 0; }
#trackName { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { font-size: 11px; color: var(--ink-dim); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 84px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); flex: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 0; }
/* 동작 버튼: 앉으면 묵상·기도, 멈춰 서면 인사·축복 */
.act { flex: 1; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.12); color: var(--ink); font-size: 15px; transition: background .25s, color .25s, opacity .25s; }
.act.on { background: rgba(233, 201, 138, .92); color: #2a1f10; font-weight: 500; }
.act:disabled { opacity: .35; }
.toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 30px; letter-spacing: .3em;
  opacity: 0; transition: opacity 1.5s; pointer-events: none; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.toast.show { opacity: 1; }
/* 화면 어디서나 뜨는 짧은 안내 (가득 참·계정 삭제 등) */
.notice { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 20;
  max-width: min(88vw, 420px); padding: 12px 18px; border-radius: 14px; background: rgba(20, 16, 32, .92); border: 1px solid var(--glass-line);
  color: var(--ink); font-size: 14px; line-height: 1.5; text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.notice.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 시트 ---------- */
#sheet { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
#sheet.open { opacity: 1; pointer-events: auto; }
.sheet-card { width: 100%; max-width: 520px; background: #1b1626; border-radius: 22px 22px 0 0; padding: 20px 16px max(16px, env(safe-area-inset-bottom));
  transform: translateY(30px); transition: transform .3s; border-top: 1px solid var(--glass-line); }
#sheet.open .sheet-card { transform: none; }
.sheet-title { font-size: 17px; text-align: center; margin-bottom: 14px; }
.sheet-list { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.sheet-list.grid { grid-template-columns: repeat(3, 1fr); }
.opt { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: left; border: 1px solid transparent; }
.sheet-list.grid.two { grid-template-columns: repeat(2, 1fr); }
.sheet-list.grid .opt { text-align: center; padding: 16px 6px; font-size: 16px; }
.opt.sel { border-color: var(--gold); background: rgba(233,201,138,.12); }
.opt .s { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.sheet-cancel { width: 100%; margin-top: 12px; padding: 13px; border-radius: 14px; color: var(--ink-dim); }
/* 나눔명조에는 한자 일부만 있어 중국어·일본어는 기기 명조체로 통째로 그린다 */
:lang(zh) .serif, :lang(ja) .serif { font-family: "Noto Serif CJK SC", "Noto Serif CJK JP", serif; }