/* 복사본 — 원본: packages/design/kg-components.css (직접 고치지 말고 원본을 고친 뒤 npm run sync) */
/* ============================================================
   킹스가든 디자인 시스템 — 부품   packages/design/kg-components.css
   세 사이트가 모두 읽는다 (npm run sync 로 복사, 직접 고치지 말 것). 색 · 크기는 kg-tokens.css 의 이름만 쓴다.

   부품 목록 (그림으로 보기: 그룹웨어 시스템 → 디자인 시스템)
     버튼      .btn  (+ .primary 주 동작 · .danger-text 삭제·초기화 · .plain 테두리 없음 · .ghost · .sm · .lg · .block)
     입력      .field(.lab · .hint · .req) · input · select · textarea · 날짜 · 시간 · 검색
               체크박스 label.check · 라디오 .radio-group · 스위치 .switch · 상자형 토글 .seg
     보여주기  .chip(.good · .warn · .bad · .neutral · .point · .paused · .ended · .planned · .gift)
               .sig · .note · .card · table.tbl · .empty · .toast · .spinner
     이동      .cat-tabs(.cat-tab) 밑줄 탭 · .row-toggle 목록 줄 펼치기 · .pn 기간 이동 · .tool-bar 목록 도구줄
     조각      .inline-panel · .inline-confirm · .dropdown · details.adv(고급 접기)
     공통 화면 로그인 .auth-wrap · .auth-card(.auth-brand · .auth-err · .auth-notice · .auth-note)
               안내 .empty(.is-page — 없는 주소 · 오류 · 권한 없음)
   기본 버튼은 테두리가 있다. 테두리 없는 모양이 필요하면 .plain
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 속성은 버튼처럼 display 가 정해진 요소에서도 반드시 숨긴다 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* 포커스 표시 — 키보드 사용자에게 반드시 보이게 */
:focus-visible {
  outline: 3px solid var(--point);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 텍스트 유틸 ---------- */
.muted     { color: var(--ink-2); }
.dim       { color: var(--ink-3); }
.small     { font-size: var(--fs-sm); }
.xsmall    { font-size: var(--fs-xs); }
.num       { font-variant-numeric: tabular-nums; }
.strong    { font-weight: 700; }
.center    { text-align: center; }
.right     { text-align: right; }
.nowrap    { white-space: nowrap; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 주 동작 — 포인트 색은 여기에만 쓴다 */
.btn.primary {
  background: var(--point); border-color: var(--point); color: var(--ink-on-point);
}
.btn.primary:hover:not(:disabled) { background: var(--point-hover); border-color: var(--point-hover); }

.btn.danger { color: var(--bad); border-color: var(--line-2); }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); border-color: var(--bad); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn.sm { min-height: 30px; padding: 0 var(--s-3); font-size: var(--fs-sm); gap: 5px; }
@media (pointer: coarse) { .btn.sm { min-height: 38px; } }
.btn.block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- 폼 ---------- */
label.field, div.field { display: block; margin-bottom: var(--s-4); }
.field > .lab {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.field > .hint {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-xs); color: var(--ink-3);
}

input[type=text], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: var(--fs-sm);
  transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 84px; resize: vertical; line-height: var(--lh); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--point);
  box-shadow: 0 0 0 3px var(--point-soft);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2); color: var(--ink-3); cursor: not-allowed;
}
input.num, td input.num { text-align: right; font-variant-numeric: tabular-nums; }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--s-10);
  /* 아래 화살표 — 디자인 시스템 색으로 그린다 (다크 화면에서도 맞게) */
  background-image: linear-gradient(45deg, transparent 50%, var(--kg-ink-3) 50%), linear-gradient(135deg, var(--kg-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 스위치 */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 24px; flex: none;
  border-radius: var(--r-full);
  background: var(--line-2);
  position: relative; transition: background .16s;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--kg-white); box-shadow: var(--shadow-1);
  transition: transform .16s;
}
.switch input:checked + .track { background: var(--point); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--surface); }
.switch input:focus-visible + .track { outline: 3px solid var(--point); outline-offset: 2px; }

/* ---------- 카드 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card-pad { padding: var(--s-6); }
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  min-height: 46px;
}
.card-h h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.card-b { padding: var(--s-5); }
.card-pad { padding: var(--s-5); }

/* ---------- "고급" 접기 ---------- */
details.adv {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  margin-top: var(--s-4);
}
details.adv[open] { background: var(--surface-2); }
details.adv > summary {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer; list-style: none;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before {
  content: '▸'; font-size: var(--fs-xs); color: var(--ink-3);
  transition: transform .14s;
}
details.adv[open] > summary::before { transform: rotate(90deg); }
details.adv > .adv-b { padding: var(--s-2) var(--s-5) var(--s-5); }

/* ---------- 신호등 ---------- */
.sig { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; }
.sig::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: currentColor;
}
.sig.good { color: var(--good); }
.sig.warn { color: var(--warn); }
.sig.bad  { color: var(--bad); }
.sig.none { color: var(--ink-3); }

/* 색에만 의존하지 않도록 배경칩 형태도 제공 */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 1px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
}
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad  { background: var(--bad-bg);  color: var(--bad); }
.chip.neutral { background: var(--surface-3); color: var(--ink-2); }
.chip.point { background: var(--point-soft); color: var(--point); }

/* ---------- 표 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tbl th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.tbl td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr:hover { background: var(--surface-2); }
/* 표 안의 입력칸은 더 낮게 */
table.tbl input, table.tbl select { min-height: var(--tap-row); padding: 4px var(--s-3); font-size: var(--fs-sm); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 빈 상태 · 안내 화면 (공통 화면) ----------
   목록이 비었을 때, 없는 주소 · 오류 · 권한 없음 — 세 사이트가 같은 모양
   .empty > .t(제목) + .small 또는 p(설명) + .btn(있으면) */
.empty {
  padding: var(--s-12) var(--s-6);
  text-align: center; color: var(--ink-3);
}
.empty .t { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); margin: 0 0 var(--s-2); }
.empty p { margin: 0; }
.empty .btn { margin-top: var(--s-6); }
.empty.is-page { max-width: 520px; margin: 0 auto; padding: 72px var(--s-6); }   /* 화면 전체가 안내일 때 (없는 주소 · 오류) */
.empty.is-page .t { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }

/* ---------- 로그인 (공통 화면) ----------
   그룹웨어 · 베이커리가 같은 모양: 가운데 카드 · 로고 · 사번 · 비밀번호 · 로그인 · 문의 안내
   .auth-wrap > .auth-card > .auth-brand · .auth-err / .auth-notice · form · .auth-note
   로그인 버튼은 사이트에서 가장 짙은 글자색(--kg-ink) — 직원용이라 차분하게 */
.auth-wrap { width: 100%; display: grid; place-items: center; padding: var(--s-10) var(--s-4); }
.auth-card {
  width: min(420px, 100%);
  background: var(--kg-surface); border: 1px solid var(--kg-line); border-radius: var(--kg-radius-xl);
  box-shadow: var(--kg-shadow-2);
  padding: var(--s-10) var(--s-8) var(--s-8);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-8); }
.auth-err, .auth-notice {
  margin: 0 0 var(--s-5); padding: var(--s-4); border-radius: var(--kg-radius);
  font-size: var(--fs-sm); font-weight: 600;
}
.auth-err    { background: var(--kg-bad-bg);  color: var(--kg-bad); }
.auth-notice { background: var(--kg-good-bg); color: var(--kg-good); }
.auth-card input:focus { border-color: var(--kg-ink); box-shadow: 0 0 0 3px var(--kg-line); }
.auth-card .btn.primary { width: 100%; min-height: 44px; font-size: var(--kg-fs-base); background: var(--kg-ink); border-color: var(--kg-ink); color: var(--kg-surface); }
.auth-card .btn.primary:hover:not(:disabled) { background: var(--kg-ink-2); border-color: var(--kg-ink-2); }
.auth-note { margin: var(--s-6) 0 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 720px) { .auth-card { padding: var(--s-8) var(--s-5) var(--s-6); } }

/* ---------- 알림 토스트 ---------- */
#toasts {
  position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none; width: min(460px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--s-3); align-self: center; max-width: 100%;
  padding: 10px var(--s-5) 10px 10px;
  border-radius: 999px;
  background: var(--kg-toast-bg); color: var(--kg-toast-ink);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  animation: toast-in .18s ease-out;
}
.toast-i {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--kg-toast-icon); color: var(--kg-white);
}
.toast-i svg { width: 14px; height: 14px; stroke-width: 2.6; }
.toast.good .toast-i { background: var(--kg-toast-good); }
.toast.bad  .toast-i { background: var(--kg-toast-bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 로딩 ---------- */
.spinner {
  width: 22px; height: 22px; flex: none;
  border: 2.5px solid var(--line-2); border-top-color: var(--point);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-12); color: var(--ink-2); }

/* ============================================================
   팝업 대신 쓰는 조각들
   ============================================================ */

/* ---------- 그 자리에서 펼쳐지는 패널 ---------- */
.inline-panel {
  border: 1px solid var(--point);
  border-radius: var(--r);
  background: var(--surface);
  margin: var(--s-3) 0;
  overflow: hidden;
  animation: inline-open .14s ease-out;
}
@keyframes inline-open { from { opacity: 0; transform: translateY(-4px); } }

.inline-panel .inline-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  background: var(--point-soft);
  border-bottom: 1px solid var(--line);
}
.inline-panel .inline-head h3 {
  font-size: var(--fs-sm); font-weight: 700; color: var(--point);
}
.inline-panel .inline-head .icon-btn { width: 30px; height: 30px; color: var(--point); }
.inline-panel .inline-body { padding: var(--s-4) var(--s-5) var(--s-5); }

/* 표 안에 들어갈 때는 셀 여백을 없앤다 */
tr.inline-row > td { padding: 0 !important; background: var(--surface-2); }
tr.inline-row .inline-panel { margin: var(--s-3) var(--s-4); }
tr.inline-row:hover > td { background: var(--surface-2); }

/* 저장 / 취소 줄 */
.inline-actions {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4); margin-top: var(--s-4);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ---------- 그 자리에서 묻는 확인 줄 ---------- */
.inline-confirm {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm); font-weight: 600;
  flex-wrap: wrap;
  animation: inline-open .12s ease-out;
}
.inline-confirm.danger {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-bg);
}
.inline-confirm svg { vertical-align: -3px; }
tr.inline-row .inline-confirm { margin: var(--s-2) var(--s-4); }

/* ---------- 드롭다운 ---------- */
.dropdown {
  z-index: 200;
  min-width: 190px;
  padding: var(--s-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  animation: inline-open .1s ease-out;
}
.dropdown-head {
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-1);
}
.dropdown-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 36px;
  padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  text-align: left; cursor: pointer;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item.danger { color: var(--bad); }
.dropdown-item.danger:hover { background: var(--bad-bg); }
.dropdown-item .di { display: inline-flex; color: var(--ink-3); }
.dropdown-item.danger .di { color: var(--bad); }

/* ---------- 눌러서 펼치는 표 행 ---------- */
table.tbl th .th-hint {
  font-size: var(--fs-2xs); font-weight: 400; color: var(--ink-3);
  margin-top: 1px; white-space: nowrap;
}
table.tbl tr.row-click { cursor: pointer; }
table.tbl tr.is-open,
table.tbl tr.is-open:hover { background: var(--point-soft); }
.row-click { cursor: pointer; }
.row-click.is-open { background: var(--point-soft); }
/* 행 펼치기 화살표 — 테두리 없는 둥근 버튼, 열리면 위로 */
.row-toggle {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer;
}
.row-toggle:hover { background: var(--surface-2); color: var(--ink); }
.row-toggle svg { transition: transform .15s; }
.is-open .row-toggle { color: var(--point); background: var(--point-soft); }
.is-open .row-toggle svg { transform: rotate(180deg); }
.dropdown-sep { height: 1px; margin: var(--s-1) 0; background: var(--line); }
.dropdown-sec { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.dropdown-item.on { color: var(--point); font-weight: 600; }
.dropdown-item.on .di, .dropdown-item .dc { color: var(--point); display: inline-flex; }

/* ---------- 분류 탭 (core/ui/cat-tabs.js) ---------- */
.cat-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--s-4); border-bottom: 1px solid var(--line);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-3) var(--s-3) calc(var(--s-3) - 2px);
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab .c { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.cat-tab[aria-selected="true"], a.cat-tab[aria-current="page"] { color: var(--point); border-bottom-color: var(--point); }
a.cat-tab { text-decoration: none; }
a.cat-tab:hover { text-decoration: none; }
.cat-tabs.flush { padding: 0; }   /* 카드 밖·페이지에 바로 놓을 때 (메인·베이커리) */
.cat-tab[aria-selected="true"] .c { background: var(--point-soft); color: var(--point); }
.cat-tabs.is-disabled .cat-tab { opacity: .45; cursor: default; }

/* ---------- 판매 상태 — 보류(주황) · 단종(흐리게) · planned(보라, 예전 출시 예정 — 다른 표시에 씀) ---------- */
.chip.paused { background: var(--warn-bg); color: var(--warn); }
table.tbl tr.is-paused > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.chip.ended { background: var(--surface-2); color: var(--ink-3); }
table.tbl tr.is-ended > td { color: var(--ink-3); }
table.tbl tr.is-ended > td:first-child { box-shadow: inset 3px 0 0 var(--line-2, var(--line)); }
table.tbl tr.is-ended .strong { color: var(--ink-2); }
.chip.planned { background: var(--planned-bg); color: var(--planned); }
table.tbl tr.is-planned > td { background: var(--planned-row); }
table.tbl tr.is-planned > td:first-child { box-shadow: inset 3px 0 0 var(--planned); }
table.tbl tr.is-planned.is-open > td { background: var(--point-soft); }
.chip.gift { background: var(--gift-bg); color: var(--gift); }
table.tbl tr.is-gift > td { background: var(--gift-row); }
table.tbl tr.is-gift > td:first-child { box-shadow: inset 3px 0 0 var(--gift); }
table.tbl tr.is-gift.is-open > td { background: var(--point-soft); }
.ch-row.is-planned .ch-name .n::after { content: '예정'; margin-left: 6px; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--planned-bg); color: var(--planned); }

/* ---------- 버튼 묶음 고르기 (드롭다운 대신) ---------- */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2);
  max-width: 100%;
}
.seg-b {
  min-height: 30px; padding: 0 var(--s-3);
  border: 0; border-radius: calc(var(--r) - 2px); background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.seg-b:hover { color: var(--ink); }
.seg-b[aria-checked="true"] { background: var(--surface); color: var(--point); box-shadow: var(--kg-shadow-seg); }
.seg-b:focus-visible { outline: 2px solid var(--point); outline-offset: 1px; }
.seg-b:disabled { opacity: .5; cursor: default; }
.field .seg { display: flex; width: fit-content; }

/* ---------- 버튼 속 아이콘 크기 통일 ----------
   화면마다 icon(이름, 숫자)로 크기를 따로 줘도 버튼 안에서는 같은 크기로 보이게 한다 */
.btn svg { width: 16px; height: 16px; flex: none; stroke-width: 1.8; }
.btn.sm svg { width: 14px; height: 14px; }
.btn.lg svg, .wk-punch svg { width: 20px; height: 20px; }
.chip svg { width: 12px; height: 12px; }
.icon-btn svg { width: 18px; height: 18px; }
.inline-confirm svg { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

/* ---------- 기간 이동 막대 (달·분기) — 모든 화면 공통 ---------- */
.pn { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.pn-bar {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); overflow: hidden;
}
.pn-btn { border: 0; border-radius: 0; min-width: 76px; gap: 4px; background: transparent; }
.pn-btn:hover:not(:disabled) { background: var(--surface-2); }
.pn-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 150px; padding: 4px var(--s-4);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.pn-label { font-size: var(--fs-md); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-sub { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) {
  .pn-bar { flex: 1; }
  .pn-btn { min-width: 0; padding: 0 var(--s-3); }
  .pn-mid { flex: 1; min-width: 0; }
}

/* 저장 안 한 변경 표시 — "바꾼 칸 2개" 작은 알약 */
.chg-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}

/* 필수 칸 표시 */
.field > .lab .req { color: var(--bad); margin-left: 3px; font-weight: 700; }

/* ---------- 목록 도구줄 — 왼쪽 검색·필터, 오른쪽 끝 버튼 (주 동작이 맨 오른쪽). 모든 화면 같은 자리 ---------- */
.card-h { flex-wrap: wrap; gap: var(--s-3); }
.bar-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .bar-actions { width: 100%; justify-content: flex-start; margin-left: 0; } }
/* 카드 밖 도구줄 (기간 이동 막대 + 오른쪽 버튼) */
.page-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.page-bar > .pn { margin-bottom: 0; }

/* ---------- 삭제·초기화 — 모든 화면 같은 모양: 빨간 글자 + 테두리 (아이콘 없음) ---------- */
.btn.danger-text { color: var(--bad); background: var(--surface); border-color: var(--line-2); font-weight: 700; }
.btn.danger-text:hover:not(:disabled) { background: var(--bad-bg); border-color: var(--bad); }

/* ---------- 버튼 아이콘 — 글자가 있는 버튼은 글자만 (실무 화면 통일)
   남기는 것: 아이콘만 있는 버튼(복사·보기·닫기), 방향 화살표(‹ 목록, 이전/다음, 펼치기) ---------- */
.btn:has(> span) > svg:not([data-icon="left"]):not([data-icon="right"]):not([data-icon="down"]):not([data-icon="up"]) { display: none; }

/* ---------- 목록 도구줄 (core/ui/tool-bar.js) — 모든 목록 화면 같음, 카드 밖 위에 ----------
   (필터 있는 화면만) 보조 필터 줄
   한 줄: 왼쪽 밑줄 탭, 오른쪽 끝 검색칸 → 버튼. 탭이 넘치면 ‹ › 버튼·마우스 휠로 넘긴다. 검색칸은 늘이지 않는다 */
.tb-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.tb-filters .pn { margin-bottom: 0; }
.tool-bar { display: flex; align-items: stretch; gap: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); min-height: 50px; }
.tb-scroll { flex: 1 1 0; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.tb-scroll::-webkit-scrollbar { display: none; }
.tb-scroll > * { flex: none; display: flex; }
.tb-scroll .cat-tabs { overflow: visible; padding: 0; border-bottom: 0; }
.tb-arrow {
  flex: none; width: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm);
}
.tb-arrow:hover { color: var(--ink); background: var(--surface-2); }
.tb-arrow[hidden] { display: none; }
.tb-right { flex: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0 var(--s-2) var(--s-3); }
.tb-search { width: 220px; }
.tb-search input { width: 100%; }
.tb-who select { min-width: 140px; }
@media (max-width: 640px) {
  /* 휴대폰: 검색·버튼이 위, 탭이 아래 (검색칸 너비는 그대로) */
  .tool-bar { flex-wrap: wrap; }
  .tb-right { order: -1; width: 100%; padding: var(--s-2) 0 0; flex-wrap: wrap; }
  .tb-search { width: 160px; }
}
@media (pointer: coarse) { .tb-arrow { display: none; } }   /* 휴대폰은 밀어서 넘긴다 */
/* 처리할 것이 있을 때만 붙는 숫자 (승인 대기 등) */
.cat-tab .c.alert, .cat-tab[aria-selected="true"] .c.alert { background: var(--warn-bg, var(--point-soft)); color: var(--warn, var(--point)); }
/* 탭이 없는 화면의 도구줄: 왼쪽 필터, 오른쪽 끝 검색·버튼 */
.tb-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.tb-top > .tb-filters { margin-bottom: 0; }
.tb-top > .tb-right { margin-left: auto; padding: 0; }
.text-bad { color: var(--bad); }


/* ============================================================
   디자인 시스템에서 새로 정한 부품
   ============================================================ */

/* ---------- 버튼 — 테두리 없음 · 크게 ---------- */
.btn.plain { background: transparent; border-color: transparent; color: var(--kg-ink); }
.btn.plain:hover:not(:disabled) { background: var(--kg-surface-2); }
.btn.lg { min-height: 48px; padding: 0 var(--kg-space-6); font-size: var(--kg-fs-base); border-radius: var(--kg-radius-lg); }
a.btn, a.btn:hover { text-decoration: none; }

/* ---------- 체크박스 · 라디오 — 모든 사이트 같은 모양 (core/ui/form.js checkInput · radioGroup) ---------- */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 20px; height: 20px; display: inline-grid; place-content: center;
  border: 1.5px solid var(--kg-line-2); background: var(--kg-surface);
  cursor: pointer; transition: background .12s, border-color .12s;
}
input[type=checkbox] { border-radius: var(--kg-radius-sm); }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::after {
  content: ''; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--kg-on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .12s;
}
input[type=radio]::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kg-on-brand);
  transform: scale(0); transition: transform .12s;
}
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--kg-brand); border-color: var(--kg-brand); }
input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
input[type=radio]:checked::after { transform: scale(1); }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--kg-brand); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid var(--kg-focus); outline-offset: 2px; }

/* 글자와 함께 — 누르기 쉬운 줄 */
label.check, .radio-group label {
  display: inline-flex; align-items: center; gap: var(--kg-space-2);
  min-height: var(--kg-tap); cursor: pointer; font-size: var(--kg-fs-sm); color: var(--kg-ink);
}
.radio-group { display: flex; flex-wrap: wrap; gap: var(--kg-space-1) var(--kg-space-5); }
.radio-group.stack { flex-direction: column; gap: 0; }

/* ---------- 날짜 · 시간 ---------- */
input[type=date], input[type=time] { min-width: 0; font-variant-numeric: tabular-nums; }
input[type=time] { width: auto; min-width: 120px; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); }
.time-range { display: inline-flex; align-items: center; gap: var(--kg-space-2); }

/* ---------- 알림 상자 — 화면 안 안내 한 줄 (팝업 아님) ---------- */
.note {
  display: flex; gap: var(--kg-space-2); align-items: flex-start;
  padding: var(--kg-space-3) var(--kg-space-4); border-radius: var(--kg-radius-lg);
  background: var(--kg-info-bg); color: var(--kg-info); font-size: var(--kg-fs-sm); line-height: 1.6;
}
.note.good { background: var(--kg-good-bg); color: var(--kg-good); }
.note.warn { background: var(--kg-warn-bg); color: var(--kg-warn); }
.note.bad  { background: var(--kg-bad-bg);  color: var(--kg-bad); }
.note.neutral { background: var(--kg-surface-2); color: var(--kg-ink-2); }
.note svg { flex: none; margin-top: 3px; }
.chip.info { background: var(--kg-info-bg); color: var(--kg-info); }

/* ---------- 숫자 배지 (처리할 것이 있을 때만) ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--kg-radius-full); background: var(--kg-badge); color: var(--kg-badge-ink);
  font-size: var(--kg-fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 스위치 안의 체크박스는 숨긴 채로 (위 체크박스 모양이 덮지 않게) */
.switch input[type=checkbox] { width: 0; height: 0; border: 0; }

/* ---------- 버튼 — 메인·베이커리 같은 큰 안내 버튼에 ---------- */
.btn.strong { background: var(--kg-ink); border-color: var(--kg-ink); color: var(--kg-bg); }
.btn.strong:hover:not(:disabled) { background: var(--kg-ink-hover); border-color: var(--kg-ink-hover); }
.btn.outline { background: transparent; border-color: var(--kg-ink); color: var(--kg-ink); }
.btn.outline:hover:not(:disabled) { background: var(--kg-ink); color: var(--kg-bg); }
.btn.inverse { background: var(--kg-bg); border-color: var(--kg-bg); color: var(--kg-ink); }   /* 색 띠 위 */
.btn.pill { border-radius: var(--kg-radius-full); }
.btn.wide { width: 100%; }

/* ---------- 아이콘만 있는 버튼 — 복사 · 보기 · 닫기 (글자 버튼에는 아이콘을 넣지 않는다) ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--ink-2);
  cursor: pointer; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.copy-ib { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.copy-ib:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- 창(모달) — 팝업은 쓰지 않는다. 예외: 비밀번호 1회 표시 · 저장 안 하고 나갈 때 확인 ---------- */
dialog.modal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  box-shadow: var(--shadow-3);
}
dialog.modal::backdrop { background: var(--kg-scrim); backdrop-filter: blur(2px); }
dialog.modal .m-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-3) var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line);
}
dialog.modal .m-h h2 { font-size: var(--fs-md); }
dialog.modal .m-b { padding: var(--s-5) var(--s-6) var(--s-4); }
dialog.modal .m-b { padding: 0 var(--s-6) var(--s-4); overflow-y: auto; }
dialog.modal .m-f {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-4) var(--s-6) var(--s-6);
}