/* 책 회사의 고딕·크기 기준과 고정 메뉴·독립 자막 영역을 제공한다. */
/* 안내 언어는 시작과 설정에서 같은 선택을 유지하며 긴 영어 단추도 줄바꿈한다. */
.guide-language{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:15px;max-width:100%;margin:8px 0}
.guide-language select{min-height:44px;font:inherit;max-width:100%;padding:6px 10px}
@media(max-width:640px){html[lang]:not([lang=ko]) #visitor-player{grid-template-columns:minmax(96px,1.3fr) minmax(60px,1fr) minmax(48px,.8fr) 54px}}
html[lang]:not([lang=ko]) button{white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.25}
html[lang]:not([lang=ko]) #place{overflow-wrap:normal;word-break:normal;white-space:normal;text-overflow:clip;overflow:visible}
html[lang]:not([lang=ko]) .view-options strong{overflow-wrap:normal;word-break:normal}
html[lang]:not([lang=ko]) #time-card,html[lang]:not([lang=ko]) #time-heading,html[lang]:not([lang=ko]) #time-compact,html[lang]:not([lang=ko]) #structure-explanation,html[lang]:not([lang=ko]) #made-dialog{overflow-wrap:normal;word-break:normal;}
@media(max-width:640px){html[lang]:not([lang=ko]) #viewer header{grid-template-columns:minmax(0,1fr) auto auto}html[lang]:not([lang=ko]) #sound-all{max-width:86px}html[lang]:not([lang=ko]) #visitor-player button{min-width:0;font-size:15px;padding:3px 4px;line-height:1.2}html[lang]:not([lang=ko]) #visitor-toolbar button{min-width:0;font-size:15px}html[lang]:not([lang=ko]) #welcome h1{font-size:clamp(28px,8vw,48px)}}
/* 홈과 도착 페이지 양쪽이 같은 출처의 페이지 전환에 참여한다. */
@view-transition {navigation:auto;}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none;}}
:root {
  color-scheme: dark;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 17px;
  color: #f7f5f1;
  background: #191919;
  --panel: rgba(25, 25, 25, .92);
  --line: #55524b;
  --meta: 13px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
#narration-controls { position: relative; }
.narration-panel { position: static; margin-top: 8px; width: min(420px, calc(100vw - 24px)); max-height: 36dvh; overflow-y: auto; background: #191919; border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.narration-panel p { font-size: 14px; line-height: 1.5; }
.narration-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#narration-caption { max-width: min(560px, calc(100vw - 24px)); max-height: 22dvh; overflow-y: auto; padding: 10px 14px; background: #191919; color: #fff; border-radius: 6px; font-size: 17px; line-height: 1.6; }
button:focus-visible, summary:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #ffde93; outline-offset: 2px; }
body { margin: 0; }
[hidden] { display: none !important; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--panel);
  min-height: 44px;
}
button[aria-pressed="true"] {
  background: #075f5a;
  border-color: #35b9ab;
  color: #fff;
}
button:disabled { opacity: .45; cursor: wait; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #35b9ab; outline-offset: 3px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: " ＋"; }
details[open] > summary::after { content: " −"; }
.cover { min-height: 100dvh; padding: 9vh 9vw; background: #191919; }
.eyebrow { font-size: var(--meta); font-weight: 700; line-height: 1.5; color: #cfccc5; margin: 0; }
h1 { font-size: 44px; font-weight: 900; line-height: 1.2; letter-spacing: -.025em; margin: 32px 0; }
p { line-height: 1.65; }
.cover > p:not(.eyebrow) { font-size: 20px; color: #cfccc5; }
.primary { display: block; background: #0a7b74; color: #fff; margin: 28px 0; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.entry-actions .primary { margin: 0; }
.route-intro { max-width: 650px; }
#information { position: absolute; right: 24px; top: 142px; z-index: 2; max-width: calc(100% - 48px); }
.info-content { width: min(370px, calc(100vw - 24px)); max-height: 48dvh; overflow: auto; background: var(--panel); padding: 14px; border-radius: 6px; }
.info-content p, .info-content a { font-size: 14px; margin: 8px 0; }
.info-content h3 { margin: 16px 0 8px; }
select { width: 100%; min-height: 44px; font: inherit; margin-top: 8px; }
#palace-map { width: 100%; display: block; }
#tour-player, #structure-note { background: var(--panel); border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; }
#tour-player p { margin: 0; font-size: 14px; }
#tour-stage { font-weight: 700; }
.progress-line { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 5px 0; }
progress { flex: 1; min-width: 0; height: 6px; accent-color: #40c8b2; }
.player-actions { display: flex; gap: 6px; margin-top: 8px; }
.player-actions button { flex: 1; padding: 8px; white-space: nowrap; }
#structure-note { max-width: 420px; font-size: 13px; }
#structure-menu { position: relative; margin-bottom: 6px; }
#structure-menu > summary { font-size: 14px; text-align: center; }
#music-volume { display: block; width: 100%; min-height: 44px; }
button { transition: transform 150ms var(--ease-out), opacity 200ms var(--ease-out); }
button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
 button:hover, summary:hover { background: #075f5a; border-color: #35b9ab; color: #fff; }
}
@media (prefers-reduced-motion: reduce) { button { transition: opacity 150ms var(--ease-out); } button:active { transform: none; } }
small { display: block; font-size: 15px; line-height: 1.65; color: #cfccc5; }
a { display: inline-block; color: #35b9ab; margin-top: 20px; font-size: 15px; line-height: 1.65; }
#viewer { position: fixed; inset: 0; background: #a7b9b3; }
#stage { position: absolute; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
header { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
header button { pointer-events: auto; flex-shrink: 0; }
header > div { background: var(--panel); padding: 10px 14px; border-radius: 6px; }
h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 5px 0; }
#notice { font-size: var(--meta); color: #cfccc5; margin: 6px 0 0; line-height: 1.5; }
nav { position: absolute; left: 24px; top: 142px; z-index: 2; }
.view-options { display: flex; flex-direction: column; gap: 6px; max-height: min(50dvh, 350px); overflow-y: auto; padding-top: 6px; }
.view-options button { text-align: left; }
footer { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); width: max-content; z-index: 3; }
.tools { display: flex; justify-content: center; gap: 6px; }
#more { position: relative; }
.extra-tools { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 24px)); max-height: 45dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 12px; }
.extra-tools button { display: block; width: 100%; margin-bottom: 8px; text-align: left; }
.extra-tools p { margin: 10px 0 0; font-size: 15px; font-weight: 400; }
#diagnostics { position: absolute; top: 140px; right: 24px; max-width: calc(100% - 48px); background: var(--panel); padding: 10px; font-size: var(--meta); font-variant-numeric: tabular-nums; z-index: 4; pointer-events: none; }
#loading { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); background: var(--panel); padding: 16px 22px; border-radius: 8px; max-width: 90%; font-size: 17px; line-height: 1.65; text-align: center; }
@media (max-width:640px), (max-height:500px), (pointer:coarse) {
  :root { --meta: 14px; }
  .cover { padding: 8vh 7vw; }
  h1 { font-size: 28px; }
  .cover > p:not(.eyebrow) { font-size: 19px; }
  header { left: 12px; right: 12px; top: 12px; gap: 8px; }
  header > div { padding: 8px 10px; max-width: calc(100% - 76px); }
  header button { padding: 10px 12px; }
  h2 { font-size: 19px; }
  nav { top: 160px; left: 12px; }
  #information { top: 160px; right: 12px; max-width: calc(100% - 24px); }
  #information > details > summary { font-size: 13px; padding: 11px 8px; }
  .info-content { max-height: 34dvh; }
  footer { width: min(420px, calc(100% - 24px)); }
  #structure-note { font-size: 12px; }
  .view-options { max-width: calc(100vw - 24px); max-height: 40dvh; }
  .tools { gap: 4px; }
  .tools > button, .tools summary { padding: 10px 12px; }
  .extra-tools { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 24px)); }
  #diagnostics { top: 220px; right: 12px; max-width: calc(100% - 24px); }
}

/* 실제 제작 렌더와 작은 관람 도구. 상세는 하나씩 열고 자막은 그 위에 둔다. */
.cover { position: relative; min-height: 100dvh; padding: 6vh 6vw; display: flow-root; }
.palace-preview { float: right; width: 58%; margin: 0 0 24px 4%; }
.palace-preview img { width: 100%; height: auto; display: block; border-radius: 8px; }
.palace-preview figcaption { font-size: 15px; line-height: 1.65; color: #cfccc5; padding-top: 8px; }
.cover h1, h2, h3, summary, button { word-break: keep-all; overflow-wrap: break-word; }
#viewer { background: #172333 url('assets/palace-gh-poster.jpg') center / cover no-repeat; }
#stage { opacity: 1; transition: opacity 800ms ease; }
#viewer:has(#loading:not([hidden])) #stage { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #stage { transition: none; } }
footer { left: 24px; transform: none; width: 420px; max-width: calc(100% - 48px); max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); overflow-y: auto; overscroll-behavior: contain; }
.control-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
footer nav, footer #information, footer .tools { display: contents; }
.control-row > details, footer nav > details, footer #information > details { min-width: 0; }
.control-row details[open] { flex: 1 0 100%; order: -1; }
footer nav > details[open], footer #information > details[open], footer .tools > details[open] { flex: 1 0 100%; min-width: 0; }
.control-row details[open] > summary { background: #191919; }
.control-row #structure-menu { margin: 0; }
.control-row #structure-menu > summary, footer #information > details > summary { font-size: 15px; padding: 10px 12px; }
.control-row .extra-tools, .control-row .info-content, .control-row .narration-panel, .control-row .view-options { position: static; width: 100%; max-height: 28dvh; overflow-y: auto; margin: 6px 0 0; background: #191919; }
.control-row .info-content p { font-size: 17px; }
.control-row .info-content a, .narration-panel p, #tour-player p, #structure-note, .progress-line { font-size: 15px; }
#narration-caption { position: sticky; top: 0; z-index: 3; width: 100%; max-height: 22dvh; margin: 0 0 8px; font-size: 17px; }
#tour-player, #structure-note { flex-basis: 100%; order: -2; }
#tour-player #tour-next { font-size: 15px; }
@media (max-width:640px), (max-height:500px), (pointer:coarse) {
 :root { --meta: 15px; }
 .cover { padding: 24px 20px; }
 .palace-preview { float: none; width: 100%; margin: 0 0 24px; }
 .cover > p:not(.eyebrow) { font-size: 17px; }
 footer { left: 12px; width: calc(100% - 24px); max-width: none; bottom: max(12px, env(safe-area-inset-bottom)); }
 .control-row { gap: 4px; }
 .control-row button, .control-row summary { padding: 10px; font-size: 15px; min-height: 44px; }
 header > div { background: rgba(25,25,25,.82); }
 #notice { font-size: 15px; }
}

/* 메뉴 위치는 고정하고 상세만 위쪽으로 펼친다. 자막은 별도 행이다. */
footer { display:flex; flex-direction:column; gap:8px; width:520px; max-height:calc(100dvh - 150px); overflow:visible; bottom:max(12px,env(safe-area-inset-bottom)); }
footer > .control-row { display:none; }
#panel-host { order:1; min-height:0; overflow:auto; max-height:32dvh; border:1px solid var(--line); border-radius:8px; background:#191919; padding:12px; overscroll-behavior:contain; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:-12px; background:#191919; z-index:1; padding:6px 0; }
#panel-host > details { margin:0; position:static; }
#panel-host > details > summary { display:none; }
#panel-host .view-options, #panel-host .info-content, #panel-host .narration-panel, #panel-host .extra-tools { position:static; width:100%; max-height:none; overflow:visible; padding:0; margin:0; border:0; }
#panel-host p { font-size:17px; } #panel-host a, #panel-host #narration-time {font-size:15px;}
#visitor-toolbar { order:4; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; flex-shrink:0; }
#visitor-toolbar button { padding:8px 6px; min-height:48px; font-size:15px; }
#visitor-toolbar button[aria-expanded=true] {background:#075f5a;}
#visitor-player {order:3; display:flex; gap:4px; flex-shrink:0;}
#visitor-player button {flex:1; padding:8px 6px; font-size:15px; min-height:44px;}
#tour-player {order:2; padding:6px 10px; margin:0; flex:0 0 auto;}
#tour-player .player-actions {display:none;}
#tour-next {display:none;}
#narration-caption {order:0; position:static; flex:0 0 auto; max-width:none; width:100%; max-height:18dvh; overflow:auto; margin:0; font-size:17px; line-height:1.5;}
#structure-note {margin-top:8px;}
#building-hover {position:fixed; z-index:5; pointer-events:none; background:#191919; padding:8px 12px; border-radius:6px; font-size:17px;}
#auto-status {position:absolute; top:115px; left:24px; right:24px; width:fit-content; max-width:calc(100% - 48px); background:#191919; padding:8px 12px; font-size:15px;}
@media (max-width:640px), (max-height:500px), (pointer:coarse){
 footer{left:8px; width:calc(100% - 16px); max-width:none; gap:6px; max-height:calc(100dvh - 155px);}
 #panel-host{max-height:28dvh;padding:10px;flex:0 1 auto;}
 #visitor-toolbar button{padding:6px 3px;word-break:keep-all;}
 #visitor-player button{padding:6px 3px;}
 header {top:8px;left:8px;right:8px;}
 header h2{font-size:17px;}
 #notice{display:none;}
 #auto-status{top:100px;left:8px;max-width:calc(100% - 16px);margin:0;}
 #tour-player #tour-stage{font-size:15px;}
}
/* 첫 사용은 세 행동과 고정 탐색 두 줄. 장소는 드래그 없이 선택한다. */
#caption-wrap {order:0;min-height:0;}
#caption-toggle,#story-read {display:none;}
#visitor-toolbar{grid-template-columns:repeat(3,1fr);}
#visitor-player #tour{flex:1.8;}
#panel-host .view-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#panel-host [data-place]{min-height:76px;text-align:left;display:flex;flex-direction:column;gap:4px;}
#panel-host [data-place] span{font-size:15px;line-height:1.4;font-weight:400;}
#panel-host > #narration-caption{max-height:15dvh;border:1px solid #777;margin:8px 0;}
#panel-host:has(#narration-caption:not([hidden])){max-height:42dvh;}
#more #narration-controls{margin-top:12px;}
#more #narration-controls > summary{display:block;}
#story-structure{width:100%;margin-bottom:8px;}
@media (max-width:640px), (max-height:500px), (pointer:coarse){#panel-host .view-options{grid-template-columns:1fr;}#panel-host{max-height:34dvh;}#panel-host:has(#narration-caption:not([hidden])){max-height:42dvh;}#visitor-player button{white-space:normal;} .entry-actions #open-silent{order:2;} .entry-actions #open-music,.entry-actions #open{width:100%;min-height:56px;}}
/* 휴대폰은 음성을 유지하며 긴 문단은 명시적으로 읽을 때만 연다. */
@media (max-width:640px), (max-height:500px), (pointer:coarse){
 #caption-toggle,#story-read {display:block;min-height:44px;font-size:15px;word-break:keep-all;}
 #caption-toggle {width:100%;}
 #caption-wrap:not([data-expanded="true"]) #narration-caption {display:none;}
 #caption-wrap[data-expanded="true"] #narration-caption {max-height:20dvh;overflow:auto;}
 #panel-host[data-compact="true"]:has(#place-info[open]) {max-height:28dvh;}
 #panel-host[data-compact="true"] #place-info .info-content > label,
 #panel-host[data-compact="true"] #place-select,
 #panel-host[data-compact="true"] #fact-name,
 #panel-host[data-compact="true"] #fact-text,
 #panel-host[data-compact="true"] #fact-look,
 #panel-host[data-compact="true"] #fact-source,
 #panel-host[data-compact="true"] #structure-explanation,
 #panel-host[data-compact="true"] #place-info .info-content > details,
 #panel-host[data-compact="true"] #caption-wrap,
 #panel-host[data-compact="true"] #story-replay,
 #panel-host[data-compact="true"] #fact-card .narration-actions button:disabled {display:none;}
 #panel-host[data-compact="true"] #story-status {font-size:15px;margin:4px 0;}
 #panel-host[data-compact="true"] #fact-card {margin:0;}
 #panel-host .panel-heading {flex-wrap:wrap;}
 #panel-host .panel-heading strong {flex:1 1 100%;font-size:17px;word-break:keep-all;}
 #story-read {flex:1;}
 #panel-host[data-compact="true"] .living-disclaimer {display:none;}
}
#procession-controls {margin-top:6px;}
#procession-controls p {font-size:15px;line-height:1.45;margin:5px 0;}
#procession-controls button {min-height:44px;}
#structure-labels {position:fixed;inset:0;z-index:4;pointer-events:none;}
#stage::after {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(8,15,23,.16));}
#made-dialog {max-width:min(520px,90vw);max-height:80dvh;overflow:auto;background:#191919;color:inherit;border:1px solid #777;border-radius:12px;padding:20px;}
#made-dialog::backdrop {background:#0009;}
#intro-skip {position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:33;max-width:90vw;min-height:44px;}
#intro-video-layer {position:fixed;inset:0;z-index:32;background:#07090c;opacity:1;transition:opacity .8s;}
#intro-video-layer[hidden] {display:none;}
#intro-video {width:100%;height:100%;object-fit:cover;}
#intro-sound {position:absolute;right:16px;top:16px;min-height:44px;}
#intro-sound[hidden] {display:none;}
#intro-video-layer small {position:absolute;left:16px;bottom:76px;color:#fff;background:#111b;padding:5px 8px;}
@media(max-width:640px){#intro-video-layer small {top:16px;bottom:auto;}}
#intro-video-status {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;}
#intro-video-layer.intro-video-fade {opacity:0;pointer-events:none;}
#viewer.intro-active header,#viewer.intro-active footer,#viewer.intro-active #life-caption {visibility:hidden;}
#viewer.intro-pose > :not(#stage) {visibility:hidden;}
#postcard-dialog {max-width:min(600px,92vw);max-height:85dvh;overflow:auto;background:#191919;color:inherit;border:1px solid #777;border-radius:12px;padding:16px;}
#postcard-dialog::backdrop {background:#0009;}
#postcard-preview {display:block;max-width:100%;max-height:55dvh;margin:8px auto;object-fit:contain;}
#postcard-preview:not([src]) {display:none;}
#load-progress {display:block;width:100%;margin:12px 0;}
#gesture-hint {position:absolute;top:25%;left:8%;right:8%;z-index:6;padding:14px;background:#191919e8;border:1px solid #c7b48a;border-radius:8px;text-align:center;font-size:17px;pointer-events:none;}
#central-status {position:absolute;top:150px;left:16px;max-width:70%;font-size:15px;background:#191919c9;}
#central-status:empty {display:none;}
#more-halls-status {position:absolute;top:235px;left:16px;max-width:70%;font-size:15px;background:#191919e8;z-index:5;}
#more-halls-status:empty {display:none;}
#more-halls-retry {position:absolute;top:280px;left:16px;z-index:5;}
#central-retry,#auto-retry {position:absolute;top:185px;left:16px;z-index:5;}
#finish-card {order:0;background:#191919;padding:10px;max-height:26dvh;overflow:auto;border-radius:8px;}
#finish-card button {margin:3px;}
/* 낮은 세로 화면(320×568 등)에서는 끝 카드 둘째 줄 단추가 반만 보였다 → 카드 높이를 조금 늘리고 물음 글 위아래 여백을 줄인다(lifeP48). */
@media (max-height:640px) and (orientation:portrait){#finish-card{max-height:34dvh;}#finish-card p{margin:0 3px 6px;}}
#visitor-toolbar {grid-template-columns:repeat(4,1fr);}
@media (max-width:640px), (max-height:500px), (pointer:coarse){header {gap:4px;}header>div {min-width:0;flex:1;}header button {padding:6px;font-size:13px;}#caption-wrap[data-mode="auto"] #narration-caption {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:none;padding:6px 10px;}#caption-wrap[data-mode="auto"][data-full="true"] #narration-caption {display:block;max-height:20dvh;overflow:auto;}#caption-wrap[data-mode="auto"] #caption-toggle {min-height:44px;} }
.structure-label {position:fixed;pointer-events:auto;width:max-content;max-width:210px;min-height:44px;padding:5px 8px;font-size:15px;line-height:1.3;background:rgba(25,25,25,.9);border-color:#c7b48a;color:#ffedc5;word-break:keep-all;}
@media (max-width:640px), (max-height:500px), (pointer:coarse){.structure-label {font-size:13px;max-width:136px;padding:4px 6px;}}
/* 작은 화면의 행렬 중에는 진행 안내와 재생 행동을 설명보다 먼저 보인다. */
@media (max-width:640px), (max-height:500px), (pointer:coarse){
 #panel-host[data-compact="true"]:has(#procession-controls:not([hidden]) #procession-status:not(:empty)) .panel-heading {padding-block:2px;}
 #panel-host:has(#procession-controls:not([hidden]) #procession-status:not(:empty)) .panel-heading strong {font-size:15px;}
 #panel-host[data-compact="true"]:has(#procession-controls:not([hidden]) #procession-status:not(:empty)) #story-structure,
 #panel-host[data-compact="true"]:has(#procession-controls:not([hidden]) #procession-status:not(:empty)) #story-status {display:none;}
 #panel-host[data-compact="true"] #procession-controls {display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px;}
 #panel-host[data-compact="true"] #procession-status {grid-column:1 / -1;grid-row:1;font-size:15px;line-height:1.35;margin:0;}
 #panel-host[data-compact="true"] #procession-controls button {padding:8px 4px;}
}
/* 생활 장면 안내는 자막과 같은 세로 흐름, 지명은 조작판 위의 안전 영역에 둔다. */
#procession-controls,#finish-procession {display:none!important;}
#life-caption {font-size:15px;line-height:1.45;color:#f5e9cc;background:#222a24;padding:6px 10px;border-radius:6px;margin:4px 0;max-height:3.2em;overflow:auto;}
#life-status:empty {display:none;}
.narration-landmark {position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-50%);font-size:15px;line-height:1.4;padding:4px 8px;border-radius:14px;background:#252c24e8;color:#ffe1a0;border:1px solid #c7ad70;white-space:nowrap;}
.narration-landmark.offscreen {background:#30372c;}

/* 자료 크레딧은 좁은 화면에서도 접지 않고 독립된 줄로 읽힌다. */
header {display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:6px 10px}
header > div {max-width:none;min-width:0}
header #notice {display:block;grid-column:1/-1;margin:0;padding:6px 10px;background:rgba(15,24,29,.85);border-radius:8px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
header a {pointer-events:auto;color:inherit;text-decoration:underline}
@media (max-width:640px), (max-height:500px), (pointer:coarse){header {gap:4px}header > div{max-width:none}header #notice{display:block;font-size:15px}header button{min-width:44px}}

#mobile-story-strip,#mobile-more,#mobile-reading {display:none;}
@media (max-width:640px), (max-height:500px), (pointer:coarse){
 header{top:4px;padding:0;gap:0 4px;align-items:center;background:none;}
 header .eyebrow{display:none;}header h2{font-size:17px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;}
 header button{height:44px;min-height:44px;padding:4px;font-size:15px;}
 header #notice{font-size:12px;line-height:15px;padding:0;background:none;border-radius:0;text-shadow:0 1px 3px #000;opacity:.9;}
 #viewer footer{left:6px;right:6px;bottom:4px;width:auto;max-width:none;gap:2px;padding:0;}
 #mobile-reading{display:block;max-height:40dvh;overflow:auto;overscroll-behavior:contain;order:0;}
 #mobile-reading #panel-host{max-height:none;overflow:visible;}
 #mobile-reading #caption-toggle{display:none;}
 #mobile-reading #narration-caption{display:block;max-height:none;overflow:visible;-webkit-line-clamp:unset;font-size:17px;}
 #mobile-reading #life-caption{max-height:none;overflow:visible;}
 footer[data-mobile-story="collapsed"] #mobile-reading #caption-wrap,
 footer[data-mobile-story="collapsed"] #mobile-reading #life-caption,
 footer[data-mobile-story="collapsed"] #mobile-reading #panel-host[data-mobile-story="true"]{display:none;}
 #mobile-story-strip{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;height:48px;padding:2px 6px;text-align:left;order:2;}
 #mobile-story-strip span{font-size:15px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1;}
 #mobile-story-strip strong{font-size:15px;font-weight:400;white-space:nowrap;}
 #visitor-player{display:grid;grid-template-columns:minmax(90px,1.5fr) 1fr 1fr 44px;gap:3px;order:3;}
 #visitor-player button{min-height:44px;height:44px;padding:3px;font-size:15px;}
 #mobile-more{display:block;}#visitor-toolbar{display:none;order:1;}
 footer[data-mobile-menu="true"] #visitor-toolbar{display:grid;grid-template-columns:1fr 1fr;}
 #visitor-toolbar button{min-height:44px;}
 #tour-player{padding:0;margin:0;background:none;border:0;order:1;}
 #tour-player > :not(.progress-line),#tour-time{display:none;}
 #tour-player .progress-line{height:4px;margin:0;padding:0;}
 #tour-progress{display:block;width:100%;height:4px;margin:0;}
}
/* 근거는 펼친 설명에서만 읽고, 글 목록은 관람 패널과 분리한다. */
#building-hover {white-space:pre-line;max-width:min(460px,calc(100vw - 24px));}
#fact-evidence {font-size:15px;line-height:1.55;}
#panel-host[data-compact="true"] #fact-evidence {display:none;}
/* 관람 고지는 항상 읽히고, 펼친 글만 제한된 높이 안에서 스크롤한다. */
body{word-break:keep-all;overflow-wrap:anywhere;}
.map-credit{white-space:nowrap;display:inline-block;}
#visit-transition{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s;pointer-events:none;z-index:3;}
@media(prefers-reduced-motion:reduce){#visit-transition{display:none;}}
#living-motion{background:#24302c;color:#f3eee1;}
header #notice{color:#fff;background:rgba(15,24,29,.94);opacity:1;text-shadow:none;font-size:13px;line-height:1.35;padding:4px 8px;}
header #notice a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;}
#welcome a{display:inline-flex;align-items:center;min-height:44px;}
#auto-status{top:calc(var(--palace-header-bottom,156px) + 8px);}
#story-read{display:block;}
#panel-host{scroll-padding-top:64px;}
#panel-host .panel-heading{position:sticky;top:0;background:#18251ff5;z-index:2;}
/* 목록을 밀면 제목 줄 위 안쪽 여백으로 아래 글이 비쳐 보였다 → 그 여백을 목록 바탕색으로 덮고, 제목 줄 바탕도 비치지 않게 한다(같은 색 · lifeP48). */
#panel-host .panel-heading{background:#18251f;box-shadow:0 -12px 0 #191919;}
#panel-host .view-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
#panel-host .view-options button{min-height:44px;}
#panel-host .view-options span{display:none;}
@media(min-width:641px){header .eyebrow{display:none;}header h2{margin:0;font-size:22px;}header #notice{padding-block:0;}#panel-host:has(#locations[open]){max-height:calc(100dvh - 240px);}#panel-host .view-options button{min-height:52px;}}
@media (max-width:640px), (max-height:500px), (pointer:coarse){#mobile-reading{max-height:40dvh;}#mobile-reading #panel-host{max-height:40dvh;overflow:auto;}#mobile-story-strip{min-height:44px;}#panel-host .panel-heading strong{white-space:normal;}#panel-host #fact-text{max-height:none;}header #notice{font-size:13px;padding:2px 6px;background:rgba(15,24,29,.94);}}
#evidence-legend {position:absolute;right:12px;top:120px;width:min(330px,calc(100vw - 24px));white-space:pre-line;padding:12px;background:#1c2926;color:#fff;font-size:15px;line-height:1.5;pointer-events:none;border-left:4px solid #718494;z-index:8;}
#reading-dialog {box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-height:85dvh;overflow:auto;overflow-wrap:anywhere;background:#17241f;color:#f2eee4;border:1px solid #83968d;padding:20px;font-size:17px;line-height:1.7;}
#reading-dialog::backdrop {background:#0009;}
#reading-dialog article {border-top:1px solid #83968d;margin-top:20px;padding-top:12px;}
#reading-dialog h2,#reading-dialog h3 {word-break:keep-all;}
#reading-dialog button {min-height:44px;max-width:100%;}
@media (max-width:640px), (max-height:500px), (pointer:coarse){#evidence-legend {top:104px;font-size:15px;padding:8px;}#reading-dialog {padding:14px;}}

@media (max-width:640px), (max-height:500px), (pointer:coarse){#viewer{background-image:url('assets/palace-gh-poster-mobile.jpg');}}
/* 짧은 가로 화면은 제목·고지·조작을 얇게, 선택 목록은 옆에서 읽는다. */
@media (max-height:500px) and (orientation:landscape){
 #viewer header{height:44px;min-height:44px;padding:0 6px;display:flex;gap:6px;align-items:center;flex-wrap:nowrap;}
 #viewer header .eyebrow{display:none;}#viewer header>div{flex:1;min-width:0;}#viewer header h2{font-size:15px;margin:0;max-height:40px;overflow:auto;}
 #viewer header #notice{position:static;order:1;width:34%;flex:none;margin:0;padding:0 4px;max-height:44px;overflow:auto;white-space:nowrap;font-size:13px;}
 #viewer header #sound-all,#viewer header #close{order:2;font-size:13px;min-height:44px;padding:0 6px;}
 #viewer footer{bottom:0;left:6px;right:6px;width:auto;max-width:none;padding:0;background:transparent;}
 #mobile-story-strip{display:none!important;}#visitor-player{height:44px;min-height:44px;display:flex;flex-wrap:nowrap;}
 #visitor-player button{font-size:13px;padding:0 7px;min-height:44px;}#tour-player{display:none!important;}
 #mobile-reading,#panel-host{position:fixed;left:auto;right:6px;top:48px;bottom:48px;width:min(360px,45vw);max-height:none;overflow:auto;}
 #mobile-reading:has(#panel-host[hidden]){display:none;}#panel-host .place-grid{grid-template-columns:1fr 1fr;max-height:none;}
 #visitor-toolbar{position:fixed;right:6px;bottom:48px;max-height:calc(100dvh - 100px);overflow:auto;}
 #caption-wrap{max-height:25dvh;overflow:auto;}#walk-stick{bottom:8px;}#walk-speed{bottom:8px;}
 #welcome.cover{padding:12px 48% 12px 16px;min-height:100dvh;box-sizing:border-box;display:block;}
 #welcome h1{font-size:28px;line-height:1.1;margin:8px 0;}#welcome>p:not(.eyebrow){font-size:13px;margin:4px 0;}#welcome .eyebrow{display:none;}
 #welcome .palace-preview{position:absolute;right:8px;top:12px;width:44%;margin:0;}#welcome .palace-preview img{max-height:calc(100dvh - 58px);object-fit:contain;}
 #welcome .entry-actions{display:flex;gap:4px;margin:6px 0;}#welcome .entry-actions button{font-size:13px;min-height:44px;padding:4px;}
 #welcome>small{font-size:12px;}#welcome .route-intro{display:none;}#welcome #open-silent{min-height:44px;font-size:13px;}
}
#postcard-dialog{max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;}#postcard-preview{max-height:52dvh;object-fit:contain;}
#era-tour-notice{position:absolute;top:var(--palace-header-bottom,120px);left:12px;z-index:20;background:#17251ff5;color:white;padding:8px;font-size:15px;}
#interior-retry{position:absolute;z-index:25;left:12px;top:calc(var(--palace-header-bottom,120px) + 44px);min-height:44px;}
#narration-start,#narration-free-resume,#narration-progress,#narration-time{display:none!important;}
#narration-controls>.narration-actions+p{display:none;}
/* 고지의 글줄과 링크 누름 영역을 분리해 궁을 보는 높이를 지킨다. */
header #notice{line-height:18px;padding:2px 8px;margin:0;white-space:normal;overflow:visible;}
header #notice a{display:inline;position:relative;min-height:0;font-size:13px;line-height:18px;}
header #notice a::after{content:"";position:absolute;inset:-13px 0;min-height:44px;}
header #notice .map-credit{display:inline-block;font-size:13px;line-height:18px;}
#living-motion{background:var(--panel);color:inherit;}
#viewer:has(#era-tour-notice:not([hidden])) #auto-status{visibility:hidden;}
#panel-host:has(#place-info[open]){padding-bottom:28px;background:linear-gradient(transparent,#191919) bottom/100% 18px no-repeat,var(--panel);}
#asset-errors{position:absolute;top:calc(var(--palace-header-bottom,108px) + 8px);left:12px;z-index:10;max-width:calc(100% - 24px);background:var(--panel);border-radius:6px;}
#asset-errors>:empty{display:none;}#asset-errors>*{position:static!important;transform:none!important;margin:4px 8px;font-size:15px;}
#finish-landmark{position:absolute;z-index:10;min-height:44px;transform:translate(-50%,-100%);font-size:15px;}
@media(min-width:641px) and (min-height:501px) and (pointer:fine){
 header{top:8px;gap:4px;}header>div{padding:4px 10px;}header #notice{padding-block:0;}
 #viewer[data-walk=true] #visitor-toolbar{display:grid!important;grid-template-columns:repeat(3,1fr);}
 #viewer[data-walk=true] #visitor-toolbar>button{display:block!important;visibility:hidden;}
 #viewer[data-walk=true] #visitor-toolbar>#walk-toggle,#viewer[data-walk=true] #visitor-toolbar>#time-open,#viewer[data-walk=true] #visitor-toolbar>button[aria-controls=locations]{visibility:visible;}
 #viewer[data-walk=true] footer{width: min(540px,calc(100vw - 32px));max-width:none;}
}
@media(max-height:500px) and (orientation:landscape){
 #viewer header{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 4px;}
 #viewer header>div{padding:0 4px;}#viewer header #notice{order:3;grid-column:1/-1;width:auto;max-height:none;overflow:visible;white-space:normal;line-height:18px;padding:2px 4px;}
 #viewer #mobile-reading,#viewer #panel-host{top:calc(var(--palace-header-bottom,70px) + 4px);bottom:46px;max-height:none;}
 #viewer #mobile-reading:has(#locations[open]),#viewer #panel-host:has(#locations[open]){top:0;bottom:0;z-index:25;}
}
#asset-errors:has(#more-halls-status:not(:empty):not([hidden])) #life-status,#asset-errors:has(#native-failure:not(:empty):not([hidden])) #life-status{display:none;}
/* 고지의 실제 누름 영역은 시대 띠와 목록보다 앞에 두되 높이는 늘리지 않는다. */
#viewer header{z-index:30;pointer-events:none;}
#viewer header button,#viewer header #notice a{pointer-events:auto;}
#viewer header #notice a{z-index:31;}
#panel-host:has(#place-info[open]){mask-image:linear-gradient(#000 0 calc(100% - 18px),transparent);}
#asset-errors>.asset-error-source{display:none!important;}
@media(min-width:641px) and (min-height:501px) and (pointer:fine){
 #viewer[data-walk=true] footer{left:24px;right:auto;bottom:12px;width:min(520px,calc(100vw - 48px));}
 #viewer[data-walk=true] #visitor-toolbar>button{display:none!important;}
 #viewer[data-walk=true] #visitor-toolbar>#walk-toggle,#viewer[data-walk=true] #visitor-toolbar>#time-open,#viewer[data-walk=true] #visitor-toolbar>button[aria-controls=locations]{display:block!important;visibility:visible;}
 #viewer[data-walk=true] #visitor-toolbar>#walk-toggle{order:-1;}
}
@media(max-height:500px) and (orientation:landscape){
 #viewer #mobile-reading:has(#locations[open]){top:calc(var(--palace-header-bottom,70px) + 14px);bottom:0;height:auto;max-height:none;overflow:visible;}
 #viewer #mobile-reading #panel-host:has(#locations[open]){position:fixed;top:calc(var(--palace-header-bottom,70px) + 14px);bottom:0;height:auto;max-height:none;box-sizing:border-box;}
 #viewer[data-walk=true] #walk-speed{left:132px;right:auto;bottom:8px;min-height:44px;}
}

/* 장소 목록은 실제 아래 조작띠 위에서 끝나며 마지막 칸까지 독립 스크롤한다. */
@media(max-width:640px),(max-height:500px),(pointer:coarse){
 #viewer #mobile-reading:has(#locations[open]),#viewer #mobile-reading #panel-host:has(#locations[open]),#viewer #panel-host:has(#locations[open]){bottom:var(--locations-bottom,148px)!important;max-height:none;height:auto;box-sizing:border-box;}
 #viewer #panel-host:has(#locations[open]){overflow-y:auto;padding-bottom:16px;scroll-padding-bottom:16px;}
}

/* 두 언어는 항상 한 번에 고르며 좁은 머리 줄에서는 제목만 줄인다. */
#welcome{position:relative;padding-top:64px;}
.guide-segments{display:flex;flex-wrap:nowrap;gap:0;pointer-events:auto;}
.guide-segments button{min-width:44px;min-height:44px;height:44px;padding:0 8px;font-size:15px;white-space:nowrap!important;border-radius:0;}
.guide-segments button:first-child{border-radius:8px 0 0 8px;}
.guide-segments button:last-child{border-radius:0 8px 8px 0;}
.guide-segments button[aria-pressed=true]{background:#e5c78b;color:#17242c;border-color:#e5c78b;}
#entry-guide-language{position:absolute;right:12px;top:8px;z-index:2;}
#viewer header{grid-template-columns:minmax(0,1fr) auto auto auto;}
#viewer header>.guide-segments{padding:0;background:none;max-width:none;flex:none;}
@media(max-width:640px){
 html[lang] #viewer header{grid-template-columns:minmax(0,1fr) 44px auto 44px;gap:4px;align-items:center;}
 html[lang] #viewer header>div:first-child{padding:4px;}
 html[lang] #viewer #place{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:22px;font-size:15px;}
 html[lang] #viewer #sound-all,html[lang] #viewer #close{font-size:0;padding:0;min-width:44px;width:44px;height:44px;}
 #viewer #sound-all::after{content:'♫';font-size:23px;}
 #viewer #close::after{content:'×';font-size:26px;}
 #viewer .guide-segments button{padding:0 5px;font-size:15px;}
}
/* 작은 세로 화면에서도 글을 지우지 않고 두 시작 단추를 먼저 보여 준다. */
@media(max-width:640px) and (orientation:portrait){
 html[lang] #welcome{padding:64px 16px 24px;}
 #welcome .palace-preview{margin:0 0 10px;}
 #welcome .palace-preview img{height:clamp(100px,17dvh,144px);object-fit:cover;}
 #welcome .palace-preview figcaption{font-size:15px;line-height:1.3;padding-top:4px;}
 html[lang] #welcome h1{font-size:28px;line-height:1.1;margin:10px 0;}
 #welcome .eyebrow{margin:8px 0;font-size:15px;}
 #welcome>p:not(.eyebrow){font-size:17px;line-height:1.3;margin:8px 0;}
 #welcome>p.route-intro{font-size:15px;line-height:1.3;}
 #welcome .entry-actions{margin:12px 0;gap:8px;}
 #welcome .entry-actions button{min-height:52px;}
 html[lang]:not([lang=ko]) button,html[lang]:not([lang=ko]) .view-options strong{overflow-wrap:normal;word-break:normal;}
}

/* 언어 수가 늘어도 누르는 높이는 유지하고 좁은 화면의 이름은 별도 줄에 둔다. */
.guide-load-error{grid-column:1/-1;font:15px/1.35 system-ui,sans-serif;margin:4px 0;color:#fff;background:#503a23;padding:8px;}
#welcome .guide-load-error{position:absolute;top:52px;left:12px;right:12px;}
#welcome:has(.guide-load-error:not([hidden])){padding-top:156px;}
.guide-segments button{flex:1 0 44px;box-sizing:border-box;font-family:system-ui,sans-serif;}
/* 시작 언어는 글 너비를 유지해 English 끝 글자가 잘리지 않게 한다. */
#entry-guide-language button{flex:0 0 auto;width:auto;padding-inline:8px;}
#viewer-guide-language button{flex:0 0 auto;width:auto;}
/* 번역된 글 너비로 아래 단추를 배분하고 한국어 기존 배치는 유지한다. */
@media(max-width:640px){
 html[lang]:not([lang=ko]) #visitor-player{grid-template-columns:minmax(max-content,1fr) repeat(3,minmax(44px,max-content));}
 html[lang]:not([lang=ko]) #visitor-player button{white-space:nowrap;min-height:44px;}
 html[lang=ja] #mobile-story-strip span{text-wrap:balance;}
}
@media(max-width:640px){
 #viewer header:has(.guide-segments button:nth-child(4)){grid-template-columns:minmax(0,1fr) 44px 44px;}
 #viewer header:has(.guide-segments button:nth-child(4)) .guide-segments{grid-column:1/-1;grid-row:2;width:100%;}
 #viewer header:has(.guide-segments button:nth-child(4)) #close{grid-column:3;grid-row:1;}
 #viewer header:has(.guide-segments button:nth-child(4)) #sound-all{grid-column:2;grid-row:1;}
}