/* =========================
   Button Base
========================= */
.btn {
  --btn-bg: #111827;          /* 거의 검정 */
  --btn-bg-hover: #fff;    /* hover 시 살짝 밝게 */
  --btn-bg-active: #000000;   /* active 진검정 */
  --btn-text: #ffffff;
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 16px;
  min-height: 40px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 8px;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn--small:hover,
.btn--primary:hover{
	color:var(--btn-bg-active);
}
/* Hover */
.btn:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Active (클릭 중) */
.btn:active {
  background: var(--btn-bg-active);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Focus (접근성) */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* =========================
   Variants
========================= */

/* Secondary (회색) */
.btn-secondary {
  --btn-bg: #ffffff;
  --btn-bg-hover: #f3f4f6;
  --btn-bg-active: #e5e7eb;
  --btn-text: #111827;
  --btn-border: #d1d5db;
}

/* Danger (삭제 등) */
.btn-danger {
  --btn-bg: #7f1d1d;
  --btn-bg-hover: #991b1b;
  --btn-bg-active: #450a0a;
}

/* Outline */
.btn-outline {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(17,24,39,.06);
  --btn-bg-active: rgba(17,24,39,.12);
  --btn-text: #111827;
  --btn-border: #111827;
}

/* Muted (비활성 느낌) */
.btn-muted {
  --btn-bg: #f3f4f6;
  --btn-bg-hover: #e5e7eb;
  --btn-bg-active: #d1d5db;
  --btn-text: #4b5563;
}

/* =========================
   Size
========================= */
.btn-sm {
  padding: 7px 12px;
  min-height: 32px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 20px;
  min-height: 48px;
  font-size: 15px;
}

/* =========================
   Icon Button
========================= */
.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
}

/* =========================
   Full Width
========================= */
.btn-block {
  width: 100%;
}

/* =========================
   Link Base
========================= */
.link {
  --link-color: #111827;
  --link-hover: #000000;
  --link-active: #000000;
  --link-bg-hover: rgba(17,24,39,.06);

  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 2px 4px;
  border-radius: 6px;

  transition:
    color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

/* Hover */
.link:hover {
  color: var(--link-hover);
  background: var(--link-bg-hover);
  text-decoration: none;
}

/* Active */
.link:active {
  color: var(--link-active);
}

/* Focus (접근성) */
.link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20,52,123,.25);
}

/* =========================
   Variants
========================= */

/* Muted (보조 링크) */
.link-muted {
  --link-color: #6b7280;
  --link-hover: #374151;
}

.link-danger {
  --link-color: #7f1d1d;
  --link-hover: #991b1b;
  --link-bg-hover: rgba(127,29,29,.08);
}


/* Ghost (텍스트만 강조) */
.link-ghost {
  padding: 0;
  background: transparent;
}
.link-ghost:hover {
  background: transparent;
  text-decoration: underline;
}

/* =========================
   Size
========================= */
.link-sm {
  font-size: 13px;
}

.link-lg {
  font-size: 16px;
  font-weight: 600;
}

/* =========================
   Inline Badge / Icon
========================= */
.link-icon {
  gap: 4px;
}
/* =========================
   Header Button Override
========================= */

/* outline 버튼도 헤더용 정리 */
.site-header .btn-outline.header-btn {
  background: transparent;
}

.site-header .btn-outline.header-btn:hover {
  background: rgba(37,99,235,.08);
}
/* =========================
   Header Button – Unified
========================= */

.site-header .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 14px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  background: transparent;
  border: 1px solid transparent;

  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}


/* Neutral (화이트 버튼) */
.site-header .header-btn--neutral {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
}

.site-header .header-btn--neutral:hover {
  background: #f3f4f6;
}

/* Outline (블랙 아웃라인) */
.site-header .header-btn--outline {
  background: transparent;
  color: #111827;
  border-color: #111827;
}

.site-header .header-btn--outline:hover {
  background: rgba(17,24,39,.06);
}

/* Danger (로그아웃) */
.site-header .header-btn--danger {
  color: #7f1d1d;
  border-color: #7f1d1d;
}

.site-header .header-btn--danger:hover {
  background: rgba(127,29,29,.08);
}

/* 모바일에서 버튼 줄맞춤 */
@media (max-width: 768px) {
  .site-header .header-btn {
    width: 100%;
    justify-content: center;
  }
}


.site-header .btn,
.site-header .btn-primary,
.site-header .btn-outline-primary,
.site-header .btn-outline-secondary,
.site-header .btn-outline-danger {
  all: unset;
}