/**
 * GnDialog 스킨(components/gn-dialog.js가 만드는 .modal.bootbox.core-dialog 마크업 전용) — PR7-a, 2026-09-10.
 *
 * 대체 원본(삭제는 사용자, docs/legacy-removal-candidates.md L16~L18):
 *   - style.css "POPUP reset" .core-dialog 블록(8062~8122행)
 *   - style.css .btn-outline-primary 전역 하이재킹(1095~1114행: coreDialog 주버튼용 파란 채움) → 여기서 .core-dialog 스코프로 한정
 *   - style.css .button-sty02-gray(1077~1094행: coreDialog 취소버튼) → .core-dialog 스코프 사본
 *   - core/css/core.dialog.css(수정 금지 영역)의 회색 그라데이션 헤더·#e7e7e7 본문은 이 파일이 후행 로드로 덮는다.
 * 규칙: rem·tokens만. !important 는 style.css 원본의 !important 를 되받는 2건뿐(파일 끝 블록, 사유 주석). style.css 원본에 !important 가 남아 있는 속성(헤더 높이·배경·그림자·제목 글꼴)은
 *   같은 값을 쓰므로 삭제 전후 시각이 같다 — 단 그림자만 토큰(--gn-shadow-modal)으로 바꿔 삭제 후 가벼워진다(승인 항목 P7-1).
 * 버튼 훅: 클래스 대신 GnDialog 고유 속성 [data-gn-dialog-btn]를 쓴다(core.dialog.js가 넘기는 클래스 조합과 무관하게 동작).
 * 로드: main/note 셸(style.css 뒤) + /style-guide.
 * 2026-10-15 테마 개편(Tailwind alert dialog): 헤더 띠·회색 본문·가운데 경고 PNG → 흰 상자 안 [연한 원 아이콘 | 제목 16px bold + 메시지 14px 회색],
 *   회색 바닥 띠 + 36px 버튼(확인 파랑 채움 · 취소 흰 바탕 안쪽 링 · 위험 빨강). 아이콘은 bootstrap-icons 글리프(셸이 이미 싣는 폰트),
 *   위험 버튼(.btn-danger)이 있으면 빨강, 폼이 들어간 다이얼로그는 아이콘 없이 넓게. 576px 미만은 아이콘·글을 가운데 세로로.
 *   마크업(gn-dialog.js)·core.dialog.js 호출 규약은 그대로 — 배치는 .modal-content 그리드(아이콘 = ::before).
 */
/* core.dialog.js가 alert/confirm 모두 항상 size:'small'(.modal-sm, --bs-modal-width:300px)을
   넘긴다 — 300px는 짧은 메시지엔 맞지만 긴 에러 메시지가 부자연스럽게 여러 줄로 잘려 보인다
   (실사고 발견: 스타일가이드 "알림 — 긴 메시지" 데모). .modal-sm(특이도 0,1,0)보다 높은
   .core-dialog .modal-dialog(0,2,0)로 이 스코프에서만 너비를 넓힌다 — 전역 .modal-sm은 그대로.
   --gn-dialog-width는 GnDialogOptions.width로 인스턴스별 override 가능(gn-dialog.js) — 폼처럼
   넓어야 하는 다이얼로그도 새 CSS 없이 대응한다. 지정 안 하면 기본값 25rem을 쓴다. */
.core-dialog .modal-dialog {
    width: 100%;
    max-width: var(--gn-dialog-width, 26rem); /* 기본 416px — core.dialog.js 의 size:'small'(300px)보다 여유 있게 */
    margin-inline: auto;                      /* BS 는 576px 미만에서 좌우 여백을 고정(0.5rem)해 416px 보다 넓은 화면에서 왼쪽으로 치우친다 */
}
/* 틀(2026-10-16 모달 틀 시안 C): 가운데 정렬 한 칸 — [아이콘] / [제목] / [메시지] / [같은 폭 버튼]. 폼이 들어간 다이얼로그는 왼쪽 정렬(시안 A) */
.core-dialog .modal-dialog .modal-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    min-width: 17.5rem;                 /* 280px */
    max-height: 31.25rem;               /* 500px */
    border: 0;
    border-radius: var(--gn-radius-xl);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xl);
    overflow: hidden;
}
/* 아이콘: 연한 원 + 글리프(기본 info \f430 파랑, 위험 exclamation-triangle \f33a 빨강) */
.core-dialog .modal-dialog .modal-content::before {
    content: '\f430';
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 1.75rem auto 0;
    border-radius: var(--gn-radius-circle);
    background: var(--gn-blue-50);
    font-family: 'bootstrap-icons';
    font-size: 1.375rem;
    line-height: 1;
    color: var(--gn-blue-600);
}
/* 확인창 본문 위 굵은 부제(GnDialog.confirm 의 subTitle) */
.core-dialog .gn-dialog-subtitle { margin-bottom: 0.625rem; }
/* GnDialog.alert(): 제목 앞 경고 아이콘을 왼쪽 원(주황 경고)으로 옮긴다 */
.core-dialog .modal-dialog .modal-content:has(.modal-title .bi-exclamation-triangle)::before {
    content: '\f33a';
    background: var(--gn-status-share-bg);
    color: var(--gn-status-share-fg);
}
.core-dialog .modal-dialog .modal-title .bi { display: none; }
.core-dialog .modal-dialog .modal-content:has(.modal-footer .btn-danger)::before {
    content: '\f33a';
    background: var(--gn-status-reject-bg);
    color: var(--gn-status-reject-fg);
}
/* 폼 다이얼로그: 아이콘 없이 전폭 */
.core-dialog .modal-dialog .modal-content:has(.modal-body form)::before { display: none; }
.core-dialog .modal-dialog .modal-content:has(.modal-body form) { text-align: left; }

.core-dialog .modal-dialog .modal-header {
    grid-column: 1;
    grid-row: 2;
    position: static;
    justify-content: center;
    min-height: 0;
    padding: 0.75rem 3rem 0;            /* 좌우: 닫기 버튼 자리를 대칭으로 비운다 */
    border: 0;
    background: none;
}
.core-dialog .modal-dialog .modal-content:has(.modal-body form) .modal-header { justify-content: flex-start; padding: 1.5rem 3rem 0 1.5rem; }
.core-dialog .modal-dialog .modal-title {
    padding: 0;
    font-size: var(--gn-font-size-base);
    font-weight: var(--gn-font-weight-bold);
    line-height: 1.5rem;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--gn-color-text-primary);
}
.core-dialog .modal-dialog .modal-content:has(.modal-body form) .modal-title { text-align: left; }
/* 닫기: 오른쪽 위 모서리. BS .modal-header .btn-close 의 음수 마진은 쓰지 않는다 */
.core-dialog .modal-dialog .modal-header .btn-close {
    --bs-btn-close-opacity: 0.4;
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    padding: 0.5rem;
    border-radius: var(--gn-radius-md);
    background-size: 0.75rem;
}
.core-dialog .modal-dialog .modal-header .btn-close:hover { background-color: var(--gn-gray-100); }
.core-dialog .modal-dialog .modal-body {
    grid-column: 1;
    grid-row: 3;
    display: block;
    padding: 0.375rem 1.5rem 1.25rem;
    border: 0;
    box-shadow: none;
    overflow-y: auto;
    background: none;
    text-align: center;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-regular);
    line-height: 1.375rem;
    letter-spacing: 0;
    color: var(--gn-color-text-muted);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.core-dialog .modal-dialog .modal-content:has(.modal-body form) .modal-body { padding-top: 1rem; text-align: left; }
.core-dialog .modal-dialog .modal-footer {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 0;
    padding: 0 1.5rem 1.5rem;
    border-top: 0;                      /* 회색 바닥 띠 · 선 없이 버튼만 */
    border-radius: 0;
    background: none;
    text-align: center;
}
.core-dialog .modal-dialog .modal-content:has(.modal-body form) .modal-footer { justify-content: flex-end; }
/* 버튼 — 특이도 (0,3,1)로 core.dialog.css 의 `.modal-footer button { float; margin-left:10px }` 를 후행 승리로 덮는다. 36px · 14px medium */
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn] {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 0;                        /* 버튼이 둘이면 같은 폭 */
    width: auto;
    min-width: 0;
    height: 2.25rem;                    /* 36px — 버튼 원자 md */
    margin: 0;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--gn-radius-md);
    outline: 0;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-medium);
    line-height: 1.25rem;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn]:only-child { flex: 0 1 14rem; }   /* 알림(버튼 하나)은 꽉 채우지 않는다 */
.core-dialog .modal-dialog .modal-content:has(.modal-body form) .modal-footer button[data-gn-dialog-btn] { flex: 0 0 auto; min-width: 4.5rem; }
/* 확인(data-gn-dialog-btn="true")은 항상 오른쪽 — core.dialog.js 는 swapButtonOrder:true 로 확인을 먼저 넣는다(마크업 순서는 그대로) */
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn='true'] { order: 1; }
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn]:focus-visible {
    outline: 0.125rem solid var(--gn-color-accent);
    outline-offset: 0.125rem;
}
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn] .bi { display: none; }   /* core.dialog.js alert 확인의 체크 아이콘 — 글자만 */
/* 주버튼(확인) — core.dialog.js 가 넘기는 .btn-outline-primary 를 이 스코프에서만 채움으로 */
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-outline-primary,
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-primary {
    color: var(--bs-white);
    background-color: var(--gn-blue-600);
    box-shadow: var(--gn-shadow-btn-primary);
}
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-outline-primary:hover,
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-primary:hover {
    color: var(--bs-white);
    background-color: var(--gn-blue-700);
}
/* 위험(삭제) */
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-danger {
    color: var(--bs-white);
    background-color: var(--gn-red-600);
    box-shadow: var(--gn-shadow-btn-danger);
}
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-danger:hover {
    color: var(--bs-white);
    background-color: var(--gn-red-700);
}
/* 취소 — core.dialog.js 의 .button-sty02-gray(·스타일가이드의 btn-outline-secondary): 흰 바탕 + 안쪽 링 */
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].button-sty02-gray,
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-outline-secondary {
    color: var(--gn-gray-800);
    background-color: var(--gn-color-bg-surface);
    box-shadow: inset 0 0 0 1px var(--gn-gray-300), var(--gn-shadow-xs);
}
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].button-sty02-gray:hover,
.core-dialog .modal-dialog .modal-footer button[data-gn-dialog-btn].btn-outline-secondary:hover {
    color: var(--gn-color-text-primary);
    background-color: var(--gn-gray-50);
}

/* ── main·note 셸 style.css "POPUP reset"(4060~4123행) 되받기 — 원본 삭제(L16) 시 이 블록도 제거 ──────────────
   일반 선언(최소 높이 248px·본문 앞 경고 PNG·.bootbox-body 위 여백)은 같은 특이도 후행으로 되돌리고,
   !important 선언 두 개(헤더 height 56px·상자 그림자)만 같은 속성을 !important 로 되받는다(규칙 4 예외). */
.core-dialog .modal-dialog .modal-content {
    min-height: 0;
    box-shadow: var(--gn-shadow-xl) !important;
}
.core-dialog .modal-dialog .modal-header { height: auto !important; }
.core-dialog .modal-dialog .modal-body::before { content: none; }
.core-dialog .modal-dialog .modal-body .bootbox-body { margin-top: 0; }