/* =========================================================
   button.css - 버튼 3종(채움/약한/중립) / 소형 / 모달 버튼 / 레거시 button.btn (DESIGN.md 8.5, 9.2, 9.3, 9.7)
   ========================================================= */
/* --- 기본 버튼 40px --- */
/* 버튼: TDS medium(40px / 10px 반경 / 600) 기준. 채움(Primary) / 약한(Weak, 연블루) / 중립(Surface) 세 가지만 사용
   admin_common.css 의 레거시 전역 규칙 `button.btn`(width 80/height 36/margin 20px 5px)보다 우선하도록 요소+클래스 선택자로 쓴다 */
button.btn, .btn {
    width: auto; margin: 0;
    border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; line-height: 1.2;
    height: 40px; padding: 0 16px; border: 1px solid transparent; cursor: pointer;
    transition: background-color .13s, border-color .13s;
}
/* <label>/<a> 에 .btn 을 붙일 때(숨긴 파일 input 을 여는 라벨 등): 인라인 요소라 height 가 안 먹고 글자가 위로 붙으므로 flex 로 세로 가운데 */
label.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; vertical-align: middle; text-decoration: none; }
.btn:focus-visible, .m-btn:focus-visible, .btn-write:focus-visible, .btn-bulk-cancel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .m-btn:disabled { opacity: .4; cursor: not-allowed; }
button.btn-reset, .btn-reset  { background-color: var(--btn-neutral-bg); color: var(--sub); border: 1px solid transparent; }
button.btn-reset:hover, .btn-reset:hover { background-color: var(--btn-neutral-bg-hover); }
button.btn-search, .btn-search { background-color: var(--accent); color: #ffffff; border: 1px solid var(--accent); }
button.btn-search:hover, .btn-search:hover { background-color: var(--accent-ink); border-color: var(--accent-ink); }
button.btn-today, .btn-today  { background-color: var(--tint-blue); color: var(--tds-weak-fg); border: 1px solid transparent; width: 60px; height: 40px; padding: 0; border-radius: var(--r-ctl); }
button.btn-today:hover, .btn-today:hover { background-color: var(--tint-blue-strong); }

/* --- 도구줄 액션 버튼 --- */
/* 일괄 요청취소 버튼 — 파이등록(.btn-write)과 동일 형태, 배경만 붉은색 */
.btn-bulk-cancel {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; background-color: var(--danger); color: #ffffff;
    border: 1px solid var(--danger); border-radius: var(--r-ctl); font-size: 14px;
    line-height: 1; height: 40px; padding: 0 14px; cursor: pointer;
}
.btn-bulk-cancel:hover { background-color: var(--danger-ink); border-color: var(--danger-ink); }
/* 아이콘 16px: 안쪽 38px 에서 (38-16)/2 = 11px 정수 오프셋 → 소수점 스냅으로 1px 흔들리지 않음 */
.btn-bulk-cancel svg { width: 16px; height: 16px; flex: none; }
/* 선택 모드 '취소' 버튼 — 중립(회색) */
.btn-bulk-plain {
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; background-color: var(--btn-neutral-bg); color: var(--sub);
    border: 1px solid transparent; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600;
    line-height: 1; height: 40px; padding: 0 16px; cursor: pointer;
}
.btn-bulk-plain:hover { background-color: var(--btn-neutral-bg-hover); }
/* 도구줄 Primary(accent 채움): 목록 상단의 대표 생성 액션(등록/글쓰기). 치수·아이콘 간격은 btn-bulk-cancel 과 동일 (2026-09-07) */
.btn-bulk-blue {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px;
    background-color: var(--accent); color: #ffffff; border: 1px solid var(--accent); border-radius: var(--r-ctl);
    font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .12s;
}
.btn-bulk-blue:hover { background-color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-bulk-blue svg { width: 16px; height: 16px; flex: none; }
/* 파일 다운로드 아이콘(엑셀=초록, PDF=빨강): 중립 버튼 안에서도 브랜드색을 유지한다. svg 는 fill="currentColor" 로 그리고 색은 여기서만 정한다 */
.btn-bulk-plain svg, .btn-bulk-plain .ico-file { width: 16px; height: 16px; flex: none; margin-right: 6px; }
.ico-excel { color: var(--adm-success); }
.ico-pdf { color: var(--danger); }

.btn-write {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; background-color: var(--confirm); color: #ffffff;
    border: 1px solid var(--confirm); border-radius: var(--r-ctl); font-size: 14px;
    line-height: 1; height: 40px; padding: 0 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(49,130,246,.4);
}
.btn-write:hover { background-color: var(--confirm-ink); border-color: var(--confirm-ink); }
.btn-write svg { width: 16px; height: 16px; flex: none; }

/* --- 표 관리 셀 소형 버튼 --- */
.btn-small-outline {
    background-color: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--sub); transition: background-color .12s, border-color .12s;
}
.btn-small-outline:hover:not(:disabled) { background-color: var(--track); border-color: var(--line-mid); }
.btn-small-blue {
    background-color: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: #ffffff;
}
.btn-small-blue:hover:not(:disabled) { background-color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-small-green {
    background-color: var(--confirm); border: 1px solid var(--confirm); border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: #ffffff;
}
.btn-small-red {
    background-color: var(--danger); border: 1px solid var(--danger); border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: #ffffff;
}
.btn-small-red:hover { background-color: var(--danger-ink); border-color: var(--danger-ink); }
/* 소형 Weak(연블루): 같은 셀 안에서 채움(Primary)과 구별해야 하는 보조/조회 액션 (예: 견적서작성=채움 vs 견적서목록=Weak) */
.btn-small-weak {
    background-color: var(--tint-blue); border: 1px solid transparent; border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--tds-weak-fg);
}
.btn-small-weak:hover:not(:disabled) { background-color: var(--tint-blue-strong); }
/* 소형 Weak(연초록): 초록 채움(btn-small-green)과 짝을 이루는 보조/조회 액션 (예: 발주물품목록=채움 vs 운송리스트=Weak, 2026-09-07) */
.btn-small-weak-green {
    background-color: var(--soft-green-bg); border: 1px solid transparent; border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--soft-green-fg);
}
.btn-small-weak-green:hover:not(:disabled) { background-color: var(--soft-green-bg-hover); }
/* 소형 아웃라인(초록): weak-green 과 짝을 이루는 더 가벼운 조회 액션 (2026-09-07) */
.btn-small-outline-green {
    background-color: var(--surface); border: 1px solid var(--soft-green-line); border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--soft-green-fg); transition: background-color .12s, border-color .12s;
}
.btn-small-outline-green:hover:not(:disabled) { background-color: var(--soft-green-bg-faint); border-color: var(--soft-green-line-strong); }
/* 소형 Weak(연보라/연빨강): 물류·정산 조회 액션 색 구분 (발주물품목록=보라, 환불정산 내역=빨강, 2026-09-07) */
.btn-small-weak-purple {
    background-color: var(--soft-purple-bg); border: 1px solid transparent; border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--soft-purple-fg);
}
.btn-small-weak-purple:hover:not(:disabled) { background-color: var(--soft-purple-bg-hover); }
.btn-small-weak-red {
    background-color: var(--soft-red-bg); border: 1px solid transparent; border-radius: 8px;
    font-size: 13px; padding: 6px 10px; cursor: pointer; line-height: 1.2; color: var(--soft-red-fg);
}
.btn-small-weak-red:hover:not(:disabled) { background-color: var(--soft-red-bg-hover); }
/* 소형 버튼 공통 치수: 높이 32(표 행 안에서 40px 입력보다 한 단계 작게), 글자 13/600. 2026-08-27 28px→32px 로 키움 */
.btn-small-outline, .btn-small-blue, .btn-small-green, .btn-small-red, .btn-small-weak, .btn-small-weak-green, .btn-small-outline-green, .btn-small-weak-purple, .btn-small-weak-red {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 32px; padding: 0 12px; font-weight: 600; white-space: nowrap; box-sizing: border-box;
}

/* --- 모달 버튼 --- */

/* 수동 파이요청 모달 전용 버튼 (common .btn 미사용) */
.m-btn {
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
    border-radius:var(--r-ctl); font-size:13.5px; line-height:1; height:40px;
    padding:0 18px; border:1px solid transparent; cursor:pointer; transition:background-color .15s, border-color .15s;
}
.m-btn-search { height:40px; padding:0 16px; background:var(--accent); color:#fff; border-color:var(--accent); }
.m-btn-search:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
.m-btn-primary { background:var(--confirm); color:#fff; border-color:var(--confirm); box-shadow:0 1px 2px rgba(49,130,246,.4); }
.m-btn-primary:hover { background:var(--confirm-ink); border-color:var(--confirm-ink); }
.m-btn-blue { background:var(--accent); color:#fff; border-color:var(--accent); }
.m-btn-blue:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
/* 약한(Weak) 버튼 — 모달 안 보조 액션. 채움(Primary)은 주 액션 하나에만 쓴다 (DESIGN.md 8.5) */
.m-btn-weak { background:var(--tds-weak-bg); color:var(--tds-weak-fg); border-color:transparent; font-weight:600; }
.m-btn-weak:hover { background:var(--tint-blue-strong); }
.m-btn-cancel { background:var(--btn-neutral-bg); color:var(--sub); border-color:transparent; font-weight:600; }
.m-btn-cancel:hover { background:var(--btn-neutral-bg-hover); color:var(--ink); }
.m-btn-warn { background:var(--danger); color:#fff; border-color:var(--danger); }
.m-btn-warn:hover { background:var(--danger-ink); border-color:var(--danger-ink); }

/* --- 레거시 공통 버튼(구 화면 호환) - 토큰 색으로 통일. 크기/여백은 기존 레이아웃 유지 --- */
.btn_box { text-align: right; }
.btn_box button { width: 80px; height: 36px; font-size: 14px; font-weight: 600; border: 0; text-align: center; color: #fff; background: var(--tds-primary); border-radius: var(--adm-r-btn); margin: 20px 5px; cursor: pointer; }
.btn_box button:hover { background: var(--tds-primary-strong); }
button.btn:not(.btn-search):not(.btn-reset):not(.btn-today):not(.btn-sub) { width: 80px; height: 36px; font-size: 14px; font-weight: 600; border: 0; text-align: center; color: #fff; background: var(--tds-primary); border-radius: var(--adm-r-btn); margin: 20px 5px; cursor: pointer; }
button.btn:not(.btn-search):not(.btn-reset):not(.btn-today):not(.btn-sub):hover { background: var(--tds-primary-strong); }
button.btn_cancel, .btn_box button.btn_cancel { background: var(--btn-neutral-bg); color: var(--tds-body); }
button.btn_cancel:hover, .btn_box button.btn_cancel:hover { background: var(--btn-neutral-bg-hover); }