/* 쿠팡 ERP Claude판 — 색·간격 토큰은 tabler/tabler(MIT)의 밀도와 배치를 참고해 직접 작성. 청록 포인트·낮밤은 갓재 10/29 선택 */
:root {
  --bg: #f4f6fa; --panel: #fff; --line: #e3e8ef; --line2: #eef1f6; --text: #1d2939; --sub: #667085; --mute: #98a2b3;
  --brand: #0f9f9a; --brand-ink: #0b7c78; --brand-soft: #e3f6f5; --pos: #0e9384; --neg: #d92d20; --warn: #dc6803; --warn-soft: #fef0c7;
  --est: #7a5af8; --est-soft: #efebff; --ok-soft: #d1fadf; --shadow: 0 1px 2px rgba(16,24,40,.06);
  --r: 8px; --side: 212px; --font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic', sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #161c25; --panel: #1f2733; --line: #36435a; --line2: #2b3546; --text: #f3f5f9; --sub: #c4ccd8; --mute: #95a1b4;
  --brand: #2cc4bd; --brand-ink: #6ee0da; --brand-soft: #1a4442; --pos: #32d4a4; --neg: #ff6b5e; --warn: #f5a524; --warn-soft: #3a2a0c;
  --est: #a594ff; --est-soft: #241e45; --ok-soft: #12352a; --shadow: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grow { flex: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .mute { color: var(--mute); } .sub { color: var(--sub); }
.unk { color: var(--mute); font-size: 13px; }

/* 레이아웃 */
.app { display: flex; min-height: 100%; }
.side { width: var(--side); background: var(--panel); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; flex-shrink: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; font-size: 15px; }
.brand b { flex: 1; white-space: nowrap; }
.logo { width: 26px; height: 26px; border-radius: 7px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
nav .grp { font-size: 11px; color: var(--mute); padding: 12px 10px 4px; letter-spacing: .02em; }
nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--sub); white-space: nowrap; }
nav a:hover { background: var(--line2); text-decoration: none; color: var(--text); }
nav a.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
nav a i { font-style: normal; width: 18px; text-align: center; flex-shrink: 0; }
.side .rail-open { display: none; margin: 8px auto; }
/* 메뉴 맨 아래: 계정 + 로그아웃 */
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 10px 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.side-foot .who { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-width: 0; }
.side-foot .who span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-foot .who b, .side-foot .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .who small { color: var(--mute); font-size: 12px; }
.side-foot i { font-style: normal; width: 18px; text-align: center; flex-shrink: 0; }
.side-foot .btn { justify-content: flex-start; gap: 10px; color: var(--sub); }
.rail .side-foot .who, .rail .side-foot .btn span { display: none; }
.rail .side-foot .btn { justify-content: center; padding: 6px 0; }
.rail .side { width: 56px; }
.rail .brand b, .rail nav .grp, .rail nav a span, .rail .only-rail-hide { display: none; }
.rail nav a { justify-content: center; padding: 9px 0; }
.rail .side .rail-open { display: grid; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.menu-btn { display: none; }
.stage-pick select { font-weight: 600; min-width: 150px; }
#view { padding: 18px 24px 60px; width: 100%; outline: none; } /* 화면 너비를 꽉 채운다 */

/* 공통 요소 */
h1 { font-size: 21px; margin: 0; }
h2 { font-size: 16.5px; margin: 0 0 10px; }
.head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.card.flush { padding: 0; overflow: clip; } /* clip: 둥근 모서리는 유지하면서 표 머리글 고정(sticky)을 막지 않음 */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.btn:hover { border-color: var(--mute); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--neg); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; }
input[type=text], input[type=number], input[type=date], input[type=month], input[type=password], input[type=search], select {
  border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 9px; min-height: 32px; max-width: 100%; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chip { display: inline-block; font-size: 12.5px; padding: 1px 7px; border-radius: 99px; background: var(--line2); color: var(--sub); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--pos); }
.chip.est { background: var(--est-soft); color: var(--est); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 5px 11px; cursor: pointer; border-right: 1px solid var(--line); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
details summary { cursor: pointer; color: var(--sub); }
.note { font-size: 14.5px; color: var(--sub); }
.alert { padding: 9px 12px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-size: 13px; margin-bottom: 12px; }

/* 수치 카드 */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; box-shadow: var(--shadow); }
.kpi .k { font-size: 13.5px; color: var(--sub); }
.muted { color: var(--mute); }
.day .p.muted { font-size: 12px; font-weight: 600; }
.kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.kpi .s { font-size: 13px; color: var(--sub); margin-top: 1px; }

/* 표 */
.tbl-wrap { overflow: auto; max-height: calc(100vh - 210px); }
/* 큰 화면의 본문 표: 표 안쪽 스크롤 대신 화면 스크롤 — 끝까지 내려도 머리글이 상단 막대 바로 아래에 붙어 있다 */
@media (min-width: 861px) {
  #view .tbl-wrap:not([style*="max-height"]) { overflow: visible; max-height: none; }
  #view .tbl-wrap:not([style*="max-height"]) th { top: calc(var(--toph, 56px) + var(--barh, 0px)); z-index: 5; box-shadow: 0 1px 0 var(--line); }
  /* 표 위 검색·필터·선택 작업 줄도 같이 붙어 있게 (높이는 --barh로 JS가 잼) */
  #view .card.flush > .row:first-child { position: sticky; top: var(--toph, 56px); z-index: 7; background: var(--panel); border-bottom: 1px solid var(--line); }
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
th, td { padding: 8px 11px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; background: var(--panel); z-index: 2; font-weight: 600; color: var(--sub); font-size: 14.5px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.sort { cursor: pointer; user-select: none; }
th.sort[data-dir="asc"]::after { content: ' ▲'; font-size: 9px; }
th.sort[data-dir="desc"]::after { content: ' ▼'; font-size: 9px; }
tr.grp td { background: color-mix(in srgb, var(--line2) 70%, var(--panel)); font-weight: 700; font-size: 16.5px; border-top: 6px solid var(--bg); border-bottom: 1px solid var(--line); }
tr.grp:first-child td { border-top: 0; }
tr.grp.open td { background: color-mix(in srgb, var(--brand-soft) 75%, var(--panel)); }
tr.grp.open td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
tr.opt td { background: color-mix(in srgb, var(--brand-soft) 22%, var(--panel)); }
tr.opt td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
tr.opt td.name { padding-left: 34px; position: relative; font-weight: 500; }
tr.opt td.name::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 50%; width: 11px; border-left: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-bottom-left-radius: 4px; }
tr.opt:not(.last) td.name::after { content: ''; position: absolute; left: 16px; top: 50%; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); }
tr.opt.last td { border-bottom: 2px solid var(--line); }
tr.opt.sel td { background: var(--brand-soft); }
.vcaret { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 0; margin-right: 6px; border: 1.5px solid color-mix(in srgb, var(--brand) 60%, var(--line));
  border-radius: 6px; background: var(--panel); color: var(--brand-ink); font-size: 11px; line-height: 1; cursor: pointer; vertical-align: -4px; transition: transform .12s; }
.vcaret:hover { background: var(--brand-soft); }
.vcaret.ghost { visibility: hidden; } /* 옵션ID가 1개인 줄도 이름 위치를 맞춤 */
.vcaret.on { transform: rotate(90deg); background: var(--brand); border-color: var(--brand); color: #fff; }
tr.idrow td { background: color-mix(in srgb, var(--brand-soft) 10%, var(--panel)); font-size: 14.5px; }
tr.idrow td.name { padding-left: 58px; font-variant-numeric: tabular-nums; }
tr.idrow td.name::before { left: 38px; }
tr.idrow:not(.last) td.name::after { left: 38px; }
th[title], th[data-tip], .kpi .k[data-tip], .kpi .s[data-tip], td.wl [data-tip] { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--sub) 50%, transparent); text-underline-offset: 3px; }
tr.grp td:first-child { cursor: pointer; }
tr.sel td { background: var(--brand-soft); }
tr.hid td { opacity: .55; }
td.name { min-width: 220px; max-width: 520px; }
td.name .o { color: var(--sub); font-size: 12.5px; }
.caret { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border: 1.5px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--sub); font-size: 13px; line-height: 1; vertical-align: -6px; transition: transform .12s, background .12s; }
tr.grp td.name:hover .caret { border-color: var(--brand); color: var(--brand-ink); }
.open .caret { transform: rotate(90deg); background: var(--brand); border-color: var(--brand); color: #fff; }
tr.grp td.name { cursor: pointer; }
.empty { padding: 34px 16px; text-align: center; color: var(--sub); }
.empty .btn { margin-top: 10px; }

/* 달력 */
.cal-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .wd { font-size: 12px; color: var(--mute); text-align: center; padding: 2px 0; }
.day { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; min-height: 84px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.day:hover { border-color: var(--brand); }
.day.on { outline: 2px solid var(--brand); }
.day.out { visibility: hidden; }
.day.future { opacity: .45; cursor: default; }
.day .dn { font-size: 12px; color: var(--sub); display: flex; justify-content: space-between; align-items: center; }
.day .p { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day .r { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--pos); } .dot.est { background: var(--est); } .dot.mix { background: linear-gradient(90deg, var(--pos) 50%, var(--est) 50%); }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--sub); align-items: center; flex-wrap: wrap; }
.legend span { display: inline-flex; gap: 5px; align-items: center; }

/* 자료 넣기 */
.drop { display: block; border: 2px dashed var(--line); border-radius: 10px; padding: 34px 16px; text-align: center; background: var(--panel); cursor: pointer; transition: .12s; }
.drop.over, .drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.drop b { font-size: 16px; display: block; margin-bottom: 4px; }
.queue { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.qi { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); flex-wrap: wrap; font-size: 13.5px; }
.qi .nm { flex: 1; min-width: 180px; word-break: break-all; }

.nowrap td:not(.name) { white-space: nowrap; }

/* 메뉴·모달·알림 */
.menu-wrap { position: relative; display: inline-block; }
.pop { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 190px; padding: 4px; z-index: 40; }
.pop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.pop button:hover { background: var(--line2); }
.modal { position: fixed; inset: 0; background: rgba(15,20,27,.45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal[hidden] { display: none; }
.dlg { background: var(--panel); border-radius: 10px; width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.dlg h2 { font-size: 16px; }
.dlg .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1d2939; color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 70; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.err { background: var(--neg); }
.busy { opacity: .55; pointer-events: none; }
.bar { height: 6px; background: var(--line2); border-radius: 3px; overflow: hidden; min-width: 50px; }
.bar i { display: block; height: 100%; background: var(--brand); }

/* 모바일 */
@media (max-width: 860px) {
  .side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .18s; width: 240px; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .drawer .side { transform: none; }
  .rail .side { width: 240px; }
  .rail .brand b, .rail nav .grp, .rail nav a span { display: initial; }
  .rail nav a { justify-content: flex-start; padding: 7px 10px; }
  .rail .side-foot .who { display: flex; }
  .rail .side-foot .btn span { display: initial; }
  .rail .side-foot .btn { justify-content: flex-start; padding: 4px 9px; }
  .only-rail-hide, .rail-open { display: none !important; }
  .menu-btn { display: inline-grid; }
  .top { padding: 8px 12px; }
  .stage-pick select { min-width: 0; max-width: 46vw; }
  #view { padding: 14px 12px 60px; }
  .day { min-height: 58px; padding: 4px 5px; }
  .day .r { display: none; }
  .day .p { font-size: 11px; letter-spacing: -.02em; }
  .day.pay .dn .chip { display: none; } /* 좁은 화면: 지급됨/예정은 테두리 색으로만 */
  .day .p .unk { display: none; }
  .cal { gap: 3px; }
  .kpi .v { font-size: 17px; }
  .tbl-wrap { max-height: none; }
  .top .btn.ghost { display: none; }
}
/* SKU 대표 사진 */
.thumb { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 10px; vertical-align: middle; border-radius: 8px;
  overflow: hidden; background: var(--panel); border: 1px solid var(--line); flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.noimg { border: 1.5px dashed var(--line); color: var(--mute); font-size: 11px; font-weight: 600; cursor: pointer; }
.thumb.noimg:hover, .thumb.over { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.thumb[data-act] { cursor: pointer; }
.thumb .x { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border: 0; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 16px; padding: 0; cursor: pointer; display: none; }
.thumb:hover .x { display: block; }
@media (max-width: 860px) { .thumb { width: 34px; height: 34px; } .thumb.noimg { display: none; } }

/* SKU 대표코드 */
.code { display: inline-block; font: 600 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 7px; margin-right: 7px; border-radius: 5px; background: var(--brand); color: #fff; letter-spacing: .02em; vertical-align: 1px; }

/* 더블클릭 수정 칸 */
.ed { cursor: text; border-radius: 4px; }
.ed:hover { box-shadow: inset 0 0 0 1px var(--line); }
.inline-edit { width: 100%; min-width: 80px; padding: 3px 6px; font: inherit; text-align: inherit; border: 1px solid var(--brand); border-radius: 5px; background: var(--panel); color: var(--text); }

/* 상단 쿠팡 로그인 상태 */
.chip.cp { text-decoration: none; font-size: 12px; padding: 3px 9px; }

/* 로그인 화면 */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; padding: 20px; }
.login-card .brand { padding: 0 0 14px; }
.login-tabs { display: flex; margin-bottom: 14px; }
.login-tabs button { flex: 1; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card form[hidden] { display: none; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); }
.login-card input { width: 100%; }
.login-card .btn { justify-content: center; margin-top: 4px; }
.err { color: var(--neg); font-size: 13px; min-height: 1em; margin: 10px 0 0; }
/* 휴대폰은 저장된 자료 보기 전용: 넣기·수정 버튼을 숨긴다 */
.mobile-note { display: none; }
@media (max-width: 860px) {
  .pc-only, nav a[data-page=import], .grp:has(+ a[data-page=import]), [data-act=stageDlg], [data-act=stageDel], [data-act=keyDlg], [data-act=keyDel], [data-act=keyTest],
  [data-act=costDlg], [data-act=groupDlg], [data-act=hide], [data-act=pop], [data-act=delExpense], form[data-act=addExpense] { display: none !important; }
  .mobile-note { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 주간 성과표: 첫 칸(지표 이름) 왼쪽 고정, 구역 첫 줄 위에 선 */
.wk th.wl, .wk td.wl { position: sticky; left: 0; background: var(--panel); z-index: 3; min-width: 130px; white-space: nowrap; }
.wk th.wl { z-index: 6; }
.wk td.num, .wk th.num { white-space: nowrap; min-width: 0; }
/* 12주가 한 화면에 들어가게 숫자 칸을 촘촘히 (그래야 날짜 머리글이 화면 위에 붙어 따라온다) */
.wk table { font-size: 14px; } .wk td, .wk th { padding: 7px 6px; } .wk th { font-size: 13px; }
/* 성과표: 표 안 세로 스크롤 없이(화면 스크롤 하나), 넘치는 가로만 표 안에서 */
#view .tbl-wrap.wk { overflow-x: auto; overflow-y: hidden; max-height: none; }
#view .tbl-wrap.wk.fit { overflow: visible; }
/* 가로로 넘칠 때(26·52주)는 표가 스크롤 상자라 화면 기준 고정 위치(상단 막대 높이)를 쓰면 머리글이 본문 위로 내려와 겹친다 → 제자리 */
#view .tbl-wrap.wk:not(.fit) th { top: 0; }
.wk tr.sec td { border-top: 1px solid var(--line); }
.wk .ws { display: inline-block; width: 46px; font-size: 12.5px; color: var(--mute); }
.wk tr.blk td { background: var(--line2); font-weight: 600; cursor: default; }
.wk tr.blk.grp td { cursor: pointer; }
.wk .wn { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.wk .wnote { width: 100%; min-width: 0; min-height: 26px; padding: 2px 5px; font-size: 12.5px; }

/* 주별 그래프: 색 3개(파랑·주황·청록, 색약 검사 통과). 글자는 글자색, 선만 색 */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #b54708; }
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #e0882f; }
.vizs { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.viz { margin: 0; min-width: 0; }
.viz figcaption { font-weight: 600; font-size: 14.5px; color: var(--text); }
.viz .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--sub); margin: 4px 0 2px; }
.viz .legend i, .viz .tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.viz .plot { position: relative; }
.viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz .grid { stroke: var(--line2); stroke-width: 1; }
.viz .base { stroke: var(--line); stroke-width: 1.5; }
.viz .gap { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.viz .ax { fill: var(--mute); font-size: 11px; }
.viz .lab { fill: var(--sub); font-size: 11.5px; font-weight: 600; }
.viz path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz circle { fill: var(--c); stroke: var(--panel); stroke-width: 2; }
.viz circle.hollow { fill: var(--panel); stroke: var(--c); }
.viz .cross { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 2 3; }
.viz .tip { position: absolute; top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 13px; box-shadow: 0 2px 8px rgba(16,24,40,.12); pointer-events: none; white-space: nowrap; z-index: 4; }
.viz .tip div { margin-top: 2px; color: var(--sub); }
.viz .tip b { color: var(--text); }

/* 메뉴 안 탭 (제목 옆) */
.seg.tabs a { padding: 5px 13px; border-right: 1px solid var(--line); color: var(--sub); white-space: nowrap; text-decoration: none; }
.seg.tabs a:last-child { border-right: 0; }
.seg.tabs a.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
/* 홈: 할 일 목록 */
ul.todo { list-style: none; margin: 8px 0 0; padding: 0; }
ul.todo li { padding: 9px 0 9px 14px; border-top: 1px solid var(--line2); position: relative; }
ul.todo li:first-child { border-top: 0; }
ul.todo li.bad::before, ul.todo li.warn::before { content: ''; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 99px; background: var(--warn); }
ul.todo li.bad::before { background: var(--neg); }
.sec-title { font-size: 16px; margin: 18px 0 8px; }

/* 달력 › 입금 */
.day.pay { cursor: default; }
.day.pay.due { border-color: var(--est); background: var(--est-soft); }
.day.pay.paid .p { color: var(--sub); }
.day.pay.today { outline: 2px solid var(--brand); }

/* 광고 › 할 일: 판정 카드를 눌러 걸러 보기 */
.kpi.pick { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi.pick.on { outline: 2px solid var(--brand); }
/* 성과 · 이전/다음 주·달 버튼 */
.seg.step button:disabled { cursor: default; }
.seg.step button:disabled:not(.on) { color: var(--sub); opacity: .5; }
/* 홈 · AI에게 물어보기 */
.card.ai h2 { margin: 0; }

/* SKU 고르기 (모든 메뉴 공통): 고르면 테두리 색으로 표시 */
.skupick { max-width: 260px; }
.skupick.on { border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }

/* 성과표: 구역 머리 줄(누르면 자세히 펼치기) · 클릭률·전환율 강조 */
.wk tr.wsec td { background: var(--line2); border-top: 1px solid var(--line); }
.wk tr.wsec[data-act] td { cursor: pointer; }
.wk tr.wsec .more { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--brand-ink); }
.wk tr.hl td.wl { color: var(--brand-ink); font-weight: 600; }
.wk tr.wsec.hl td { background: var(--brand-soft); }
.kpis.six { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi.hl { border-color: var(--brand); }
.kpi.hl .k { color: var(--brand-ink); font-weight: 600; }
.kpinote { margin: -4px 0 6px; }

/* SKU 비교 */
.cmpchip { display: inline-flex; align-items: center; gap: 5px; }
.cmpchip i, .wk .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cmpchip i { margin-right: 0; }
.cmpchip .x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--sub); font-size: 14px; }
.vizs.one { grid-template-columns: minmax(0, 760px); margin-top: 10px; }

/* 설명 말풍선 (마우스를 올리면 바로) */
.hovertip { position: fixed; z-index: 1000; max-width: 340px; padding: 7px 10px; border-radius: 8px; background: var(--text); color: var(--panel);
  font-size: 13.5px; line-height: 1.5; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 14px rgba(16,24,40,.18); }

/* 내 돈은 어디로? (기간 합계) */
.flow { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; background: var(--line2); }
.flow span { display: block; height: 100%; min-width: 2px; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.flow-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.f-fee { background: #8e9aaf; } .f-cost { background: #e0a43c; } .f-logi { background: #6d8fd8; } .f-ads { background: #d9668c; }
.f-etc { background: #a68ad6; } .f-extra { background: #b08968; } .f-unk { background: repeating-linear-gradient(45deg, var(--mute) 0 4px, transparent 4px 8px); } .f-net { background: var(--pos); }

/* 홈 AI 주간 보고서 카드 */
.card.ai .chip { margin-left: 8px; }
.ai-sample { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ai-sample summary { cursor: pointer; color: var(--sub); font-size: 13.5px; }
.ai-one { margin: 10px 0 6px; }
.ai-todo { margin: 0 0 6px; padding-left: 20px; line-height: 1.6; }

/* 설정: 쿠팡 허용 IP 안내 */
.ipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); }
.ipbox .myip { font-size: 16px; letter-spacing: .3px; }
.ai-full { margin-top: 6px; } .ai-full summary { cursor: pointer; color: var(--brand-ink); font-size: 13.5px; }
.ai-md h3 { font-size: 15px; margin: 14px 0 6px; } .ai-md p { margin: 4px 0; line-height: 1.6; }
.steps li { margin: 4px 0; line-height: 1.6; }

/* 설정: 쿠팡 API 키 따라하기 (윙 캡처 + 빨간 박스) */
.guide .g-step { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line2); }
.guide .g-step img { width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
.guide .g-text p { margin: 6px 0 0; line-height: 1.6; }
@media (max-width: 760px) { .guide .g-step { grid-template-columns: 1fr; } }
.ipinline { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; margin: 2px 0; border-radius: 6px; background: var(--brand-soft); color: var(--text); white-space: nowrap; }
.ipinline .myip { font-size: 15px; }
.histbtn { margin-left: 6px; padding: 1px 7px; font-size: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--sub); cursor: pointer; }
.histbtn:hover { color: var(--brand-ink); border-color: var(--brand); }
.dlg.wide { width: min(760px, 94vw); max-width: none; }
table.hist { width: 100%; font-size: 13.5px; } table.hist td, table.hist th { padding: 7px 8px; white-space: nowrap; }
.wk th .wto { font-weight: 400; color: var(--mute); font-size: 12px; }
.golink { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.golink:hover { color: var(--brand-ink); }
/* 성과 위 요약 카드: 큰 숫자 옆 작은 보조 숫자(마진율·비율), 총비용은 눌러서 펼침 */
.kpi .kx { font-size: 13px; font-weight: 600; color: var(--sub); margin-left: 6px; }
.kpi.click { cursor: pointer; } .kpi.click:hover, .kpi.click.on { border-color: var(--brand); }
/* 성과: 총비용 펼침 (가로 막대 순위) */
.costbars .cb { display: grid; grid-template-columns: 90px minmax(0, 1fr) 230px; gap: 9px 12px; align-items: center; font-size: 14px; }
.costbars .cb-t { height: 14px; background: var(--line2); border-radius: 3px; overflow: hidden; }
.costbars .cb-t > div { height: 100%; border-radius: 3px; }
.costbars .cb-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.costbars .cb-v span { font-size: 12.5px; margin-left: 4px; }
.vizs.full { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
/* 총비용 카드 아래에 붙는 창 */
.kpi.click { position: relative; }
.costpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(600px, 92vw); padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.18); cursor: default; }
.costpop.right { left: auto; right: 0; }
.costpop::before { content: ''; position: absolute; top: -7px; left: 28px; width: 12px; height: 12px; background: var(--panel); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.costpop.right::before { left: auto; right: 28px; }
.costpop .x { border: 0; background: none; font-size: 18px; color: var(--sub); cursor: pointer; }
.costpop .costbars .cb { grid-template-columns: 70px minmax(0, 1fr) 210px; }
/* 홈 AI 주간 보고서 접기·펼치기 */
.card.ai .foldbtn { margin-left: 4px; font-size: 14px; min-width: 84px; }
.card.ai.folded { padding-top: 12px; padding-bottom: 12px; }
.card.ai .ai-oneline { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 광고 › 이번 주 할 일 */
.adtodo li { padding: 8px 0; border-bottom: 1px solid var(--line2); list-style: none; }
.adtodo li:last-child { border-bottom: 0; }
.adtodo li .chip { margin-right: 4px; }
.chip.neg { background: #fee4e2; color: var(--neg); } .chip.pos { background: var(--ok-soft); color: var(--pos); }

/* 스크롤바가 생겼다 없어질 때 화면이 옆으로 밀리지 않게 (AI 카드 접기 등) */
html { scrollbar-gutter: stable; }
/* 광고 › 주차별: 설정 바꾼 주 (보라) */
.wkads th.chg, .wkads td.chg { background: var(--est-soft); }
.wkads td.hit b { color: var(--est); }
.chip.pro { background: var(--est-soft); color: var(--est); }
.viz .mark { stroke: var(--est); stroke-width: 1.5; stroke-dasharray: 4 3; }
.viz .mk { fill: var(--est); font-size: 11px; }
/* 광고 › 주차별: 표 안 그래프 — 점이 날짜 칸 한가운데에 맞게 (칸 폭을 똑같이) */
.wkads { table-layout: fixed; }
.wkads tr.wkchart td { padding: 0; border-bottom: 1px solid var(--line); }
.wkads td.wkplot .viz { position: relative; }
.wkads td.wkplot svg { display: block; overflow: visible; }
.wkads .wkchart .ln { stroke: var(--c); stroke-width: 2; stroke-linecap: round; }
.wkads .chgband { fill: var(--est-soft); }
.wkads .wklegend { position: absolute; top: -2px; left: 8px; margin: 0; font-size: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); border-radius: 4px; padding: 0 4px; z-index: 1; }
.wkads .wklegend i.chgkey { background: var(--est-soft); border: 1px solid var(--est); }
.wkax { position: relative; }
.wkax .t { position: absolute; font-size: 11px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wkax .t.a0 { right: 54px; color: var(--s1); }
.wkax .t.a1 { right: 8px; color: var(--s2); }
/* 모바일: 비용 막대(팝업 안 포함) = 이름 | 막대, 금액은 막대 아래 줄 (팝업 쪽 3칸 규칙이 모바일 규칙을 덮어 글자가 겹치던 것) */
@media (max-width: 760px) {
  .costbars .cb, .costpop .costbars .cb { grid-template-columns: 62px minmax(0, 1fr); gap: 2px 10px; }
  /* 금액 칸은 두 칸을 다 쓰고 왼쪽을 띄운다 — 칸 번호를 정해 두면 브라우저(아이폰 사파리 등)마다 자리 잡는 순서가 달라 이름과 겹친다 */
  .costbars .cb-v, .costpop .costbars .cb-v { grid-column: span 2; padding-left: 72px; margin-bottom: 8px; white-space: normal; }
  .costpop { padding: 12px; }
}
.wkads .wkchart .cross { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 2 3; }
.wkads .wkchart .tip { top: 22px; }
.wkads thead th.chg[title] { cursor: help; }
.wkax .h { position: absolute; top: 2px; font-size: 11.5px; font-weight: 600; }
.wkax .h.a0 { right: 54px; color: var(--s1); }
.wkax .h.a1 { right: 8px; color: var(--s2); }
/* 지면 비중 칸: 검색(청록) : 비검색(회색) 얇은 막대 + 숫자 */
.wkads .mix { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 0 0 3px auto; width: 56px; }
.wkads .mix i { display: block; height: 100%; background: var(--brand); }
/* 새 화면 알림 띠 (화면 아래 가운데) */
.newver { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--text); color: var(--panel); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.25); font-size: 14px; white-space: nowrap; max-width: calc(100vw - 32px); }
.newver .x { border: 0; background: none; color: inherit; opacity: .7; font-size: 16px; cursor: pointer; }
/* 광고 주차별 그래프 고르기 줄 */
.wkpick { padding: 0 12px 10px; gap: 6px; flex-wrap: wrap; }
/* 광고 › 키워드: 캠페인 묶음 줄 · 기준 칩 · 동작 버튼 */
.kwgrp td { background: var(--line2); border-top: 1px solid var(--line); }
.kwcs { white-space: nowrap; }
.kwc { display: inline-block; font-size: 11.5px; padding: 1px 6px; margin-right: 3px; border-radius: 10px; border: 1px solid var(--line); color: var(--mute); }
.kwc.on { background: #fee4e2; border-color: #fecdca; color: var(--neg); }
.kwact { white-space: nowrap; text-align: right; }
.kwact .btn + .btn { margin-left: 4px; }
@media (max-width: 760px) {
  /* 키워드 거르기 버튼이 폰 폭을 넘으면 줄바꿈, 캠페인 줄(복사 버튼)은 표를 옆으로 밀어도 화면 안에 */
  .wkpick .seg { flex-wrap: wrap; }
  .kwgrp td > .row { position: sticky; left: 12px; max-width: calc(100vw - 64px); }
}
.kwcamps { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.kwcamp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
/* 변경 이력 */
.effc { min-width: 190px; }
.effl { font-size: 13px; white-space: nowrap; line-height: 1.6; }
.chgseg { flex-wrap: wrap; }
.chip.kind-ad, .chip.kind-kw, .chip.kind-ad_etc { background: var(--est-soft); color: var(--est); }
.chip.kind-stock { background: #fee4e2; color: var(--neg); }
.chip.kind-price, .chip.kind-coupon, .chip.kind-promo { background: var(--warn-soft); color: var(--warn); }
.chip.kind-thumb, .chip.kind-detail, .chip.kind-image, .chip.kind-title, .chip.kind-option { background: var(--brand-soft); color: var(--brand-ink); }
.wk th.chg { background: var(--est-soft); }
.kwbulk { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kwbulk input[type=date] { padding: 3px 6px; font-size: 13px; }
td.ck, th.ck { width: 28px; }
/* 변경 이력 표: 폰에서 대상·내용 칸이 한 글자씩 꺾이지 않게 (표는 옆으로 밀어서 보기) */
.chgtbl td:nth-child(3) { min-width: 130px; }
.chgtbl td:nth-child(4) { min-width: 200px; }
.chgtbl td:nth-child(2) .chip { white-space: nowrap; }
.extrabar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
/* 총비용 막대: 기타 비용 줄을 누르면 항목별(구독료·보관료·재고 보상 등) 펼침 */
.costbars [data-act="cbExtra"] { cursor: pointer; }
.costbars .cb-l[data-act="cbExtra"] { white-space: nowrap; }
.costbars .arr::after { content: ' ▸'; font-style: normal; font-size: 13px; color: var(--sub); }
.costbars.xopen .arr::after { content: ' ▾'; }
.costbars .cb-s, .costbars .cb-sv { display: none; font-size: 12.5px; color: var(--sub); }
.costbars.xopen .cb-s { display: block; grid-column: span 2; padding-left: 10px; min-width: 0; overflow-wrap: anywhere; }
.costbars.xopen .cb-sv { display: block; }
@media (max-width: 760px) {
  .costbars.xopen .cb-sv { padding-left: 82px; margin-bottom: 4px; }
}
/* 마진계산기: 4묶음(가격·원가·쿠팡 비용·광고) — 칸 높이·줄을 맞추려고 이름은 짧게, 설명은 마우스로 */
.mcalc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.mcalc .mg { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mg h3, .mres h3, .cfgrid h3 { margin: 0; font-size: 14px; color: var(--sub); font-weight: 700; }
.mrow { display: grid; gap: 10px; align-items: end; }
.mrow.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mrow.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrow.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 10px; }
.mf { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--sub); }
.mf > span { white-space: nowrap; }
.mf select, .mi input { width: 100%; height: 38px; box-sizing: border-box; }
.mi { position: relative; }
.mi input { padding-right: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.mi i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--sub); pointer-events: none; }
.mck { height: 38px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.mh { margin: 0; font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.mh b { color: var(--text); }
.mres h3 { margin: 4px 0 8px; }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf { margin-top: 4px; }
.cfchart { position: relative; margin: 6px 0 12px; }
.cfchart svg { display: block; width: 100%; height: auto; }
.cfchart .line { fill: none; stroke: var(--s1); stroke-width: 2; }
.cfchart .zero { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 4 3; }
.cfchart .grid { stroke: var(--line2); stroke-width: 1; }
.cfchart .ax { font-size: 11px; fill: var(--sub); }
.cfchart .ord { fill: var(--neg); }
.cfchart .hov { stroke: var(--sub); stroke-width: 1; }
.cfchart .dot { fill: var(--s1); stroke: var(--panel); stroke-width: 2; }
.cftip { position: absolute; top: 4px; padding: 6px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: 0 6px 18px rgba(16,24,40,.15); max-width: 280px; }
.cfgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
@media (max-width: 1200px) { .cfgrid { grid-template-columns: minmax(0, 1fr); } }
.cfgrid h3 { margin-bottom: 6px; }
@media (max-width: 900px) { .mcalc { grid-template-columns: minmax(0, 1fr); } .mrow.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cfgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mrow.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mrow.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#cfOut .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { #cfOut .kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.where { margin: 4px 0 12px; }
.where h3 { margin: 0 0 6px; font-size: 14px; color: var(--sub); }
.where table { width: 100%; }
.where tr.sum td { border-top: 2px solid var(--line); }
tr.cur td { background: var(--line2); }
tr.gap td { background: color-mix(in srgb, var(--warn, #f79009) 8%, transparent); }
.cfchart .lbl { font-weight: 700; }
.cfchart .stk { fill: var(--s3); opacity: .18; }
.cfchart .stkl { fill: none; stroke: var(--s3); stroke-width: 2; }
.cfchart .pt { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 4 3; }
.cfchart .arr { fill: var(--sub); }
.cfchart .dot2 { fill: var(--s3); stroke: var(--panel); stroke-width: 2; }
.mrow.c7 { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 10px; }
.cfchart path.pt { fill: none; }
@media (max-width: 1100px) { .mrow.c7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mrow.c7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfchart .line.minus { stroke: var(--neg); }
.cfchart .dot.minus { fill: var(--neg); }
.cfchart .outseg { stroke: var(--neg); stroke-width: 5; stroke-linecap: butt; }
.cfchart .outlbl { fill: var(--neg); font-weight: 700; }
.cfchart .dot2.minus { fill: var(--neg); }
/* 월별 표: 장부 칸과 통장 칸을 나눠 보이게 */
.mtbl tr.grp th { font-size: 12px; color: var(--sub); text-align: center; border-bottom: 1px solid var(--line); }
.mtbl .cashg { border-left: 2px solid var(--line); }
/* 상품 › SKU '돈 흐름' 버튼, 마진계산기 실제 SKU 안내줄 */
.skucash { margin-left: 10px; }
.skuban { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; border-color: var(--brand); }
.skuban .mh { margin-top: 4px; }
.mrow.c9 { grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 10px; }
@media (max-width: 1300px) { .mrow.c9 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mrow.c9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skuban { flex-direction: column; align-items: flex-start; } }
.tipq { border-bottom: 1px dotted var(--sub); cursor: help; }
/* 상품 › 수입 */
.shipflow .seg { flex-wrap: wrap; }
.shipflow p { margin: 8px 0 0; }
.shiptbl select.stagesel { min-width: 104px; }
.shiptbl .mono, .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.shiptbl tr.opt > td { background: var(--line2); padding: 8px 10px; }
.chgsrc table td { vertical-align: top; }
.chgsrc summary .note { margin-left: 6px; }
.chgsrc td:first-child { white-space: nowrap; }
.shipimg { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.shipimg.sm { width: 26px; height: 26px; margin-right: 3px; }
/* 수입 사진: 마우스를 올리면 커진 사진이 떠서 보임 (표 스크롤 칸에 잘리지 않게 화면 위에 띄움) */
.shipimg { cursor: zoom-in; }
.imgzoom { position: fixed; z-index: 1000; width: 220px; height: 220px; object-fit: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(16,24,40,.25); pointer-events: none; }
/* 오류 보고함 */
.errdigest { display: block; border-color: var(--neg); color: inherit; text-decoration: none; margin-bottom: 12px; }
.errtbl td { vertical-align: top; }
.errpre { white-space: pre-wrap; word-break: break-all; font-size: 11.5px; max-height: 220px; overflow: auto; background: var(--line2); padding: 6px 8px; border-radius: 6px; }
/* 수입 › 결제 3칸 */
/* 펼친 줄은 넓은 표 안이라, 화면 폭 안에서 줄바꿈되게 폭을 화면에 맞춘다 */
.shippay { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 2px; max-width: calc(100vw - 280px); position: sticky; left: 10px; }
.shippay > .mf { width: 190px; }
.shiptbl tr.opt > td > .note { max-width: calc(100vw - 280px); white-space: normal; position: sticky; left: 10px; }
@media (max-width: 760px) { .shippay, .shiptbl tr.opt > td > .note { max-width: calc(100vw - 48px); } }
.shippay > .mf { width: 220px; }
.shippay .mi { width: 150px; flex: none; }
.shippay label.row { white-space: nowrap; gap: 4px; }
/* 홈 · 처음 세팅 3단계 */
.setupcard { border-left: 4px solid var(--brand); }
.setup { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.setup li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.setup li .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand); color: #fff; font-size: 13px; }
.setup li.done { opacity: .6; }
.setup li.done .n { background: var(--mute); }
.setup li .grow { min-width: 0; }
@media (max-width: 600px) { .setup li { flex-wrap: wrap; } .setup li .btn { margin-left: 36px; } }
/* SKU별 AI 제안 줄 (광고 › 할 일 · 상품 › SKU) */
.chip.ai { background: var(--brand-soft); color: var(--brand-ink); }
tr.aitip > td { padding: 0 12px 10px; border-top: 0; background: transparent; }
.aitip-in { position: sticky; left: 12px; max-width: min(1000px, calc(100vw - 300px)); white-space: normal; font-size: 13px; line-height: 1.55; border-left: 3px solid var(--brand); padding: 6px 10px; background: var(--bg); display: grid; gap: 4px; }
.aitip-in .note { font-size: 12.5px; }
.aitip-in .mute b { font-weight: 500; }
.aitip-at { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
@media (max-width: 760px) { .aitip-in { max-width: calc(100vw - 48px); } }
.aieff { color: var(--pos); font-weight: 600; font-size: 12.5px; }
.stratbtn { margin-left: 4px; }
.stratbtn.ghost { opacity: .55; }
.stratbtn.ghost:hover { opacity: 1; }
.stratbtn.on { background: var(--est-soft); color: var(--est); border-color: transparent; font-weight: 600; }
/* 수입 직접 입력 */
.dlg:has(#manItems) { width: min(820px, 100%); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.mrow-item { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 80px 90px; gap: 8px; align-items: end; padding: 10px 40px 10px 0; border-top: 1px solid var(--line); }
.mrow-item .imgpick { grid-column: span 2; }
.mrow-item [data-act=shipRowDel] { position: absolute; top: 10px; right: 0; }
.mrow-item .mlink select { width: 100%; }
.mrow-item .f { margin: 0; min-width: 0; }
.mrow-item input { width: 100%; }
.imgpick input[type=file] { font-size: 12px; }
.imgpick img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; margin-top: 4px; }
.imgpick img[hidden] { display: none; }
@media (max-width: 700px) { .mrow-item { grid-template-columns: 1fr 1fr; } .mrow-item .imgpick { grid-column: 1 / -1; } }
.imgin { width: 100%; }
/* 자료수집 진행률 */
.collprog { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg); }
.cp-row + .cp-row { margin-top: 10px; }
.collprog .bar { height: 8px; border-radius: 99px; background: var(--line2); overflow: hidden; margin: 6px 0 4px; }
.collprog .bar > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .4s; }
/* 연결 시험 결과 (설정 › 계정 카드) */
.keyres { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.keyres.ok { background: var(--ok-soft); color: var(--pos); }
.keyres.bad { background: var(--warn-soft); color: var(--warn); }
.keyres .note { color: var(--sub); margin-top: 2px; }
/* 멈춘 수집 (크롬 확장 카드) */
.stuck { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); }
.stuck > b { color: var(--warn); }
.stuck-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0 0; }
.stuck-row + .stuck-row { border-top: 1px solid var(--line); margin-top: 8px; }
/* 쿠팡 API 키 발급 따라하기 팝업 */
.dlg:has(.guide-pop) { width: min(980px, 100%); }
/* 대기 요청 칩 + 취소 */
.qwait { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 99px; background: var(--line2); color: var(--sub); font-size: 12.5px; }
.qchip .qx { border: 0; background: none; color: var(--mute); cursor: pointer; padding: 0 4px; font-size: 12px; line-height: 1.4; }
.qchip .qx:hover { color: var(--neg); }
/* AI 제안 칩(접힘) · 팝업 */
.aichip { border: 0; cursor: pointer; margin-left: 6px; vertical-align: 1px; font: inherit; font-size: 12px; }
.aichip:hover { filter: brightness(1.08); text-decoration: underline; }
.aitip-pop .tp { padding: 10px 0; border-top: 1px solid var(--line); }
.aitip-pop .tp:first-child { border-top: 0; }
.aitip-pop .tp p { margin: 4px 0 0; }
/* 처음 세팅 번호: 홈 카드와 같은 초록 동그라미 — 메뉴·설정 카드·버튼에 붙고, 끝나면 사라짐 */
.step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; margin-right: 6px; vertical-align: middle; flex: none; }
.btn .step-n { width: 17px; height: 17px; font-size: 11px; margin-right: 2px; }
.btn.primary .step-n { background: #fff; color: var(--brand); }
nav .step-ns { margin-left: auto; display: inline-flex; gap: 2px; }
nav .step-ns .step-n { width: 17px; height: 17px; font-size: 10.5px; margin: 0; }
.rail nav .step-ns { display: none; }

/* 로그인 화면: 구글 버튼 */
.login-card .or { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 12px; margin: 14px 0 10px; }
.login-card .or::before, .login-card .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.login-card .gbtn { width: 100%; justify-content: center; gap: 10px; background: var(--panel); font-weight: 600; text-decoration: none; }