/* 공용 단추 한 벌 — 디자인 가이드 §4.5「공용 단추 한 벌」(v2.51.0).
 *
 * 앱에 단추 가족이 다섯이었다(.btn · .fbar-btn · .db-action-button · 상담예약의
 * .button · 가이드 견본 .dsg-button).  같은 「저장」이 화면마다 높이 36~42px,
 * 모서리 6~8px, 굵기 400~800 으로 달랐다(§7 위반).  가장 많이 쓰이고(690곳)
 * 가이드 계약에 가장 가까운 .btn 을 정본으로 삼고, 그 정의를 trades/base.html
 * 의 <style> 에서 이 파일로 옮겼다 — base.html 을 상속하지 않는 FBAR 화면도
 * 같은 파일 하나를 링크해 같은 단추를 쓰게 하기 위해서다.  다른 가족을 옮기는
 * 표는 가이드 §4.5 와 button_migration_table.md 에 있다.
 *
 * 계층(§4.5):
 *   .btn               Primary — 파란 채움 + 흰 글자.  영역당 하나.
 *   .btn-primary       Primary 를 명시하고 싶을 때(.btn 과 같다)
 *   .btn-secondary     흰 배경 + 컨트롤 테두리.  취소·확인·보조 작업
 *   .btn-quiet         옅은 회색 배경.  초기화·표 안 행 동작·낮은 우선순위
 *   .btn-danger        흰 배경 + 빨간 테두리·글자.  삭제 직전 행동
 *   .btn-success       승인처럼 되돌리는 것이 아닌 확정(§2.1 성공 3단계)
 * 크기:
 *   (기본) 42px        폼 행·머리 행동
 *   .btn-sm   38px     조밀한 표 안 행 동작(§2.3)
 *   .btn-icon 40×40    아이콘만 있는 단추 — .btn-sm 과 함께 써도 40 아래로 줄지 않는다(§6)
 *   .btn-icon--inline  글줄 안 지우기 × — 눈에 보이는 것은 20×20(글자 16px), 클릭 영역은 40×40(§4.5 v2.56.0)
 *
 * 이 파일은 base.html 의 {% block extra_css %} 앞에 링크된다.  옛 <style> 안의
 * .btn 과 같은 캐스케이드 자리라, 화면이 자기 <style> 로 덮어 둔 규칙은 2단계
 * 이전 전까지 지금처럼 이긴다.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 42px;
    margin: 0;
    padding: 10px 20px;
    background: var(--pundit-primary);
    color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    /* §4.5·§2.2.2: 단추 라벨은 700 이다.  지정하지 않아 400 으로 그려졌고,
       FBAR(800)·DB 관리(700)와 같은 「저장」이 굵기로 갈렸다. */
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
    background: var(--pundit-primary-strong);
    color: #FFFFFF;
    text-decoration: none;
}

/* §6: 인접 배경과 3:1 이상인 #2458C6 3px 실선.  반투명 링으로 대신하지 않는다. */
.btn:focus-visible {
    outline: 3px solid var(--pundit-primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--pundit-primary);
    border-color: transparent;
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--pundit-primary-strong);
    color: #FFFFFF;
}

/* §2.1: 조작할 수 있는 것의 경계는 --pundit-border-control 이다.  장식용
   --pundit-border 는 흰 배경에서 1.29:1 이라 테두리가 사실상 보이지 않는다. */
.btn-secondary {
    background: var(--pundit-surface);
    border-color: var(--pundit-border-control);
    color: var(--pundit-text);
}

/* §4.5: 호버는 한 단계 진하게 — 테두리도 연해지지 않고 --pundit-muted-strong 으로
   진해진다. */
.btn-secondary:hover {
    background: var(--pundit-surface-soft);
    border-color: var(--pundit-muted-strong);
    color: var(--pundit-text);
}

/* Quiet(§4.5 3번, 표 안 행 동작의 기본 §4.5 v2.19.0).  호버는 review_project 의
   행 동작이 먼저 정한 대로 옅은 파랑으로 올라간다 — 새 회색을 만들지 않는다(§7). */
.btn-quiet {
    background: var(--pundit-surface-soft);
    border-color: var(--pundit-border-control);
    color: var(--pundit-text);
}

.btn-quiet:hover {
    background: var(--pundit-primary-soft);
    border-color: var(--pundit-primary);
    color: var(--pundit-primary-strong);
}

/* 흰 글자는 --pundit-success 위에서 4.35:1 로 AA 미달 — 채움은 -strong,
   호버는 -stronger(흰 글자 7.46:1)다(§2.1, §4.5 v2.25.0). */
.btn-success {
    background: var(--pundit-success-strong);
    border-color: transparent;
    color: #FFFFFF;
}

.btn-success:hover {
    background: var(--pundit-success-stronger);
    color: #FFFFFF;
}

.btn-danger {
    background: var(--pundit-surface);
    border-color: var(--pundit-danger);
    color: var(--pundit-danger);
}

/* §4.5: Danger 는 호버에서 -strong 으로 채우고 글자를 흰색으로 뒤집는다
   (흰 글자 on #A8302C = 6.72:1).  위험색을 글자에만 얹지 않는다. */
.btn-danger:hover {
    background: var(--pundit-danger-strong);
    border-color: var(--pundit-danger-strong);
    color: #FFFFFF;
}

/* §2.3: 조밀한 표 작업 단추는 38px 층이다. */
.btn-sm {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13px;
}

/* §6: 아이콘만 있는 단추도 클릭 영역은 40×40.  .btn-sm 과 같이 써도 줄지 않게
   두 클래스 선택자로 둔다.  이름은 aria-label 로 준다(title 은 이름이 아니다). */
.btn.btn-icon {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 10px;
}

/* 글줄 안 지우기 × (§4.5 v2.56.0) — 「자녀 1 ×」·Alias 태그처럼 글자 바로 옆에서 줄이나 태그
   하나를 지우는 ×.  40×40 상자에 빨간 테두리를 두르니 글자(13~14px)보다 훨씬 커 보였다(대표
   지적 2026-09-29).  눈에 보이는 것은 글자 크기(20×20 상자 · 16px 글자)로 줄이고, §6 의 클릭
   영역 40×40 은 ::after 가 지킨다 — 상자를 키우지 않으니 줄 높이가 늘지 않고 이웃을 밀지 않는다.
   쉴 때는 테두리도 채움도 없는 --pundit-muted-strong 글자, 호버·포커스에서 옅은 빨강 배경 +
   진한 빨강 글자(위험 신호는 누르려는 순간에 올린다).  포커스 링은 .btn:focus-visible 의 3px 실선이
   그대로 그린다.  색은 이 규칙이 정하므로 btn-danger 같은 계층 클래스를 함께 쓰지 않는다.
   짝: `btn btn-icon btn-icon--inline` + aria-label.  ::after 가 상자 밖으로 10px 나가므로 옆의 다른
   조작 요소(입력칸·단추)와는 가로·세로 10px 이상 띄운다 — 덜 띄우면 이웃의 끝을 이 ×가 가로챈다.
   대화상자·알림·서랍의 머리 닫기 ×는 각자 절이 정한 다른 구성요소다. */
.btn.btn-icon.btn-icon--inline {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--pundit-muted-strong);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

/* 클릭 영역 — 보이는 상자와 같은 중심의 40×40 투명 상자(단추의 일부라 누르면 단추가 눌린다). */
.btn.btn-icon.btn-icon--inline::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.btn.btn-icon.btn-icon--inline:hover:not(:disabled):not([aria-disabled="true"]),
.btn.btn-icon.btn-icon--inline:focus-visible {
    background: var(--pundit-danger-bg);
    color: var(--pundit-danger-strong);
    /* 20px 상자 둘레의 3px 링이 바로 옆 글자를 덮지 않게 간격을 0 으로 둔다(.btn 은 2px). */
    outline-offset: 0;
}

/* 비활성: 채움 없이 옅은 글자만 — 아래 .btn:disabled 묶음의 회색 채움을 덮는다. */
.btn.btn-icon.btn-icon--inline:disabled,
.btn.btn-icon.btn-icon--inline[aria-disabled="true"] {
    background: transparent;
    color: var(--pundit-muted);
}

/* 비활성(§4.5): 불투명도만 낮추지 않고 배경·테두리·글자·커서를 함께 준다.
   **비활성 삭제는 빨강을 잃는다** — 못 누르는 단추가 위험해 보이면 안 된다.
   :hover 짝을 같이 적어 두 클래스짜리 호버(.btn-danger:hover)보다 강하게 하고,
   파일 맨 끝에 두어 같은 강도의 규칙과 비겨도 이긴다.  그래서 누를 수 없는
   단추는 호버에 반응하지 않는다.  링크형 단추는 href 를 빼고 aria-disabled 를 준다. */
.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
    background: var(--pundit-surface-soft);
    border-color: var(--pundit-border);
    color: var(--pundit-muted);
    cursor: not-allowed;
    box-shadow: none;
}