/* KRDS 버튼 스타일 (프로젝트 공용) */
/* 디자인 기준: https://www.krds.go.kr/html/site/component/component_04_06.html */

/* CSS 변수: 색상 토큰 */
:root {
  --krds-primary: #0b57d0;
  --krds-secondary: #6c757d;
  --krds-gray-100: #f8f9fa;
  --krds-gray-200: #e9ecef;
  --krds-gray-300: #dee2e6;
  --krds-gray-800: #343a40;
  --krds-white: #ffffff;
  --krds-black: #000000;
  --krds-success: #137333;
  --krds-warning: #b06000;
  --krds-danger: #b3261e;
  --krds-info: #026b8a;
  --krds-disabled: #adb5bd;

  --krds-focus: #1a73e8;
  --krds-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 리셋 */
.krds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  color: var(--krds-gray-800);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  text-decoration: none;
  user-select: none;
}

.krds-btn:focus-visible {
  outline: 2px solid var(--krds-focus);
  outline-offset: 2px;
}

.krds-btn:disabled,
.krds-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
  box-shadow: none;
}

/* 크기 */
.krds-btn.small { padding: 6px 10px; font-size: 13px; border-radius: 5px; }
.krds-btn.medium { padding: 10px 14px; font-size: 14px; }
.krds-btn.large { padding: 12px 18px; font-size: 16px; border-radius: 8px; }

/* 색상 - 기본 (Filled) */
.krds-btn.primary { background-color: var(--krds-primary); color: var(--krds-white); border-color: var(--krds-primary); }
.krds-btn.secondary { background-color: var(--krds-secondary); color: var(--krds-white); border-color: var(--krds-secondary); }
.krds-btn.success { background-color: var(--krds-success); color: var(--krds-white); border-color: var(--krds-success); }
.krds-btn.warning { background-color: var(--krds-warning); color: var(--krds-white); border-color: var(--krds-warning); }
.krds-btn.danger { background-color: var(--krds-danger); color: var(--krds-white); border-color: var(--krds-danger); }
.krds-btn.info { background-color: var(--krds-info); color: var(--krds-white); border-color: var(--krds-info); }

.krds-btn.primary:hover { filter: brightness(0.95); }
.krds-btn.primary:active { filter: brightness(0.9); transform: translateY(1px); }

/* 색상 - 아웃라인 */
.krds-btn.outline { background-color: transparent; }
.krds-btn.outline.primary { color: var(--krds-primary); border-color: var(--krds-primary); }
.krds-btn.outline.secondary { color: var(--krds-secondary); border-color: var(--krds-secondary); }
.krds-btn.outline.success { color: var(--krds-success); border-color: var(--krds-success); }
.krds-btn.outline.warning { color: var(--krds-warning); border-color: var(--krds-warning); }
.krds-btn.outline.danger { color: var(--krds-danger); border-color: var(--krds-danger); }
.krds-btn.outline.info { color: var(--krds-info); border-color: var(--krds-info); }
.krds-btn.outline:hover { background-color: var(--krds-gray-100); }

/* 어두운 배경에서 사용할 가독성 보조 클래스 */
.krds-btn.on-dark { color: var(--krds-white) !important; border-color: var(--krds-white) !important; }
.krds-btn.on-dark:hover { background-color: rgba(255,255,255,0.12); }
.krds-btn.primary.on-dark { background-color: var(--krds-primary); border-color: var(--krds-primary); }

/* 텍스트 버튼 */
.krds-btn.text { background: none; border-color: transparent; color: var(--krds-primary); }
.krds-btn.text:hover { background-color: var(--krds-gray-100); }

/* 비활성 */
.krds-btn.disabled,
.krds-btn:disabled { background-color: var(--krds-gray-200); color: var(--krds-gray-800); border-color: var(--krds-gray-300); }

/* 아이콘 영역 정렬 */
.krds-btn .icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.krds-btn.icon-left .icon { margin-right: 6px; }
.krds-btn.icon-right .icon { margin-left: 6px; }

/* 블록 버튼 */
.krds-btn.block { display: flex; width: 100%; }

/* 그림자 옵션 */
.krds-btn.elevated { box-shadow: var(--krds-shadow); }