.tw-modaldialogs dialog {
    border: 0;
    padding: 0;
}

.tw-modaldialogs dialog::backdrop {
    background: transparent;
}

/* 모바일에서 Headless UI 패턴(items-end) 때문에 모달이 하단에 붙는 것을 막고 세로 중앙 정렬 */
.tw-modaldialogs dialog div.flex.min-h-full.items-end {
    align-items: center;
}

/* 모바일: 패널 너비 약 95% (sm 이상은 페이지의 sm:w-full sm:max-w-lg 유지) */
@media (max-width: 639px) {
    .tw-modaldialogs el-dialog-panel {
        display: block;
        box-sizing: border-box;
        width: 95%;
        max-width: 95%;
    }
}

/* 사이트 공통 테마(다크 + 레드 포인트)에 맞춘 모달 기본 스킨 */
.tw-modaldialogs el-dialog-backdrop {
    background: rgba(2, 2, 2, 0.72) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.tw-modaldialogs el-dialog-panel {
    border: 1px solid rgba(248, 113, 113, 0.2);
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.97) 0%, rgba(6, 6, 6, 0.99) 100%) !important;
    color: #f8fafc;
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.56),
        0 0 0 1px rgba(248, 113, 113, 0.05);
    outline-color: rgba(248, 113, 113, 0.18) !important;
}

.tw-modaldialogs el-dialog-panel h1,
.tw-modaldialogs el-dialog-panel h2,
.tw-modaldialogs el-dialog-panel h3,
.tw-modaldialogs el-dialog-panel h4,
.tw-modaldialogs el-dialog-panel h5,
.tw-modaldialogs el-dialog-panel h6 {
    color: #fff;
}

.tw-modaldialogs el-dialog-panel label,
.tw-modaldialogs el-dialog-panel li,
.tw-modaldialogs el-dialog-panel small {
    color: #cbd5e1;
}

/*
 * 공통 모달 레이아웃 (tw-modaldialogs + el-dialog-panel)
 *
 * 본문·푸터에 Tailwind bg-gray-800 / bg-gray-700/25 를 쓰지 말 것 — 패널 그라데이션과 어긋납니다.
 * 대신 아래 클래스를 쓰거나, 패널 직계 첫 자식(form|div) / 마지막 div 푸터 패턴을 맞춥니다.
 *
 * - .tw-modaldialogs-modal-body : 본문 래퍼(배경 투명)
 * - .tw-modaldialogs-modal-footer : 버튼 줄(은은한 구분선·그라데이션)
 * - .dt-modal-btn--outline.dt-modal-btn--info : 취소·닫기
 * - .dt-modal-btn--fill.dt-modal-btn--success : 확인·삭제·제출
 * - 푸터 DOM: [취소 info] → [확인/삭제 success], justify-end
 */
.tw-modaldialogs el-dialog-panel > :first-child,
.tw-modaldialogs el-dialog-panel .tw-modaldialogs-modal-body {
    background: transparent !important;
    background-image: none !important;
}

.tw-modaldialogs el-dialog-panel > div:last-child:not(:only-child),
.tw-modaldialogs el-dialog-panel .tw-modaldialogs-modal-footer {
    display: flex !important;
    /* DOM 순서: [취소] → [확인/삭제], 우측 정렬 시 [취소][삭제] */
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end !important;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 모달 푸터 버튼 — 공통 스킨은 darkthread-tokens.css (.dt-modal-btn) */
.tw-modaldialogs-modal-footer .dt-modal-btn {
    width: auto;
    min-width: 5.5rem;
    flex: 0 0 auto;
    margin: 0;
}

/*
 * 모바일 탭·키보드 포커스 시 브라우저 기본(파란 링·탭 하이라이트)을 테마색으로 통일
 */
.tw-modaldialogs el-dialog-panel a,
.tw-modaldialogs el-dialog-panel button,
.tw-modaldialogs el-dialog-panel summary,
.tw-modaldialogs el-dialog-panel [role="button"],
.tw-modaldialogs el-dialog-panel input:not([type="hidden"]),
.tw-modaldialogs el-dialog-panel textarea,
.tw-modaldialogs el-dialog-panel select {
    -webkit-tap-highlight-color: rgba(248, 113, 113, 0.22);
}

.tw-modaldialogs el-dialog-panel a:focus-visible,
.tw-modaldialogs el-dialog-panel button:focus-visible,
.tw-modaldialogs el-dialog-panel summary:focus-visible,
.tw-modaldialogs el-dialog-panel [role="button"]:focus-visible,
.tw-modaldialogs el-dialog-panel input:focus-visible,
.tw-modaldialogs el-dialog-panel textarea:focus-visible,
.tw-modaldialogs el-dialog-panel select:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.55);
    outline-offset: 2px;
}

.tw-modaldialogs el-dialog-panel a:focus:not(:focus-visible),
.tw-modaldialogs el-dialog-panel button:focus:not(:focus-visible),
.tw-modaldialogs el-dialog-panel summary:focus:not(:focus-visible),
.tw-modaldialogs el-dialog-panel [role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* ===== v2 라이트 테마 (게시판·상세·목록 등 tw-modaldialogs 공통) ===== */
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-backdrop,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-backdrop,
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-backdrop {
    background: rgba(15, 23, 42, 0.32) !important;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel,
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel {
    border-color: #e5e7eb;
    background: #fff !important;
    color: var(--dt-fg, #171717);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
    outline-color: #fecaca !important;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h1,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h2,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h3,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h4,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h5,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h6,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(h1, h2, h3, h4, h5, h6),
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(h1, h2, h3, h4, h5, h6) {
    color: var(--dt-fg-strong, #0a0a0a);
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel label,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel li,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel small,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(label, li, small),
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(label, li, small) {
    color: var(--dt-fg-soft, #525252);
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel > div:last-child:not(:only-child),
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .tw-modaldialogs-modal-footer,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel .tw-modaldialogs-modal-footer,
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .tw-modaldialogs-modal-footer {
    border-top-color: #e5e7eb;
    background: #f8fafc !important;
    box-shadow: none;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-white,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .dt-text,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .dt-text-muted,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .dt-text-soft,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-slate-100,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-slate-200,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-slate-300,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-slate-400,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel .text-slate-500,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(.text-white, .dt-text, .dt-text-muted, .dt-text-soft, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-slate-500),
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(.text-white, .dt-text, .dt-text-muted, .dt-text-soft, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-slate-500) {
    color: var(--dt-fg-soft, #525252) !important;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(h1, h2, h3, h4, h5, h6).text-white,
html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel h3.text-base,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(h1, h2, h3, h4, h5, h6).text-white,
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(h1, h2, h3, h4, h5, h6).text-white {
    color: var(--dt-fg-strong, #0a0a0a) !important;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select),
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select),
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
    border-color: #d1d5db !important;
    background: #fff !important;
    color: var(--dt-fg, #171717) !important;
}

html.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input, textarea)::placeholder,
html:has(#dtV2ThemeLight:checked) .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input, textarea)::placeholder,
body.darkthread-board-list-v2-theme-light .tw-modaldialogs el-dialog-panel :is(.notice-admin-input, input, textarea)::placeholder {
    color: var(--dt-fg-muted, #737373) !important;
}