/* ─────────────────────────────────────────────────────────────
   팝업 공통 틀 (2026-09-30 지시 "전체적 팝업들을 점검해서 적용")
   mobile.css **다음에** 읽힌다 — 틀(머리·본문·버튼 줄)은 여기 한 곳에서 정한다.

   ① 머리(브랜드 면)와 버튼 줄은 고정, 본문(#modal-body)만 스크롤 — 긴 팝업에서도 [저장]·×가 늘 보인다.
      예전엔 카드 전체가 스크롤돼 긴 설정 팝업에서 저장 버튼을 찾으러 끝까지 내려가야 했고,
      theme.css 머리 줄 `margin:-20px`이 카드 패딩 22px과 어긋나 좌우 2px 틈이 있었다.
   ② × 는 브랜드 면 위에 흰색(DESIGN-SYSTEM §5 모달) — 회색 ×가 남색 위에서 거의 안 보였다.
   ③ 입력칸·라벨·체크·안내문·오류를 한 톤으로. 개별 팝업의 클래스(.cfg-*, .io-*, .pick-*)는 건드리지 않는다.
   [UTM 생성] 안에서 겹쳐 여는 작은 팝업(app.js ugSubModal — .modal-sub / .modal-sub-body / .modal-sub-ok, 2026-10-01 #677)도
   같은 틀을 쓴다 — 선택자를 :is()로 묶었다(특이도는 id 그대로).
   선택자는 #modal-overlay로 시작한다 — styles/theme/mobile의 .modal-card 규칙을 순서가 아니라 특이도로 이긴다.
   ───────────────────────────────────────────────────────────── */
:is(#modal-overlay, .modal-sub) { background: rgba(17, 24, 39, .45); padding: 24px 16px; }
:is(#modal-overlay, .modal-sub) .modal-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  max-width: 480px; max-height: min(88vh, 900px);
  border: 0; border-radius: 14px; box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
:is(#modal-overlay, .modal-sub) .modal-card.mid { max-width: min(760px, 94vw); }
:is(#modal-overlay, .modal-sub) .modal-card.wide { max-width: min(1180px, 94vw); }
:is(#modal-overlay, .modal-sub) .modal-card.xwide { max-width: min(1560px, 96vw); }
:is(#modal-overlay, .modal-sub) .modal-card.confirm { max-width: 420px; }
:is(#modal-overlay, .modal-sub) .modal-card:has(.account-user-card) { max-width: min(540px, 94vw); }   /* 사용자 관리 */

/* 머리 */
:is(#modal-overlay, .modal-sub) .modal-card > h3 {
  flex: 0 0 auto; margin: 0; padding: 16px 56px 16px 22px; border-radius: 0;
  font-size: 16px; line-height: 1.4; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
:is(#modal-overlay, .modal-sub) .modal-x {
  top: 11px; right: 12px; width: 32px; height: 32px; line-height: 30px; z-index: 2;
  color: #fff; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; font-size: 20px;
}
:is(#modal-overlay, .modal-sub) .modal-x:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* 본문 — 여기만 스크롤 */
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 20px 22px 6px; font-size: 13.5px; line-height: 1.55; color: var(--c-text, #111);
}
:is(#modal-overlay, .modal-sub) .modal-card.wide :is(#modal-body, .modal-sub-body),
:is(#modal-overlay, .modal-sub) .modal-card.xwide :is(#modal-body, .modal-sub-body) { overflow-x: auto; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) > :first-child { margin-top: 0; }

/* 오류 — 비었으면 자리를 차지하지 않는다 */
:is(#modal-overlay, .modal-sub) .modal-error:empty { display: none; }
:is(#modal-overlay, .modal-sub) .modal-error {
  flex: 0 0 auto; margin: 8px 22px 0; padding: 9px 12px; border-radius: 8px;
  background: var(--c-danger-bg, #FBEDEB); color: var(--c-danger, #C0392B); font-size: 13px; line-height: 1.5;
}

/* 버튼 줄 — 고정 */
:is(#modal-overlay, .modal-sub) .modal-actions {
  position: static; flex: 0 0 auto; margin: 12px 0 0; padding: 12px 22px;
  border-top: 1px solid var(--c-border, #DFDFDF); background: #fff; gap: 8px;
}
:is(#modal-overlay, .modal-sub) .modal-actions button { min-width: 84px; height: 38px; padding: 0 16px; font-size: 13.5px; }
:is(#modal-overlay, .modal-sub) .modal-actions .modal-kbd {
  margin-right: auto; align-self: center; font-size: 11.5px; color: var(--c-text-sub, #5A5A5A);
}
:is(#modal-overlay, .modal-sub) .modal-actions .modal-kbd:empty { display: none; }
/* 저장 중 — 두 번 눌러 두 번 저장되지 않게 (app.js가 .busy를 붙인다) */
:is(#modal-overlay, .modal-sub) :is(#modal-ok, .modal-sub-ok).busy { pointer-events: none; opacity: .7; }
:is(#modal-overlay, .modal-sub) :is(#modal-ok, .modal-sub-ok).busy::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: modal-spin .7s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }
/* 닫기 확인 — 저장 안 한 입력이 있을 때 한 번 더 누르라고 알린다 */
:is(#modal-overlay, .modal-sub) .modal-dirty {
  flex: 0 0 auto; margin: 8px 22px 0; padding: 9px 12px; border-radius: 8px;
  background: var(--c-warn-bg, #FBF4DE); color: var(--c-warn, #8A6D1A); font-size: 12.5px; line-height: 1.5;
}

/* 입력 요소 — 한 톤 */
/* 입력칸 제목 라벨만 — 입력칸을 감싸거나 for로 가리키는 라벨. 체크 목록·카드·타일 라벨(.cfg-list, .io-option,
   .account-* …)은 제 규칙을 따른다(첫 판에서 클래스 없는 라벨 전부를 잡아 .cfg-list 줄 간격이 벌어졌다). */
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) label:not([class]):is([for], :has(> input:not([type="checkbox"]):not([type="radio"]), > select, > textarea)) {
  font-size: 13px; font-weight: 600; color: var(--c-text, #111); margin-top: 14px;
}
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) > label:not([class]):first-child { margin-top: 0; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) select,
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea {
  min-height: 38px; padding: 8px 11px; border: 1px solid var(--c-border, #DFDFDF); border-radius: 8px;
  font-size: 13.5px; font-weight: 400; color: var(--c-text, #111); background-color: #fff;
  transition: border-color .12s, box-shadow .12s;
}
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea { width: 100%; line-height: 1.5; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input:not([type="checkbox"]):not([type="radio"]):hover,
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) select:hover, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea:hover { border-color: #BFCBDD; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input:focus, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) select:focus, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea:focus {
  outline: none; border-color: var(--c-primary, #19448C); box-shadow: 0 0 0 3px rgba(25, 68, 140, .14);
}
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input[type="checkbox"], :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input[type="radio"] {
  accent-color: var(--c-primary, #19448C); width: 16px; height: 16px; min-height: 0;
}
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input:disabled, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) select:disabled,
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea:disabled { background: var(--c-bg, #F8F9FA); color: var(--c-text-sub, #5A5A5A); }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input::placeholder, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea::placeholder { color: #9AA3AF; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) .chk { font-weight: 500; }

/* 글 — 안내·본문 메시지 */
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) .hint { font-size: 12.5px; line-height: 1.55; color: var(--c-text-sub, #5A5A5A); }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) p.msg { font-size: 14px; line-height: 1.65; color: var(--c-text, #111); }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) fieldset { border-color: var(--c-border, #DFDFDF); border-radius: 10px; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) details > summary { cursor: pointer; }
:is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) .table-wrap { border-radius: 10px; }

/* 확인 팝업(confirmModal) — 짧은 질문 하나 */
:is(#modal-overlay, .modal-sub) .modal-card.confirm :is(#modal-body, .modal-sub-body) { padding: 22px 22px 10px; }
:is(#modal-overlay, .modal-sub) .modal-card.confirm p.msg { font-size: 14.5px; }

/* 폰 — 아래에서 올라오는 시트. mobile.css의 패딩·음수 여백을 여기 틀로 되돌린다. */
@media (max-width: 820px) {
  :is(#modal-overlay, .modal-sub) { padding: 0; align-items: flex-end; }
  :is(#modal-overlay, .modal-sub) .modal-card, :is(#modal-overlay, .modal-sub) .modal-card.wide, :is(#modal-overlay, .modal-sub) .modal-card.mid,
  :is(#modal-overlay, .modal-sub) .modal-card.xwide, :is(#modal-overlay, .modal-sub) .modal-card.confirm {
    max-width: 100%; max-height: 92vh; padding: 0; border-radius: 16px 16px 0 0;
  }
  @supports (height: 100dvh) {
    :is(#modal-overlay, .modal-sub) .modal-card, :is(#modal-overlay, .modal-sub) .modal-card.wide, :is(#modal-overlay, .modal-sub) .modal-card.mid,
    :is(#modal-overlay, .modal-sub) .modal-card.xwide, :is(#modal-overlay, .modal-sub) .modal-card.confirm { max-height: 92dvh; }
  }
  :is(#modal-overlay, .modal-sub) .modal-card > h3 { margin: 0; padding: 14px 54px 14px 16px; font-size: 15.5px; }
  :is(#modal-overlay, .modal-sub) .modal-x { top: 9px; right: 10px; }
  :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) { padding: 16px 16px 6px; overflow-x: hidden; }
  :is(#modal-overlay, .modal-sub) .modal-error, :is(#modal-overlay, .modal-sub) .modal-dirty { margin-left: 16px; margin-right: 16px; }
  :is(#modal-overlay, .modal-sub) .modal-actions {
    margin: 10px 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  :is(#modal-overlay, .modal-sub) .modal-actions button { flex: 1; min-height: 44px; }
  :is(#modal-overlay, .modal-sub) .modal-actions .modal-kbd { display: none; }
  /* iOS는 16px 미만 입력칸을 누르면 화면을 확대한다 */
  :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) input:not([type="checkbox"]):not([type="radio"]),
  :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) select, :is(#modal-overlay, .modal-sub) :is(#modal-body, .modal-sub-body) textarea { font-size: 16px; }
}