/**
 * DXCMS
 * Copyright (C) 2026 designonex [디자인원엑스]
 * License: GNU Lesser General Public License v3.0 (LGPL-3.0)
 * https://designonex.com/dxcms-manual/view/1776622530771477
 */
/**
 * DX 모달 코어 스타일 v1.0  (assets/js/dx-modal.js 와 함께 사용)
 * 디자인 30종 (1~10 기본 / 11~30 트렌드 확장) — 이름은 dx-modal.js 상단 참고
 * - 색상은 모두 CSS 변수. 인라인 색상을 쓰지 않으므로 다크모드 엔진이 건드리지 않음
 * - 클래스 접두어 dxm- (플러그인 CSS 와 충돌 방지)
 */

/* ── 공통 구조 ─────────────────────────────────────────── */
html.dxm-lock, html.dxm-lock body { overflow: hidden !important; }

.dxm-root, .dxm-toast {
  /* 기본값(= basic) — 각 디자인이 아래 변수를 덮어씀 */
  --bg: #ffffff; --fg: #1e293b; --muted: #64748b; --border: #e2e8f0;
  --radius: 16px; --shadow: 0 20px 60px rgba(15,23,42,.22), 0 4px 14px rgba(15,23,42,.08);
  --overlay: rgba(15,23,42,.5); --bf: none; --w: 380px;
  --ok-bg: #4f46e5; --ok-fg: #ffffff; --cancel-bg: #f1f5f9; --cancel-fg: #475569; --btn-r: 10px;
  --input-bg: #ffffff;
  --c-info: #4f46e5; --c-success: #10b981; --c-warning: #f59e0b; --c-error: #ef4444; --c-question: #6366f1;
  --tc: var(--c-info);
}
.dxm-t-info     { --tc: var(--c-info); }
.dxm-t-success  { --tc: var(--c-success); }
.dxm-t-warning  { --tc: var(--c-warning); }
.dxm-t-error    { --tc: var(--c-error); }
.dxm-t-question { --tc: var(--c-question); }

.dxm-root, .dxm-root *, .dxm-toast, .dxm-toast * { box-sizing: border-box; }

.dxm-root {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  display: -webkit-flex; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .18s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%;
}
.dxm-root.dxm-in  { opacity: 1; }
.dxm-root.dxm-out { opacity: 0; pointer-events: none; }

.dxm-root .dxm-backdrop {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay);
}
.dxm-root .dxm-box {
  position: relative; width: 100%; max-width: var(--w); max-height: 100%; overflow: auto;
  background: var(--bg); color: var(--fg); border-radius: var(--radius); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf);
  padding: 28px 24px 20px; text-align: center; outline: 0;
  transform: translateY(12px) scale(.95);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.15);
}
.dxm-root.dxm-in .dxm-box { transform: none; }

.dxm-root .dxm-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  display: -webkit-flex; display: flex; align-items: center; justify-content: center;
  color: var(--tc); background: rgba(127,127,127,.12);
}
.dxm-root .dxm-icon svg { width: 30px; height: 30px; display: block; }
.dxm-root .dxm-title { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: var(--fg); letter-spacing: -.01em; }
.dxm-root .dxm-msg   { font-size: 15px; color: var(--muted); word-break: keep-all; overflow-wrap: break-word; }
.dxm-root .dxm-title + .dxm-msg { margin-top: 2px; }
.dxm-root .dxm-icon + .dxm-msg  { color: var(--fg); }

.dxm-root .dxm-input {
  display: block; width: 100%; margin: 14px 0 0; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--fg); background: var(--input-bg); border: 1px solid var(--border); border-radius: calc(var(--btn-r) - 2px);
  outline: 0; -webkit-appearance: none; appearance: none; text-align: left;
}
.dxm-root .dxm-input:focus { border-color: var(--tc); box-shadow: 0 0 0 3px rgba(127,127,127,.18); }

.dxm-root .dxm-btns { display: -webkit-flex; display: flex; gap: 10px; margin-top: 22px; }
.dxm-root .dxm-btn {
  -webkit-appearance: none; appearance: none; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0;
  margin: 0; padding: 11px 14px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  border: 0; border-radius: var(--btn-r); cursor: pointer; text-decoration: none;
  background: var(--cancel-bg); color: var(--cancel-fg);
  transition: filter .15s, transform .1s, background .15s;
}
.dxm-root .dxm-btn:hover  { filter: brightness(.96); }
.dxm-root .dxm-btn:active { transform: scale(.97); }
.dxm-root .dxm-btn:focus  { outline: 0; }
.dxm-root .dxm-btn:focus-visible { outline: 2px solid rgba(127,127,127,.55); outline-offset: 2px; }
.dxm-root .dxm-btn-ok     { background: var(--ok-bg); color: var(--ok-fg); }
.dxm-root .dxm-btn-ok:hover { filter: brightness(1.08); }

/* 로딩 */
.dxm-root .dxm-spin { width: 44px; height: 44px; margin: 4px auto 14px; position: relative; }
.dxm-root .dxm-spin i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid rgba(127,127,127,.25); border-top-color: var(--tc);
  -webkit-animation: dxm-rot .8s linear infinite; animation: dxm-rot .8s linear infinite;
}
.dxm-root.dxm-k-loading .dxm-box { max-width: 240px; padding: 26px 20px 22px; text-align: center; }
.dxm-root.dxm-k-loading .dxm-msg { color: var(--fg); }
@-webkit-keyframes dxm-rot { to { -webkit-transform: rotate(360deg); } }
@keyframes dxm-rot { to { transform: rotate(360deg); } }

/* 토스트 */
.dxm-toast-wrap {
  position: fixed; left: 0; right: 0; bottom: 28px; z-index: 2147483001;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; align-items: center;
  gap: 8px; padding: 0 16px; pointer-events: none;
}
.dxm-toast {
  pointer-events: auto; cursor: pointer; max-width: 520px;
  display: -webkit-inline-flex; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px; font-size: 14px; font-weight: 600; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border);
  border-radius: min(var(--radius), 18px); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf);
  opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease;
}
.dxm-toast.dxm-in { opacity: 1; transform: none; }
.dxm-toast .dxm-ticon { display: -webkit-flex; display: flex; color: var(--tc); }
.dxm-toast .dxm-ticon svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
  .dxm-root { padding: 12px; }
  .dxm-root .dxm-box { padding: 24px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dxm-root, .dxm-root .dxm-box, .dxm-toast { transition: none !important; }
  .dxm-root .dxm-spin i { -webkit-animation-duration: 2s; animation-duration: 2s; }
}

/* ══ 1. basic — 깔끔한 기본형 ══════════════════════════════ */
.dxm-d-basic .dxm-icon { background: rgba(127,127,127,.12); }
.dxm-d-basic.dxm-t-success .dxm-icon { background: rgba(16,185,129,.13); }
.dxm-d-basic.dxm-t-warning .dxm-icon { background: rgba(245,158,11,.15); }
.dxm-d-basic.dxm-t-error   .dxm-icon { background: rgba(239,68,68,.13); }
.dxm-d-basic.dxm-t-info    .dxm-icon, .dxm-d-basic.dxm-t-question .dxm-icon { background: rgba(99,102,241,.13); }

/* ══ 2. ios — 블러 유리, 가운데 정렬 얇은 버튼 ═════════════ */
.dxm-d-ios {
  --bg: rgba(250,250,252,.88); --fg: #111827; --muted: #3c3c43; --border: rgba(60,60,67,.18);
  --radius: 14px; --w: 290px; --overlay: rgba(0,0,0,.35); --bf: saturate(180%) blur(22px);
  --shadow: 0 10px 40px rgba(0,0,0,.25); --ok-bg: transparent; --ok-fg: #007aff; --cancel-bg: transparent; --cancel-fg: #007aff;
  --c-info: #007aff; --c-success: #34c759; --c-warning: #ff9500; --c-error: #ff3b30; --c-question: #007aff;
}
.dxm-d-ios .dxm-box { padding: 20px 0 0; }
.dxm-d-ios .dxm-icon { display: none; }
.dxm-d-ios .dxm-title { font-size: 17px; font-weight: 600; padding: 0 16px; }
.dxm-d-ios .dxm-msg   { font-size: 13.5px; padding: 0 16px; color: var(--muted); }
.dxm-d-ios .dxm-input { margin: 12px 16px 0; width: calc(100% - 32px); font-size: 14px; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.7); }
.dxm-d-ios .dxm-btns  { gap: 0; margin-top: 20px; border-top: 1px solid var(--border); }
.dxm-d-ios .dxm-btn   { border-radius: 0; padding: 12px 8px; font-size: 17px; font-weight: 400; background: transparent; }
.dxm-d-ios .dxm-btn + .dxm-btn { border-left: 1px solid var(--border); }
.dxm-d-ios .dxm-btn-ok { font-weight: 600; }
.dxm-d-ios .dxm-btn:hover { filter: none; background: rgba(0,0,0,.05); }
.dxm-d-ios .dxm-btn:focus { outline: 0; background: rgba(0,0,0,.06); }
.dxm-d-ios.dxm-k-loading .dxm-box { padding-top: 24px; }
.dxm-d-ios.dxm-t-error .dxm-btn-ok { color: #ff3b30; }

/* ══ 3. material — 좌측 정렬, 텍스트 버튼 ═════════════════ */
.dxm-d-material {
  --bg: #ffffff; --fg: #202124; --muted: #5f6368; --border: #dadce0; --radius: 6px; --w: 360px;
  --shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
  --overlay: rgba(0,0,0,.42); --ok-bg: transparent; --ok-fg: #1a73e8; --cancel-bg: transparent; --cancel-fg: #5f6368; --btn-r: 4px;
  --c-info: #1a73e8; --c-success: #1e8e3e; --c-warning: #f9ab00; --c-error: #d93025; --c-question: #1a73e8;
}
.dxm-d-material .dxm-box { text-align: left; padding: 24px 24px 8px; }
.dxm-d-material .dxm-icon { margin: 0 0 12px; width: 40px; height: 40px; background: transparent; }
.dxm-d-material .dxm-icon svg { width: 28px; height: 28px; }
.dxm-d-material .dxm-title { font-size: 20px; font-weight: 500; letter-spacing: 0; }
.dxm-d-material .dxm-msg { font-size: 14px; letter-spacing: .01em; }
.dxm-d-material .dxm-icon + .dxm-msg { color: var(--muted); }
.dxm-d-material .dxm-btns { justify-content: flex-end; margin: 18px -12px 0 0; gap: 4px; padding-bottom: 8px; }
.dxm-d-material .dxm-btn  { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 9px 14px; font-size: 14px; font-weight: 500; letter-spacing: .02em; background: transparent; }
.dxm-d-material .dxm-btn:hover { filter: none; background: rgba(26,115,232,.08); }
.dxm-d-material .dxm-btn:focus { outline: 0; background: rgba(26,115,232,.14); }
.dxm-d-material .dxm-input { border-radius: 4px; border-color: #80868b; }

/* ══ 4. glass — 유리 질감 + 그라데이션 배경 ═══════════════ */
.dxm-d-glass {
  --bg: rgba(49,46,129,.36); --fg: #ffffff; --muted: rgba(255,255,255,.9); --border: rgba(255,255,255,.42);
  --radius: 22px; --bf: blur(22px) saturate(160%);
  --overlay: linear-gradient(135deg, rgba(79,70,229,.62), rgba(236,72,153,.5) 55%, rgba(251,146,60,.45));
  --shadow: 0 18px 50px rgba(30,20,90,.35), inset 0 1px 0 rgba(255,255,255,.5);
  --ok-bg: #ffffff; --ok-fg: #4338ca; --cancel-bg: rgba(255,255,255,.22); --cancel-fg: #ffffff; --btn-r: 12px; --input-bg: rgba(255,255,255,.2);
  --c-info: #ffffff; --c-success: #bbf7d0; --c-warning: #fde68a; --c-error: #fecaca; --c-question: #e0e7ff;
}
.dxm-d-glass .dxm-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dxm-d-glass .dxm-box { border: 1px solid var(--border); }
.dxm-d-glass .dxm-icon { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.dxm-d-glass .dxm-icon + .dxm-msg { color: #fff; }
.dxm-d-glass .dxm-input { border-color: rgba(255,255,255,.5); color: #fff; }
.dxm-d-glass .dxm-input::-webkit-input-placeholder { color: rgba(255,255,255,.7); }
.dxm-d-glass .dxm-input::placeholder { color: rgba(255,255,255,.7); }
.dxm-d-glass .dxm-btn { border: 1px solid rgba(255,255,255,.4); }
.dxm-d-glass .dxm-btn-ok { border-color: transparent; }
.dxm-d-glass .dxm-spin i { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.dxm-toast.dxm-d-glass { background: rgba(49,46,129,.6); border-color: rgba(255,255,255,.4); }

/* ══ 5. dark — 다크 슬레이트 ══════════════════════════════ */
.dxm-d-dark {
  --bg: #1e293b; --fg: #f1f5f9; --muted: #94a3b8; --border: #334155; --radius: 16px;
  --overlay: rgba(2,6,23,.72); --shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  --ok-bg: linear-gradient(135deg, #6366f1, #8b5cf6); --ok-fg: #ffffff; --cancel-bg: #334155; --cancel-fg: #cbd5e1; --input-bg: #0f172a;
  --c-info: #818cf8; --c-success: #34d399; --c-warning: #fbbf24; --c-error: #f87171; --c-question: #a5b4fc;
}
.dxm-d-dark .dxm-icon { background: rgba(255,255,255,.07); }

/* ══ 6. neon — 네온 사인 ═════════════════════════════════ */
.dxm-d-neon {
  --bg: #070815; --fg: #e6fbff; --muted: #8fb8c4; --border: #22d3ee; --radius: 8px; --btn-r: 6px;
  --overlay: rgba(2,3,12,.82); --input-bg: #0b0d24;
  --shadow: 0 0 0 1px #22d3ee, 0 0 18px rgba(34,211,238,.55), 0 0 60px rgba(34,211,238,.22), inset 0 0 24px rgba(34,211,238,.1);
  --ok-bg: transparent; --ok-fg: #ff4fd8; --cancel-bg: transparent; --cancel-fg: #8fb8c4;
  --c-info: #22d3ee; --c-success: #4ade80; --c-warning: #fde047; --c-error: #ff4d6d; --c-question: #c084fc;
}
.dxm-d-neon .dxm-icon { background: transparent; border: 2px solid var(--tc); box-shadow: 0 0 12px var(--tc), inset 0 0 10px rgba(255,255,255,.08); }
.dxm-d-neon .dxm-icon svg { filter: drop-shadow(0 0 4px var(--tc)); }
.dxm-d-neon .dxm-title { text-transform: uppercase; letter-spacing: .12em; font-size: 16px; text-shadow: 0 0 10px var(--tc); }
.dxm-d-neon .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-neon .dxm-btn { border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.dxm-d-neon .dxm-btn-ok { box-shadow: 0 0 12px rgba(255,79,216,.55), inset 0 0 10px rgba(255,79,216,.18); text-shadow: 0 0 8px rgba(255,79,216,.8); }
.dxm-d-neon .dxm-btn-ok:hover { background: rgba(255,79,216,.12); filter: none; }
.dxm-d-neon .dxm-btn-cancel:hover { background: rgba(143,184,196,.1); filter: none; }
.dxm-d-neon .dxm-input { border-color: rgba(34,211,238,.6); }
.dxm-d-neon .dxm-input:focus { box-shadow: 0 0 10px rgba(34,211,238,.6); }
.dxm-toast.dxm-d-neon { border-color: var(--tc); box-shadow: 0 0 14px var(--tc); }

/* ══ 7. soft — 뉴모피즘, 둥글고 말랑한 느낌 ══════════════ */
.dxm-d-soft {
  --bg: #e9ecf5; --fg: #3b4160; --muted: #7a82a3; --border: transparent; --radius: 30px; --btn-r: 999px; --w: 360px;
  --overlay: rgba(110,118,160,.45); --input-bg: #e9ecf5;
  --shadow: 14px 14px 32px rgba(139,148,190,.55), -12px -12px 28px rgba(255,255,255,.9);
  --ok-bg: linear-gradient(135deg, #8b9cff, #b28cff); --ok-fg: #ffffff; --cancel-bg: #e9ecf5; --cancel-fg: #6b7399;
  --c-info: #7b8cff; --c-success: #3fc99b; --c-warning: #f0a548; --c-error: #f2708a; --c-question: #9a8cff;
}
.dxm-d-soft .dxm-icon { width: 64px; height: 64px; background: #e9ecf5; box-shadow: inset 6px 6px 12px rgba(139,148,190,.45), inset -6px -6px 12px rgba(255,255,255,.95); }
.dxm-d-soft .dxm-title { font-weight: 800; }
.dxm-d-soft .dxm-btn { padding: 12px 16px; box-shadow: 6px 6px 14px rgba(139,148,190,.5), -5px -5px 12px rgba(255,255,255,.9); }
.dxm-d-soft .dxm-btn-ok { box-shadow: 6px 6px 14px rgba(139,148,190,.55), -4px -4px 10px rgba(255,255,255,.85); }
.dxm-d-soft .dxm-btn:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,.18); transform: none; }
.dxm-d-soft .dxm-input { border: 0; border-radius: 999px; padding: 12px 18px; box-shadow: inset 5px 5px 10px rgba(139,148,190,.45), inset -5px -5px 10px rgba(255,255,255,.95); }
.dxm-d-soft .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-toast.dxm-d-soft { border: 0; }

/* ══ 8. bold — 상단 컬러 띠, 꽉 찬 버튼 ═══════════════════ */
.dxm-d-bold {
  --bg: #ffffff; --fg: #0f172a; --muted: #475569; --border: #e2e8f0; --radius: 10px; --btn-r: 8px; --w: 400px;
  --overlay: rgba(15,23,42,.62); --shadow: 0 30px 80px rgba(0,0,0,.4);
  --c-info: #2563eb; --c-success: #16a34a; --c-warning: #ea580c; --c-error: #dc2626; --c-question: #7c3aed;
  --ok-bg: var(--tc); --ok-fg: #ffffff; --cancel-bg: #e2e8f0; --cancel-fg: #334155;
}
.dxm-d-bold .dxm-box { text-align: left; padding: 24px 26px 22px; border-top: 8px solid var(--tc); }
.dxm-d-bold .dxm-icon { width: 46px; height: 46px; margin: 0 0 12px; background: var(--tc); color: #fff; border-radius: 10px; }
.dxm-d-bold .dxm-icon svg { width: 28px; height: 28px; }
.dxm-d-bold .dxm-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.dxm-d-bold .dxm-icon + .dxm-msg { color: var(--muted); }
.dxm-d-bold .dxm-btns { margin-top: 22px; }
.dxm-d-bold .dxm-btn { padding: 13px 14px; font-weight: 700; }
.dxm-d-bold .dxm-btn-ok { box-shadow: 0 6px 16px rgba(15,23,42,.22); }
.dxm-toast.dxm-d-bold { border-left: 6px solid var(--tc); border-radius: 8px; }

/* ══ 9. brutal — 네오 브루탈리즘(두꺼운 선 + 하드 섀도) ═══ */
.dxm-d-brutal {
  --bg: #fff3b0; --fg: #111111; --muted: #222222; --border: #111111; --radius: 0; --btn-r: 0; --w: 400px;
  --overlay: rgba(17,17,17,.55); --shadow: 8px 8px 0 #111111; --input-bg: #ffffff;
  --ok-bg: #ff5c8a; --ok-fg: #111111; --cancel-bg: #ffffff; --cancel-fg: #111111;
  --c-info: #3b82f6; --c-success: #22c55e; --c-warning: #f59e0b; --c-error: #ef4444; --c-question: #a855f7;
  font-family: 'Space Grotesk', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
.dxm-d-brutal .dxm-box { border: 3px solid #111; text-align: left; padding: 24px 24px 22px; }
.dxm-d-brutal .dxm-icon { width: 52px; height: 52px; margin: 0 0 12px; border: 3px solid #111; border-radius: 0; background: var(--tc); color: #111; box-shadow: 4px 4px 0 #111; }
.dxm-d-brutal .dxm-title { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.dxm-d-brutal .dxm-msg { color: #111; font-weight: 500; }
.dxm-d-brutal .dxm-btns { gap: 14px; margin-top: 24px; }
.dxm-d-brutal .dxm-btn { border: 3px solid #111; font-weight: 900; text-transform: uppercase; box-shadow: 4px 4px 0 #111; transition: transform .08s, box-shadow .08s; }
.dxm-d-brutal .dxm-btn:hover { filter: none; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #111; }
.dxm-d-brutal .dxm-btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #111; }
.dxm-d-brutal .dxm-input { border: 3px solid #111; border-radius: 0; font-weight: 600; }
.dxm-d-brutal .dxm-input:focus { box-shadow: 4px 4px 0 #111; }
.dxm-d-brutal .dxm-spin i { border: 5px solid #111; border-top-color: var(--tc); border-radius: 0; }
.dxm-toast.dxm-d-brutal { border: 3px solid #111; font-weight: 800; box-shadow: 5px 5px 0 #111; }

/* ══ 10. minimal — 아이콘 없는 얇고 조용한 형태 ═══════════ */
.dxm-d-minimal {
  --bg: #ffffff; --fg: #111111; --muted: #555555; --border: #e5e5e5; --radius: 2px; --btn-r: 0; --w: 360px;
  --overlay: rgba(255,255,255,.72); --shadow: 0 0 0 1px #e5e5e5, 0 18px 50px rgba(0,0,0,.1);
  --ok-bg: transparent; --ok-fg: #111111; --cancel-bg: transparent; --cancel-fg: #8a8a8a;
}
.dxm-d-minimal .dxm-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dxm-d-minimal .dxm-box { text-align: left; padding: 26px 26px 18px; }
.dxm-d-minimal .dxm-icon { display: none; }
.dxm-d-minimal .dxm-title { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.dxm-d-minimal .dxm-msg { font-size: 14px; color: var(--fg); }
.dxm-d-minimal .dxm-title + .dxm-msg { color: var(--muted); }
.dxm-d-minimal .dxm-input { border: 0; border-bottom: 1px solid #111; border-radius: 0; padding: 8px 0; background: transparent; }
.dxm-d-minimal .dxm-input:focus { box-shadow: none; border-bottom-width: 2px; }
.dxm-d-minimal .dxm-btns { justify-content: flex-end; gap: 22px; margin-top: 24px; }
.dxm-d-minimal .dxm-btn { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 6px 0; font-size: 14px; font-weight: 500; background: transparent; border-bottom: 1px solid transparent; }
.dxm-d-minimal .dxm-btn-ok { font-weight: 700; border-bottom-color: #111; }
.dxm-d-minimal .dxm-btn:hover { filter: none; opacity: .65; }
.dxm-d-minimal .dxm-btn:focus { outline: 0; border-bottom-color: #111; }
.dxm-d-minimal .dxm-spin i { border-width: 2px; }
.dxm-toast.dxm-d-minimal { border-radius: 2px; font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.1); }

/* ══════════════════════════════════════════════════════════
   11 ~ 30 : 트렌드 디자인 확장
   ══════════════════════════════════════════════════════════ */

/* ══ 11. galaxy — 은하수 · 별 · 성운 ═══════════════════════ */
.dxm-d-galaxy {
  --bg: radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1.4px 1.4px at 58% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 82% 64%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1.2px 1.2px at 92% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,.8), transparent 60%),
        radial-gradient(120% 90% at 85% 0%, rgba(192,77,255,.38), transparent 55%), radial-gradient(110% 90% at 0% 100%, rgba(59,130,246,.34), transparent 55%),
        linear-gradient(160deg, #0b1030, #170d3a 55%, #240f52);
  --fg: #eef0ff; --muted: #b3b9ee; --border: rgba(167,139,250,.38); --radius: 22px;
  --overlay: radial-gradient(ellipse at 50% 15%, rgba(88,56,170,.55), rgba(3,4,18,.9) 70%);
  --shadow: 0 0 0 1px rgba(167,139,250,.35), 0 0 50px rgba(124,92,255,.35), 0 24px 70px rgba(0,0,0,.6);
  --ok-bg: linear-gradient(135deg, #7c5cff, #c04dff); --ok-fg: #fff; --cancel-bg: rgba(255,255,255,.1); --cancel-fg: #d6d9ff; --input-bg: rgba(255,255,255,.08);
  --c-info: #a5b4fc; --c-success: #6ee7b7; --c-warning: #fcd34d; --c-error: #fda4af; --c-question: #c4b5fd;
}
.dxm-d-galaxy .dxm-icon { background: rgba(255,255,255,.1); box-shadow: 0 0 22px rgba(167,139,250,.55), inset 0 0 0 1px rgba(255,255,255,.2); }
.dxm-d-galaxy .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-galaxy .dxm-btn-ok { box-shadow: 0 6px 22px rgba(124,92,255,.55); }

/* ══ 12. oneui — 둥글고 편안한 모바일 다이얼로그 ═══════════ */
.dxm-d-oneui {
  --bg: #fcfcfd; --fg: #111111; --muted: #4a4a4f; --border: #ececf0; --radius: 30px; --w: 340px; --btn-r: 999px;
  --overlay: rgba(0,0,0,.4); --shadow: 0 8px 40px rgba(0,0,0,.2);
  --ok-bg: #3e91ff; --ok-fg: #fff; --cancel-bg: #eeeff3; --cancel-fg: #1a1a1a; --input-bg: #f3f4f7;
  --c-info: #3e91ff; --c-success: #22b573; --c-warning: #ff9f1a; --c-error: #f5455c; --c-question: #3e91ff;
}
.dxm-d-oneui .dxm-box { padding: 30px 22px 22px; }
.dxm-d-oneui .dxm-icon { background: rgba(62,145,255,.12); }
.dxm-d-oneui .dxm-title { font-size: 20px; font-weight: 600; }
.dxm-d-oneui .dxm-btn { padding: 14px 12px; font-weight: 500; font-size: 16px; }
.dxm-d-oneui .dxm-input { border: 0; border-radius: 16px; padding: 14px 16px; }

/* ══ 13. aurora — 오로라 빛 번짐 ═══════════════════════════ */
.dxm-d-aurora {
  --bg: radial-gradient(90% 70% at 15% 0%, rgba(52,211,153,.32), transparent 60%), radial-gradient(90% 70% at 100% 20%, rgba(167,139,250,.32), transparent 60%),
        radial-gradient(80% 60% at 40% 100%, rgba(56,189,248,.3), transparent 60%), linear-gradient(160deg, #07192b, #0c2540);
  --fg: #ecfeff; --muted: #a8cde0; --border: rgba(125,211,252,.3); --radius: 24px;
  --overlay: linear-gradient(160deg, rgba(4,16,30,.86), rgba(12,34,60,.84));
  --shadow: 0 0 0 1px rgba(125,211,252,.3), 0 20px 70px rgba(14,165,233,.28);
  --ok-bg: linear-gradient(120deg, #34d399, #38bdf8 55%, #a78bfa); --ok-fg: #052a2e; --cancel-bg: rgba(255,255,255,.1); --cancel-fg: #d3eefc; --input-bg: rgba(255,255,255,.08);
  --c-info: #7dd3fc; --c-success: #6ee7b7; --c-warning: #fde68a; --c-error: #fda4af; --c-question: #c4b5fd;
}
.dxm-d-aurora .dxm-icon { background: rgba(255,255,255,.1); box-shadow: 0 0 24px rgba(56,189,248,.45); }
.dxm-d-aurora .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-aurora .dxm-btn-ok { font-weight: 700; }

/* ══ 14. liquid — 리퀴드 글래스(투명 굴절 느낌) ════════════ */
.dxm-d-liquid {
  --bg: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); --fg: #0f172a; --muted: #1e293b; --border: rgba(255,255,255,.55);
  --radius: 30px; --bf: blur(30px) saturate(190%) brightness(1.08); --btn-r: 999px;
  --overlay: linear-gradient(135deg, rgba(125,211,252,.7), rgba(196,181,253,.65) 50%, rgba(253,164,175,.65));
  --shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -1.5px 1px rgba(255,255,255,.25), inset 0 0 22px rgba(255,255,255,.18), 0 22px 60px rgba(30,41,120,.28);
  --ok-bg: rgba(255,255,255,.88); --ok-fg: #0f172a; --cancel-bg: rgba(255,255,255,.28); --cancel-fg: #0f172a; --input-bg: rgba(255,255,255,.35);
  --c-info: #2563eb; --c-success: #059669; --c-warning: #d97706; --c-error: #dc2626; --c-question: #7c3aed;
}
.dxm-d-liquid .dxm-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dxm-d-liquid .dxm-box { border: 1px solid var(--border); }
.dxm-d-liquid .dxm-icon { background: rgba(255,255,255,.5); box-shadow: inset 0 1px 1px #fff, 0 6px 18px rgba(30,41,120,.18); }
.dxm-d-liquid .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-liquid .dxm-btn { border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 4px 14px rgba(30,41,120,.14); }

/* ══ 15. clay — 클레이모피즘(말랑한 3D 점토) ═══════════════ */
.dxm-d-clay {
  --bg: #fff1e6; --fg: #5a3a2e; --muted: #8a6a5c; --border: transparent; --radius: 36px; --btn-r: 22px; --w: 360px;
  --overlay: rgba(255,170,130,.4); --input-bg: #ffe6d4;
  --shadow: 0 26px 40px rgba(255,140,100,.3), inset -10px -10px 20px rgba(255,150,110,.28), inset 10px 10px 20px rgba(255,255,255,.95);
  --ok-bg: #ff7a59; --ok-fg: #fff; --cancel-bg: #ffe0cc; --cancel-fg: #8a4a36;
  --c-info: #ff7a59; --c-success: #34c98e; --c-warning: #ffab2e; --c-error: #ff5470; --c-question: #9b7bff;
}
.dxm-d-clay .dxm-icon { width: 64px; height: 64px; background: #fff1e6; color: var(--tc); box-shadow: 8px 10px 18px rgba(255,140,100,.35), inset -6px -6px 12px rgba(255,150,110,.3), inset 6px 6px 12px rgba(255,255,255,.95); }
.dxm-d-clay .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-clay .dxm-title { font-weight: 800; }
.dxm-d-clay .dxm-btn { padding: 14px; box-shadow: 0 10px 16px rgba(255,140,100,.3), inset -4px -4px 8px rgba(0,0,0,.08), inset 4px 4px 8px rgba(255,255,255,.7); }
.dxm-d-clay .dxm-btn-ok { box-shadow: 0 10px 18px rgba(255,100,60,.4), inset -4px -4px 8px rgba(0,0,0,.14), inset 4px 4px 8px rgba(255,255,255,.35); }
.dxm-d-clay .dxm-btn:active { transform: translateY(2px) scale(.98); }
.dxm-d-clay .dxm-input { border: 0; border-radius: 20px; padding: 13px 18px; box-shadow: inset 4px 4px 10px rgba(255,140,100,.25), inset -4px -4px 10px rgba(255,255,255,.9); }

/* ══ 16. mesh — 메시 그라데이션(다크) ═════════════════════ */
.dxm-d-mesh {
  --bg: radial-gradient(60% 55% at 0% 0%, rgba(255,0,128,.42), transparent 62%), radial-gradient(60% 55% at 100% 0%, rgba(0,160,255,.4), transparent 62%),
        radial-gradient(70% 60% at 50% 105%, rgba(124,70,255,.42), transparent 62%), #0e0e16;
  --fg: #ffffff; --muted: #c8c8dc; --border: rgba(255,255,255,.14); --radius: 26px;
  --overlay: rgba(6,6,12,.78); --shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.7);
  --ok-bg: #ffffff; --ok-fg: #0e0e16; --cancel-bg: rgba(255,255,255,.12); --cancel-fg: #fff; --btn-r: 999px; --input-bg: rgba(255,255,255,.08);
  --c-info: #93c5fd; --c-success: #86efac; --c-warning: #fde047; --c-error: #fda4af; --c-question: #d8b4fe;
}
.dxm-d-mesh .dxm-icon { background: rgba(255,255,255,.12); }
.dxm-d-mesh .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-mesh .dxm-title { font-weight: 800; letter-spacing: -.02em; }

/* ══ 17. sunset — 따뜻한 노을 ═════════════════════════════ */
.dxm-d-sunset {
  --bg: linear-gradient(165deg, #fff8ef, #ffe3d3 60%, #ffd2cf); --fg: #4a2326; --muted: #7d4a46; --border: #ffc9b8; --radius: 26px;
  --overlay: linear-gradient(180deg, rgba(120,40,60,.42), rgba(60,20,50,.55)); --shadow: 0 24px 60px rgba(220,80,70,.28);
  --ok-bg: linear-gradient(135deg, #fb7185, #f59e0b); --ok-fg: #fff; --cancel-bg: rgba(255,255,255,.7); --cancel-fg: #7d4a46; --btn-r: 14px; --input-bg: rgba(255,255,255,.7);
  --c-info: #f97316; --c-success: #16a34a; --c-warning: #d97706; --c-error: #e11d48; --c-question: #c2410c;
}
.dxm-d-sunset .dxm-icon { background: rgba(255,255,255,.7); box-shadow: 0 6px 18px rgba(251,113,133,.25); }
.dxm-d-sunset .dxm-btn-ok { box-shadow: 0 8px 20px rgba(251,113,133,.45); }

/* ══ 18. ocean — 청량한 바다 ══════════════════════════════ */
.dxm-d-ocean {
  --bg: linear-gradient(165deg, #f0fdff, #dbeafe); --fg: #0b3b5c; --muted: #38617f; --border: #bae6fd; --radius: 22px;
  --overlay: linear-gradient(180deg, rgba(8,47,73,.5), rgba(3,25,50,.62)); --shadow: 0 24px 60px rgba(14,116,144,.3);
  --ok-bg: linear-gradient(135deg, #06b6d4, #3b82f6); --ok-fg: #fff; --cancel-bg: rgba(255,255,255,.75); --cancel-fg: #38617f; --input-bg: #fff;
  --c-info: #0284c7; --c-success: #059669; --c-warning: #d97706; --c-error: #e11d48; --c-question: #4f46e5;
}
.dxm-d-ocean .dxm-icon { background: rgba(255,255,255,.8); box-shadow: 0 6px 16px rgba(14,116,144,.2); }
.dxm-d-ocean .dxm-btn-ok { box-shadow: 0 8px 20px rgba(6,182,212,.4); }

/* ══ 19. sakura — 벚꽃 파스텔 ═════════════════════════════ */
.dxm-d-sakura {
  --bg: linear-gradient(170deg, #fff7fa, #ffeaf2); --fg: #7a1f45; --muted: #a8577a; --border: #fbcfe8; --radius: 28px; --btn-r: 999px;
  --overlay: rgba(190,80,130,.35); --shadow: 0 22px 54px rgba(244,114,182,.32);
  --ok-bg: linear-gradient(135deg, #f472b6, #fb7185); --ok-fg: #fff; --cancel-bg: #fde4ef; --cancel-fg: #a8577a; --input-bg: #fff;
  --c-info: #ec4899; --c-success: #10b981; --c-warning: #f59e0b; --c-error: #e11d48; --c-question: #c026d3;
}
.dxm-d-sakura .dxm-icon { background: #ffe0ee; box-shadow: 0 0 0 6px rgba(251,207,232,.5); }
.dxm-d-sakura .dxm-btn-ok { box-shadow: 0 8px 18px rgba(244,114,182,.45); }

/* ══ 20. forest — 차분한 숲 ═══════════════════════════════ */
.dxm-d-forest {
  --bg: #f4f7ef; --fg: #1f3d2b; --muted: #4e6b57; --border: #d6e2cf; --radius: 16px; --btn-r: 10px;
  --overlay: rgba(18,38,26,.55); --shadow: 0 22px 54px rgba(31,61,43,.35);
  --ok-bg: #2f6f4e; --ok-fg: #fff; --cancel-bg: #e4ecdc; --cancel-fg: #3a5845; --input-bg: #fff;
  --c-info: #2f6f4e; --c-success: #3f9b5f; --c-warning: #c7861b; --c-error: #b9473d; --c-question: #5f7f3a;
}
.dxm-d-forest .dxm-icon { background: #e1ecd6; }
.dxm-d-forest .dxm-box { border: 1px solid var(--border); }

/* ══ 21. terminal — 터미널 ════════════════════════════════ */
.dxm-d-terminal {
  --bg: #070c08; --fg: #4ade80; --muted: #86efac; --border: #1f6f3a; --radius: 4px; --btn-r: 2px; --w: 420px; --input-bg: #0b140d;
  --overlay: rgba(0,6,2,.82); --shadow: 0 0 0 1px #1f6f3a, 0 0 30px rgba(74,222,128,.28);
  --ok-bg: #4ade80; --ok-fg: #04140a; --cancel-bg: transparent; --cancel-fg: #4ade80;
  --c-info: #4ade80; --c-success: #4ade80; --c-warning: #facc15; --c-error: #f87171; --c-question: #67e8f9;
  font-family: 'JetBrains Mono', 'D2Coding', 'Consolas', 'Courier New', monospace;
}
.dxm-d-terminal .dxm-box { text-align: left; padding: 22px 22px 18px; }
.dxm-d-terminal .dxm-icon { display: none; }
.dxm-d-terminal .dxm-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.dxm-d-terminal .dxm-title:before { content: '$ '; opacity: .7; }
.dxm-d-terminal .dxm-msg { font-size: 14px; color: #a7f3c0; }
.dxm-d-terminal .dxm-msg:before { content: '> '; opacity: .6; }
.dxm-d-terminal .dxm-btns { justify-content: flex-end; }
.dxm-d-terminal .dxm-btn { -webkit-flex: 0 0 auto; flex: 0 0 auto; border: 1px solid #4ade80; font-family: inherit; font-size: 13px; padding: 8px 16px; text-transform: lowercase; }
.dxm-d-terminal .dxm-btn:before { content: '['; margin-right: 4px; } .dxm-d-terminal .dxm-btn:after { content: ']'; margin-left: 4px; }
.dxm-d-terminal .dxm-input { border-color: #1f6f3a; font-family: inherit; border-radius: 2px; }
.dxm-toast.dxm-d-terminal { font-weight: 500; }

/* ══ 22. cyber — 사이버펑크 ═══════════════════════════════ */
.dxm-d-cyber {
  --bg: #0d0d12; --fg: #f4f4f8; --muted: #b5b5c6; --border: #fcee0a; --radius: 0; --btn-r: 0; --w: 400px; --input-bg: #15151d;
  --overlay: rgba(6,6,10,.82); --shadow: 0 0 40px rgba(252,238,10,.22);
  --ok-bg: #fcee0a; --ok-fg: #000; --cancel-bg: transparent; --cancel-fg: #ff2a6d;
  --c-info: #00f0ff; --c-success: #39ff88; --c-warning: #fcee0a; --c-error: #ff2a6d; --c-question: #c77dff;
}
.dxm-d-cyber .dxm-box { text-align: left; border: 2px solid #fcee0a; padding: 26px 24px 20px;
  -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.dxm-d-cyber .dxm-icon { width: 46px; height: 46px; margin: 0 0 12px; border-radius: 0; background: transparent; border: 2px solid var(--tc); }
.dxm-d-cyber .dxm-title { color: #fcee0a; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.dxm-d-cyber .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-cyber .dxm-btn { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border: 2px solid currentColor;
  -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.dxm-d-cyber .dxm-btn-ok { border-color: #fcee0a; }
.dxm-d-cyber .dxm-input { border: 2px solid #3a3a4a; border-radius: 0; }
.dxm-d-cyber .dxm-input:focus { border-color: #00f0ff; box-shadow: none; }
.dxm-toast.dxm-d-cyber { border: 2px solid #fcee0a; border-radius: 0; text-transform: uppercase; letter-spacing: .05em; }

/* ══ 23. hologram — 무지갯빛 홀로그램 테두리 ═══════════════ */
.dxm-d-hologram {
  --bg: linear-gradient(#11132a, #11132a) padding-box, linear-gradient(135deg, #ff8ad8, #8ad4ff, #b8ff8a, #ffd98a, #ff8ad8) border-box;
  --fg: #f2f3ff; --muted: #b9bde6; --border: transparent; --radius: 22px; --btn-r: 12px; --input-bg: rgba(255,255,255,.07);
  --overlay: rgba(6,7,20,.8); --shadow: 0 0 40px rgba(138,212,255,.25), 0 24px 70px rgba(0,0,0,.6);
  --ok-bg: linear-gradient(135deg, #ff8ad8, #8ad4ff 55%, #b8ff8a); --ok-fg: #101226; --cancel-bg: rgba(255,255,255,.1); --cancel-fg: #dfe2ff;
  --c-info: #8ad4ff; --c-success: #b8ff8a; --c-warning: #ffd98a; --c-error: #ff8aa8; --c-question: #d6b3ff;
}
.dxm-d-hologram .dxm-box { border: 2px solid transparent; }
.dxm-d-hologram .dxm-icon { background: rgba(255,255,255,.08); box-shadow: 0 0 20px rgba(138,212,255,.4); }
.dxm-d-hologram .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-hologram .dxm-btn-ok { font-weight: 800; }
.dxm-toast.dxm-d-hologram { border: 2px solid transparent; }

/* ══ 24. blueprint — 청사진 ═══════════════════════════════ */
.dxm-d-blueprint {
  --bg: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0/20px 20px, linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0/20px 20px, #0b3a6e;
  --fg: #eaf3ff; --muted: #b9d4f2; --border: rgba(255,255,255,.7); --radius: 3px; --btn-r: 2px; --w: 400px; --input-bg: rgba(255,255,255,.08);
  --overlay: rgba(4,24,50,.8); --shadow: 0 0 0 4px #0b3a6e, 0 0 0 5px rgba(255,255,255,.5), 0 24px 60px rgba(0,0,0,.5);
  --ok-bg: #eaf3ff; --ok-fg: #0b3a6e; --cancel-bg: transparent; --cancel-fg: #eaf3ff;
  --c-info: #9fd0ff; --c-success: #a7f3d0; --c-warning: #fde68a; --c-error: #fecaca; --c-question: #c7d2fe;
  font-family: 'D2Coding', 'Consolas', 'Courier New', monospace;
}
.dxm-d-blueprint .dxm-box { border: 2px dashed rgba(255,255,255,.7); text-align: left; }
.dxm-d-blueprint .dxm-icon { background: transparent; border: 2px dashed rgba(255,255,255,.7); border-radius: 4px; }
.dxm-d-blueprint .dxm-title { text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.dxm-d-blueprint .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-blueprint .dxm-btn { border: 1.5px solid #eaf3ff; font-family: inherit; font-size: 13px; letter-spacing: .06em; }
.dxm-d-blueprint .dxm-input { border: 1.5px dashed rgba(255,255,255,.7); border-radius: 2px; }
.dxm-toast.dxm-d-blueprint { border: 2px dashed rgba(255,255,255,.7); }

/* ══ 25. paper — 종이 질감 ════════════════════════════════ */
.dxm-d-paper {
  --bg: repeating-linear-gradient(0deg, rgba(120,90,40,.05) 0 1px, transparent 1px 28px), #fbf6ea;
  --fg: #3a2f22; --muted: #6d5d47; --border: #e3d7ba; --radius: 3px; --btn-r: 2px; --input-bg: #fffdf6;
  --overlay: rgba(60,45,20,.5); --shadow: 0 2px 0 #e3d7ba, 0 3px 0 #fbf6ea, 0 4px 0 #e3d7ba, 0 22px 40px rgba(80,60,20,.28);
  --ok-bg: #3a2f22; --ok-fg: #fbf6ea; --cancel-bg: transparent; --cancel-fg: #6d5d47;
  --c-info: #5b6b8a; --c-success: #5c7f4d; --c-warning: #b8791c; --c-error: #a84a3c; --c-question: #7a5b8a;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', 'Georgia', serif;
}
.dxm-d-paper .dxm-box { border: 1px solid var(--border); }
.dxm-d-paper .dxm-icon { background: transparent; border: 1.5px solid var(--tc); }
.dxm-d-paper .dxm-title { font-weight: 800; letter-spacing: .02em; }
.dxm-d-paper .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-paper .dxm-btn { border: 1px solid #3a2f22; font-family: inherit; }
.dxm-d-paper .dxm-btn-cancel { border-color: #c9bb98; }
.dxm-d-paper .dxm-input { border-radius: 2px; font-family: inherit; }

/* ══ 26. pixel — 8비트 레트로 게임 ════════════════════════ */
.dxm-d-pixel {
  --bg: #1d2b53; --fg: #ffffff; --muted: #c2c3c7; --border: #ffffff; --radius: 0; --btn-r: 0; --w: 400px; --input-bg: #0f1a3d;
  --overlay: rgba(0,0,0,.72); --shadow: 0 0 0 4px #000, 8px 8px 0 4px rgba(0,0,0,.45);
  --ok-bg: #00e436; --ok-fg: #000; --cancel-bg: #ff004d; --cancel-fg: #fff;
  --c-info: #29adff; --c-success: #00e436; --c-warning: #ffec27; --c-error: #ff004d; --c-question: #ff77a8;
  font-family: 'DotGothic16', 'Galmuri11', 'Press Start 2P', 'Courier New', monospace;
}
.dxm-d-pixel .dxm-box { border: 4px solid #fff; text-align: left; }
.dxm-d-pixel .dxm-icon { border-radius: 0; background: #0f1a3d; border: 3px solid var(--tc); }
.dxm-d-pixel .dxm-title { font-size: 18px; font-weight: 700; text-transform: uppercase; color: #ffec27; }
.dxm-d-pixel .dxm-icon + .dxm-msg { color: #fff; }
.dxm-d-pixel .dxm-btns { gap: 14px; }
.dxm-d-pixel .dxm-btn { border: 4px solid #000; font-family: inherit; font-weight: 700; box-shadow: 0 4px 0 #000; }
.dxm-d-pixel .dxm-btn:active { transform: translateY(4px); box-shadow: none; }
.dxm-d-pixel .dxm-btn:hover { filter: brightness(1.12); }
.dxm-d-pixel .dxm-input { border: 3px solid #fff; border-radius: 0; font-family: inherit; }
.dxm-d-pixel .dxm-spin i { border-radius: 0; border: 5px solid #fff; border-top-color: #ffec27; }
.dxm-toast.dxm-d-pixel { border: 3px solid #fff; border-radius: 0; box-shadow: 0 0 0 3px #000, 5px 5px 0 3px rgba(0,0,0,.45); }

/* ══ 27. corporate — 정돈된 업무용 ════════════════════════ */
.dxm-d-corporate {
  --bg: #ffffff; --fg: #0f2742; --muted: #4a5b72; --border: #dbe3ee; --radius: 6px; --btn-r: 4px; --w: 420px;
  --overlay: rgba(11,29,51,.55); --shadow: 0 18px 48px rgba(11,29,51,.28);
  --ok-bg: #0f4c81; --ok-fg: #fff; --cancel-bg: #fff; --cancel-fg: #0f2742;
  --c-info: #0f4c81; --c-success: #1e7f4f; --c-warning: #b7791f; --c-error: #b42318; --c-question: #3b5b92;
}
.dxm-d-corporate .dxm-box { text-align: left; padding: 24px 26px 20px; border-top: 4px solid var(--tc); }
.dxm-d-corporate .dxm-icon { width: 38px; height: 38px; margin: 0 0 10px; background: transparent; color: var(--tc); border-radius: 0; }
.dxm-d-corporate .dxm-icon svg { width: 28px; height: 28px; }
.dxm-d-corporate .dxm-title { font-size: 17px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.dxm-d-corporate .dxm-icon + .dxm-msg { color: var(--muted); }
.dxm-d-corporate .dxm-btns { justify-content: flex-end; }
.dxm-d-corporate .dxm-btn { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 88px; font-weight: 600; font-size: 14px; border: 1px solid #c4d0e0; }
.dxm-d-corporate .dxm-btn-ok { border-color: #0f4c81; }
.dxm-toast.dxm-d-corporate { border-left: 4px solid var(--tc); border-radius: 4px; }

/* ══ 28. dopamine — 도파민 컬러 팝 ════════════════════════ */
.dxm-d-dopamine {
  --bg: #ffffff; --fg: #1a1a1a; --muted: #3a3a3a; --border: #1a1a1a; --radius: 30px; --btn-r: 999px; --input-bg: #fff8d6;
  --overlay: repeating-linear-gradient(45deg, rgba(255,230,109,.92) 0 18px, rgba(255,214,64,.92) 18px 36px);
  --shadow: 7px 7px 0 #ff5ec4, 14px 14px 0 #5ee7ff;
  --ok-bg: #ff5ec4; --ok-fg: #1a1a1a; --cancel-bg: #fff; --cancel-fg: #1a1a1a;
  --c-info: #5ee7ff; --c-success: #7cf29a; --c-warning: #ffd23f; --c-error: #ff6b6b; --c-question: #b79cff;
}
.dxm-d-dopamine .dxm-box { border: 3px solid #1a1a1a; }
.dxm-d-dopamine .dxm-icon { width: 58px; height: 58px; background: var(--tc); color: #1a1a1a; border: 3px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; }
.dxm-d-dopamine .dxm-title { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.dxm-d-dopamine .dxm-icon + .dxm-msg { color: var(--fg); font-weight: 500; }
.dxm-d-dopamine .dxm-btn { border: 3px solid #1a1a1a; font-weight: 900; box-shadow: 3px 3px 0 #1a1a1a; }
.dxm-d-dopamine .dxm-btn:hover { filter: none; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #1a1a1a; }
.dxm-d-dopamine .dxm-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1a1a1a; }
.dxm-d-dopamine .dxm-input { border: 3px solid #1a1a1a; border-radius: 18px; font-weight: 600; }
.dxm-toast.dxm-d-dopamine { border: 3px solid #1a1a1a; font-weight: 800; box-shadow: 4px 4px 0 #ff5ec4; }

/* ══ 29. sheet — 아래에서 올라오는 바텀 시트 ═══════════════ */
.dxm-d-sheet {
  --bg: #ffffff; --fg: #111827; --muted: #4b5563; --border: #e5e7eb; --radius: 26px; --btn-r: 16px; --w: 560px;
  --overlay: rgba(15,23,42,.5); --shadow: 0 -10px 50px rgba(0,0,0,.25);
  --ok-bg: #4f46e5; --ok-fg: #fff; --cancel-bg: #f3f4f6; --cancel-fg: #374151;
}
.dxm-d-sheet.dxm-root { align-items: flex-end; padding: 0; }
.dxm-d-sheet .dxm-box { max-width: var(--w); border-radius: 26px 26px 0 0; padding: 30px 22px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.dxm-d-sheet.dxm-in .dxm-box { transform: none; }
.dxm-d-sheet .dxm-box:before { content: ''; position: absolute; top: 10px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: #d1d5db; }
.dxm-d-sheet .dxm-btns { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; gap: 8px; }
.dxm-d-sheet .dxm-btn { padding: 15px; font-size: 16px; }
.dxm-d-sheet.dxm-k-loading .dxm-box { max-width: var(--w); }

/* ══ 30. fullscreen — 화면 전체 안내 ═══════════════════════ */
.dxm-d-fullscreen {
  --bg: linear-gradient(160deg, #4338ca, #7c3aed 60%, #c026d3); --fg: #ffffff; --muted: rgba(255,255,255,.88); --border: transparent; --radius: 0; --btn-r: 16px; --w: none;
  --overlay: transparent; --shadow: none;
  --ok-bg: #ffffff; --ok-fg: #4338ca; --cancel-bg: rgba(255,255,255,.2); --cancel-fg: #ffffff; --input-bg: rgba(255,255,255,.16);
  --c-info: #ffffff; --c-success: #bbf7d0; --c-warning: #fde68a; --c-error: #fecaca; --c-question: #e0e7ff;
}
.dxm-d-fullscreen.dxm-root { padding: 0; }
.dxm-d-fullscreen .dxm-box { max-width: none; width: 100%; height: 100%; max-height: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; }
.dxm-d-fullscreen .dxm-icon { width: 92px; height: 92px; margin-bottom: 22px; background: rgba(255,255,255,.18); }
.dxm-d-fullscreen .dxm-icon svg { width: 54px; height: 54px; }
.dxm-d-fullscreen .dxm-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.dxm-d-fullscreen .dxm-msg { font-size: 18px; max-width: 520px; }
.dxm-d-fullscreen .dxm-icon + .dxm-msg { color: var(--fg); }
.dxm-d-fullscreen .dxm-input { max-width: 420px; color: #fff; border-color: rgba(255,255,255,.5); }
.dxm-d-fullscreen .dxm-btns { width: 100%; max-width: 380px; margin-top: 32px; }
.dxm-d-fullscreen .dxm-btn { padding: 16px; font-size: 17px; }
.dxm-d-fullscreen.dxm-k-loading .dxm-box { max-width: none; padding: 32px 24px; }
.dxm-d-fullscreen .dxm-spin i { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.dxm-toast.dxm-d-fullscreen { border: 0; }
.dxm-toast.dxm-d-fullscreen { border-radius: 14px; background: #ffffff; color: #4338ca; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.dxm-toast.dxm-d-fullscreen .dxm-ticon { color: #4338ca; }