.mp-only{display:none}
.tm-start-video,.tm-skip-video{font-size:0;color:transparent}
.mp-exploration{background:#21172e;color:#34261d;overflow:hidden;font-family:system-ui,sans-serif}
.mp-exploration.active{display:flex;flex-direction:column}
.mp-exploration .mp-header{position:absolute;top:0;left:0;right:0;z-index:2}
.mp-scene{width:100%;height:52%;min-height:0;object-fit:cover;object-position:center 34%;flex-shrink:0}
.mp-panel{flex:1;min-height:0;overflow:auto;background:#fff6df;border-radius:24px 24px 0 0;padding:16px 18px max(16px,env(safe-area-inset-bottom));position:relative;margin-top:-18px}
.mp-period{margin:0 0 4px;font-size:13px;font-weight:900;color:#9a5622}
.mp-panel h2{font-size:22px;line-height:1.25;margin:0 0 8px}
.mp-speech{font-size:15px;line-height:1.6;margin:0 0 12px}
.mp-actions{display:flex;gap:8px;flex-wrap:wrap}
.mp-observe{flex:1;min-width:90px;min-height:48px;border:2px solid #d99037;border-radius:14px;background:#fff;color:#68401b;font:800 14px system-ui;cursor:pointer;padding:8px}
.mp-observe.mp-found{background:#e3f2d7;border-color:#428c4f;color:#24512a}
.mp-feedback{font-size:14px;line-height:1.5;min-height:3em;margin:10px 0;color:#654425}
.mp-nav{display:flex;gap:10px}
.mp-button{display:block;width:100%;min-height:52px;padding:12px 18px;border:2px solid #ffdc82;border-radius:18px;background:linear-gradient(#ffcc4b,#ff9c16);box-shadow:0 4px 0 #b66b14;color:#45240d;font:900 18px/1.3 system-ui,sans-serif;cursor:pointer;text-align:center;text-decoration:none}
.mp-button:disabled{opacity:.45;cursor:default;box-shadow:none}
.mp-secondary{background:#fff2d7;box-shadow:none;border-color:#d6ac71;font-size:16px}
.mp-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:max(12px,env(safe-area-inset-top)) 12px 10px;color:#fff;font:700 13px system-ui;background:linear-gradient(#1b102ac9,transparent)}
.mp-small{min-height:44px;min-width:44px;border:1px solid #ffffff66;border-radius:13px;padding:8px;color:white;background:#271a41ca;font:700 12px system-ui;cursor:pointer}
.mp-header strong{text-align:center}
.mp-nav .mp-button{flex:1}
.mp-exploration button:focus-visible,.mp-only button:focus-visible{outline:3px solid #3d93db;outline-offset:2px}
@media (orientation:portrait) and (max-width:820px){
 html,body,#app{height:100%;height:100dvh}
 .stage,.tm-rot .stage{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none}
 .tm-hint,.tm-unrot{display:none!important}
 .mp-only{display:flex}
 #home,#timeline,#book{background-image:none;background:radial-gradient(ellipse at top,#65429a,#21142f 72%)}
 #home>.hot,#timeline>.hot,#book>.hot,#book>.tm-book-count{display:none!important}
 .mp-home,.mp-timeline,.mp-book{height:100%;box-sizing:border-box;flex-direction:column;align-items:center;gap:14px;overflow:auto;padding:64px 22px max(24px,env(safe-area-inset-bottom));color:#fff;text-align:center;font-family:system-ui,sans-serif}
 .mp-home .mp-header,.mp-book .mp-header,.mp-timeline .mp-header{position:absolute;top:0;left:0;right:0}
 .mp-home-art{width:calc(100% + 44px);height:auto;max-height:42%;object-fit:contain;margin:0 -22px}
 .mp-home h1,.mp-book h1,.mp-timeline h1{font-size:26px;line-height:1.25;margin:4px 0}
 .mp-home p,.mp-book p{margin:0;line-height:1.6}
 .mp-help{font-size:14px;opacity:.85;max-width:28em}
 .mp-eras{display:flex;flex-direction:column;gap:14px;width:100%}
 /* 새 세로 시작 화면: 그림 한 장 위에 투명 버튼 (그림 비율 941:1672를 지켜 화면 안에 통째로 넣고, 남는 곳은 같은 그림을 흐리게 깐다) */
 .mp-start{display:none}
 .mp-home.mp-home-new{position:relative;padding:0;gap:0;overflow:hidden;justify-content:center;background:#1b102a}
 .mp-home.mp-home-new::before{content:'';position:absolute;inset:-24px;background:var(--start-img) center/cover no-repeat;filter:blur(22px) brightness(.75)}
 .mp-home.mp-home-new>:not(.mp-start){display:none}
 .mp-home-new .mp-start{display:block;position:relative;z-index:1;flex:none;width:min(100%,calc(100vh*941/1672));width:min(100%,calc(100dvh*941/1672));height:auto;aspect-ratio:941/1672}
 .mp-start-img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
 .mp-spot{position:absolute;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .mp-spot:focus-visible{outline:3px solid #3d93db;outline-offset:2px}
 .mp-spot-go{left:20%;top:73%;width:60%;height:11%}
 .mp-spot-sound{left:2.5%;top:1.2%;width:11%;height:5.8%}
 .mp-spot-help{left:86.5%;top:1.2%;width:11%;height:5.8%}
 .mp-start-replay{position:absolute;left:50%;bottom:max(6px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:6px 16px;border:0;border-radius:999px;background:#281a43c8;color:#fff;font:700 13px system-ui;cursor:pointer;white-space:nowrap}
 #travel video{object-fit:contain}
 .tm-start-video{left:10%!important;top:auto!important;bottom:max(80px,calc(env(safe-area-inset-bottom) + 60px));width:80%!important;height:auto!important;min-height:56px;background:linear-gradient(#ffcf4c,#ff9e19);border:2px solid #ffe199;border-radius:18px;font:900 20px system-ui;color:#45240d}
 .tm-skip-video{left:auto!important;right:16px;top:auto!important;bottom:max(16px,env(safe-area-inset-bottom));width:auto!important;height:auto!important;min-height:44px;padding:10px 20px;background:#281a43dc;border:1px solid #ffffff77;border-radius:14px;font:700 15px system-ui;color:#fff}
 #pick{background-size:100% auto;background-color:#21142f}
 .tm-pick{justify-content:center;padding:16px;background:linear-gradient(#21142f22,#21142f88);box-sizing:border-box}
 .tm-pick-top{font-size:18px;margin-bottom:20px}
 .tm-pick-name{font-size:34px;padding:14px 24px}
 .tm-pick-sub{font-size:16px;margin-top:20px}
 #pick>.hot{width:70px!important;height:48px!important;background:#281a43b8;border:1px solid #ffffff77;border-radius:12px}
 #pick>.hot::after{content:'← 처음';color:white;font:700 14px system-ui}
 .tm-quiz{box-sizing:border-box;padding:20px 16px;overflow:auto;align-items:safe center}
 .tm-quiz-card{box-sizing:border-box;width:100%;padding:24px 18px;border-radius:24px}
 .tm-quiz-era{font-size:14px}
 .tm-quiz-q{font-size:24px;line-height:1.45;margin:14px 0 20px}
 .tm-quiz-opts{flex-direction:column;gap:14px}
 .tm-quiz-opts button{flex:none;min-height:62px;font-size:21px;padding:14px}
 .tm-quiz-msg{font-size:16px;line-height:1.6;margin-top:22px}
 .mp-card-art{width:100%;min-height:0;height:40%;object-fit:cover;object-position:center 36%;border:3px solid #ffd069;border-radius:24px;box-sizing:border-box}
 .mp-stars{color:#ffd259;font-weight:900;font-size:25px}
 #story img{object-fit:contain}
 .mp-legacy-nav{position:absolute;left:0;right:0;bottom:8%;justify-content:center;pointer-events:none;color:#fff;font:700 14px system-ui;text-align:center;background:#21142fc9}
 /* Hotspots follow the contained 16:9 image, not the portrait screen. */
 #story>.hot{transform:translateY(calc((100dvh - 100vw * 9 / 16) / 2));height:calc(100vw * 9 / 16 * .2)!important;top:calc(100vw * 9 / 16 * .3)!important}
 #story>.hot[aria-label='뒤로'],#story>.hot[aria-label='소리']{top:0!important;height:calc(100vw * 9 / 16 * .13)!important}
 #story>.hot[aria-label='시대 선택으로']{top:calc(100vw * 9 / 16 * .74)!important}
 #story>.hot[style*='z-index: 1']{top:0!important;height:calc(100vw * 9 / 16)!important}
 .toast{white-space:normal;width:80%;box-sizing:border-box;text-align:center;font:800 15px/1.5 system-ui;bottom:8%;border-radius:18px}
 .toast-top{top:12%;bottom:auto}
 /* 출발 화면: 세로 영상이 없으면 가로 영상을 가운데 틀에 넣고, 위아래는 세로 홈 그림을 흐리게 깐다 */
 #travel{background:#1b102a}
 #travel::before{content:'';position:absolute;inset:-24px;background:url('./assets/home-start-portal-v2.png?v=1') center/cover no-repeat;filter:blur(22px) brightness(.7)}
 #travel::after{content:'타임머신이 출발해요!';position:absolute;left:0;right:0;top:calc(50% - 28.2vw - 70px);text-align:center;color:#fff;font:900 22px system-ui;text-shadow:0 2px 8px #000a;pointer-events:none}
 #travel video{inset:auto;left:0;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);object-fit:cover;z-index:1;box-shadow:0 12px 40px #000a}
 #travel.tm-travel-portrait::before,#travel.tm-travel-portrait::after{display:none}
 #travel.tm-travel-portrait video{inset:0;top:0;height:100%;aspect-ratio:auto;transform:none;box-shadow:none}
 .tm-start-video,.tm-skip-video{z-index:2}
 /* 시대 뽑기: 가로 배경 대신 세로 홈 그림을 깐다 */
 #pick{background:#21142f}
 #pick::before{content:'';position:absolute;inset:-24px;background:url('./assets/home-start-portal-v2.png?v=1') center/cover no-repeat;filter:blur(9px) brightness(.85)}
 .tm-pick{background:linear-gradient(#21142f33,#21142f99)}
 .tm-fallback{padding:20px;box-sizing:border-box}
 .tm-fallback p{font-size:20px}.tm-fallback button{font-size:18px;min-height:48px}
}
@media (orientation:landscape){.mp-exploration.active{flex-direction:row}.mp-scene{height:100%;width:55%}.mp-panel{height:100%;box-sizing:border-box;margin:0;border-radius:0;flex:1;padding-top:52px}.mp-panel h2{font-size:20px}.mp-speech{font-size:14px}.mp-feedback{min-height:0}.mp-exploration .mp-header{right:45%}}
@media (prefers-reduced-motion:reduce){.flash.on{animation-duration:.01ms}.tm-pick-name.land{animation:none}}

.tm-answer-icon{display:inline-block;margin-right:.5em;font-size:1.4em;vertical-align:middle}

@media(orientation:portrait){.mp-start .mp-spot-sound,.mp-start .mp-spot-help{display:grid;place-items:center;background:linear-gradient(#ffdc75,#ba6a15);border:2px solid #ffe6a3;border-radius:50%;color:#49290e;font:bold clamp(18px,5vw,30px) system-ui;box-shadow:0 3px 8px #28100070}}