/* 한글 공개 화면 모달의 바깥 틀(2026-11-11 개편). 열고 닫는 동작은 Bootstrap 5 모달을 그대로 쓰고 모양만 이 파일이 정한다.
   루트는 .modal-dialog.ilp-md(폭은 .md-wide 가 있으면 880px, 없으면 560px), 클래스는 md- 접두어.
   색은 결제창(pay.css)·가입·로그인과 같다. 안쪽 iframe 화면은 modal-page.css 를 쓴다.
   app.css 의 `* { border-radius: 0 !important }` 와 a:focus 의 outline 0 !important 때문에 둥근 모서리와 포커스 링은 !important 로 준다. */

/* custom.css 가 모든 .modal-dialog 에 padding-top 5%(720px 이하 15%)를 주므로 0 으로 되돌린다 */
.modal-dialog.ilp-md { --bs-modal-width: 560px; --bs-modal-margin: 24px; max-width: var(--bs-modal-width); margin: var(--bs-modal-margin) auto; padding-top: 0; }
.modal-dialog.ilp-md.md-wide { --bs-modal-width: 880px; }

.ilp-md .md-win {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    border: 0; border-radius: 20px !important; overflow: hidden;
    background: #ffffff; color: #26211f; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    font-family: "Nanum Gothic", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; text-align: left;
}
.ilp-md .md-win *, .ilp-md .md-win *::before, .ilp-md .md-win *::after { box-sizing: border-box; }
.ilp-md .md-win * { font-family: inherit; }   /* app.css 가 h1~h6 에, custom.css 가 div·span·a 에 따로 주는 글꼴을 이 창의 글꼴로 통일 */
.ilp-md .md-win :focus-visible { outline: 3px solid #ed1d24 !important; outline-offset: 2px; }

/* ---- 머리 ---- */
.ilp-md .md-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px 14px 24px; border-bottom: 1px solid #e7e1de; }
.ilp-md .md-head h2 { flex: 1; min-width: 0; margin: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: #26211f; }
.ilp-md .md-x { position: relative; flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50% !important; background: none; cursor: pointer; }
.ilp-md .md-x:hover { background: #faf8f7; }
.ilp-md .md-x::before, .ilp-md .md-x::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 2px !important; background: #6b625e; transform: rotate(45deg); }
.ilp-md .md-x::after { transform: rotate(-45deg); }

/* ---- 본문: 그림만 있는 창(여백 없이 가장자리까지) ---- */
.ilp-md .md-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ilp-md .md-body img { display: block; width: 100%; height: auto; max-width: 100%; }
/* 그림 한 장짜리 안내창: 스크롤 없이 창 높이에 맞춰 줄인다(머리글 약 61px + 위아래 바깥 여백 48px) */
.ilp-md .md-body.md-fit { overflow: hidden; }
.ilp-md .md-body.md-fit img { width: auto; margin: 0 auto; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); }

/* ---- 본문: 안쪽 화면(iframe)이나 카카오 위젯이 들어가는 자리.
   각 화면의 init 함수가 자리와 iframe 높이를 screen.height*0.6 으로 inline 지정하므로 !important 로 덮는다 ---- */
.ilp-md .md-layer { position: relative; flex: 1 1 auto; min-height: 0; width: 100% !important; height: min(calc(100vh - 130px), 720px) !important; height: min(calc(100dvh - 130px), 720px) !important; }
.ilp-md .md-layer iframe { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; border: 0; }

/* ---- 좁은 화면(휴대폰)은 화면 전체를 덮는다. 길면 안쪽 화면이 스크롤한다 ---- */
@media (max-width: 640px) {
    .modal-dialog.ilp-md { --bs-modal-margin: 0; max-width: none; width: 100%; height: 100%; margin: 0; }
    .ilp-md .md-win { height: 100%; max-height: none; border-radius: 0 !important; box-shadow: none; }
    .ilp-md .md-layer { height: auto !important; }
    .ilp-md .md-body.md-fit img { max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); }
}