html,body{margin:0;height:100%;background:#1c1733;overflow:hidden}
#app{height:100%;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));background:#1c1733}
.screen{display:none;position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.screen.active{display:block}
.hot{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.toast{position:absolute;left:50%;bottom:6%;z-index:9;transform:translateX(-50%);background:rgba(28,23,51,.88);color:#fff;font-weight:800;font-size:clamp(14px,2.4vmin,18px);padding:10px 18px;border-radius:999px;pointer-events:none;white-space:nowrap}
.flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,#fff 0%,#fff6d6 38%,#ffffff 100%)}
.flash.on{animation:enter-flash 1.35s ease-in-out both}
@keyframes enter-flash{0%{opacity:0}18%{opacity:1}48%{opacity:1}100%{opacity:0}}
#home{background-image:url('./assets/start-travel-poster.jpg?v=7')}
#timeline{background-image:url('./assets/screen-timeline.jpg?v=5')}
#travel{background:#0b0820}
#travel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#explore{background-image:url('./assets/screen-explore.jpg?v=5')}
#quiz{background-image:url('./assets/screen-quiz.jpg?v=5')}
#book{background-image:url('./assets/screen-book.jpg?v=5')}
#story{background:#0b0820}
#story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.toast-top{bottom:auto;top:15%}

/* 영상 재생 실패 안내 */
.tm-fallback{display:none;position:absolute;inset:0;z-index:6;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(11,8,32,.72);color:#fff;text-align:center}
.tm-fallback.on{display:flex}
.tm-fallback p{margin:0;font-weight:800;font-size:clamp(14px,3vmin,22px)}
.tm-fallback button{border:0;border-radius:999px;padding:12px 26px;font-weight:900;font-size:clamp(14px,3vmin,20px);cursor:pointer;background:#ffc23d;color:#2a1a05}
.tm-fallback button[data-act=skip]{background:rgba(255,255,255,.18);color:#fff}

/* 폰 세로 화면 안내 + 돌려서 크게 보기 */
.tm-hint,.tm-unrot{display:none}
@media (orientation:portrait) and (max-width:820px){
  .tm-portrait:not(.tm-rot) .tm-hint{display:flex;position:fixed;left:0;right:0;top:calc(50% - 28.2vw - 84px);z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#fff;font:800 14px/1.3 system-ui,sans-serif;text-align:center;padding:0 16px}
  .tm-hint button{border:0;border-radius:999px;padding:9px 18px;font-weight:900;font-size:14px;background:#ffc23d;color:#2a1a05}
  .tm-rot .tm-unrot{display:block;position:fixed;right:8px;bottom:8px;z-index:60;border:0;border-radius:999px;padding:7px 12px;font-weight:800;font-size:12px;background:rgba(0,0,0,.55);color:#fff}
  .tm-rot .stage{position:fixed;left:50%;top:50%;width:min(100vh,calc(100vw * 16 / 9));height:calc(min(100vh,calc(100vw * 16 / 9)) * 9 / 16);transform:translate(-50%,-50%) rotate(90deg)}
}
@supports (height:100dvh){
  @media (orientation:portrait) and (max-width:820px){
    .tm-rot .stage{width:min(100dvh,calc(100vw * 16 / 9));height:calc(min(100dvh,calc(100vw * 16 / 9)) * 9 / 16)}
  }
}

/* 시대 뽑기 */
#pick{background:#0b0820 url('./assets/screen-travel.jpg?v=5') center/cover no-repeat}
.tm-pick{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:7%;pointer-events:none;text-align:center;background:linear-gradient(180deg,rgba(11,8,32,0) 45%,rgba(11,8,32,.62) 100%)}
.tm-pick-top{margin:0 0 1.2%;color:#fff;font-weight:800;font-size:clamp(14px,3.4vmin,28px);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.tm-pick-name{min-width:34%;padding:.35em 1.1em;border-radius:999px;background:linear-gradient(180deg,#fff6d6,#ffc23d);color:#2a1a05;font-weight:900;font-size:clamp(22px,6vmin,52px);box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 0 3px #fff}
.tm-pick-name.land{animation:tm-land .6s ease-out both}
@keyframes tm-land{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.tm-pick-sub{margin:1.2% 0 0;min-height:1.4em;color:#ffe9a8;font-weight:800;font-size:clamp(14px,3.4vmin,28px);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.tm-book-count{position:absolute;left:50%;top:5%;transform:translateX(-50%);padding:.25em 1em;border-radius:999px;background:rgba(28,23,51,.85);color:#fff;font-weight:800;font-size:clamp(13px,3vmin,24px);pointer-events:none;white-space:nowrap}

/* 확인 퀴즈 */
#hquiz{background-color:#0b0820;background-size:cover;background-position:center}
.tm-quiz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:4%}
.tm-quiz-card{width:min(86%,760px);padding:3.5% 4%;border-radius:28px;background:#fffaf0;box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 0 0 4px #e9c46a;text-align:center;color:#3b2a14}
.tm-quiz-era{margin:0 0 .4em;font-weight:900;font-size:clamp(12px,2.6vmin,20px);color:#b5651d}
.tm-quiz-q{margin:0 0 .8em;font-weight:900;font-size:clamp(17px,4.6vmin,36px);line-height:1.3;word-break:keep-all}
.tm-quiz-opts{display:flex;gap:2.5%;justify-content:center;flex-wrap:wrap}
.tm-quiz-opts button{flex:1 1 28%;min-width:26%;border:0;border-radius:18px;padding:.75em .4em;font-weight:900;font-size:clamp(15px,3.8vmin,30px);cursor:pointer;color:#2a1a05;background:#ffd166;box-shadow:0 4px 0 #c98b1a}
.tm-quiz-opts button:nth-child(2){background:#ffb3c6;box-shadow:0 4px 0 #cf6f8b}
.tm-quiz-opts button:nth-child(3){background:#a8e6cf;box-shadow:0 4px 0 #5fae8e}
.tm-quiz-opts button.ok{outline:5px solid #2e9e5b;transform:scale(1.05)}
.tm-quiz-opts button.no{opacity:.35;text-decoration:line-through}
.tm-quiz-opts button:disabled{cursor:default}
.tm-quiz-msg{min-height:1.5em;margin:.7em 0 0;font-weight:800;font-size:clamp(13px,3vmin,24px);color:#7a4a12}
@media (orientation:portrait) and (max-width:820px){.tm-quiz-card{width:92%}}

.tm-story-location {
  display: none;
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  z-index: 85;
  transform: translateX(-50%);
  width: max-content;
  max-width: 65vw;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(22, 17, 33, .82);
  color: #fff3d8;
  font: 700 clamp(11px, 2vmin, 15px)/1.35 system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
body:has(#story.active) .tm-story-location:not(:empty) { display: block }

#home > .hot[aria-label="소리"], #home > .hot[aria-label="도움말"] {
  color: #fff3d8;
  background: #281c3bdf;
  border: 1px solid #f4cf81;
  border-radius: 999px;
  font: 800 clamp(12px, 2.5vmin, 22px) system-ui, sans-serif;
}
#home > .hot[aria-label="소리"]::before { content: "♪" }
#home > .hot[aria-label="도움말"]::before { content: "?" }

.stage:has(#home.active) {
  --home-tool-size: clamp(50px, 12vmin, 76px);
  --home-tool-gap: 7px;
}
.stage:has(#home.active) :is(.tm-home-destinations, .tc-review-btn, .tmj-open) {
  position: absolute;
  z-index: 30;
  inset: auto max(10px, env(safe-area-inset-right)) var(--home-tool-bottom) auto;
  width: var(--home-tool-size);
  min-height: 0;
  height: var(--home-tool-size);
  padding: 4px;
  border: 1px solid #eac47e;
  border-radius: 16px;
  background: linear-gradient(#55355be8, #24182be8);
  box-shadow: 0 3px 10px #120b1c80, inset 0 0 0 1px #f9d99c33;
  color: #fff3d4;
  text-align: center;
  font: 800 clamp(9px, 1.7vmin, 12px)/1.1 system-ui, sans-serif;
  cursor: pointer;
}
.stage:has(#home.active) :is(.tm-home-destinations, .tc-review-btn, .tmj-open)::before {
  content: '';
  display: block;
  width: 68%;
  height: 61%;
  margin: 0 auto 3px;
  background: var(--home-tool-icon) center / contain no-repeat;
}
.tm-home-destinations {
  --home-tool-bottom: calc(3% + 2 * (var(--home-tool-size) + var(--home-tool-gap)));
  --home-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='m5 11 12-4 14 5 12-4v29l-12 4-14-5-12 4z' fill='%23efc778' stroke='%23774428' stroke-width='2'/%3E%3Cpath d='M17 9v27m14-22v25' stroke='%23af7f48' stroke-width='2'/%3E%3Ccircle cx='26' cy='22' r='9' fill='%234d859c' stroke='%23fff0b8' stroke-width='2'/%3E%3Cpath d='m30 17-2 7-7 3 3-7z' fill='%23ffdf86'/%3E%3C/svg%3E");
}
.tc-review-btn {
  --home-tool-bottom: calc(3% + var(--home-tool-size) + var(--home-tool-gap));
  --home-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='5' width='31' height='38' rx='5' fill='%23a95e42' stroke='%23ffd885' stroke-width='2'/%3E%3Cpath d='M15 6v36m5-28h12m-12 6h10m-10 6h8' stroke='%23ffe8a6' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m24 36 3-7L39 15l5 4-13 14z' fill='%23edbd57' stroke='%23774826' stroke-width='2'/%3E%3C/svg%3E");
}
.tmj-open {
  --home-tool-bottom: 3%;
  --home-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='9' y='5' width='31' height='38' rx='5' fill='%23527278' stroke='%23f9d087' stroke-width='2'/%3E%3Cpath d='M15 7v34m4-2h17' stroke='%23e9ba73' stroke-width='2'/%3E%3Cpath d='m27 13 2.7 6.6 7.1.5-5.5 4.6 1.7 7-6-3.8-6 3.8 1.7-7-5.5-4.6 7.1-.5z' fill='%23ffd77d' stroke='%23734e34' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Destination menu shares the portal's purple and brass palette. */
#timeline > .tm-country-panel {
  padding: clamp(12px, 2.4vw, 28px);
  gap: 12px;
  background: radial-gradient(ellipse at 15% 0%, #65517a88, transparent 60%), linear-gradient(140deg, #241c3c, #141a30);
  color: #ffedc7;
}
#timeline > .tm-country-panel header { flex-shrink: 0; }
#timeline > .tm-country-panel header h2 {
  color: #fff0c9;
  font-size: clamp(19px, 2.7vw, 29px);
  line-height: 1.25;
}
#timeline > .tm-country-panel select {
  background: #332943 !important;
  color: #fff0c9 !important;
  border-color: #b99862 !important;
  padding: 6px 12px;
}
#timeline .tm-country-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 5px 5px 18px;
  scrollbar-color: #b99862 #241c3c;
}
#timeline .tm-country-grid button {
  padding: 8px 8px 11px;
  gap: 8px;
  border: 1px solid #bb965e;
  border-radius: 15px;
  background: linear-gradient(#fff3d8, #ead7b3);
  color: #463023;
  box-shadow: 0 4px 12px #07081555, inset 0 0 0 2px #fff5dc66;
}
#timeline .tm-country-thumb { border-radius: 9px; background: #211c32; }
#timeline .tm-country-thumb img { width: 100%; height: 100%; object-fit: contain; }
#timeline .tm-country-grid strong { font-size: clamp(13px, 1.5vw, 17px); line-height: 1.4; }
#timeline .tm-country-grid small { color: #79563b; font-size: 12px; line-height: 1.4; }
#timeline .tm-country-grid button:hover { border-color: #ffe2a0; box-shadow: 0 4px 18px #e2b95c44; }
#timeline > .tm-country-panel header button {
  background: #3b2d49;
  color: #fff0c9;
  border: 1px solid #bc965e;
}
@media (orientation: portrait) {
  #timeline .tm-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  #timeline > .tm-country-panel { padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  #timeline > .tm-country-panel header { align-items: flex-start; }
  #timeline > .tm-country-panel header h2 { max-width: 72%; font-size: 21px; }
  #timeline .tm-country-grid strong { font-size: 14px; }
}
@media (orientation: landscape) and (max-width: 760px) {
  #timeline .tm-country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#timeline > .tm-destinations {
  background: #211a35 url('https://time-machine-history.restyart.com/assets/destination-menu-landscape.webp') center / cover no-repeat;
}
#timeline .tm-destinations header { flex-direction: row-reverse; }
#timeline .tm-destinations header .tm-nav-back {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
}
#timeline .tm-destinations .tm-country-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: unset;
  overflow: hidden;
  align-content: stretch;
  gap: clamp(6px, 1.3vmin, 14px);
}
#timeline .tm-destinations .tm-country-grid button {
  overflow: hidden;
  gap: 4px;
  min-height: 0;
  padding: 5px;
}
#timeline .tm-destinations .tm-country-thumb {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
}
#timeline .tm-destinations .tm-country-thumb img { aspect-ratio: auto }
#timeline .tm-destinations strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: clamp(11px, 1.7vmin, 16px);
  line-height: 1.25;
}
#timeline .tm-destinations small {
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(10px, 1.4vmin, 12px);
}
.tm-destination-pages { display: flex; flex: none; align-items: center; justify-content: center; gap: 18px; }
#timeline .tm-destination-pages button { padding: 5px 16px; min-height: 36px; }
.tm-destination-pages button:disabled { opacity: .4; cursor: default; }
@media (orientation: portrait) {
  #timeline > .tm-destinations { background-image: url('https://time-machine-history.restyart.com/assets/destination-menu-portrait.webp'); }
  #timeline .tm-destinations .tm-country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  #timeline .tm-destinations strong { font-size: clamp(11px, 3vw, 15px); }
}
#hquiz {
  background-image: radial-gradient(ellipse at top, #5b416d, #21172f 75%);
}
#hquiz .tm-quiz { box-sizing: border-box; padding: clamp(12px, 3vmin, 26px); }
#hquiz .tm-quiz-card { width: min(100%, 760px); padding: clamp(14px, 3vmin, 28px); }
#hquiz .tm-quiz-era { font-size: clamp(12px, 2vmin, 16px); line-height: 1.4; }
#hquiz .tm-quiz-q { font-size: clamp(18px, 3.3vmin, 28px); line-height: 1.45; overflow-wrap: anywhere; }
#hquiz .tm-quiz-opts button { font-size: clamp(15px, 2.5vmin, 21px); line-height: 1.4; min-height: 44px; overflow-wrap: anywhere; }
@media (orientation: portrait) {
  #hquiz .tm-quiz-q { font-size: clamp(19px, 5vw, 24px); }
}

#timeline .tm-destinations header { justify-content: space-between; align-items: center; gap: 10px; }
#timeline .tm-destinations header h2 { width: min(70%, 640px); max-width: none; margin: 0 auto; }
.tm-destination-title-art { display: block; width: 100%; height: clamp(40px, 9vmin, 80px); object-fit: contain; }
#timeline .tm-destinations header .tm-nav-back {
  background: url('https://time-machine-history.restyart.com/assets/ui/dest-back.png') center / contain no-repeat;
  border: 0;
  border-radius: 0;
}
#timeline .tm-destinations header .tm-nav-back::before { display: none; }
#timeline .tm-destinations .tm-country-grid button {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 15px;
  box-shadow: none;
  padding: 9px 9px 10px;
  gap: 0;
}
#timeline .tm-destinations .tm-country-grid button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('https://time-machine-history.restyart.com/assets/ui/dest-card.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
#timeline .tm-destinations .tm-country-thumb { background: transparent; flex: 1 1 68%; }
#timeline .tm-destinations .tm-country-grid strong {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 5px 5px 2px;
  text-align: center;
  color: #432c1b;
}
#timeline .tm-destinations .tm-country-grid small { text-align: center; padding: 0 5px; }
#timeline .tm-destinations .tm-country-grid button:hover { filter: brightness(1.08); }

#home > .hot[aria-label="소리"], #home > .hot[aria-label="도움말"],
.mp-start .mp-spot-sound, .mp-start .mp-spot-help {
  background: var(--top-icon) center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}
#home > .hot[aria-label="소리"]::before, #home > .hot[aria-label="도움말"]::before { content: none; }
#home > .hot[aria-label="소리"], .mp-start .mp-spot-sound {
  --top-icon: url('https://time-machine-history.restyart.com/assets/ui/menu-music.png');
}
#home > .hot[aria-label="도움말"], .mp-start .mp-spot-help {
  --top-icon: url('https://time-machine-history.restyart.com/assets/ui/menu-help.png');
}


/* Keep the illustration and caption aligned with the image card frame. */
#timeline .tm-destinations .tm-country-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 66fr) minmax(0, 23fr) minmax(0, 11fr);
  align-items: stretch;
  padding: 7px 8px 8px;
  container-type: inline-size;
}
#timeline .tm-destinations .tm-country-thumb {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
#timeline .tm-destinations .tm-country-grid strong {
  display: -webkit-box;
  align-self: center;
  width: 100%;
  max-height: 2.5em;
  padding: 0 4px;
  margin: 0;
  font-size: clamp(11px, 6cqi, 17px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}
#timeline .tm-destinations .tm-country-grid small {
  display: block;
  align-self: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 5px;
  font-size: clamp(10px, 4.5cqi, 12px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
#timeline .tm-destinations header {
  position: relative;
  justify-content: center;
  min-height: 44px;
}
#timeline .tm-destinations header .tm-nav-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#timeline .tm-destinations header h2 { margin-inline: auto; }
@media (orientation: landscape) and (max-height: 500px) {
  #timeline > .tm-destinations { gap: 5px; padding: 8px 12px; }
  .tm-destination-title-art { height: 44px; }
  #timeline .tm-destinations .tm-country-grid strong { font-size: clamp(10px, 5cqi, 14px); }
  #timeline .tm-destinations .tm-country-grid small { font-size: 10px; }
}