/* ─────────────────────────────
   ✅ 버튼 크기 (크기 전용)
───────────────────────────── */
.btn        { padding: 14px 20px; border-radius: 8px; }
.btn-sm     { padding: 8px 14px; font-size: 0.875rem; }
.btn-lg     { padding: 16px 28px; font-size: 1.125rem; }

/* ─────────────────────────────
   ✅ 버튼 스타일 (색상/상태 전용)
───────────────────────────── */
.btn-primary {
  background-color: var(--color-main-blue);
  color: white;
  font-weight: 600;
  border: none;
  transition: background-color 0.3s ease;
}
.btn-primary:hover {
  background-color: var(--color-accent-blue);
}




.btn-danger {
  background-color: var(--color-danger);
  color: white;
  font-weight: 600;
  border: none;
  transition: background-color 0.3s ease;
}
.btn-danger:hover {
  background-color: var(--color-danger-hover);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #e0e0e0;     /* 흐린 회색 배경 */
  color: #9e9e9e;                /* 흐린 텍스트 */
  border-color: #d0d0d0;         /* 경계선도 흐리게 */
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
  pointer-events: none;          /* 클릭 안 되게 */
  text-decoration: none;         /* 밑줄 제거 (링크일 경우) */
}


.btn.disabled,
.btn:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #d0d0d0;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
  pointer-events: none;
  text-decoration: none;
}







.btn-processing {
  background-color: var(--color-accent-blue);
  color: #fff;
  position: relative;
}
.btn-processing::before {
  content: "";
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

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



/* ─────────────────────────────
   ✅ 버튼 스타일 (외각라인 전용)
───────────────────────────── */
.btn-outline {
  background-color: transparent;
  color: var(--color-main-blue);
  border: 2px solid var(--color-main-blue);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  background-color: var(--color-main-blue);
  color: white;
}




/* ─────────────────────────────
   ✅ split 버튼 (메인 버튼 + 드롭다운)
───────────────────────────── */

.btn-split {
  display: inline-flex;
  border-radius: 12px;
  overflow: hidden;
  border: none;
}

.btn-split .btn-main {
  background-color: var(--color-main-blue);
  color: #fff;
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  font-weight: 600;
  flex: 1;
}
.btn-split .btn-dropdown {
  background-color: var(--color-accent-blue);
  color: white;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

/* outline split */
.btn-split-outline {
  border: 1px solid var(--color-main-blue);
}
.btn-split-outline .btn-main {
  background-color: white;
  color: var(--color-main-blue);
}
.btn-split-outline .btn-dropdown {
  background-color: var(--color-main-blue);
}




/* ─────────────────────────────
   ✅ 아이콘 버튼 (메인 버튼 + 드롭다운)
───────────────────────────── */

/* 버튼 전체를 flex 컨테이너로 */
.btn-icon {
  display: inline-flex;
  align-items: center;    /* 수직 중앙 정렬 */
  gap: 0.5rem;            /* 아이콘 ↔ 텍스트 간격 */
}

/* SVG 또는 IMG 아이콘에 공통 스타일 */
.btn-icon .icon {
  width: 1em;             /* 텍스트 높이에 맞춰 비율 유지 */
  height: 1em;
  flex-shrink: 0;         /* 크기 고정 */
  
  /* lucide 등 SVG라면 stroke 색상을 텍스트색과 맞추기 */
  stroke: currentColor;
}

/* 예시: 흰색 텍스트 위 흰색 아이콘 */
.btn-primary.btn-icon {
  color: #fff;            /* 버튼 글씨색이 곧 아이콘 색이 됩니다 */
}



/* ─────────────────────────────
   ✅ 드롭다운 스타일
───────────────────────────── */

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url('/shared_static/images/icons/arrow-down.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;

  padding: 10px 36px 10px 16px;
  border: 1px solid var(--color-main-blue);
  border-radius: 12px;
  color: var(--color-main-blue);
  background-color: var(--color-bg-white);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form-select:hover {
  background-color: var(--color-bg-light-blue2);
}

.form-select:disabled {
  background-color: var(--color-text-sub3);
  color: var(--color-text-sub2);
  cursor: not-allowed;
  opacity: 0.5;
}



/* ─────────────────────────────
   ✅ 상태표시 (Badge)
───────────────────────────── */


.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 상태별 스타일 */
.badge-active {
  background-color: #E6F0FF;
  color: var(--color-main-blue);
  border: 1px solid var(--color-main-blue);
}

.badge-inactive {
  background-color: #F8F9FD;
  color: var(--color-text-sub2);
  border: 1px solid #E0E4F0;
}

.badge-pending {
  background-color: #FFF8E6;
  color: #D4A019;
  border: 1px solid #FFD470;
}


.badge-danger {
  background-color: var(--color-danger);
  color: #fff;
  border: 1px solid #FFD470;
}

.badge-success {
  background-color: var(--color-success);
  color: #fff;
  border: 1px solid #FFD470;
}




/* ─────────────────────────────
   ✅ 체크박스 스타일
───────────────────────────── */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  display: none;
}

.checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-main-blue);
  border-radius: 4px;
  position: relative;
  background-color: #fff;
}

/* 체크됨 */
.checkbox-input:checked + .checkbox-box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background-color: var(--color-main-blue);
}

/* indeterminate (JS로 처리 필요) */
.checkbox-box.indeterminate::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 12px;
  height: 2px;
  background-color: var(--color-main-blue);
  transform: translateY(-50%);
}

/* 비활성화 */
.checkbox-input:disabled + .checkbox-box {
  background-color: #F2F3F5;
  border-color: #D0D0D0;
  cursor: not-allowed;
  opacity: 0.5;
}


/* ─────────────────────────────
   ✅ 테이블 스타일
───────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem; /* 15px 정도 */
  color: var(--color-text-main);
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #EAECEF;
  vertical-align: middle;
}

.table th {
  background-color: var(--color-bg-light-blue2); /* #F2F5FF */
  font-weight: 600;
  color: var(--color-text-sub1);
}

.table tr:hover td {
  background-color: #FAFBFF;
}

/* 작은 테이블용 (예: 설정 페이지) */
.table-sm th,
.table-sm td {
  padding: 8px 12px;
  font-size: 0.875rem;
}



/* ─────────────────────────────
   ✅ 입력 폼 스타일
───────────────────────────── */


/* 기본 input, textarea 스타일 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 15px 14px;
  font-size: 16px;
  border: 1px solid #D4D7E5;
  border-radius: 8px;
  background-color: #fff;
  color: var(--color-text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 16px;
}

/* focus 상태 */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-main-blue);
  box-shadow: 0 0 0 2px rgba(90, 129, 250, 0.2);
}

/* disabled 상태 */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-text-sub3);
  color: var(--color-text-sub2);
  cursor: not-allowed;
  opacity: 0.6;
}


.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-group > .prefix,
.input-group > .suffix {
  font-size: 0.875rem;
  color: var(--color-text-sub1);
}




/* ──────────────────────────────
   ✅ 아이콘이 있는 입력 폼 컴포넌트
   (기본 스타일 확장 버전)
────────────────────────────── */

/* 아이콘 입력 그룹 공통 스타일 */
.input-icon-group {
  position: relative;
  margin-bottom: 16px;
}

/* 아이콘 위치 스타일 */
.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-sub1);
  pointer-events: none;
}

.input-icon-left {
  left: 14px;
}

.input-icon-right {
  right: 14px;
  pointer-events: auto; /* 오른쪽 아이콘은 클릭 가능 */
  cursor: pointer;
}

/* 아이콘이 있을 때 패딩 조정 */
.has-icon-left input,
.has-icon-left textarea {
  padding-left: 42px !important;
}

.has-icon-right input,
.has-icon-right textarea {
  padding-right: 42px !important;
}

/* 검색 바 특수 스타일 */
.search-bar {
  display: flex;
  border: 1px solid #D4D7E5;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar:focus-within {
  border-color: var(--color-main-blue);
  box-shadow: 0 0 0 2px rgba(90, 129, 250, 0.2);
}

.search-bar input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.search-button {
  background-color: var(--color-main-blue);
  color: white;
  border: none;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: var(--color-accent-blue);
}

/* 버튼 결합형 입력 폼 */
.input-button-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.input-button-group input {
  flex: 1;
  margin-bottom: 0 !important;
}

.input-button-group button {
  white-space: nowrap;
}




/* ─────────────────────────────
   ✅ 그리드 레이아웃 (12컬럼)
───────────────────────────── */

/* 12 컬럼 그리드 */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12개의 동일한 크기의 컬럼 */
  gap: 20px; /* 컬럼 간 간격 설정 */
}

/* 기본적인 12컬럼 레이아웃 */
.grid-12 > * {
  padding: 20px;
  border: 1px solid #ddd; /* 선택적인 경계선 */
  border-radius: 10px; /* 라운드 처리 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* 예시로 1~12컬럼을 어떻게 활용할 수 있는지 보여주는 스타일 */
.grid-12 .col-span-1 {
  grid-column: span 1;
}

.grid-12 .col-span-2 {
  grid-column: span 2;
}

.grid-12 .col-span-3 {
  grid-column: span 3;
}

.grid-12 .col-span-4 {
  grid-column: span 4;
}

.grid-12 .col-span-5 {
  grid-column: span 5;
}

.grid-12 .col-span-6 {
  grid-column: span 6;
}

.grid-12 .col-span-7 {
  grid-column: span 7;
}

.grid-12 .col-span-8 {
  grid-column: span 8;
}

.grid-12 .col-span-9 {
  grid-column: span 9;
}

.grid-12 .col-span-10 {
  grid-column: span 10;
}

.grid-12 .col-span-11 {
  grid-column: span 11;
}

.grid-12 .col-span-12 {
  grid-column: span 12;
}





/* ─────────────────────────────
   ✅ history
───────────────────────────── */

.history-wrapper {
  position: relative;
  padding-left: 24px;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 1px;
  background-color: #ddd;
}

.history-item {
  position: relative;
  padding: 16px 0 16px 20px;
  display: flex;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: -6px;
  top: 22px;
}

.dot.success {
  background-color: #bbb; /* 회색 */
}

.dot.error {
  background-color: #f44336; /* 빨간색 */
}

.file-info {
  padding-left: 12px;
}

.filename {
  font-weight: 600;
  color: #333;
}

.filesize {
  font-size: 12px;
  color: #888;
}



/* ─────────────────────────────
   ✅ 체크박스 버튼
───────────────────────────── */

/* 기본 색상 변수 */
:root {
  --color-main-blue: #5A81FA;
  --color-accent-blue: #2C3D8F;
  --color-bg-white: #FFFFFF;
  --color-disabled: #A8B1CE;
}

/* 체크박스 버튼 기본 스타일 */
.checkbox-btn {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-main-blue);
  border-radius: 4px;
  background-color: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 체크된 상태 */
.checkbox-btn.checked {
  background-color: var(--color-main-blue);
  border-color: var(--color-main-blue);
}

.checkbox-btn.checked::after {
  content: '✔';
  font-size: 16px;
  color: white;
}

/* 마이너스 상태 (예: 일부 선택됨) */
.checkbox-btn.minus {
  background-color: var(--color-main-blue);
  border-color: var(--color-main-blue);
}

.checkbox-btn.minus::after {
  content: '–';
  font-size: 18px;
  color: white;
  font-weight: bold;
}

/* 비활성 상태 */
.checkbox-btn.disabled {
  background-color: var(--color-bg-white);
  border-color: var(--color-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}


/* ─────────────────────────────
   ✅ 라디오 버튼
───────────────────────────── */

/* 라디오 버튼 공통 스타일 */
.radio-btn {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-main-blue);
  border-radius: 50%;
  background-color: var(--color-bg-white);
  position: relative;
  cursor: pointer;
  display: inline-block;
}

/* 선택된 상태 */
.radio-btn.checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--color-main-blue);
  border-radius: 50%;
}

/* 비활성 기본 상태 */
.radio-btn.disabled {
  border-color: var(--color-text-sub2);
  cursor: not-allowed;
  opacity: 0.5;
}

/* 비활성 + 선택된 상태 */
.radio-btn.disabled.checked::after {
  background-color: var(--color-text-sub2);
}





/* ─────────────────────────────
   ✅ split 버튼 (메인 버튼 + 드롭다운)
───────────────────────────── */

.accordion {
  border-radius: 8px;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-bg-light-blue1);
}

.accordion-item + .accordion-item {
  border-top: 1px solid var(--color-bg-light-blue1);
}

.accordion-header {
  border : 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  width: 100%;
  background-color: var(--color-bg-light-blue2);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-main);
}


/* 활성화된 아코디언 헤더 배경·글자색 변경 */
.accordion-item.active .accordion-header {
  background-color: var(--color-accent-blue);
  color: #fff;             /* 부트스트랩 주색(primary) 텍스트 */
}

/* + 아이콘 대신 – 아이콘으로 변경(Optional) */
.accordion-item.active .accordion-icon {
  content: "–";
  color: #fff;
}


.accordion-title {
  font-size: 16px;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-body {
  display: none;
  padding: 16px;
  background-color: var(--color-bg-white);
  color: var(--color-text-sub1);
  line-height: 1.6;
}

/* active 상태 */
.accordion-item.active .accordion-body {
  display: block;
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg); /* + → × */
}