/*
 * static/css/common.css
 * TAOL GLMS 공통 스타일
 */

/* Noto Sans 웹폰트 — Google Fonts. 라틴 = Noto Sans, 한글 = Noto Sans KR, 일본어 = Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* Google Material Icons — Outlined 기본, 나머지 변형도 포함 */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Sharp');

/* HS CODE와 문서 분석에서 공유하는 로딩 카드 */
.flow-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 24px;
}

.flow-loading-overlay[hidden] {
  display: none;
}

body.is-flow-loading {
  overflow: hidden;
}

.loading-card {
  display: flex;
  width: min(396px, 100%);
  min-height: 158px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 8px;
  background: var(--white, #fff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.circular-loader {
  --progress: 0;
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--primary, #0097D5) calc(var(--progress) * 1%), var(--grey-100, #f1f1f1) 0);
  transition: background 90ms linear;
}

.circular-loader::before {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--white, #fff);
  content: "";
}

.loader-percent {
  position: relative;
  z-index: 1;
  color: var(--Text-Blue-Main, #0097D5);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-12, 12px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-20, 20px); /* 166.667% */
  letter-spacing: -0.3px;
}

.loading-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.loading-card h2,
.loading-card p {
  margin: 0;
}

.loading-card h2 {
  color: var(--Text-Grey-Title, #232222);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: 20px;
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-30, 30px); /* 150% */
  letter-spacing: -0.5px;
}

.loading-card p {
  white-space: normal;
  color: var(--Text-Grey-500, #6E6E6E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px); /* 150% */
  letter-spacing: -0.4px;
}

/* 문서 가져오기 — 프로젝트 생성·템플릿·신청에서 같은 검토 화면을 사용한다. */
.document-import-open { overflow: hidden; }
.document-import-modal[hidden], .document-import-modal [hidden], .document-import-result[hidden] { display: none !important; }
.document-import-modal { z-index: 1400; }
/* 결과 단계 — Figma 12159:122112 등: 1400 × 960(화면보다 크면 96%) · padding 24/24/32 · 제목 ↔ 내용 ↔ 버튼 32 */
.document-import-modal .document-import-dialog { width: min(1400px, 96vw); max-width: 96vw; height: min(960px, 96vh); max-height: 96vh; gap: 32px; }
.document-import-modal .document-import-body { gap: 12px; min-height: 0; overflow: hidden; }
.document-import-dialog .modal-header { flex-shrink: 0; }
/* 업로드 단계 — Figma 문서에서 가져오기(12118:85897). .is-upload 는 JS 가 토글한다(두 단계 모두 .modal-dialog--figma).
   500 · radius 20 · padding 24/24/32 · 제목(Bold 20 #111) ↔ 파일 영역 ↔ 버튼 32 · 파일 영역 간격 10(드롭 영역 → 형식 안내 → 선택한 파일 행)
   드롭 영역·안내·파일 행 모양은 공통 엑셀 업로드 모달과 같은 .pt-excel-upload-area / .file-upload-hint / .file-upload-row.
   하단: 취소(흰) + OCR 분석 시작(파랑) 가운데 · 간격 8 — 검토 단계 전용 요소(건수·저장 상태·다른 문서·반영)는 숨김 */
.document-import-modal .document-import-dialog.is-upload { width: 500px; max-width: calc(100vw - 32px); height: auto; }
.document-import-dialog.is-upload > .document-import-body { gap: 10px; overflow-y: auto; }
.document-import-upload { display: flex; flex-direction: column; gap: 10px; }
.document-import-upload .file-upload-hint { margin: 0; }
.document-import-drop { font: inherit; color: inherit; }
.document-import-drop:disabled { cursor: wait; }
.document-import-dialog.is-upload > .document-import-footer { justify-content: center; gap: 8px; border-top: 0; }
.document-import-dialog.is-upload > .document-import-footer [data-di="apply-wrap"],
.document-import-dialog:not(.is-upload) > .document-import-footer [data-di="start"] { display: none; }
.document-import-error { border-radius: 5px; padding: 10px 12px; font-size: 12px; line-height: 1.6;
    background: #fef2f2; color: #9f2424; border: 1px solid #fecaca; }
.document-import-progress { color: var(--Text-Primary, #2958b8); font-weight: 600; }
/* 분석 중 — Figma LoadingCard(12118:85905): radius 20 · padding 20 · [진행률 원 48 ↔ 16 ↔ 문구] ↔ 24 ↔ 취소
   원: 바탕 Grey100 · 진행 Primary · 가운데 % (Medium 12 Primary) — 진행률은 분석 단계·처리 페이지 수(JS --progress)
   문구: '문서 분석중...'(Bold 20 #111) + 안내(Medium 16 #505050) */
.document-import-loading { z-index: 1401; }
.document-import-loading .loading-card { max-height: 90vh; overflow-y: auto; gap: 0; border-radius: 20px; }
.document-import-loading .circular-loader { margin-bottom: 16px; background: conic-gradient(var(--Fill-Primary-Main, #1769E0) calc(var(--progress) * 1%), var(--Fill-Grey-100, #E2E2E2) 0); }
.document-import-loading .loader-percent { color: var(--Text-Primary-Main, #1769E0); }
.document-import-loading .loading-card-text { white-space: normal; }
.document-import-loading .loading-card h2 { color: var(--Text-Grey-Main, #111); }
.document-import-loading .loading-card p { color: var(--Text-Grey-Sub, #505050); }
.document-import-loading [data-di="loading-cancel"] {
  min-width: 70px; height: 48px; margin-top: 24px; padding: 12px 16px; border-radius: 10px;
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Bold, 700); line-height: 24px; letter-spacing: -0.4px;
}
/* ── 결과 단계 본문: 원문 | 추출 결과 (간격 24) ── */
.document-import-review { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
/* 원문 — CoolGrey100 · radius 16 · padding 16 · 도구줄(오른쪽 정렬 · 간격 16) ↔ 16 ↔ 문서(radius 8) */
.document-import-source { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; padding: 16px; border-radius: 16px; background: var(--Fill-CoolGrey-100, #F1F5F9); overflow: hidden; }
.document-import-source-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; flex-shrink: 0;
  color: var(--Text-Grey-Main, #111); font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px; }
/* 도구 버튼 34 · radius 8 · padding 4 — 기본 흰 바탕 · CoolGrey200 테두리 · 아이콘 Grey800 / 비활성 Grey50 바탕 · 아이콘 Grey200 */
.document-import-tool { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 4px; border-radius: 8px;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); background: var(--Fill-White, #FFF); color: var(--Text-Grey-800, #2E2E2E); cursor: pointer; }
.document-import-tool .icon { font-size: 24px; width: 24px; height: 24px; }
.document-import-tool:disabled { border-color: transparent; background: var(--Fill-Grey-50, #F0F0F0); color: var(--Fill-Grey-200, #C5C5C5); cursor: default; }
.document-import-viewport { overflow: auto; flex: 1; min-height: 100px; border-radius: 8px; background: var(--Fill-White, #FFF); }
.document-import-page { position: relative; width: 100%; line-height: 0; background: var(--Fill-White, #FFF); }
.document-import-page[data-zoom="125"] { width: 125%; }
.document-import-page[data-zoom="150"] { width: 150%; }
.document-import-page[data-zoom="175"] { width: 175%; }
.document-import-page[data-zoom="200"] { width: 200%; }
.document-import-page img { display: block; width: 100%; height: auto; }
.document-import-page svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.document-import-region { stroke: #d39315; fill: #eebf2020; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.document-import-region:hover, .document-import-region:focus { stroke: #245dc0; fill: #3b82f630; stroke-width: 2; outline: none; }
.document-import-region.is-active { stroke: #1e5ed9; fill: #3b82f64d; stroke-width: 3; }
/* 추출 결과 — 머리(제목 Bold 18 + 상품 수 Medium 12 #505050 · 버튼 간격 10) ↔ 24 ↔ 본문(AI 안내 ↔ 24 ↔ 목록)
   접힘: 머리·안내 고정, 상품 목록만 스크롤 / 펼침(.has-open): 머리만 고정, 안내·목록 전체 스크롤 */
.document-import-values { display: flex; flex-direction: column; gap: 24px; min-width: 0; min-height: 0; overflow: hidden; }
.document-import-values-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.document-import-values-title { display: flex; align-items: center; gap: 16px; min-width: 0; white-space: nowrap; }
.document-import-values-title h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-18, 18px); font-weight: var(--Font-Weight-Bold, 700); line-height: 24px; letter-spacing: -0.45px; }
.document-import-values-title [data-di="product-count"],
.document-import-saved-count { color: var(--Text-Grey-Sub, #505050); font-size: var(--Font-Size-12, 12px); font-weight: var(--Font-Weight-Medium, 500); line-height: 20px; letter-spacing: -0.3px; }
.document-import-values-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 머리 버튼 — padding 10/14 · radius 10 · Bold 14 · 최소 70 (색은 공통 .btn-white / .btn-main) */
.document-import-values-actions .btn-common { min-width: 70px; height: 44px; padding: 10px 14px; border-radius: 10px;
  font-size: var(--Font-Size-14, 14px); font-weight: var(--Font-Weight-Bold, 700); line-height: 22px; letter-spacing: -0.35px; }
.document-import-values-body { display: flex; flex: 1; flex-direction: column; gap: 24px; min-height: 0; overflow: hidden; }
.document-import-values.has-open .document-import-values-body { overflow-y: auto; }
/* AI 안내 — CoolGrey100 · radius 10 · padding 16 · info 24 + Medium 16 #111 */
.document-import-notice { display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; margin: 0; padding: 16px; border-radius: 10px;
  background: var(--Fill-CoolGrey-100, #F1F5F9); color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px; }
.document-import-notice .icon { flex: none; font-size: 24px; width: 24px; height: 24px; }
.document-import-list { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.document-import-values.has-open .document-import-list { flex: none; overflow: visible; }
.document-import-saved-count { align-self: flex-end; margin: 0; }
.document-import-items { display: flex; flex-direction: column; gap: 10px; }
/* 상품 아코디언 — 흰 바탕 · CoolGrey200 테두리 · radius 10 · padding 16 · 머리(체크 24 ↔ 10 ↔ '1. 상품명' Bold 16 + 저장됨 뱃지 ↔ 화살표 24) ↔ 24 ↔ 입력칸 */
.document-import-item { display: flex; flex-direction: column; gap: 24px; padding: 16px; border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 10px; background: var(--Fill-White, #FFF); }
.document-import-item-head { display: flex; align-items: center; gap: 10px; }
.document-import-item-toggle { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.document-import-item-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Bold, 700); line-height: 24px; letter-spacing: -0.4px; }
.document-import-item-arrow { flex: none; margin-left: auto; font-size: 24px; width: 24px; height: 24px; color: var(--Text-Grey-800, #2E2E2E); }
/* 입력칸 — 2열 · 간격 16 · 제목(Medium 16 #111) ↔ 10 ↔ 공통 입력칸(.form-group-control) */
.document-import-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.document-import-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.document-import-field > label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px; }
/* 필수 표기 — mount 옵션 requiredMarks(상품 마스터): 공통 form-group-label.required 와 같은 ' *' */
.document-import-field > label.required::after { content: ' *'; color: var(--Text-Point, #E37739); }
.document-import-field.is-focused .form-group-control:not(.custom-select) { border-color: var(--Fill-Primary-Main, #1769E0); }
.document-import-control:focus { outline: none; border-color: var(--Fill-Grey-800, #2E2E2E); }
.document-import-control[aria-invalid="true"] { border-color: var(--Text-Error, #DC2626); }
/* 통화 = 공통 custom-select(.select-selected 가 테두리). 포커스된 필드·오류 상태를 텍스트 입력칸과 같은 색으로 */
.document-import-field.is-focused .form-group-control.custom-select.document-import-select .select-selected { border-color: var(--Fill-Primary-Main, #1769E0); }
.form-group-control.custom-select.document-import-select .select-selected[aria-invalid="true"] { border-color: var(--Text-Error, #DC2626); }
.document-import-select .select-items { z-index: 1500; }
.document-import-field-error { display: block; margin-top: -6px; color: var(--Text-Error, #DC2626); font-size: 12px; line-height: 20px; }
.document-import-field-error:empty { display: none; }
.document-import-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 16px; border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 10px; }
.document-import-empty p { margin: 0; color: var(--Text-Grey-Sub, #505050); }
/* 하단 — 취소 · 입력하기(120) 가운데 */
.document-import-dialog > .document-import-footer { justify-content: center; gap: 8px; }
.document-import-dialog:not(.is-upload) > .document-import-footer :is([data-di="cancel"], [data-di="apply"]) { width: 120px; }
/* 입력하기 잠금 안내 — 저장 안 된 상품이 있을 때 마우스를 올리면 버튼 위 말풍선(흰 바탕 · padding 24 · Medium 16 #111 · 아래 꼬리) */
.document-import-apply-wrap { position: relative; display: inline-flex; }
.document-import-apply-tip { display: none; position: absolute; bottom: calc(100% + 20px); left: 50%; z-index: 5; transform: translateX(-74px);
  width: max-content; max-width: min(360px, 80vw); padding: 24px; border-radius: 10px; background: var(--Fill-White, #FFF);
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.1)); white-space: pre-line; text-align: left; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px; pointer-events: none; }
.document-import-apply-tip::after { content: ""; position: absolute; top: 100%; left: 64px; border: 10px solid transparent; border-top-color: var(--Fill-White, #FFF); }
.document-import-apply-wrap.is-locked:hover .document-import-apply-tip { display: block; }
.document-import-result { color: #245dc0; margin: 12px 0; }
.document-import-value { box-shadow: inset 3px 0 #76a2df; }
@media (max-width: 900px) {
    .document-import-review { grid-template-columns: minmax(0, 1fr); grid-template-rows: 42vh minmax(0, 1fr); }
    .document-import-fields { grid-template-columns: minmax(0, 1fr); }
    .document-import-values-head { flex-wrap: wrap; }
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  font-family: var(--Font-Family, 'Noto Sans'), -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

dl, ol, ul {
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 14px;
  line-height: 1.6;
}

body {
  min-width: 1280px;                                        /* 사이드바 레이아웃 최소 너비 */
  background: var(--Background-BGCoolGrey, #F4F6FA);
  color: var(--Text-Grey-800, #2E2E2E);
}

@media (max-width: 768px) {
  body { min-width: unset; }
}

a {
  text-decoration: none;
  color: inherit;
}

/* Bootstrap reboot 의 a:hover(파란색 #0a58ca) 제거 — 링크는 hover 해도 색이 바뀌지 않는다.
   같은 명시도(0,1,1)라 나중에 로드되는 이 규칙이 이긴다. 클래스로 자기 색을 준 링크는
   '.클래스:hover' 에서도 같은 색을 지정해야 유지된다(예: .btn-main:hover, .modal-item:hover). */
a:hover {
  color: inherit;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  background: #eef0f7;
  padding: 2px 6px;
  border-radius: 4px;
  color: #3b5bdb;
}

/* ── Loading Overlay ──────────────────────────────────────── */

/* 전체 화면 오버레이 — 기본 숨김 */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  /* 기본 상태: 숨김 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* is-visible 클래스 추가 시 표시 */
#loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 스피너 컨테이너 */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 링 스피너 */
.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid #e0e4f4;
  border-top-color: #4c6ef5;
  border-radius: 50%;
  animation: loading-spin 0.75s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* 로딩 텍스트 */
.loading-text {
  font-size: 13px;
  color: #6b7280;
  letter-spacing: 0.3px;
}

/* ── Footer ───────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: #aaa;
  border-top: 1px solid #eef0f7;
  background: #fff;
}

/* ════════════════════════════════════════════════════════════
 * Design System — Typography
 * 피그마 토큰 기준, 모든 텍스트는 아래 클래스/변수만 사용
 * 자간 공식: font-size(px) × -0.025
 * ════════════════════════════════════════════════════════════ */

/* ── Typography CSS 변수 토큰 ─────────────────────────────── */
:root {
  /* 폰트 패밀리 */
  /* 라틴 = Noto Sans, 한글 = Noto Sans KR, 일본어(가나) = Noto Sans JP — 글자별로 앞에서부터 있는 폰트 사용 */
  --Font-Family: 'Noto Sans', 'Noto Sans KR', 'Noto Sans JP', sans-serif;

  /* 폰트 사이즈 */
  --Font-Size-12: 12px;
  --Font-Size-14: 14px;
  --Font-Size-16: 16px;
  --Font-Size-18: 18px;
  --Font-Size-20: 20px;

  /* 폰트 웨이트 */
  --Font-Weight-Regular: 400;
  --Font-Weight-Medium:  500;
  --Font-Weight-Bold:    700;

  /* 라인 높이 */
  --Line-Height-20: 20px;
  --Line-Height-22: 22px;
  --Line-Height-24: 24px;
  --Line-Height-30: 30px;

  /* 자간 (각 font-size × -2.5%) */
  --Letter-Spacing-12: -0.3px;   /* 12px × -0.025 */
  --Letter-Spacing-14: -0.35px;  /* 14px × -0.025 */
  --Letter-Spacing-16: -0.4px;   /* 16px × -0.025 */
  --Letter-Spacing-18: -0.45px;  /* 18px × -0.025 */
  --Letter-Spacing-20: -0.5px;   /* 20px × -0.025 */
}

/* 일본어 화면 — 한자를 일본어 자형(Noto Sans JP)으로 표시 */
html[lang="jp"] {
  --Font-Family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
}

/* ── Headline — Bold / 20px / 30px ────────────────────────── */
.typo-headline {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-20, 20px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-30, 30px);
  letter-spacing: var(--Letter-Spacing-20, -0.5px);
}

/* ── Sub Title — Bold / 18px / 24px ───────────────────────── */
.typo-subtitle {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-18, 18px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-18, -0.45px);
}

/* ── Body 1 — Medium / 16px / 24px ────────────────────────── */
.typo-body-1 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* ── Body 2 — Medium / 14px / 22px ────────────────────────── */
.typo-body-2 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* ── Body 3 — Medium / 12px / 20px ────────────────────────── */
.typo-body-3 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-12, 12px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-20, 20px);
  letter-spacing: var(--Letter-Spacing-12, -0.3px);
}

/* ── Subbody 1 — Regular / 16px / 24px ────────────────────── */
.typo-subbody-1 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* ── Subbody 2 — Regular / 14px / 22px ────────────────────── */
.typo-subbody-2 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--Line-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* ── Subbody 3 — Regular / 12px / 20px ────────────────────── */
.typo-subbody-3 {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-12, 12px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--Line-Height-20, 20px);
  letter-spacing: var(--Letter-Spacing-12, -0.3px);
}

/* ── Button Large — Bold / 16px / 24px ────────────────────── */
.typo-btn-lg {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* ── Button Medium — Bold / 14px / 22px ───────────────────── */
.typo-btn-md {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* ── Button Small — Bold / 12px / 20px ────────────────────── */
.typo-btn-sm {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-12, 12px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-20, 20px);
  letter-spacing: var(--Letter-Spacing-12, -0.3px);
}

/* ════════════════════════════════════════════════════════════
 * Design System — Material Icons
 * 기본 변형: Outlined (.icon)
 * 변형 클래스: .icon-filled / .icon-round / .icon-sharp
 * 크기 클래스: .icon-sm(16) / 기본(20) / .icon-md(24) / .icon-lg(32) / .icon-xl(40)
 * ════════════════════════════════════════════════════════════ */

/* ── 기본 세팅 (Outlined — 프로젝트 기본 변형) ─────────────── */
.icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;          /* 기본 크기 */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  /* 폰트 로드 전 리거처 원문("dashboard" 등)이 fallback 폰트로 넓게 렌더돼 레이아웃이
     밀리는(FOUC) 현상 방지 — 1em 정사각 박스로 고정하고 넘치는 텍스트는 잘라낸다. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  vertical-align: middle;   /* 텍스트와 수직 정렬 */
  user-select: none;        /* 텍스트 드래그 방지 */
}

/* ── 변형 ──────────────────────────────────────────────────── */
.icon-filled  { font-family: 'Material Icons', sans-serif; }
.icon-round   { font-family: 'Material Icons Round', sans-serif; }
.icon-sharp   { font-family: 'Material Icons Sharp', sans-serif; }

/* ── 크기 ──────────────────────────────────────────────────── */
.icon-sm  { font-size: 16px; }   /* 보조 텍스트 옆 아이콘 */
/* (기본)  { font-size: 20px; }     body 텍스트 옆 아이콘 */
.icon-md  { font-size: 24px; }   /* 버튼, 네비게이션 아이콘 */
.icon-lg  { font-size: 32px; }   /* 카드 헤더, 섹션 아이콘 */
.icon-xl  { font-size: 48px; }   /* 빈 상태(empty state) 아이콘 */

/* ── 컬러 유틸리티 ─────────────────────────────────────────── */
/* 시맨틱 컬러 */
.icon-primary  { color: var(--Fill-Primary-Main, #0097D5); }
.icon-muted    { color: var(--Text-Grey-400, #8B8B8B); }
.icon-error    { color: var(--Text-Error, #E33939); }
.icon-success  { color: var(--Business-Green, #48964B); }
.icon-warning  { color: var(--Text-Orange-500, #E37739); }
.icon-white    { color: var(--Text-White, #FFFFFF); }
.icon-navy     { color: var(--Fill-Navy-Navy, #002D58); }

/* 그레이 스케일 (base.css에서 이동) */
.icon-grey-50  { color: var(--Text-Grey-50,  #F0F0F0); }
.icon-grey-100 { color: var(--Text-Grey-100, #E2E2E2); }
.icon-grey-200 { color: var(--Text-Grey-200, #C5C5C5); }
.icon-grey-300 { color: var(--Text-Grey-300, #A8A8A8); }
.icon-grey-400 { color: var(--Text-Grey-400, #8B8B8B); }
.icon-grey-500 { color: var(--Text-Grey-500, #6E6E6E); }
.icon-grey-500 { color: var(--Text-Grey-600, #585858); }
.icon-grey-800 { color: var(--Text-Grey-800, #111); }
.icon-grey-900 { color: var(--Text-Grey-900, #1A1A1A); }

/* ── 크기 별칭 (base.css .icon-s/m/l 호환) ─────────────────── */
/* 기존: .icon-sm(16) / .icon-md(24) / .icon-lg(32) / .icon-xl(40) */
.icon-s { font-size: 16px; }   /* = icon-sm */
.icon-m { font-size: 20px; }   /* 사이드바 기본 크기 */
.icon-l { font-size: 24px; }   /* = icon-md */

/* ── 버튼 내부 아이콘 간격 ─────────────────────────────────── */
/* 아이콘이 텍스트 앞에 올 때: <span class="icon icon-md icon-leading">add</span> 저장 */
/* .icon-leading { margin-right: 6px; } */
/* 아이콘이 텍스트 뒤에 올 때: 저장 <span class="icon icon-md icon-trailing">chevron_right</span> */
/* .icon-trailing { margin-left: 6px; } */

/* ════════════════════════════════════════════════════════════

 * Design System — Button
 * 구조: .btn-common(베이스) + .btn-{variant}(색상) + .btn-{size}(크기)
 * 텍스트: 버튼 요소 자체에 타이포 적용 → span 중복 선언 제거
 * 아이콘 병용: <span class="icon icon-leading">add</span> 텍스트
 * ════════════════════════════════════════════════════════════ */

/* ── 베이스 ────────────────────────────────────────────────── */
/* Figma Buttons(Component System 6143:12681, 2026-10-20) — 모든 버튼 radius 10 · Bold.
   크기 3종: Medium 48(padding 12/16 · 16/24 · 최소 70) / Small 42(padding 10/14 · 14/22 · 최소 70) / XSmall 36(padding 8/10 · 12/20 · 최소 60)
   클래스: 기본(.btn-common) = Medium · .btn-md = Small · .btn-sm / .btn-xs = XSmall
   아이콘: Medium 24 · Small·XSmall 16, 글자와 간격 4 */
.btn-common {
  cursor: pointer;
  display: inline-flex;         /* align-self:stretch는 부모 컨텍스트에 위임 */
  height: 48px;                 /* 기본 크기 — Medium */
  min-width: 70px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  border: none;

  /* 타이포 — Button/1 (Bold 16/24) */
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
  text-align: center;

  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-common .icon { font-size: 24px; }

/* span은 아이콘+텍스트 혼용 레이아웃용으로만 유지, 타이포 선언 제거 */
.btn-common span.btn-label {
  flex: 1 0 0;
}

/* ── 크기 변형 ──────────────────────────────────────────────── */
/* Medium: 기본값 (48px / 16px) — .btn-common 자체 */
.btn-100 {
  width: 100%;
}

.btn-md {                       /* Small: 42px / 14px (Button/2) */
  height: 42px;
  padding: 10px 14px;
  font-size: var(--Font-Size-14, 14px);
  line-height: var(--Line-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

.btn-sm,                        /* XSmall: 36px / 12px (Button/3) */
.btn-xs {
  height: 36px;
  min-width: 60px;
  padding: 8px 10px;
  font-size: var(--Font-Size-12, 12px);
  line-height: var(--Line-Height-20, 20px);
  letter-spacing: var(--Letter-Spacing-12, -0.3px);
}
.btn-md .icon,
.btn-sm .icon,
.btn-xs .icon { font-size: 16px; }

/* ── Primary (메인 파란색) ─────────────────────────────────── */
.btn-main {
  background: var(--Fill-Primary-Main, #1769E0);
  color: var(--Text-White, #FFF);
}
.btn-main:hover  { background: var(--Fill-Primary-400, #60A5FA); color: var(--Text-White, #FFF);}
.btn-main:active { background: var(--Fill-Primary-600, #155CC8); color: var(--Text-White, #FFF);}

/* ── White (외곽선 흰색) — Figma: 테두리 Cool Grey 200 · 글자 #111 ── */
.btn-white {
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  background: var(--Fill-White, #FFF);
  color: var(--Text-Grey-Main, #111);
}
.btn-white:hover  { background: var(--Fill-CoolGrey-50, #F8FAFC); color: var(--Text-Grey-Main, #111); }
.btn-white:active { background: var(--Fill-CoolGrey-100, #F1F5F9);color: var(--Text-Grey-Main, #111); }

/* ── Grey (회색) ─────────────────────────────────── */
.btn-grey {
  background: var(--Fill-CoolGrey-100, #F1F5F9);
  color: var(--Text-Grey-Main, #111);
}
.btn-grey:hover  { background: var(--Fill-CoolGrey-200, #E5E7EB); color: var(--Text-Grey-Main, #111);}
.btn-grey:active { background: var(--Fill-CoolGrey-300, #D1D5DB); color: var(--Text-Grey-Main, #111);}

/* ── red (빨간색) ─────────────────────────────────── */
.btn-red {
  background: var(--Fill-Error, #DC2626);
  color: var(--Text-White, #FFF);
}
.btn-red:hover  { background: var(--Fill-Red-400, #F87171); color: var(--Text-White, #FFF);}

/* ── red line (빨간 외곽선 — 취소 계열) ──────────────────── */
.btn-red-line {
  border: 1px solid var(--Fill-Error, #DC2626);
  background: var(--Fill-White, #FFF);
  color: var(--Text-Error, #DC2626);
}
.btn-red-line:hover  { background: var(--Fill-Red-50, #FEF2F2); color: var(--Text-Error, #DC2626); }
.btn-red-line:active { background: var(--Fill-Red-100, #FEE2E2); color: var(--Text-Error, #DC2626); }

/* ── Disabled (모든 variant 공통) ─────────────────────────── */
.btn-common:disabled,
.btn-common.disabled {
  background: var(--Fill-Grey-50, #F0F0F0);
  border-color: transparent;
  color: var(--Text-Grey-Disabled, #999);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-arrow {
  display: flex;
  width: 38px;
  height: 38px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--Fill-CoolGrey-100, #F4F6FA);
  min-width: unset;
}

/* ── 에러 메시지 (버튼 하단 인라인 오류) ──────────────────── */
/* 타이포: typo-subbody-2 동일 (SubBody/2) */
.error-message {
  display: block;
  color: var(--Text-Error, #E33939);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--Line-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* ════════════════════════════════════════════════════════════
 * Design System — Form
 *
 * 레이아웃 구조
 * ┌─ 세로형 (기본) ──────────────────────────────────────────┐
 * │  .form-section                                           │
 * │    └ .form-group           ← 라벨 위 / 컨트롤 아래      │
 * │        ├ .form-group-label                               │
 * │        ├ .form-group-sub-text  (선택)                    │
 * │        └ .form-group-control / .input-wrapper            │
 * └──────────────────────────────────────────────────────────┘
 * ┌─ 가로형 ─────────────────────────────────────────────────┐
 * │  .form-section                                           │
 * │    └ .form-row             ← 여러 form-group 나란히      │
 * │        └ .form-group                                     │
 * └──────────────────────────────────────────────────────────┘
 * ┌─ 인라인형 ───────────────────────────────────────────────┐
 * │  .form-group.form-group--inline ← 라벨 좌 / 컨트롤 우   │
 * └──────────────────────────────────────────────────────────┘
 * ════════════════════════════════════════════════════════════ */

/* ── 폼 섹션 래퍼 ──────────────────────────────────────────── */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* form-group 간 수직 간격 */
  align-self: stretch;
}

/* ── form-group (세로형 기본) ──────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

/* ── form-group (인라인형 — 라벨 좌, 컨트롤 우) ───────────── */
.form-group--inline {
  flex-direction: row;
  align-items: center;
}

.form-group--inline .form-group-label {
  flex-shrink: 0;
  width: 120px;                /* 라벨 고정 너비 — 필요 시 페이지 css에서 override */
  margin-bottom: 0;
}

.form-group--inline .form-group-control,
.form-group--inline .input-wrapper {
  flex: 1;
}

/* ── 가로 나열 (여러 form-group 한 줄) ─────────────────────── */
.form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.form-row .form-group {
  flex: 1 0 0;
}

/* flex 너비 고정이 필요한 form-group */
.form-group.form-flex-unset { flex: unset; }

/* ── 라벨 ──────────────────────────────────────────────────── */
.form-group-label {
  width: 160px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);  
  line-height: var(--LIne-Height-24, 24px); /* 150% */
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* 필수 항목 표시 */
.form-group-label.required::after {
  content: ' *';
  color: var(--Text-Point, #E37739);
}

.cell-required::after {
  content: ' *';
  color: var(--Text-Point, #E37739);
}

/* ── 보조 텍스트 ────────────────────────────────────────────── */
.form-group-sub-text {
  color: var(--Text-Grey-500, #6E6E6E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;                           /* 피그마 원본값 유지 (18.9px) */
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* ── 읽기 전용 텍스트 표시 ─────────────────────────────────── */
.form-group-control-text {
  width: 100%;
  display: flex;
  height: 40px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: transparent;
  color: var(--Text-Grey-Sub2, #767676);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* ── 입력 컨트롤 (input, select, textarea 공통) ────────────── */
.form-group-control {
  width: 100%;
  display: flex;
  height: 40px;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 10px;          /* Figma InputField — 공통 선택칸(custom-select)과 동일 */
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  background: var(--Fill-White, #FFF);
  transition: border-color 0.2s;

color: var(--Text-Grey-Main, #111);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

.form-group-control::placeholder {
  color: var(--Text-Grey-Sub2, #767676);
  font-weight: var(--Font-Weight-Regular, 400);
}

.form-group-control:hover        { border-color: var(--Fill-Grey-500, #6E6E6E); }
.form-group-control:focus        { border-color: var(--Fill-Grey-800, #2E2E2E); outline: none; }
.form-group-control.has-error    { border-color: var(--Fill-Error, #E33939); }

/* textarea — description 및 자동 높이 확장 */
.form-group-control[name="description"],
.form-group-control.is-textarea {
  height: auto;
  min-height: 66px;
  resize: none;
  overflow: hidden;
  align-items: flex-start;     /* 텍스트 상단 정렬 */
  padding-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 라디오 그룹 (폼 인라인 선택 — 공통 컴포넌트) ───────────── */
/* 사용: .radio-group > label.radio-label(> input[type=radio] + span). partners 거래처유형 등 */
/* form-table td 는 padding:0 이므로 cell-ctrl(padding:8px)과 좌측 정렬을 맞춘다. */
.radio-group {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 38px;
  padding: 8px;
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--Font-Size-14, 14px);
  font-weight: var(--Font-Weight-Medium, 500);
  color: var(--Text-Grey-800, #2E2E2E);
}
.radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--Fill-Primary-Main, #0097D5);
  cursor: pointer;
  margin: 0;
}

/* ── 입력 래퍼 (clear 버튼 포함) ───────────────────────────── */
.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper .form-group-control { padding-right: 44px; }
.input-wrapper .search-input       { width: 100%; padding-right: 36px; }

/* 검색 입력(type=search)의 브라우저 기본 X 숨김 — 공통 clear 버튼과 겹치지 않게 */
.input-wrapper input[type="search"]::-webkit-search-cancel-button,
.input-wrapper input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* X 버튼 */
.input-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.search-input-clear { right: 4px; }

/* textarea 안의 clear 버튼은 세로 중앙(기본)이 아니라 우측 상단에 고정 */
.input-wrapper.textarea-wrapper .input-clear-btn {
  top: 12px;
  transform: none;
}

/* ── 커스텀 셀렉트 ─────────────────────────────────────────── */
.form-group-control.custom-select {
  border: 1px solid var(--Fill-Grey-300, #A8A8A8);
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  height: auto;                /* 드롭다운 위치 계산을 위해 auto */
}

/* ── Custom Select — select-text 상태별 스타일 ─────────────── */

/* 기본 선택된 상태 */
.form-group-control.custom-select .select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--Font-Size-16, 16px);
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    color: var(--Text-Grey-Main, #111);
}

/* Placeholder 상태 — 값 미선택 (Figma SelectBox Default: Regular 16 #767676) */
.form-group-control.custom-select .select-text.is-placeholder {
    color: var(--Text-Grey-Sub2, #767676);
    font-weight: var(--Font-Weight-Regular, 400);
}

/* form-table 셀 안 custom-select — 14px */
.data-table.form-table .form-group-control.custom-select .select-text {
    font-size: var(--Font-Size-14, 14px);
    line-height: var(--LIne-Height-22, 22px);
    letter-spacing: -0.35px;
}

.navbar-container .nav-right .form-group-control.custom-select .select-text {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-18, 18px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.45px;
}

/* 선택된 값 표시 영역 */
.form-group-control.custom-select .select-selected {
  width: 100%;
  display: flex;
  height: 40px;
  padding: 8px 12px;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  background: var(--Fill-White, #FFF);
  transition: border-color 0.2s;
  cursor: pointer;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: 135%;
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

.form-group-control.custom-select .select-selected:hover { border-color: var(--Fill-Grey-800, #111); }
/* Focused = 목록이 열려 있을 때 + 키보드(Tab) 포커스일 때만 #111. 마우스로 닫은 뒤 남는 포커스에는 적용하지 않는다. */
.form-group-control.custom-select .select-selected:focus { outline: none; }
.form-group-control.custom-select .select-selected:focus-visible,
.form-group-control.custom-select .select-selected.select-arrow-active { border-color: var(--Fill-Grey-800, #111); outline: none; }

/* 화살표 아이콘 */
.form-group-control.custom-select .select-arrow {
  width: 24px;
  height: 24px;
  font-size: 24px;             /* Figma SelectBox 화살표 24px (마크업의 icon-sm 16px 보다 우선) */
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.form-group-control.custom-select .select-selected.select-arrow-active .select-arrow {
  transform: rotate(180deg);
}

/* 드롭다운 목록 */
.form-group-control.custom-select .select-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 10px;
  border: 1px solid var(--Fill-Grey-800, #2E2E2E);
  background: var(--Fill-White, #FFF);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
  overflow-y: auto;
  max-height: 350px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

.form-group-control.custom-select .select-hide { display: none; }

/* 드롭다운 개별 항목 */
.form-group-control.custom-select .select-items div {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--Fill-Grey-100, #E2E2E2);
  background: var(--Fill-White, #FFF);
}

.form-group-control.custom-select .select-items div:last-child       { border-bottom: none; }
.form-group-control.custom-select .select-items div:hover            { background: var(--Fill-Grey-50, #F0F0F0); }
.form-group-control.custom-select .select-items div.same-as-selected {
  background: var(--Fill-Grey-50, #F0F0F0);
  font-weight: var(--Font-Weight-Medium, 500);
}
/* .form-group-control.custom-select .select-items div.same-as-selected:hover { background: #F9F9F9; } */

/* Disabled — 래퍼(.form-group-control.custom-select)에 .is-disabled. 회색 배경·테두리 없음·#999, 열기 불가 */
.form-group-control.custom-select.is-disabled .select-selected {
  border-color: transparent;
  background: var(--Fill-Grey-50, #F0F0F0);
  cursor: not-allowed;
  pointer-events: none;
}
.form-group-control.custom-select.is-disabled .select-text,
.form-group-control.custom-select.is-disabled .select-text.is-placeholder {
  color: var(--Text-Grey-Disabled, #999);
  font-weight: var(--Font-Weight-Regular, 400);
}
.form-group-control.custom-select.is-disabled .select-arrow { color: var(--Fill-Grey-200, #999); }
.form-group-control.custom-select.is-disabled .select-items { display: none; }

/* 방향키 하이라이트(키보드 이동) — custom-select / country-select 공통. hover 보다 진하게 구분 */
.custom-select .select-items div.kbd-active,
.country-select .select-items [data-value].kbd-active {
  background: var(--Fill-CoolGrey-100, #F4F6FA);
  box-shadow: inset 2px 0 0 var(--Fill-Primary-Main, #0097D5);
}

/* ════════════════════════════════════════════════════════════
 * Design System — File Upload
 * 구조:
 * .new-form-body-file              ← 업로드 그리드 래퍼
 *   └ .form-group-file             ← 업로드 단위 (라벨 + 영역)
 *       ├ .form-group-file-title   ← 라벨 행 (텍스트 + 우측 액션)
 *       └ .upload-area             ← 드래그&드롭 / 클릭 업로드 영역
 *           ├ .upload-icon
 *           └ .upload-text
 * .stamp-preview-info              ← 업로드 완료 후 파일 미리보기
 * ════════════════════════════════════════════════════════════ */

/* ── 업로드 그리드 래퍼 ────────────────────────────────────── */
.new-form-body-file {
  display: inline-grid;
  row-gap: 16px;
  column-gap: 16px;
  align-self: stretch;
}

/* 3열 고정 그리드 레이아웃 */
.new-form-body-file.grid {
  grid-template-rows: 201px fit-content(100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── 업로드 단위 ────────────────────────────────────────────── */
.form-group-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  height: 201px;
}

/* 라벨 행 — 좌: 제목 / 우: 액션(삭제 등) */
.form-group-file-title {
  display: flex;
  height: 24px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

/* ── 드래그&드롭 업로드 영역 ───────────────────────────────── */
/* 그리드(.form-group-file, 201px) 안에서는 height:100% 로 채우고, 모달/폼 등
   독립 배치(.form-group 직속)에서도 최소 높이를 확보해 재사용 가능하게 한다. */
.upload-area {
  width: 100%;
  height: 100%;
  min-height: 120px;
  box-sizing: border-box;
  display: flex;
  padding: 24px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px dashed var(--Fill-Grey-300, #A8A8A8);
  background: var(--Fill-White, #FFF);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.upload-area:hover    { border-color: var(--Fill-Grey-500, #6E6E6E); }
.upload-area.dragover {
  border: 1px solid var(--Fill-Primary-300, #66C1E6);
  background: var(--Fill-Primary-50, #E5F5FB);
}

/* 업로드 아이콘 */
.upload-icon {
  width: 48px;
  height: 48px;
}

/* 업로드 안내 텍스트 묶음 */
.upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

/* 안내 텍스트 1줄 — SubBody/2 */
.upload-text div:first-child {
  color: var(--Text-Grey-500, #6E6E6E);
  text-align: center;
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;                           /* 피그마 원본값 유지 */
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

/* 안내 텍스트 2줄 (확장자·용량 제한) — SubBody/3 */
.upload-text div:nth-child(2) {
  color: var(--Text-Grey-300, #A8A8A8);
  text-align: center;
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-12, 12px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;                           /* 피그마 원본값 유지 */
  letter-spacing: var(--Letter-Spacing-12, -0.3px);
}

/* 실제 file input — 숨김 처리 */
.file-input { display: none; }

/* 업로드 결과 영역 — JS로 display 제어 */
#uploadResult {
  width: 100%;
  margin-top: 20px;
  display: none;
}

/* ── 파일 미리보기 카드 ────────────────────────────────────── */
.stamp-preview-info {
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--Fill-Grey-300, #A8A8A8);
  background: var(--Fill-White, #FFF);
}

/* 파일명 행 — 아이콘 + 텍스트 + 우측 버튼 */
.stamp-preview-info-container {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  justify-content: space-between;
  min-width: 0;
}

/* 파일명 + 아이콘 묶음 */
.stamp-preview-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.stamp-preview-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* 파일명 텍스트 — SubBody/2, 말줄임 */
.stamp-preview-text {
  max-height: 19px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;                           /* 피그마 원본값 유지 */
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 우측 버튼 묶음 (미리보기, 삭제 등) */
.stamp-preview-button {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stamp-preview-icon-remove { cursor: pointer; }

/* 파일 용량 텍스트 — SubBody/2, 회색 */
.file-size {
  margin-left: 3px;
  max-height: 19px;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--Text-Grey-400, #8B8B8B);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: 135%;                           /* 피그마 원본값 유지 */
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

 
/* ── Alert Dialog ─────────────────────────────────────────── */
.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1150;
  display: none;
  align-items: center;
  justify-content: center;
}
.alert-overlay.is-open {
  display: flex;
}
/* 알림·확인창(TaolAlert) — Figma Alert(11828:269528 · 12191:140939 · 12170:139527), 공통 Figma 모달과 같은 틀.
   폭 400(긴 문구는 최대 480) · radius 20 · padding 40/24/20 · 최소 높이 200 · 문구 Medium 16 #111 가운데 ↔ 40 ↔ 버튼.
   버튼은 공통 버튼(.btn-common.btn-md = Small 42 · radius 10 · Bold 14 + .btn-white / .btn-main / .btn-red, alert.js) · 최소 100 · 간격 8. */
.alert-dialog {
  background: var(--Fill-White, #FFF);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  /* 폭 자동 — 짧은 문구는 400, 조금 긴 문구는 줄이 넘어가지 않을 만큼만 넓어짐(최대 480, 작은 화면 92vw) */
  width: auto;
  min-width: min(400px, 92vw);
  max-width: min(480px, 92vw);
  min-height: 200px;
  padding: 40px 24px 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
  animation: modal-in 0.18s ease;
}
.alert-title {
  color: var(--Text-Grey-Main, #111);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: 20px;
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-30, 30px); /* 150% */
  letter-spacing: -0.5px;
}
.alert-message {
  color: var(--Text-Grey-Main, #111);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.4px;
  white-space: pre-line;
  text-align: center;            /* 기본 가운데 정렬 — 목록형 문구는 .is-left(alert.js 자동 판별) */
  word-break: keep-all;          /* 한글도 띄어쓰기 단위로만 줄바꿈(“다.” 한 글자만 떨어지는 현상 방지) */
  overflow-wrap: anywhere;       /* 띄어쓰기 없는 긴 이메일·파일명 등은 칸 안에서 줄바꿈 */
  text-wrap: balance;            /* 여러 줄로 넘어갈 때 줄 길이를 고르게(미지원 브라우저는 무시) */
  width: 100%;
  max-width: 100%;
  max-height: 60vh;              /* 아주 긴 메시지는 본문 안에서 스크롤 */
  overflow-y: auto;
}
/* 본문 정렬 — TaolAlert 옵션 align: 'center' | 'left' (미지정 시 목록형 문구만 자동 왼쪽) */
.alert-message.is-center { text-align: center; }
.alert-message.is-left   { text-align: left; text-wrap: wrap; }
/* 경고 다이얼로그 내 강조 수치(적재율/초과율 등) — 빨강 볼드 */
.alert-num-warn { color: var(--Text-Error, #DC2626); font-weight: 700; }
.alert-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
}
/* 알림 버튼 — 크기·색은 공통 버튼(.btn-common.btn-md + 색 클래스), 여기선 최소 폭만(Figma 100) */
.alert-footer .btn-common { min-width: 100px; }

/* ════════════════════════════════════════════════════════════
 * Layout — Page Wrapper
 * 구조: .page-wrapper > .page-header + .page-body
 * ════════════════════════════════════════════════════════════ */

/* 페이지 전체 래퍼 — 컬럼 방향 flex */
.page-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 페이지 상단 타이틀 — 헤더 카드(.header-bar) 안, 로고·언어 영역 오른쪽.
   로고·언어 영역(사이드바+간격 폭) 바로 뒤에서 시작해 제목이 본문 왼쪽 선과 맞는다. */
.page-header-inner {
  flex: 1;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  /* 타이틀 + 우측 확장(page_header_extra 아이콘/툴팁 등)을 한 줄에 정렬 */
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 경로 — 상위 메뉴(Body/1 Medium 16 · Text/Sub #505050, 클릭 시 이동) › 현재 페이지.
   Figma Header(node 11661:113547) — 상위 메뉴 · chevron 24 · 제목 간격 8 */
.page-header-parent {
  color: var(--Text-Grey-Sub, #505050);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
  white-space: nowrap;
  text-decoration: none;
}
.page-header-parent:hover {
  color: var(--Text-Grey-Sub, #505050);
}
.page-header-sep {
  color: #2E2E2E;   /* Figma chevron_forward 아이콘 색 */
  flex-shrink: 0;
}
/* 제목 옆 도움말 아이콘 — Figma Icon/16 Grey 300(#767676) */
.page-header-inner .help-tooltip .icon {
  font-size: 16px;
  color: var(--Text-Grey-Sub2, #767676);
}

/* 페이지 타이틀 텍스트 — Sub Title/1 (Bold 18 / 24) */
.page-header-title {
  font-size: var(--Font-Size-18, 18px);
  font-weight: var(--Font-Weight-Bold, 700);
  color: #232222;
  letter-spacing: var(--Letter-Spacing-18, -0.45px);
  line-height: var(--Line-Height-24, 24px);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   공통 툴팁 — page-header-title 우측 도움말 아이콘 등에 재사용.
   사용법: <span class="help-tooltip" data-tooltip="설명" tabindex="0"><span class="icon ...">help</span></span>
   hover/focus 시 우측에 말풍선(최대 320px, 초과 시 줄바꿈) 표시.
══════════════════════════════════════════════════════════════ */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: help;
}
.help-tooltip[data-tooltip]:hover::after,
.help-tooltip[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  width: max-content;
  max-width: 320px;
  white-space: normal;
  background: var(--Text-Grey-800, #2E2E2E);
  color: var(--Fill-White, #FFF);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.help-tooltip[data-tooltip]:hover::before,
.help-tooltip[data-tooltip]:focus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--Text-Grey-800, #2E2E2E);
  z-index: 30;
  pointer-events: none;
}

/* 말줄임 셀 툴팁 — js/shared/overflow_tooltip.js 가 body 에 1개 생성해 위치를 잡는다.
   사용: 잘릴 수 있는 셀에 data-overflow-tip 속성(실제로 잘렸을 때만 hover 시 전체 내용 표시). */
.overflow-tip {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 360px;
  width: max-content;
  white-space: normal;
  word-break: break-all;
  background: var(--Text-Grey-800, #2E2E2E);
  color: var(--Fill-White, #FFF);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 3000;
  pointer-events: none;
  visibility: hidden;
}
.overflow-tip.is-visible { visibility: visible; }

/* 변형: 아래로 펼치고 아이콘 오른쪽 끝에 맞춰 왼쪽으로 확장(우측 정렬 영역에서 화면 밖 잘림 방지).
   사용: <span class="help-tooltip help-tooltip--below" ...> */
.help-tooltip--below[data-tooltip]:hover::after,
.help-tooltip--below[data-tooltip]:focus::after {
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  transform: none;
}
.help-tooltip--below[data-tooltip]:hover::before,
.help-tooltip--below[data-tooltip]:focus::before {
  top: calc(100% + 2px);
  left: auto;
  right: 6px;
  transform: none;
  border: 6px solid transparent;
  border-bottom-color: var(--Text-Grey-800, #2E2E2E);
}

/* 변형: 아이콘 왼쪽으로 펼침(우측 끝 영역에서 화면 밖 잘림 방지). 세로 중앙 정렬은 기본값 상속.
   사용: <span class="help-tooltip help-tooltip--left" ...> */
.help-tooltip--left[data-tooltip]:hover::after,
.help-tooltip--left[data-tooltip]:focus::after {
  left: auto;
  right: calc(100% + 10px);
}
.help-tooltip--left[data-tooltip]:hover::before,
.help-tooltip--left[data-tooltip]:focus::before {
  left: auto;
  right: calc(100% + 4px);
  border: 6px solid transparent;
  border-left-color: var(--Text-Grey-800, #2E2E2E);
}

/* 변형: 아래로 펼치고 아이콘 왼쪽에 맞춰 오른쪽으로 확장 — 좌측(제목 옆) 아이콘의 긴 문구가
   고정 헤더 상단/좌측에서 잘리는 것을 방지. 사용: <span class="help-tooltip help-tooltip--below-left" ...> */
.help-tooltip--below-left[data-tooltip]:hover::after,
.help-tooltip--below-left[data-tooltip]:focus::after {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  transform: none;
  max-width: 420px;
}
.help-tooltip--below-left[data-tooltip]:hover::before,
.help-tooltip--below-left[data-tooltip]:focus::before {
  top: calc(100% + 2px);
  left: 6px;
  right: auto;
  transform: none;
  border: 6px solid transparent;
  border-bottom-color: var(--Text-Grey-800, #2E2E2E);
}

/* 변형: Figma Tooltips(12761:114001) — 위로 펼치는 흰 말풍선(padding 24 · radius 10 · Medium 16 #111 · 그림자 4/4/10 10%)
   + 아래 꼬리(아이콘을 가리킴). 말풍선은 꼬리 기준 왼쪽 72 에서 시작해 오른쪽으로 확장(최대 320 → 본문 272 에서 줄바꿈).
   사용: <span class="help-tooltip help-tooltip--bubble" ...> */
.help-tooltip--bubble[data-tooltip]:hover::after,
.help-tooltip--bubble[data-tooltip]:focus::after {
  top: auto;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-72px);
  max-width: 320px;
  padding: 24px;
  border-radius: 16px;
  background: var(--Fill-White, #FFF);
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: 24px;
  letter-spacing: -0.4px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.help-tooltip--bubble[data-tooltip]:hover::before,
.help-tooltip--bubble[data-tooltip]:focus::before {
  top: auto;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--Fill-White, #FFF);
  z-index: 31;
}

/* 페이지 본문 — 섹션 카드들의 컨테이너 */
.page-body {
  display: flex;
  flex-direction: column;
  gap: 0px;
  /* 고정 .page-header(60px, main-content padding-top) 바로 아래 16px 여백.
     목록 페이지는 이 여백이 헤더-본문 간격이 되고,
     back 바(sticky topbar)가 있는 페이지는 topbar 의 margin-top:-16px 로 상쇄된다. */
  padding: 16px 0 0;
  flex: 1;
}

/* ════════════════════════════════════════════════════════════
 * 상단 back 바 — '목록으로'(뒤로) 영역을 고정 .page-header 바로 아래에 sticky 고정.
 * 전자계약서·상품·담당자·협력사·프로젝트 계열 상세/생성/수정/결제 페이지 공통.
 * ⚠️ 신규 페이지도 아래 topbar 클래스 중 하나를 사용하면 자동으로 고정된다(앞으로 만들 페이지 정합).
 * 배경은 페이지 배경(#F4F6FA)과 동일 → 정지 시 무색, 스크롤 시 본문이 바 뒤로 가려진다.
 * ════════════════════════════════════════════════════════════ */
.trader-topbar {
  position: sticky;
  top: var(--header-bottom, 98px);   /* 고정 .page-header(바깥 여백 + 헤더 카드) 바로 아래 */
  z-index: 800;              /* .page-header(z 1050) 아래 · 본문 위 */
  background: var(--Background-BGCoolGrey, #F4F6FA);
  padding-block: 16px;        /* 스크롤 시 상/하단 여백까지 배경으로 덮어 본문 비침 방지 */
  /* back 바는 page-body 의 첫 자식 → page-body padding-top:16px 를 상쇄해
     헤더 바로 아래(60px)에 붙고, 스크롤 시 위치·크기 불변(padding 이 간격 담당). */
  margin-top: -16px;
}


/* ════════════════════════════════════════════════════════════
 * Content Card
 * 섹션 단위 흰색 카드 컨테이너
 * ════════════════════════════════════════════════════════════ */
.content-card {
  display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	border-radius: 20px;
	background: #FFF;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}

.section-gap-1 {
  margin: 16px 0 0 0;
  height: 0px !important;
}

.section-gap-2 {
  margin: 16px 0 0 0;
  height: 0px !important;
}


/* ════════════════════════════════════════════════════════════
 * Search Bar
 * 카드 상단 검색 영역: 라벨 + input + 버튼 인라인 배치
 * ════════════════════════════════════════════════════════════ */
/* 검색 바 흰색 카드 컨테이너 */
 .search-bar-card {
  display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	border-radius: 8px;
	background: #FFF;
}

/* 검색 바 컨테이너 */
.search-bar {
  width: 100%;
  display: flex;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.modal-body .search-bar {
  border-bottom: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────
   검색 모달 공통 UI — 검색 영역 + 결과 테이블 헤더/본문 + 하단 액션.
   공급업체 검색 등 "검색바 + 결과 테이블 + 선택" 모달에서 공통 재사용.
   사용: .modal-search-bar > .modal-search-label + input, .modal-search-actions,
        .modal-list-title, .modal-table-wrap(data-table 감싸기), .modal-footer-center
───────────────────────────────────────────────────────────── */
.modal-search-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.modal-search-label {
  width: 120px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-weight: 500;
  white-space: nowrap;
}

.modal-search-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}

.modal-list-title {
  color: var(--Text-Grey-Title, #232222);
  margin-bottom: 8px;
}

.modal-table-wrap {
  overflow: auto;
}

.modal-footer-center {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* ─────────────────────────────────────────────────────────────
   엑셀 업로드 모달 (드롭 존 + 하단 액션) — project_create.css 승격
   사용: _excel_upload_modal.html — .pt-excel-upload-area(드롭 존) + .file-upload-hint + .file-upload-row(선택한 파일) + .file-upload-error
───────────────────────────────────────────────────────────── */
/* 드롭 영역(Figma FileInput Box 2131:1025) — 기본: 흰 바탕 · 점선 CoolGrey200 · radius 4 · padding 24/12 · 간격 8
   hover = 점선 CoolGrey500 / dragover = Primary50 바탕 · 실선 Primary200 / 파일 있음 = 점선 Grey300 / 비활성 = Grey50 바탕 · 점선 Grey100 */
/* 드롭 영역(Figma FileInput Box 2131:1025) — 기본: 흰 바탕 · 점선 CoolGrey200 · radius 4 · padding 24/12 · 간격 8
   hover = 점선 CoolGrey500 / dragover = Primary50 바탕 · 실선 Primary200 / 파일 있음 = 점선 Grey300 / 비활성 = Grey50 바탕 · 점선 Grey100 */
.pt-excel-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 24px 12px;
    border: 1px dashed var(--Fill-CoolGrey-200, #E5E7EB);
    border-radius: 4px;
    background: var(--Fill-White, #fff);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pt-excel-upload-area:hover { border-color: var(--Fill-CoolGrey-500, #6B7280); }
.pt-excel-upload-area.dragover {
    border-style: solid;
    border-color: var(--Fill-Primary-200, #BFDBFE);
    background: var(--Fill-Primary-50, #EFF6FF);
}
.pt-excel-upload-area.has-file:not(.dragover):not(:hover) {
    border-color: var(--Fill-Grey-300, #767676);
}
.pt-excel-upload-area.is-disabled {
    border-color: var(--Fill-Grey-100, #E2E2E2);
    background: var(--Fill-Grey-50, #F0F0F0);
    cursor: not-allowed;
}
.pt-excel-upload-area.is-disabled :is(.pt-excel-upload-ic, .pt-excel-upload-text, .pt-excel-upload-sub) { color: var(--Text-Grey-Disabled, #999); }
.pt-excel-upload-area:focus-visible { outline: 2px solid var(--Fill-Primary-Main, #1769E0); outline-offset: 1px; }

/* cloud_upload 48 · 안내 Regular 14 #505050 · '최대 10MB' Regular 12 #767676 */
.pt-excel-upload-ic {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--Text-Grey-Sub, #505050);
}
.pt-excel-upload-texts { display: flex; flex-direction: column; width: 100%; }
.pt-excel-upload-text {
    color: var(--Text-Grey-Sub, #505050);
    font-size: var(--Font-Size-14, 14px);
    font-weight: var(--Font-Weight-Regular, 400);
    line-height: 22px;
    letter-spacing: -0.35px;
}
.pt-excel-upload-sub {
    color: var(--Text-Grey-Sub2, #767676);
    font-size: var(--Font-Size-12, 12px);
    font-weight: var(--Font-Weight-Regular, 400);
    line-height: 20px;
    letter-spacing: -0.3px;
}

/* 드롭 영역 아래 '선택한 파일' 행(Box 형) — 흰 바탕 · 실선 CoolGrey200 · radius 4 · padding 8 · ✓ 24 + 파일명(Regular 14 #111) + ✕
   파일이 없으면 숨김(.has-file — file_box.js 가 파일명 변화를 보고 토글). 오류(.is-error) = 빨간 테두리 · cancel 아이콘 · 빨간 파일명 · ↻ 다시 선택 + ✕ · 아래 .file-upload-error(빨간 안내) */
.file-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
    border-radius: 4px;
    background: var(--Fill-White, #fff);
}
.file-upload-row:not(.has-file) { display: none; }
.file-upload-row .file-upload-ic { color: var(--Fill-Primary-Main, #1769E0); }
.file-upload-row .file-upload-name {
    color: var(--Text-Grey-Main, #111);
    font-weight: var(--Font-Weight-Regular, 400);
}
.file-upload-row .file-upload-actions { display: inline-flex; }
.file-upload-row.is-loading .file-upload-ic { color: var(--Text-Grey-Main, #111); animation: file-upload-spin 0.9s linear infinite; }
.file-upload-row.is-error { border-color: var(--Text-Error, #DC2626); }
.file-upload-row.is-error :is(.file-upload-ic, .file-upload-name) { color: var(--Text-Error, #DC2626); }
.file-upload-row.is-error .file-upload-retry { display: inline-flex; }
.file-upload-error {
    display: none;
    margin: -2px 0 0;
    color: var(--Text-Error, #DC2626);
    font-size: var(--Font-Size-14, 14px);
    line-height: 22px;
    letter-spacing: -0.35px;
}
.file-upload-row.is-error.has-file + .file-upload-error:not(:empty) { display: block; }

.pt-excel-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

/* 엑셀 업로드 모달(_excel_upload_modal.html) — 500 · 제목 ↔ 파일 영역 ↔ 버튼 32 · 버튼 가운데(템플릿 다운로드 · 업로드 120) */
.modal-dialog.modal-dialog--figma.excel-upload-dialog { width: 500px; max-width: calc(100vw - 32px); gap: 32px; }
.excel-upload-dialog .modal-title { font-size: 20px; font-weight: var(--Font-Weight-Bold, 700); line-height: 30px; letter-spacing: -0.5px; }
.excel-upload-dialog > .modal-body { display: flex; flex-direction: column; gap: 10px; }
.excel-upload-dialog > .modal-body .file-upload-hint { margin: 0; }
.excel-upload-dialog > .modal-footer.excel-upload-foot { justify-content: center; gap: 8px; }
.excel-upload-dialog > .modal-footer.excel-upload-foot .btn-main { width: 120px; }

/* ─────────────────────────────────────────────────────────────
   Country Select Search — 검색바 전용 (custom-select와 동일한 외형)
   사용: <div class="country-select country-select--search" ...>
───────────────────────────────────────────────────────────── */
.country-select--search {
    position: relative;
    width: 100%;
}

.country-select--search .select-selected {
    display: flex;
    height: 40px;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--Fill-Grey-300, #A8A8A8);
    background: var(--Fill-White, #FFF);
    transition: border-color 0.2s;
    cursor: pointer;
    gap: 8px;
}

.country-select--search .select-selected:hover {
    border-color: var(--Fill-Grey-500, #6E6E6E);
}

.country-select--search .select-selected:focus-within {
    border-color: var(--Fill-Grey-800, #2E2E2E);
}

.country-select--search .country-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-16, 16px);
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    cursor: pointer;
}

.country-select--search .country-search-input::placeholder {
    color: var(--Text-Grey-800, #2E2E2E);
    font-weight: var(--Font-Weight-Medium, 500);
}

.country-select--search .select-arrow {
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.country-select--search .select-arrow.select-arrow-active {
    transform: rotate(180deg);
}

.country-select--search .select-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    border-radius: 4px;
    border: 1px solid var(--Fill-Grey-800, #2E2E2E);
    background: var(--Fill-White, #FFF);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    max-height: 220px;
    overflow-y: auto;
}

.country-select--search .select-items.select-hide {
    display: none !important;
}

.country-select--search .select-items [data-value] {
    padding: 8px 12px;
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-16, 16px);
    font-weight: var(--Font-Weight-Regular, 400);
    line-height: 135%;
    letter-spacing: -0.4px;
    cursor: pointer;
    border-bottom: 1px solid var(--Fill-Grey-100, #E2E2E2);
}

.country-select--search .select-items [data-value]:last-child {
    border-bottom: none;
}

.country-select--search .select-items [data-value]:hover,
.country-select--search .select-items [data-value].same-as-selected {
    background: var(--Fill-Grey-50, #F0F0F0);
}

.country-select--search .select-items [data-value].same-as-selected {
    font-weight: var(--Font-Weight-Medium, 500);
}

.search-group .form-group-control.custom-select .select-selected, .search-group .form-group-control.custom-select .select-items,
.trader-search-row .form-group-control.custom-select .select-selected, .trader-search-row .form-group-control.custom-select .select-items {
    color: var(--Text-Grey-800, #2E2E2E);
  /* SubBody/1 */
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--LIne-Height-24, 24px); /* 150% */
  letter-spacing: -0.4px;
}

.modal-body .search-actions {
  margin-bottom: 24px;
}

.modal-body .data-table thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 검색 라벨 (ex: "Country Code") */
.search-label {
  width: 160px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px); /* 150% */
  letter-spacing: -0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 검색 바 래퍼 */
.search-group {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  width: 100%;
}

/* 검색 바 그룹 - 라벨 + 인풋 */
.search-form {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

/* 검색 인풋 고정 너비 */
.search-bar .search-input {
  /* width: 220px; */
  flex-shrink: 0;
}

/* 검색 버튼 내 아이콘+텍스트 정렬 */
.btn-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: auto;          /* btn-common의 width:100% 덮어쓰기 */
}

/* search-group 내 search-form이 균등 분할되도록 */
.search-group .search-form {
    flex: 1;
    min-width: 0;
}

/* search-form 내 컨트롤이 남은 공간 채우도록 */
.search-form .form-group-control {
    flex: 1;
    min-width: 0;
    /*width: auto;*/
}

/* search-form 내 date input 동일 처리 */
.search-form .custom-date-input {
    flex: 1;
    min-width: 0;
}

/* 검색 버튼 행 */
.search-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* 체크박스 + 라벨 행 */
.search-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-checkbox-row label {
    font-size: var(--Font-Size-14, 14px);
    font-weight: var(--Font-Weight-Medium, 500);
    color: var(--Text-Grey-800, #2E2E2E);
    letter-spacing: -0.35px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

/* ════════════════════════════════════════════════════════════
 * Table Section Header
 * 테이블 제목 + 우측 액션 버튼 영역
 * ════════════════════════════════════════════════════════════ */

/* 섹션 헤더 — 타이틀/버튼 좌우 분리 */
.table-section-header {
  /* min-height: 38px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

/* 섹션 타이틀 텍스트 — Body/1 */
.table-section-title {
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-18, 18px);
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-24, 24px); /* 133.333% */
  letter-spacing: -0.45px;
  margin: 0;

  color: var(--Text-Grey-Title, #232222);
}

/* 우측 버튼 그룹 */
.table-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 액션 영역 내 버튼 — 너비 auto 유지 */
.table-section-actions .btn-common {
  /* width: auto; */
}


/* ════════════════════════════════════════════════════════════
 * Data Table
 * 공통 데이터 테이블 스타일
 * 컬럼 리사이징: resize:horizontal (th)
 * ════════════════════════════════════════════════════════════ */

/* 테이블 가로 스크롤 래퍼 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.data-table .form-group-control.custom-select .select-arrow {
    width: 16px;
    height: 16px;
    font-size: 16px;             /* 표 셀 안은 컴팩트 16px 유지 */
}

/* 테이블 베이스 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;  /* 컬럼 리사이징 기반 */
}

/* 표 셀 내 한 줄 말줄임(문의 상세 제목 등). .data-table 는 table-layout:fixed 라 셀 폭이 고정되어 동작 */
.cell-ellipsis-1 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 헤더 행 */
.data-table thead tr {
  background: #E9ECF3;
  border-top: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
  border-bottom: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
}

/* 헤더 셀 — resize:horizontal으로 컬럼 너비 조절 가능 */
.data-table thead th {
  padding: 12px;
  font-size: var(--Font-Size-14, 14px);
  font-weight: var(--Font-Weight-Medium, 500);
  color: var(--Text-Grey-600, #585858);
  font-style: normal;
  line-height: var(--LIne-Height-22, 22px);
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  /* resize: horizontal; */
  user-select: none;
  min-height: 48px;
}

/* 바디 행 */
.data-table tbody tr {
  border-bottom: 1px solid var(--Fill-Grey-100, #E2E2E2);
  transition: background 0.12s;
}

/* 바디 행 hover */
.data-table tbody tr:not(:has(td.empty-cell)):hover {
  background: var(--Fill-Grey-50, #F0F0F0);
}

/* 선택된 행 (JS에서 .is-selected 토글) */
.data-table tbody tr.is-selected {
  /* background: var(--Fill-CoolGrey-100, #F4F6FA); */
}

/* 클릭으로 선택 가능한 행 (행 클릭 시 체크 토글) */
.data-table tbody tr.row-clickable {
  cursor: pointer;
}

/* 서류 마감 임박 경고 배너(신청/결제/생성 공용) */
.cutoff-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 4px solid var(--Fill-Point, #E37739);
}
.cutoff-warn > .icon { color: var(--Fill-Point, #E37739); flex-shrink: 0; }
.cutoff-warn b { color: var(--Text-Grey-900, #1A1A1A); }
.cutoff-warn p { margin: 4px 0 0; color: var(--Text-Grey-600, #585858); font-size: 13px; }
.cutoff-warn--unsigned { border-left-color: var(--error, #E33939); }
.cutoff-warn--unsigned > .icon { color: var(--error, #E33939); }

/* 바디 셀 */
.data-table tbody td {
  padding: 12px;
  font-size: var(--Font-Size-14, 14px);
  color: var(--Text-Grey-800, #2E2E2E);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-22, 22px); /* 157.143% */
  letter-spacing: var(--Letter-Spacing-14, -0.35px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table .input-cell {
  min-height: 34px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid var(--Fill-Grey-300, #A8A8A8);
  background: var(--Fill-White, #FFF);

  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--LIne-Height-22, 22px); /* 157.143% */
  letter-spacing: -0.35px;

  padding: 6px 8px;
}


.data-table .input-cell::placeholder {
  color: var(--Text-Grey-500, #6E6E6E);
  font-weight: var(--Font-Weight-Regular, 400);
}

.data-table .input-cell:hover        { border-color: var(--Fill-Grey-500, #6E6E6E); }
.data-table .input-cell:focus        { border-color: var(--Fill-Grey-800, #2E2E2E); outline: none; }
.data-table .input-cell.has-error    { border-color: var(--Fill-Error, #E33939); }

/* textarea — description 및 자동 높이 확장 */
.data-table .input-cell[name="description"],
.data-table .input-cell.is-textarea {
  height: auto;
  min-height: 66px;
  resize: none;
  overflow: hidden;
  align-items: flex-start;     /* 텍스트 상단 정렬 */
  padding-top: 10px;
}

.data-table .custom-date-input.input-cell {
  padding: 0px;
}

.data-table .input-cell.is-readonly {
  background: #F0F0F0;
  color: var(--Text-Grey-800, #2E2E2E);
  cursor: unset;
  border-color: var(--Fill-Grey-200, #D1D5E0);
}

/* 체크박스 컬럼 고정 너비 */
.col-check {
  width: 56px;
  text-align: center !important;
}

/* 테이블 체크박스 — SVG 아이콘 방식 */
.tbl-check, .row-check {
  /* 브라우저 기본 체크박스 제거 */
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* 미체크: check_box_outline_blank */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='ck_off' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23ck_off)'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%23C5C5C5'/%3E%3C/g%3E%3C/svg%3E");
}

/* 체크 상태: check_box */
.tbl-check:checked, .row-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='ck_on' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23ck_on)'%3E%3Cpath d='M10.6 16.2L17.65 9.15L16.25 7.75L10.6 13.4L7.75 10.55L6.35 11.95L10.6 16.2ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%230097D5'/%3E%3C/g%3E%3C/svg%3E");
}

.custom-checkbox {
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 미체크: check_box_outline_blank — #999(Figma 2171:12596) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='ck_off' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23ck_off)'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%23999999'/%3E%3C/g%3E%3C/svg%3E");
}

/* 체크됨: check_box — Primary #1769E0 아웃라인 + 체크마크(Figma 2171:12596) */
.custom-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='ck_on' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23ck_on)'%3E%3Cpath d='M10.6 16.2L17.65 9.15L16.25 7.75L10.6 13.4L7.75 10.55L6.35 11.95L10.6 16.2ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%231769E0'/%3E%3C/g%3E%3C/svg%3E");
}

/* 일부 선택(indeterminate — JS 로만 설정): indeterminate_check_box — Primary 아웃라인 + 가운데 가로줄
   ⚠️ 표 머리글 '전체 선택'에는 쓰지 않는다(2026-10-21 — 일부만 골라도 미체크 그대로, 전부 고르면 체크).
   여러 사용자의 값이 섞인 상태 표시(사용자 관리 인증 변경 모달의 데이터 수집 협력업체)에만 사용. */
.custom-checkbox:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 13H17V11H7V13ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%231769E0'/%3E%3C/svg%3E");
}

/* 비활성화 */
.custom-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 라디오 24 — Figma Radio(12705:112807): 미선택 radio_button_unchecked #999 / 선택 radio_button_checked Primary #1769E0.
   .custom-checkbox 와 같은 방식. <label class="check-label"><input type="radio" class="custom-radio"><span>…</span></label> (2026-11-02 계정 정보 선택 동의) */
.custom-radio {
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z' fill='%23999999'/%3E%3C/svg%3E");
}
.custom-radio:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 17C13.3833 17 14.5625 16.5125 15.5375 15.5375C16.5125 14.5625 17 13.3833 17 12C17 10.6167 16.5125 9.4375 15.5375 8.4625C14.5625 7.4875 13.3833 7 12 7C10.6167 7 9.4375 7.4875 8.4625 8.4625C7.4875 9.4375 7 10.6167 7 12C7 13.3833 7.4875 14.5625 8.4625 15.5375C9.4375 16.5125 10.6167 17 12 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z' fill='%231769E0'/%3E%3C/svg%3E");
}
.custom-radio:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 체크박스 + 문구 한 줄 — 체크 24 ↔ 8 ↔ 문구(Medium 16/24 #111). <label class="check-label"><input class="custom-checkbox"><span>…</span></label>
   회원가입 약관동의 · 계정 정보 마케팅 수신(2026-10-30) */
.check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Grey-Main, #111);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: 16px;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: 24px;
    letter-spacing: -0.4px;
    cursor: pointer;
}

/* 헤더 전체선택 체크박스 */
.tbl-check-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* display: inline-flex;
  align-items: center;
  justify-content: center; */
  color: var(--Text-Grey-400, #A8A8A8);
  transition: color 0.15s;
}

.tbl-check-icon:hover {
  color: var(--Fill-Primary-Main, #0097D5);
}

.tbl-check-icon.is-checked {
  color: var(--Fill-Primary-Main, #0097D5);
}

/* 행 체크박스 버튼 */
.icon-checkbox {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--Text-Grey-400, #A8A8A8);
  transition: color 0.15s;
}

.icon-checkbox:hover {
  color: var(--Fill-Primary-Main, #0097D5);
}

.icon-checkbox.is-checked {
  color: var(--Fill-Primary-Main, #0097D5);
}

/* 빈 상태 / 로딩 셀 */
.empty-cell {
  text-align: center;
  padding: 36px 12px !important;
  color: #C5C5C5;
  font-size: var(--Font-Size-14, 14px);
  white-space: normal;
}

/* ── 셀 내부 컨트롤 ─────────────────────────────────────────── */
.cell-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 38px;
}
.cell-input-wrap .cell-ctrl {
  padding-right: 28px;
  flex: 1;
  min-width: 0;
}
/* 실제 입력(input-cell-ctrl·form-group-control)도 clear 버튼 공간 확보 — 텍스트 침범 방지 */
.cell-input-wrap .input-cell-ctrl,
.cell-input-wrap .form-group-control {
  flex: 1;
  min-width: 0;
  padding-right: 28px;
}
/* 검색바 입력은 icon-md(24px @ right:12px) clear 버튼 → 더 넓게 확보 */
.search-bar .cell-input-wrap .form-group-control {
  padding-right: 40px;
}
.cell-input-wrap .input-clear-btn {
  right: 12px;
}

.data-table .input-clear-btn {
  width: 16px;
  height: 16px;
  right: 8px;
}

.select-selected.cell-input-wrap .input-clear-btn{
  width: unset;
  height: unset;
  right: 15px;
}

/* ─────────────────────────────────────────────────────────────
   Country Select Cell — 검색 가능 콤보박스 (form-table 셀 전용)
   구조: <div class="country-select country-select--cell" id="...">
           <input type="hidden" id="..." value="">
           <div class="select-selected">
             <input class="country-search-input" type="text" autocomplete="off">
             <span class="select-arrow icon icon-md">keyboard_arrow_down</span>
           </div>
           <div class="select-items select-hide">
             <div data-value="...">label</div>
             ...
           </div>
         </div>
   initCountrySelects() 를 각 페이지 DOMContentLoaded에서 호출
───────────────────────────────────────────────────────────── */
.country-select--cell {
    border: none !important;
    border-radius: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    position: relative;
}
 
.country-select--cell .select-selected {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 38px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
 
.country-select--cell .country-search-input {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    height: 100%;
    padding-left: 8px;
    padding-right: 4px;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-14, 14px);
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-22, 22px);
    letter-spacing: -0.35px;
    width: 100%;
}
 
.country-select--cell .country-search-input::placeholder {
    color: var(--Text-Grey-300, #A8A8A8);
    font-weight: var(--Font-Weight-Regular, 400);
}
 
.country-select--cell .select-arrow {
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 16px;
    transition: transform 0.2s ease;
    pointer-events: none;
    color: var(--Text-Grey-800, #2E2E2E);
    pointer-events: auto;
    cursor: pointer;
}
 
.country-select--cell .select-arrow.select-arrow-active {
    transform: rotate(180deg);
}
 
/* 드롭다운 패널 */
.country-select--cell .select-items {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 00;
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
    border-radius: 4px;
    border: 1px solid var(--Fill-Grey-800, #2E2E2E);
    background: var(--Fill-White, #FFF);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-14, 14px);
    font-style: normal;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-22, 22px);
    letter-spacing: -0.35px;
}
 
.country-select--cell .select-items.select-hide {
    display: none !important;
}
 
.country-select--cell .select-items [data-value] {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--Fill-Grey-100, #E2E2E2);
    background: var(--Fill-White, #FFF);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.country-select--cell .select-items [data-value]:hover,
.country-select--cell .select-items [data-value].same-as-selected {
    background: var(--Fill-Grey-50, #F0F0F0);
}
 
/* hover 시 배경 */
.country-select--cell:hover .select-selected {
    background: var(--Fill-CoolGrey-100, #F4F6FA);
}
 
 
/* ─────────────────────────────────────────────────────────────
   Has Error — 에러 상태 (필수값 미입력 시 JS에서 has-error 토글)
───────────────────────────────────────────────────────────── */
 
/* cell-input-wrap 에러 */
.cell-input-wrap.has-error {
    outline: 1px solid var(--Fill-Error, #E33939);
    border-radius: 4px;
    background: var(--Fill-White, #FFF);
}
 
/* cell-input-wrap 에러 시 내부 인풋 배경 투명 유지 */
.cell-input-wrap.has-error .cell-ctrl,
.cell-input-wrap.has-error .input-cell-ctrl {
    background: transparent;
}
 
/* country-select--cell 에러 */
.country-select--cell.has-error .select-selected {
    outline: 1px solid var(--Fill-Error, #E33939);
    border-radius: 4px;
    background: var(--Fill-White, #FFF);
}

.custom-select.has-error .select-selected {
    border-color: var(--Fill-Error, #DC2626);
    background: var(--Fill-White, #FFF);
}

/* tbl-input-cell(상품 테이블 입력 셀) 에러 */
.tbl-input-cell.has-error {
    outline: 1px solid var(--Fill-Error, #E33939);
    border-radius: 4px;
    background: var(--Fill-White, #FFF);
}

/* custom-date-input(달력 입력) 에러 */
.custom-date-input.has-error {
    outline: 1px solid var(--Fill-Error, #E33939);
    border-radius: 4px;
    background: var(--Fill-White, #FFF);
}
 
/* 에러 상태 해제 시 전환 */
.cell-input-wrap,
.country-select--cell .select-selected {
    transition: outline 0.15s, background 0.15s;
}

.input-cell-ctrl, .cell-ctrl {
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--Font-Size-14, 14px);
  font-family: var(--Font-Family, 'Noto Sans');
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-22, 22px);
  letter-spacing: -0.35px;
  color: var(--Text-Grey-800, #2E2E2E);
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
}
.input-cell-ctrl::placeholder, .cell-ctrl::placeholder { color: var(--Text-Grey-300, #A8A8A8); font-weight: var(--Font-Weight-Regular, 400);}

.cell-search-wrap:focus-within {
    background: var(--Fill-CoolGrey-100, #F4F6FA);
}

.input-cell-ctrl:hover , .input-cell-ctrl:focus { background: var(--Fill-CoolGrey-100, #F4F6FA); }
.cell-ctrl:hover , .cell-ctrl:focus { background: var(--Fill-CoolGrey-100, #F4F6FA); }
.detail-table .cell-ctrl:hover, .detail-table .cell-ctrl:focus { background: unset; }

/* cell-ctrl 읽기 전용 상태 */
.cell-ctrl.is-readonly {
    /* background: var(--Fill-Grey-50, #F8F8F8); */
    color: var(--Text-Grey-600, #5A5A5A);
    cursor: default;
}

/* ════════════════════════════════════════════════════════════
 * Table Input Cell — Product Info 테이블 셀/인풋 공통 스타일
 * ════════════════════════════════════════════════════════════ */

.tbl-input-cell {
    display: flex;
    height: 48px;
    /* min-width: 140px; */
    padding: 6px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    /* border-bottom: 1px solid var(--Fill-CoolGrey-100, #F4F6FA); */
    /* background: var(--Fill-White, #FFF); */
    box-sizing: border-box;
}

.tbl-input-cell-field {
    display: flex;
    min-width: 0;
    padding: 6px 8px;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    border-radius: 4px;
    border: 1px solid var(--Fill-Grey-300, #A8A8A8);
    background: var(--Fill-White, #FFF);
    font-size: var(--Font-Size-14, 14px);
    font-family: var(--Font-Family, 'Noto Sans');
    color: var(--Text-Grey-800, #2E2E2E);
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.tbl-input-cell-field::placeholder {
    color: var(--Text-Grey-300, #A8A8A8);
}

.tbl-input-cell-field:focus:not(.is-readonly) {
    border-color: var(--Fill-Primary-Main, #0097D5);
}

.tbl-input-cell-field.is-readonly {
    background: var(--Fill-Grey-100, #E2E2E2);
    color: var(--Text-Grey-500, #6E6E6E);
    cursor: default;
}

/* ════════════════════════════════════════════════════════════
 * Form Table — 생성 / 수정 / 상세 페이지용 테이블형 폼
 * 사용법: <table class="data-table form-table">
 *         <col class="col-lbl"> + <th> 라벨 + <td> cell-ctrl 인풋
 * ※ 검색바 / 로그인 / 회원가입 / 비밀번호변경 / 모달 인풋은
 *   기존 .form-group-control 계속 사용
 * ════════════════════════════════════════════════════════════ */

/* 라벨 컬럼 기본 너비 — 페이지별 override 가능 */
.data-table.form-table .col-lbl { width: 185px; }

.data-table.input-table tbody td {
    padding: 6px 8px;
}

/* tbody th — 라벨 셀 */
.data-table.form-table tbody th {
    color: var(--Text-Grey-Main, #111);
    background: var(--Fill-CoolGrey-100, #F1F5F9);
    padding: 12px 16px;
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-16, 16px);
    font-style: normal;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    text-align: left;
    vertical-align: middle;
    border-top:    1px solid var(--Fill-CoolGrey-200, #E5E7EB);
    border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}

/* tbody td — 인풋 셀 (padding:0 → cell-ctrl이 셀을 꽉 채움) */
.data-table.form-table tbody td {
    padding: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    vertical-align: middle;
    background: var(--Fill-White, #FFF);
    border-top:    1px solid var(--Fill-CoolGrey-300, #D1D5E0);
    border-bottom: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
}

/* 행 hover 제거 — 폼 행은 클릭 대상이 아님 */
.data-table.form-table tbody tr:hover { background: transparent; }

/* form-table 내 custom-select — border 제거 후 셀에 seamless 적용 */
.data-table.form-table tbody td .form-group-control.custom-select {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-height: 38px;
}

.data-table.form-table tbody td .form-group-control.custom-select.has-error .select-selected {
  border-radius: 4px;
  /* 표 셀 안은 테두리를 숨기므로 오류는 외곽선으로 표시 */
  outline: 1.5px solid var(--Fill-Error, #DC2626);
}

.data-table.form-table tbody td .custom-select .select-selected {
    padding: 8px;
    height: 38px;
    border-radius: 0;
    border: none;
    background: transparent;
}

.data-table.form-table tbody td .custom-select:hover .select-selected,
.data-table.form-table tbody td .custom-select .select-selected.select-arrow-active {
    background: var(--Fill-CoolGrey-100, #F4F6FA);
}

.data-table .custom-select .select-selected {
  height: 36px;
}

/* ── form-table 값 칸 입력 — 행 높이를 꽉 채움(2026-10-19, Figma DataTable/Form) ──
   라벨 칸(th)이 padding 12/16 · 24px → 행 48 인데 값 칸 입력은 38 이라 위아래가 비어 보였다.
   값 칸의 입력·선택·국가 선택·라디오를 48 로 채우고 안쪽 여백 16 · Medium 16 #111 · placeholder Regular #767676.
   (form-table 밖의 .cell-ctrl — 상품 입력표 등 — 은 영향 없음) */
.data-table.form-table tbody td .cell-input-wrap {
    min-height: 48px;
}
.data-table.form-table tbody td :is(.cell-ctrl, .input-cell-ctrl) {
    min-height: 48px;
    padding: 12px 16px;
    color: var(--Text-Grey-Main, #111);
    font-size: var(--Font-Size-16, 16px);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
.data-table.form-table tbody td input:is(.cell-ctrl, .input-cell-ctrl) {
    height: 48px;
}
.data-table.form-table tbody td :is(.cell-ctrl, .input-cell-ctrl)::placeholder {
    color: var(--Text-Grey-Sub2, #767676);
}
/* clear 버튼(16 · 오른쪽 16) 자리 확보 */
.data-table.form-table tbody td .cell-input-wrap :is(.cell-ctrl, .input-cell-ctrl) {
    padding-right: 44px;
}
.data-table.form-table tbody td .cell-input-wrap .input-clear-btn {
    right: 16px;
}
/* 입력 칸 오른쪽 아이콘 버튼(검색 돋보기·연결 해제 X 등, 2026-10-21) — clear 버튼과 같은 자리(16 · 오른쪽 16).
   마크업: <div class="input-wrapper cell-icon-wrap"><input class="cell-ctrl"><button class="cell-icon-btn"><span class="icon icon-sm">search</span></button></div>
   예: 협력사 등록/수정 담당자 · 상품 등록/수정 공급업체 */
.cell-icon-wrap { position: relative; flex: 1; min-width: 0; }
.data-table.form-table tbody td .cell-icon-wrap :is(.cell-ctrl, .input-cell-ctrl) { padding-right: 44px; }
.cell-icon-wrap .cell-ctrl.is-picker { cursor: pointer; }
.cell-icon-btn {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0;
    background: none; border: none; cursor: pointer; z-index: 2;
}
.data-table.form-table tbody td select.cell-ctrl {
    padding-right: 44px;
    background-position: right 16px center;
}
/* custom-select */
.data-table.form-table tbody td .form-group-control.custom-select {
    min-height: 48px;
}
.data-table.form-table tbody td .custom-select .select-selected {
    height: 48px;
    padding: 12px 16px;
}
.data-table.form-table .form-group-control.custom-select .select-text {
    font-size: var(--Font-Size-16, 16px);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
/* 국가 선택(country-select--cell) */
.data-table.form-table tbody td .country-select--cell .select-selected,
.data-table.form-table tbody td .country-select--cell .country-search-input {
    min-height: 48px;
}
.data-table.form-table tbody td .country-select--cell .country-search-input {
    padding: 0 8px 0 16px;
    color: var(--Text-Grey-Main, #111);
    font-size: var(--Font-Size-16, 16px);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
.data-table.form-table tbody td .country-select--cell .country-search-input::placeholder {
    color: var(--Text-Grey-Sub2, #767676);
}
.data-table.form-table tbody td .country-select--cell .select-arrow {
    margin-right: 16px;
}
/* 라디오 그룹 */
.data-table.form-table tbody td .radio-group {
    min-height: 48px;
    padding: 12px 16px;
}

.form-group-control.custom-select .select-selected, .form-group-control.custom-select .select-items {
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-14, 14px);
    font-style: normal;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-22, 22px); /* 157.143% */
    letter-spacing: -0.35px;
}

.form-group-control.mobile-lang-select .select-selected {
  height: 44px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  letter-spacing: -0.4px;
}

/* select 화살표 커스텀 */
select.cell-ctrl {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* 읽기 전용 텍스트 (상세 페이지) */
.cell-text {
  padding: 8px;
  align-items: center;
  align-self: stretch;
  background: var(--Fill-White, #FFF);
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-22, 22px);
  letter-spacing: -0.35px;
  text-align: left;
  word-break: break-all;
}


/* ════════════════════════════════════════════════════════════
 * Pagination
 * 구성: 맨앞(«) 이전(<) [숫자 최대 7개] 다음(>) 맨뒤(»)
 * 7페이지 이하: «  » 숨김
 * ════════════════════════════════════════════════════════════ */
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

/* 공통 버튼 베이스 */
.pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--Fill-White, #FFF);
  color: var(--Text-Grey-700, #424242);
  font-size: var(--Font-Size-12, 12px);
  font-family: var(--Font-Family, 'Noto Sans');
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-20, 20px); /* 166.667% */
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.pagination .page-btn:hover {
  background: var(--Fill-CoolGrey-100, #F4F6FA);
}

/* 활성 페이지 — 외곽선(outline) 스타일 */
.pagination .page-btn.is-active {
  background: var(--Fill-White, #FFF);
  border: 1px solid var(--Fill-Primary-Main, #0097D5);
  color: var(--Fill-Primary-Main, #0097D5);
  cursor: default;
  pointer-events: none;
}

/* 비활성(disabled) — 맨앞/맨뒤/이전/다음 버튼이 한계에 도달한 경우 */
.pagination .page-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 네비게이션 버튼 (« < > ») — 테두리 없이 아이콘 스타일 */
.pagination .page-btn-nav {
  border-color: transparent;
  background: transparent;
  color: var(--Text-Grey-500, #6E6E6E);
  font-size: var(--Font-Size-16, 16px);
  min-width: 28px;
}

.pagination .page-btn-nav:hover {
  background: var(--Fill-Grey-50, #F0F0F0);
  border-color: transparent;
  color: var(--Text-Grey-800, #2E2E2E);
}

.pagination-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════
 * Custom Calendar
 * 구조: .custom-date-input > input[text] + input[hidden]
 *                          + .calendar-icon + .custom-calendar
 * .custom-calendar > .calendar-header + .calendar-weekdays
 *                  + .calendar-grid
 * 초기화: base.html initCalendars() 자동 호출
 * ════════════════════════════════════════════════════════════ */

.custom-date-input { position: relative; width: 100%; }
.date-input-field             { position: relative; width: 100%; }
.date-input-field input[type="text"] { cursor: pointer; padding-right: 32px; width: 100%; }
.date-input-field .calendar-icon     { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.date-input-field .form-group-control { padding: 8px; }

/* Figma Datepicker(11854:65865, 2026-10-14) — 흰 배경 · radius 16 · padding 20 · 그림자 0 4 5 rgba(0,0,0,.1) ·
   머리(이전/다음 chevron 24 · 'YYYY년 M월' Bold 16 #262726) ↔ 요일·날짜 16 /
   요일·날짜 칸 44 x 36(날짜 행 간격 4) · 숫자 Medium 14 — 일 #DC2626 · 토 #1769E0 · 다른 달·선택 불가 #999 /
   날짜 = 36 x 36 radius 8: hover Cool Grey 100 · 오늘 Primary 테두리 · 선택 Primary 배경 + 흰 글자.
   단일 날짜 선택(클릭 즉시 적용) 동작은 그대로 — Figma 의 기간 표시·'선택' 버튼은 기간 선택 UI 용이라 미적용. */
.custom-calendar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    width: max-content;
    padding: 20px;
    border: none;
    border-radius: 16px;
    background: var(--Background-BGWhite, #FFF);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-title {
    color: var(--Text-Grey-800, #262726);
    font-size: var(--Font-Size-16, 16px);
    font-weight: var(--Font-Weight-Bold, 700);
    line-height: var(--Line-Height-24, 24px);
    letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* 달력 월 이동(prev/next) — 테두리 없는 chevron 24 */
.prev-month,
.next-month,
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--Text-Grey-800, #262726);
    cursor: pointer;
    transition: background 0.15s;
}
.nav-btn:hover { background: var(--Fill-CoolGrey-100, #F1F5F9); }
.custom-calendar .nav-btn .icon { font-size: 24px; color: var(--Text-Grey-800, #262726); }

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    gap: 0;
    width: max-content;
}
.calendar-grid { row-gap: 4px; }

.calendar-weekdays > div,
.calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--Text-Grey-800, #262726);
    text-align: center;
    font-size: var(--Font-Size-14, 14px);
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--Line-Height-22, 22px);
    letter-spacing: var(--Letter-Spacing-14, -0.35px);
}
.calendar-day-header.sunday   { color: var(--Text-Error, #DC2626); }
.calendar-day-header.saturday { color: var(--Text-Primary-Main, #1769E0); }

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.day-number {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--Text-Grey-Main, #111);
    font-size: var(--Font-Size-14, 14px);
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--Line-Height-22, 22px);
    letter-spacing: var(--Letter-Spacing-14, -0.35px);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.day-number.sunday   { color: var(--Text-Error, #DC2626); }
.day-number.saturday { color: var(--Text-Primary-Main, #1769E0); }

.calendar-day:hover .day-number            { background: var(--Fill-CoolGrey-100, #F1F5F9); }
.calendar-day.other-month .day-number      { color: var(--Text-Grey-Disabled, #999); }
.calendar-day.today .day-number            { border-color: var(--Fill-Primary-Main, #1769E0); }
.calendar-day.selected .day-number,
.calendar-day.selected:hover .day-number   { border-color: var(--Fill-Primary-Main, #1769E0); background: var(--Fill-Primary-Main, #1769E0); color: var(--Text-White, #FFF); }

/* 선택 불가(minDate 이전) — 글자 #999 · 클릭 불가 */
.calendar-day.disabled                     { cursor: not-allowed; pointer-events: none; }
.calendar-day.disabled .day-number         { color: var(--Text-Grey-Disabled, #999); opacity: 0.6; }
.calendar-day.disabled:hover .day-number   { background: transparent; }


/* ════════════════════════════════════════════════════════════
 * Split Panel
 * 좌우 패널 분할 레이아웃 (다국어 관리 등)
 * ════════════════════════════════════════════════════════════ */

/* 수평 분할 컨테이너 */
.split-panel {
  display: flex;
  min-height: 0;
}

/* 개별 패널 */
.split-pane {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	align-items: flex-start;
	gap: 16px;
}

/* 왼쪽 패널 — 우측 경계선 */
.split-left {
  /*border-right: 1px solid var(--Fill-Grey-100, #E2E2E2);*/
}


/* ════════════════════════════════════════════════════════════
 * Modal (공통)
 * 구조: .modal-overlay > .modal-dialog > header + body + footer
 * 열림: .modal-overlay.show
 * ════════════════════════════════════════════════════════════ */

/* 모달 오버레이 — 기본 숨김 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
}

/* .show 클래스 추가 시 표시 */
.modal-overlay.is-open {
  display: flex;
}

/* 모달 다이얼로그 박스 */
.modal-dialog {
  background: var(--Fill-White, #FFF);
  border-radius: 20px;
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  animation: modal-slide-in 0.18s ease;
  position: relative;
  pointer-events: auto;
}

/* 넓은 모달 변형 */
.modal-dialog.modal-dialog-lg {
  width: 600px;
}

.modal-dialog.modal-dialog-xlg {
  width: 960px;
  max-width: 95vw;
}

/* Figma 모달(Project_modal) — radius 20 · padding 24/24/32 · 제목(Bold 20 #111) ↔ 본문 24 */
.modal-dialog.modal-dialog--figma { padding: 24px 24px 32px; gap: 24px; border-radius: 20px; }
.modal-dialog--figma > .modal-header,
.modal-dialog--figma > .modal-body,
.modal-dialog--figma > .modal-footer { padding: 0; }
.modal-dialog--figma .modal-title { color: var(--Text-Grey-Main, #111); }
/* Figma 확인 모달(11850:64197) — 너비 400 · 제목 ↔ 내용 ↔ 버튼 40 · 버튼 최소 120 · 버튼 간격 10 */
.modal-dialog.modal-dialog--figma.modal-dialog--confirm { width: 500px; gap: 40px; }
.modal-dialog--figma.modal-dialog--confirm > .modal-footer { gap: 10px; }
.modal-dialog--figma.modal-dialog--confirm > .modal-footer .btn-common { min-width: 120px; }
/* 하단 버튼(취소·확인) — 최소 80 · 높이 48 · padding 12/16 · radius 10 · Bold 16 (색은 공통 .btn-white / .btn-main) */
.modal-dialog--figma > .modal-footer .btn-common {
  min-width: 80px; height: 48px; padding: 12px 16px; border-radius: 10px;
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px); letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

/* ── Figma 공통 검색 모달(11953:83697) — .modal-dialog--figma 와 함께 사용(.modal-dialog--search)
   1200 · padding 24/24/40 · 검색 영역(아래 구분선) ↔ 결과 표 ↔ 페이지 24 · 하단 선택 버튼 1개 가운데 ── */
.modal-dialog.modal-dialog--figma.modal-dialog--search { width: 1200px; max-width: 95vw; padding: 24px 24px 40px; }
.modal-dialog--search > .modal-body { gap: 24px; }
/* 검색 영역: 행 간격 16 · 필드 2개(각 flex 1) 간격 16 · 아래 padding 24 + 구분선 Cool Grey 200 */
.modal-dialog--search .search-bar {
  gap: 16px; margin-bottom: 0; padding-bottom: 24px;
  border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}
.modal-dialog--search .search-group { gap: 16px; }
.modal-dialog--search .search-form { gap: 10px; }
.modal-dialog--search .search-form > .cell-input-wrap { flex: 1; min-width: 0; min-height: 40px; }
.modal-dialog--search .search-label {
  width: 160px; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px); letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
/* 입력·선택·국가·날짜: 높이 40 · padding 8/12 · Cool Grey 200 · radius 10 · 값 Medium 16 #111 · placeholder Regular #767676 */
.modal-dialog--search .search-form .form-group-control,
.modal-dialog--search .search-form .country-select--search .select-selected,
.modal-dialog--search .search-form .custom-select .select-selected {
  height: 40px; padding: 8px 12px; border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 10px;
  color: var(--Text-Grey-Main, #111); font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500);
}
.modal-dialog--search .search-form .form-group-control.custom-select { padding: 0; border: none; }
.modal-dialog--search .search-form .cell-input-wrap .form-group-control { padding-right: 44px; }
.modal-dialog--search .search-form .date-input-field .form-group-control { padding-right: 44px; }
.modal-dialog--search .search-form .form-group-control::placeholder,
.modal-dialog--search .search-form .country-search-input::placeholder {
  color: var(--Text-Grey-400, #767676); font-weight: var(--Font-Weight-Regular, 400);
}
.modal-dialog--search .search-form .country-search-input { color: var(--Text-Grey-Main, #111); }
.modal-dialog--search .search-form .select-arrow,
.modal-dialog--search .search-form .calendar-icon { font-size: 24px; width: 24px; height: 24px; }
.modal-dialog--search .search-form .calendar-icon { right: 12px; }
.modal-dialog--search .search-form .cell-input-wrap .input-clear-btn { right: 12px; }
/* 버튼: 초기화(흰)·검색(파랑) — padding 12/16 · radius 10 · Bold 16 · 아이콘 24 · 간격 8 */
.modal-dialog--search .search-actions { gap: 8px; margin-bottom: 0; }
.modal-dialog--search .search-actions .btn-search {
  height: 48px; padding: 12px 16px; gap: 4px; border-radius: 10px;
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px); letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
.modal-dialog--search .search-actions .btn-search .icon { font-size: 24px; width: 24px; height: 24px; }
/* 결과 표: 바깥 테두리 Cool Grey 200 · radius 4 · 머리 Cool Grey 100 48(padding 12/16) · 행 56(padding 16) · Medium 16 #111 */
.modal-dialog--search :is(.table-wrapper, .pt-modal-table-wrap) {
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 4px; margin-bottom: 0;
}
.modal-dialog--search .data-table thead tr {
  background: var(--Fill-CoolGrey-100, #F1F5F9); border-top: none;
  border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}
.modal-dialog--search .data-table thead th {
  padding: 12px 16px; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px); letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
.modal-dialog--search .data-table tbody tr { border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); }
.modal-dialog--search .data-table tbody tr:last-child { border-bottom: none; }
.modal-dialog--search .data-table tbody td {
  padding: 16px; color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px); font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px); letter-spacing: var(--Letter-Spacing-16, -0.4px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-dialog--search .data-table tbody tr:not(:has(td.empty-cell)) { cursor: pointer; }
.modal-dialog--search .data-table tbody tr:not(:has(td.empty-cell)):hover { background: var(--Fill-CoolGrey-50, #F8FAFC); }
/* 선택 열(라디오·체크) 56 · 아이콘 가운데(공통 .modal-body td:has(radio) 의 flex 해제 — 표 칸 유지) */
.modal-dialog--search col.modal-col-check { width: 56px; }
.modal-dialog--search .data-table :is(th, td).modal-check-cell,
.modal-dialog--search .data-table td:has(input[type="radio"]) {
  display: table-cell; padding: 0; text-align: center; vertical-align: middle;
}
.modal-dialog--search .data-table :is(th, td).modal-check-cell > input,
.modal-dialog--search .data-table td:has(input[type="radio"]) > input { vertical-align: middle; margin: 0; }
.modal-dialog--search input[type="radio"] { border-color: var(--Fill-Grey-300, #999); }
.modal-dialog--search input[type="radio"]:checked { border-color: var(--Fill-Primary-Main, #1769E0); }
.modal-dialog--search input[type="radio"]:checked::before { background: var(--Fill-Primary-Main, #1769E0); }
.modal-dialog--search .data-table td.modal-img-cell { padding: 0; text-align: center; }
.modal-dialog--search .data-table td.modal-img-cell .icon { vertical-align: middle; }
.modal-dialog--search .data-table td.modal-img-cell .icon-primary { cursor: pointer; }
.modal-dialog--search .pagination { margin: 0; }
/* 하단: 선택 버튼 1개 가운데 120×42 · radius 10 · Bold 14 */
.modal-dialog--figma.modal-dialog--search > .modal-footer .btn-common {
  min-width: 120px; height: 42px; padding: 10px 14px;
  font-size: var(--Font-Size-14, 14px); line-height: var(--Line-Height-22, 22px); letter-spacing: var(--Letter-Spacing-14, -0.35px);
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 모달 헤더 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0px 20px;
  border-bottom: 0;
  flex-shrink: 0;
}

/* 모달 제목 — Subtitle */
.modal-title {
  color: var(--Text-Grey-Title, #232222);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: 20px;
  font-style: normal;
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-30, 30px); /* 150% */
  letter-spacing: -0.5px;
}

/* 모달 닫기 버튼 (×) */
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--Text-Grey-800, #232222);
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover {
  background: var(--Fill-Grey-50, #F0F0F0);
  color: var(--Text-Grey-800, #2E2E2E);
}

/* 모달 본문 */
.modal-body {
  padding: 24px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
}

/* 모달 푸터 */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0px 20px 32px 20px;
  border-top: 0;
  flex-shrink: 0;
}

/* 모달 푸터 내 버튼 너비 auto */
.modal-footer .btn-common {
  width: auto;
  min-width: 80px;
}


/* ════════════════════════════════════════════════════════════
 * Form — Textarea 추가 규칙
 * textarea 태그에 .form-group-control 적용 시 기본 동작
 * ════════════════════════════════════════════════════════════ */

/* textarea 기본: height auto, rows 속성으로 높이 제어 */
textarea.form-group-control {
  height: auto;
  resize: vertical;
  overflow-y: auto;
  align-items: flex-start;
  padding-top: 10px;
  line-height: 1.6;
}

/* 텍스트에어리어 하단 힌트 (글자수 카운터 등) */
.textarea-hint {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: var(--Font-Size-14, 14px);
  color: var(--Text-Grey-800, #2E2E2E);
  letter-spacing: -0.35px;
  line-height: var(--LIne-Height-22, 22px);
}

/* ════════════════════════════════════════════════════════════
 * QnA 문의 상세 (admin_qna / 사용자 문의 상세 공통 — legacy qna_detail 시각 정합)
 * 상단 액션바 · 본문 테이블 · 상태 배지 · 답변(댓글) 스레드 · 인라인 수정.
 * 신규 문의 상세 페이지는 아래 .qna-* 클래스를 재사용한다(모듈 CSS 신설 금지).
 * ════════════════════════════════════════════════════════════ */
/* 1·2. 카드 머리(상태 변경 버튼)·문의 정보 표 = 공통 .detail-card + data-table form-table detail-table (2026-10-21).
   문의하기(mypage 작성 폼)도 같은 카드·표. 작성일 열 160 · 내용 칸 최소 높이 200(줄바꿈 유지). */
.data-table.form-table th.cell-top { vertical-align: top; }
.qna-info-table col.qna-col-date { width: 160px; }
/* 폼 표 값 칸의 여러 줄 입력(textarea.cell-ctrl) — 입력칸과 같은 여백·글자, clear 버튼은 오른쪽 위 */
.data-table.form-table tbody td textarea.cell-ctrl { display: block; resize: vertical; overflow-y: auto; white-space: pre-wrap; }
.data-table.form-table tbody td .cell-input-wrap:has(> textarea) { align-items: flex-start; }
.data-table.form-table tbody td .cell-input-wrap:has(> textarea) .input-clear-btn { top: 16px; transform: none; }
.data-table.form-table tbody td textarea.qna-form-textarea { min-height: 436px; }   /* 문의하기 — 문의 내용 큰 입력 영역 */
.qna-author-email { color: var(--Text-Grey-500, #6E6E6E); }
.qna-content-body { white-space: pre-wrap; word-break: break-word; }
.data-table.form-table tbody td .qna-content-body { min-height: 200px; }   /* 폼 표 값 칸 최소 높이(48)보다 우선 — 조회 div · 사용자 문의 상세 수정 textarea 공용 */

/* 3. 상태 배지 */
.qna-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--Font-Size-12, 12px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: 20px;
  white-space: nowrap;
}
.qna-status-badge.qna-status-pending  { background: var(--Fill-CoolGrey-200, #E9ECF3); color: var(--Text-Grey-600, #585858); }
.qna-status-badge.qna-status-answered { background: var(--Fill-Blue-100, #E0F4FC); color: var(--Text-Blue-Main, #0097D5); }
.qna-status-badge.qna-status-closed   { background: var(--Fill-Green-100, #E6F9F0); color: var(--Text-Green-600, #1A9E5A); }

/* 4. 답변(댓글) 섹션 */
.qna-comments-section { margin-top: 24px; display: flex; flex-direction: column; align-self: stretch; }
.qna-comments-section.is-closed { margin-top: 0; }
.qna-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: 16px;
}
.qna-comments-title {
  color: var(--Text-Grey-Title, #232222);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-18, 18px);
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.45px;
}
.qna-comments-header .btn-common { width: auto; min-width: 70px; }

/* 답변 입력·수정 textarea — 공통 입력칸(.form-group-control: radius 10 · Cool Grey 200 테두리 · Medium 16)에
   높이·오른쪽 clear 버튼 자리만 더함. 마크업 <textarea class="form-group-control qna-reply-textarea"> */
textarea.form-group-control.qna-reply-textarea { min-height: 120px; padding: 12px 44px 12px 16px; }
.qna-comment-edit-wrap textarea.form-group-control.qna-reply-textarea { min-height: 82px; }
.textarea-wrapper .input-clear-btn { top: 8px; transform: none; }

/* 카운터/힌트 — 한도 도달 시 빨강 */
.comment-hint-text, .edit-hint-text { font-size: 12px; color: var(--Text-Error, #E33939); }
.comment-counter-wrap, .edit-counter-wrap { font-size: 12px; color: var(--Text-Grey-500, #6E6E6E); }
.comment-counter-wrap.is-full, .edit-counter-wrap.is-full { color: var(--Text-Error, #E33939); }

/* 5. 댓글 카드 목록 */
.qna-comment-list { margin-top: 52px; display: flex; flex-direction: column; gap: 24px; }
.qna-comment-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  padding: 16px;
  border-top: 1px solid var(--Fill-Grey-300, #A8A8A8);
  background: var(--Background-BGWhite, #FFF);
}
.qna-comment-card.is-editing { padding: 0; border-top: unset; }
.qna-comment-card-header { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.qna-comment-card-meta { display: flex; align-items: center; gap: 8px; }
.qna-comment-card-author,
.qna-comment-card-date,
.qna-comment-card-body,
.qna-comment-card-updated {
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.4px;
}
.qna-comment-card-author { display: flex; align-items: center; gap: 4px; color: var(--Text-Grey-Title, #232222); }
.qna-comment-card-author .is-admin { color: var(--Text-Blue-Main, #0097D5); }
.qna-comment-card-date { color: var(--Text-Grey-500, #6E6E6E); }
.qna-comment-card-updated { color: var(--Text-Grey-500, #6E6E6E); font-size: 14px; }
.qna-comment-card-line { width: 1px; height: 16px; background: var(--Fill-Grey-300, #A8A8A8); }
.qna-comment-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qna-comment-card-body { white-space: pre-wrap; word-break: break-word; }

/* 6. 댓글 인라인 수정 */
.qna-comment-edit-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; align-self: stretch; }
.qna-comment-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ════════════════════════════════════════════════════════════
 * Tabs
 * 구조: .page-content-tab > .page-content-tab-button
 *         > .tab-button-text + .tab-button-line
 * 활성: .page-content-tab-button.active
 * 패널: .tab-pane / .tab-pane.show
 * ════════════════════════════════════════════════════════════ */

/* 탭 네비게이션 컨테이너 */
.page-content-tab {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
}

/* 탭 버튼 베이스 */
.page-content-tab-button {
    display: flex;
    min-width: 96px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family, 'Noto Sans');
    font-size: var(--Font-Size-16, 16px);
    font-style: normal;
    font-weight: var(--Font-Weight-Medium, 500);
    line-height: var(--LIne-Height-24, 24px); /* 150% */
    letter-spacing: -0.4px;
}

/* 탭 텍스트 영역 */
.tab-button-text {
    display: flex;
    padding: 8px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 탭 하단 활성 인디케이터 선 */
.tab-button-line {
    height: 2px;
    align-self: stretch;
}

/* hover 상태 */
.page-content-tab-button:hover {
    color: var(--Text-Blue-300, #66C1E6);
}
.page-content-tab-button:hover .tab-button-line {
    background: var(--Fill-Primary-300, #66C1E6);
}

/* 활성 상태 */
.page-content-tab-button.active {
    color: var(--Text-Blue-Main, #0097D5);
}
.page-content-tab-button.active .tab-button-line {
    background: var(--Fill-Primary-Main, #0097D5);
}

/* 폴더형 탭(.page-content-tab--folder) — Figma TabarButton(2026-10-12, 프로젝트 상세).
   기본: Medium 16 · Text/Grey/Main, 배경·테두리 없음 / 활성: 흰 배경 + 좌·우·상단 테두리(radius 8 8 0 0) · Bold 16 Primary.
   아래 콘텐츠 카드 테두리와 1px 겹쳐(활성 탭이 카드에 붙음) 폴더 탭처럼 보인다. */
.page-content-tab.page-content-tab--folder {
    gap: 10px;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}
.page-content-tab--folder .page-content-tab-button {
    min-width: 90px;
    padding: 8px 20px 10px;
    gap: 0;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--Text-Grey-Main, #111);
    font-weight: var(--Font-Weight-Medium, 500);
    white-space: nowrap;
}
.page-content-tab--folder .tab-button-text { padding: 0; }
.page-content-tab--folder .tab-button-line { display: none; }
.page-content-tab--folder .page-content-tab-button:hover { color: var(--Text-Grey-Main, #111); }
.page-content-tab--folder .page-content-tab-button.active {
    background: var(--Fill-White, #FFF);
    border-color: var(--Fill-CoolGrey-200, #E5E7EB);
    color: var(--Text-Primary-Main, #1769E0);
    font-weight: var(--Font-Weight-Bold, 700);
}

/* 탭 패널 */
.tab-pane {
    display: none;
}
.tab-pane.show {
    display: block;
}

/* 돌아가기 버튼 */
.back-div-container {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.back-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    gap: 4px;

    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 135%; /* 18.9px */
    letter-spacing: -0.35px;
}

.back-div:hover {
    color: var(--Text-Blue-Main, #0097D5);
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-group-control.custom-select .select-selected.input-select {
  padding: 6px 8px;
  height: 34px;
}

.form-group-control.custom-select.input-select {
  height: 34px;
}

.input-search-cell {
  padding: unset;
  min-height: 34px;
}

.modal-footer>* {
  margin: unset;
}

.modal-body td:has(input[type="radio"]) {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-body input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;
    border: 2px solid var(--Fill-Grey-200, #C5C5C5);;   /* 기본(미체크) 테두리 */
    background: #fff;          /* 기본 배경 */
    border-radius: 50%;
    cursor: pointer;
}

.modal-body input[type="radio"]:checked {
    border-color: var(--Fill-Primary-Main, #0097D5);;
    background: #fff;
}

.modal-body input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 3px;
    border-radius: 50%;
    background: var(--Fill-Primary-Main, #0097D5);
}

.text-right {
  text-align: right;
}

.form-group-control.custom-select .input-select .select-text {
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: var(--Font-Weight-Regular, 400);
  line-height: var(--LIne-Height-22, 22px); /* 157.143% */
  letter-spacing: -0.35px;
}

/* ════════════════════════════════════════════════════════════
 * 마스터 데이터 공용 폼/검색 (trade_parties·suppliers·products·managers·partners 공유)
 *   - 목록 검색바 / 상단 액션바(Back+버튼) / 섹션 타이틀 / 전화번호 셀
 *   - legacy 는 페이지별 CSS 로 중복 정의했으나(동일 UI·다른 위치) 공통으로 승격.
 *     (conventions §8: 동일 UI 는 공통 CSS 재사용, 클래스명 중복 금지)
 * ════════════════════════════════════════════════════════════ */

/* ── 목록 검색바 (라벨 + 인풋 그룹 가로 배치) ─────────────────── */
.trader-search-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trader-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}
.trader-search-label {
  width: 160px;
  color: var(--Text-Grey-800, #2E2E2E);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.trader-search-input { flex: 1; }
/* trader-search-form 내 날짜 범위(from ~ to) — 두 date input 이 남은 폭을 균등 분할 */
.trader-search-form .custom-date-input { flex: 1; min-width: 0; }

/* 표 셀 내 버튼 그룹 가운데 정렬(gap 8px) — data-table 액션 셀 공용 */
.cell-actions-center { display: flex; justify-content: center; gap: 8px; }

/* ── 폼 페이지 본문 세로 간격(상단 액션바 ↔ 카드, 카드 간) — 마스터 데이터 폼 공용 ──
   기본 .page-body 는 gap:0(목록은 .section-gap-* 스페이서 사용). 폼 페이지는 이 modifier 로 16px. */
/* .page-body--form { gap: 16px; } */

/* ── 상단 액션 바 (Back to List + 버튼 그룹) ──────────────────── */
.trader-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* '목록으로' 링크 제거(헤더 경로로 대체) 후 액션 묶음만 남은 바 — 기존처럼 오른쪽 정렬 */
.trader-topbar > :only-child { margin-left: auto; }
.trader-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 폼 섹션 타이틀 ("Basic information" 등) ──────────────────── */
.trader-section-heading {
  color: var(--Text-Grey-Title, #232222);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-18, 18px);
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--LIne-Height-24, 24px);
  letter-spacing: -0.45px;
  margin-bottom: unset;
}

/* ── 전화번호 셀 (국가코드 콤보 + 번호 인풋 나란히) ───────────── */
.phone-cell-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.phone-cell-wrap .country-select--cell {
  width: 50%;
  flex-shrink: 0;
  border-right: 1px solid var(--Fill-CoolGrey-300, #D1D5E0) !important;
}
.phone-cell-wrap .cell-ctrl {
  flex: 1;
  min-width: 0;
}

.title-link {
  color: var(--Fill-Primary-Main, #0097D5) !important;
  text-decoration: underline;
  transition: color 0.15s;
}
/* ── 상품 정보 스프레드시트 그리드(공용, product_grid.js) ───────────── */
/* 엑셀형 그리드라인: 모든 셀(헤더 포함) 테두리(border-collapse 라 단일선으로 병합). */
.data-table.pg-grid thead th,
.data-table.pg-grid tbody td {
  border: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
}
/* 셀 = 필드가 꽉 채우도록 td 패딩 제거(그리드라인이 셀 경계) */
.data-table.pg-grid tbody td {
  padding: 0;
  background-clip: padding-box;   /* 선택 배경이 테두리를 덮지 않도록 */
}
/* tbl-input-cell 래퍼 스타일 전부 제거(높이·패딩·gap·테두리·배경) */
.data-table.pg-grid .tbl-input-cell {
  display: block;
  height: auto;
  padding: 0;
  gap: 0;
  border: 0;
  background: none;
}
/* 필드: border·border-radius 제거(투명 테두리로 자리만 유지 → focus 시 파랑) · 배경 투명(선택 회색 노출) */
.data-table.pg-grid .tbl-input-cell-field {
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
}
/* 셀 focus 시 파란 테두리 */
.data-table.pg-grid .tbl-input-cell-field:focus:not(.is-readonly) {
  border: 1px solid var(--Fill-Primary-Main, #0097D5);
}
/* 읽기전용(총수량·총금액)은 엑셀 계산셀처럼 회색 유지 */
.data-table.pg-grid .tbl-input-cell-field.is-readonly {
  background: var(--Fill-Grey-100, #E2E2E2);
}
/* 여러 셀 선택 시 기준셀(anchor) 제외 나머지 = 엑셀처럼 회색 배경 */
.data-table.pg-grid td.pg-cell-sel {
  background: var(--Fill-Grey-100, #E2E2E2);
}
/* 통화 셀(custom-select)도 다른 셀처럼 테두리·둥근모서리 제거 + 배경 투명(선택 회색 노출) */
.data-table.pg-grid .form-group-control.custom-select .select-selected {
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  outline: none;
}
/* 통화 셀 focus 시 파란 테두리(다른 셀과 동일) */
.data-table.pg-grid .form-group-control.custom-select .select-selected:focus {
  border: 1px solid var(--Fill-Primary-Main, #0097D5);
}
/* 통화 드롭다운 키보드 하이라이트 옵션 */
.data-table.pg-grid .form-group-control.custom-select .select-items div.pg-opt-hi {
  background: var(--Fill-Primary-Soft, rgba(0, 151, 213, 0.12));
}
/* 이미지 셀 버튼도 배경 투명(선택 회색 노출) */
.data-table.pg-grid .image-cell-btn,
.data-table.pg-grid .pt-img-btn {
  background: transparent;
}
/* 스프레드시트 표는 행 호버 배경 없음(엑셀 셀 단위 하이라이트만) */
.data-table.pg-grid tbody tr:not(:has(td.empty-cell)):hover {
  background: transparent;
}

/* ══════════ 별점 위젯(평가/리뷰 공용 · common) ══════════ */
/* Material Symbols 가변폰트 FILL 축(0..1)으로 채움 — 채워진 별은 글리프 'star'+FILL 1(금색),
   빈 별은 'star'+FILL 0(회색 외곽선), 반별은 'star_half'+FILL 1. (star_border 는 Symbols 에 없음) */
.star-rating { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.star-rating .star-ic {
    font-family: 'Material Symbols Outlined';
    font-size: 20px; line-height: 1; color: var(--Fill-Warning, #F6A609);
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    -webkit-user-select: none; user-select: none;
}
.star-rating .star-ic.is-full,
.star-rating .star-ic.is-half { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; color: #F8C652; }
.star-rating .star-ic.is-empty { color: var(--Fill-CoolGrey-300, #D1D5DB); }
.star-rating--input .star-ic { cursor: pointer; font-size: 28px; }
.star-rating--display .star-ic { font-size: 18px; }
.star-val { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--Fill-CoolGrey-700, #4B5563); }

/* ── 상세·등록 카드 머리(공통, 2026-10-20 — Figma 상품 상세 12217:93400) ──
   카드 padding 24/24/40 · radius 20 · 머리(제목 Bold 18 #111 + 오른쪽 버튼 Small, 간격 10) ↔ 16 ↔ 내용.
   삭제 = .btn-red-line · 수정 = .btn-white(Figma). 적용: 상품 상세·등록·수정, 협력사·담당자 상세.
   마크업: <div class="content-card detail-card"><div class="detail-card-head"><h2 class="detail-card-title">…</h2>
           <div class="detail-card-actions">버튼…</div></div> … </div> */
.content-card.detail-card { padding: 24px 24px 40px; gap: 16px; border-radius: 20px; }
.detail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.detail-card-title {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-18, 18px); font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px); letter-spacing: -0.45px;
}
.detail-card-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── 이미지 고르기 칸(공통, 2026-10-20 — Figma 상품 등록/수정 12217:94948 · 12217:93437) ──
   썸네일 또는 자리 표시(체크 무늬 images/image_placeholder.png) 위에 마우스를 올리면(또는 키보드 포커스)
   20% 어둡게 + 가운데 흰 원(padding 10) + 아이콘 24. 덮는 층은 클릭을 막지 않음(클릭 = 페이지의 업로드 모달).
   마크업: <div class="image-pick 페이지클래스"><img …><span class="image-pick-dim"><span class="image-pick-btn"><span class="icon">add_2</span></span></span></div>
   크기·모서리는 페이지 클래스가 img 에 지정. img 가 숨으면(display:none) 칸도 크기 0 — 자리를 차지하지 않음. */
.image-pick { position: relative; display: block; width: fit-content; max-width: 100%; overflow: hidden; cursor: pointer; }
.image-pick > img { display: block; max-width: 100%; }
.image-pick-dim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.image-pick:hover .image-pick-dim,
.image-pick:focus-visible .image-pick-dim { opacity: 1; }
.image-pick:focus-visible { outline: 2px solid var(--Fill-Primary-Main, #1769E0); outline-offset: 2px; }
.image-pick-btn {
  display: inline-flex; padding: 10px; border-radius: 999px;
  background: var(--Fill-White, #FFF); color: var(--Text-Grey-800, #2E2E2E);
}
.image-pick-btn .icon { font-size: 24px; }

/* ── 이미지 업로드 모달(공통, 2026-10-20) — 현재 | 새 이미지 2열 ──
   상품 이미지·계정 정보 날인·협력사 날인 업로드 모달이 같은 모양을 쓴다(종전 products/form.css·mypage.css 사본 통합).
   마크업: .modal-body.img-modal-body > (.img-modal-current > 제목·.img-modal-current-preview·.img-modal-filename-wrap) +
           (div > 제목·.img-modal-new-upload·.img-modal-filename-wrap·.img-modal-format-hint).
   날인 업로드 틀은 .modal-dialog--figma + .stamp-upload-dialog(적용 버튼 120). */
.stamp-upload-dialog > .modal-footer .btn-common { width: 120px; }
.img-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.img-modal-body > div { min-width: 0; }
.img-modal-current { display: flex; flex-direction: column; min-width: 0; }

.img-modal-section-title {
  color: var(--Text-Grey-800, #2E2E2E);
  font-weight: 500;
  margin-bottom: 8px;
}

.img-modal-current-preview {
  width: 100%;
  aspect-ratio: 1;
  max-height: 146px;
  background: var(--Fill-CoolGrey-50, #F8FAFE);
  border: 1px solid var(--Fill-Grey-100, #E2E2E2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 8px;
}
.img-modal-current-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-modal-current-preview.has-image { background: #fff; border: 1px solid var(--Fill-Grey-300, #A8A8A8); }
.img-modal-no-current { color: var(--Text-Grey-400, #ABABAB); font-size: 13px; }

.img-modal-filename-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--Fill-Grey-300, #A8A8A8);
  border-radius: 4px;
  background: var(--Fill-White, #FFF);
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}
.img-modal-filename-wrap .filename-text {
  min-width: 0;
  flex: 1;
  font-size: 14px;
  color: var(--Text-Grey-800, #2E2E2E);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-modal-new-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-height: 146px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px dashed var(--Fill-Grey-300, #A8A8A8);
  background: var(--Fill-White, #FFF);
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.img-modal-new-upload:hover { border-color: var(--Fill-Grey-500, #6E6E6E); }
.img-modal-new-upload.has-file { border: 1px solid var(--Fill-Grey-300, #A8A8A8); }
.img-modal-new-upload img { max-width: 90%; max-height: 90%; object-fit: contain; }
.img-modal-new-upload .upload-icon { color: var(--Text-Grey-300, #C8C8C8); }
.img-modal-new-upload .upload-text { font-size: 14px; color: var(--Text-Grey-600, #6E6E6E); }
.img-modal-format-hint { color: var(--Text-Grey-500, #6E6E6E); text-align: left; }

/* ── 평점/리뷰 2열 보드(공통) — Figma 11868:77169(프로젝트 상세 평점/리뷰 탭) ──
   프로젝트 상세(받은 평가 | 내가 작성한 평가)·계정 정보(호스트 평점 | 게스트 평점)가 같은 모양을 쓴다.
   2열(간격 40) · 열 = 머리(제목 Bold 18 + ★ 평균 Medium 16 + (건수) 14 #767676) ↔ 24 ↔ 카드 목록(간격 16).
   리뷰 카드 = Cool Grey 50 · radius 16 · padding 24 · 간격 8 · 회사명 Bold 16 · ★(#FDBA74, 24) 평점 · 내용 Medium 16 #505050 · 이미지 80(radius 8, 간격 10).
   빈 상태 = 높이 400 카드 가운데 문구. 마크업: .rv-cols.rv-board > .rv-col > (.rv-col-head, .rv-col-list > .rv-card | .rv-col-empty) */
.rv-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; width: 100%; }
.rv-board .rv-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rv-board .rv-col-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.rv-board .rv-col-title { margin: 0; color: var(--Text-Grey-Main, #111); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.45px; }
.rv-board .rv-score { display: flex; align-items: center; gap: 4px; color: var(--Text-Grey-Main, #111); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.4px; }
.rv-board .rv-star-ic { font-size: 24px; color: #FDBA74; font-variation-settings: 'FILL' 1; }
.rv-board .rv-score-count { color: var(--Text-Grey-Sub2, #767676); font-size: 14px; line-height: 22px; letter-spacing: -0.35px; }
.rv-board .rv-col-list { display: flex; flex-direction: column; gap: 16px; }
.rv-board .rv-card {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 24px;
  border: none; border-radius: 16px; background: var(--Fill-CoolGrey-50, #F8FAFC);
}
.rv-board .rv-card-head { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.rv-board .rv-card-name { min-width: 0; color: var(--Text-Grey-Main, #111); font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: -0.4px; word-break: break-all; }
.rv-board .rv-edited { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; background: var(--Fill-Grey-100, #F0F0F0); color: var(--Text-Grey-Sub2, #767676); font-size: 12px; line-height: 20px; }
.rv-board .rv-card-content { color: var(--Text-Grey-Sub, #505050); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.4px; white-space: pre-wrap; word-break: break-word; }
.rv-board .rv-img-list--view { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.rv-board .rv-img-list--view .rv-img-thumb {
  position: relative; width: 80px; height: 80px; overflow: hidden;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 8px;
}
.rv-board .rv-img-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-board .rv-img-thumb img[data-zoom] { cursor: zoom-in; }
.rv-board .rv-col-empty {
  display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 24px;
  border-radius: 16px; background: var(--Fill-CoolGrey-50, #F8FAFC);
  color: var(--Text-Grey-Sub, #505050); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.4px; text-align: center;
}
@media (max-width: 1024px) { .rv-board { grid-template-columns: 1fr; } }

/* ── 회사 인증 뱃지(공통) — Figma Badge 11878:148731(미인증)·148732(2차)·148733(1차) ──
   알약 padding 4/10 · radius 999 · Regular 12/20 · 아이콘 없음.
   미인증·미보유 = Cool Grey 50 + #111 / 1차 = Green 50 + Green 500 / 2차·데이터 수집 업체 = Primary 50 + Primary.
   여러 개는 .cert-badges(사이 6)로 묶는다 — 마크업은 app/templates/_cert_badges.html(cert_badges 매크로)·
   project/detail.html _certPill·mypage 내 인증 현황 certBadge 가 같은 클래스를 쓴다. */
/* 기본은 한 줄(flex: none). 좁은 표 칸(신청 목록 신청업체)은 project_detail.css 가 줄바꿈을 허용 */
.cert-badges { display: inline-flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 6px; vertical-align: middle; }
:is(h2, h3, .detail-col-title) > .cert-badges { margin-left: 10px; }   /* 제목 옆 — 회사명과 간격 10(Figma) */
.cert-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 4px 10px; border-radius: 999px;
  background: var(--Fill-CoolGrey-50, #F8FAFC); color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-12, 12px); font-weight: var(--Font-Weight-Regular, 400);
  line-height: 20px; letter-spacing: -0.3px; white-space: nowrap; vertical-align: middle; cursor: default;
}
.cert-badge--l1 { background: var(--Fill-Green-50, #ECFDF5); color: var(--Text-Green-500, #34D399); }
.cert-badge--l2,
.cert-badge--dc { background: var(--Fill-Primary-50, #EFF6FF); color: var(--Text-Primary-Main, #1769E0); }
/* 인증 단계 변경 모달 — custom-select 드롭다운이 modal-body(overflow) 밖으로 펼쳐지게 */
#cert-change-modal .modal-body, #cert-change-modal .modal-dialog { overflow: visible; }
/* 인증 단계 밑 데이터 수집 협력업체 체크 — 체크박스 24 ↔ 8 ↔ 라벨 Medium 16, 상태가 섞이면 아래 안내 14 */
#cert-change-modal .cert-change-dc { margin-top: 16px; }
/* 사용자 관리 목록 인증 단계 — '2차 인증 / 데이터 수집 협력업체 인증' 은 줄바꿈 허용(말줄임 대신) */
#user-table td.user-cert-cell { white-space: normal; word-break: keep-all; }
/* 인증 로그 모달(사용자 관리) — 공통 Figma 모달 + 바깥 테두리 없는 목록 표. 변경 전·후는 줄바꿈, 열 너비 = 일시 190 · 처리자 240 · 나머지 균등.
   하단 닫기 버튼 가운데 120 */
#cert-log-modal td.user-cert-cell { white-space: normal; word-break: keep-all; }
#cert-log-modal .cert-log-table col.cert-log-col-time { width: 190px; }
#cert-log-modal .cert-log-table col.cert-log-col-actor { width: 240px; }
.modal-dialog--figma.cert-log-dialog > .modal-footer { justify-content: center; }
.modal-dialog--figma.cert-log-dialog > .modal-footer .btn-common { width: 120px; }
#cert-change-modal .cert-change-dc-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--Text-Grey-Main, #111); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.4px; }
#cert-change-modal .cert-change-dc-hint { margin: 6px 0 0; color: var(--Text-Grey-Sub, #505050); font-size: 14px; line-height: 22px; letter-spacing: -0.35px; }
#cert-change-modal .cert-change-dc-hint.is-hidden { display: none; }
/* ── 파일 업로드(공통) — Figma FileInput(6038:5418) ─────────────────────────
   클릭 박스(CoolGrey100 · radius 4 · padding 8) + 숨김 input.file-input + 아래 안내(.file-upload-hint, Regular 14 #505050).
   상태(박스 클래스): 기본 / :hover(CoolGrey200) / .is-loading / .is-filled / .is-error / .is-disabled(Grey100).
     기본·hover·disabled : upload_file 24 + '파일을 선택해주세요.'(Regular 14 · #767676 / hover #505050 / disabled #999)
     loading·filled·error : 상태 아이콘 24(진행 / check_circle Primary / cancel Error) + 파일명(Medium 14 #111, error #DC2626)
                            + 오른쪽 버튼(error 는 다시 선택 refresh + 삭제 close_small, 나머지는 삭제)
   상태 전환은 window.TaolFileBox.set(box, state, fileName)(js/shared/file_box.js). 마크업:
     <div class="file-upload-box" role="button" tabindex="0">
       <span class="icon file-upload-ic">upload_file</span>
       <span class="file-upload-name" data-placeholder="…">…</span>
       <span class="file-upload-actions">
         <button type="button" class="file-upload-act file-upload-retry"><span class="icon">refresh</span></button>
         <button type="button" class="file-upload-act file-upload-remove"><span class="icon">close_small</span></button>
       </span>
     </div>
   (아이콘·버튼이 없는 기존 마크업 — 가이드·계정 정보 인증 서류 — 도 박스·글자 모양은 그대로 적용) */
.file-upload-box {
  width: 100%;
  display: flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 8px;
  border-radius: 4px; background: var(--Fill-CoolGrey-100, #F1F5F9); cursor: pointer;
  transition: background 0.15s;
}
.file-upload-box:hover { background: var(--Fill-CoolGrey-200, #E5E7EB); }
.file-upload-box:focus-visible { outline: 2px solid var(--Fill-Primary-Main, #1769E0); outline-offset: 1px; }
.file-upload-ic {
  flex: 0 0 auto; font-size: 24px; width: 24px; height: 24px;
  color: var(--Text-Grey-Sub, #505050);
}
.file-upload-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--Text-Grey-Sub2, #767676);
  font-size: var(--Font-Size-14, 14px); font-weight: var(--Font-Weight-Regular, 400);
  line-height: 22px; letter-spacing: -0.35px;
}
.file-upload-box:hover .file-upload-name { color: var(--Text-Grey-Sub, #505050); }
.file-upload-name.has-file,
.file-upload-box:is(.is-loading, .is-filled) .file-upload-name {
  color: var(--Text-Grey-Main, #111); font-weight: var(--Font-Weight-Medium, 500);
}
/* 파일이 있는 상태: 상태 아이콘 + 파일명 + 오른쪽 버튼(박스 색 고정) */
.file-upload-box:is(.is-loading, .is-filled, .is-error) { gap: 8px; cursor: default; }
.file-upload-box:is(.is-loading, .is-filled, .is-error):hover { background: var(--Fill-CoolGrey-100, #F1F5F9); }
.file-upload-box.is-filled .file-upload-ic { color: var(--Fill-Primary-Main, #1769E0); font-variation-settings: 'FILL' 0; }
.file-upload-box.is-loading .file-upload-ic { color: var(--Text-Grey-Main, #111); animation: file-upload-spin 0.9s linear infinite; }
.file-upload-box.is-error .file-upload-ic,
.file-upload-box.is-error .file-upload-name { color: var(--Text-Error, #DC2626); }
.file-upload-box.is-error .file-upload-name { font-weight: var(--Font-Weight-Medium, 500); }
@keyframes file-upload-spin { to { transform: rotate(360deg); } }
.file-upload-actions { display: none; align-items: center; gap: 4px; flex: 0 0 auto; }
.file-upload-box:is(.is-loading, .is-filled, .is-error) .file-upload-actions { display: inline-flex; }
.file-upload-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--Text-Grey-Main, #111);
}
.file-upload-act .icon { font-size: 24px; }
.file-upload-retry { display: none; }
.file-upload-box.is-error .file-upload-retry { display: inline-flex; }
/* 비활성 */
.file-upload-box.is-disabled,
.file-upload-box.is-disabled:hover { background: var(--Fill-Grey-100, #E2E2E2); cursor: not-allowed; }
.file-upload-box.is-disabled :is(.file-upload-ic, .file-upload-name) { color: var(--Text-Grey-Disabled, #999); }
.file-input { display: none; }
/* 아래 안내 — Regular 14 #505050 · 오류 #DC2626 · 비활성 #999 */
.file-upload-hint {
  margin: 10px 0 0;
  color: var(--Text-Grey-Sub, #505050);
  font-size: var(--Font-Size-14, 14px); font-weight: var(--Font-Weight-Regular, 400);
  line-height: 22px; letter-spacing: -0.35px;
}
.file-upload-hint.is-error { color: var(--Text-Error, #DC2626); }
.file-upload-box.is-disabled + .file-input + .file-upload-hint { color: var(--Text-Grey-Disabled, #999); }
/* ── 인증 신청 모달 — Figma 인증신청(11966:89763) ────────────────────────────
   공용 게이트(_cert_gate_modal)·계정 정보 인증 탭 신청 모달 공통(.modal-dialog--figma 와 함께).
   500 · padding 24/24/32 · radius 20 · 머리(제목 + 안내) ↔ 40 ↔ 본문(항목 간격 24) ↔ 40 ↔ 버튼(120 · 간격 8) */
.modal-dialog.modal-dialog--figma.cert-apply-dialog { width: 500px; max-width: calc(100vw - 32px); gap: 40px; overflow: visible; }
.cert-apply-dialog .is-hidden { display: none !important; }
.cert-apply-head { display: flex; flex-direction: column; gap: 10px; }
.cert-apply-head > .modal-header { padding: 0; display: flex; align-items: center; justify-content: space-between; }
.cert-apply-title {
  color: var(--Text-Grey-Main, #111);
  font-size: 20px; font-weight: var(--Font-Weight-Bold, 700); line-height: 30px; letter-spacing: -0.5px;
}
.cert-apply-desc {
  margin: 0; white-space: pre-line;
  color: var(--Text-Grey-Sub, #505050);
  font-size: 16px; font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px;
}
.cert-apply-dialog > .modal-body.cert-apply-body { display: flex; flex-direction: column; gap: 24px; overflow: visible; }
/* 항목 = 라벨(Medium 16) ↔ 10 ↔ 입력 ↔ 10 ↔ 안내(Regular 14 #505050) */
.cert-apply-field { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cert-apply-label {
  color: var(--Text-Grey-Main, #111);
  font-size: 16px; font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px;
}
.cert-apply-hint {
  margin: 0; color: var(--Text-Grey-Sub, #505050);
  font-size: 14px; font-weight: var(--Font-Weight-Regular, 400); line-height: 22px; letter-spacing: -0.35px;
}
/* 파일 박스 — Cool Grey 100 · radius 4 · padding 8 · 아이콘 24 ↔ 4 ↔ 문구(Regular 14 #505050) */
.cert-apply-dialog .cert-apply-filebox {
  min-height: 0; padding: 8px; gap: 4px; border-radius: 4px;
  background: var(--Fill-CoolGrey-100, #F1F5F9);
}
.cert-apply-dialog .cert-apply-filebox .file-upload-name {
  color: var(--Text-Grey-Sub, #505050);
  font-size: 14px; font-weight: var(--Font-Weight-Regular, 400); line-height: 22px; letter-spacing: -0.35px;
}
.cert-apply-dialog .cert-apply-filebox .file-upload-name.has-file { color: var(--Text-Grey-Main, #111); }
/* 데이터 수집 협력업체 — 체크 24 ↔ 8 ↔ 문구(Medium 16) */
.cert-apply-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; align-self: flex-start;
  color: var(--Text-Grey-Main, #111);
  font-size: 16px; font-weight: var(--Font-Weight-Medium, 500); line-height: 24px; letter-spacing: -0.4px;
}
.cert-apply-code .form-group-control { height: 40px; border-radius: 10px; }
.cert-apply-code .form-group-control::placeholder { color: var(--Text-Grey-Sub2, #767676); font-weight: var(--Font-Weight-Regular, 400); }
.cert-apply-dialog .form-group-control.custom-select .select-selected { border-radius: 10px; }
/* 버튼 — 가운데 · 120 · 간격 8 (높이·글자는 공통 .modal-dialog--figma 푸터) */
.cert-apply-dialog > .modal-footer.cert-apply-foot { padding: 0; justify-content: center; gap: 8px; }
.cert-apply-dialog > .modal-footer.cert-apply-foot .btn-common { width: 120px; }

.existing-file-box {
  width: 100%;
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--Fill-Grey-300, #d0d5dd); border-radius: 6px; background: var(--Fill-CoolGrey-100, #F4F6FA);
}
.existing-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--Text-Grey-800, #2E2E2E); }

/* ════════════════════════════════════════════════════════════
 * 공급업체 협력사 연결 — 상태 아이콘 + 미연결 정리 모달
 * (상품 입력 화면 공용: js/shared/supplier_link.js, templates/shared/supplier_link_modal.html)
 * ════════════════════════════════════════════════════════════ */
/* 공급업체 칸 상태 아이콘: 검색/해제 아이콘(우측 6~24px) 왼쪽에 배치 */
.supplier-link-cell { position: relative; }
.supplier-link-state {
  display: none;
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  cursor: default;
}
.supplier-link-cell.is-linked .supplier-link-state   { display: inline-flex; color: var(--Fill-Primary-Main, #0097D5); }
.supplier-link-cell.is-unlinked .supplier-link-state { display: inline-flex; color: var(--Text-Grey-400, #8B8B8B); }
.supplier-link-cell.is-linked input[type="text"],
.supplier-link-cell.is-unlinked input[type="text"] { padding-right: 52px; }

/* 정리 모달 */
.supplier-link-intro { margin: 0; color: var(--Text-Grey-600, #585858); }
.supplier-link-col-name   { width: 32%; }
.supplier-link-col-count  { width: 90px; }
.supplier-link-col-result { width: 30%; }
.supplier-link-col-action { width: 260px; }
.supplier-link-col-label  { width: 140px; }
.supplier-link-table tr.is-active td { background: var(--Fill-Primary-50, #E6F5FB); }
.supplier-link-count { text-align: center; }
.supplier-link-hint { color: var(--Text-Orange-500, #E37739); font-size: 12px; margin-top: 2px; }
.supplier-link-result { color: var(--Text-Grey-400, #8B8B8B); }
.supplier-link-result.is-chosen { color: var(--Fill-Primary-Main, #0097D5); font-weight: 600; }
.supplier-link-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.supplier-link-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--Fill-CoolGrey-300, #D1D5E0);
  border-radius: 8px;
  background: var(--Fill-CoolGrey-100, #F4F6FA);
}
.supplier-link-panel[hidden] { display: none; }
.supplier-link-panel-title { color: var(--Text-Grey-900, #1A1A1A); }
.supplier-link-panel .supplier-link-hint { color: var(--Text-Grey-500, #6E6E6E); margin: 0; }
.supplier-link-pick-wrap { max-height: 260px; overflow-y: auto; background: var(--Fill-White, #FFF); }
.supplier-link-pick-row { cursor: pointer; }
.supplier-link-pick-row:hover td { background: var(--Fill-Primary-50, #E6F5FB); }
.supplier-link-panel-actions { display: flex; justify-content: flex-end; gap: 8px; }


/* ════════════════════════════════════════════════════════════
 * 목록 페이지 — 검색 카드 + 목록 카드 (Figma 'Taol GLMS 작업' 목록 node 11736:279211, 2026-10-12)
 *  - 검색 카드 = 검색 영역(.search-bar / 검색 항목이 든 .trader-search-row)을 가진 .content-card
 *  - 목록 카드 = 페이지네이션(.pagination-wrap)을 바로 가진 .content-card
 *  템플릿 수정 없이 구조(:has)로 범위를 잡는다 — 상세·모달·입력 표(.data-table)는 영향 없음.
 * ════════════════════════════════════════════════════════════ */

/* ── 카드 공통: 흰 배경 · 테두리 Cool Grey 200 · radius 20 ── */
.content-card:has(> .search-bar),
.content-card:has(> .trader-search-row > .trader-search-form),
.content-card:has(> .pagination-wrap) {
  align-items: stretch;
  gap: 24px;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  border-radius: 20px;
  background: var(--Background-BGWhite, #FFF);
}

/* 검색 카드 padding 24 / 목록 카드 padding 24 24 56 */
.content-card:has(> .search-bar),
.content-card:has(> .trader-search-row > .trader-search-form) { padding: 24px; }
.content-card:has(> .pagination-wrap) { padding: 24px 24px 56px; }

/* 검색 카드 ↔ 목록 카드 간격 24 */
.content-card:has(> .search-bar) + .section-gap-1,
.content-card:has(> .trader-search-row > .trader-search-form) + .section-gap-1 { margin-top: 24px; }

/* ── 검색 영역: 3열 그리드(칸 간격 16) · 라벨 160 · 컨트롤 높이 40 / radius 10 ── */
.content-card > .trader-search-row:has(> .trader-search-form) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.content-card > .trader-search-row > .trader-search-form { min-width: 0; }

:is(.search-bar, .trader-search-row) :is(.search-label, .trader-search-label) {
  width: 160px;
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}

:is(.search-bar, .trader-search-row) .form-group-control:not(.custom-select),
:is(.search-bar, .trader-search-row) .form-group-control.custom-select .select-selected,
:is(.search-bar, .trader-search-row) .country-select--search .select-selected {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  border-radius: 10px;
  background: var(--Fill-White, #FFF);
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
/* 선택칸 래퍼는 안쪽 선택 영역(40)과 같은 높이 — 래퍼 기본 48 이면 같은 줄 입력칸(40)과 위아래가 어긋남(예: 결제 플랜 입력 행) */
:is(.search-bar, .trader-search-row) .form-group-control.custom-select { height: 40px; align-self: center; }
/* hover·focus — 위 테두리 지정이 공통 hover/focus 보다 강하므로 같은 값으로 다시 지정
   (입력칸·국가 선택 hover = 공통 입력칸 Grey 500 / 선택칸 hover·열림 = 공통 custom-select #111) */
:is(.search-bar, .trader-search-row) .form-group-control:not(.custom-select):hover,
:is(.search-bar, .trader-search-row) .country-select--search .select-selected:hover {
  border-color: var(--Fill-Grey-500, #6E6E6E);
}
:is(.search-bar, .trader-search-row) .form-group-control.custom-select .select-selected:hover,
:is(.search-bar, .trader-search-row) .form-group-control.custom-select .select-selected:focus-visible,
:is(.search-bar, .trader-search-row) .form-group-control.custom-select .select-selected.select-arrow-active {
  border-color: var(--Fill-Grey-800, #111);
  outline: none;
}
:is(.search-bar, .trader-search-row) .form-group-control:not(.custom-select):focus,
:is(.search-bar, .trader-search-row) .country-select--search .select-selected:focus-within {
  border-color: var(--Fill-Grey-800, #111);
  outline: none;
}
/* 선택값(전체 등) — Medium 16 · Text/Grey/Main */
:is(.search-bar, .trader-search-row) .form-group-control.custom-select .select-text,
:is(.search-bar, .trader-search-row) .country-select--search .country-search-input {
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
}
/* placeholder(내용을 작성해주세요. / 전체) — Regular 16 · Text/Grey/Sub2 */
:is(.search-bar, .trader-search-row) .form-group-control::placeholder,
:is(.search-bar, .trader-search-row) .country-search-input::placeholder {
  color: var(--Text-Grey-Sub2, #767676);
  font-weight: var(--Font-Weight-Regular, 400);
}
:is(.search-bar, .trader-search-row) .select-arrow { color: var(--Text-Grey-Main, #111); }

/* ── 검색 버튼(초기화 · 검색): 높이 48 · padding 12/16 · radius 10 · Bold 16 ── */
.content-card:has(> .search-bar) .search-actions .btn-common,
.content-card:has(> .trader-search-row > .trader-search-form) > .search-actions .btn-common {
  height: 48px;
  min-width: 70px;
  padding: 12px 16px;
  gap: 4px;
  border-radius: 10px;
  font-size: var(--Font-Size-16, 16px);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
.content-card:has(> .search-bar) .search-actions .btn-white .icon,
.content-card:has(> .trader-search-row > .trader-search-form) > .search-actions .btn-white .icon {
  color: var(--Text-Grey-Main, #111);
}

/* ── 목록 카드: 제목(Bold 18) ↔ 표 24 · 표 ↔ 페이지네이션 36 ──
   .list-section = 카드 안의 '표 + 페이지네이션' 묶음(한 카드에 표가 여러 개일 때, 예: 인벤토리 호스트/게스트 상품).
   목록 카드와 같은 표·페이지네이션 규칙을 쓴다. */
.list-section { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
.content-card:has(> .pagination-wrap) .table-section-title {
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-18, 18px);
  font-weight: var(--Font-Weight-Bold, 700);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-18, -0.45px);
}
:is(.content-card:has(> .pagination-wrap), .list-section) > .pagination-wrap { margin: 12px 0 0; }

/* 표: 바깥 테두리 Cool Grey 200 · radius 4 */
:is(.content-card:has(> .pagination-wrap), .list-section) > .table-wrapper {
  border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
  border-radius: 4px;
}
/* 헤더: Cool Grey 100 · padding 16 · Medium 16 · Text/Grey/Main */
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table thead tr {
  background: var(--Fill-CoolGrey-100, #F1F5F9);
  border-top: none;
  border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table thead th {
  padding: 16px;
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
/* 행: 높이 56(padding 16 + 24) · 아래 구분선 Cool Grey 200 · Medium 16 */
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table tbody tr {
  border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB);
}
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table tbody tr:last-child { border-bottom: none; }
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table tbody td {
  padding: 16px;
  color: var(--Text-Grey-Main, #111);
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: var(--Line-Height-24, 24px);
  letter-spacing: var(--Letter-Spacing-16, -0.4px);
}
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table tbody tr:not(:has(td.empty-cell)):hover {
  background: var(--Fill-CoolGrey-50, #F8FAFC);
}
/* 바깥 테두리 없는 목록 표(.list-section--plain, 예: Figma 모달 안 표) — 마지막 행도 아래 구분선 유지 */
.list-section.list-section--plain > .table-wrapper { border: none; border-radius: 0; }
.list-section.list-section--plain .data-table tbody tr:last-child { border-bottom: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); }
/* 행 hover 제거 — 클릭·수정 대상이 아닌 조회 전용 표(.data-table.no-hover, 예: 인벤토리) */
.data-table.no-hover tbody tr:not(:has(td.empty-cell)):hover,
:is(.content-card:has(> .pagination-wrap), .list-section) .data-table.no-hover tbody tr:not(:has(td.empty-cell)):hover {
  background: transparent;
}

/* ── 페이지네이션(전 화면 공통) — 숫자 Medium 12 · Text/Grey/Main, 이전·다음 chevron 24 ── */
.pagination .page-btn { color: var(--Text-Grey-Main, #111); }
.pagination .page-btn.is-active {
  border-color: var(--Fill-Primary-Main, #1769E0);
  color: var(--Text-Primary-Main, #1769E0);
}
.pagination .page-btn-nav {
  min-width: 32px;
  color: var(--Text-Grey-Main, #111);
}
.pagination .page-btn-nav .icon { font-size: 24px; }
/* 국가 검색 선택칸의 '전체'는 placeholder 로 표시되지만 Figma 상 선택값(Medium 16 · #111)과 동일하게 */
:is(.search-bar, .trader-search-row) .country-select--search .country-search-input::placeholder {
  color: var(--Text-Grey-Main, #111);
  font-weight: var(--Font-Weight-Medium, 500);
}
/* 간격 보정 — 검색 줄끼리 16, 마지막 줄 ↔ 버튼 24(Figma) */
.content-card > .trader-search-row:has(> .trader-search-form) + .trader-search-row:has(> .trader-search-form) { margin-top: -8px; }
.content-card > .search-bar > .search-group:has(> .search-actions) { margin-top: 8px; }
/* 기간 검색(시작 ~ 종료): 날짜 필드 사이 16px(4 + "~" + 4) — 내 프로젝트 .search-date-range 와 동일.
   "~" 가 .search-form·.trader-search-form(gap 8) 직속 텍스트/span 이라 양옆 gap 을 -4px 로 상쇄 */
:is(.search-form, .trader-search-form) > .custom-date-input:has(+ .custom-date-input) { margin-right: -4px; }
:is(.search-form, .trader-search-form) > .custom-date-input + .custom-date-input { margin-left: -4px; }
:is(.search-form, .trader-search-form) > .custom-date-input + span:has(+ .custom-date-input) { margin: 0 -4px; }
/* 검색 항목 컨트롤은 칸 폭 안에서 줄어들도록 — 국가 선택 등이 내용 최소폭(≈252px) 때문에 좁은 화면(≈1440)에서
   옆 칸을 침범해 칸 간격 16 이 깨지던 문제. 내 프로젝트 반응형(.page-body--list) 의 flex/min-width 처리를 공통화 */
:is(.search-form, .trader-search-form) > :is(.cell-input-wrap, .input-wrapper, .form-group-control, .custom-select, .country-select, .custom-date-input, .trader-search-input) {
  flex: 1 1 0;
  min-width: 0;
}
/* 검색 카드 바로 다음에 목록 카드가 붙는 페이지(전자계약서·이메일 관리·인증 관리 등, hr.section-gap-1 없음)도 카드 간격 24 로 통일 */
.content-card:is(:has(> .search-bar), :has(> .trader-search-row > .trader-search-form)) + .content-card { margin-top: 24px; }

/* ─────────────────────────────────────────────────────────────
   목록 페이지 반응형 (2026-10-12) — 내 프로젝트(created_projects/list.css .cp-list-page)에서 공통 승격.
   사용: <div class="page-body page-body--list"> (내 프로젝트·매칭 신청·내 매칭 현황·신청 템플릿)
   기간 검색은 <div class="search-date-range">{{ date_input(..) }} ~ {{ date_input(..) }}</div> 로 묶어
   두 날짜가 함께 줄바꿈되게 한다.
───────────────────────────────────────────────────────────── */
/* 검색 폼: 라벨(160px)은 유지하고, 폭이 좁아 컨트롤(최소 220px)이 라벨 옆에 안 들어가면 라벨 아래로 wrap */
.page-body--list .search-form { flex-wrap: wrap; }
.page-body--list .search-form > :is(.cell-input-wrap, .input-wrapper, .form-group-control, .custom-select, .country-select, .custom-date-input, .search-date-range) {
  flex: 1 1 220px;
  min-width: 0;
}

/* 기간(시작 ~ 종료): 날짜 2개 + '~' 를 한 세트로 묶음(개별 분리 방지). 날짜 필드 사이 16(4 + "~" + 4) */
.search-date-range { display: flex; align-items: center; gap: 4px; }
.search-date-range .custom-date-input { flex: 1 1 0; min-width: 0; }

/* 태블릿 이하: 3분할 검색 폼을 한 줄 전체로 쌓기 */
@media (max-width: 1024px) {
  .page-body--list .search-group { flex-wrap: wrap; gap: 12px; }
  .page-body--list .search-group .search-form { flex: 1 1 100%; min-width: 0; }
  /* 레이아웃 정렬용 빈 검색 폼은 좁은 화면에서 감춤 */
  .page-body--list .search-form:empty { display: none; }
  /* 초기화/검색 버튼을 가로로 균등 분할 */
  .page-body--list .search-actions .btn-search { flex: 1 1 0; }
  /* 다열 표는 좁은 화면에서 축소되지 않고 가로 스크롤(.table-wrapper overflow-x) */
  .page-body--list .data-table { min-width: 840px; }
}

/* ── embed 페이지(다른 화면의 모달 안 iframe, base.html body.is-embed) — 2026-10-15 ──
   사이드바·상단 헤더·채팅 위젯·모바일 오버레이 숨김, 본문은 여백 없이 흰 배경 전체 폭. */
body.is-embed { background: var(--Fill-White, #FFF); }
body.is-embed :is(.sidebar, .page-header, .mobile-overlay, #lc-widget) { display: none !important; }
body.is-embed .main-content { margin-left: 0; padding: 0; min-height: 0; gap: 0; }
body.is-embed .main-container { max-width: none; margin: 0; }
body.is-embed .page-body { padding: 0; }

/* ── 정책 안내 링크(문구 Medium 16 #111 ↔ 4 ↔ chevron 24) — 결제·크레딧 화면 환불 규정 링크 · 계정 정보 결제내역(2026-11-02 공통화, 종전 .pay-policy-link)
   <a>·<button> 모두 사용(버튼은 기본 테두리·배경 제거) ── */
.policy-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--Text-Grey-Main, #111);
  font-family: var(--Font-Family, 'Noto Sans');
  font-size: var(--Font-Size-16, 16px);
  font-weight: var(--Font-Weight-Medium, 500);
  line-height: 24px;
  letter-spacing: -0.4px;
  text-decoration: none;
  white-space: nowrap;
}
.policy-link:hover { text-decoration: underline; }

/* ── 약관 '보기' 모달 틀(본문 = legal_body, 스타일은 legal.css) — 결제 청약철회·환불 규정 · 매칭 수수료/제3자 제공 · 계정 정보 결제내역
   (2026-11-02 공통화, 종전 .pay-legal-* · .mf-legal-*). 다른 모달 위에 뜨도록 z-index 1250 · 높이 80vh · 본문만 스크롤 ── */
.modal-overlay.legal-modal { z-index: 1250; }
.modal-dialog.legal-dialog { max-height: 80vh; }
.legal-dialog-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 8px; }
.legal-dialog-body .legal-body { gap: 24px; }
.legal-dialog > .modal-footer { justify-content: center; }
.legal-dialog > .modal-footer .btn-common { min-width: 120px; }

/* ── BoldSign 임베드 서명 모달(js/shared/esign_modal.js) — 서명 화면 iframe 을 넓게(1100 · 화면 높이 90%).
   다른 모달(신청서 상세 등) 위에서 열리므로 z-index 2300 · 열린 동안 바깥 스크롤 잠금 ── */
.modal-overlay.esign-modal { z-index: 2300; }
.modal-dialog.esign-dialog { width: 1100px; max-width: 95vw; height: 90vh; max-height: 90vh; }
.esign-dialog > .modal-header { padding: 16px 20px; }
.esign-frame-wrap { flex: 1; min-height: 0; padding: 0 20px 20px; }
.esign-frame { width: 100%; height: 100%; border: 1px solid var(--Fill-CoolGrey-200, #E5E7EB); border-radius: 10px; }
body.esign-open { overflow: hidden; }