/* ============================================================
   버튼 (접두사 `btn`).
   마크업: <button class="btn btn-primary btn-md"> 또는 <a class="btn btn-secondary btn-sm">.
   `.btn` 만 쓰면 md 크기로 렌더링된다.

   크기:     btn-sm 32px (행 안의 보조 동작), btn-md 40px, btn-lg 48px; 터치 화면에서 44 / 48 / 56px.
   변형:     btn-primary     보기의 주된 동작 하나
             btn-secondary   다른 동작
             btn-ghost       취소와 강조가 낮은 동작
             btn-danger      되돌릴 수 없는 동작, 확인 대화 상자 안에서만
             btn-quiet       틀 없는 행 동작
             btn-quiet-danger  hover 때만 빨개지는 행 동작 (행은 결코 빨간 버튼을 싣지 않는다)
             btn-icon        정사각형, 아이콘만 (aria-label 을 주어라)
             btn-link        링크처럼 보이고, 버튼처럼 동작한다
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  min-height: var(--h-ctl);
  padding: 0 var(--sp4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}

/* 버튼 모양의 링크는 버튼 글꼴을 지키며, 결코 밑줄 링크 hover 를 쓰지 않는다. */
a.btn,
a.btn:hover {
  text-decoration: none;
}

.btn svg {
  flex-shrink: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 크기 */
.btn-sm {
  min-height: var(--h-sm);
  padding: 0 var(--sp3);
  font-size: var(--fs-sm);
}

.btn-md {
  min-height: var(--h-ctl);
  padding: 0 var(--sp4);
}

.btn-lg {
  min-height: var(--h-lg);
  padding: 0 var(--sp6);
}

/* 변형 */
.btn-primary {
  background: var(--accent-btn);
  color: var(--on-accent);
  border-color: var(--accent-btn);
}

a.btn-primary:hover {
  color: var(--on-accent);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--accent-btn-hover);
  border-color: var(--accent-btn-hover);
  color: var(--on-accent);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--accent-press);
  border-color: var(--accent-press);
}

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--field-border);
}

a.btn-secondary:hover {
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--selection-bg);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border-idle);
}

a.btn-ghost:hover {
  color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--fill-dim);
  color: var(--text-primary);
  border-color: var(--field-border);
}

/* 빨강은 되돌릴 수 없는 동작의 확인 버튼을 위해 남겨 둔다. */
.btn-danger {
  background: var(--crit);
  color: var(--on-crit);
  border-color: var(--crit);
}

a.btn-danger:hover {
  color: var(--on-crit);
}

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--crit-btn-hover);
  border-color: var(--crit-btn-hover);
  color: var(--on-crit);
}

/* 위험 구역의 유일한 컨트롤 (계정 삭제, PC 등록 해제): 버튼으로 읽히도록 테두리를 두르고, 윤곽과 글만 빨갛다;
   확인 대화 상자는 여전히 빨간 채움을 싣는다. */
.btn-danger-outline {
  background: var(--panel-bg);
  color: var(--crit-text);
  border-color: var(--crit-line);
}

a.btn-danger-outline:hover {
  color: var(--crit-text);
}

.btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--crit-fill);
  border-color: var(--crit);
}

.btn-quiet,
.btn-quiet-danger {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
}

a.btn-quiet:hover,
a.btn-quiet-danger:hover {
  color: var(--text-primary);
}

.btn-quiet:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--selection-bg);
  color: var(--text-primary);
}

.btn-quiet-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--crit-fill);
  color: var(--crit-text);
  border-color: var(--crit-line);
}

/* 정사각형 아이콘 버튼; 글 버튼과 같은 토큰으로 크기를 정한다. */
.btn-icon {
  width: var(--h-ctl);
  padding: 0;
}

.btn-icon.btn-sm {
  width: var(--h-sm);
}

.btn-icon.btn-lg {
  width: var(--h-lg);
}

/* 링크로 읽히는 버튼 (문장이나 표 셀 안의 인라인 동작). */
.btn-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  white-space: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover:not(:disabled) {
  color: var(--accent-hot);
}

/* 휴대폰에서 긴 라벨은 버튼을 페이지 가장자리 밖으로 밀어내는 대신 버튼 안에서 줄을 바꾼다. */
@media (max-width: 480px) {
  .btn:not(.btn-link) {
    max-width: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
    text-align: center;
  }
}

/* 로딩 (lib/forms.js 가 설정한다: 스피너를 앞에 붙이고 라벨을 .btn-loadingText 로 감싼다) */
.btn-loading {
  position: relative;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: btn-spin 0.65s linear infinite;
  opacity: 0.7;
}

.btn-loadingText {
  opacity: 0.7;
}

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