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

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

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-xs); }
.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=date], 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); }
.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 {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r);
  background: var(--ink); color: var(--bg);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); font-weight: 600;
  animation: toast-in .18s ease-out;
}
.toast.bad  { background: var(--bad);  color: #fff; }
.toast.good { background: var(--good); color: #fff; }
@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: 11px; 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 { gap: 4px; white-space: nowrap; }
.row-toggle svg { transition: transform .15s; }
.row-toggle .when-open { display: none; }
.is-open .row-toggle { color: var(--point); border-color: var(--point); }
.is-open .row-toggle .when-open { display: inline; }
.is-open .row-toggle .when-closed { display: none; }
.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: 11px; 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: 11px; 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: 10px; 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: 10.5px; 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: 11px; 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.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: 10px; 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; }