/* =============================================================================
 * swnm 모달 컴포넌트 — .ui-modal (사인오프 2026-06-10)
 * -----------------------------------------------------------------------------
 * 가운데 뜨는 표준 모달의 "껍데기"(overlay + 패널 + 헤더/바디/푸터 + 닫기).
 * 역할(확인/폼/상세/결과)은 body 안 내용으로 자유. hex 하드코딩 금지(토큰만).
 *
 * 구조:
 *   <div class="ui-modal">                              // overlay (뒷배경 + 가운데정렬)
 *     <div class="ui-modal__panel ui-modal--md">         // 패널 (크기등급)
 *       <div class="ui-modal__header">
 *         <h3 class="ui-modal__title">제목</h3>
 *         <button class="ui-btn ui-btn--icon" aria-label="닫기">
 *           <i class="ui-ico" style="--ui-ico:url('<%=ctx%>/images/icons/ic_close.svg')"></i>
 *         </button>
 *       </div>
 *       <div class="ui-modal__body"> … 역할별 내용 … </div>
 *       <div class="ui-modal__footer">
 *         <button class="ui-btn ui-btn--secondary">취소</button>
 *         <button class="ui-btn ui-btn--primary">저장</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * 열기/닫기는 JS에서 .ui-modal 의 표시(display/hidden)만 토글(기존 CommonModal 등과 연동 가능).
 * 범위: 가운데 뜨는 ①확인 ②폼 ③상세 ④결과. 사이드패널(left-modal-panel)·로딩 스피너는 별개.
 * ============================================================================= */

/* ===== overlay (뒷배경 + 가운데정렬) ===== */
.ui-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);            /* 2000 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);            /* 화면 가장자리 여백 */
  background: var(--overlay);         /* rgba(0,0,0,.5) */
}
/* 숨김 상태(JS 토글용) */
.ui-modal[hidden],
.ui-modal.is-hidden { display: none; }

/* ===== 패널 ===== */
.ui-modal__panel {
  display: flex;
  flex-direction: column;
  width: 520px;                       /* md 기본 */
  max-width: 90vw;
  max-height: 90vh;
  background: var(--bg-modal);
  color: var(--text-primary);
  border-radius: var(--radius-lg);    /* 12px */
  box-shadow: var(--shadow-xl);
  overflow: hidden;                   /* 모서리 안으로 헤더/푸터 정리 */
}

/* 크기 등급 (실측 군집) */
.ui-modal--sm .ui-modal__panel, .ui-modal__panel.ui-modal--sm { width: 400px; }
.ui-modal--md .ui-modal__panel, .ui-modal__panel.ui-modal--md { width: 520px; }
.ui-modal--lg .ui-modal__panel, .ui-modal__panel.ui-modal--lg { width: 820px; }
.ui-modal--xl .ui-modal__panel, .ui-modal__panel.ui-modal--xl { width: 1084px; }

/* ===== header ===== */
.ui-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);   /* 16px 24px */
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.ui-modal__title {
  margin: 0;
  font-size: var(--font-lg);          /* 18px */
  font-weight: var(--fw-bold);        /* 700 */
  color: var(--text-primary);
}

/* ===== body (스크롤 영역) ===== */
.ui-modal__body {
  padding: var(--space-6);            /* 24px */
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ===== footer ===== */
.ui-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);                /* 8px (버튼 사이) */
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}