/* css/mobile.css — 아이폰(모바일 사파리·PWA) 대응. 데스크톱 규칙은 건드리지 않고 덮어쓰기만 한다.
   - 안전 영역(노치·다이내믹 아일랜드·홈 인디케이터): viewport-fit=cover + env(safe-area-inset-*)
   - 터치: 확대·튕김·길게 누르기 메뉴 방지, 버튼 최소 44px, 붙는 호버 제거
   - '낮은 높이 가로'(아이폰 가로 852×393 등): 2열 — 왼쪽 무대+메뉴(고정), 오른쪽 정보 패널(스크롤)
   - 세로로 들면 '가로로 돌려 주세요' 안내 (iOS PWA는 방향 고정이 강제되지 않음) */
:root{
  --sa-t:env(safe-area-inset-top,0px); --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px);
}
html,body{touch-action:manipulation; overscroll-behavior:none; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{min-height:100vh; min-height:100dvh;
  padding-top:max(12px, var(--sa-t)); padding-right:max(12px, var(--sa-r)); padding-bottom:max(12px, var(--sa-b)); padding-left:max(12px, var(--sa-l));}
img{-webkit-touch-callout:none; -webkit-user-drag:none;}
.g3-host{touch-action:none;}   /* 3D 탐험: 핀치 줌·탭은 게임이 처리 */
.bgm-ctrl{right:calc(8px + var(--sa-r));}
@media(max-width:900px){ .bgm-ctrl{top:calc(8px + var(--sa-t));} }
@media(min-width:901px){ .bgm-ctrl{bottom:calc(8px + var(--sa-b));} }
.toast{bottom:calc(22px + var(--sa-b));}
.modal-layer{padding:max(12px, var(--sa-t)) max(12px, var(--sa-r)) max(12px, var(--sa-b)) max(12px, var(--sa-l));}
.modal-box{max-height:calc(100dvh - 24px - var(--sa-t) - var(--sa-b));}

/* ── 터치 기기 */
@media (hover:none), (pointer:coarse){
  body{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
  input,textarea,[contenteditable]{-webkit-user-select:text; user-select:text;}
  input[type=text],input:not([type]),textarea,select{font-size:16px !important;}   /* 포커스 자동 확대 방지 */
  .mi,.pm-btn,.li,.tab{min-height:44px;}
  .pm-btn.xs{min-height:44px; min-width:44px;}
  .bgm-ctrl button{min-width:44px; min-height:44px;}
  .dpad{grid-template-columns:repeat(3,46px) !important; grid-template-rows:repeat(3,44px) !important;}
  /* 붙는 호버 없애기 */
  .pm-btn:hover:not(:disabled){transform:none;}
  .pm-btn:active:not(:disabled){transform:translateY(2px);}
  .mi:hover{background:linear-gradient(180deg,#2a0a18,#1a0610); color:var(--parch);}
  .mi:active{background:linear-gradient(180deg,#7a1e40,#4a1028); color:var(--gold-lt);}
}

/* ── 낮은 높이 가로(아이폰 가로) */
@media (orientation:landscape) and (max-height:500px){
  body{padding:max(4px, var(--sa-t)) max(6px, var(--sa-r)) max(4px, var(--sa-b)) max(6px, var(--sa-l));}
  #screen{width:100%;}
  #game{grid-template-columns:minmax(0,1fr) clamp(220px, 34vw, 290px); max-width:none; margin:0; gap:6px;}
  #game > .col.center{grid-column:1; grid-row:1 / span 2; order:0; position:sticky; top:max(4px, var(--sa-t)); gap:6px;}
  /* 왼쪽 열은 화면 높이를 넘으면 자체 스크롤(고정 열이라 페이지 스크롤로는 아래가 안 보임) */
  #game > .col.center{max-height:calc(100dvh - 8px - var(--sa-t) - var(--sa-b)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;}
  #game > .col.center::-webkit-scrollbar{display:none;}
  /* 탐험: 막대 | 버튼 | 방향 패드 3칸 — 패널이 높으니 무대를 조금 줄인다 */
  #game .col.center:has(.ex-panel) .stage{width:min(100%, calc((100dvh - 158px - var(--sa-t) - var(--sa-b)) * 16 / 9));}
  .ex-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; grid-template-rows:auto; gap:4px 6px;}
  .ex-panel .ex-bars{grid-column:1; grid-row:1;}
  .ex-panel .ex-btns{grid-column:2; grid-row:1; display:grid; grid-template-columns:1fr 1fr; gap:3px;}
  .ex-panel .ex-btns .pm-btn{padding:2px 3px; font-size:10px; letter-spacing:0;}
  .ex-panel .dpad{grid-column:3; grid-row:1;}
  .exbar .num{width:44px;}
  /* 배틀 명령: 한 줄 */
  .bt-cmds{flex-wrap:nowrap; gap:4px;}
  .bt-cmds .pm-btn{flex:1 1 0; min-width:0; padding:4px 4px; font-size:13px; letter-spacing:0;}
  .bt-cmds .pm-btn small{font-size:9px;}
  #game > .col.left{grid-column:2; grid-row:1; order:0;}
  #game > .col.right{grid-column:2; grid-row:2; order:0;}
  #game .col{gap:6px;}
  /* 무대: 화면 높이 안에 들어오게(메뉴 막대 두 줄 약 100px + 여백 남김) */
  #game .stage{width:min(100%, calc((100dvh - 116px - var(--sa-t) - var(--sa-b)) * 16 / 9)); height:auto; aspect-ratio:16/9; margin:0 auto;}
  .menu-bar{padding:4px;}
  .menu-grid{grid-template-columns:repeat(9,1fr) !important; gap:3px;}
  .menu-grid .mi{font-size:10px; padding:3px 1px; gap:0; min-height:46px; line-height:1.15; word-break:keep-all; text-align:center;}
  .menu-grid .mi .mic{font-size:17px;}
  .datebox{padding:4px 6px;} .datebox .big{font-size:30px !important;}
  .msg{min-height:0;} .msg .portrait{flex-basis:54px; height:66px;} .msg .mtext{max-height:150px;}
  .pm-frame{padding:6px;}
  /* BGM 조절: 오른쪽 위 작은 음소거 버튼만(음량은 시스템 → 옵션) */
  .bgm-ctrl{top:calc(2px + var(--sa-t)); right:calc(2px + var(--sa-r)); bottom:auto; padding:0 2px; opacity:.85;}
  .bgm-ctrl button{font-size:15px;}
  .bgm-ctrl input[type=range]{display:none;}
  .toast{bottom:calc(10px + var(--sa-b)); max-width:80vw;}
  /* 모달·대화창: 낮은 화면 */
  .modal-layer{padding:max(4px, var(--sa-t)) max(8px, var(--sa-r)) max(4px, var(--sa-b)) max(8px, var(--sa-l));}
  .modal-box{max-height:calc(100dvh - 8px - var(--sa-t) - var(--sa-b)); padding:8px !important;}
  /* 모달 아래 버튼줄(실행·닫기 등)은 스크롤해도 늘 보이게 */
  .modal-box > .m-foot{position:sticky; bottom:-8px; z-index:5; margin:0 -8px -8px; padding:6px 8px 8px;
    background:linear-gradient(180deg,rgba(61,13,30,.85),var(--red2) 40%); border-top:1px solid var(--gold-dk);}
  .dlg-portrait{flex-basis:76px; height:92px;}
  .dlg-text{font-size:13px; line-height:1.6; padding:8px 10px; min-height:56px;}
  .dlg-cg{aspect-ratio:16/5;}
}

/* ── PWA 새 버전 배너(ui/pwa.js) */
.pwa-update{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + var(--sa-b)); z-index:400; display:flex; align-items:center; gap:8px;
  background:#1a0610; color:var(--gold-lt); border:2px solid var(--gold); border-radius:6px; padding:6px 10px; font-size:13px; box-shadow:0 6px 18px #000; white-space:nowrap;}

/* ── 세로로 든 폰: 가로로 돌려 달라는 안내 */
.rotate-hint{display:none;}
@media (orientation:portrait) and (pointer:coarse) and (max-width:600px){
  .rotate-hint{display:flex; position:fixed; inset:0; z-index:1000; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:radial-gradient(circle at 50% 40%, #3a1028 0, #1a0612 70%, #0a0208 100%); color:var(--gold-lt); font-size:16px; text-align:center; padding:24px;}
  .rotate-hint .rh-icon{font-size:56px; animation:rh-turn 1.8s ease-in-out infinite;}
  .rotate-hint small{color:var(--parch-dk); font-size:12px;}
}
@keyframes rh-turn{0%,20%{transform:rotate(0)} 60%,100%{transform:rotate(-90deg)}}