/* 2026-10-25 화면 틀 덮어쓰기 층 (마지막에 불러옴).
   그림이 화면 끝까지 깔리고, 홈·이전/소리·설정과 질문·리버·다음 버튼만 그 위에 떠 있다.
   위·아래 띠를 만들지 않는다. 기존 CSS 는 지우지 않고 #app 접두로 덮는다. */
:root{
 --hud-pad:14px;--hud-icon:52px;--hud-gap:8px;
 --hud-top:calc(var(--hud-icon) + var(--hud-pad)*2);--hud-bottom:112px;
 --hud-paper:#fff9ebf7;--hud-line:#a98a52;--hud-ink:#294f41;
 --hud-shadow:0 4px 0 #8c6b3659,0 10px 22px #10231b40;
 --fs-question:clamp(23px,1.95vw,32px);--fs-body:clamp(20px,1.3vw,23px);--fs-label:clamp(15px,1vw,18px);
 --radius-lg:20px;--radius-md:14px;
}
@media(min-width:1500px) and (min-height:850px){:root{--hud-icon:60px;--hud-bottom:128px}}
@media(max-width:1180px){:root{--hud-bottom:132px}}
@media(max-height:620px){:root{--hud-pad:8px;--hud-icon:48px;--hud-bottom:116px;--fs-question:21px;--fs-body:20px}}

/* ---------- 떠 있는 아이콘 4개 (지도·활동·마지막 화면 공통) ---------- */
#app.adventure,#app.atlas:not(.welcome),#app.final{position:relative}
#app.adventure .topbar,#app.atlas:not(.welcome) .topbar,#app.final .topbar{position:absolute;inset:0 0 auto;z-index:30;height:var(--hud-top);min-height:0;padding:var(--hud-pad);background:none;border:0;box-shadow:none;pointer-events:none}
#app:has(.preview-banner).adventure .topbar,#app:has(.preview-banner).atlas .topbar,#app:has(.preview-banner).final .topbar{top:52px}
#app .topbar .nav-group{pointer-events:auto;gap:var(--hud-gap)}
#app.adventure .topbar .brand,#app.atlas .topbar .brand,#app.final .topbar .brand{display:none}
#app .topbar .icon-button{width:var(--hud-icon);height:var(--hud-icon);min-width:var(--hud-icon);border-radius:var(--radius-md);background:#fff9eb;border:2px solid #8f7442;box-shadow:0 4px 0 #6e5428,0 8px 16px #10231b40}
#app .topbar .icon-button svg{width:26px;height:26px}
#app .topbar .icon-button:disabled{visibility:hidden}
#app .preview-banner{flex:none;height:52px;padding:2px 10px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px}
#app .preview-banner .secondary{min-height:48px;padding:0 16px;font-size:16px;box-shadow:none}

/* ---------- 활동 화면: 흐린 배경 그림 + 가운데 탐구 장면 ---------- */
#app.adventure .adventure-page{flex:1;min-height:0;display:block;position:relative;overflow:hidden;background:#2c4a3e}
#app.adventure .adventure-page::before{content:'';position:absolute;inset:-28px;z-index:0;background:var(--activity-backdrop,url('/assets/art/field-workbench.webp')) center/cover no-repeat;filter:blur(14px) saturate(1.08) brightness(.92)}
#app.adventure .adventure-page::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#10231b59 0,transparent 18%,transparent 78%,#10231b66 100%)}
#app.adventure .adventure-surface{position:absolute;z-index:1;left:0;right:0;top:var(--hud-top);bottom:var(--hud-bottom);flex:none;background:none;border:0;box-shadow:none}
#app.adventure .adventure-surface::before{display:none}
#app.adventure .phaser-stage canvas{border-radius:18px;box-shadow:0 0 0 3px #fff9eb99,0 14px 34px #0c1d1666}
#app.adventure .stage-loader{z-index:2}
#app.adventure .river-narrator .quest-meter{position:static;display:inline-flex;vertical-align:middle;gap:6px;margin:0 8px 2px 0;padding:1px 10px;min-height:0;background:#f6e6bb;border:1px solid #c9a660;border-radius:999px;box-shadow:none}
#app.adventure .river-narrator .quest-meter:empty{display:none}
#app.adventure .river-narrator .quest-meter>span{font-size:var(--fs-label);color:#5b5034}
#app.adventure .river-narrator .quest-meter>strong{font-size:calc(var(--fs-label) + 3px);line-height:1.2}
#app.adventure .discovery-total{display:none}

/* 질문은 화면에서 가장 큰 글자, 위 가운데 칩 하나 */
#app.adventure .adventure-heading{position:absolute;z-index:20;top:var(--hud-pad);left:calc(var(--hud-pad)*2 + var(--hud-icon)*2 + var(--hud-gap));right:calc(var(--hud-pad)*2 + var(--hud-icon)*2 + var(--hud-gap));width:fit-content;max-width:calc(100% - (var(--hud-pad)*4 + var(--hud-icon)*4 + var(--hud-gap)*2));margin:0 auto;height:auto;min-height:var(--hud-icon);display:flex;align-items:center;gap:14px;padding:4px 8px 4px 20px;background:var(--hud-paper);border:2px solid var(--hud-line);border-radius:var(--radius-lg);box-shadow:var(--hud-shadow)}
#app.adventure .task-copy{flex:1 1 auto;min-width:0}
#app.adventure .task-copy .eyebrow{display:none}
#app.adventure .task-copy h1{margin:0;font-size:var(--fs-question);line-height:1.2;color:var(--hud-ink);text-wrap:balance}
#app.adventure .phase-path{flex:none;max-width:none;gap:2px;padding-left:10px;border-left:2px dashed #d7c49a}
#app.adventure .phase-node{min-height:48px;min-width:48px;padding:2px 4px;font-size:var(--fs-label)}
#app.adventure .phase-node>span{width:32px;height:32px;font-size:16px}
#app.adventure .phase-node:not(.current) b{display:none}

/* 아래: 왼쪽 리버 말풍선, 오른쪽 지금 할 일 */
#app.adventure .adventure-footer{position:absolute;z-index:20;left:0;right:0;bottom:0;height:var(--hud-bottom);min-height:0;padding:0 var(--hud-pad) var(--hud-pad);background:none;border:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none;overflow:visible}
#app.adventure .adventure-footer>*{pointer-events:auto}
#app.adventure .river-narrator{flex:0 1 620px;min-width:0;min-height:calc(var(--hud-bottom) - var(--hud-pad) - 10px);align-items:center;gap:10px;padding:6px 18px 6px 6px;background:var(--hud-paper);border:2px solid var(--hud-line);border-radius:var(--radius-lg);box-shadow:var(--hud-shadow)}
#app.adventure .narrator-help{flex:none;align-self:center}
#app.adventure .river-narrator>div>span{font-size:var(--fs-label);color:#6b7a5c}
#app.adventure .river-narrator p{margin:2px 0 0;font-size:var(--fs-body);line-height:1.38;color:var(--hud-ink);max-width:none}
#app.adventure .adventure-toolbar{flex:0 1 auto;max-width:60%;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:flex-end;gap:8px;padding:0}
#app.adventure .adventure-side-tools{gap:8px;width:auto}
#app.adventure .adventure-toolbar .secondary,#app.adventure .adventure-toolbar .primary,#app.adventure .adventure-toolbar .compact-tool{min-height:50px;font-size:var(--fs-label);padding:8px 14px;border-radius:var(--radius-md);box-shadow:0 4px 0 #8c6b3666,0 8px 16px #10231b33}
#app.adventure .adventure-toolbar #next{font-size:clamp(19px,1.4vw,23px);min-height:56px;min-width:150px}
#app.adventure .adventure-toolbar #next.ready{animation:next-ready 2.8s ease-in-out infinite}
#app.adventure .compact-tool.is-locked{display:none}
@keyframes next-ready{0%,100%{transform:none}50%{transform:translateY(-3px)}}

/* ---------- 지도 ---------- */
#app.atlas:not(.welcome) .atlas-page{position:relative}
#app.atlas:not(.welcome) .atlas-strip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#app.atlas:not(.welcome) .atlas-route-help{display:none}
#app.atlas:not(.welcome) .atlas-title .eyebrow{display:none}
#app.atlas:not(.welcome) .atlas-title h1{font-size:var(--fs-question);margin:0;white-space:nowrap}
#app.atlas:not(.welcome) .atlas-stars{display:none}
#app.atlas:not(.welcome) .atlas-world{flex:1 1 auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:auto;box-shadow:none}
#app.atlas:not(.welcome) .atlas-footer{position:absolute;z-index:20;left:var(--hud-pad);right:var(--hud-pad);bottom:var(--hud-pad);height:auto;min-height:0;padding:0;background:none;border:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
#app.atlas:not(.welcome) .atlas-footer>*{pointer-events:auto}
#app.atlas:not(.welcome) .atlas-footer>p,#app.atlas:not(.welcome) .atlas-footer>div:has(>p){flex:0 1 640px;background:var(--hud-paper);border:2px solid var(--hud-line);border-radius:var(--radius-lg);box-shadow:var(--hud-shadow);padding:10px 18px;font-size:var(--fs-body);line-height:1.35}
#app.atlas:not(.welcome) .reward-rack{padding:6px;background:var(--hud-paper);border:2px solid var(--hud-line);border-radius:var(--radius-lg);box-shadow:var(--hud-shadow)}

/* ---------- 마지막 화면 ---------- */
#app.final .final-scene{padding:calc(var(--hud-top) + 4px) 3vw var(--hud-pad)}
#app.final .final-scene>h1{font-size:var(--fs-question)}
#app.final .final-panel{border-radius:var(--radius-lg)}
#app.final .final-actions{position:sticky;bottom:0;z-index:2;padding:12px 0 4px;margin-top:8px;background:linear-gradient(#fff9ea00,#fff9eaf5 30%)}
#app.final .saved-evidence .evidence-symbol img{width:64px;height:64px;object-fit:contain}
#app.final .certificate{background:url('/assets/art/ui/certificate-frame.webp') center/100% 100% no-repeat;border:0;box-shadow:none;padding:7.5% 13% 10.5%;width:min(100%,1080px,calc((var(--app-height,100dvh) - var(--hud-top) - 150px)*1.346));margin:0 auto;aspect-ratio:1151/855;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#app.final .certificate .certificate-medal{display:none}
#app.final .certificate:has(.certificate-medal)>h1{padding:0}
#app.final .certificate .cert-tools{display:flex;gap:12px;justify-content:center;margin:6px 0}
#app.final .certificate .cert-tools img{width:clamp(40px,4vw,56px);height:clamp(40px,4vw,56px);object-fit:contain}
#app.final .certificate h1{font-size:clamp(24px,2.6vw,40px)}#app.final .certificate p{font-size:max(20px,1.5vw);line-height:1.3;margin:clamp(1px,.5vw,8px) 0}#app.final .certificate input{min-height:48px;font-size:clamp(17px,1.6vw,24px)}
#app.final .certificate-tools{justify-content:center}

/* ---------- 세로 태블릿: 아래 칸을 두 줄로 ---------- */
@media(max-aspect-ratio:1/1){
 :root{--hud-bottom:196px}
 #app.adventure .adventure-footer{flex-wrap:wrap;align-content:flex-end}
 #app.adventure .river-narrator{flex:1 1 100%;min-height:0}
 #app.adventure .adventure-toolbar{max-width:100%;flex:1 1 100%}
}
/* ---------- 휴대폰 세로: 가로로 돌려 달라는 안내 ---------- */
@media(max-width:599px) and (max-aspect-ratio:3/4){
 body::after{content:'화면을 가로로 돌려 주세요\A태블릿·전자칠판 가로 화면에 맞춘 탐험이에요';white-space:pre-line;position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;text-align:center;font:24px/1.5 GeoDisplay,sans-serif;color:#fff8dd;background:#193f35f2}
}
@media(prefers-reduced-motion:reduce){#app.adventure .adventure-toolbar #next.ready{animation:none}}
/* 기록탑 다섯 칸: 3 + 2 를 가운데 정렬 */
@media(min-width:900px){#app.final .final-record-grid{display:grid;grid-template-columns:repeat(6,1fr)}#app.final .final-record-grid>*{grid-column:span 2}#app.final .final-record-grid>:nth-child(4):nth-last-child(2){grid-column:2/span 2}}
#app.adventure .river-narrator .quest-meter{white-space:nowrap}
@media(max-width:1180px),(max-height:620px){#app.adventure #river-status{display:none}#app.adventure .river-narrator p{font-size:var(--fs-body);line-height:1.3}}
/* 낮은 화면: 인증서를 가로로 넓히고, 인쇄·돌아가기 버튼은 바닥에 붙여 항상 보이게 */
#app.final .certificate-tools{position:sticky;bottom:0;z-index:3;padding:10px 0 4px}
@media(max-height:700px){#app.final .certificate{width:min(100%,860px);aspect-ratio:auto;padding:58px 96px 70px}#app.final .certificate h1{font-size:28px}}
/* 암석 3D 돌려 보기 */
.learning-dialog.rock3d-dialog{width:min(880px,calc(100vw - 40px))}
.rock3d-stage{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(var(--app-height,100dvh) - 300px);margin:0 auto;border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 40%,#fff8e6 0,#e6d6b0 70%,#cdb98c 100%);box-shadow:inset 0 0 0 2px #c9a660,inset 0 -18px 40px #8c6b3640;overflow:hidden}
.rock3d-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.rock3d-stage canvas:active{cursor:grabbing}
.rock3d-stage canvas:focus-visible{outline:4px solid var(--focus-ring,#267c8b);outline-offset:-4px}
.rock3d-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;font-size:var(--fs-body)}
.rock3d-help{text-align:center}
.rock3d-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}