/* ============================================================
   공통 유틸리티 박스/엘리먼트
   ------------------------------------------------------------
   - 인라인 style="background-color: ..." 대신 의미가 있는 클래스로 치환.
   - 페이지 CSS / HTML 인라인 style 에서 박스/배경 hex 직접 사용 금지.
   ============================================================ */

/* 옅은 회색 정보 박스 — 입력 표시/요약 카드 등 */
.info-box {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-base);
}
.info-box--accent {
    border-left-width: 3px;
    border-left-color: var(--color-text-strong);
}

/* 경고/위험 박스 — 인라인 검증 메시지 */
.warning-box {
    padding: var(--space-2);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

/* 검정 액션 버튼 (Agency 등 일부 페이지의 강조 액션 — KRDS small 위에 얹어 사용) */
.btn-dark {
    background-color: var(--color-text-strong);
    border: 1px solid var(--color-text-strong);
    color: var(--color-text-on-primary);
}
.btn-dark:hover {
    background-color: #111827;
    border-color: #111827;
    color: var(--color-text-on-primary);
}

/* 외곽선만 있는 가벼운 버튼 (취소/초기화/닫기 — 흰배경 + 회색보더) */
.btn-outline {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}
.btn-outline:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text-strong);
}

/* 강조 오렌지 액션 (현재 1곳 — agency 회사검색 조회) */
.btn-accent {
    background-color: #f97316;
    border: 1px solid #f97316;
    color: var(--color-text-on-primary);
}
.btn-accent:hover {
    background-color: #ea580c;
    border-color: #ea580c;
    color: var(--color-text-on-primary);
}

/* 테이블 헤더 행 강조 (오렌지) — agency ga-company link */
tr.row-accent {
    background-color: #f97316;
    color: var(--color-text-on-primary);
}

/* ============================================================
   범용 정렬/표시 유틸 — HTML 인라인 style 대체용
   ============================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.is-hidden { display: none !important; }

/* 셀 빈 상태 표시 (테이블 내 "데이터 없음" 안내) */
.cell-empty {
    text-align: center;
    padding: 20px;
    color: var(--color-text-muted);
}

/* ============================================================
   컬럼 너비 유틸 (테이블 <th>/<td> 만 — <col> 은 브라우저 처리상 inline 유지)
   ============================================================ */
.col-w-5 { width: 5%; }
.col-w-8 { width: 8%; }
.col-w-10 { width: 10%; }
.col-w-15 { width: 15%; }
.col-w-17 { width: 17%; }
.col-w-20 { width: 20%; }
.col-w-25 { width: 25%; }
.col-w-30 { width: 30%; }
.col-w-35 { width: 35%; }
.col-w-40 { width: 40%; }
.col-w-50 { width: 50%; }
.col-w-100 { width: 100%; }

/* 픽셀 사이즈 입력 필드 너비 (자주 쓰이는 사이즈만) */
.input-w-70 { width: 70px; }
.input-w-80 { width: 80px; }
.input-w-90 { width: 90px; }
.input-w-100 { width: 100px; }
.input-w-110 { width: 110px; }
.input-w-130 { width: 130px; }
.input-w-140 { width: 140px; }
.input-w-170 { width: 170px; }
.input-w-200 { width: 200px; }

/* 체크박스/라디오 라벨 — 라벨 텍스트와 간격 */
.cb-gap { margin-right: 4px; }

/* 셀션 마진 */
.mt-20 { margin-top: 20px; }