:root {
  --line: #120b06;
  --ink: #24170f;
  --cream: #fff4da;
  --paper:#fff8e8;
  --panel:#372417;
  --panel-dark:#20140d;
  --wood:#6b3f25;
  --gold:#f3c85d;
  --blue:#2f70b7;
  --green:#4d9a45;
  --mint:#3aa69b;
  --purple:#8357c7;
  --red:#d35252;
  --sky:#78bfea;
  --grass:#78b85e;
  --shadow:#0008;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-gap: clamp(6px, 1.8vw, 10px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #15100c;
}

body {
  margin: 0;
  position: fixed;
  inset: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.app {
  width: 100%;
  max-width: 460px;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  padding: max(4px, env(safe-area-inset-top, 0px)) 4px calc(4px + var(--safe-bottom));
  overflow: hidden;
  background: #20160f;
}

.shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid #080504;
  border-radius: 14px;
  background: #5b3922;
  box-shadow: 0 18px 36px #000a;
}

/* 상단바 */
.top {
  flex: 0 0 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border-bottom: 4px solid var(--line);
  background: linear-gradient(#7b4c2e, #3a2315);
  color: #fff5dc;
  font-weight: 1000;
  text-shadow: 2px 2px #000;
  font-size: 13px;
}

.top span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.badge {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
  background: #193c73;
  border: 2px solid #071a34;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.1;
}

/* 상단 게임 화면 무대 */
.screen {
  position: relative;
  flex: 0 0 42dvh;
  height: 42dvh;
  min-height: 250px;
  max-height: 340px;
  overflow: hidden;
  background: #80c7ed;
  image-rendering: pixelated;
}

.scene {
  position: absolute;
  inset: 0;
}

.hidden {
  display: none !important;
}

/* =========================================================
   Role introduction scene
========================================================= */
#roleIntroScene {
  padding: 12px;
  background:
    linear-gradient(#79c8ef 0 42%, #f6d79d 42% 100%);
}

.roleIntroPanel {
  width: min(100%, 520px);
  height: 100%;
  margin: 0 auto;
  padding: 12px 12px 8px;
  overflow: hidden;
  background: #fff8e8;
  border: 3px solid #2a1b12;
  border-radius: 10px;
  box-shadow: 0 5px 0 #0005;
  color: #23170f;
  text-align: center;
}

.roleIntroTitle {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 1000;
}

.roleIntroLineupWrap {
  position: relative;
  display: block;
  width: min(92%, 410px);
  height: calc(100% - 92px);
  min-height: 105px;
  margin: -2px auto 0;
}

.roleIntroLineup {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.roleIntroIconRow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.roleIntroIconRow span {
  position: absolute;
  bottom: 7px;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
}

.roleIntroIconRow span:nth-child(1) { left: 29%; }
.roleIntroIconRow span:nth-child(2) { left: 44%; }
.roleIntroIconRow span:nth-child(3) { left: 59.5%; }
.roleIntroIconRow span:nth-child(4) { left: 75.5%; }

.roleIntroSummary {
  position: relative;
  z-index: 2;
  margin: 3px 0 0;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 900;
}

@media (max-width: 420px) {
  #roleIntroScene {
    padding: 8px;
  }

  .roleIntroPanel {
    padding: 9px;
  }

  .roleIntroTitle {
    font-size: 12px;
  }

  .roleIntroLineupWrap {
    height: calc(100% - 82px);
    min-height: 95px;
  }

  .roleIntroIconRow span {
    font-size: 12px;
  }
}

/* =========================================================
   1. Title Scene (첫 화면 정밀 셋팅)
========================================================= */
#titleScene:not(.hidden) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(#82d4ff 0 50%, #ffe7b2 50% 100%) !important;
  z-index: 10 !important;
}

.titleHero {
  position: absolute !important;
  top: 30px !important;
  left: 10px !important;
  right: 10px !important;
  text-align: center !important;
  color: #fff !important;
  text-shadow: 2px 2px 0 #173e78, -2px -2px 0 #173e78, 2px -2px 0 #173e78, -2px 2px 0 #173e78 !important;
  z-index: 15 !important;
}

.titleKicker {
  margin: 0 0 2px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.titleHero h1 {
  margin: 0 !important;
  font-size: clamp(22px, 6.5vw, 27px) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.titleSub {
  margin: 5px 0 0 !important;
  color: #1d2440 !important;
  text-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

.titleLineup {
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 310px !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 14 !important;
  display: block !important;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.22)) !important;
}

.titleRoles {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 68px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
  z-index: 16 !important;
}

.role {
  padding: 5px 2px !important;
  border: 2px solid #111 !important;
  border-radius: 6px !important;
  color: #24170f !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.roleClinical { background: #f4daf8 !important; }
.roleSocial { background: #e1f3c4 !important; }
.roleNurse { background: #ffd6d6 !important; }
.roleOt { background: #d9ecff !important; }

.startBtn {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  width: 160px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 3px solid #130b05 !important;
  border-radius: 9px !important;
  background: linear-gradient(#ffe36b, #f4b729) !important;
  color: #2a1605 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 0 #4b2a0c !important;
  z-index: 20 !important;
  display: block !important;
}

.startBtn:active {
  transform: translate(-50%, 2px) !important;
  box-shadow: 0 2px 0 #4b2a0c !important;
}

#titleScene.hidden,
#titleScene.hidden .titleHero,
#titleScene.hidden .titleLineup,
#titleScene.hidden .titleRoles,
#titleScene.hidden .titleStart,
.titleNpcRow, .msg {
  display: none !important;
}

/* =========================================================
   2. Hall & Room Backgrounds (그래픽 및 룸 카드 최적화)
========================================================= */
#hallScene {
  background: url("./assets/rooms/hall-opt.webp") center/cover no-repeat !important;
}

#hallScene .floor, #hallScene .counter, .staff {
  display: none !important;
}

#hallScene .roomGrid {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  width: 92% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  z-index: 6 !important;
}

#hallScene .roomBtn {
  height: 58px !important;
  padding: 4px 6px !important; /* 위아래 패딩을 줄여 내부 공간 확보 */
  border: 3px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 244, 218, 0.96) !important;
  backdrop-filter: blur(1px);
  text-align: center;
  font-weight: 1000;
  box-shadow: 0 4px #0005 !important;
  
  /* [핵심 추가] 글씨가 수직 정렬을 유지하며 유연하게 배치되도록 플렉스박스 적용 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

#hallScene .roomIcon {
  display: block;
  font-size: 14px !important; /* 이모지 크기를 아주 살짝 압축 */
  margin-bottom: 0px !important; /* 아이콘과 텍스트 사이 간격 최소화 */
  line-height: 1 !important;
}

/* 방 이름 텍스트 (예: 임상심리실 등) */
#hallScene .roomBtn text, 
#hallScene .roomBtn {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

#hallScene .roomSmall {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important; /* [중요] 모바일 좁은 화면에서 텍스트가 넘치면 한 줄만 보여주고 자르기 */
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  font-size: 8px !important; /* 가독성을 해치지 않는 선에서 폰트 스케일 압축 */
  line-height: 1.1 !important;
  color: #4b2f1d;
  margin-top: 1px !important;
  width: 100% !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.recommended { outline: 3px solid #ffd84f !important; background: #fff0bd !important; }
.secondaryMark { outline: 3px solid #9ed2ff !important; background: #eef7ff !important; }

/* 상담실 전용 설정 */
#roomScene {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
#roomScene.room-clinical { background-image: url("./assets/rooms/clinical-opt.webp") !important; }
#roomScene.room-nurse { background-image: url("./assets/rooms/nurse-opt.webp") !important; }
#roomScene.room-social { background-image: url("./assets/rooms/social-opt.webp") !important; }
#roomScene.room-ot { background-image: url("./assets/rooms/ot-opt.webp") !important; }

#roomScene .wall, #roomScene .wood, #roomScene .bookshelf, #roomScene .table, #roomScene .tableText, .roomNpc, .playerRoom {
  display: none !important;
}

.roomNpcImg {
  position: absolute !important;
  right: 8px !important;
  bottom: 4px !important;
  width: 32% !important;
  max-width: 135px !important;
  max-height: 205px !important;
  object-fit: contain !important;
  z-index: 8 !important;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.24)) !important;
}

body:has(#roomScene:not(.hidden)) .screen {
  flex: 0 0 43dvh !important;
  height: 43dvh !important;
  min-height: 275px !important;
}

/* =========================================================
   3. Dialog & Choices System (하단 대화창 고정 메커니즘)
========================================================= */
.dialog {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: linear-gradient(#432b1b, #2e1d12);
  border-top: 3px solid var(--line) !important;
  padding: 6px 7px !important;
}

.progressBox, .speaker, .textbox {
  flex: 0 0 auto !important;
}

.progressBox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.progressLabel {
  min-width: 46px;
  color: #fff3dc;
  font-size: 10px;
  font-weight: 1000;
}

.progressTrack {
  flex: 1;
  height: 10px;
  overflow: hidden;
  background: #20140d;
  border: 2px solid #070402;
  border-radius: 999px;
}

.progressFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffd84f, #9ed2ff);
}

.speaker {
  margin-bottom: 4px;
  color: var(--gold);
  font-weight: 1000;
  font-size: 13px;
  text-shadow: 1px 1px #000;
}

.textbox {
  background: #fff4da;
  color: #23170f;
  border: 3px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 8px 9px !important;
  font-size: 12px !important;
  line-height: 1.32 !important;
  white-space: pre-line;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

.choices {
  display: grid !important;
  grid-template-columns: 1fr !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding-bottom: 6px !important;
}

.choices:empty {
  display: none !important;
}

.choice {
  width: 100%;
  min-height: 34px !important;
  background: #fff4da;
  color: #23170f;
  border: 2px solid var(--line) !important;
  border-radius: 7px !important;
  padding: 7px 8px !important;
  text-align: left;
  font-size: 11.5px !important;
  line-height: 1.22 !important;
  font-weight: 900;
  box-shadow: 0 4px #0006;
}

.choice:active {
  transform: translateY(2px);
  box-shadow: 0 1px #0006;
}

.navbar {
  flex: 0 0 auto !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px !important;
  margin-top: 6px !important;
}

.navbtn {
  min-height: 31px !important;
  background: #e9cf94;
  color: #23170f;
  border: 2px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 5px 3px !important;
  font-size: 10.5px !important;
  font-weight: 1000;
}

.navbtn:disabled { opacity: 0.45; }
.footer { display: none !important; }

/* =========================================================
   4. Result Screen Design (결과지 및 카드 고도화)
========================================================= */
body:has(#resultScene:not(.hidden)) .screen {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body:has(#resultScene:not(.hidden)) .dialog {
  flex: 0 0 auto !important;
  padding: 6px 7px !important;
}

body:has(#resultScene:not(.hidden)) .progressBox,
body:has(#resultScene:not(.hidden)) .speaker,
body:has(#resultScene:not(.hidden)) .textbox,
body:has(#resultScene:not(.hidden)) .choices {
  display: none !important;
}

body:has(#resultScene:not(.hidden)) .textbox {
  padding: 7px 9px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.paperBg {
  position: absolute;
  inset: 0;
  padding: 6px !important;
  background: linear-gradient(#f7e7be, #e7bf7e);
}

.paper {
  position: relative;
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #fff9ea 0%, #fff1d3 100%) !important;
  border: 3px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px !important;
}

.paper:before {
  content: "RESULT" !important;
  display: block;
  margin: 0 auto 5px;
  width: max-content;
  padding: 3px 9px;
  background: #173b70;
  color: #fff8df;
  border: 2px solid var(--line);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 1000;
}

.resultHero {
  text-align: center !important;
  padding: 6px 4px 10px !important;
}

.resultHero h2 {
  margin: 0 !important;
  font-size: clamp(17px, 5vw, 21px) !important;
  line-height: 1.18 !important;
  color: #24170f !important;
}

.resultSub {
  margin: 8px auto 0 !important;
  color: #3b2a1a !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

.resultShareCard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.resultMainCard, .resultNpcCard, .resultNotice, .reason, .evidence {
  position: relative !important;
  border: 3px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: #21150d !important;
  line-height: 1.45 !important;
  font-size: clamp(11.8px, 3.35vw, 13px) !important;
  box-shadow: 0 4px #0002, inset 0 0 0 2px #ffffff80 !important;
  overflow-wrap: break-word !important;
}

.resultMainCard { background: linear-gradient(180deg, #fff7dc, #ffe9b6) !important; }
.resultNpcCard { background: linear-gradient(180deg, #fbf4ff, #fff7ea) !important; text-align: center !important; }
.reason { background: linear-gradient(180deg, #f3f9ff, #e5f2ff) !important; }
.evidence { background: linear-gradient(180deg, #fff4ff, #f3e6ff) !important; }
.resultNotice { background: #fff8e8 !important; }

.resultRank { color: #4b2f1d !important; font-size: 13px !important; font-weight: 1000 !important; }
.resultExpertName { margin: 5px 0 7px !important; font-size: 20px !important; font-weight: 1000 !important; }
.resultSubExpert { margin: 5px 0 7px !important; font-size: 16px !important; font-weight: 1000 !important; }
.resultDivider { height: 1px !important; margin: 12px 0 !important; border-top: 2px dashed #d8bf8d !important; }

.speechBubble {
  display: inline-block !important;
  position: relative !important;
  margin: 0 auto 10px !important;
  padding: 8px 12px !important;
  border: 2px solid #ccb183 !important;
  border-radius: 12px !important;
  background: #fff8ef !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.speechBubble::after {
  content: "" !important;
  position: absolute !important;
  right: 30px !important;
  bottom: -8px !important;
  width: 14px !important;
  height: 14px !important;
  background: #fff8ef !important;
  border-right: 2px solid #ccb183 !important;
  border-bottom: 2px solid #ccb183 !important;
  transform: rotate(45deg) !important;
}

.resultNpcImg {
  display: block !important;
  width: 78% !important;
  max-width: 260px !important;
  margin: 8px auto 10px !important;
  object-fit: contain !important;
  filter: drop-shadow(6px 8px 0 rgba(0,0,0,0.25)) !important;
}

.resultNpcName { font-size: 19px !important; font-weight: 1000 !important; margin-top: 6px !important; }
.cardTitle { display: block !important; width: max-content; margin: 0 0 7px !important; border-radius: 999px !important; padding: 4px 8px !important; background: #3a2517; color: #fff4da; font-size: 11px; font-weight: 1000; }

.bar { margin: 7px 0 !important; }
.barTop { display: flex; align-items: center; justify-content: space-between; gap: 10px !important; font-size: 11px; font-weight: 1000; }
.track { height: 12px !important; overflow: hidden; background: #ead5a7 !important; border: 2px solid var(--line) !important; border-radius: 999px; }
.fill { height: 100%; }

.copyBtn, .saveBtn, #downloadLink {
  width: 100%;
  min-height: 40px !important;
  color: #fff;
  border: 3px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 9px 10px !important;
  font-weight: 1000;
  text-align: center;
  text-decoration: none;
}
.copyBtn { background: #d76b83; margin-top: 9px; }
.saveBtn { background: #2f70b7; margin-top: 9px; }
#downloadLink { display: none; margin-top: 8px; background: #4d9a45; }

@media (min-width: 430px) {
  .resultShareCard { grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
  .resultMainCard { grid-column: 1 !important; }
  .resultNpcCard { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
  .resultNotice { grid-column: 1 / -1 !important; }
}

/* =========================================================
   5. Modal Popup (선택 내역 팝업 디자인)
========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #0008;
}

.modalCard {
  width: 100%;
  max-width: 420px;
  max-height: 82svh;
  overflow-y: auto;
  background: #fff4da;
  border: 5px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  color: #23170f;
  box-shadow: 0 12px 30px #0009;
}

.modalCard h3 { margin: 0 0 10px; text-align: center; font-weight: 1000; }
.historyList { max-height: 50svh; overflow-y: auto; line-height: 1.6; font-weight: 850; font-size: 13px; }
.closeBtn { width: 100%; min-height: 44px; margin-top: 12px; background: #3a2517; color: #fff4da; border: 3px solid var(--line); border-radius: 8px; font-weight: 1000; }
/* === Title page rebuild === */

#titleScene {
  position: relative;
  overflow: hidden;
}

.titleBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.titleHero,
.titleLineup,
.titleRoles,
.titleStart,
.titleNote {
  position: absolute;
  z-index: 2;
}

.titleHero {
  top: 7%;
  left: 5%;
  right: 5%;
  text-align: center;
}

.titleKicker {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(22px, 6vw, 38px);
  font-weight: 900;
  text-shadow: 0 3px 0 #173e78, 2px 0 0 #173e78, -2px 0 0 #173e78;
}

.titleHero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 9vw, 62px);
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 4px 0 #173e78, 2px 0 0 #173e78, -2px 0 0 #173e78;
}

.titleSub {
  margin: 12px 0 0;
  color: #1d2440;
  font-size: clamp(14px, 3.6vw, 22px);
  font-weight: 800;
}

.titleLineup {
  left: 50%;
  bottom: 31%;
  width: min(96%, 620px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.22));
}

.titleRoles {
  left: 4%;
  right: 4%;
  bottom: 22%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.role {
  padding: 7px 4px;
  border: 2px solid #111;
  border-radius: 8px;
  color: #24170d;
  font-size: clamp(11px, 3vw, 16px);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

.roleClinical { background: #f4daf8; }
.roleSocial { background: #e1f3c4; }
.roleNurse { background: #ffd6d6; }
.roleOt { background: #d9ecff; }

.titleStart {
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  width: min(70%, 360px);
  padding: 14px 18px;
  border: 3px solid #130b05;
  border-radius: 12px;
  background: linear-gradient(#ffe36b, #f4b729);
  color: #2a1605;
  font-size: clamp(20px, 5.5vw, 34px);
  font-weight: 900;
  box-shadow: 0 5px 0 #4b2a0c;
}

.titleNote {
  left: 8%;
  right: 8%;
  bottom: 2%;
  padding: 9px 10px;
  border: 2px solid #8c6a35;
  border-radius: 8px;
  background: rgba(255, 247, 221, 0.92);
  color: #3a210c;
  font-size: clamp(12px, 3.2vw, 16px);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 520px) {
  .titleHero {
    top: 6%;
  }

  .titleLineup {
    bottom: 33%;
    width: 104%;
  }

  .titleRoles {
    bottom: 24%;
    left: 3%;
    right: 3%;
    gap: 4px;
  }

  .titleStart {
    bottom: 11%;
    width: 74%;
  }

  .titleNote {
    bottom: 2%;
  }
}
/* === Title page mobile layout fix === */

body:has(#titleScene:not(.hidden)) .screen {
  flex: 0 0 64dvh !important;
  height: 64dvh !important;
  min-height: 500px !important;
  max-height: none !important;
}

body:has(#titleScene:not(.hidden)) .dialog {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body:has(#titleScene:not(.hidden)) .textbox {
  flex: 0 0 auto !important;
}

body:has(#titleScene:not(.hidden)) .navbar {
  margin-top: auto !important;
}
/* === Title page position override === */

body:has(#titleScene:not(.hidden)) .screen {
  flex: 0 0 66dvh !important;
  height: 66dvh !important;
  min-height: 500px !important;
  max-height: none !important;
}

body:has(#titleScene:not(.hidden)) .dialog {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body:has(#titleScene:not(.hidden)) .textbox {
  flex: 0 0 auto !important;
}

body:has(#titleScene:not(.hidden)) .navbar {
  margin-top: auto !important;
}

body:has(#titleScene:not(.hidden)) .titleHero {
  top: 5% !important;
}

body:has(#titleScene:not(.hidden)) .titleLineup {
  bottom: 32% !important;
  width: min(108%, 680px) !important;
}

body:has(#titleScene:not(.hidden)) .titleRoles {
  bottom: 23% !important;
}

body:has(#titleScene:not(.hidden)) .titleStart {
  bottom: 12% !important;
  width: min(74%, 360px) !important;
  z-index: 8 !important;
}

body:has(#titleScene:not(.hidden)) .titleNote {
  bottom: 2.5% !important;
  z-index: 7 !important;
}
body:has(#titleScene:not(.hidden)) .titleLineup {
  bottom: 27% !important;
  width: min(104%, 660px) !important;
}

body:has(#titleScene:not(.hidden)) .titleStart {
  bottom: 19% !important;
  z-index: 9 !important;
}

body:has(#titleScene:not(.hidden)) .titleNote {
  bottom: 3% !important;
}
/* === Room NPC manual tuning === */

#roomScene .roomNpcImg {
  position: absolute !important;
  z-index: 8 !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  max-width: none !important;

  filter:
    drop-shadow(0 0 1px rgba(255, 255, 245, 1))
    drop-shadow(0 0 4px rgba(255, 250, 220, 1))
    drop-shadow(0 0 9px rgba(255, 232, 160, 0.85))
    drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.42))
    drop-shadow(0 9px 12px rgba(0, 0, 0, 0.28));
}

/* 임상심리실 */
#roomScene.room-clinical .roomNpcImg {
  right: 1% !important;
  bottom: -30px !important;
  width: 60% !important;
  min-width: 145px !important;
  max-width: none !important;
}

/* 간호실 */
#roomScene.room-nurse .roomNpcImg {
  right: 1.5% !important;
  bottom: -10px !important;
  width: 41% !important;
  min-width: 140px !important;
  max-width: none !important;
}

/* 사회사업실 */
#roomScene.room-social .roomNpcImg {
  right: 1.5% !important;
  bottom: -20px !important;
  width: 47% !important;
  min-width: 140px !important;
  max-width: none !important;
}

/* 작업치료실 */
#roomScene.room-ot .roomNpcImg {
  right: 1.5% !important;
  bottom: -15px !important;
  width: 41% !important;
  min-width: 140px !important;
  max-width: none !important;
}

@media (max-width: 520px) {
  /* 임상심리실 모바일 */
  #roomScene.room-clinical .roomNpcImg {
    right: 1% !important;
    bottom: -30px !important;
    width: 60% !important;
    min-width: 145px !important;
    max-width: none !important;
  }

  /* 간호실 모바일 */
  #roomScene.room-nurse .roomNpcImg {
    right: 1.5% !important;
    bottom: -10px !important;
    width: 41% !important;
    min-width: 140px !important;
    max-width: none !important;
  }

  /* 사회사업실 모바일 */
  #roomScene.room-social .roomNpcImg {
    right: 1.5% !important;
    bottom: -20px !important;
    width: 47% !important;
    min-width: 140px !important;
    max-width: none !important;
  }

  /* 작업치료실 모바일 */
  #roomScene.room-ot .roomNpcImg {
    right: 1.5% !important;
    bottom: -15px !important;
    width: 41% !important;
    min-width: 140px !important;
    max-width: none !important;
  }
}
/* === Room NPC floor shadow: 원근감 추가 === */

#roomScene::after {
  content: "";
  position: absolute;
  z-index: 7;

  right: 3%;
  bottom: 2px;

  width: 34%;
  height: 22px;

  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.24) 42%,
    rgba(0, 0, 0, 0) 72%
  );

  filter: blur(2px);
  pointer-events: none;
}

/* 방별 바닥 그림자 위치 조정 */
#roomScene.room-clinical::after {
  right: 1%;
  bottom: 3px;
  width: 40%;
  height: 24px;
}

#roomScene.room-nurse::after {
  right: 2%;
  bottom: 3px;
  width: 35%;
  height: 22px;
}

#roomScene.room-social::after {
  right: 2%;
  bottom: 3px;
  width: 37%;
  height: 22px;
}

#roomScene.room-ot::after {
  right: 2%;
  bottom: 3px;
  width: 35%;
  height: 22px;
}
/* === Room NPC back shadow gradient === */

#roomScene::before {
  content: "";
  position: absolute;
  z-index: 7;
  pointer-events: none;

  right: 0%;
  bottom: 0;

  width: 44%;
  height: 48%;

  border-radius: 999px 999px 0 0;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.32) 34%,
    rgba(0, 0, 0, 0.18) 56%,
    rgba(0, 0, 0, 0) 76%
  );

  filter: blur(3px);
}
#roomScene.room-clinical::before {
  right: -6%;
  bottom: -2px;
  width: 58%;
  height: 54%;
}

#roomScene.room-nurse::before {
  right: -1%;
  bottom: 0;
  width: 41%;
  height: 46%;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.18) 36%,
    rgba(0, 0, 0, 0.08) 58%,
    rgba(0, 0, 0, 0) 76%
  );

  filter: blur(4px);
}
#roomScene.room-social::before {
  right: -1%;
  bottom: 0;
  width: 46%;
  height: 48%;
}

#roomScene.room-ot::before {
  right: -1%;
  bottom: 0;
  width: 43%;
  height: 48%;
}
/* =========================================================
   RESULT OVERRIDE: 공동 추천 결과 카드 충돌 방지
   - 새 JS 구조 전용
   - 기존 resultNpcCard / speechBubble / PC 2열 강제 규칙 무력화
========================================================= */

body:has(#resultScene:not(.hidden)) .resultShareCard {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  grid-template-columns: none !important;
}

body:has(#resultScene:not(.hidden)) .resultMainCard,
body:has(#resultScene:not(.hidden)) .primaryResultSection,
body:has(#resultScene:not(.hidden)) .considerationSection,
body:has(#resultScene:not(.hidden)) .evidence,
body:has(#resultScene:not(.hidden)) .resultNotice {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
}

/* 가장 잘 맞는 전문가: 공동 1위면 PC 2열, 모바일 1열 */
.primaryExpertGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.primaryExpertCard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;

  border: 3px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, #fffdf4, #fff1d3) !important;
  color: #21150d !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 2px #ffffff80 !important;
}

/* 기존 .speechBubble 충돌 피하기: 새 말풍선 전용 */
.primaryExpertBubble {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto 12px !important;
  padding: 9px 12px !important;
  border: 2px solid #ccb183 !important;
  border-radius: 12px !important;
  background: #fff8ef !important;
  color: #2b160c !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  transform: none !important;
}

.primaryExpertBubble::after {
  content: "" !important;
  position: absolute !important;
  right: 30px !important;
  bottom: -8px !important;
  width: 14px !important;
  height: 14px !important;
  background: #fff8ef !important;
  border-right: 2px solid #ccb183 !important;
  border-bottom: 2px solid #ccb183 !important;
  transform: rotate(45deg) !important;
}

/* 결과 카드 안 이미지: 방 NPC absolute 규칙 완전 차단 */
.primaryExpertImageBox {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  margin: 4px auto 10px !important;
  overflow: visible !important;
}

.primaryExpertCharacter {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 170px !important;
  max-height: 175px !important;
  min-width: 0 !important;

  object-fit: contain !important;
  object-position: center bottom !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.22)) !important;
  image-rendering: pixelated !important;
  z-index: auto !important;
}

.primaryExpertName {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 8px !important;
  color: #21150d !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

.primaryExpertDesc {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  color: #21150d !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

.primaryReasonBox {
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  padding: 10px !important;
  border: 2px solid rgba(60, 36, 20, 0.28) !important;
  border-radius: 10px !important;
  background: rgba(255, 248, 224, 0.85) !important;
  color: #21150d !important;
  text-align: left !important;
}

.primaryReasonBox .cardTitle {
  margin-bottom: 7px !important;
}

.primaryReasonBox ul {
  margin: 6px 0 0 !important;
  padding-left: 18px !important;
}

.primaryReasonBox li {
  margin: 4px 0 !important;
  color: #21150d !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* 함께 고려 카드 */
.considerationGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

.considerationCard {
  border: 3px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, #f3f9ff, #e5f2ff) !important;
  color: #21150d !important;
  box-shadow: inset 0 0 0 2px #ffffff80 !important;
}

.considerationName {
  margin-bottom: 7px !important;
  color: #21150d !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  line-height: 1.35 !important;
}

.considerationReason {
  margin-top: 8px !important;
  color: #21150d !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* PC 폭에서 결과지만 조금 넓게 */
@media (min-width: 760px) {
  .app {
    max-width: 760px !important;
  }

  body:has(#resultScene:not(.hidden)) .app {
    max-width: 820px !important;
  }

  .primaryExpertGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .considerationGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 모바일에서는 무조건 1열 */
@media (max-width: 640px) {
  .primaryExpertGrid,
  .considerationGrid {
    grid-template-columns: 1fr !important;
  }

  .primaryExpertImageBox {
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
  }

  .primaryExpertCharacter {
    max-width: 150px !important;
    max-height: 160px !important;
  }

  .primaryExpertName {
    font-size: 17px !important;
  }

  .primaryExpertDesc,
  .primaryReasonBox li,
  .considerationReason {
    font-size: 11.5px !important;
  }
}
/* =========================================================
   NEW RESULT PAGE OVERRIDE
   기존 resultNpcCard / speechBubble / resultShareCard 충돌 회피
========================================================= */

body:has(#resultScene:not(.hidden)) .resultShareCard {
  display: block !important;
  grid-template-columns: none !important;
}

.mhResultWrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.mhResultSection {
  width: 100% !important;
  border: 3px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, #fff7dc, #ffe9b6) !important;
  box-shadow: 0 4px #0002, inset 0 0 0 2px #ffffff80 !important;
}

.mhSectionTitle {
  display: inline-block !important;
  margin: 0 0 10px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #3a2517 !important;
  color: #fff4da !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

.mhResultExpertGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.mhResultExpertCard {
  border: 3px solid var(--accent, var(--line)) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: #fffdf4 !important;
  color: #21150d !important;
  text-align: center !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 2px #ffffff90 !important;
}

.mhResultTag {
  display: inline-block !important;
  margin: 0 auto 9px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: var(--accent, #3a2517) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.mhResultBubble {
  display: inline-block !important;
  position: relative !important;
  max-width: 100% !important;
  margin: 0 auto 12px !important;
  padding: 9px 12px !important;
  border: 2px solid #ccb183 !important;
  border-radius: 12px !important;
  background: #fff8ef !important;
  color: #2b160c !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.mhResultBubble::after {
  content: "" !important;
  position: absolute !important;
  right: 30px !important;
  bottom: -8px !important;
  width: 14px !important;
  height: 14px !important;
  background: #fff8ef !important;
  border-right: 2px solid #ccb183 !important;
  border-bottom: 2px solid #ccb183 !important;
  transform: rotate(45deg) !important;
}

.mhResultImgWrap {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin: 2px auto 10px !important;
}

.mhResultCharacter {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 185px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.22)) !important;
  image-rendering: pixelated !important;
}

.mhResultExpertName {
  margin: 6px 0 8px !important;
  color: #21150d !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

.mhResultDesc {
  margin: 0 0 12px !important;
  color: #21150d !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  word-break: keep-all !important;
}

.mhResultReason {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border: 2px solid rgba(60, 36, 20, 0.28) !important;
  border-radius: 10px !important;
  background: rgba(255, 248, 224, 0.9) !important;
  color: #21150d !important;
  text-align: left !important;
}

.mhResultReasonTitle {
  display: inline-block !important;
  margin: 0 0 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #3a2517 !important;
  color: #fff4da !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
}

.mhResultReason ul {
  margin: 6px 0 0 !important;
  padding-left: 18px !important;
}

.mhResultReason li {
  margin: 4px 0 !important;
  color: #21150d !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.mhConsiderGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.mhConsiderCard {
  border: 3px solid var(--accent, var(--line)) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, #f3f9ff, #e5f2ff) !important;
  color: #21150d !important;
  box-shadow: inset 0 0 0 2px #ffffff90 !important;
}

.mhConsiderName {
  margin-bottom: 7px !important;
  color: #21150d !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  line-height: 1.35 !important;
}

.mhConsiderDesc {
  color: #21150d !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.mhConsiderReason {
  margin-top: 8px !important;
  color: #21150d !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* PC: 결과 화면에서는 조금 더 넓게, 공동 추천은 2열 */
@media (min-width: 760px) {
  body:has(#resultScene:not(.hidden)) .app {
    max-width: 820px !important;
  }

  .mhResultExpertGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mhConsiderGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mhResultImgWrap {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .mhResultCharacter {
    max-width: 200px !important;
    max-height: 205px !important;
  }
}

/* 모바일: 무조건 1열, 이미지 작게 */
@media (max-width: 640px) {
  .mhResultExpertGrid,
  .mhConsiderGrid {
    grid-template-columns: 1fr !important;
  }

  .mhResultImgWrap {
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
  }

  .mhResultCharacter {
    max-width: 150px !important;
    max-height: 160px !important;
  }

  .mhResultExpertName {
    font-size: 17px !important;
  }

  .mhResultDesc,
  .mhResultReason li,
  .mhConsiderDesc,
  .mhConsiderReason {
    font-size: 11.5px !important;
  }
}
/* 결과 전문가 카드 정렬 보정 */

.mhResultExpertCard {
  display: flex !important;
  flex-direction: column !important;
  min-height: 620px !important;
}

.mhResultTag {
  align-self: center !important;
  margin: 0 auto 8px !important;
}

.mhResultBubble {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 48px !important;
  margin: 0 auto 12px !important;

  text-align: center !important;
  word-break: keep-all !important;
}

.mhResultBubble::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

.mhResultImgWrap {
  flex: 0 0 190px !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
}

.mhResultExpertName {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mhResultDesc {
  min-height: 58px !important;
}

.mhResultReason {
  margin-top: auto !important;
  min-height: 96px !important;
}

/* PC에서는 카드 높이와 이미지 영역을 더 안정적으로 */
@media (min-width: 760px) {
  .mhResultExpertCard {
    min-height: 640px !important;
  }

  .mhResultImgWrap {
    flex-basis: 210px !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .mhResultBubble {
    min-height: 52px !important;
  }

  .mhResultDesc {
    min-height: 66px !important;
  }

  .mhResultReason {
    min-height: 110px !important;
  }
}

/* 모바일에서는 너무 길어지지 않게 */
@media (max-width: 640px) {
  .mhResultExpertCard {
    min-height: auto !important;
  }

  .mhResultBubble {
    min-height: 44px !important;
  }

  .mhResultImgWrap {
    flex-basis: 165px !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
  }

  .mhResultExpertName,
  .mhResultDesc,
  .mhResultReason {
    min-height: 0 !important;
  }
}
@media (min-width: 760px) {
  .app,
  body:has(#resultScene:not(.hidden)) .app {
    max-width: 520px !important;
  }

  .mhResultExpertGrid,
  .mhConsiderGrid {
    grid-template-columns: 1fr !important;
  }
}
.capture-hide{
    display:none !important;
}
.resultCredits {
  margin: 10px 0 4px;
  padding-top: 9px;
  border-top: 2px dashed #d8bf8d;
  color: #5a3a22;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 850;
}

.resultCreditLink {
  display: inline-block;
  margin-left: 3px;
  color: #3a2517;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 10.5px;
  font-weight: 950;
}

.resultCreditLink:active {
  transform: translateY(1px);
}

/* 모바일 대화창: 설명만 스크롤, 선택지/하단 버튼 고정 */
.dialog {
  min-height: 0 !important;
}

.textbox {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.choices {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.choice {
  min-height: 34px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

.navbar {
  flex: 0 0 auto !important;
}
/* 접수직원 말풍선 - 삼각 꼬리 버전 */
#hallScene .staffBubble {
  position: absolute;
  left: 43%;
  top: 48px;
  transform: translateX(-100%);
  z-index: 7;
  width: 136px;
  padding: 6px 8px;
  background: #fff8e8;
  color: #2a1b12;
  border: 2px solid #2a1b12;
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 900;
  text-align: left;
  pointer-events: none;
}

#hallScene .staffBubble span {
  display: block;
  white-space: nowrap;
}

/* 꼬리 바깥 테두리 */
#hallScene .staffBubble::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #2a1b12;
}

/* 꼬리 안쪽 색 */
#hallScene .staffBubble::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 17px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #fff8e8;
}

.resultShareBtn {
  display: block;
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 12px auto 0;
  padding: 12px 14px;
  border: 3px solid #2a170d;
  border-radius: 8px;
  background: #fee500;
  color: #2a170d;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 4px 0 #2a170d;
  cursor: pointer;
}

.resultShareBtn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2a170d;
}

@media (max-height: 700px) {
  .app {
    padding-top: max(2px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(2px + var(--safe-bottom));
  }

  .top {
    flex-basis: 32px;
    height: 32px;
    font-size: 12px;
  }

  .screen {
    flex-basis: clamp(190px, 36dvh, 280px);
    height: clamp(190px, 36dvh, 280px);
    min-height: 190px;
  }

  body:has(#roomScene:not(.hidden)) .screen {
    flex-basis: clamp(205px, 38dvh, 285px) !important;
    height: clamp(205px, 38dvh, 285px) !important;
    min-height: 205px !important;
  }

  .dialog {
    gap: 4px !important;
    padding: 4px 5px !important;
  }

  .textbox {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  .choices {
    gap: 4px !important;
  }

  .choice {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}
.paperBg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.resultShareBtn {
  flex: 0 0 auto;
  display: block;
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 3px solid #2a170d;
  border-radius: 8px;
  background: #fee500;
  color: #2a170d;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 4px 0 #2a170d;
  cursor: pointer;
}

.resultShareBtn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2a170d;
}
.titleCredits {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: #7a6a5a;
}

.titleCredits a {
  color: inherit;
  text-decoration: underline;
}
/* =========================================================
   FIX: 첫 화면이 높이가 작은 기기에서 잘리는 문제
========================================================= */

body:has(#titleScene:not(.hidden)) .screen {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body:has(#titleScene:not(.hidden)) .dialog {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 5px 7px !important;
}

/* 첫 화면에서는 사용하지 않는 대화 UI를 감춰 공간 확보 */
body:has(#titleScene:not(.hidden)) .progressBox,
body:has(#titleScene:not(.hidden)) .speaker,
body:has(#titleScene:not(.hidden)) .textbox,
body:has(#titleScene:not(.hidden)) .choices,
body:has(#titleScene:not(.hidden)) .navbar {
  display: none !important;
}

body:has(#titleScene:not(.hidden)) .titleHero {
  top: clamp(12px, 5%, 26px) !important;
}

body:has(#titleScene:not(.hidden)) .titleLineup {
  top: auto !important;
  bottom: 28% !important;
  width: min(104%, 660px) !important;
  max-width: none !important;
  max-height: 45% !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
}

body:has(#titleScene:not(.hidden)) .titleStart {
  bottom: 15% !important;
  width: min(74%, 360px) !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: clamp(14px, 4vw, 18px) !important;
}

body:has(#titleScene:not(.hidden)) .titleNote {
  bottom: 2.5% !important;
}

/* 화면 높이가 작은 휴대폰과 가로 화면 */
@media (max-height: 700px) {
  body:has(#titleScene:not(.hidden)) .titleHero {
    top: 8px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleKicker {
    font-size: 13px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleHero h1 {
    font-size: clamp(19px, 6vw, 24px) !important;
    line-height: 1.1 !important;
  }

  body:has(#titleScene:not(.hidden)) .titleSub {
    margin-top: 3px !important;
    font-size: 10px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleLineup {
    bottom: 29% !important;
    max-height: 41% !important;
  }

  body:has(#titleScene:not(.hidden)) .titleStart {
    bottom: 16% !important;
    min-height: 34px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleNote {
    bottom: 2% !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body:has(#titleScene:not(.hidden)) .titleCredits {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}
/* 첫 화면 대화창 다시 표시 */
body:has(#titleScene:not(.hidden)) .progressBox {
  display: flex !important;
}

body:has(#titleScene:not(.hidden)) .speaker {
  display: block !important;
}

body:has(#titleScene:not(.hidden)) .textbox {
  display: block !important;
  flex: 0 0 auto !important;
}

body:has(#titleScene:not(.hidden)) .navbar {
  display: grid !important;
  margin-top: 6px !important;
}

/* 선택지가 비어 있을 때는 숨김 유지 */
body:has(#titleScene:not(.hidden)) .choices:empty {
  display: none !important;
}
/* 첫 화면 대기·안내·메뉴 복원 */
body:has(#titleScene:not(.hidden)) .progressBox {
  display: flex !important;
}

body:has(#titleScene:not(.hidden)) .speaker,
body:has(#titleScene:not(.hidden)) .textbox {
  display: block !important;
}

body:has(#titleScene:not(.hidden)) .textbox {
  flex: 0 0 auto !important;
}

body:has(#titleScene:not(.hidden)) .navbar {
  display: grid !important;
  margin-top: 6px !important;
}

body:has(#titleScene:not(.hidden)) .choices:empty {
  display: none !important;
}
/* 모바일: 시작 버튼과 하단 안내문 겹침 방지 */
@media (max-width: 480px) {
  body:has(#titleScene:not(.hidden)) .titleNote {
    bottom: 8px !important;
    left: 7% !important;
    right: 7% !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body:has(#titleScene:not(.hidden)) .titleStart {
    bottom: 76px !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleLineup {
    bottom: 31% !important;
  }
}
/* 모바일: 안내문 글씨 복원 + 시작 버튼 위로 이동 */
@media (max-width: 480px) {
  body:has(#titleScene:not(.hidden)) .titleNote {
    bottom: 8px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body:has(#titleScene:not(.hidden)) .titleStart {
    bottom: 92px !important;
    min-height: 40px !important;
    font-size: 15px !important;
  }

  body:has(#titleScene:not(.hidden)) .titleLineup {
    bottom: 34% !important;
  }
}