/* 관리 화면 공통 부품(Ant Design 모양) — 2026-11-10 B안 4단계에서 views/components/ant-components.ejs 의 \3c style> 을 옮겼다.
 * 예전에는 이 500줄이 화면마다 HTML 안에 실렸다. 이제 한 파일로 캐시된다. 불러오는 자리는 그대로(ant-components.ejs)라 적용 순서도 같다.
 * 색·둥글기·그림자는 공통 토큰을 쓴다. 새 화면은 jp-btn-* · jp-input · jp-card · jp-table 을 쓴다. */
/* 전역 폰트 — Pretendard (시안 보드) */
* {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* Ant Design Button Styles */
.ant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--jp-radius-element) !important;
  transition: all 0.2s;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.ant-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(196, 82, 29, 0.25);
}

.ant-btn:focus-visible {
  outline: 3px solid var(--jp-palette-sand-900);
  outline-offset: 2px;
}

.ant-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ant-btn-primary {
  background-color: var(--jp-color-action); /* 주 버튼(먹색, 2026-11-10) */
  border-color: var(--jp-color-action);
  color: var(--jp-color-on-action);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  font-weight: 600;
}

.ant-btn-primary:hover {
  background-color: var(--jp-color-action-hover);
  border-color: var(--jp-color-action-hover);
}

.ant-btn-primary:active {
  background-color: var(--jp-color-action-hover);
  border-color: var(--jp-color-action-hover);
}

/* Ant Design Form Input Styles - Figma Basic Form 참고 */
.ant-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--jp-color-border-emphasized);
  border-radius: var(--jp-radius-element) !important; /* 2026-11-10: 공통 입력칸(.jp-input)과 같은 값 */
  background-color: var(--jp-color-background-card);
  color: var(--jp-color-text-primary);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: 'Nunito Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.ant-input::placeholder {
  color: var(--jp-color-text-tertiary);
}

.ant-input:hover:not(:disabled) {
  border-color: var(--jp-palette-orange-500); /* 브랜드 Primary 컬러 */
}

.ant-input:focus {
  outline: none;
  border-color: var(--jp-color-accent);
  box-shadow: 0 0 0 3px var(--jp-color-focus-ring);
}

.ant-input:disabled {
  background-color: var(--jp-color-background-muted);
  cursor: not-allowed;
  color: var(--jp-color-text-secondary);
  border-color: var(--jp-color-border);
}

textarea.ant-input {
  min-height: 80px;
  resize: vertical;
}

select.ant-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238C8C8C' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}

/* Ant Design Card Styles - Figma Basic Form 참고 */
.ant-card {
  background-color: var(--jp-color-background-card);
  border-radius: var(--jp-radius-container) !important; /* 2026-11-10: 공통 카드(.jp-card)와 같은 값 */
  border: 1px solid var(--jp-color-border);
  box-shadow: var(--jp-shadow-low);
  transition: all 0.2s;
}
/* 카드 안 메뉴가 잘리지 않게 overflow 는 두고, 바탕색 있는 머리말만 카드 둥글기를 물려받는다 */
.ant-card > .ant-card-head:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.ant-card:hover {
  box-shadow: var(--jp-shadow-med);
}

.ant-card-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--jp-color-border);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--jp-color-text-primary);
  background-color: var(--jp-color-background-neutral);
  font-family: 'Nunito Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.ant-card-head h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  font-family: 'Nunito Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.ant-card-body {
  padding: 24px;
}

/* Form Field Spacing - Figma Basic Form 참고 */
.ant-form-item {
  margin-bottom: 24px;
}

.ant-form-item:last-child {
  margin-bottom: 0;
}

.ant-form-item-label {
  display: block;
  margin-bottom: 8px;
}

.ant-form-item-label > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--jp-color-text-primary);
  line-height: 1.6;
  font-family: 'Nunito Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* Ant Design Layout Grid System */

/* Ant Design Divider */

/* Ant Design Space */

/* Table Styles - Figma Components 참고 */
.ant-table {
  width: 100%;
  border-collapse: collapse;
}

.ant-table-td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--jp-color-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--jp-color-text-primary);
  text-align: center;
  font-family: 'Nunito Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.ant-table-tbody tr:hover {
  background-color: var(--jp-color-background-page);
}

.ant-table-tbody tr:last-child td {
  border-bottom: none;
}

/* 기존 Bootstrap 테이블도 동일한 스타일 적용 */

/* Alert/Info Card Styles - Figma Components 참고 */

.ant-card.bg-error-50 {
  background-color: var(--jp-color-error-muted);
  border-color: var(--jp-color-border-error-subtle);
}

/* Button Group Spacing */
.ant-btn + .ant-btn {
  margin-left: 8px;
}

/* Form Layout Improvements */
.space-y-5 > * + * {
  margin-top: 20px;
}

.space-y-6 > * + * {
  margin-top: 24px;
}

/* Card Spacing */
.ant-card + .ant-card {
  margin-top: 24px;
}

/* Ant Design Descriptions - Figma Descriptions 참고 */

/* 반응형: 모바일에서는 세로 레이아웃 */