/* 공통 설명 본문: 효과 확인, 턴 종료, 항복, 도움말에서 함께 사용한다. */
.modal-copy { font-size:14px; line-height:1.65; margin-bottom:8px; }
.modal-copy.confirm-copy { max-width:420px; font-size:15px; }
.modal-copy.help-copy { font-size:13px; line-height:1.9; }
.modal-note { font-size:12px; line-height:1.5; color:#9aa4bd; margin-bottom:8px; }

/* 작은 세로 화면과 높이가 낮은 가로 화면 모두 같은 창 크기 기준을 쓴다. */
@media (max-width:820px), (max-height:540px) {
  body.modal-open #inspector { position:static; z-index:auto; }
  #modal-overlay { padding:8px 8px 8px 48px; }
  #modal-overlay:has(#modal-visibility-toggle[hidden]) { padding-left:8px; }
  #modal-shell {
    display:flex; width:min(720px,100%); max-width:100%; max-height:100%; min-height:0;
  }
  #modal-shell #modal-box {
    width:100%; min-width:0; min-height:0; max-width:100%; max-height:100%;
    padding:12px; font-size:13px; line-height:1.5; overflow:auto; overflow-wrap:anywhere;
    overscroll-behavior:contain; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  #modal-box h3 { font-size:15px; line-height:1.4; margin-bottom:8px; }
  #modal-box .modal-copy { font-size:13px; line-height:1.55; }
  #modal-box .modal-note { font-size:11px; line-height:1.4; margin-bottom:6px; }
  #modal-visibility-toggle { left:-42px; width:38px; height:38px; }
  #modal-shell.has-chain #modal-box { padding-top:54px; }
  #btn-modal-chain { top:6px; right:6px; min-height:40px; font-size:12px; }
  #modal-box .modal-btns { gap:6px; margin-top:10px; }
  #modal-box .modal-btns button {
    min-width:40px; min-height:40px; max-width:100%; padding:7px 10px;
    font-size:13px; line-height:1.4; white-space:normal; overflow-wrap:anywhere;
  }
  #modal-box .modal-cards { gap:6px; }
  #modal-box .modal-cards .card-mini { width:64px; height:90px; flex-shrink:0; }
  #modal-box .modal-cards .cm-name { font-size:8px; }
  #modal-box .modal-btns .card-option { width:104px; gap:5px; padding:5px; }
  #modal-box .option-label { font-size:12px; }
  #modal-box .option-unit-owner { font-size:10px; }
  #modal-box .card-option .option-art { width:78px; max-width:100%; align-self:center; }
  #modal-box .card-option .option-art.landscape { width:100%; }
  #modal-box input:not([type=range]):not([type=checkbox]), #modal-box select {
    max-width:100%; min-width:0; box-sizing:border-box;
  }
  #modal-box select { white-space:normal; }
  #modal-box .battlefield-source {
    flex-direction:row; align-items:flex-start; gap:8px; padding:8px; margin-bottom:8px;
  }
  #modal-box .battlefield-source-card { flex:0 0 84px; width:84px; align-self:flex-start; }
  #modal-box .battlefield-source-info { font-size:12px; line-height:1.45; }
  #modal-box .battlefield-source-text { margin-top:4px; }
  #modal-box .victory-box { padding:8px 0; }
  #modal-box .victory-box h2 { font-size:22px; line-height:1.4; }

  /* 설정의 고정 vw 너비 대신, 선택창 안의 실제 남은 너비를 사용한다. */
  #modal-box .system-settings, #modal-box .scale-settings { width:100%; }
  #modal-box .settings-header { gap:8px; margin-bottom:10px; }
  #modal-box .settings-header h3 { font-size:18px; }
  #modal-box .settings-header p, #modal-box .settings-footer > span { font-size:11px; }
  #modal-box .settings-close { width:40px; height:40px; }
  #modal-box .settings-sections { gap:8px; }
  #modal-box .settings-section { padding:10px; }
  #modal-box .settings-section h4 { margin-bottom:8px; }
  #modal-box .settings-toggle { gap:8px; }
  #modal-box .settings-toggle + .settings-toggle { margin-top:8px; padding-top:8px; }
  #modal-box .settings-option-copy strong { font-size:13px; }
  #modal-box .settings-option-copy small { font-size:11px; line-height:1.45; }
  #modal-box .settings-action, #modal-box .settings-done { min-height:40px; padding:8px; font-size:13px; }
  #modal-box .settings-footer { margin-top:10px; gap:8px; }
  #modal-box .scale-description { margin-bottom:10px; font-size:12px; line-height:1.5; }
  #modal-box .scale-control { padding:10px; }
  #modal-box .scale-control-header output { font-size:20px; }
  #modal-box .sb-list { height:140px; }
  #modal-box .sb-row { white-space:normal; min-height:32px; }
  #modal-box .sb-champ { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
  #modal-box .sb-champ select { margin-left:0; }
  #modal-box .playmat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
  #modal-box .playmat-hint, #modal-box .playmat-option { font-size:12px; }

  /* 확대창은 이미지를 줄이고 본문을 읽는 공간을 확보한다. 닫기는 항상 위에 남는다. */
  #card-zoom { padding:8px; }
  .cz-box { max-height:100%; }
  .cz-toolbar { padding:4px 6px 4px 10px; font-size:12px; }
  .cz-close { min-width:70px; font-size:13px; }
  .cz-body { gap:10px; padding:10px; }
  .cz-img { max-height:30vh; max-height:30dvh; width:auto; max-width:100%; }
  .cz-noimg { max-height:26vh; max-height:26dvh; max-width:100%; font-size:48px; }
  .cz-name { font-size:20px; overflow-wrap:anywhere; }
  .cz-en { font-size:11px; margin-bottom:5px; overflow-wrap:anywhere; }
  .cz-type { font-size:12px; margin-bottom:8px; }
  .cz-text { font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
  .cz-kw { font-size:12px; line-height:1.5; margin-top:6px; }
  .cz-hint { font-size:11px; margin-top:8px; }

  #ctx-menu { width:max-content; min-width:0; max-width:calc(100vw - 12px); max-height:calc(100dvh - 12px); overflow:auto; overscroll-behavior:contain; }
  #ctx-menu .ctx-item { min-height:40px; padding:8px; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
  #ctx-menu .ctx-title { padding:4px 8px; font-size:11px; overflow-wrap:anywhere; }
  #ctx-menu .ctx-card-choice { gap:6px; }
  #ctx-menu .ctx-card-choice .card-mini { width:40px; height:56px; }
  #chain-panel { max-height:100%; min-height:0; }

  #chat-pop {
    right:8px; bottom:calc(64px + env(safe-area-inset-bottom)); width:min(300px,calc(100% - 16px));
    height:min(320px,calc(100% - 80px - env(safe-area-inset-bottom))); max-height:calc(100% - 80px);
  }
  #chat-pop-head { flex-shrink:0; padding:4px 8px; font-size:13px; }
  #chat-pop-head button { min-width:40px; min-height:40px; }
  #chat-pop-msgs { min-height:0; font-size:12px; padding:6px 8px; }
  #chat-pop input { flex-shrink:0; min-width:0; font-size:16px; margin:6px; padding:6px 8px; }
  #tut-panel {
    top:6px; left:6px; width:min(360px,calc(100% - 12px)); max-width:calc(100% - 12px);
    max-height:48%; padding:10px; font-size:12px;
  }
  .tut-head { font-size:14px; margin-bottom:6px; }
  .tut-body { line-height:1.5; overflow-wrap:anywhere; }
  .tut-hint { margin-top:6px; padding:6px; font-size:11px; }
  .tut-btns { margin-top:8px; gap:6px; flex-wrap:wrap; }
  .tut-btn { min-height:40px; padding:6px 10px; font-size:12px; }
  #toast-area { top:8px; width:calc(100% - 16px); }
  .toast { max-width:100%; padding:7px 12px; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
  .pb-inner { max-width:100%; gap:8px; padding:10px 14px; flex-wrap:wrap; justify-content:center; }
  .pb-icon { font-size:24px; }
  .pb-text { font-size:20px; letter-spacing:1px; }
  .pb-sub { font-size:12px; margin-left:0; }
}
@media (orientation:landscape) and (max-height:540px) {
  .chain-source-card { width:min(100%,80px,18dvh); }
  .cz-body { flex-direction:row; }
  .cz-img, .cz-noimg { width:26%; max-width:180px; max-height:100%; align-self:flex-start; }
  .cz-noimg { height:auto; aspect-ratio:744 / 1039; }
  .cz-info { width:0; }
  #tut-panel { width:340px; max-width:48%; max-height:calc(100% - 12px); }
  #chat-pop { bottom:8px; height:calc(100% - 16px); max-height:calc(100% - 16px); }
}