/* ============================================
   Components - 공통 컴포넌트
   순수 CSS (Tailwind @apply 사용하지 않음)
   네이밍: block_element.is_state (언더스코어)
   ============================================ */

/* ── Scrollbar (공통 스크롤바) ─────────────── */

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background-color: var(--c-gray-100);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--c-gray-300);
  border-radius: var(--radius-full);
}

/* ── Button ─────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn_xs {
  padding: 0.125rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.25rem;
}

.btn_sm {
  padding: 0.375rem 0.875rem;
  /* py-1.5 px-3.5 */
}

.btn_md {
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
}

.btn_primary {
  color: var(--c-white);
  background-color: var(--c-primary-500);
  border: 1px solid var(--c-primary-500);
}

.btn_primary:hover:not(:disabled) {
  background-color: var(--c-primary-600);
  border-color: var(--c-primary-600);
}

.btn_danger {
  color: var(--c-gray-500);
  background-color: transparent;
  border: 1px solid var(--c-input-border);
}

.btn_danger:hover:not(:disabled) {
  background-color: var(--c-bg-hover);
}

.btn_danger_solid {
  color: #fff;
  background-color: var(--c-error);
  border: 1px solid var(--c-error);
}

.btn_danger_solid:hover:not(:disabled) {
  background-color: var(--c-error-dark);
  border-color: var(--c-error-dark);
}

.btn_danger_solid:disabled {
  opacity: 0.5;
}

.btn_outline {
  color: var(--c-gray-700);
  background-color: var(--c-white);
  border: 1px solid var(--c-input-border);
}

.btn_outline:hover:not(:disabled) {
  background-color: var(--c-gray-50);
}

.dark .btn_outline {
  color: var(--c-text-1);
  background-color: var(--c-surface);
  border-color: var(--c-border);
}

.dark .btn_outline:hover:not(:disabled) {
  background-color: var(--c-hover);
}

.btn_ghost {
  color: var(--c-primary-500);
  background-color: transparent;
  border: 1px solid transparent;
}

.btn_ghost:hover:not(:disabled) {
  background-color: var(--c-primary-50);
}

.dark .btn_ghost {
  color: var(--c-primary-600);
}

.dark .btn_ghost:hover:not(:disabled) {
  background-color: var(--c-selected);
}

.btn_full {
  width: 100%;
}

/* ── Tag ────────────────────────────────────── */

.tag {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  /* py-0.5 px-2 */
  border-radius: var(--radius-sm);
  background-color: var(--c-gray-100);
  color: var(--c-gray-500);
  margin-top: 0.25rem;
}

/* ── Toggle (텍스트 내장 토글) ─────────────── */

.toggle_wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 2.5rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--c-gray-300);
  cursor: pointer;
  transition: background-color 250ms var(--ease-default);
  user-select: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.toggle.is_on {
  background-color: var(--c-primary-500);
}

.toggle_thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--c-white);
  transition: left 250ms var(--ease-default);
}

.toggle.is_on .toggle_thumb {
  left: 1.375rem;
}

.toggle_labels {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
}

.toggle_text {
  flex: 1;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 2rem;
  transition: color 250ms var(--ease-default);
}

/* OFF 상태: "비활성" 선명, "활성" 흐림 */
.toggle_text.is_off {
  color: var(--c-gray-500);
}

.toggle_text.is_on_label {
  color: var(--c-white);
}

/* ON 상태: "비활성" 흐림, "활성" 선명 */
.toggle.is_on .toggle_text.is_off {
  color: rgba(255, 255, 255, 0.5);
}

.toggle.is_on .toggle_text.is_on_label {
  color: var(--c-white);
}

.toggle_status {
  font-size: 0.8rem;
  font-weight: 500;
}

.toggle_status.is_on {
  color: var(--c-gray-700);
}

.toggle_status.is_off {
  color: var(--c-gray-400);
}

/* Toggle Tooltip */
.toggle_wrap[data-hover] {
  position: relative;
}

.toggle_wrap[data-hover]::after {
  content: attr(data-hover);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-white);
  background-color: var(--c-gray-800);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-default);
  z-index: 50;
}

.toggle_wrap[data-hover]:hover::after {
  opacity: 1;
}

.dark .toggle_wrap[data-hover]::after {
  background-color: var(--c-surface-2);
}

/* ── Tooltip (범용 툴팁) ───────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-white);
  background-color: var(--c-gray-800);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-default);
  z-index: 50;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

.dark [data-tooltip]::after {
  background-color: var(--c-surface-2);
}

/* ── Badge ──────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.badge.is_active {
  background-color: var(--c-green-100);
  color: var(--c-green-800);
}

.badge.is_inactive {
  background-color: var(--c-gray-400);
  color: #fff;
}

/* ── Form ───────────────────────────────────── */

.form_group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form_label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--c-gray-600);
}

.form_required {
  color: var(--c-red-600);
}

.form_input {
  width: 100%;
  height: 2.7rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
}

.form_input:focus {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.dark .form_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.form_textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
  resize: none;
}

.form_textarea:focus {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.dark .form_textarea {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.form_select {
  width: 100%;
  height: 2.7rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
  background-color: var(--c-white);
}

.form_select:focus {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.dark .form_select {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.form_select_sm {
  height: 2rem;
  /* 32px = h-8 */
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* ── Tab ────────────────────────────────────── */

.tab_nav {
  display: flex;
  margin-bottom: -1px;
  border-bottom: 1px solid var(--c-input-border);
}

.tab_item {
  padding: 0.625rem 1.25rem;
  /* py-2.5 px-4 */
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--c-gray-500);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.tab_item:hover {
  color: var(--c-gray-700);
}

.tab_item.is_active {
  color: var(--c-primary-500);
  border-bottom-color: var(--c-primary-500);
  font-weight: 500;
}

.dark .tab_item {
  color: var(--c-text-3);
}

.dark .tab_item:hover {
  color: var(--c-text-2);
}

.dark .tab_item.is_active {
  color: var(--c-text-2);
}

/* ── Loading ────────────────────────────────── */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.loading_inner {
  text-align: center;
}

.loading_spinner {
  display: inline-block;
  width: 2rem;
  /* 32px */
  height: 2rem;
  border: 4px solid var(--c-primary-600);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.loading_text {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-600);
}

/* ── Empty State ────────────────────────────── */

.empty_state {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.empty_state_inner {
  text-align: center;
}

.empty_state_title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--c-gray-900);
}

.empty_state_desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-500);
}

/* ── Page Header ───────────────────────────── */

.page_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page_title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--c-gray-900);
}

.page_desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-600);
}

/* ── Card ──────────────────────────────────── */

.card {
  background-color: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.dark .card {
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
}

.card_body {
  padding: 1.5rem;
}

.card_title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--c-gray-900);
  margin-bottom: 1rem;
}

.card_count {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-gray-500);
}

/* ── Table ─────────────────────────────────── */

.table_wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
}

.table_head {
  background-color: var(--c-gray-50);
}

.table_th {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--c-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table_body>tr+tr {
  border-top: 1px solid var(--c-line);
}

.table_row:hover {
  background-color: var(--c-gray-50);
}

.dark .table_row:hover {
  background-color: var(--c-hover);
}

.table_td {
  padding: 1rem 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-900);
}

.table_td.is_bold {
  font-weight: 500;
}

.table_td.is_actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Data Table (데이터 테이블) ────────────── */

/* 테이블 기본 */
.dtable {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
}

/* colgroup 너비 유틸리티 (rem 단위) */
.dtable_col_3 {
  width: 3rem;
}

.dtable_col_4 {
  width: 4rem;
}

.dtable_col_5 {
  width: 5rem;
}

.dtable_col_6 {
  width: 6rem;
}

.dtable_col_7 {
  width: 7rem;
}

.dtable_col_8 {
  width: 7rem;
}

.dtable_col_10 {
  width: 10rem;
}

.dtable_col_12 {
  width: 14rem;
}

.dtable_col_14 {
  width: 11rem;
}

.dtable_col_16 {
  width: 16rem;
}

/* thead */
.dtable_thead_row {
  background-color: var(--c-gray-100);
}

.dtable_thead_row .dtable_th:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.dtable_thead_row .dtable_th:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* th */
.dtable_th {
  text-align: left;
  padding: 0.625rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--c-gray-500);
  vertical-align: middle;
}

.dark .dtable_th {
  color: var(--c-text-2);
}

.dark .dtable_sort_icon {
  color: var(--c-text-3);
}

.dtable_th.is_center {
  text-align: center;
}

.dtable_th.is_right {
  text-align: right;
}

/* row */
.dtable_row {
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dtable_row .dtable_td {
  border-bottom: 1px solid var(--c-line);
}

.dtable_row:last-child .dtable_td {
  border-bottom: none;
}

/* td */
.dtable_td {
  padding: 0.75rem 1rem;
  color: var(--c-text-2);
  vertical-align: middle;
}

.dtable_td.is_center {
  text-align: center;
}

.dtable_td.is_right {
  text-align: right;
}

/* 관리 버튼 */
.dtable_actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dtable_action_btn {
  padding: 0.375rem;
  border-radius: var(--radius-md);
  color: var(--c-gray-400);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.dtable_action_btn:hover {
  background-color: var(--c-bg-hover);
  color: var(--c-text-2);
}

.dtable_action_btn.is_disabled {
  color: var(--c-gray-300);
  cursor: not-allowed;
}

.dtable_action_icon {
  width: 1rem;
  height: 1rem;
}

.btn_icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* 토글 스위치 */
.dtable_toggle {
  position: relative;
  display: inline-flex;
  height: 1.25rem;
  width: 2.25rem;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--c-gray-300);
  border: none;
  cursor: pointer;
  transform: translateY(2px);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dtable_toggle.is_active {
  background-color: var(--c-primary-500);
}

.dtable_toggle.is_disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dtable_toggle_knob {
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 9999px;
  background-color: var(--c-white);
  transition: transform var(--duration-fast) var(--ease-default);
  transform: translateX(3px);
}

.dtable_toggle.is_active .dtable_toggle_knob {
  transform: translateX(18px);
}

/* 빈 상태 */
.dtable_empty {
  padding: 3rem 0;
  text-align: center;
}

.dtable_empty_text {
  font-size: 0.875rem;
  color: var(--c-text-3);
}

.dtable_empty_sub {
  font-size: 0.75rem;
  color: var(--c-gray-400);
  margin-top: 0.25rem;
}

/* 로딩 */
.dtable_loading {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-text-3);
}

/* ── dtable 확장: 카드 래퍼 ────────────────── */

.dtable_card {
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dark .dtable_card {
  background-color: var(--c-surface);
  border-color: var(--c-border-strong);
}

.dtable_scroll {
  overflow: auto;
  flex: 1 1 0%;
  min-height: 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.dtable_scroll::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* 로딩 오버레이 */
.dtable_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .dtable_overlay {
  background-color: rgba(15, 19, 36, 0.5);
}

.dtable_spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--c-primary-600);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: dtable_spin 0.6s linear infinite;
}

@keyframes dtable_spin {
  to {
    transform: rotate(360deg);
  }
}

/* 정렬 가능 헤더 */
.dtable_th.is_sort {
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.dtable_th.is_sort:hover {
  color: var(--c-text-1);
}

.dtable_sort_icon {
  margin-left: 0.125rem;
  font-size: 0.7em;
  opacity: 0.5;
}

.dtable_th.is_sort:hover .dtable_sort_icon {
  opacity: 1;
}

/* 클릭 가능 행 */
.dtable_row.is_click {
  cursor: pointer;
}

.dtable_row.is_click:hover {
  background-color: var(--c-gray-50);
}

/* ── dtable 셀 내 요소 ──────────────────────── */

.dtable_cell_main {
  color: var(--c-text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtable_sub {
  font-size: 0.75rem;
  color: var(--c-text-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtable_td.is_mono {
  font-size: 0.8125rem;
  color: var(--c-text-1);
}

.dtable_price {
  color: var(--c-red-600);
}

.dtable_price.is_cancelled {
  color: var(--color-red-500);
}

.dark .dtable_price.is_cancelled {
  color: var(--c-red-400);
}

.dtable_price_sub {
  font-size: 0.75rem;
  color: var(--c-text-2);
  margin-top: 1px;
}

/* ── dtable 뱃지 ──────────────────────────── */

.dtable_badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.525rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.dtable_badge.is_confirmed {
  background-color: var(--c-success);
  color: #fff;
}

.dtable_badge.is_cancelled {
  background-color: var(--c-red-400);
  color: #fff;
}

.dtable_badge.is_exhausted {
  background-color: var(--c-warning);
  color: #fff;
}

.dtable_badge.is_synced {
  background-color: var(--c-success);
  color: #fff;
}

.dtable_badge.is_manual {
  background-color: var(--c-red-400);
  color: #fff;
}

/* ── dtable 페이지네이션 ─────────────────────── */

.dtable_footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dtable_footer_info {
  font-size: 0.875rem;
  color: var(--c-text-3);
}

.dtable_footer_pages {
  display: flex;
  gap: 0.25rem;
}

.dtable_page_btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background-color: transparent;
  color: var(--c-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.dtable_page_btn:hover:not(.is_active):not(.is_disabled) {
  background-color: var(--c-bg-hover);
}

.dtable_page_btn.is_active {
  background-color: var(--c-primary-500);
  border-color: var(--c-primary-500);
  color: #fff;
}

.dtable_page_btn.is_disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dtable_page_icon {
  width: 1rem;
  height: 1rem;
}

.dtable_page_dots {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray-400);
  font-size: 0.875rem;
}

/* ── Action Link ───────────────────────────── */

.action_link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

.action_link.is_info {
  color: var(--c-success);
}

.action_link.is_info:hover {
  color: var(--c-success-light);
}

.action_link.is_primary {
  color: var(--c-primary-600);
}

.action_link.is_primary:hover {
  color: var(--c-primary-700);
}

.action_link.is_danger {
  color: var(--c-red-600);
}

.action_link.is_danger:hover {
  color: var(--c-red-400);
}

/* ── Badge 추가 상태 ──────────────────────── */

.badge.is_success {
  background-color: var(--c-green-100);
  color: var(--c-green-800);
  cursor: pointer;
}

.badge.is_success:hover {
  opacity: 0.8;
}

.badge.is_danger {
  background-color: var(--c-red-50);
  color: var(--c-red-600);
  cursor: pointer;
}

.badge.is_danger:hover {
  opacity: 0.8;
}

/* ── Modal ─────────────────────────────────── */

.modal_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 드로어(drawer_panel: 51) 위에 떠야 함 — 드로어 푸터에서 연 모달이 뒤로 깔리지 않도록 */
  z-index: 60;
}

.modal_container {
  background-color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 28rem;
  margin: 0 1rem;
}

.modal_container .field {
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}

.modal_container .field_label {
  width: auto;
}

.modal_container .field_label+.field_input,
.modal_container .field_label+.field_select,
.modal_container .field_label+.cselect {
  flex: none;
}

.dark .modal_container {
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
}

.modal_title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--c-gray-900);
  margin-bottom: 1rem;
}

.modal_text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--c-gray-600);
  margin-bottom: 1.5rem;
}

.modal_text_warn {
  color: var(--c-red-600);
  font-size: 0.875rem;
}

.modal_footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
}

/* 전체발급 모달 */
.modal_container.mil_bulk_modal {
  max-height: 85vh;
  overflow-y: auto;
}

/* 회수 모달: 팝업 스크롤 없이 카드 영역만 스크롤 */
.modal_container.mil_recall_modal {
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 연간 마일리지 모달: 팝업 스크롤 없이 카드 영역만 스크롤 */
.modal_container.mil_annual_modal {
  max-height: 73vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
}

.modal_header .modal_title {
  margin-bottom: 0;
}

.modal_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  color: var(--c-gray-500);
  font-size: 1.25rem;
  cursor: pointer;
}

.modal_close:hover {
  background-color: var(--c-gray-50);
}

.dark .modal_close:hover {
  background-color: var(--c-hover);
}

.modal_body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.modal_body_inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal_header+.modal_body+.modal_footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--c-line);
}

/* ── PMS 검색 모달 (거래처/PMS ID 조회) ──────── */

.modal_container.pms_search_modal {
  max-width: 44rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pms_search_bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.pms_search_bar .field_input {
  flex: 1;
}

.pms_search_table_wrap {
  /* 고정 높이: 리스트가 많으면 스크롤, 적으면 여백 */
  height: 25rem;
  flex-shrink: 0;
  overflow-y: auto;
  /* 테이블 내용과 스크롤바 사이 여백 */
  padding: 0 0.5rem;
}

/* 스크롤 시 헤더 고정 */
.pms_search_table_wrap .dtable_thead_row .dtable_th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--c-gray-100);
}

/* ── Drawer (우측 슬라이드 패널) ───────────── */

.drawer_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 50;
  animation: drawer_overlay_in var(--duration-normal) var(--ease-default) both;
}

@keyframes drawer_overlay_in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.drawer_panel {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: calc(100% - 1.5rem);
  max-width: 28rem;
  background-color: var(--c-white);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  z-index: 51;
  transform: translateX(calc(100% + 0.75rem));
  transition: transform var(--duration-normal) cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer_panel.is_open {
  transform: translateX(0);
}

/* 와이드 드로어 - 2컬럼 레이아웃용 */
.drawer_panel.is_wide {
  max-width: 52rem;
}

/* 2컬럼 드로어 body (좌/우 분할, 각 컬럼 자체 스크롤) */
.drawer_body.is_split {
  flex-direction: row;
}

.drawer_body.is_split>.form_stack {
  min-width: 0;
}

.drawer_body.is_split>.form_stack+.form_stack {
  border-left: 1px solid var(--c-line);
}

.dark .drawer_panel {
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
}

.drawer_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.drawer_title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.drawer_close {
  padding: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gray-400);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.drawer_close:hover {
  background-color: var(--c-bg-hover);
  color: var(--c-text-2);
}

.drawer_close_icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.drawer_body {
  flex: 1 1 0%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 드로어 안 필드: 세로 배치 (라벨 위 + 인풋 아래) */
.drawer_body .field {
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}

.drawer_body .field_label {
  width: auto;
}

.drawer_body .field_label+.field_input,
.drawer_body .field_label+.field_select,
.drawer_body .field_label+.cselect {
  flex: unset;
  width: 100%;
}

.drawer_body .field_input,
.drawer_body .field_select,
.drawer_body .field_textarea,
.drawer_body .seg_wrap,
.drawer_body .cpolicy_refund_table,
.drawer_body .cselect_trigger {
  border-radius: var(--radius-xl);
}

/* ── Number Stepper (숫자 증감 인풋) ──────── */

.num_stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.7rem;
}

.num_stepper.is_half {
  width: calc(50% - 1rem);
}

.num_stepper_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 100%;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-xl);
  background-color: var(--c-gray-50);
  color: var(--c-text-2);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-default);
  user-select: none;
}

.num_stepper_btn:hover {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-400);
}

.num_stepper_btn:active {
  background-color: var(--c-gray-200);
}

.num_stepper_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-xl);
  outline: none;
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-text-1);
  background-color: var(--c-white);
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.num_stepper_input:focus {
  border-color: var(--c-primary-400);
}

.num_stepper_input::-webkit-outer-spin-button,
.num_stepper_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dark .num_stepper_btn {
  background-color: var(--c-surface-2);
  border-color: var(--c-border);
}

.dark .num_stepper_btn:hover {
  background-color: var(--c-surface-3);
}

.dark .num_stepper_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
}

.drawer_footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--c-line);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ── Form 추가 ─────────────────────────────── */

.form_stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 드로어 내부: 고정 높이 스크롤 컨테이너 (cselect_dropdown 등 absolute 요소 주의) */
.drawer_body .form_stack {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 0;
}

/* 스크롤 끝 바닥 여백 - 중첩 overflow 컨테이너에서 padding-bottom이 잘리는 문제 대비,
   flex-basis를 명시적으로 지정하여 브라우저가 확실히 1.5rem 공간을 할당하도록 함 */
.drawer_body .form_stack::after {
  content: '';
  display: block;
  flex: 0 0 1.5rem;
  min-height: 1.5rem;
  width: 100%;
}

.form_checkbox_wrap {
  display: flex;
  align-items: center;
}

.form_checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-sm);
  accent-color: var(--c-primary-600);
}

.form_checkbox_label {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-900);
}

/* ── Stack (공통 간격) ─────────────────────── */

.stack_6 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Center Text (로딩/빈 상태) ────────────── */

.center_text {
  text-align: center;
  padding: 3rem 0;
  color: var(--c-gray-500);
}

/* ── Section (콘텐츠 영역 카드) ────────────── */

.section {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

/* field 내부 등 form_stack gap에 의해 간격이 이미 확보된 경우 하단 마진 제거 */
.section.is_inline {
  margin-bottom: 0;
}

.section.is_input_border {
  border-color: var(--c-input-border);
}

.section_title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-700);
  padding-bottom: 0.4rem;
}

.dark .section_title {
  color: var(--c-text-2);
}

/* section_title 안에 버튼/액션 배치할 때 */
.section_title.has_action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* section_title 내 버튼 그룹 */
.section_title_actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

/* section_title 보조 텍스트 (PMS 타입 등) */
.section_title_sub {
  font-weight: 400;
  margin-left: 0.5rem;
  color: var(--c-text-3);
}

/* 섹션 하단 우측 정렬 액션 (삭제 버튼 등) */
.section_actions_end {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.section_body {
  padding: 1.125rem;
}

/* ── Select Card (카드형 선택) ─────────────── */

.select_card_group {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.select_card {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}

.select_card:hover {
  border-color: var(--c-gray-300);
}

.select_card.is_selected {
  border-color: var(--c-primary-500);
}

.select_card_radio {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--c-primary-500);
  flex-shrink: 0;
  margin-top: 0.125rem;
  cursor: pointer;
}

.select_card_content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select_card_title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-1);
}

.select_card_desc {
  font-size: 0.8125rem;
  color: var(--c-text-2);
  line-height: 1.4;
}

/* ── Toggle Button Group (버튼형 선택) ────── */

.toggle_btn_group {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.toggle_btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-3);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.toggle_btn+.toggle_btn {
  border-left: 1px solid var(--c-line);
}

.toggle_btn:hover:not(.is_active) {
  background-color: var(--c-gray-50);
}

.toggle_btn.is_active {
  color: var(--c-white);
  background-color: var(--c-primary-500);
}

.toggle_btn.is_active.is_inactive {
  color: var(--c-white);
  background-color: var(--c-gray-300);
}

/* ── Section Action Row (섹션 하단 버튼 영역) ── */

.section_action_row {
  margin-top: 0.875rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dark .toggle_btn:hover:not(.is_active) {
  background-color: var(--c-hover);
}

.dark .toggle_btn.is_active.is_inactive {
  background-color: var(--c-gray-400);
}

/* ── Field (폼 필드 - navy 포커스) ─────────── */

.field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.field_label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-600);
  width: 5.5rem;
  flex-shrink: 0;
  text-align: left;
}

.dark .field_label {
  color: var(--c-text-2);
}

.field_label+.field_input,
.field_label+.field_select,
.field_label+.cselect {
  flex: 1;
  min-width: 0;
}

.field_required {
  color: var(--c-red-400);
  font-size: 1rem;
}

.field_label_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* field_label 내부 보조 안내 텍스트 */
.field_label_hint {
  display: inline;
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  font-weight: 400;
}

/* 라벨 옆 단위 표기 (KRW, %, ℃ 등) - 힌트보다 작게 */
.field_label_unit {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  color: var(--c-text-3);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* 보조 유틸리티 */
.is_hidden {
  display: none;
}

.field_link {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--c-primary-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-default);
}

.field_link:hover {
  color: var(--c-primary-700);
}

.field_input,
.field_select {
  height: 2.7rem;
  padding: 0 0.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--c-text-1);
  background-color: var(--c-white);
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
}

.field_input:focus,
.field_select:focus {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.field_input:disabled,
.field_select:disabled {
  background-color: var(--c-gray-50);
  color: var(--c-text-3);
}

.field_input.is_mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.field_input.is_readonly {
  background-color: var(--c-primary-50);
  color: var(--c-text-2);
  text-transform: uppercase;
  font-family: monospace;
  display: flex;
  align-items: center;
}

.dark .field_input,
.dark .field_select {
  background-color: var(--c-surface);
  color: var(--c-text-2);
  border-color: var(--c-border);
}

.dark .field_select option {
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
}

.dark .field_input:disabled,
.dark .field_select:disabled {
  background-color: var(--c-surface-2);
}

.dark .field_input.is_readonly {
  background-color: var(--c-surface-2);
}

.field_input.is_error,
.field_textarea.is_error {
  border-color: var(--c-red-400);
}

.field_error {
  font-size: 0.75rem;
  color: var(--c-red-600);
  margin-top: 0.25rem;
}

/* ── Custom Select (커스텀 드롭다운) ───────── */

.cselect {
  position: relative;
}

.cselect_trigger {
  width: 100%;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--c-text-1);
  background-color: var(--c-white);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
}

/* .cselect_trigger:hover {
  border-color: var(--c-primary-400);
} */

.cselect_trigger_input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
  cursor: inherit;
  padding: 0;
  padding-left: 0.5rem;
}

.cselect_trigger_input::placeholder {
  color: var(--c-text-3);
}

/* 선택된 값 표시 시 (readOnly) 텍스트 말줄임 */
.cselect_trigger_input[readonly] {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .cselect_trigger {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}


.cselect_trigger.is_open {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.cselect_trigger.is_placeholder {
  color: var(--c-text-3);
}

.cselect_trigger.is_disabled {
  background-color: var(--c-gray-50);
  color: var(--c-text-3);
  cursor: not-allowed;
}

.cselect_arrow {
  width: 1rem;
  height: 1rem;
  color: var(--c-text-3);
  transition: transform 200ms var(--ease-default);
  flex-shrink: 0;
}

.cselect_trigger.is_open .cselect_arrow {
  transform: rotate(180deg);
}

.cselect_dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.25rem;
}

/* 포털로 document.body에 렌더링되는 드롭다운 - 스크롤 컨테이너 클리핑 회피 */
.cselect_dropdown.is_portal {
  position: fixed;
  right: auto;
  z-index: 100;
}

.cselect_dropdown.is_up {
  top: auto;
  bottom: calc(100% + 4px);
}

.cselect_option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--c-text-1);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.cselect_option:hover,
.cselect_option.is_highlighted {
  background-color: var(--c-primary-50);
}

.dark .cselect_dropdown {
  background-color: var(--c-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark .cselect_option {
  color: var(--c-text-2);
}

.dark .cselect_option:hover,
.dark .cselect_option.is_highlighted {
  background-color: var(--c-hover);
}

.cselect_option.is_selected {
  font-weight: 500;
  background-color: var(--c-primary-100);
}

.cselect_option.is_selected.is_highlighted {
  background-color: var(--c-primary-150, var(--c-primary-100));
}

.cselect_option.is_disabled {
  color: var(--c-text-3);
  cursor: not-allowed;
}

.cselect_option.is_disabled:hover {
  background: none;
}

.cselect_option_suffix {
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  color: var(--c-gray-500);
  background-color: var(--c-gray-100);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.dark .cselect_option_suffix {
  background-color: var(--c-gray-300);
}

/* ── Searchable Select (검색형 드롭다운) ───────── */

.cselect_dropdown--searchable {
  max-height: 20rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cselect_search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--c-gray-200);
  flex-shrink: 0;
}

.cselect_search_icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--c-text-3);
  flex-shrink: 0;
}

.cselect_search_input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--c-text-1);
}

.cselect_search_input::placeholder {
  color: var(--c-text-3);
}

.cselect_search_clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: none;
  background: var(--c-gray-200);
  color: var(--c-text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.cselect_search_clear:hover {
  background: var(--c-gray-300);
  color: var(--c-text-2);
}

.cselect_options {
  overflow-y: auto;
  padding: 0.25rem;
  flex: 1;
}

.cselect_empty {
  padding: 1rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  text-align: center;
}

.dark .cselect_search {
  border-bottom-color: var(--c-gray-300);
}

.dark .cselect_search_clear {
  background: var(--c-gray-300);
}

.dark .cselect_search_clear:hover {
  background: var(--c-gray-400);
}

/* 직접입력 모드 - 시간 입력 */
.cselect_custom_input_wrap {
  cursor: default;
}

.cselect_time_inputs {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.cselect_time_field {
  width: 1.6rem;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--c-gray-600);
  text-align: center;
  padding: 0;
}

.cselect_time_sep {
  font-size: 0.8125rem;
  color: var(--c-gray-400);
  user-select: none;
}

.field_textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--c-text-2);
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
  resize: none;
  line-height: 1.6;
  width: 100%;
  min-height: 100px;
  overflow-y: auto;
}

.field_textarea::-webkit-scrollbar {
  width: 6px;
}

.field_textarea::-webkit-scrollbar-track {
  background-color: var(--c-gray-100);
  border-radius: var(--radius-full);
  margin: 0.5rem 0;
}

.field_textarea::-webkit-scrollbar-thumb {
  background-color: var(--c-gray-300);
  border-radius: var(--radius-full);
}

.field_textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-gray-400);
}

.field_textarea:focus {
  border-color: var(--c-primary-400);
  box-shadow: none;
}

.field_textarea.is_short {
  min-height: 110px;
}

.field_textarea.is_cancel_policy {
  height: 9.375rem;
  min-height: 9.375rem;
}

.field_textarea.is_intro {
  min-height: 12.5rem;
}

.field_hint {
  font-size: 0.8125rem;
  color: var(--c-text-3);
  font-weight: 400;
}

/* 박스형 힌트 - 빈 상태/안내 문구를 컨테이너 형태로 표시 */
.field_hint.is_boxed {
  padding: 0.75rem 0.875rem;
  background-color: var(--c-primary-50);
  color: var(--c-text-2);
  border-radius: var(--radius-md);
}

/* textarea + charcount 래퍼 */
.field_textarea_wrap {
  position: relative;
  margin-bottom: 1rem;
}

.field_textarea_wrap .field_textarea {
  padding-bottom: 1.75rem;
}

.field_textarea_wrap .field_charcount {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  margin: 0;
}

.field_charcount {
  font-size: 0.6875rem;
  text-align: right;
  margin-top: 0.25rem;
  color: var(--c-text-3);
}

.field_charcount.is_warn {
  color: #D97706;
}

.field_charcount.is_over {
  color: var(--c-red-600);
}

/* ── Grid (2열/3열 그리드) ─────────────────── */

.grid_2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

/* 드로어 내 grid_2col: 라벨 높이가 달라도 두 열의 인풋 바닥 정렬 유지 */
.drawer_body .grid_2col>.field {
  justify-content: flex-end;
}

.grid_3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.col_span_2 {
  grid-column: span 2;
}

.col_span_3 {
  grid-column: span 3;
}

/* ── Segment Control (세그먼트 컨트롤) ────── */

.seg_wrap {
  display: flex;
  background-color: var(--c-gray-100);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
}

.seg_item {
  flex: 1;
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  color: var(--c-gray-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  user-select: none;
}

.seg_item:hover {
  color: var(--c-text-1);
}

.seg_item.is_active {
  background-color: var(--c-white);
  color: var(--c-text-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .seg_wrap {
  background-color: var(--c-gray-200);
}

.dark .seg_item.is_active {
  background-color: var(--c-gray-300);
}

.seg_item.is_sun {
  color: var(--c-red-400);
}

.seg_item.is_sat {
  color: var(--c-blue-400);
}

/* 요일 선택용 seg (재고 일괄수정 등) */
.seg_weekday {
  gap: 0.25rem;
}

.seg_weekday .seg_item.is_sun,
.seg_weekday .seg_item.is_sat {
  color: var(--c-gray-500);
}

.seg_weekday .seg_item.is_active {
  border-radius: var(--radius-md);
}

/* ── Product Checklist (상품 선택 칩) ── */

.product_checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4375rem;
}

.product_checklist_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-input-border);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  user-select: none;
  background-color: var(--c-white);
  color: var(--c-text-1);
  width: 100%;
  min-width: 0;
}

.product_checklist_item:hover {
  background-color: var(--c-bg-hover);
}

.product_checklist_item.is_active {
  background-color: var(--c-primary-400);
  border-color: var(--c-primary-400);
  color: var(--c-white);
  font-weight: 500;
}

.product_checklist_item.is_disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.product_checklist_item.is_disabled:hover {
  background-color: var(--c-white);
}

.product_checklist_item input[type="checkbox"] {
  display: none;
}

.product_checklist_name {
  font-size: 0.8125rem;
  font-weight: 500;
}

.product_checklist_price {
  font-size: 0.6875rem;
  opacity: 0.8;
}

/* ── Inventory Preview (재고 일괄수정 미리보기) ── */

/* 적용 예정 날짜 필드 - 최소 높이 고정, 넘치면 form_stack 스크롤 */
.inventory_preview_field {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inventory_preview {
  padding: 0.875rem;
  background-color: transparent;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 15rem;
}

.inventory_preview_summary {
  font-size: 0.75rem;
  color: var(--c-text-1);
  margin-bottom: 0.25rem;
  font-weight: 400;
}

.inventory_preview_summary strong {
  color: var(--c-primary);
  font-weight: 500;
}

.inventory_preview_dates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1.875rem;
  gap: 0.375rem;
  align-items: start;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 0.5rem;
}

.inventory_preview_empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 0.8125rem;
  color: var(--c-text-3);
}

.inventory_preview_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.875rem;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 400;
  background-color: var(--c-white);
  color: var(--c-text-1);
  border: 1px solid var(--c-input-border);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.inventory_preview_tag.is_excluded {
  background-color: var(--c-gray-50);
  color: var(--c-gray-400);
  border-color: var(--c-gray-200);
  text-decoration: line-through;
}

/* ── Date Range Picker (듀얼 캘린더) ────────── */

.daterange_wrap {
  position: relative;
}

.daterange_trigger_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.daterange_input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  height: 2.7rem;
  padding: 0 0.75rem;
  background: var(--c-white);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.daterange_input:hover {
  border-color: var(--c-gray-400);
}

.daterange_input.is_focus {
  border-color: var(--c-primary-400);
  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb, 27, 58, 107), 0.1);
}

.daterange_input.is_error {
  border-color: var(--c-red-400);
}

.daterange_separator {
  font-size: 0.875rem;
  color: var(--c-gray-400);
  flex-shrink: 0;
}

.daterange_icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  flex-shrink: 0;
}

.daterange_text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--c-text-1);
  text-align: left;
  white-space: nowrap;
}

.daterange_text.is_placeholder {
  color: var(--c-gray-400);
}


.daterange_dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
}

/* Dual calendar layout */
.daterange_dual {
  display: flex;
  gap: 1rem;
}

.daterange_panel {
  flex: 1;
  min-width: 0;
}

/* 각 월 헤더 (월 제목 좌측 + nav 우측) */
.daterange_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.125rem 0.675rem;
}

.daterange_nav_group {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.daterange_month_wrap {
  position: relative;
}

.daterange_month_chevron {
  opacity: 0.4;
  transition: transform 0.2s;
}

.daterange_month_chevron.is_open {
  transform: rotate(180deg);
}

.daterange_month_label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-1);
  padding: 0;
}

.daterange_month_label:hover {
  color: var(--c-primary);
}

.daterange_nav_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--c-gray-400);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.daterange_nav_btn:hover {
  background: var(--c-gray-100);
  color: var(--c-text-1);
}

/* DayPicker 기본 caption/nav 숨김 (커스텀 헤더 사용) */
.daterange_caption_hidden {
  display: none;
}

.daterange_nav_hidden {
  display: none;
}

/* Calendar Root */
.daterange_calendar {
  font-family: 'Inter', sans-serif;
}

.daterange_months {
  display: flex;
}

.daterange_month {
  width: 100%;
}

/* Grid */
.daterange_grid {
  width: 100%;
  border-collapse: collapse;
}

.daterange_weekdays {
  display: flex;
}

.daterange_weekday {
  flex: 1;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--c-gray-500);
}

.daterange_week {
  display: flex;
}

/* Day cells */
.daterange_day {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.daterange_day_btn {
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--c-text-1);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
  z-index: 1;
}

.daterange_day_btn:hover {
  background: var(--c-gray-100);
}

/* Today */
.daterange_day.is_today .daterange_day_btn {
  font-weight: 600;
  border: 1.5px solid var(--c-gray-400);
}

/* Outside month */
.daterange_day.is_outside .daterange_day_btn {
  color: var(--c-gray-300);
}

/* Disabled */
.daterange_day.is_disabled .daterange_day_btn {
  color: var(--c-gray-300);
  cursor: default;
}

.daterange_day.is_disabled .daterange_day_btn:hover {
  background: none;
}

/* Selected (start & end) */
.daterange_day.is_range_start .daterange_day_btn,
.daterange_day.is_range_end .daterange_day_btn {
  background: var(--c-primary-400);
  color: var(--c-white);
  font-weight: 500;
}

.daterange_day.is_range_start .daterange_day_btn:hover,
.daterange_day.is_range_end .daterange_day_btn:hover {
  background: var(--c-text-1);
}

/* Range middle */
.daterange_day.is_range_middle {
  background: var(--c-gray-100);
}

.daterange_day.is_range_middle .daterange_day_btn {
  color: var(--c-text-1);
  border-radius: 0;
}

/* Range edges - background fill */
.daterange_day.is_range_start {
  background: linear-gradient(90deg, transparent 50%, var(--c-gray-100) 50%);
  border-radius: 0;
}

.daterange_day.is_range_end {
  background: linear-gradient(90deg, var(--c-gray-100) 50%, transparent 50%);
  border-radius: 0;
}

.daterange_day.is_range_start.is_range_end {
  background: transparent;
}

/* Outside days (다른 달에 표시되는 날짜)에서 범위 하이라이트 제거 */
.daterange_day.is_outside.is_range_middle,
.daterange_day.is_outside.is_range_start,
.daterange_day.is_outside.is_range_end {
  background: transparent;
}

/* ── Month Picker (캘린더 내 월 선택 팝업) ── */
.daterange_monthpicker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 70;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.625rem;
  min-width: 180px;
}

.daterange_monthpicker_year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
  padding: 0 0.125rem;
}

.daterange_monthpicker_year span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.daterange_monthpicker_year button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--c-gray-500);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.daterange_monthpicker_year button:hover {
  background: var(--c-gray-100);
  color: var(--c-text-1);
}

.daterange_monthpicker_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.daterange_monthpicker_item {
  padding: 0.3125rem 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-gray-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.daterange_monthpicker_item:hover {
  background: var(--c-gray-100);
  color: var(--c-text-1);
}

.daterange_monthpicker_item.is_active {
  background: var(--c-primary-400);
  font-weight: 500;
  color: var(--c-white);
}

/* ── 필터 컨텍스트 – 컴팩트 높이 (2.375rem / 38px) ────
   페이지 필터 바에서 cselect·daterange 높이를 폼/모달(2.7rem)보다
   낮게 통일합니다. 새 필터 추가 시 셀렉터를 아래에 추가하세요. */

.rsv_filter .cselect_trigger,
.or_filter .cselect_trigger,
.mil_drawer_filter .cselect_trigger,
.clog_filter .cselect_trigger {
  height: 2.375rem;
}

.rsv_filter .daterange_input,
.or_filter .daterange_input,
.mil_drawer_filter .daterange_input,
.clog_filter .daterange_input {
  height: 2.375rem;
}

/* ── Chip (선택 가능한 태그) ───────────────── */

.chip_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.565rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-input-border);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  user-select: none;
  color: var(--c-text-1);
}

.chip:hover {
  background-color: var(--c-bg-hover);
}

.chip.is_selected {
  background-color: var(--c-primary-500);
  border-color: var(--c-primary-500);
  color: var(--c-white);
  font-weight: 500;
}

/* ── Info Box (안내 박스) ──────────────────── */

.info_box {
  display: flex;
  gap: 0.5rem;
  background-color: var(--c-navy-light);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--c-navy);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.info_box_icon {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--c-navy);
  color: var(--c-white);
  font-size: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* info_box 경고 variant */
.info_box.is_warning {
  background-color: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.info_box_icon.is_warning {
  background-color: #D97706;
  color: var(--c-white);
}

.info_box_svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #D97706;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* ── Toggle Row (레이블 + 토글 한 줄) ─────── */

.toggle_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--c-gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
}

.toggle_row_text {
  flex: 1;
  min-width: 0;
}

.toggle_row_title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-1);
}

.toggle_row_desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
}

/* ── Field Input Group (인풋 + prefix/suffix) ── */

.field_input_group {
  display: flex;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.field_input_group:focus-within {
  border-color: var(--c-primary-400);
}

.field_input_group .field_input {
  border: none;
  border-radius: 0;
  flex: 1;
}

.field_input_group .field_input:focus {
  border: none;
  box-shadow: none;
}

.field_input_prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background-color: var(--c-gray-50);
  border-right: 1px solid var(--c-input-border);
  font-size: 0.8125rem;
  color: var(--c-text-3);
}

/* ── Drawer subtitle ─────────────────────── */

.drawer_subtitle {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
}

/* ── Image Upload (드래그&드롭 업로드) ──── */

.image_upload_zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 1rem;
  border: 1px dashed var(--c-input-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
  margin-bottom: 0.75rem;
}

.image_upload_zone:hover {
  border-color: var(--c-primary-400);
}

.image_upload_zone.is_disabled {
  opacity: 0.5;
  pointer-events: none;
}

.image_upload_icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-text-3);
}

.image_upload_hint {
  font-size: 0.75rem;
  color: var(--c-text-3);
}

/* 이미지 썸네일 그리드 */
.image_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.image_tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-input-border);
  cursor: grab;
}

.image_tile.is_dragging {
  opacity: 0.4;
}

.image_tile.is_dragover {
  box-shadow: 0 0 0 2px var(--c-primary-400);
}

.image_tile_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image_tile_badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  padding: 0.125rem 0.25rem;
  background-color: var(--c-navy);
  color: var(--c-white);
  font-size: 0.5rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.image_tile_delete {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.image_tile_delete:hover {
  background-color: var(--c-red-500);
}

/* ── Quick Button (빠른 입력 버튼) ─────────── */

.quick_btn {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background-color: var(--c-white);
  color: var(--c-text-2);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.quick_btn:hover {
  border-color: var(--c-navy-mid);
  color: var(--c-navy);
  background-color: var(--c-navy-light);
}

/* ── Button: Navy ──────────────────────────── */

.btn_navy {
  color: var(--c-white);
  background-color: var(--c-navy);
  border: 1px solid var(--c-navy);
}

.btn_navy:hover:not(:disabled) {
  background-color: var(--c-navy-hover);
  border-color: var(--c-navy-hover);
}


/* ── Lock Screen (관리자 인증) ─────────────── */

.lock_screen {
  text-align: center;
  padding: 3rem 1.5rem;
}

.lock_screen_icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: var(--c-red-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.lock_screen_title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text-1);
  margin-bottom: 0.375rem;
}

.lock_screen_desc {
  font-size: 0.875rem;
  color: var(--c-text-2);
  margin-bottom: 1.25rem;
}

.lock_screen_form {
  max-width: 17.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lock_screen_input_wrap {
  position: relative;
}

.lock_screen_input {
  width: 100%;
  height: 2.7rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
  color: var(--c-text-1);
  background-color: var(--c-white);
}

.lock_screen_input::placeholder {
  color: var(--c-gray-500);
  font-size: 0.875rem;
}

.dark .lock_screen_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.lock_screen_input:focus {
  border: 1px solid var(--c-primary-400);
}

/* ── Flex 유틸리티 ─────────────────────────── */

.flex_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.flex_1 {
  flex: 1;
  min-width: 0;
}

.fields_stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex_end {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* ── Radio/Checkbox (navy 테마) ────────────── */

.field_checkbox_wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field_checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--c-white);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
  flex-shrink: 0;
}

.field_checkbox:checked {
  background-color: var(--c-primary-500);
  border-color: var(--c-primary-500);
}

.field_checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.375rem;
  height: 0.5rem;
  border: solid var(--c-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

.field_checkbox:hover:not(:disabled) {
  border-color: var(--c-primary-400);
}

.field_checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field_checkbox_text {
  font-size: 0.8125rem;
  color: var(--c-text-1);
}

.field_checkbox_label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--c-text-1);
  cursor: pointer;
}

.field_checkbox_label.is_disabled {
  opacity: 0.6;
  cursor: default;
}

/* field_label과 동일한 폰트/컬러 (그룹 헤더로 사용 시) */
.field_checkbox_label.is_field_style {
  font-weight: 500;
  color: var(--c-gray-600);
  margin-bottom: 0.5rem;
}

.field_radio_wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.field_radio {
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-navy);
  border: 1px solid var(--c-border);
}

.field_radio_text {
  font-size: 0.8125rem;
  color: var(--c-text-1);
}

/* ── Confirm Dialog ─────────────────────────── */

.cdialog_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.cdialog {
  background-color: var(--c-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 22rem;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dark .cdialog {
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cdialog_icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.cdialog_icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cdialog_icon.is_danger {
  background-color: var(--c-red-50);
  color: var(--c-red-400);
}

.cdialog_icon.is_warning {
  background-color: var(--c-warning-bg, #fef3e2);
  color: var(--c-warning-light);
}

.cdialog_icon.is_info {
  background-color: var(--c-primary-50);
  color: var(--c-primary-400);
}

.dark .cdialog_icon.is_danger {
  background-color: rgba(214, 90, 79, 0.15);
}

.dark .cdialog_icon.is_warning {
  background-color: rgba(245, 164, 92, 0.15);
}

.dark .cdialog_icon.is_info {
  background-color: var(--c-selected);
}

.cdialog_title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text-1);
  margin-bottom: 0.5rem;
}

.cdialog_message {
  font-size: 0.875rem;
  color: var(--c-text-2);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.cdialog_actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.cdialog_btn {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}

.cdialog_btn.is_cancel {
  background-color: var(--c-gray-100);
  color: var(--c-text-2);
  border: 1px solid var(--c-gray-200);
}

.cdialog_btn.is_cancel:hover {
  background-color: var(--c-gray-200);
}

.cdialog_btn.is_confirm {
  color: var(--c-white);
  border: none;
}

.cdialog_btn.is_confirm.is_danger {
  background-color: var(--c-red-400);
}

.cdialog_btn.is_confirm.is_danger:hover {
  background-color: var(--c-error-dark);
}

.cdialog_btn.is_confirm.is_warning {
  background-color: var(--c-warning-light);
}

.cdialog_btn.is_confirm.is_warning:hover {
  background-color: var(--c-warning);
}

.cdialog_btn.is_confirm.is_info {
  background-color: var(--c-primary-400);
}

.cdialog_btn.is_confirm.is_info:hover {
  background-color: var(--c-primary-600);
}

/* ── Aside (공통 사이드바) ────────────────────── */
/* 호텔관리·객실관리 등 좌측 사이드바 공통 디자인 */

.oa_aside {
  border-radius: var(--radius-2xl);
  width: 16rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--c-line);
}

/* 타이틀 */
.oa_aside_title {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--c-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* 타이틀 + 우측 버튼 행 */
.oa_aside_title_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* 추가 버튼 (헤더 우측) */
.oa_aside_add_btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-input-border);
  background-color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.oa_aside_add_btn:hover {
  background-color: var(--c-gray-50);
}

.oa_aside_add_btn svg {
  width: 0.75rem;
  height: 0.75rem;
}

.dark .oa_aside_add_btn {
  background-color: var(--c-gray-200);
  border-color: var(--c-gray-400);
}

/* 검색 */
.oa_aside_search {
  position: relative;
  margin-bottom: 0.75rem;
}

.oa_aside_search_input {
  width: 100%;
  height: 2.7rem;
  padding-left: 2.25rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
}

.oa_aside_search_input::placeholder {
  color: var(--c-gray-500);
  font-size: 0.875rem;
}

.dark .oa_aside_search_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.oa_aside_search_input:focus {
  border: 1px solid var(--c-primary-400);
}

.oa_aside_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  color: var(--c-gray-500);
}

/* 필터 (셀렉트) */
.oa_aside_filter {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
  outline: none;
  margin-bottom: 0.75rem;
  transition: all var(--duration-fast) var(--ease-default);
}

.oa_aside_filter:focus {
  border-color: var(--c-primary-400);
}

.dark .oa_aside_filter {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

/* 필터 그리드 (2열) */
.oa_aside_filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* 리스트 */
.oa_aside_list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  margin: 0.5rem 0;
  scrollbar-width: none;
}

.oa_aside_list::-webkit-scrollbar {
  display: none;
}

/* 아이템 래퍼 (타입행 + 상품 서브리스트 묶음) */
.oa_aside_item_wrap {
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.oa_aside_item_wrap:hover {
  background-color: var(--c-gray-50);
}

.dark .oa_aside_item_wrap:hover {
  background-color: var(--c-hover);
}

.oa_aside_item_wrap.is_active {
  background-color: var(--c-primary-50);
}

.dark .oa_aside_item_wrap.is_active {
  background-color: var(--c-selected);
}

/* 아이템 */
.oa_aside_item {
  padding: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 아이템 정보 영역 */
.oa_aside_item_info {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oa_aside_item_name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--c-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .oa_aside_item_name {
  color: var(--c-gray-900);
}

/* 재고 뱃지 (cselect_option_suffix 스타일) */
.oa_aside_item_badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--c-gray-500);
  background-color: var(--c-gray-100);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}

/* 상태 점 */
.oa_aside_dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--c-gray-300);
}

.oa_aside_dot.is_active {
  background-color: var(--c-primary-400);
}

.oa_aside_dot.is_inactive {
  background-color: var(--c-gray-300);
}

.oa_aside_expand.is_open {
  transform: rotate(90deg);
}

/* 빈 상태 (사이드바 내) */
.oa_aside_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem 1rem 2rem;
  text-align: center;
}

.oa_aside_empty_icon {
  width: 3rem;
  height: 3rem;
  color: var(--c-border-strong);
  margin-bottom: 0.75rem;
}

.oa_aside_empty_title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  margin-bottom: 0.25rem;
}

.oa_aside_empty_desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-bottom: 1rem;
}

/* 스피너 (사이드바 내) */
.oa_aside_spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
}

.oa_aside_spinner_icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--c-navy);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.75s linear infinite;
}

/* ── Detail (공통 디테일 영역) ────────────────── */
/* ── Dev Preview (개발용 - 작업 완료 후 삭제) ── */

.preview_section_title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text-1);
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-line);
}

.preview_desc {
  font-size: 0.8125rem;
  color: var(--c-text-3);
  margin-bottom: 0.75rem;
}

.preview_btn_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}