.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-actions,
.guest-actions {
  display: none;
  gap: 8px;
  align-items: center;
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  right: 18px;
  top: 52px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
  min-width: 180px;
  z-index: 50;
}

.dropdown-menu a {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px solid var(--bd);
}

.dropdown-menu a:last-child {
  border-bottom: 0;
}

.dropdown-menu a:hover {
  background: #f3f4f6;
}

.dropdown-menu.show {
  display: flex;
}

/* Mobile */
@media (max-width: 640px) {
  header .top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dropdown-menu {
    right: 12px;
    top: auto;
    margin-top: 8px;
  }
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2')
    format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2')
    format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2')
    format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2')
    format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2')
    format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2')
    format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2')
    format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2')
    format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2')
    format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg: #ebeffe;
  --card: #fff;
  --bd: #e5e7eb;
  --txt: #111827;
  --muted: #6b7280;
  --primary: #111827;
  --btn: #3b3b43;

  /* v4.9 — 브랜드 프라이머리. emerald → blue 전환 후 신규 디자인 시스템 토큰.
     · --fs-primary       : 메인 액션 색 (기존 emerald-700 자리) — Tailwind 에선 bg-[#1D71FE]
     · --fs-primary-hover : 호버/Pressed 더 진한 톤 (기존 emerald-800 자리) — Tailwind 에선 bg-[#0851CC]
     커스텀 CSS 에서는 var(--fs-primary) / var(--fs-primary-hover) 로 참조. */
  --fs-primary: #1d71fe;
  --fs-primary-hover: #0851cc;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Pretendard, Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo',
    sans-serif;
  background: var(--bg);
  color: var(--txt);
  word-break: keep-all;
}

/*
 * 공용 <header> 전역 스타일은 fragments/header.html 의 Tailwind 클래스
 * (sticky top-0 z-40 bg-emerald-900 border-b shadow-sm) 와 충돌해 제거됨.
 * 이전: padding:14px 18px 가 Tailwind h-14 위에 추가로 28px 를 얹어
 *       어두운 헤더가 적용되자 두꺼운 emerald 띠처럼 보이는 부작용 발생.
 * 다른 페이지는 모두 fragment 를 th:replace 로 끌어쓰므로 안전하게 삭제 가능.
 */

header .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
header .sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

main {
  min-height: calc(100svh - 56px);
  height: auto;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.filters .title {
  font-size: 13px;
  font-weight: 600;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.filter-row.start {
  align-items: start;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}
.field label {
  font-size: 12px;
  color: var(--muted);
}
input,
select,
textarea {
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
/* number input 의 spinner(위·아래 화살표) 제거 — 전역 적용 */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  font-size: 14px;
  color: #bbbbbb;
}
.field.keyword {
  flex: 1;
  min-width: 280px;
}

.btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/*
 * 레거시 button 전역 스타일은 Tailwind 와 충돌해 제거됨.
 * 이전: button { border: 0; ... } → border-style: none 이 Tailwind 의 .border 클래스보다
 * 우선 적용되어 staff 페이지의 모든 인라인 버튼이 테두리·배경 없이 평문처럼 보였음.
 *
 * 명시적으로 레거시 스타일이 필요한 곳은 .legacy-btn 클래스를 부여해 사용.
 */
.legacy-btn {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  background: var(--btn);
  white-space: nowrap;
}
.legacy-btn.ghost {
  font-size: 13px;
  color: var(--txt);
  background: transparent;
  border: 1px solid var(--bd);
}
.legacy-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
}

.status {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px;
  white-space: pre-wrap;
  border-bottom: 1px dashed var(--bd);
}

.label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.help-btn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.help-btn:hover {
  border-color: #9ca3af;
  color: var(--txt);
}

.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 999;
}

.help-overlay.show {
  display: flex;
}

.help-modal {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.help-modal .hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.help-modal .hd .ttl {
  font-weight: 600;
  font-size: 14px;
}

.help-modal .bd {
  padding: 14px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.help-close {
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--txt);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.tbl-wrap {
  overflow: auto;
  border-top: 1px solid var(--bd);
  /* 스크롤바 색은 fragments/header.html 의 전역 규칙을 그대로 따른다.
     (이전엔 dark #333 으로 별도 지정했으나 새 톤과 충돌해 공용 스타일로 통일.) */
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* keep column widths stable */
}
th,
td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  background: #fbfbfc;
  z-index: 5;
  color: var(--muted);
  font-weight: 700;
}
.right {
  text-align: right;
}

#postContainer {
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 15px;
}

/* ─────────────────────────────────────────────
   FranSight 공용 체크박스 (.fs-check)
   기본 브라우저 체크박스를 가리고 부드러운 둥근
   사각형 + 흰색 ✓ 마크로 일관된 스타일을 제공.
   사용법: <input type="checkbox" class="fs-check" />
   ─────────────────────────────────────────────*/
/* v4.9 — Figma 체크박스 스펙: 18px, 1px #99A1AF 보더, radius 2.5px.
   선택 시 #1D71FE 배경 + 흰색 체크 SVG(중앙 정렬). */
.fs-check {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #99a1af;
  border-radius: 2.5px;
  background: #ffffff;
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
  flex-shrink: 0;
}
.fs-check:hover {
  border-color: #1d71fe;
  box-shadow: 0 0 0 4px rgba(29, 113, 254, 0.08);
}
.fs-check:focus-visible {
  outline: none;
  border-color: #1d71fe;
  box-shadow: 0 0 0 3px rgba(29, 113, 254, 0.25);
}
.fs-check:checked {
  background: #1d71fe;
  border-color: #1d71fe;
}
.fs-check:checked::after {
  content: '';
  position: absolute;
  /* 제공된 흰색 체크 SVG(9×10) 를 상하좌우 정중앙 배치. */
  left: 50%;
  top: 50%;
  width: 9px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10' fill='none'%3E%3Cpath d='M8.7736 0.0702798C8.97638 0.201749 9.03413 0.472561 8.90288 0.675342L3.51725 8.98784C3.44266 9.10269 3.31885 9.17619 3.18213 9.18625C3.17119 9.18712 3.16047 9.18756 3.14997 9.18756C3.02485 9.18756 2.90497 9.13375 2.82141 9.03903L0.10891 5.95619C-0.0505584 5.77462 -0.0328397 5.49834 0.148504 5.33865C0.329848 5.17897 0.606348 5.1969 0.766035 5.37803L3.09682 8.02731L8.16832 0.199561C8.29979 -0.00343901 8.57016 -0.0607514 8.7736 0.0702798Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.fs-check:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  cursor: not-allowed;
  opacity: 0.7;
}
.fs-check:disabled:checked {
  background: #9ca3af;
  border-color: #9ca3af;
}
/* 라벨과 함께 쓸 때 정렬 */
label.fs-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* 라디오 버튼 변형 — type=radio 일 때 원형 + 가운데 점 */
.fs-check[type='radio'] {
  border-radius: 50%;
}
.fs-check[type='radio']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: none;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 도움말 ? 버튼 */
.fs-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border: 0;
  border-radius: 9999px;
  /* info(ⓘ) 아이콘 — 옅은 파란 원형 배경 + 파란 아이콘으로 "클릭 가능한 도움말"임을 명확히. 글자(?)는 숨김. */
  font-size: 0;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
  padding: 0;
  transition: background-color 0.15s;
  background: #ebf1fd
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M5.445 10.2551C4.5738 10.2551 3.7752 10.0434 3.0492 9.61987C2.3232 9.19637 1.74845 8.62162 1.32495 7.89562C0.90145 7.16962 0.6897 6.37102 0.6897 5.49982C0.6897 4.62862 0.90145 3.83002 1.32495 3.10402C1.74845 2.37802 2.3232 1.80327 3.0492 1.37977C3.7752 0.956274 4.5738 0.744524 5.445 0.744524C6.3162 0.744524 7.1148 0.956274 7.8408 1.37977C8.5668 1.80327 9.14155 2.37802 9.56505 3.10402C9.98855 3.83002 10.2003 4.62862 10.2003 5.49982C10.2003 6.37102 9.98855 7.16962 9.56505 7.89562C9.14155 8.62162 8.5668 9.19637 7.8408 9.61987C7.1148 10.0434 6.3162 10.2551 5.445 10.2551ZM5.445 10.9448C6.4372 10.9448 7.35075 10.7028 8.18565 10.2188C9.02055 9.73482 9.68 9.07537 10.164 8.24047C10.648 7.40557 10.89 6.49202 10.89 5.49982C10.89 4.50762 10.648 3.59407 10.164 2.75917C9.68 1.92427 9.02055 1.26482 8.18565 0.780825C7.35075 0.296824 6.4372 0.0548239 5.445 0.0548239C4.4528 0.0548239 3.53925 0.296824 2.70435 0.780825C1.86945 1.26482 1.21 1.92427 0.726 2.75917C0.242 3.59407 0 4.50762 0 5.49982C0 6.49202 0.242 7.40557 0.726 8.24047C1.21 9.07537 1.86945 9.73482 2.70435 10.2188C3.53925 10.7028 4.4528 10.9448 5.445 10.9448ZM6.0621 4.55602L4.5375 4.73752L4.4649 4.99162L4.7553 5.06422C4.8763 5.08842 4.9489 5.11867 4.9731 5.15497C4.9973 5.19127 4.9973 5.25782 4.9731 5.35462L4.4649 7.71412C4.3439 8.31912 4.5254 8.62162 5.0094 8.62162C5.203 8.62162 5.3966 8.58532 5.5902 8.51272C5.7838 8.44012 5.929 8.34332 6.0258 8.22232L6.0621 7.93192C5.9411 8.05292 5.78985 8.11342 5.60835 8.11342C5.42685 8.11342 5.3603 7.99242 5.4087 7.75042L6.0621 4.55602ZM6.1347 3.10402C6.1347 3.29762 6.06815 3.46097 5.93505 3.59407C5.80195 3.72717 5.6386 3.79372 5.445 3.79372C5.2514 3.79372 5.08805 3.72717 4.95495 3.59407C4.82185 3.46097 4.7553 3.30367 4.7553 3.12217C4.7553 2.94067 4.82185 2.78337 4.95495 2.65027C5.08805 2.51717 5.2514 2.45062 5.445 2.45062C5.6386 2.45062 5.80195 2.51717 5.93505 2.65027C6.06815 2.78337 6.1347 2.93462 6.1347 3.10402Z' fill='%231D71FE'/%3E%3C/svg%3E")
    no-repeat center / 12px 12px;
}
.fs-help-btn:hover {
  background-color: #d6e4fe;
}
/* v4.12 — 도움말 툴팁 말풍선 (네이티브 alert 대체). ctTip() 가 body 에 #__fsTip 으로 1개만 생성·재사용. */
.fs-tip-pop {
  position: absolute;
  z-index: 9999;
  display: none;
  max-width: 320px;
  padding: 10px 12px;
  background: #ffffff;
  color: #1E2939;
  font-size: 12px;
  line-height: 1.65;
  border: 1px solid #D1D5DC;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  white-space: pre-line;          /* 텍스트의 \n 을 줄바꿈으로 렌더 */
  word-break: keep-all;
  pointer-events: none;           /* 말풍선 자체 클릭은 무시 — 바깥 클릭으로 닫힘 */
}

/* 계약 방식 라디오 카드 (employees.html 계약 모달) */
.ct-case-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ct-case-card:hover {
  background: #f5f5f4;
  border-color: #6ee7b7;
}
.ct-case-card:has(input[type='radio']:checked) {
  border-color: #1d71fe;
  background: #ebf1fd;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}
.ct-case-card .ct-case-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.ct-case-card .ct-case-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* FranSight 공용 모달 — confirm/prompt 대체 (alert 대체용) */
.fs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.fs-modal-backdrop.hidden {
  display: none;
}
.fs-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
}
.fs-modal-head {
  padding: 18px 22px 0 22px;
}
.fs-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.fs-modal-body {
  padding: 12px 22px 4px 22px;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}
.fs-modal-foot {
  padding: 14px 22px 18px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.fs-btn-primary {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #1d71fe;
  color: #fff;
  border: 1px solid #1d71fe;
  cursor: pointer;
}
.fs-btn-primary:hover {
  background: #0851cc;
}
.fs-btn-secondary {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  cursor: pointer;
}
.fs-btn-secondary:hover {
  background: #f1f5f9;
}
.fs-btn-danger {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
  cursor: pointer;
}
.fs-btn-danger:hover {
  background: #b91c1c;
}

/* v3.1 — 모바일 모달 정돈: 좁은 폭에서 버튼 라벨이 2줄로 잘리지 않도록
   foot 을 세로 스택. flex-direction: column-reverse 로 primary(맨 마지막 자식)
   가 시각상 최상단에 와서 주요 액션이 자연스럽게 강조됨.
   본문은 줄간격·여백을 살짝 키워 작은 화면에서도 답답하지 않도록. */
@media (max-width: 480px) {
  .fs-modal-head {
    padding: 16px 18px 0 18px;
  }
  .fs-modal-title {
    font-size: 14px;
  }
  .fs-modal-body {
    padding: 12px 18px 4px 18px;
    font-size: 13px;
    line-height: 1.6;
  }
  .fs-modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 6px;
    padding: 12px 18px 16px 18px;
  }
  .fs-modal-foot button {
    width: 100%;
    white-space: nowrap;
    padding: 10px 12px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   v4.9 — 신규 표준 버튼 컴포넌트 (피그마 디자인 시스템 · 블루 그라디언트).

   네이밍 정책: 색상·모양으로 한눈에 구분되게 — class 이름만 봐도 어떤 색깔인지 안다.
     .btn        : 모든 버튼의 베이스 (reset + 폰트/패딩 기본)
     .btn-blue   : 파란 그라디언트 (메인 액션, 채워진 형태)
     .btn-white  : 흰 배경 + 회색→파랑 보더 (보조 액션, 테두리만 있는 형태)
     .btn-sm     : 작은 사이즈 (14px / weight 700, 좌우 padding 더 큼)
     disabled    : 모든 색상 공통 회색 단색

   기존 .fs-btn-primary / .fs-btn-secondary (위쪽 정의, 모달 푸터 에메랄드)
   는 의도가 달라서 그대로 유지 — 새 화면·리뉴얼에서는 본 .btn* 시리즈 사용.

   사용:
     <button class="btn btn-blue">웨이팅 접수하기</button>
     <button class="btn btn-blue btn-sm">웨이팅 접수하기</button>
     <button class="btn btn-white">웨이팅 접수하기</button>
     <button class="btn btn-blue" disabled>웨이팅 접수하기</button>

   참고:
     · 폭은 콘텐츠 기반. 풀폭이 필요하면 .w-full / style="width:100%" 병용.
     · 보더는 outline+offset(-1px) — 컬러 전환 시 레이아웃 시프트 없음.
     · 박스섀도우 색은 #003B9D (브랜드 블루 deep) 의 8% — 피그마 토큰과 동일.
     · 색이 늘어나면 .btn-green / .btn-red 처럼 같은 패턴으로 추가.
   ────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% — 피그마 wait/Pretendard/SemiBold */
  letter-spacing: -0.4px; /* 피그마 wait/Pretendard/SemiBold */
  text-align: center;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease,
    outline-color 0.15s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-sm {
  padding: 8px 24px;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* 파란 — 그라디언트 (135°, light → mid blue) */
.btn-blue {
  color: #ffffff;
  background: linear-gradient(135deg, #3395f8 0%, #1d71fe 100%);
  box-shadow: 0 4px 8px rgba(0, 59, 157, 0.08);
}
.btn-blue:hover {
  background: linear-gradient(135deg, #1d71fe 0%, #0851cc 100%);
}

/* 흰 — 흰 배경 + 블루 텍스트 + 회색 보더 (호버 시 보더가 파랑) */
.btn-white {
  color: #1d71fe;
  background: #ffffff;
  outline: 1px solid #e5e7eb;
  outline-offset: -1px;
}
.btn-white:hover {
  outline-color: #1d71fe;
  box-shadow: 0 4px 8px rgba(0, 59, 157, 0.08);
}

/* disabled — 모든 색상 공통, 그라디언트·보더 무력화 */
.btn:disabled,
.btn[aria-disabled='true'] {
  color: #ffffff;
  background: #d1d5dc;
  outline: none;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* 키보드 포커스 — 모든 색상 공통 링 (접근성) */
.btn:focus-visible {
  outline: 2px solid #1d71fe;
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   v4.9 — 안내·explainer 카드 (피그마 디자인 시스템).

   사용 예 — 2칼럼 가로 (데스크탑) → 세로 스택 (모바일):
     <div class="fs-info-card">
       <div class="fs-info-section">
         <div class="fs-info-title">3가지 양식 종류 안내</div>
         <div class="fs-info-row">
           <span class="fs-info-chip fs-info-chip-indigo">표준 양식</span>
           <span class="fs-info-desc">FranSight 기본 제공 · 수정 불가</span>
         </div>
         …
       </div>
       <div class="fs-info-divider"></div>
       <div class="fs-info-section">
         <div class="fs-info-title">자동 채움 항목</div>
         <p class="fs-info-desc">… 노란 칩을 넣으면 자동 채움 …</p>
         <div class="fs-info-pills">
           <span class="fs-info-pill">직원 이름</span>
           <span class="fs-info-pill">시급</span>
           …
         </div>
         <div class="fs-info-note">양식 추가 시 도구 모음에서 같은 칩을 …</div>
       </div>
     </div>

   사용 예 — 단일 칼럼 (마이페이지처럼 세로로 섹션 여러 개 쌓을 때):
     <div class="fs-info-card fs-info-card-stacked">
       <div class="fs-info-section">…</div>
       <div class="fs-info-divider"></div>
       <div class="fs-info-section">…</div>
     </div>

   토큰:
     · 컨테이너: rgba(255,255,255,0.50) bg, 8px radius, 20px padding, 40px gap
     · 디바이더: 1px #D1D5DC — 가로 모드 세로선, 세로 모드 가로선 자동 전환
     · 타이틀: 16px / 600 / #334155
     · 설명: 14px / 400 / #334155
     · 보조 노트: 12px / 400 / #95A5A6
     · 컬러 칩: 2px 4px padding, 4px radius, 14px / 600 — indigo/emerald/amber 3색
     · placeholder 필: 4px 10px padding, 100px radius, 1px outline #95A5A6, white bg
   ────────────────────────────────────────────────────────────────────── */
.fs-info-card {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  flex-wrap: wrap;
}
/* 단일 칼럼 (섹션을 세로로 쌓는 변형) */
.fs-info-card-stacked {
  flex-direction: column;
  gap: 16px;
}
.fs-info-section {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}
.fs-info-card-stacked .fs-info-section {
  padding: 0;
}
.fs-info-divider {
  width: 1px;
  background: #d1d5dc;
  align-self: stretch;
  flex-shrink: 0;
}
.fs-info-card-stacked .fs-info-divider {
  width: 100%;
  height: 1px;
}
@media (max-width: 768px) {
  /* 좁은 폭에선 가로 카드도 세로로 접고 디바이더는 가로선으로 전환 */
  .fs-info-card {
    flex-direction: column;
    gap: 16px;
  }
  .fs-info-card .fs-info-section {
    padding: 0;
  }
  .fs-info-card .fs-info-divider {
    width: 100%;
    height: 1px;
  }
}

.fs-info-title {
  color: #334155;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
}
.fs-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fs-info-desc {
  color: #334155;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  margin: 0;
}
.fs-info-note {
  color: #95a5a6;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.2px;
}

/* 컬러 칩 — figma 스펙 3색. 향후 색이 필요하면 같은 패턴으로 추가. */
.fs-info-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.2px;
  flex-shrink: 0;
}
.fs-info-chip-indigo {
  background: #e8e7ff;
  color: #4d47ff;
}
.fs-info-chip-emerald {
  background: #e0f2e8;
  color: #00923d;
}
.fs-info-chip-amber {
  background: #f7ecd2;
  color: #bc8912;
}

/* placeholder 필 — "자동 채움 항목" 처럼 둥근 화이트 태그용 */
.fs-info-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fs-info-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #ffffff;
  border-radius: 100px;
  outline: 1px solid #95a5a6;
  outline-offset: -1px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #334155;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────
   v4.9 — 공용 모달 크롬 통일 (Figma). 프로젝트 전체 [data-modal] 에 일괄 적용.
   · 배경(backdrop): 검정 45% (기존 bg-black/40 보다 살짝 진하게 — Figma 값)
   · 패널 그림자 + 옅은 블루 아웃라인 (#EBF1FD)
   · 닫기(X) 버튼 .fs-modal-x — 32×32 라운드, 호버 옅은 회색, Figma X 아이콘 내장
   ────────────────────────────────────────────────────────────────────── */
[data-modal] {
  background-color: rgba(0, 0, 0, 0.45) !important;
}
[data-modal] > div {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
  outline: 1px solid #EBF1FD;
  outline-offset: -1px;
}

/* v4.10 — 모달 내부 스크롤 영역 공통 스크롤바. thumb #333 / 투명 track / 슬림·라운드.
   모달 자신(드물게)과 내부 스크롤 컨테이너(overflow-y-auto 등) 모두 적용. */
[data-modal],
[data-modal] * {
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: #333 transparent;
}
[data-modal]::-webkit-scrollbar,
[data-modal] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-modal]::-webkit-scrollbar-track,
[data-modal] *::-webkit-scrollbar-track {
  background: transparent;
}
[data-modal]::-webkit-scrollbar-thumb,
[data-modal] *::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 999px;
  border: 2px solid transparent;   /* 패딩 효과 — 가장자리에 붙지 않게 */
  background-clip: padding-box;
}
[data-modal]::-webkit-scrollbar-thumb:hover,
[data-modal] *::-webkit-scrollbar-thumb:hover {
  background-color: #1a1a1a;
}
[data-modal]::-webkit-scrollbar-corner,
[data-modal] *::-webkit-scrollbar-corner {
  background: transparent;
}

.fs-modal-x {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M0.999906 0C0.743906 0 0.488375 0.0974687 0.292875 0.292969C-0.0976251 0.683469 -0.0976251 1.31653 0.292875 1.70703L7.58584 9L0.292875 16.293C-0.0976247 16.6835 -0.0976251 17.3165 0.292875 17.707C0.488375 17.9025 0.743906 18 0.999906 18C1.25591 18 1.51144 17.9025 1.70694 17.707L8.99991 10.4141L16.2929 17.707C16.6834 18.0975 17.3164 18.0975 17.7069 17.707C18.0974 17.3165 18.0974 16.6835 17.7069 16.293L10.414 9L17.7069 1.70703C18.0974 1.31653 18.0974 0.683469 17.7069 0.292969C17.3164 -0.0975308 16.6834 -0.0975308 16.2929 0.292969L8.99991 7.58594L1.70694 0.292969C1.51144 0.0974692 1.25591 0 0.999906 0Z' fill='%23364153'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  /* 기존 × 글리프가 남아 있어도 숨김 */
  font-size: 0;
  color: transparent;
  line-height: 0;
  transition: background-color 0.15s ease;
}
.fs-modal-x:hover { background-color: #f3f4f6; }

/* v3.1 — fsChoose 본문에 사용하는 "선택지 카드" 보조 스타일.
   각 보기를 한 줄짜리 박스로 묶어 모바일에서도 가독성 유지.
   v4.2 — flex column + gap 으로 변경. 안에 자식들 사이 간격을 자동으로 관리.
   탬플릿 리터럴의 줄바꿈이 <br> 로 변환돼서 생기던 빈 공간 폭주 차단도 함께. */
.fs-choice-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.fs-choice-card .fs-choice-title {
  font-weight: 700;
  width: 100%;
}
.fs-choice-card.fs-choice-primary {
  background: #ebf1fd;
  border: 1px solid #ebf1fd;
}
.fs-choice-card.fs-choice-primary .fs-choice-title {
  color: #0851cc;
}
.fs-choice-card.fs-choice-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.fs-choice-card.fs-choice-danger .fs-choice-title {
  color: #991b1b;
}
.fs-choice-card.fs-choice-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.fs-choice-card.fs-choice-info .fs-choice-title {
  color: #1e40af;
}

.fs-owner-bg {
  /* background-color: transparent; */
}

/* ─────────────────────────────────────────────────────────────────
   v2.7 — fs-icon : 단색 픽토그램 표준.
   사용법:
     <svg class="fs-icon"><use href="#i-calendar"/></svg>
     <svg class="fs-icon fs-icon-sm"><use href="#i-store"/></svg>
   · stroke="currentColor" 라서 text-* 색 그대로 따라옴 (단색 일관성).
   · 기본 크기는 1em (인접 텍스트와 자연스럽게 align).
   · sm/lg 변형으로 강제 크기 지정 가능.
   ───────────────────────────────────────────────────────────────── */
.fs-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 텍스트 베이스라인 미세 보정 */
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fs-icon-xs {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 1.9;
}
.fs-icon-sm {
  width: 1em;
  height: 1em;
  stroke-width: 1.8;
}
.fs-icon-md {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.6;
}
.fs-icon-lg {
  width: 1.5em;
  height: 1.5em;
  stroke-width: 1.5;
}
.fs-icon-xl {
  width: 2em;
  height: 2em;
  stroke-width: 1.4;
}
.fs-icon-2xl {
  width: 3em;
  height: 3em;
  stroke-width: 1.3;
}
/* 스프라이트 정의 자체는 어디서든 보이지 않도록 */
.fs-icon-sprite-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   v2.7 — fs-select : 모든 <select> 를 자동으로 enhance 하는 커스텀 드롭다운.
   · 원본 <select> 는 .fs-select-source-hidden 으로 화면에서만 가림.
   · host > display(버튼) + menu(드롭다운 패널) 구조.
   · 다크 톤 native select 가 다 사라지고 일관된 light 톤으로 통일됨.
   ───────────────────────────────────────────────────────────────── */

/* 원본 select 시각만 가림 — DOM 은 살려둬 form value 호환 유지 */
.fs-select-source-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.fs-select-host {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.fs-select-host.w-full,
.fs-select-host.flex-1 {
  display: block;
}
/* v4.13 — w-full(모바일 100%) + lg:w-auto(데스크탑 콘텐츠 폭) 조합 지원.
   .fs-select-host.w-full 은 display:block 이라 데스크탑에서도 꽉 차는데,
   lg:w-auto 가 함께 있으면 데스크탑(≥1024px)에서 콘텐츠 폭으로 되돌린다. (예: 직원 명단 매장 필터) */
@media (min-width: 1024px) {
  .fs-select-host.w-full.lg\:w-auto {
    display: inline-block;
    width: auto;
  }
}

/* display = 보이는 버튼. 원본 select 의 utility 클래스(border, rounded, px-, py-, text-, bg-)를 그대로 받음. */
.fs-select-display {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #ffffff;
  color: #111827;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-select-display:hover {
  border-color: #6ee7b7;
}
.fs-select-display:focus-visible {
  outline: none;
  border-color: #1d71fe;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.2);
}
.fs-select-display[disabled] {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}
.fs-select-display .fs-select-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fs-select-display .fs-select-label.is-placeholder {
  color: #9ca3af;
}
.fs-select-display .fs-select-caret {
  width: 14px;
  height: 14px;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.fs-select-host.is-open .fs-select-display .fs-select-caret {
  transform: rotate(180deg);
}

/* menu = 펼친 옵션 패널. */
.fs-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* v4.2 — right:0 를 빼고 width:max-content 로 옵션 텍스트 길이에 맞춰 메뉴 확장.
     min-width:100% 로 최소 host 너비는 보장. max-width 로 viewport 넘침 방지. */
  min-width: 100%;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 4px;
  z-index: 100;
  display: none;
  animation: fs-select-pop 0.12s ease-out;
}
.fs-select-menu.is-above {
  top: auto;
  bottom: calc(100% + 4px);
}
.fs-select-host.is-open .fs-select-menu {
  display: block;
}

@keyframes fs-select-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fs-select-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1f2937;
  cursor: pointer;
  /* v4.2 — 메뉴 자체가 max-content 로 폭을 잡으니 옵션은 한 줄에 다 보이게.
     아주 긴 라벨(>340px) 만 ellipsis 로 잘림. white-space:nowrap 으로 줄바꿈 차단. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-select-option:hover {
  background: #f3f4f6;
}
.fs-select-option:focus {
  outline: none;
  background: #ebf1fd;
}
.fs-select-option[disabled] {
  color: #9ca3af;
  cursor: not-allowed;
}
.fs-select-option[disabled]:hover {
  background: transparent;
}
.fs-select-option[aria-selected='true'] {
  background: #ebf1fd;
  color: #1d71fe;
  font-weight: 600;
}
.fs-select-option[aria-selected='true']::after {
  content: '✓';
  float: right;
  margin-left: 8px;
  color: #1d71fe;
}

/* ────────────────────────────────────────────────────────────
   AUTH (login / register) — 글래스 카드 + 풀-블리드 배경 이미지.
     · width 는 100% + max-width 캡 패턴 (고정 width 금지 규칙)
     · line-height 는 모두 % 단위
     · 피그마 스펙 7종 (color / font-family / font-size / font-style /
       font-weight / line-height / letter-spacing) 누락 없이 매핑
   ──────────────────────────────────────────────────────────── */
.auth-bg {
  width: 100%;
  min-height: calc(100vh - 54px); /* 헤더 높이 보정 */
  padding: 100px 24px;
  background-color: #ebeffe;
  /* CSS 안에서는 @{} 사용 불가 → 파일 위치(/css/) 기준 상대 경로로 작성해야
     local(/img/) 과 prod(/fransight/img/) 양쪽에서 모두 정확히 해석됨. */
  background-image: url('../img/login-bg.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.auth-card {
  width: 100%;
  max-width: 500px;
  padding: 40px 48px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.54) 100%
  );
  box-shadow: 0 16px 24px rgba(27, 24, 77, 0.06);
  border-radius: 12px;
  outline: 1px solid #ebf1fd;
  outline-offset: -1px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-head {
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-head-text {
  flex: 1 1 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

/* 큰 사이즈 브랜드 로고 — 헤더의 hdr-brand 와 같은 패턴, 사이즈만 키움. */
.auth-brand {
  display: inline-flex;
  align-items: baseline;
  color: #231815;
  font-family: Pretendard, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.8px;
}
.auth-brand-dot {
  color: #2563eb;
}
.auth-brand-ext {
  font-size: 0.75em;
  font-weight: 700;
}

.auth-head-title {
  color: #6a7282;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 28/20 */
  letter-spacing: -0.5px;
}

.auth-head-img {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
}

.auth-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-fields {
  align-self: stretch;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 라벨 + 입력 묶음. 비밀번호처럼 입력이 2개 묶이는 경우 같은 컨테이너에 input 2개 넣으면 됨. */
.auth-field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #364153;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.4px;
}
.auth-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #1d71fe;
  border-radius: 9999px;
  flex-shrink: 0;
}

.auth-input {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  color: #171717;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.4px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input::placeholder {
  color: rgba(23, 23, 23, 0.5);
}
.auth-input:focus {
  border-color: #1d71fe;
  box-shadow: 0 0 0 3px rgba(29, 113, 254, 0.15);
}

.auth-submit {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #3395f8 0%, #1d71fe 100%);
  box-shadow: 0 4px 8px rgba(0, 59, 157, 0.08);
  color: #fff;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.4px;
  text-align: center;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.auth-submit:hover {
  filter: brightness(1.05);
}
.auth-submit:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  filter: none;
}

.auth-foot {
  align-self: stretch;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9ca3af;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.4px;
  text-align: center;
}
.auth-foot-link {
  color: #2563eb;
  font-weight: 600;
}
.auth-foot-link:hover {
  text-decoration: underline;
}

/* 알림 박스 — 기존 success / error 메세지를 카드 톤에 맞춤. */
.auth-alert {
  align-self: stretch;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.35px;
  border: 1px solid transparent;
}
.auth-alert--error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.auth-alert--warn {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.auth-alert--success {
  background: #ebf1fd;
  color: #1d71fe;
  border-color: #ebf1fd;
}

/* ≤768px — 카드 폭/패딩/이미지/브랜드만 축소. 구조 변화 없음. */
@media (max-width: 768px) {
  .auth-bg {
    padding: 40px 24px;
  }
  .auth-card {
    max-width: 320px;
    padding: 24px 20px;
  }
  .auth-brand {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  .auth-head-img {
    width: 90px;
    height: 90px;
  }
}

/* =======================================================================
   FranSight 공용 목록 컴포넌트 — 탭(.fs-tabs) + 반응형 목록 표(.fs-list-table)
   -----------------------------------------------------------------------
   · 한 벌의 마크업으로 데스크탑(표)과 모바일(카드)을 자연스럽게 전환한다.
     768px 이하부터 각 행(tr)이 카드로 바뀐다 — 별도 모바일 마크업 불필요.
   · 다른 목록 페이지(매장·계약·급여 등)에서도 그대로 재사용한다.

   사용법:
     <div class="fs-tabs">
       <button class="fs-tab is-active">재직중 <span class="fs-tab-count">24</span></button> ...
     </div>
     <div class="fs-list-table-wrap">
       <table class="fs-list-table">
         <thead><tr><th>이름</th> ... </tr></thead>
         <tbody>
           <tr>
             <td class="fs-cell-main" data-label="이름">김길동</td>
             <td data-label="매장">빵빵한 빵집</td> ...
             <td class="fs-cell-actions" data-label="관리메뉴"> ...버튼... </td>
           </tr>
         </tbody>
       </table>
     </div>
   셀 모디파이어:
     .fs-cell-main    — 제목 셀(모바일에서 라벨 숨김·강조, 카드 헤더로).
     .fs-cell-actions — 액션 셀(모바일에서 라벨 숨김·버튼 풀폭).
     .fs-cell-check   — 체크박스 셀(모바일에서 숨김).
   ======================================================================= */

/* ── 탭 바 ────────────────────────────────────────────────────────── */
.fs-tabs {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid #d1d5dc;
}
.fs-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: #6a7282;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
  background: none;
  cursor: pointer;
  transition: color 0.15s;
}
.fs-tab:hover {
  color: #364153;
}
.fs-tab.is-active {
  color: var(--fs-primary);
  border-bottom-color: var(--fs-primary);
}
.fs-tab-count {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: inherit;
}
@media (max-width: 1024px) {
  .fs-tabs {
    gap: 12px;
  }
  .fs-tab {
    padding: 4px 12px;
    font-size: 16px;
    line-height: 24px;
  }
}

/* ── 목록 표 (데스크탑, ≥1025px) ─────────────────────────────────────
   좌우 공간이 모자라면 가로 스크롤. 컬럼 폭 유지를 위해 표에 최소 너비를 둔다. */
.fs-list-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.fs-list-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
  color: #1e2939;
}
.fs-list-table thead th {
  padding: 12px 20px;
  background: #cdddf2;
  color: #1e2939;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
}
.fs-list-table tbody td {
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(29, 113, 254, 0.25);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1e2939;
  vertical-align: middle;
}
.fs-list-table tbody tr:last-child td {
  border-bottom: 0;
}
.fs-list-table tbody tr.is-muted td {
  opacity: 0.7;
}
.fs-list-table tbody tr.is-selected td {
  background: rgba(235, 241, 253, 0.6);
}
.fs-list-table .fs-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.fs-list-table .fs-cell-sub {
  color: #6a7282;
}
/* 셀 안의 보조(모바일 전용) 텍스트는 데스크탑에서 숨김 */
.fs-list-table .fs-cell-mobile-only,
.fs-list-table .fs-list-inline-meta {
  display: none;
}

/* ── 목록 표 → 카드 (모바일 ≤1024px) ────────────────────────────────
   tr 을 flex-wrap 카드로, 헤더줄은 두 그룹으로 묶는다(시안 구조).
     헤더줄 : [이름 + 매장]  ………  [상태 + 직급]   (space-between)
     본문줄 : 라벨 : 값  (전화 / 입사일)
     액션줄 : 버튼 풀폭
   그룹 묶기:
     .fs-cell-main   = 이름 셀. 안에 매장을 .fs-list-inline-meta 로 같이 넣어 그룹 A.
     .fs-cell-status = 상태 셀. 안에 직급을 .fs-list-inline-meta 로 같이 넣어 그룹 B.
     .fs-list-inline-meta 는 데스크탑에선 숨기고(별도 컬럼이 보임) 모바일에서만 인라인 노출.
   그 외:
     .fs-cell-line(라벨:값 본문줄) + .fs-cell-divider-top(헤더 아래 구분선) /
     .fs-cell-actions(버튼 풀폭) / .fs-cell-check·.fs-cell-hide-mobile(숨김)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fs-list-table {
    min-width: 0;
    border-radius: 0;
    overflow: visible;
    display: block;
  }
  .fs-list-table thead {
    display: none;
  }
  .fs-list-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fs-list-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* 한 줄이면 좌우 끝, 줄바꿈되면 각 줄 왼쪽 정렬 */
    gap: 6px 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(29, 113, 254, 0.25);
    border-radius: 8px;
  }
  .fs-list-table tbody td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #6a7282;
  }
  /* 기본 본문 셀: "라벨 : 값" */
  .fs-list-table tbody td::before {
    content: attr(data-label) " : ";
    color: #6a7282;
    font-weight: 400;
  }
  /* ── 헤더줄: 그룹 단위 줄바꿈 ───────────────────────────────
     그룹 A = 이름 + 매장(인라인) / 그룹 B = 상태배지 + 직급(인라인).
     각 그룹이 하나의 flex 아이템이라 길어지면 그룹 통째로 다음 줄로 내려가고,
     space-between 덕분에 한 줄이면 좌우 끝, 줄바꿈되면 왼쪽 정렬된다. */
  .fs-list-table td.fs-cell-main {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #1e2939;
  }
  .fs-list-table td.fs-cell-main::before {
    display: none;
  }
  .fs-list-table td.fs-cell-status {
    order: 2;
    flex: 0 0 auto; /* 상태+직급은 줄지 않고 그룹 통째로 내려간다 */
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .fs-list-table td.fs-cell-status::before {
    display: none;
  }
  /* 그룹 안의 보조 텍스트(매장·직급) — 회색 14px */
  .fs-list-table .fs-list-inline-meta {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: #364153;
    white-space: nowrap;
  }
  /* 본문줄 — 전화·입사일 (각 줄 100%) */
  .fs-list-table td.fs-cell-line {
    order: 5;
    width: 100%;
  }
  /* 헤더와 본문 사이 구분선 — 본문 첫 줄 위에 그린다 */
  .fs-list-table td.fs-cell-divider-top {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #d1d5dc;
  }
  /* 액션줄 — 버튼 풀폭 */
  .fs-list-table td.fs-cell-actions {
    order: 9;
    width: 100%;
    padding-top: 8px;
  }
  .fs-list-table td.fs-cell-actions::before {
    display: none;
  }
  /* 모바일 카드에서 숨기는 셀 (체크박스·신분증 등) */
  .fs-list-table td.fs-cell-check,
  .fs-list-table td.fs-cell-hide-mobile {
    display: none;
  }
}