/* ============================================================
   기본 요소 — 리셋, 타이포, 폼, 버튼, 카드, 표
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
h1 { font-size: var(--fs-lg); }
h2 { font-size: var(--fs-md); }
h3 { font-size: var(--fs-base); }
p  { margin: 0; }

a { color: var(--point); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 포커스 표시 — 키보드 사용자에게 반드시 보이게 */
: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: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1L6 6.5L11 1' stroke='%238C8681' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

/* 스위치 */
.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: #fff; 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 {
  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-bottom: var(--s-2); }

/* ---------- 알림 토스트 ---------- */
#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: #26231F; color: #FBF8F2;           /* 크림·다크 화면 모두 같은 진한 알약 */
  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: #5E5850; color: #fff;
}
.toast-i svg { width: 14px; height: 14px; stroke-width: 2.6; }
.toast.good .toast-i { background: #2E9A5C; }
.toast.bad  .toast-i { background: #D2493B; }
:root[data-theme="dark"] .toast { background: #F3EEE6; color: #1E1B18; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 모달 ---------- */
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: rgba(20,18,17,.45); 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);
}

/* ---------- 로딩 ---------- */
.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/charts.js) — 얇은 막대, 끝만 둥글게, 목표선, 값은 글자색
   ============================================================ */
.ch-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--ink-2); }
.ch-key { display: inline-flex; align-items: center; gap: 6px; }
.ch-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-key i.tick { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); }

.ch-bars .ch-legend { margin-bottom: var(--s-3); }
.ch-rows { display: flex; flex-direction: column; }
.ch-row, .ch-axis {
  display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: var(--s-3); align-items: center;
}
.ch-row {
  width: 100%; min-height: 34px; padding: 3px var(--s-2);
  border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.ch-row:hover, .ch-row:focus-visible { background: var(--surface-2); outline: none; }
.ch-row:focus-visible { box-shadow: inset 0 0 0 2px var(--point); }
.ch-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ch-name .n { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name .s { font-size: var(--fs-2xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-plot { display: flex; align-items: center; gap: var(--s-2); min-width: 0; position: relative; }
.ch-track { position: relative; flex: 1; height: 14px; }
.ch-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 0 4px 4px 0;            /* 둥근 쪽은 값 끝, 바닥 쪽은 각지게 */
  transition: filter .12s;
}
.ch-row:hover .ch-bar, .ch-row:focus-visible .ch-bar { filter: brightness(1.12); }
.ch-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .75; }
.ch-val { flex: none; min-width: 64px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; gap: 4px; align-items: center; }
.ch-flag { flex: none; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); }
.ch-axis { padding: 0 var(--s-2); margin-top: 2px; }
.ch-axis .ch-plot { padding-right: 72px; }
.ch-ticks { position: relative; flex: 1; height: 16px; border-top: 1px solid var(--line); }
.ch-ticks span { position: absolute; top: 3px; transform: translateX(-50%); font-size: var(--fs-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-ticks span:first-child { transform: none; }
.ch-ticks span:last-child { transform: translateX(-100%); }
.ch-table { margin-top: var(--s-4); }
.ch-table summary { cursor: pointer; font-size: var(--fs-xs); color: var(--ink-2); }
.ch-table .table-wrap { margin-top: var(--s-2); }

.ch-tip {
  position: fixed; z-index: 300; pointer-events: none;
  min-width: 160px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-3);
  font-size: var(--fs-xs);
}
.ch-tip-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 1px 0; }
.ch-tip-row .v { order: 2; font-variant-numeric: tabular-nums; color: var(--ink); }
.ch-tip-row .k { color: var(--ink-3); }
.ch-tip-row.strong .v { font-weight: 800; font-size: var(--fs-sm); }
.ch-tip-row.strong .k { color: var(--ink); font-weight: 600; }

.ch-split { display: flex; flex-direction: column; gap: var(--s-2); }
.ch-split-bar { display: flex; gap: 2px; height: 14px; }
.ch-split-bar .ch-seg:first-child { border-radius: 4px 0 0 4px; }
.ch-split-bar .ch-seg:last-child { border-radius: 0 4px 4px 0; }
.ch-split-bar .ch-seg:only-child { border-radius: 4px; }

.ch-mini { display: inline-block; width: 72px; vertical-align: middle; }
.ch-mini .ch-track { display: block; height: 8px; background: var(--chart-track); border-radius: 4px; }
.ch-mini .ch-bar { border-radius: 4px; }
.ch-mini .ch-tick { top: -3px; bottom: -3px; }
.ch-rows.ch-collapsed .ch-more { display: none; }

/* ---------- 분류 탭 (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"] { color: var(--point); border-bottom-color: var(--point); }
.cat-tab[aria-selected="true"] .c { background: var(--point-soft); color: var(--point); }
.cat-tabs.is-disabled .cat-tab { opacity: .45; cursor: default; }

/* ---------- 판매 상태 — 미판매(주황) · 판매 종료(흐리게) · 출시 예정(보라) ---------- */
.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); }

/* 대시보드 "확인 필요" 개수 — 오류가 아니라 할 일이라 주황 톤 (급한 신고 기한만 빨강) */
.todo-count {
  flex: none; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--warn-bg); color: var(--warn);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.todo-count.bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- 원가 현황 — 목표 마진율별 판매가를 표에서 바로 ---------- */
table.cost-tbl th.cost-group { text-align: center; border-left: 1px solid var(--line-2); color: var(--ink); }
table.cost-tbl th.cost-target { text-align: right; width: 92px; }
table.cost-tbl th.cost-target:first-child,
table.cost-tbl td:nth-last-child(4) { border-left: 1px solid var(--line); }
table.cost-tbl td.cost-mine { background: var(--point-soft); }

/* ---------- 버튼 묶음 고르기 (드롭다운 대신) ---------- */
.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: 0 1px 2px rgba(0,0,0,.08); }
.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); }