/* ==========================================================================
   modals.css — 전 페이지 모달 통일 레이어 (구 modals-unified.css 개명·재도색)
   --------------------------------------------------------------------------
   목적: 페이지마다 제각각인 모달들(크기·여백·시인성·라운드·그림자)을 하나의
         시각 언어로 묶고, 뷰포트 초과를 전역에서 차단한다. 마크업은 그대로 두고
         CSS 만으로 기존 모달을 보정한다.

   설계 원칙 (회귀 방지가 최우선):
     · "절대 더 나빠지지 않는" 속성만 !important 로 강제한다.
     · 크기(max-width/max-height/overflow)는 !important 를 쓰지 않는다.
       페이지별 상한(예: ip 450px, 패치 400px, 평면도 1200px)을 그대로 이기게 둔다.
     · 표시/숨김(display 토글)·z-index 는 각 페이지 로직을 존중해 건드리지 않는다.
   ========================================================================== */

:root {
    --inet-modal-w-sm: 420px;
    --inet-modal-w-md: 560px;
    --inet-modal-w-lg: 720px;
    --inet-modal-w-xl: 960px;
    --inet-modal-w-2xl: 1200px;

    --inet-modal-radius: 14px;
    --inet-modal-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.45), 0 8px 22px -10px rgba(15, 23, 42, 0.22);
    --inet-modal-backdrop: rgba(15, 23, 42, 0.55);
    --inet-modal-surface: var(--ui-surface);
    --inet-modal-border: 1px solid var(--ui-divider);
    --inet-modal-head-color: var(--ui-ink);
    --inet-modal-body-color: var(--ui-slate-700);

    --inet-modal-pad-x: 20px;
    --inet-modal-head-pad: 15px 20px;
    --inet-modal-body-pad: 18px 20px;
    --inet-modal-foot-pad: 14px 20px;

    /* ui-tokens.css 는 모든 셸(레거시 포함)에 로드되므로 직접 참조가 안전
       (구 버전은 main.css 전용 --inet-primary 간접 체인에 의존해 레거시 셸에서 폴백값을 썼다) */
    --inet-modal-accent: var(--ui-primary, var(--ui-slate-700));
}

/* 1) 백드롭 통일 */
.modal, .modal-overlay, .ip-modal, .classroom-modal-overlay, .pp-modal__backdrop, .inspection-summary-modal-backdrop {
    background: var(--inet-modal-backdrop) !important;
}
.modal-overlay, .pp-modal__backdrop, .inspection-summary-modal-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* 2) 콘텐츠 박스 — 미관 통일(!important) + 뷰포트 안전 기본값(비!important) */
.modal-content, .ip-modal-content, .classroom-modal-content, .classroom-reorder-content,
.inspection-summary-modal-panel, .pp-modal__box {
    box-sizing: border-box !important;
    border-radius: var(--inet-modal-radius) !important;
    box-shadow: var(--inet-modal-shadow) !important;
    background: var(--inet-modal-surface);
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.modal-content { padding: var(--inet-modal-body-pad); }

/* 3) 클래스 기반 헤더/바디/푸터 */
.modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: var(--inet-modal-head-pad); border-bottom: var(--inet-modal-border);
}
.modal-header h2, .modal-header h3, .modal-header h4 {
    margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--inet-modal-head-color);
}
.modal-body { padding: var(--inet-modal-body-pad); color: var(--inet-modal-body-color); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: var(--inet-modal-foot-pad); border-top: var(--inet-modal-border); flex-wrap: wrap; }

/* 4) 닫기 버튼 통일 */
.modal-header .close-btn, .modal-header .modal-close, .modal .close-btn, .modal-overlay .modal-close {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
    border: none; border-radius: 8px; background: var(--ui-slate-100); color: var(--ui-slate-600); font-size: 1rem; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.modal-header .close-btn:hover, .modal-header .modal-close:hover, .modal .close-btn:hover, .modal-overlay .modal-close:hover {
    background: var(--ui-slate-200); color: var(--ui-ink);
}
.modal-header .close-btn:focus-visible, .modal-header .modal-close:focus-visible { outline: 2px solid var(--inet-modal-accent); outline-offset: 2px; }

/* 4b) 헤더바 없는 모달 — 콘텐츠 우상단 × 닫기 (.ip-modal 등) */
.ip-modal-content { position: relative; }
.ip-modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
    border: none; border-radius: 8px; background: var(--ui-slate-100); color: var(--ui-slate-600);
    font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ip-modal-close:hover { background: var(--ui-slate-200); color: var(--ui-ink); }
.ip-modal-close:focus-visible { outline: 2px solid var(--inet-modal-accent); outline-offset: 2px; }

/* 5) 등장 애니메이션 — 사용자 요청으로 제거(전 모달 통일: 즉시 표시) */

/* 6) 신규 모달용 옵트인 컴포넌트
     <div class="inet-modal" hidden>
       <div class="inet-modal__panel inet-modal--md">
         <div class="inet-modal__header"><h3 class="inet-modal__title">제목</h3><button class="inet-modal__close">&times;</button></div>
         <div class="inet-modal__body"> … </div>
         <div class="inet-modal__footer"> … </div>
       </div>
     </div>
*/
.inet-modal {
    position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 28px); background: var(--inet-modal-backdrop);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-sizing: border-box;
}
.inet-modal[hidden] { display: none; }
.inet-modal__panel {
    display: flex; flex-direction: column; width: min(var(--inet-modal-w, var(--inet-modal-w-md)), 96vw); max-height: 92vh;
    background: var(--inet-modal-surface); border-radius: var(--inet-modal-radius); box-shadow: var(--inet-modal-shadow);
    overflow: hidden; box-sizing: border-box;
}
.inet-modal--sm  { --inet-modal-w: var(--inet-modal-w-sm); }
.inet-modal--md  { --inet-modal-w: var(--inet-modal-w-md); }
.inet-modal--lg  { --inet-modal-w: var(--inet-modal-w-lg); }
.inet-modal--xl  { --inet-modal-w: var(--inet-modal-w-xl); }
.inet-modal--2xl { --inet-modal-w: var(--inet-modal-w-2xl); }
.inet-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--inet-modal-head-pad); border-bottom: var(--inet-modal-border); flex-shrink: 0; }
.inet-modal__title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--inet-modal-head-color); }
.inet-modal__body { padding: var(--inet-modal-body-pad); color: var(--inet-modal-body-color); overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.inet-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: var(--inet-modal-foot-pad); border-top: var(--inet-modal-border); flex-shrink: 0; flex-wrap: wrap; }
.inet-modal__close {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 8px;
    background: var(--ui-slate-100); color: var(--ui-slate-600); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.inet-modal__close:hover { background: var(--ui-slate-200); color: var(--ui-ink); }
.inet-modal__close:focus-visible { outline: 2px solid var(--inet-modal-accent); outline-offset: 2px; }

/* 7) 모바일 — 좁은 화면에서 여백·라운드를 줄여 더 넓게, 그러나 뷰포트 안에 */
@media (max-width: 640px) {
    .modal, .modal-overlay, .ip-modal, .classroom-modal-overlay { padding: 12px !important; }
    .modal-content, .ip-modal-content, .classroom-modal-content, .classroom-reorder-content, .inspection-summary-modal-panel, .pp-modal__box {
        max-width: 96vw; max-height: 94vh; border-radius: 12px !important;
    }
    .modal-content { padding: 14px 14px; }
    .modal-header, .inet-modal__header { padding: 12px 14px; }
    .modal-body, .inet-modal__body { padding: 14px 14px; }
    .modal-footer, .inet-modal__footer { padding: 12px 14px; }
    .inet-modal { padding: 10px; }
    .inet-modal__panel { width: 96vw; max-height: 94vh; border-radius: 12px; }
}

/* 8) 프로그래밍 대화상자(inetModal.alert/confirm/prompt/show) — 변형·아이콘·버튼·목록·입력
     window.inetModal 팩토리(inet-modal.js)가 .inet-modal.inet-modal--dialog 구조를 생성한다.
     네이티브 alert/confirm/prompt 를 대체하는 통일 디자인(패치판넬 결과 모달 룩 계승). */
.inet-modal--dialog { z-index: 100000; }   /* 프로그래밍 대화상자(alert/confirm)는 어떤 페이지 모달보다도 위 */
.inet-modal--dialog .inet-modal__panel { --inet-modal-w: 460px; }
.inet-modal--dialog .inet-modal__title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.inet-modal--dialog .inet-modal__title > span { min-width: 0; word-break: break-word; }
.inet-modal__vicon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; color: var(--ui-primary, #334155); }
.inet-modal--error   .inet-modal__vicon { color: var(--ui-danger, #dc2626); }
.inet-modal--warning .inet-modal__vicon { color: var(--ui-warning, #d97706); }
.inet-modal--success .inet-modal__vicon { color: var(--ui-success, #16a34a); }
.inet-modal--info    .inet-modal__vicon,
.inet-modal--question .inet-modal__vicon { color: var(--ui-primary, #334155); }

.inet-modal__msg { margin: 0; white-space: pre-line; line-height: 1.6; color: var(--inet-modal-body-color, var(--ui-slate-700, #334155)); font-size: 0.96rem; word-break: break-word; }
.inet-modal__msg + .inet-modal__msgnote, .inet-modal__msg + .inet-modal__msglist { margin-top: 0.7rem; }
.inet-modal__msgnote { font-weight: 700; color: var(--ui-slate-700, #334155); margin: 0.7rem 0 0.1rem; }
.inet-modal__msglist {
    margin: 0.45rem 0 0.2rem; padding: 0.5rem 0.7rem; list-style: none;
    background: var(--ui-slate-50, #f8fafc); border: 1px solid var(--ui-slate-200, #e2e8f0); border-radius: 10px;
    max-height: 34vh; overflow-y: auto;
}
.inet-modal__msglist li { position: relative; padding: 0.2rem 0 0.2rem 1.05rem; font-weight: 600; color: var(--ui-slate-700, #334155); word-break: break-all; }
.inet-modal__msglist li::before { content: '•'; position: absolute; left: 0.1rem; opacity: 0.7; }
.inet-modal--error   .inet-modal__msglist { background: #fef2f2; border-color: #fecaca; }
.inet-modal--error   .inet-modal__msglist li { color: #b91c1c; font-weight: 700; }
.inet-modal--warning .inet-modal__msglist, .inet-modal--success .inet-modal__msglist { background: #fffbeb; border-color: #fde68a; }
.inet-modal--warning .inet-modal__msglist li, .inet-modal--success .inet-modal__msglist li { color: #92400e; }

.inet-modal__inlabel { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ui-slate-600, #475569); margin: 0.6rem 0 0.3rem; }
.inet-modal__input {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 0.96rem; font-family: inherit;
    color: var(--ui-ink, #0f172a); background: #fff;
    border: 1px solid var(--ui-slate-300, #cbd5e1); border-radius: 9px; margin-top: 0.5rem;
}
.inet-modal__input:focus { outline: none; border-color: var(--ui-primary, #334155); box-shadow: 0 0 0 3px var(--ui-primary-soft, rgba(51,65,85,0.15)); }
textarea.inet-modal__input { resize: vertical; min-height: 68px; }

/* 대화상자 버튼 — modals.css 가 전 페이지 로드되므로 components.css 없이도 일관 렌더 */
.inet-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 88px;
    padding: 9px 16px; border-radius: 9px; font-size: 0.94rem; font-weight: 600; font-family: inherit; line-height: 1.2;
    cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.inet-btn--primary { background: var(--ui-primary, #334155); color: #fff; }
.inet-btn--primary:hover { background: var(--ui-primary-hover, #1e293b); }
.inet-btn--ghost { background: #fff; color: var(--ui-slate-700, #334155); border-color: var(--ui-slate-300, #cbd5e1); }
.inet-btn--ghost:hover { background: var(--ui-slate-100, #f1f5f9); }
.inet-btn--danger { background: var(--ui-danger, #dc2626); color: #fff; }
.inet-btn--danger:hover { background: var(--ui-danger-hover, #b91c1c); }
.inet-btn:focus-visible { outline: 2px solid var(--inet-modal-accent); outline-offset: 2px; }