/**
 * @author parkyk
 * @since 2026-04-15
 * @description 프로젝트 공통 UI 컴포넌트 (x- prefix)
 *   pcommon3.css(_클래스)와 별도로, Tailwind 유틸리티 반복을 줄이기 위한 시맨틱 클래스.
 *   Tailwind Preflight 적용 환경 기준. @apply 미사용.
 */

/* 폼 — 입력 필드 */
.x-input {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #fff;
}
select.x-input { padding-top: calc(0.25rem + 0.5px); padding-bottom: calc(0.25rem + 0.5px); }
.x-input.x-lg { padding: 0.5rem 0.75rem; }
select.x-input.x-lg { padding-top: calc(0.5rem + 0.5px); padding-bottom: calc(0.5rem + 0.5px); }
.x-input:focus {
	border-color: #86b7fe;
}
.x-input:disabled,
.x-input[readonly] {
	background-color: #f3f4f6;
	cursor: not-allowed;
}

/* 폼 — 라벨+입력. 미디어쿼리 없이 flex-wrap 으로 '컨테이너 실제 폭'에 반응
   (모달·패널처럼 화면≠폼 폭인 곳에 정확). 입력이 라벨 옆에 못 들어가면 자동으로 아래로 줄바꿈.
   역할 분리: .x-form = 필드(세로) 간격 / 각 label = 라벨↔입력 간격 → 줄바꿈돼도 필드 구분 또렷 */
.x-form {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;                                  /* 필드 사이 — 내부 간격(0.25rem)과 3배 대비로 구분(쌓여도 또렷) */
}
/* 행은 label(단순 필드, 라벨 연결) 또는 div(라디오그룹 등 복합 행) 둘 다 가능 */
.x-form > * {
	display: flex;
	flex-wrap: wrap;
	align-items: center;                           /* 단일 줄 입력은 라벨↔컨트롤 수직 중앙 정렬 */
	gap: 0.25rem 1rem;                             /* row(줄바꿈 시 라벨↔입력) / column(나란히 시) */
	border-bottom: 1px solid #f1f5f9;              /* 행 구분선(연하게) — 필드 구분 또렷 */
	padding-bottom: 0.25rem;
}
/* 여러 줄 컨트롤(textarea 자동) · tall 행(.x-top 수동, 예: 첨부 목록)은 라벨 상단 정렬 */
.x-form > *:has(textarea),
.x-form > *.x-top { align-items: start; }
.x-form > * > :first-child {
	flex: 0 0 8rem;                                /* 라벨 = 첫 요소 (폭 고정) */
	font-weight: 500;
}
.x-form > * > :nth-child(2) {
	flex: 1 1 16rem;                               /* 컨트롤 = 둘째 요소 (타입 무관: input/select/textarea/값 span/div 묶음 등) */
	min-width: 0;                                  /* 플렉스 자식 overflow 방지 */
}
/* 위치 기반(첫=라벨, 둘째=컨트롤)이라 컨트롤 타입 무관하게 범용. 셋째 이후(힌트 p/small 등)는 규칙 밖 → 다음 줄에 자연스레 흐름 */
/* 읽기전용 상세 변형 — 라벨 muted 처리해 값(검정) 강조 (행 구분선은 base .x-form 에서 공통 적용) */
.x-form.x-form-view > * > :first-child { color: #6b7280; }

/* 폼 — 버튼 */
.x-btn {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	background-color: #1f2937;
	color: #fff;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.x-btn.x-lg { padding: 0.5rem 1rem; }
.x-btn:hover { background-color: #374151; color: #fff; }
.x-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.x-btn.x-blue { background-color: #3b82f6; }
.x-btn.x-blue:hover { background-color: #2563eb; color: #fff; }
.x-btn.x-red { background-color: #ef4444; }
.x-btn.x-red:hover { background-color: #dc2626; color: #fff; }
.x-btn.x-outline {
	background-color: transparent;
	border: 1px solid #d1d5db;
	color: inherit;
}
.x-btn.x-outline:hover { background-color: #f9fafb; }
.x-btn.x-outline.x-blue { border-color: #3b82f6; color: #3b82f6; }
.x-btn.x-outline.x-blue:hover { background-color: #eff6ff; }
.x-btn.x-outline.x-red { border-color: #ef4444; color: #ef4444; }
.x-btn.x-outline.x-red:hover { background-color: #fef2f2; }

/* 카드 */
.x-card {
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: 1rem;
}

/* 라벨 */
.x-label { display: block; margin-bottom: 0.25rem; }

/* 알림 */
.x-alert {
	border-radius: 0.25rem;
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: #f3f4f6;
	color: #374151;
}
.x-alert.x-ok   { background-color: #f0fdf4; color: #166534; }
.x-alert.x-warn { background-color: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.x-alert.x-err  { background-color: #fef2f2; color: #991b1b; }
.x-alert.x-info { background-color: #eff6ff; color: #1e40af; }

/* 제목 박스 — 페이지 제목 + 우측 액션(등록 버튼 등) */
.x-title-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.x-text-title { font-weight: 600; padding-left: 0.625rem; border-left: 3px solid #2563eb; line-height: 1.2; }

/* 검색 박스 — 리스트 페이지 상단 필터+검색 영역. 좁은 화면에선 자동 줄바꿈. */
.x-search-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.75rem; background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.375rem; }

/* 테이블 */
.x-table { border-collapse: collapse; width: 100%; }
.x-table th,
.x-table td { padding: 0.25rem 0.5rem; border: 1px solid #dee2e6; }
.x-table th { background-color: #f5f5f5; font-weight: 500; text-align: center; white-space: nowrap; }
.x-table tbody tr:hover { background-color: #f0f4ff; }

/* 반응형 테이블 — 좁은 화면에서 가로 스크롤. 넓은 화면에선 100% 채움 */
.x-table-scroll { overflow-x: auto; }
.x-table-scroll > .x-table { min-width: max-content; }

/* sticky thead 테이블 — 헤더를 상단에 고정.
   사용: <div class="x-table-sticky-scroll" style="max-height:..."><table class="x-table x-table-sticky">...
   border-collapse: separate로 두어야 스크롤 시 헤더 위로 보더가 비치는 현상이 없음. */
.x-table-sticky-scroll { overflow: auto; }
.x-table-sticky-scroll > .x-table { min-width: max-content; }
.x-table.x-table-sticky { border-collapse: separate; border-spacing: 0; }
.x-table.x-table-sticky th,
.x-table.x-table-sticky td { border: 0; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
.x-table.x-table-sticky th:first-child,
.x-table.x-table-sticky td:first-child { border-left: 1px solid #dee2e6; }
.x-table.x-table-sticky thead th { border-top: 1px solid #dee2e6; position: sticky; top: 0; z-index: 1; }

/* 뱃지 */
.x-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	background-color: #f3f4f6;
	color: #374151;
}
.x-badge.x-blue   { background-color: #eff6ff; color: #3b82f6; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */
.x-badge.x-green  { background-color: #f0fdf4; color: #22c55e; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */
.x-badge.x-yellow { background-color: #fef3c7; color: #d97706; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */
.x-badge.x-pink   { background-color: #fce7f3; color: #ec4899; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */
.x-badge.x-red    { background-color: #fef2f2; color: #ef4444; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */
.x-badge.x-purple { background-color: #f5f3ff; color: #7c3aed; }
.x-badge.x-gray   { background-color: #f3f4f6; color: #6b7280; } /* NOSONAR 대비: 파스텔 뱃지 톤(의도) */

/* 체크박스/라디오 라벨 */
.x-check-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* 사이드 메뉴 링크 */
.x-nav-link { display: block; padding: 0.5rem 0; color: #1f2937; text-decoration: none; }
.x-nav-link:hover { color: #2563eb; }
.x-nav-link.active { color: #2563eb; font-weight: 600; }

/* 페이지 제목 (auth 등 중앙 정렬 페이지) */
.x-page-title { font-weight: 700; font-size: 1.5rem; }

/* 좁은 컨테이너 (중앙 정렬, 폼/에러 페이지 등) */
.x-container-narrow { max-width: 28rem; width: 100%; margin: 3rem auto; padding: 0 1rem; }

/* 에러 텍스트 */
.x-err { color: #ef4444; }

/* 빈 상태 */
.x-empty { text-align: center; color: #9ca3af; padding: 0.75rem; }

/* 탭 */
.x-tab {
	display: flex;
	border-bottom: 2px solid #e5e7eb;
	gap: 0;
}
.x-tab-item {
	padding: 0.5rem 1rem;
	cursor: pointer;
	border: none;
	background: none;
	color: #6b7280;
	margin-bottom: -2px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.x-tab-item:hover { color: #2563eb; }
.x-tab-item.active {
	color: #2563eb;
	font-weight: 600;
	border-bottom-color: #2563eb;
}

/* 페이지네이션 */
.x-pagination {
	display: flex;
	gap: 0.25rem;
	justify-content: center;
	margin: 0.75rem 0;
}
.x-page-item {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem;
	cursor: pointer;
	color: #374151;
	text-decoration: none;
	background: none;
}
.x-page-item:hover { background-color: #f3f4f6; }
.x-page-item.active { background-color: #1f2937; color: #fff; border-color: #1f2937; }
.x-page-item:disabled { cursor: not-allowed; opacity: 0.4; }