/* 통영어부 관리 — 디자인 2.퍼플 (다크 기본) */
:root, [data-theme="dark"] {
  --bg: #0f0d1a; --surface: #17142a; --raised: #201c38; --tint: #1a1631;
  --border: #2c2748; --strong: #6c6690;
  --text: #f3f1ff; --text2: #d6d2ee; --muted: #a29dc0; --subtle: #857fa6;
  --primary: #5b4bd1; --primary-hover: #6e5fe0; --ink: #b5a8ff; --soft: #262046;
  --accent: #947eff; --lavender: #3a3170; --on-primary: #ffffff;
  --ok: #4ade80; --ok-bg: #13281d; --err: #f87171; --err-bg: #2e1519;
  --warn: #fbbf24; --warn-bg: #2d2210; --info: #93b4ff; --info-bg: #16203a; --blue: #7fb2ff; --blue-bg: rgba(59,130,246,.18);
  --shadow-p: 0 8px 24px rgba(91,75,209,.45);
  --s1: #b5a8ff; --s2: #5b4bd1; --s3: #fbbf24; --s4: #6c6690; --dim: #3a3170;
  --rk-us: #ff4d4f; --rk-c1: #b5a8ff; --rk-c2: #93b4ff; --rk-c3: #6c6690;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f0f2f4; --surface: #ffffff; --raised: #f6f5fb; --tint: #e9e5ff;
  --border: #e4e2ef; --strong: #8a87a0;
  --text: #121212; --text2: #2b2b2d; --muted: #6b6880; --subtle: #8a87a0;
  --primary: #4333af; --primary-hover: #7a6bcb; --ink: #4333af; --soft: #ebe7ff;
  --accent: #947eff; --lavender: #c9bfff;
  --ok: #14733a; --ok-bg: #e7f6ec; --err: #c4262c; --err-bg: #fdecec;
  --warn: #b45309; --warn-bg: #fff3e0; --info: #2563eb; --info-bg: #eaf1ff; --blue: #1d5fd6; --blue-bg: #e3edff;
  --shadow-p: 0 8px 20px rgba(67,51,175,.28);
  --s1: #4333af; --s2: #947eff; --s3: #c9bfff; --s4: #f59e0b; --dim: #c9bfff;
  --rk-us: #dc2626; --rk-c1: #7c3aed; --rk-c2: #2563eb; --rk-c3: #8a87a0;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Urbanist", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ── 틀 ── */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; }
.side {
  flex: 1 1 240px; max-width: 100%; background: var(--surface); border-right: 1px solid var(--border);
  padding: 24px 20px; display: flex; flex-direction: column; gap: 6px;
}
.brand { font-size: 18px; font-weight: 600; padding: 0 4px 24px; display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--primary); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.nav {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px;
  color: var(--text2); font-weight: 500;
}
.nav .ic { color: var(--ink); }
.nav:hover { background: var(--raised); text-decoration: none; }
.nav.on { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-p); }
.nav.on .ic { color: var(--on-primary); }
.nav-list { display: contents; }
.nav.nav-drag { opacity: .45; outline: 2px dashed var(--ink); outline-offset: -2px; }
[data-sortable] .nav { cursor: pointer; }
.me {
  margin-top: auto; padding: 12px 14px; border-radius: 16px; background: var(--raised);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.me-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.me-txt span { font-size: 12px; color: var(--muted); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid transparent;
}
.icon-btn:hover { border-color: var(--border); color: var(--text); text-decoration: none; }

.main { flex: 999 1 560px; min-width: 0; padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.top h1 { margin: 0; font-size: 18px; font-weight: 600; }
.top-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--raised); border: 1px solid var(--border); }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg button .ic { width: 15px; height: 15px; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* ── 카드·표 ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.card h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 10px; }
.kpi .label { font-size: 14px; font-weight: 400; color: var(--text2); }
.kpi .value { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.badge { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--raised); color: var(--text2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.pu { background: var(--err-bg); color: var(--err); } .badge.pd { background: var(--blue-bg); color: var(--blue); }   /* 가격 ▲ / ▼ */
.statement { margin: 4px 0 0; font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--text2); }
.statement .lead { color: var(--text); font-weight: 700; }
.statement .rest { color: var(--text2); }
/* 요약 숫자 배지 (오늘 챙길 일 등) — 0건은 흐리게 */
.st-cnt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.st-cnt .lead { font-size: 18px; font-weight: 700; color: var(--text); }
.st-cnt .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text2); }
.st-pill b { font-size: 14px; font-weight: 700; color: var(--text); }
.st-pill.zero { opacity: .4; }
.list { margin: 0; padding-left: 20px; color: var(--text2); }
.list li { margin: 4px 0; }

.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text2); }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.t td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
table.t td.num, table.t th.num { text-align: right; }

/* ── 폼 ── */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.input {
  padding: 10px 12px; min-height: 44px; border: 1px solid var(--strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; width: 100%;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 44px;
  border-radius: 10px; border: 1px solid var(--strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--raised); text-decoration: none; }
.btn.primary { border: 0; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-p); }
.btn.primary:hover { background: var(--primary-hover); }
.alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.alert.err { background: var(--err-bg); color: var(--err); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row > .card { flex: 1 1 360px; min-width: 0; }

/* ── 화면 공통 (대시보드·판매·순위·히스토리) ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  padding: 8px 14px; min-height: 40px; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--raised); color: var(--text2);
}
.chip[aria-pressed="true"], .chip[aria-selected="true"] { border-color: var(--ink); background: var(--soft); color: var(--ink); }
.chip:disabled { opacity: .5; cursor: default; }
.tab-grp { display: contents; }   /* 탭·칩만 묶는 틀 — 기본은 없는 것처럼, 블랙 메탈 라이트에선 음각 받침 */
.tag-out { margin-left: auto; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--strong); color: var(--muted); }
.kpi-head { display: flex; align-items: center; gap: 10px; }
.tile {
  width: 40px; height: 40px; border-radius: 10px; background: var(--soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.tile.hi { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-p); }
.kpi .sub { font-size: 12px; color: var(--muted); }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head h2 { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 400; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.line { width: 16px; height: 3px; border-radius: 2px; }
.legend i.dash { width: 14px; height: 0; border-top: 2px dashed var(--warn); border-radius: 0; }
.row2 { display: flex; flex-wrap: wrap; gap: 16px; }
.row2 > .card { min-width: 0; }
.grow2 { flex: 2 1 520px; } .grow1 { flex: 1 1 300px; } .half { flex: 1 1 360px; }
.empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 14px; }
.loading { color: var(--muted); font-size: 14px; }

/* 쌓은 막대 (대시보드) */
.sbars { display: flex; align-items: flex-end; gap: 10px; height: 220px; border-bottom: 1px solid var(--border); }
.sbars .col { flex: 1 0 18px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.sbars .tot { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.sbars .sg:first-of-type { border-radius: 6px 6px 0 0; }
.sbars .tot + .sg { border-radius: 6px 6px 0 0; }
.xlabels { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.xlabels div { flex: 1 0 18px; text-align: center; }
/* 세로 막대 (요일·시간대) */
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 160px; border-bottom: 1px solid var(--border); }
.vbars .col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; align-items: stretch; min-width: 0; }
.vbars .v { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.vbars .b { border-radius: 6px 6px 0 0; min-height: 2px; }
.vbars.thin { gap: 3px; height: 150px; } .vbars.thin .b { border-radius: 3px 3px 0 0; }
.axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { font-family: inherit; }
/* 그래프 높이 조절 손잡이 (모든 그래프 공통) */
.chart-rs { height: 14px; margin-top: 2px; cursor: ns-resize; position: relative; touch-action: none; user-select: none; }
.chart-rs::after { content: ''; position: absolute; left: 50%; top: 5px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--border); transition: background .15s; }
.chart-rs:hover::after, .chart-rs.on::after { background: var(--accent); }
@media print { .chart-rs { display: none; } }

/* 목록 줄 */
.line-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text2); }
.line-item .when { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.line-item .grow { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.line-item .badge { white-space: nowrap; }
.line-item .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text2); }
.kv span:first-child { color: var(--muted); }
.big-rank { display: flex; align-items: baseline; gap: 8px; }
.big-rank b { font-size: 28px; font-weight: 700; color: var(--ink); }
/* 표 아래 긴 설명은 '표 보는 법'으로 접음 (매일 보는 화면이라 늘 펼쳐 둘 필요 없음) */
details.how { margin-top: 8px; font-size: 12px; color: var(--muted); }
details.how > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; padding: 4px 8px; margin-left: -8px; border-radius: 6px; color: var(--muted); }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; font-weight: 700; }
details.how > summary:hover { color: var(--text); background: var(--raised); }
details.how > :not(summary) { margin: 6px 0 0; color: var(--text2); line-height: 1.6; }
.more { display: inline-block; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* 표 보조 */
table.t tr.us td { background: var(--soft); color: var(--ink); font-weight: 600; }
table.t tr.out td { opacity: .55; }
.up { color: var(--warn); } .down { color: var(--ok); } .flat { color: var(--muted); }
.share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.share .bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.share .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.share span { font-size: 12px; color: var(--muted); width: 34px; text-align: right; }
.mini { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--soft); color: var(--ink); white-space: nowrap; }

/* 히스토리 */
.hist { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.hist .form { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.hist .timeline { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.form .pair { display: flex; flex-wrap: wrap; gap: 12px; } .form .pair > * { flex: 1 1 140px; min-width: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }
.month { margin: 12px 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ev { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.ev .d { flex: 0 0 52px; font-size: 14px; font-weight: 600; }
.ev .rail { flex: 0 0 3px; border-radius: 2px; }
.ev .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.ev .txt { font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ev .why { font-size: 13px; color: var(--muted); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.c-price { --c: var(--ink); --cb: var(--soft); } .c-cost { --c: var(--warn); --cb: var(--warn-bg); }
.c-ops { --c: var(--text2); --cb: var(--raised); } .c-supplier { --c: var(--info); --cb: var(--info-bg); }
.c-channel { --c: var(--ok); --cb: var(--ok-bg); } .c-ad { --c: var(--err); --cb: var(--err-bg); }
.c-other { --c: var(--muted); --cb: var(--raised); }
.cat { white-space: nowrap; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--cb); color: var(--c); }
.ev .rail { background: var(--c); }

/* ── 주문·발주 ── */
:root, [data-theme="dark"] { --day-bg: color-mix(in srgb, var(--text) 6%, var(--surface)); --day-line: color-mix(in srgb, var(--text) 70%, transparent); --day-sh: 0 5px 8px -5px rgba(0,0,0,.6); --sky: #7dd3fc; --ch-coupang: #f87171; --ch-naver: #4ade80; --ch-manual: #93b4ff; --day-row: #1d1938; }
[data-theme="light"] { --day-bg: color-mix(in srgb, var(--text) 4%, var(--surface)); --day-line: color-mix(in srgb, var(--text) 75%, transparent); --day-sh: 0 5px 8px -5px rgba(0,0,0,.28); --sky: #0369a1; --ch-coupang: #c4262c; --ch-naver: #14733a; --ch-manual: #2563eb; --day-row: #ecebf3; }
a.chip { display: inline-flex; align-items: center; box-sizing: border-box; }
a.chip:hover { text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.searchbox { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; border: 1px solid var(--strong); border-radius: 10px; background: var(--surface); }
.searchbox input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
/* 고르기 목록(펼친 목록) 글자·바탕 — 다크에서 흰 바탕에 흰 글자 되지 않게 */
select option, select optgroup { background-color: var(--opt-bg, var(--surface)); color: var(--text); }
.sel { padding: 8px 10px; min-height: 40px; border: 1px solid var(--strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.sheet-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sheet-scroll { overflow: auto; max-height: calc(100vh - 230px); min-height: 360px; }
table.sheet { border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--text2); white-space: nowrap; min-width: 100%; }
table.sheet th { position: sticky; top: 0; z-index: 1; background: var(--raised); padding: 9px 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); }
table.sheet td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.sheet td.r, table.sheet th.r { text-align: right; } table.sheet td.c, table.sheet th.c { text-align: center; }
table.sheet tr.day td { background: var(--day-bg); color: var(--text); font-weight: 600; position: sticky; top: 36px; z-index: 0; border-top: 0; border-bottom: 2px solid var(--day-line); box-shadow: var(--day-sh); white-space: normal; padding: 12px 12px 9px; }
table.sheet tr.day td span, table.sheet tr.day td b { margin-left: 12px; }
table.sheet tr.day .dd { margin-left: 0; font-size: 14px; font-weight: 700; color: var(--text); }
table.sheet tr.day .rng { font-weight: 400; color: var(--text2); }
table.sheet tr.day .n1 { color: var(--ch-coupang); } table.sheet tr.day .n2 { color: var(--ch-naver); } table.sheet tr.day .n3 { color: var(--ch-manual); }
table.sheet tr.day .st { color: var(--warn); }
table.sheet tr.day .mg { color: var(--sky); } table.sheet tr.day .mg small { font-weight: 400; color: var(--muted); font-size: 12px; }
table.sheet tr.day .kg { font-weight: 400; color: var(--text2); } table.sheet tr.day .ex { font-weight: 400; color: var(--muted); font-size: 12px; }
table.sheet tr.g1:not(.day) td { background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
table.sheet tr.ch1 td:first-child { border-left: 4px solid var(--ch-coupang); } table.sheet tr.ch2 td:first-child { border-left: 4px solid var(--ch-naver); } table.sheet tr.ch3 td:first-child { border-left: 4px solid var(--ch-manual); }
table.rz-on td, table.rz-on th { overflow: hidden; text-overflow: ellipsis; }
.tg.ok { background: var(--ok-bg); color: var(--ok); }
th .rz { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; }
th .rz:hover, th .rz.on { background: color-mix(in srgb, var(--ink) 35%, transparent); }
table.sheet tr.cancel td { opacity: .45; text-decoration: line-through; }
table.sheet tr.acq td { background: var(--raised); }
table.sheet tr:hover td { background: var(--soft); }
/* 마우스를 올린 줄: 날짜 묶음 회색 바탕(g1)·기록 있는 줄 위에서도 구분되게 색을 따로 (더 구체적인 선택자로 덮음) */
table.sheet tbody tr:not(.day):hover > td { background: var(--row-hover, color-mix(in srgb, var(--primary) 20%, var(--surface))); }
table.sheet td.long { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.sheet td.mid { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chbar { display: inline-block; width: 4px; height: 16px; border-radius: 2px; vertical-align: -3px; margin-right: 6px; }
.chbar.c1 { background: var(--ch-coupang); } .chbar.c2 { background: var(--ch-naver); } .chbar.c3 { background: var(--ch-manual); }
.who { padding: 4px 3px; margin: -4px -3px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }   /* 누름 영역 24px 이상 (WCAG 2.2) — 바깥 여백을 같은 만큼 빼서 줄 높이는 그대로 */
.who.hc { color: var(--sky); }
.who.rt { color: var(--err); background: var(--err-bg); border-radius: 5px; padding: 0 5px; }   /* 반품·환불 이력 있는 고객 */
.who:hover { text-decoration: underline; }
.tg { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600; padding: 0 6px; line-height: 1.5; border-radius: 5px; background: var(--soft); color: var(--ink); text-decoration: none; }
.tg.err { background: var(--err-bg); color: var(--err); } .tg.warn { background: var(--warn-bg); color: var(--warn); } .tg.mut { background: var(--raised); color: var(--muted); } .tg.info { background: var(--info-bg); color: var(--info); }
.tg.blue { background: var(--blue-bg, rgba(59,130,246,.15)); color: var(--blue, #2563eb); }   /* 배송 완료 = 파랑 (스킨과 상관없이) */
.qty2 { font-weight: 700; color: var(--warn); }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--surface); border-left: 1px solid var(--strong); box-shadow: -24px 0 60px rgba(0,0,0,.35); z-index: 50; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.drawer[hidden] { display: none; }
.drawer h2 { margin: 0; font-size: 18px; }
.drawer .box { padding: 12px 14px; border-radius: 12px; background: var(--raised); font-size: 14px; }
.drawer .box.claim { background: var(--err-bg); }
.drawer .line { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.drawer .line .when { flex: 0 0 78px; color: var(--muted); }
.x-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); color: var(--text2); font: inherit; font-size: 18px; cursor: pointer; }
.mini-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-btns button { padding: 6px 10px; min-height: 36px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--raised); color: var(--text2); }
.mini-btns button[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); color: var(--ink); }
/* 실행 버튼 묶음: 주 버튼(.pri) · 글자만 버튼(.ghost — 취소처럼 덜 눌러야 하는 것) */
.mini-btns button.pri { border-color: transparent; background: var(--primary); color: var(--on-primary); }
.mini-btns button.ghost { border-color: transparent !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--muted) !important; }
.mini-btns button.ghost:hover { color: var(--text) !important; text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.panel { padding: 14px; border-radius: 12px; background: var(--raised); }
.item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px; border-radius: 12px; background: var(--raised); }
.item-row .field { flex: 1 1 100px; } .item-row .field.wide { flex: 2 1 140px; } .item-row .field.n { flex: 0 1 72px; }
.item-row .sum { flex: 0 1 110px; text-align: right; font-size: 13px; padding-bottom: 12px; }
.item-row .mg-c { flex: 0 1 130px; font-size: 12px; padding-bottom: 12px; color: var(--ok); white-space: nowrap; }
.item-row .mg-c.neg { color: var(--err); } .item-row .mg-c.dim { color: var(--muted); }
.item-row input[data-f=price]::placeholder { color: var(--muted); opacity: .75; }
.suggest { position: relative; }
.suggest ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--strong); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.3); max-height: 320px; overflow-y: auto; }
.suggest li button { width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.suggest li button:hover, .suggest li button:focus { background: var(--soft); }
.suggest li small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--strong); border-radius: 14px; background: var(--raised); text-align: center; cursor: pointer; }
#preview td { white-space: nowrap; } #preview td.small { white-space: normal; min-width: 220px; }
.drop.over { border-color: var(--ink); background: var(--soft); }

/* ── 로그인 ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.login .brand { padding: 0 0 8px; justify-content: center; }

.nav-tog { display: none; }
@media (max-width: 820px) {
  .side { border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; padding: 12px 16px; }
  .brand { width: 100%; padding-bottom: 0; }
  /* 휴대폰: 메뉴 접기 (화면 위 1/3을 차지하던 것) */
  .nav-tog { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .side:not(.open) .nav-list, .side:not(.open) .me { display: none; }
  .side.open .brand { padding-bottom: 8px; }
  .nav { padding: 10px 12px; }
  .me { margin-top: 0; width: 100%; }
  .main { padding: 20px 16px 40px; }
  .statement { font-size: 14px; }
  .st-cnt .lead { font-size: 18px; }
  .sbars, .xlabels { gap: 4px; }
  .sbars .col, .xlabels div { flex-basis: 10px; }
  .sbars .tot { font-size: 10px; }
  .tag-out { margin-left: 0; }
}

/* ── 수정 필요 메모 (맨 위 버튼 → 오른쪽 패널) ── */
.fx-open { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; min-height:40px; border-radius:10px; border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.fx-open .ic { width:16px; height:16px; }
.fx-n { min-width:20px; padding:1px 6px; border-radius:10px; background:var(--warn); color:#111; font-size:12px; text-align:center; }
[data-theme="light"] .fx-n { color:#fff; }   /* 라이트는 주의색이 진해서 흰 글씨 */
.fx-panel { position:fixed; top:0; right:0; bottom:0; width:380px; background:var(--surface); border-left:1px solid var(--strong); box-shadow:none; z-index:60; display:flex; flex-direction:column; }
.fx-panel[hidden] { display:none; }
.fx-head { display:flex; align-items:center; gap:8px; padding:16px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.fx-head h2 { margin:0; font-size:18px; flex:1 1 auto; }
.fx-body { flex:1 1 auto; overflow-y:auto; padding:12px 18px 24px; display:flex; flex-direction:column; gap:14px; }
.fx-sec label { display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.fx-sec label span { font-weight:400; color:var(--muted); font-size:12px; }
/* 지금 보는 화면 칸 — 모든 스킨·라이트에서 잘 보이게 주황(수정 필요 버튼 색) 테두리 + 옅은 바탕 + 배지 (11/2) */
.fx-sec.cur { margin:0 -10px; padding:10px; border-radius:12px; background:var(--warn-bg); box-shadow:inset 0 0 0 2px var(--warn); }
.fx-sec.cur label { color:var(--text); }
.fx-sec.cur label span { font-weight:700; color:var(--warn); }
.fx-sec textarea { width:100%; box-sizing:border-box; min-height:64px; padding:10px 12px; border:1px solid var(--strong); border-radius:10px; background:var(--bg); color:var(--text); font:inherit; font-size:14px; line-height:1.55; resize:vertical; }
.fx-sec.cur textarea, [data-skin] .fx-sec.cur textarea { border-color:var(--warn); }
.fx-auto { padding:10px 12px; border-radius:12px; background:var(--err-bg); box-shadow:inset 0 0 0 1.5px var(--err); display:flex; flex-direction:column; gap:6px; }
.fx-auto[hidden] { display:none; }
.fx-auto-h { font-size:13px; font-weight:700; color:var(--err); display:flex; justify-content:space-between; gap:8px; }
.fx-auto-h span { font-weight:400; color:var(--muted); font-size:12px; }
.fx-auto-i { font-size:13px; line-height:1.5; color:var(--text); }
.fx-n.auto { background:var(--err); color:#fff; }
.fx-foot { padding:10px 18px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
/* 열려 있으면 화면을 가리지 않고 오른쪽에 붙음 — 본문이 그만큼 좁아짐 */
html.fx-docked .app { padding-right:380px; }
@media (max-width: 820px) {
  .fx-open { padding:6px 10px; }
  .fx-panel { width:100vw; box-shadow:-24px 0 60px rgba(0,0,0,.35); }
  html.fx-docked .app { padding-right:0; }
}

/* 주문·발주 탭 오른쪽 '쿠팡 주문 HH:MM 기준' */
.cp-stamp { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.cp-stamp b { color:var(--text); }
.cp-stamp .w { color:var(--warn); } .cp-stamp .e { color:var(--err); cursor:help; }
.cp-stamps { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.cp-stamps .cp-stamp { margin-left:0; justify-content:flex-end; }
.cp-stamp button { padding:5px 10px; min-height:32px; border-radius:8px; border:1px solid var(--border); background:var(--raised); color:var(--text2); font:inherit; font-size:12px; cursor:pointer; }

.x-del { margin-left:6px; padding:1px 7px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.x-del:hover { color:var(--err); border-color:var(--err); }

/* 표 공통 도구 — 제목 끌어 순서 바꾸기 */
th.tt-h { cursor: grab; user-select: none; }
th.tt-h.tt-mv { opacity: .45; }
th.tt-h.tt-dl { box-shadow: inset 3px 0 0 var(--primary); }
th.tt-h.tt-dr { box-shadow: inset -3px 0 0 var(--primary); }
body.tt-dragging, body.tt-dragging * { cursor: grabbing !important; user-select: none; }
/* 수기 주문 고치기 링크 */
.x-ed { margin-left:6px; padding:1px 7px; border-radius:6px; border:1px solid var(--border); color:var(--ink); font-size:12px; text-decoration:none; white-space:nowrap; }
.x-ed:hover { border-color:var(--primary); background:var(--soft); }
button.x-ed { background:transparent; font:inherit; font-size:12px; cursor:pointer; }
a.ed-lk { color:inherit; text-decoration:none; }
a.ed-lk:hover { color:var(--ink); text-decoration:underline; }

/* 광고 포함/제외 버튼 (모든 화면 공통) */
.ad-chip { min-height:34px; padding:5px 14px; font-weight:600; font-size:13px; }
.ad-chip[aria-pressed="false"] { border-style:dashed; }

/* 날짜별 배경 번갈아 (TY.stripe) */
.dz, tr.dz > td { background: color-mix(in srgb, var(--text) 7%, transparent); }
.line-item[data-day] { padding-left: 10px; padding-right: 10px; }
.line-item.dz-top { border-top: 1px solid var(--strong); }
tr.dz-top > td { border-top: 1px solid var(--strong); }
.drawer .line[data-day] { padding-left: 8px; padding-right: 8px; }
.drawer .line.dz-top { border-top-color: var(--strong); }

/* 왼쪽 메뉴: 화면 높이에 붙어 따라다님 — 로그아웃(.me)은 늘 화면 아래쪽, 창이 낮으면 메뉴 밑에 (메뉴를 덮지 않고 메뉴 칸만 스크롤) */
@media (min-width: 821px) {
  .side { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; flex: 0 0 240px; }
  .side .me { flex: 0 0 auto; margin-top: auto; }
}

/* 팝업(?popup=1)으로 열린 화면: 메뉴·머리줄·탭 숨김 */
html.popup .side, html.popup header.top, html.popup .pop-hide, html.popup [aria-label="주문·발주"], html.popup #fx-open, html.popup .fx-panel { display: none !important; }
html.popup .main { padding: 16px; }
html.popup.fx-docked .app { padding-right: 0; }
/* 주문 목록 위 팝업 창 */
.pop-back { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pop-box { width: min(1100px, 100%); height: min(900px, 100%); background: var(--bg, var(--surface)); border: 1px solid var(--strong); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pop-box iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg, var(--surface)); }
/* 수기 주문 출고 버튼 */
button.ship-b { cursor: pointer; border: 0; font: inherit; }
button.tg { min-height: 24px; padding: 3px 8px; margin-block: -3px; vertical-align: middle; }   /* 누르는 배지(지인·출고 등) 누름 영역 24px — 위아래 바깥 여백을 빼서 줄 높이는 그대로 */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
/* 출고 완료된 수기 주문 배지(누르면 되돌리기)는 쿠팡·네이버 '✓ 출고 완료' 배지와 같은 모양 */
button.tg.ship-b { font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 6px; min-height: 0; margin-block: 0; }
button.ship-go { margin-left: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; min-height: 24px; margin-block: -3px; vertical-align: middle; border-radius: 5px; background: var(--primary); color: var(--on-primary); }
button.ship-go:hover { filter: brightness(1.1); }
button.ship-go.late { background: var(--primary); color: var(--on-primary); }   /* 늦은 건도 버튼은 평소 색 — 늦었다는 표시는 날짜 쪽 빨강으로 */

/* 아직 안 만든 API 기능 자리 (발주 → 송장) */
.api-soon { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px dashed var(--border); border-radius:10px; }
.api-soon .btn[disabled] { opacity:.55; cursor:not-allowed; }

/* 글꼴: 프리텐다드 (설정 > 디자인 스킨 > 글꼴) — 스킨 글꼴(Urbanist·Lexend·Chakra Petch·Noto Sans KR) 대신 모든 글자 */
html[data-font="pretendard"] body,
html[data-font="pretendard"] body *:not(code):not(pre):not(kbd) {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Noto Sans KR", sans-serif !important;
}

/* 잠깐 떴다 사라지는 알림 (TY.toast) — 수정 필요 '전체 복사' 등 */
.ty-toast { position: fixed; left: 50%; bottom: 32px; z-index: 9999; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 12px; background: #16A34A; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: opacity .18s ease, transform .18s ease; max-width: calc(100vw - 32px); }
.ty-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ty-toast.err { background: var(--err, #DC2626); }
@media (prefers-reduced-motion: reduce) { .ty-toast { transition: none; } }

/* 켜고 끄는 스위치 — <button type="button" class="sw" role="switch" aria-checked="false"><i></i></button>
   길쭉한 홈(음각) 안에서 동그란 손잡이가 좌우로 움직임. 켜면 홈이 진해지고 손잡이가 오른쪽 */
.sw { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; vertical-align: middle;
  background: var(--raised); box-shadow: inset 0 2px 4px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.5); transition: background .18s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.08); transition: transform .18s ease; }
.sw[aria-checked="true"] { background: var(--primary); }
.sw[aria-checked="true"] i { transform: translateX(20px); }
.sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); cursor: pointer; user-select: none; }
@media (prefers-reduced-motion: reduce) { .sw, .sw i { transition: none; } }

/* ── 색의 뜻 (11/3 디자인 점검) ──
   가격 방향: ▲ 빨강(오름·더 비쌈) · ▼ 파랑(내림·더 쌈) — .pu / .pd
   실적(판매량·전환·순위): 좋아짐 초록 · 나빠짐 빨강 / 손해·문제 = 빨강 (.neg) / 확인 필요 = 노랑 / 끝난 상태 배지 = 초록 */
.pu { color: var(--err); } .pd { color: var(--blue); } .neg { color: var(--err); }
b.pu, b.pd, span.pu, span.pd { font-weight: 600; }
/* 값이 없는 칸(– - —)은 가운데 — 오른쪽 끝에 붙으면 옆 칸의 마이너스처럼 보여서 (app.js가 자동으로 .nil 붙임) */
td.nil, th.nil { text-align: center !important; color: var(--muted); }
/* 날짜 소제목 (기록 목록 등) — 표의 날짜 줄과 같은 모양 */
.day-h { position: sticky; top: 0; z-index: 1; padding: 12px 12px 8px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--day-bg); border-bottom: 2px solid var(--day-line); box-shadow: var(--day-sh); }
/* 그래프 위 결정 기록 번호 → 그래프 아래 목록 (TY.lines marks) */
.ch-marks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 6px 24px; font-size: 13px; color: var(--text2); }
.ch-marks li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ch-marks .n { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--warn); color: var(--surface); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ch-marks .d { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-marks .t { min-width: 0; overflow-wrap: anywhere; }

/* 그래프 잡아 끌기 (TY.pan) — 손 모양 커서 · 끄는 동안 마우스 상자 숨김 · 휴대폰은 좌우만 그래프가 받고 위아래는 화면 스크롤 */
.ty-pan-on { cursor: grab; touch-action: pan-y; }
.ty-pan-on svg, .ty-pan-on .sbars { -webkit-user-select: none; user-select: none; }
.ty-panning, .ty-panning * { cursor: grabbing !important; }
.ty-panning :is(.rk-tip, .sl-tip) { display: none !important; }
.ty-pan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ty-pan[hidden] { display: none; }
.ty-pan input[type=range] { flex: 1 1 240px; min-width: 0; height: 24px; accent-color: var(--ink); cursor: pointer; }
.ty-pan .ty-pan-cur { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ty-pan .ty-pan-last { min-height: 30px; padding: 3px 10px; font-size: 12px; }

/* 드롭다운 화살표: 브라우저 기본 화살표가 오른쪽 벽에 딱 붙던 것 → 직접 그린 화살표를 오른쪽에서 12px 안쪽에 (모든 스킨 · 11/4)
   스킨이 background 를 통째로 바꿔도 화살표는 남도록 그림 쪽만 !important */
select:is(.sel, .input) {
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238C929C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important;
}
select:is(.sel, .input)::-ms-expand { display: none; }

/* ── 휴대폰: 버튼 묶음(서브메뉴·필터·회차)은 여러 줄로 접지 않고 한 줄 — 옆으로 밀어서 봄 (11/10) ── */
@media (max-width: 820px) {
  html[data-skin] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) {
    display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  html[data-skin] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg)::-webkit-scrollbar { display: none; }
  html[data-skin] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > * { flex: 0 0 auto; white-space: nowrap; }
  /* 더 있는 쪽 끝을 흐리게 (app.js 가 붙임) */
  .hs-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
  .hs-l { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 34px), transparent); }
  .hs-l.hs-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
}