/* ═══════════════════════════════════════════════════════════════════
   홍연 — 폰 화면 (2026-10-06)
   PC 화면(style.css)은 그대로 두고, 폭 1,219px 이하에서만 덮어쓴다.
   - 왼쪽 메뉴 → ☰ 버튼으로 여닫는 옆 메뉴
   - 오른쪽 광고 칸은 숨긴다 (폰 광고는 애드센스 승인 뒤에 따로)
   - 게임 코드가 칸 수를 style 속성으로 박아 둔 곳이 많아서, 그건 !important 로 덮는다
   ═══════════════════════════════════════════════════════════════════ */
#burger,#navdim{display:none}

@media (max-width:1219px){
  html,body{height:auto}
  body{overflow:auto;font-size:14px}
  #narrow{display:none !important}
  #app{display:block !important;min-width:0;height:auto;min-height:100vh}

  /* ── 옆 메뉴 ── */
  nav{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:60;overflow-y:auto;
      transform:translateX(-100%);transition:transform .2s ease;padding:16px 0 12px;
      box-shadow:none}
  body.navopen nav{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  #navdim{position:fixed;inset:0;z-index:55;background:rgba(40,32,28,.38)}
  body.navopen #navdim{display:block}
  nav button{padding:12px 20px}

  /* ── 위쪽 줄: ☰ · 화면 이름 · 재화 / 아래 줄: 이름 · 명예 · 순위 ── */
  header{position:sticky;top:0;z-index:40;height:auto;flex:0 0 auto;flex-wrap:wrap;
         gap:4px 10px;padding:8px 12px}
  #burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
          margin-left:-4px;border:1px solid var(--line2);border-radius:8px;background:var(--card);
          font-size:18px;color:var(--ink);cursor:pointer;order:0}
  header .crumb{order:1;font-size:14px;color:var(--ink);font-family:'Gowun Batang',serif;flex-grow:1}
  header>span[style*="flex-grow:1"]{display:none}
  header .coin{order:2;gap:4px;font-size:13px}
  header .coin .sub{display:none}
  header .coin i{width:11px;height:11px}
  header>.mehead,header>.sub,header>b{order:3;font-size:12px}
  header>.mehead b,header>b{font-size:13px}
  header .crumb + .mehead{margin-left:0}

  /* ── 본문 ── */
  main{display:block;min-height:100vh}
  #view{padding:12px;overflow:visible}
  #view>.fill{height:auto;min-height:calc(100svh - 110px)}
  #rail{display:none !important}

  /* 게임 코드가 박아 둔 칸 수를 폰 폭에 맞게 */
  /*   5칸(캐릭터 · 모집 결과 · 합성) → 3칸 / 4칸(스토리 · 인벤토리 등) → 2칸 / 3칸(던전 전장) → 1칸 */
  #view [style*="grid-template-columns:repeat(5"],
  #view [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  #view [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #view [style*="grid-template-columns:repeat(3"]{grid-template-columns:minmax(0,1fr) !important}
  /* 나란히 놓인 패널은 위아래로 */
  #view [style*="display:flex;gap:18px"],
  .twocol{flex-direction:column !important;gap:12px !important}
  #view [style*="display:flex;gap:18px"]>*,
  .twocol>*{width:100% !important;min-width:0 !important;flex:0 0 auto !important;max-width:100% !important}
  /* 고정 폭 칸 풀기 */
  #view [style*="width:3"],#view [style*="width:4"],#view [style*="width:5"]{max-width:100%}

  /* 한 줄에 버튼 · 선택칸을 늘어놓은 패널은 넘치면 다음 줄로 (전투 화면 맨 위 줄 등) */
  #view .panel[style*="display:flex"]{flex-wrap:wrap}
  #view select{max-width:100%}
  .panel{border-radius:10px}
  h2.t{font-size:17px}
  .btn{height:44px}
  .btn.sm{height:34px}
  table.s th{width:auto}
  .tabs{flex-wrap:wrap}

  /* 세로 그림(2:3) — PC 는 "높이 100%" 로 칸을 채우는데, 폰은 칸 높이가 정해지지 않아 그림이 넘쳤다.
     폭에 맞추고 높이는 비율대로 (모집 배너 · 캐릭터 상세) */
  #view .sil[style*="aspect-ratio:2/3"]{height:auto !important;width:100% !important;max-height:70vh}
  #view div[style*="flex-grow:1;min-height:180px"]{flex:0 0 auto !important;min-height:0 !important}
  /* 세로로 쌓는 flex 패널 안에서는 크롬이 비율 그림 높이를 0 으로 잡아 그림이 칸 밖으로 넘쳤다 → 폰에서는 그냥 블록으로 */
  #view .panel[style*="flex-direction:column"]{display:block !important}

  /* 부대 편성판 3x3 — 폰 폭에 맞게 */
  .board{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:8px;width:100%}
  .board .cell{aspect-ratio:1/1}
  .cell .face{width:52px;height:52px}
  .pick{flex:0 0 auto;width:100%}

  /* 로비 — 2026-10-06 사장님 폰 확인 뒤 바꿈 (TODO 29-1):
     방치 보상 창은 아래로, "로비 캐릭터 변경" 버튼은 오른쪽 위로 (이름은 그 왼쪽). PC 로비는 그대로. */
  .lobby .idle{left:12px;right:12px;top:auto;bottom:12px;width:auto;padding:12px 14px}
  .lobby .idle .amt .disp{font-size:28px}
  .lobby .foot{left:12px;right:12px;top:12px;bottom:auto;flex-wrap:nowrap;gap:8px}
  .lobby .foot .who{font-size:22px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lobby .foot .btn{flex:0 0 auto;height:38px;padding:0 12px;font-size:13px}

  /* 진형 그림 */
  .basefo .mini{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}

  /* 전투 재생판 — 세로로 쌓이니 폭 기준으로. 칸 내용이 넓어도 칸이 화면 밖으로 안 밀리게 minmax(0,…) */
  .bboard{max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bboard .bc.use{padding:5px 3px;gap:3px}
  .bboard .fc{width:30px;height:30px}
  .bboard .nm{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 전투 기록 글 — PC 는 남는 높이를 채우는데 폰은 남는 높이가 없어서 34px 로 쪼그라들었다 */
  #log{min-height:40vh !important;max-height:55vh;flex:0 0 auto !important}

  /* 창 · 알림 */
  .modal{align-items:flex-end}
  .modal .box{width:100%;max-width:560px;max-height:88vh;border-radius:14px 14px 0 0;padding:18px 16px}
  .toast{bottom:20px;max-width:calc(100vw - 32px);text-align:center}
}