:root{
  --bg:#F5F7FB; --surface:#fff; --surface-2:#F0F3F8; --text:#172033; --muted:#667085;
  --line:#E2E7F0; --brand:#3B63F3; --brand-soft:#E8EDFF; --accent:#A05A00; --accent-soft:#FFF1D6;
  --up:#12684A; --up-soft:#DFF1E9; --down:#AE3527; --down-soft:#FAE8E5;
  --shadow:0 1px 2px rgba(20,26,36,.05),0 10px 26px -16px rgba(20,26,36,.22);
  --r:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1017; --surface:#141A24; --surface-2:#1A222E; --text:#E4E9F0; --muted:#94A1B4;
  --line:#27303D; --brand:#6FB2D6; --brand-soft:#122835; --accent:#DFA94E; --accent-soft:#2A2211;
  --up:#55BC96; --up-soft:#102A21; --down:#E8837A; --down-soft:#331F1D;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -16px rgba(0,0,0,.6);
}}
/* 직접 「어두운 모드」를 고른 경우 — 시스템 설정과 무관하게 이 값을 쓴다 */
:root[data-theme="dark"]{
  --bg:#0C1017; --surface:#141A24; --surface-2:#1A222E; --text:#E4E9F0; --muted:#94A1B4;
  --line:#27303D; --brand:#6FB2D6; --brand-soft:#122835; --accent:#DFA94E; --accent-soft:#2A2211;
  --up:#55BC96; --up-soft:#102A21; --down:#E8837A; --down-soft:#331F1D;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}

body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,sans-serif;line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}

/* 상단바 */
.topbar{background:var(--brand);color:#fff;padding:0 18px;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar .brand{font-weight:700;font-size:16px;margin-right:14px;padding:13px 0;white-space:nowrap}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.topbar nav a{color:rgba(255,255,255,.85);text-decoration:none;padding:13px 12px;font-size:14px;
  border-bottom:3px solid transparent;white-space:nowrap}
.topbar nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.topbar nav a.active{color:#fff;border-bottom-color:#fff;font-weight:700}
.topbar .right{display:flex;align-items:center;gap:10px;font-size:12.5px}
.topbar .right .who{opacity:.8}
.topbar .right a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.4);
  padding:5px 10px;border-radius:6px;font-size:12.5px}

.container{max-width:1180px;margin:0 auto;padding:22px 18px 70px}
/* 표가 넓은 화면(기계 관리)은 화면을 넓게 써서 가로 스크롤이 안 생기게 한다 */
.container.wide{max-width:1700px}
/* 칸이 많은 기계 목록은 좌우 여백을 줄여야 노트북 폭에서도 한 화면에 들어간다 */
.orderable th,.orderable td{padding-left:7px;padding-right:7px}
/* ---------- 이벤트 : 이름만 보이고 눌러서 자세히 펼치기 ---------- */
.evd > summary{ cursor:pointer; list-style:none; padding:2px 0 }
.evd > summary::-webkit-details-marker{ display:none }
.evd > summary::before{ content:'▸'; color:var(--muted); margin-right:6px; font-size:11px }
.evd[open] > summary::before{ content:'▾' }
.evd > summary:hover b{ text-decoration:underline }
.evd-body{ margin:8px 0 4px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface-2) }
.evd-body label{ display:block; font-size:11.5px; font-weight:700; color:var(--muted);
  margin:10px 0 3px }
.evd-body label:first-child{ margin-top:0 }
.evd-v{ font-size:13px; white-space:normal }
.evd-fix{ margin:2px 0 0; padding-left:18px }
.evd-fix li{ font-size:13px; margin:2px 0 }
/* 점검 표의 보완 메모 칸 — 좁은 칸에서 날짜·글·지우기가 한 줄로 서게 한다 */
.fixd{ margin-top:5px }
.fix-list{ margin:4px 0 0; padding:0; list-style:none }
.fix-list li{ display:flex; gap:5px; align-items:center; margin:3px 0 }
.fix-list .fix-d{ flex:0 0 auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.fix-list input[type=text]{ flex:1 1 auto; min-width:0; font-size:12.5px; padding:3px 6px }
.fix-list .fix-t{ flex:1 1 auto; font-size:12.5px }
.fix-list .btn{ flex:0 0 auto }
.fix-add{ margin-top:5px }
.fix-add input[type=text]{ width:100%; font-size:12.5px; padding:3px 6px }
@media print{ .fix-add{ display:none } }
@media print{ .fixd{ display:none } }

/* 매출이 안 나오는 기계 — 하한이 어디서 온 값인지 셈을 그대로 보여주는 작은 표 */
.lim-tbl{ width:100%; border-collapse:collapse; margin:2px 0 10px; font-size:12.5px }
.lim-tbl th{ text-align:left; white-space:nowrap; padding:3px 8px 3px 0;
  font-weight:700; color:var(--muted); width:1%; border:0 }
.lim-tbl td{ padding:3px 0; border:0 }
.lim-tbl .lim-n{ text-align:right; white-space:nowrap; width:1%; padding-left:10px }
.lim-try{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px;
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2) }
.lim-try label{ display:flex; gap:5px; align-items:center; font-size:12.5px; font-weight:400 }
@media print{ .lim-try{ display:none } }

/* 손님이 올린 인증샷 확인 (이벤트 화면) */
.shotlist{ list-style:none; margin:0; padding:0 }
.shotlist li{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r); padding:10px; margin-bottom:10px;
  background:var(--surface-2) }
.shotlist img{ width:88px; height:88px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); background:var(--surface) }
.shotlist .sinfo{ display:flex; flex-direction:column; gap:2px; min-width:150px }
.shotlist .sdo{ display:flex; gap:6px; align-items:center; flex:1 1 320px; flex-wrap:wrap }
.shotlist .sdo input[type=text]{ flex:1 1 160px; min-width:0 }
.ptf{ display:flex; gap:5px; align-items:center; flex-wrap:wrap }
.ptf input[type=text]{ flex:1 1 120px; min-width:0 }
/* 인증샷 확인 — 크기마다 단추 하나 */
.kbtns{ display:flex; gap:5px; flex-wrap:wrap; width:100% }
.kbtns .btn b{ margin-left:3px; font-weight:800 }
/* 크기별 점수 정하는 칸 */
.ptset{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin-top:4px }
.ptset label{ font-size:11.5px }
@media print{ .shotlist, .ptf, .kbtns, .ptset{ display:none } }

/* 주간입력 — 지금 어느 줄에 넣고 있는지 보이게.
   기계가 70줄이 넘어 옆으로 눈이 밀리면 남의 칸에 잘못 넣기 쉽다. */
#wk tbody tr:focus-within{ background:var(--brand-soft) }
#wk tbody tr:focus-within td:first-child{ box-shadow:inset 3px 0 0 var(--brand) }
/* 나눈 첫 주라 계산을 못 한 자리 */
.needbase{ font-size:11.5px; color:var(--down); font-weight:700; margin-top:3px; line-height:1.4 }
.needbase a{ color:var(--down) }

/* 칸이 많은 표를 가로 스크롤 없이 한눈에 — 여백을 줄이고, 긴 이름 칸은 줄을 바꾸게 한다 */
.fit th,.fit td{padding-left:7px;padding-right:7px}
.fit th.wrap,.fit td.wrap{white-space:normal;min-width:76px;max-width:150px}
h1{font-size:21px;margin:0 0 4px;font-weight:700}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 20px}

/* 카드 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.card h2{font-size:15.5px;margin:0 0 12px;font-weight:700}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow)}
.kpi .k{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.kpi .v{font-size:20px;font-weight:700;letter-spacing:-.02em}
.kpi .d{font-size:12px;margin-top:2px;font-weight:700;color:var(--muted)}
/* 원래 값 옆에 「거른 값」을 괄호로 나란히 둔다 (기계별 실적 상단).
   왼쪽 큰 숫자가 늘 전체 값이고, 이쪽은 곁들이는 값이라 한 단계 작고 옅게. */
.kpi .v .x{font-size:14.5px;font-weight:700;color:var(--accent);margin-left:5px;letter-spacing:0}
.x-in{color:var(--accent)}
.d.up,.up{color:var(--up)} .d.down,.down{color:var(--down)}

/* 표 */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11.5px;color:var(--muted);font-weight:700;background:var(--surface-2);
  position:sticky;top:0;z-index:1}
th:first-child,td:first-child{text-align:left}
tbody tr:hover td{background:var(--surface-2)}
tr.total td{font-weight:700;background:var(--surface-2);border-top:2px solid var(--line)}
.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:700}
.pill.up{background:var(--up-soft);color:var(--up)}
.pill.down{background:var(--down-soft);color:var(--down)}
.pill.warn{background:var(--accent-soft);color:var(--accent)}
.pill.gray{background:var(--surface-2);color:var(--muted)}

/* 폼 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
select,input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],textarea{
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:14px;font-family:inherit}
input[type=number]{text-align:right}
select:focus,input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:8px;
  padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{filter:brightness(1.1)}
.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.btn.danger{background:var(--down)}
.btn.sm{padding:4px 10px;font-size:12.5px}
label{font-size:12.5px;color:var(--muted);display:block;margin-bottom:3px}

.msg{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.msg.ok{background:var(--up-soft);color:var(--up)}
.msg.err{background:var(--down-soft);color:var(--down)}
.msg.info{background:var(--accent-soft);color:var(--accent)}

/* 그래프 */
.bars{display:flex;align-items:flex-end;gap:5px;height:190px;padding:8px 4px 0}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.bars .bar{width:100%;max-width:46px;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px}
.bars .bar.prev{background:var(--line)}
.bars .bar.neg{background:var(--down)}
.bars .lbl{font-size:11px;color:var(--muted)}
.bars .val{font-size:10.5px;color:var(--muted);font-weight:700}
.barwrap{display:flex;gap:2px;width:100%;justify-content:center;align-items:flex-end;flex:1}

.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:2px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:26px 0 10px}
.hint{color:var(--muted);font-size:12.5px}
.editable{background:var(--accent-soft)}

/* 로그인 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:32px 30px;width:100%;max-width:360px;box-shadow:var(--shadow);text-align:center}
.login-box h1{font-size:20px;margin-bottom:6px}
.login-box .desc{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-box input{width:100%;margin-bottom:10px;text-align:center}
.login-box .btn{width:100%}

@media print{
  .topbar,.toolbar,.noprint{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}
@media (max-width:640px){
  .container{padding:16px 12px 60px}
  .topbar .brand{margin-right:6px;font-size:15px}
  .topbar nav a{padding:11px 9px;font-size:13px}
}

/* 기준 위반 강조 */
td.cell-bad{background:var(--down-soft)!important;color:var(--down);font-weight:700}
tbody tr:hover td.cell-bad{background:var(--down-soft)!important}

/* ---------- 이례적인 숫자 강조 ---------- */
/* 숫자 자체는 건드리지 않는다. 뒤 배경과 테두리만 은은하게 맥동시켜
   깜빡여도 금액이 흐려지거나 읽기 어려워지지 않게 한다. */
/* 알약 모양은 span 에만. td 에 그대로 걸면 칸의 여백과 정렬이 깨져 숫자가 어긋난다. */
span.pulse, .pill.pulse{
  position:relative; border-radius:6px; padding:1px 6px;
  box-shadow:0 0 0 1px transparent; display:inline-block;
}
.pulse{
  font-weight:700;
  animation:pulseGlow 1.6s ease-in-out infinite;
}
/* 표 칸이 맥동할 때는 칸의 원래 여백·오른쪽 정렬을 그대로 두고 배경·테두리만 움직인다 */
td.pulse{ padding:8px 10px; border-radius:0 }
.pulse-up{ --pc:var(--up);   --pcs:var(--up-soft); color:var(--up) }
.pulse-down{ --pc:var(--down); --pcs:var(--down-soft); color:var(--down) }
@keyframes pulseGlow{
  0%,100%{ background:transparent;  box-shadow:0 0 0 1px transparent }
  50%    { background:var(--pcs);   box-shadow:0 0 0 1px var(--pc) }
}
/* Enter 로 폼이 제출될 때 첫 submit 버튼이 눌린다.
   삭제 버튼이 첫 번째면 Enter 만으로 데이터가 지워지므로,
   보이지 않는 「저장」 버튼을 폼 맨 앞에 둬서 Enter 가 저장이 되게 한다. */
.enter-guard{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* 표 칸 전체를 맥동시킬 때 */
td.cell-bad.pulse{ animation:pulseCell 1.6s ease-in-out infinite }
@keyframes pulseCell{
  0%,100%{ box-shadow:inset 0 0 0 1px transparent }
  50%    { box-shadow:inset 0 0 0 2px var(--down) }
}
/* 눈 피로·접근성 : 움직임을 줄여달라는 설정이면 색만 남기고 멈춘다 */
@media (prefers-reduced-motion:reduce){
  .pulse, td.cell-bad.pulse{ animation:none }
  .pulse-up{ background:var(--up-soft);   box-shadow:0 0 0 1px var(--up) }
  .pulse-down{ background:var(--down-soft); box-shadow:0 0 0 1px var(--down) }
}

/* ---------- 경고 목록 (1주 매출) ---------- */
.kpi.clickable{ cursor:pointer; user-select:none }
.kpi.clickable:hover{ box-shadow:0 0 0 2px var(--down) }
.kpi.clickable .k::after{ content:" ▾"; font-size:11px; opacity:.6 }
.why{ display:flex; flex-wrap:wrap; gap:5px }
.why .tag{ font-size:12px; padding:2px 7px; border-radius:999px; white-space:nowrap }
.why .tag.bad{ background:var(--down-soft); color:var(--down); font-weight:700 }
.why .tag.warn{ background:var(--down-soft); color:var(--down) }
.why .tag.up{ background:var(--up-soft); color:var(--up) }

/* ---------- 이벤트 대상 기계 고르기 ---------- */
.picker{ position:relative }
.picker>summary{ list-style:none; cursor:pointer; padding:6px 9px; border:1px solid var(--line);
  border-radius:7px; background:var(--surface-2); font-size:13px; min-height:20px }
.picker>summary::-webkit-details-marker{ display:none }
.picker>summary::after{ content:" ▾"; opacity:.6 }
.picker[open]>summary{ border-color:var(--down) }
.picker .panel{ position:absolute; z-index:40; left:0; top:100%; margin-top:4px;
  width:330px; max-height:340px; overflow:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:9px;
  box-shadow:0 8px 26px rgba(0,0,0,.16) }
.picker .panel .grp{ font-size:11px; font-weight:700; opacity:.65; margin:9px 0 4px; letter-spacing:.4px }
.picker .panel label{ display:flex; align-items:center; gap:7px; padding:3px 4px;
  border-radius:5px; font-size:13px; cursor:pointer; font-weight:400 }
.picker .panel label:hover{ background:var(--surface-2) }
.picker .panel label input{ margin:0 }
.picker .tools{ display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  padding-bottom:8px; border-bottom:1px solid var(--line) }
.picker .tools input[type=search]{ flex:1; min-width:110px; padding:4px 7px; font-size:12px }
.picker .mini{ font-size:11px; padding:3px 7px; border-radius:6px; border:1px solid var(--line);
  background:var(--surface-2); cursor:pointer }
.picker .mini:hover{ border-color:var(--down) }
.picker .hintline{ font-size:11px; opacity:.6; padding:6px 2px 0 }

/* ---------- 저장 전 확인 화면 ---------- */
.confirm-hd{ background:var(--down-soft); border:1px solid var(--down); color:var(--down);
  border-radius:10px; padding:13px 15px; margin-bottom:14px }
.confirm-hd b{ font-size:15px }

/* ---------- 그래프 ---------- */
.chart{ position:relative; margin-top:4px }
.chart svg{ width:100%; height:auto; display:block; overflow:visible }
.chart .grid{ stroke:var(--line); stroke-width:1 }
.chart .zero{ stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 3 }
.chart .ax{ fill:var(--muted); font-size:10.5px }
.chart .lab{ fill:var(--text); font-size:11px }
.chart .bar{ opacity:.92 }
.chart .ln{ fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round }
.chart .dot{ stroke:var(--surface); stroke-width:1.5 }
.chart .hit{ fill:transparent; cursor:pointer }
.chart .hit:hover{ fill:var(--text); fill-opacity:.05 }
.chart-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; font-size:12px; color:var(--muted) }
.chart-legend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px }
.chart-tip{
  position:absolute; z-index:20; pointer-events:none; min-width:150px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; font-size:12.5px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  color:var(--text)!important;
}
.chart-tip b{ display:block; margin-bottom:5px; font-size:12px; color:var(--muted)!important }
.chart-tip div{ display:flex; align-items:center; gap:6px; padding:1.5px 0; white-space:nowrap }
.chart-tip i{ width:9px; height:9px; border-radius:2px; flex:none }
.chart-tip span{ margin-left:auto; font-weight:700; padding-left:14px; color:var(--text)!important }

/* 기계가 많은 표에서 같은 기계를 눈으로 따라가기 위한 고정 색 띠 */
.machine-row>td:first-child,.machine-rise{ border-left:5px solid var(--machine-tone)!important }
.machine-row.is-rising>td{ background:color-mix(in srgb,var(--machine-tone) 8%,var(--surface)) }
.machine-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px }
.machine-rise{ display:flex; flex-direction:column; gap:4px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--text) }
.machine-rise:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.machine-tone-0{--machine-tone:#2563eb}.machine-tone-1{--machine-tone:#7c3aed}.machine-tone-2{--machine-tone:#db2777}
.machine-tone-3{--machine-tone:#dc2626}.machine-tone-4{--machine-tone:#ea580c}.machine-tone-5{--machine-tone:#ca8a04}
.machine-tone-6{--machine-tone:#16a34a}.machine-tone-7{--machine-tone:#0d9488}.machine-tone-8{--machine-tone:#0891b2}
.machine-tone-9{--machine-tone:#4f46e5}.machine-tone-10{--machine-tone:#9333ea}.machine-tone-11{--machine-tone:#64748b}
.terminal-auto-value{ display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap }
.icon-edit{ border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:7px; padding:3px 6px; cursor:pointer }
.icon-edit:hover{ color:var(--brand); border-color:var(--brand) }
/* 2026-10-23 칸 순서 : 순서 | 기계 이름(자리) | 이전 상품 | 현재 상품 | 교체 상품 | 단말기 | 주요기계 | 입력칸 | 배수 | 원가 단가 | 단가 이력 | 상태 | 관리
   간단히 보기(설정 닫힘)에서는 순서 · 주요기계 · 입력칸 · 배수 · 상태 · 관리를 숨긴다 */
.machine-admin.is-compact th:nth-child(1),.machine-admin.is-compact td:nth-child(1),
.machine-admin.is-compact th:nth-child(7),.machine-admin.is-compact td:nth-child(7),
.machine-admin.is-compact th:nth-child(8),.machine-admin.is-compact td:nth-child(8),
.machine-admin.is-compact th:nth-child(9),.machine-admin.is-compact td:nth-child(9),
.machine-admin.is-compact th:nth-child(12),.machine-admin.is-compact td:nth-child(12),
.machine-admin.is-compact th:nth-child(13),.machine-admin.is-compact td:nth-child(13){display:none}
.machine-admin td:nth-child(2),.machine-admin td:nth-child(3),.machine-admin td:nth-child(4),.machine-admin td:nth-child(5),.machine-admin th:nth-child(2),.machine-admin th:nth-child(3),.machine-admin th:nth-child(4),.machine-admin th:nth-child(5){text-align:left}
.machine-admin .mc-prev span.ph{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}.machine-admin .mc-prev small{display:block;font-size:11px}
.machine-admin .current-product-name{font-size:14.5px}.machine-admin .mc-swap select{min-width:200px}
.web-event-recs{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line) }
.web-event-recs h3{ margin:0 0 10px }
.admin-fold>summary{ cursor:pointer; list-style:none; font-size:16px }
.admin-fold>summary::-webkit-details-marker{display:none}
.admin-fold>summary::after{content:'열기';float:right;color:var(--brand);font-size:12px}
.admin-fold[open]>summary::after{content:'닫기'}
.admin-fold-body{margin-top:14px}.inner-card{box-shadow:none;margin:0;padding:0;border:0;background:transparent}
.purchase-row>td:nth-child(2){border-left:5px solid var(--machine-tone)!important;font-weight:700}
.purchase-table tbody tr:nth-child(even)>td{background:var(--surface-2)}
.purchase-table thead th{position:sticky;top:0;z-index:2;background:var(--surface)}

/* 한 달만 볼 때의 가로 막대 */
.hbars{ display:flex; flex-direction:column; gap:9px; margin-top:4px }
.hbar{ display:flex; align-items:center; gap:10px; font-size:13px }
.hbar .hn{ width:110px; flex:none; color:var(--muted) }
.hbar .ht{ flex:1; background:var(--surface-2); border-radius:5px; height:16px; overflow:hidden }
.hbar .ht i{ display:block; height:100%; border-radius:5px }
.hbar .hv{ width:120px; text-align:right; font-weight:700; flex:none }
.hbar .hp{ width:56px; text-align:right; color:var(--muted); flex:none }

.chart-pick{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-left:auto }

/* ---------- 발견한 것 · 전월 대비 ---------- */
.insight{ border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin-bottom:9px;
  background:var(--surface) }
.insight>summary{ cursor:pointer; list-style:none; font-size:13.5px; display:flex;
  align-items:center; gap:8px; flex-wrap:wrap }
.insight>summary::-webkit-details-marker{ display:none }
.insight>summary::after{ content:"자세히 ▾"; margin-left:auto; font-size:11.5px; color:var(--muted);
  white-space:nowrap }
.insight[open]>summary::after{ content:"접기 ▴" }
.insight[open]>summary{ margin-bottom:6px }
.ins-detail{ margin:6px 0 0; padding-left:20px; font-size:13px; color:var(--muted) }
.ins-detail li{ padding:1.5px 0 }
.ins-todo{ margin-top:10px; padding:9px 12px; background:var(--surface-2); border-radius:8px; font-size:13px }
.ins-todo b{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px }
.ins-todo ul{ margin:0; padding-left:18px }
.ins-todo li{ padding:1.5px 0 }
.ins-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.ins-up{ color:var(--up); font-size:12.5px; font-weight:700 }
.ins-down{ color:var(--down); font-size:12.5px; font-weight:700 }

/* 이벤트 아이디어 */
.idea{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--surface) }
.idea h4{ margin:0 0 4px; font-size:14px }
.idea .kinds{ display:flex; gap:4px; margin-bottom:6px; flex-wrap:wrap }
.idea p{ margin:0 0 6px; font-size:13px; color:var(--muted) }
.idea .when{ font-size:12px; color:var(--accent) }
.ideas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:11px }
.kindpick{ display:flex; gap:7px; flex-wrap:wrap }
.kindpick label{ display:inline-flex; align-items:center; gap:3px; margin:0; font-size:12px;
  color:var(--text); cursor:pointer }
.kindpick input{ margin:0 }

/* ---------- 로그인 화면 ---------- */
/* 로그인 화면은 다크·라이트 상관없이 한 가지 모양으로 고정한다.
   배경이 어두우므로 글자는 항상 흰색. */
body.login-page{ background:#0B1020; color:#EAF0FA; overflow:hidden }

/* 코드로 그린 배경 — 영상이 없어도, 영상을 못 읽어도 이게 보인다 */
.login-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1100px 700px at 15% 20%, #24406E 0%, transparent 60%),
    radial-gradient(900px 650px at 85% 75%, #4B2A6B 0%, transparent 60%),
    linear-gradient(140deg, #0B1020 0%, #131A33 50%, #0B1020 100%);
  background-size:180% 180%, 180% 180%, 100% 100%;
  animation:bgDrift 22s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%   { background-position:0% 0%,   100% 100%, 0 0 }
  100% { background-position:40% 30%, 60% 70%,   0 0 }
}
/* 떠오르는 코인 */
.login-bg .coin{
  position:absolute; bottom:-60px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE9A8, #E0A458 55%, #9A6410 100%);
  box-shadow:0 0 12px rgba(224,164,88,.55);
  opacity:0; animation:coinRise linear infinite;
}
@keyframes coinRise{
  0%   { transform:translateY(0) scale(.8);      opacity:0 }
  10%  { opacity:.85 }
  90%  { opacity:.5 }
  100% { transform:translateY(-108vh) scale(1.1); opacity:0 }
}
.login-bg .coin:nth-child(1){ left:6%;  animation-duration:17s; animation-delay:0s }
.login-bg .coin:nth-child(2){ left:15%; animation-duration:21s; animation-delay:3s;  width:9px;  height:9px }
.login-bg .coin:nth-child(3){ left:24%; animation-duration:15s; animation-delay:7s }
.login-bg .coin:nth-child(4){ left:33%; animation-duration:24s; animation-delay:1s;  width:18px; height:18px }
.login-bg .coin:nth-child(5){ left:42%; animation-duration:19s; animation-delay:9s;  width:8px;  height:8px }
.login-bg .coin:nth-child(6){ left:51%; animation-duration:23s; animation-delay:5s }
.login-bg .coin:nth-child(7){ left:60%; animation-duration:16s; animation-delay:12s; width:11px; height:11px }
.login-bg .coin:nth-child(8){ left:69%; animation-duration:26s; animation-delay:2s }
.login-bg .coin:nth-child(9){ left:78%; animation-duration:18s; animation-delay:8s;  width:16px; height:16px }
.login-bg .coin:nth-child(10){left:86%; animation-duration:22s; animation-delay:14s; width:9px;  height:9px }
.login-bg .coin:nth-child(11){left:93%; animation-duration:20s; animation-delay:4s }
.login-bg .coin:nth-child(12){left:70%; animation-duration:28s; animation-delay:17s; width:7px;  height:7px }

/* 영상을 올려두면 배경 위에 덮인다 */
.login-video{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
}
/* 글자가 묻히지 않게 어둠 막 */
.login-veil{
  position:fixed; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(8,12,24,.45) 0%, rgba(8,12,24,.62) 100%);
}

.login-page .login-wrap{ position:relative; z-index:3; min-height:100vh }
.login-page .login-box{
  background:rgba(18,24,42,.72);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#EAF0FA;
}
.login-title{
  font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px; color:#fff;
  text-shadow:0 0 16px rgba(111,178,214,.55), 0 0 42px rgba(224,164,88,.28);
}
.login-page .login-box .desc{ color:rgba(234,240,250,.62); margin-bottom:20px }
.login-page .login-box input{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;
}
.login-page .login-box input::placeholder{ color:rgba(234,240,250,.5) }
.login-page .login-box input:focus{ outline:2px solid #6FB2D6; outline-offset:1px }
.login-page .login-box .btn{ background:#2E6F9E }
.login-page .login-box .msg.err{ background:rgba(174,53,39,.28); color:#FFC7C0 }

/* 눈이 피로하거나 움직임을 줄여달라는 설정이면 멈춘다 */
@media (prefers-reduced-motion:reduce){
  .login-bg{ animation:none }
  .login-bg .coin{ animation:none; opacity:.4 }
  .login-video{ display:none }
}
@media (max-width:640px){
  .login-title{ font-size:21px }
}

/* 2026 직원 포털 로그인 — 넓은 화면은 소개와 로그인, 휴대폰은 한 장으로 정리 */
.login-page .login-wrap{ padding:clamp(18px,4vw,54px); overflow:auto }
.login-shell{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
  width:min(1040px,100%); min-height:620px; border:1px solid rgba(255,255,255,.13); border-radius:30px;
  overflow:hidden; background:rgba(9,14,27,.76); box-shadow:0 36px 100px rgba(0,0,0,.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px) }
.login-intro{ position:relative; display:flex; flex-direction:column; padding:44px 50px 40px; overflow:hidden;
  background:linear-gradient(145deg,rgba(30,72,111,.48),rgba(29,33,70,.28)) }
.login-intro:before{ content:""; position:absolute; width:420px; height:420px; right:-190px; top:-160px;
  border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018) }
.login-brand{ position:relative; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:800; letter-spacing:-.01em }
.login-mark,.login-mobile-mark{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:linear-gradient(135deg,#4F7CFF,#7457E8); color:#fff; font-size:18px; font-weight:900;
  box-shadow:0 10px 25px rgba(68,91,224,.35) }
.login-copy{ position:relative; margin:auto 0 }
.login-eyebrow,.login-kicker{ color:#8CB8FF; font-size:11px; font-weight:900; letter-spacing:.16em }
.login-copy h1{ margin:18px 0 16px; color:#fff; font-size:clamp(38px,4.3vw,58px); line-height:1.09; letter-spacing:-.055em }
.login-copy p{ width:min(430px,90%); margin:0; color:rgba(234,240,250,.7); font-size:15px; line-height:1.75 }
.login-features{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0 }
.login-features span{ padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:999px;
  color:rgba(255,255,255,.74); background:rgba(255,255,255,.055); font-size:12px; font-weight:750 }
.login-security,.login-mobile-security{ position:relative; display:flex; align-items:center; gap:8px; color:rgba(234,240,250,.5); font-size:11px }
.login-security i,.login-mobile-security i{ width:7px; height:7px; border-radius:50%; background:#53D2A2; box-shadow:0 0 0 4px rgba(83,210,162,.12) }
.login-page .login-box{ display:flex; flex-direction:column; justify-content:center; width:auto; max-width:none; padding:52px 48px;
  border:0; border-left:1px solid rgba(255,255,255,.1); border-radius:0; background:rgba(13,18,31,.78);
  box-shadow:none; text-align:left; backdrop-filter:none }
.login-box-head{ display:flex; align-items:center; gap:13px; margin-bottom:24px }
.login-box-head h2{ margin:5px 0 0; color:#fff; font-size:25px; letter-spacing:-.035em }
.login-mobile-mark{ display:none }
.login-guide{ margin:0 0 24px; color:rgba(234,240,250,.63); font-size:13px }
.login-page .login-box .desc{ margin:-13px 0 20px; padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.045); color:rgba(234,240,250,.62) }
.login-form label{ display:block; margin:0 0 8px; color:rgba(255,255,255,.78); font-size:12px; font-weight:800 }
.login-password{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:56px; border:1px solid rgba(255,255,255,.16);
  border-radius:14px; background:rgba(255,255,255,.055); transition:border-color .18s,box-shadow .18s }
.login-password:focus-within{ border-color:#79A7FF; box-shadow:0 0 0 4px rgba(92,127,255,.13) }
.login-password>span{ padding-left:16px; color:#7091D6; font-size:9px }
.login-page .login-box .login-password input{ height:54px; min-height:0; margin:0; padding:0 12px; border:0; outline:0; background:transparent; text-align:left; font-size:15px }
.login-page .login-box .login-password input:focus{ outline:0 }
.login-password button{ margin-right:8px; padding:8px; border:0; background:transparent; color:#A9B7D0; font:inherit; font-size:11px; font-weight:800; cursor:pointer }
.login-page .login-box .login-submit{ display:flex; align-items:center; justify-content:space-between; height:54px; margin-top:14px; padding:0 18px;
  border-radius:14px; background:linear-gradient(135deg,#386DE8,#6549D8); color:#fff; font-size:14px; font-weight:850;
  box-shadow:0 15px 30px rgba(53,72,190,.28); transition:transform .18s,filter .18s }
.login-page .login-box .login-submit:hover{ transform:translateY(-1px); filter:brightness(1.08) }
.login-page .login-box .login-submit b{ font-size:20px }
.login-help{ margin:15px 0 0; color:rgba(234,240,250,.42); font-size:11px; line-height:1.55 }
.login-mobile-security{ display:none; margin-top:24px }

@media(max-width:780px){
  body.login-page{ overflow:auto }
  .login-page .login-wrap{ align-items:flex-start; padding:0; min-height:100svh }
  .login-shell{ display:block; min-height:100svh; border:0; border-radius:0; background:rgba(9,14,27,.82) }
  .login-intro{ min-height:230px; padding:26px 24px 34px; background:linear-gradient(155deg,rgba(40,87,135,.55),rgba(24,29,62,.3)) }
  .login-brand{ font-size:13px }
  .login-mark{ width:36px; height:36px; border-radius:11px; font-size:15px }
  .login-copy{ margin:38px 0 0 }
  .login-copy h1{ margin:9px 0 8px; font-size:31px; line-height:1.12 }
  .login-copy p{ width:100%; font-size:13px; line-height:1.55 }
  .login-features,.login-security{ display:none }
  .login-page .login-box{ min-height:calc(100svh - 230px); padding:30px 24px 34px; border:0; border-radius:26px 26px 0 0; margin-top:-20px; background:#101625 }
  .login-mobile-mark{ display:grid }
  .login-box-head{ margin-bottom:20px }
  .login-box-head h2{ font-size:22px }
  .login-guide{ margin-bottom:20px }
  .login-mobile-security{ display:flex }
}

/* 직원 로그인 간결형 */
.login-page .login-bg{ background:linear-gradient(145deg,#0D1423,#111A2B 55%,#0B1220); animation:none }
.login-page .login-bg .coin,.login-page .login-video{ display:none }
.login-page .login-veil{ background:radial-gradient(520px 360px at 50% 44%,rgba(69,92,153,.18),transparent 72%) }
.login-page .login-wrap{ align-items:center; padding:24px }
.login-shell.login-simple{ display:block; width:min(400px,100%); min-height:0; border-radius:22px; background:rgba(14,20,34,.93) }
.login-simple .login-box{ display:block; min-height:0; margin:0; padding:34px; border:0; border-radius:22px; background:transparent }
.login-simple-head{ display:flex; align-items:center; gap:12px; margin-bottom:34px }
.login-simple-head .login-mark{ width:38px; height:38px; border-radius:11px; font-size:15px }
.login-simple-head h1{ margin:0 0 2px; color:#fff; font-size:14px; font-weight:850; letter-spacing:-.02em }
.login-simple-head div>span{ color:rgba(234,240,250,.44); font-size:10px }
.login-simple .login-box>h2{ margin:0 0 7px; color:#fff; font-size:24px; letter-spacing:-.035em }
.login-simple .login-guide{ margin:0 0 22px; color:rgba(234,240,250,.52); font-size:12px }
.login-simple .login-password{ height:52px; border-radius:12px }
.login-simple .login-box .login-password input{ height:50px }
.login-simple .login-box .login-submit{ height:52px; margin-top:11px; border-radius:12px }
.login-simple .msg.err{ margin-bottom:14px; border-radius:10px; font-size:12px }
@media(max-width:780px){
  .login-page .login-wrap{ align-items:center; padding:18px; min-height:100svh }
  .login-shell.login-simple{ min-height:0; border:1px solid rgba(255,255,255,.11); border-radius:20px }
  .login-simple .login-box{ min-height:0; margin:0; padding:28px 24px; border-radius:20px; background:transparent }
  .login-simple-head{ margin-bottom:30px }
}

/* 경고 칸을 눌러 이슈 적기 */

/* ---------- 기계 이슈 메모 ---------- */
td.issue-cell{ position:relative; cursor:pointer }
td.issue-cell::after{ content:"✎"; font-size:10px; opacity:.55; margin-left:5px }
tr.issue-row td{ padding:10px 12px; text-align:left; white-space:normal;
                 background:var(--surface-2) }

button.issue-pill{ border:0; cursor:pointer; font:inherit }

.issue-view{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.issue-mark{ font-size:13px }
.issue-text{ font-weight:600; color:var(--text); word-break:break-all }
.issue-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.issue-form[hidden], .issue-view[hidden]{ display:none }
.issue-label{ font-size:12.5px; color:var(--muted) }
.issue-input{ flex:1; min-width:220px }

/* ---------- 표 정렬 ---------- */
th.th-sort{ cursor:pointer; user-select:none; position:relative; padding-right:16px }
th.th-sort::after{ content:"⇅"; position:absolute; right:5px; opacity:.3; font-size:10px }
th.th-sort:hover::after{ opacity:.7 }
th.sorted-asc::after { content:"▲"; opacity:.95; font-size:9px }
th.sorted-desc::after{ content:"▼"; opacity:.95; font-size:9px }

/* ---------- 기계별 실적으로 바로 왔을 때 ---------- */
tr.hl td{ background:var(--accent-soft) !important; color:var(--text) }
tr.hl td:first-child{ box-shadow:inset 3px 0 0 var(--accent) }

/* ---------- 해·달 단추 (밝은 모드 / 어두운 모드) ---------- */
.theme-btn{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:6px; padding:4px 9px; font-size:14px; line-height:1.2; cursor:pointer }
.theme-btn:hover{ background:rgba(255,255,255,.24) }
.theme-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.theme-ico{ display:inline-block; width:1em; text-align:center }

/* ---------- 긴 표 : 아래로 내려가도 제목줄이 붙어 있게 ---------- */
/* .scroll 은 가로 스크롤 상자라, 높이를 정해줘야 제목줄 고정이 실제로 동작한다 */
.scroll.tall{ overflow:auto; max-height:calc(100vh - 170px) }
.scroll.tall th{ position:sticky; top:0; z-index:3;
  background:var(--surface-2); box-shadow:inset 0 -1px 0 var(--line) }
/* 첫 칸(자리·기계 이름)은 옆으로 밀어도 붙어 있게 */
.scroll.tall td:first-child, .scroll.tall th:first-child{
  position:sticky; left:0; z-index:2; background:var(--surface) }
.scroll.tall th:first-child{ z-index:4; background:var(--surface-2) }
.scroll.tall tbody tr:hover td:first-child{ background:var(--surface-2) }
.scroll.tall tr.total td:first-child{ background:var(--surface-2) }
.scroll.tall tr.issue-row td{ position:static }
@media (max-width:700px){ .scroll.tall{ max-height:calc(100vh - 140px) } }

/* ---------- 그래프 아래 합계 숫자 ---------- */
.chart-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  margin-top:12px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface-2) }
.chart-sum.cs-span{ margin-top:8px; background:transparent; border-style:dashed }
.cs-head{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em;
  padding-right:6px; border-right:1px solid var(--line) }
.cs-item{ display:flex; align-items:baseline; gap:6px }
.cs-k{ font-size:11.5px; color:var(--muted) }
.cs-v{ font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums }
.cs-v.down{ color:var(--down) }
.cs-tot .cs-k{ color:var(--text); font-weight:700 }
.cs-none{ font-size:12.5px; color:var(--muted) }
@media (max-width:700px){
  .chart-sum{ gap:6px 12px }
  .cs-head{ width:100%; border-right:0; border-bottom:1px solid var(--line); padding-bottom:5px }
}


/* 매출분석 안의 표 */
.ins-table{ font-size:12.5px; margin-top:8px }
.ins-table th{ font-size:11px }
.ins-table td.ins-bad{ color:var(--down); font-weight:700; background:transparent }
.ins-table td.ins-wrap{ white-space:normal; text-align:left; min-width:160px }
.ins-sub{ display:block; font-size:10.5px; color:var(--muted); font-weight:400; margin-top:1px }

/* 한 달만 볼 때 막대 아래 합계 줄 */
.hbar.hbar-tot{ border-top:1px solid var(--line); margin-top:4px; padding-top:6px; font-weight:700 }
.hbar.hbar-tot .hn{ color:var(--text) }
.hbar.hbar-tot .ht{ background:transparent }

/* ---------- 기계 순서 바꾸기 (끌기 · ▲▼) ---------- */
td.ord-cell{ white-space:nowrap; text-align:left }
.ord-grip{ display:inline-block; cursor:grab; color:var(--muted); font-size:15px;
  line-height:1; padding:2px 3px; user-select:none; vertical-align:middle }
.ord-grip:active{ cursor:grabbing }
.ord-in{ width:40px; text-align:center; border:0; background:transparent; color:var(--muted);
  font-size:12px; font-weight:700; padding:0; vertical-align:middle;
  -moz-appearance:textfield }
.ord-in::-webkit-outer-spin-button, .ord-in::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0 }
.ord-btns{ display:inline-flex; flex-direction:column; gap:1px; vertical-align:middle }
.ord-btns button{ border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:4px; font-size:8px; line-height:1; padding:2px 4px; cursor:pointer }
.ord-btns button:hover{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand) }
.ord-btns button:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }

tr.row-dragging td{ opacity:.45 }
tr.row-over td{ box-shadow:inset 0 -2px 0 var(--brand) }
tr.row-moved td{ background:var(--brand-soft) !important; transition:background .5s }
@media (prefers-reduced-motion:reduce){ tr.row-moved td{ transition:none } }

/* ---------- 한 기계에 상품이 여러 개 들어갈 때 ---------- */
/* 「자리」 이름을 같게 적어둔 상품끼리 같은 색으로 묶어 보여준다.
   색은 이름에서 정해지므로 어느 화면에서든 같은 기계는 같은 색이다. */
td.slot-grp{
  background:hsl(var(--sgh,210) 62% 90%) !important;
  color:hsl(var(--sgh,210) 65% 24%);
  box-shadow:inset 3px 0 0 hsl(var(--sgh,210) 55% 42%);
  font-weight:700
}
tbody tr:hover td.slot-grp{ background:hsl(var(--sgh,210) 62% 86%) !important }
.slot-n{ display:inline-block; margin-left:5px; min-width:15px; padding:0 4px;
  border-radius:20px; font-size:10px; font-weight:700; text-align:center;
  background:hsl(var(--sgh,210) 55% 42%); color:#fff }

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sg-l:26%; --sg-t:82%;
}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) td.slot-grp{
    background:hsl(var(--sgh,210) 38% 24%) !important;
    color:hsl(var(--sgh,210) 60% 84%);
    box-shadow:inset 3px 0 0 hsl(var(--sgh,210) 55% 58%)
  }
  :root:not([data-theme="light"]) tbody tr:hover td.slot-grp{
    background:hsl(var(--sgh,210) 38% 29%) !important }
  :root:not([data-theme="light"]) .slot-n{
    background:hsl(var(--sgh,210) 55% 58%); color:#0C1017 }
}
:root[data-theme="dark"] td.slot-grp{
  background:hsl(var(--sgh,210) 38% 24%) !important;
  color:hsl(var(--sgh,210) 60% 84%);
  box-shadow:inset 3px 0 0 hsl(var(--sgh,210) 55% 58%)
}
:root[data-theme="dark"] tbody tr:hover td.slot-grp{
  background:hsl(var(--sgh,210) 38% 29%) !important }
:root[data-theme="dark"] .slot-n{
  background:hsl(var(--sgh,210) 55% 58%); color:#0C1017 }

/* ---------- 이슈를 이름 옆 아이콘으로 ---------- */
/* 줄을 통째로 쓰면 표가 늘어져서, 아이콘만 두고 누르면 내용이 열리게 한다 */
.issue-ico{ border:0; background:transparent; cursor:pointer; padding:0 2px;
  font-size:14px; line-height:1; vertical-align:middle; margin-left:3px;
  border-radius:5px }
.issue-ico:hover{ background:var(--surface-2) }
.issue-ico:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }

/* ---------- 월간회의 : 주요 성과 ---------- */
.win-list{ margin:4px 0 0; padding-left:22px }
.win-item{ padding:3px 0 }
.win-item, .win-add{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.win-in{ flex:1; min-width:240px }
.win-tx{ font-size:14px }
.win-add{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line) }

.win-pool{ margin-top:14px; padding:11px 13px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px }
.win-pool>b{ display:block; font-size:12px; color:var(--muted); margin-bottom:8px }
.win-grp{ margin-bottom:9px }
.win-grp:last-child{ margin-bottom:0 }
.win-grp ul{ margin:6px 0 0; padding-left:0; list-style:none }
.win-grp li{ padding:2px 0 }
.win-pick{ display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:7px; padding:6px 10px; font-size:13px; font-family:inherit; line-height:1.45 }
.win-pick:hover{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand) }
.win-pick:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }
.win-pick::before{ content:"＋ "; color:var(--muted); font-weight:700 }
.win-pick:hover::before{ color:var(--brand) }
@media print{ .win-pool, .win-add{ display:none } .win-in{ border:0; padding:0 } }

/* ---------- 1일 매출 달력 ---------- */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px }
.cal.cal-weeks{ grid-template-columns:repeat(8,minmax(0,1fr)) }
.cal-d.cal-week{ cursor:default; font-weight:700; border-width:2px; overflow:hidden }
.cal-d.cal-week .cal-t{ overflow-wrap:anywhere }
@media (max-width:760px){ .cal-d.cal-week .cal-s{ display:none } .cal-d.cal-week .cal-t{ font-size:10px; letter-spacing:-.02em } .cal-d.cal-week .cal-g{ font-size:9.5px; white-space:nowrap } }
.cal-h{ font-size:13.5px; font-weight:700; color:var(--muted); text-align:center;
  padding:5px 0 7px; letter-spacing:.04em }
/* 앞의 빈 칸을 채운 지난달 날짜 — 이번 달과 구분만 되게 살짝 흐리고, 누를 수 없다 */
.cal-d.cal-prev{ opacity:.62; cursor:default }
.cal-h.cal-we{ color:var(--brand) }
.cal-x{ min-height:74px }
.cal-d{ position:relative; min-height:74px; padding:6px 7px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface);
  /* 매출이 클수록 진하게 — --p 는 그 달 최고 대비 비율 */
  box-shadow:inset 0 0 0 999px rgba(31,78,107,calc(var(--p,0) * 0.16)) }
.cal-d.cal-none{ background:var(--surface-2); border-style:dashed }
.cal-d.cal-top{ border-color:var(--up); border-width:2px }
.cal-d.cal-bot{ border-color:var(--down); border-width:2px }
.cal-n{ font-size:12px; font-weight:700; color:var(--text); display:flex;
  align-items:center; gap:4px; flex-wrap:wrap }
.cal-we .cal-n, .cal-d.cal-we .cal-n{ color:var(--brand) }
.cal-tag{ font-size:9px; font-weight:700; padding:0 4px; border-radius:20px; line-height:1.6 }
.cal-tag.up{ background:var(--up-soft); color:var(--up) }
.cal-tag.down{ background:var(--down-soft); color:var(--down) }
.cal-t{ font-size:13px; font-weight:700; margin-top:3px; color:var(--text);
  font-variant-numeric:tabular-nums }
.cal-s{ font-size:10px; color:var(--muted); margin-top:2px; display:flex;
  flex-direction:column; gap:0; font-variant-numeric:tabular-nums }

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cal-d{
  box-shadow:inset 0 0 0 999px rgba(111,178,214,calc(var(--p,0) * 0.20)) }}
:root[data-theme="dark"] .cal-d{
  box-shadow:inset 0 0 0 999px rgba(111,178,214,calc(var(--p,0) * 0.20)) }

@media (max-width:760px){
  .cal{ gap:3px }
  .cal-d, .cal-x{ min-height:62px; padding:4px 5px }
  .cal-t{ font-size:11.5px }
  .cal-s{ font-size:9px }
}

/* ---------- 매출분석 : 안전 → 관심 → 주의 → 경계 → 심각 ---------- */
/* 초록에서 빨강으로 자연스럽게 넘어가되, 다섯이 서로 구분되게 골랐다 */
:root{
  --lv-safe:#12684A;    --lv-safe-s:#DFF1E9;
  --lv-watch:#1F5FA8;   --lv-watch-s:#DDE9F8;
  --lv-caution:#7E5A00; --lv-caution-s:#FAF0D2;
  --lv-alert:#A5500B;   --lv-alert-s:#FCE7D5;
  --lv-severe:#AE3527;  --lv-severe-s:#FAE8E5;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --lv-safe:#55BC96;    --lv-safe-s:#102A21;
  --lv-watch:#7FB3E8;   --lv-watch-s:#111F2E;
  --lv-caution:#DFC05E; --lv-caution-s:#2A2411;
  --lv-alert:#F0964F;   --lv-alert-s:#2E1D10;
  --lv-severe:#E8837A;  --lv-severe-s:#331F1D;
}}
:root[data-theme="dark"]{
  --lv-safe:#55BC96;    --lv-safe-s:#102A21;
  --lv-watch:#7FB3E8;   --lv-watch-s:#111F2E;
  --lv-caution:#DFC05E; --lv-caution-s:#2A2411;
  --lv-alert:#F0964F;   --lv-alert-s:#2E1D10;
  --lv-severe:#E8837A;  --lv-severe-s:#331F1D;
}

.lv-safe   { --lvc:var(--lv-safe);    --lvs:var(--lv-safe-s) }
.lv-watch  { --lvc:var(--lv-watch);   --lvs:var(--lv-watch-s) }
.lv-caution{ --lvc:var(--lv-caution); --lvs:var(--lv-caution-s) }
.lv-alert  { --lvc:var(--lv-alert);   --lvs:var(--lv-alert-s) }
.lv-severe { --lvc:var(--lv-severe);  --lvs:var(--lv-severe-s) }

.insight[class*="lv-"]{ background:var(--lvs); border-left:4px solid var(--lvc) }
.insight>summary{ gap:8px }
.insight>summary::after{ flex:none }
.ins-tag{ flex:none; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px;
  white-space:nowrap; letter-spacing:.02em; background:var(--lvc); color:var(--surface) }
.ins-title{ font-weight:700; color:var(--text) }
/* 펼친 내용은 흰 바탕에 올려 글씨가 또렷하게 */
.ins-body{ margin-top:8px; padding:10px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:8px }
.ins-body .ins-detail{ margin-top:0 }

.lv-pill{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11.5px;
  font-weight:700; background:var(--lvc); color:var(--surface) }
.lv-legend{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin:-4px 0 12px; font-size:11.5px; color:var(--muted) }
.lv-key{ display:inline-flex; align-items:center; gap:4px }
.lv-dot{ width:9px; height:9px; border-radius:50%; background:var(--lvc); display:inline-block }

/* ---------- 월간회의 성과 : 숫자 강조와 기계 아이콘 ---------- */
.wv-won{ color:var(--brand); font-weight:700; font-variant-numeric:tabular-nums }
.wv-pct{ color:var(--up); font-weight:700; background:var(--up-soft);
  padding:0 5px; border-radius:5px; font-variant-numeric:tabular-nums }
.mb{ display:inline-block; font-size:10px; font-weight:700; line-height:1.7;
  padding:0 6px; border-radius:5px; vertical-align:middle }
.mb-box{ background:var(--accent-soft); color:var(--accent) }
.mb-big{ background:var(--brand-soft); color:var(--brand); letter-spacing:.03em }
.win-item{ display:block }
.win-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
/* 월간회의 2·4·5번 — 한 항목에 칸 하나. 적는 만큼 키가 늘어나므로
   손으로 끄는 손잡이와 스크롤은 없앤다 (높이는 footer.php 에서 맞춘다). */
textarea.line-in{ resize:none; overflow:hidden; min-height:38px; line-height:1.5;
  font-family:inherit; font-size:inherit }
@media print{ textarea.line-in{ border:0; padding:0 } }
.win-prev{ margin:4px 0 2px; font-size:12.5px; color:var(--muted) }
@media print{ .win-row{ display:none } .win-prev{ color:var(--text); font-size:14px } }

/* ---------- 매출 달력 : 주말·공휴일·요일 평균 대비 ---------- */
.cal-h.h-sat{ color:#2A6FB8 }
.cal-h.h-sun{ color:#B03A2E }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  .cal-h.h-sat{ color:#7FB3E8 } .cal-h.h-sun{ color:#E8837A } }}
:root[data-theme="dark"] .cal-h.h-sat{ color:#7FB3E8 }
:root[data-theme="dark"] .cal-h.h-sun{ color:#E8837A }

/* 토요일은 파랑, 일요일·공휴일은 빨강 계열로 바탕을 살짝 물들인다 */
.cal-d.cal-sat{ background:#F1F6FC }
.cal-d.cal-sun{ background:#FDF3F2 }
.cal-d.cal-hol{ background:#FCEFEE; border-color:#D9A6A0 }
.cal-d.cal-sat .cal-dd{ color:#2A6FB8 }
.cal-d.cal-sun .cal-dd, .cal-d.cal-hol .cal-dd{ color:#B03A2E }
.cal-hn{ font-size:9px; font-weight:700; padding:0 4px; border-radius:20px;
  background:#B03A2E; color:#fff; line-height:1.7 }

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  .cal-d.cal-sat{ background:#141E29 }
  .cal-d.cal-sun{ background:#251A19 }
  .cal-d.cal-hol{ background:#2B1A18; border-color:#6B403A }
  .cal-d.cal-sat .cal-dd{ color:#7FB3E8 }
  .cal-d.cal-sun .cal-dd, .cal-d.cal-hol .cal-dd{ color:#E8837A }
  .cal-hn{ background:#8C4A42 }
}}
:root[data-theme="dark"] .cal-d.cal-sat{ background:#141E29 }
:root[data-theme="dark"] .cal-d.cal-sun{ background:#251A19 }
:root[data-theme="dark"] .cal-d.cal-hol{ background:#2B1A18; border-color:#6B403A }
:root[data-theme="dark"] .cal-d.cal-sat .cal-dd{ color:#7FB3E8 }
:root[data-theme="dark"] .cal-d.cal-sun .cal-dd,
:root[data-theme="dark"] .cal-d.cal-hol .cal-dd{ color:#E8837A }
:root[data-theme="dark"] .cal-hn{ background:#8C4A42 }

/* 공휴일·행사·이슈 딱지 — 아이콘만 붙이고, 커서를 올리면 바로 옆에 내용이 뜬다.
   (공휴일은 이름이 곧 내용) */
.cal-mk{ position:relative; font-size:11px; line-height:1.4; cursor:default }
.cal-mkt{ position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:6px; display:none; z-index:30;
  font-style:normal; font-size:11.5px; font-weight:600; line-height:1.45;
  padding:6px 9px; border-radius:8px;
  /* 담는 칸이 아이콘만 해서 폭을 안 정하면 글자가 한 자씩 세로로 접힌다.
     max-content 로 글 길이에 맞추고, 길면 max-width 에서 줄을 바꾼다. */
  width:max-content; max-width:230px; white-space:normal;
  background:var(--text); color:var(--surface); box-shadow:var(--shadow) }
.cal-mk:hover .cal-mkt, .cal-mk:focus .cal-mkt{ display:block }
/* 오른쪽 끝 두 칸은 말풍선이 화면 밖으로 나가므로 왼쪽으로 편다 */
.cal > *:nth-child(7n) .cal-mkt,
.cal > *:nth-child(7n+6) .cal-mkt{ left:auto; right:100%; margin-left:0; margin-right:6px }
:root[data-theme="dark"] .cal-mkt{ background:#E8ECF1; color:#141A22 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  .cal-mkt{ background:#E8ECF1; color:#141A22 }
}}

.cal-dd{ font-weight:700 }
.cal-tag.t-up{ background:var(--up-soft); color:var(--up) }
.cal-tag.t-dn{ background:var(--down-soft); color:var(--down) }
/* 같은 요일 평균과 견준 값 */
.cal-g{ font-size:10.5px; font-weight:700; margin-top:1px; font-variant-numeric:tabular-nums }
.cal-g.g-up{ color:var(--up) }
.cal-g.g-dn{ color:var(--down) }
.cal-g.g-mid{ color:var(--muted) }
/* 그래프 합계칸 : 어느 그래프에서든 총매출을 같이 보여준다 */
.cs-item.cs-ref{ padding-left:12px; border-left:1px dashed var(--line) }
.cs-ref .cs-k{ color:var(--muted) }
.cs-ref .cs-v{ color:var(--muted); font-weight:700 }
.cs-share{ font-size:11px; color:var(--brand); font-weight:700 }

/* ---------- 매출 달력 : 날짜를 눌러 그날 자리별로 보기 ---------- */
a.cal-d{ display:block; text-decoration:none; color:inherit; cursor:pointer }
a.cal-d:hover{ border-color:var(--brand) }
a.cal-d:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
a.cal-d.cal-sel{ border-color:var(--brand); border-width:2px;
  box-shadow:inset 0 0 0 999px rgba(31,78,107,.10), 0 0 0 3px var(--brand-soft) }

/* 인형 / 게임 비율 막대 */
.ratio-bar{ display:flex; height:14px; border-radius:20px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line) }
.ratio-bar span{ display:block; height:100% }
.rb-doll{ background:var(--accent) }
.rb-game{ background:var(--brand) }
.ratio-key{ display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  margin-top:8px; font-size:12.5px; color:var(--muted) }
.ratio-key b{ color:var(--text); font-size:14px }
.rb-dot{ display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:5px; vertical-align:middle }
.ratio-key .btn{ margin-left:auto }

/* ---------- 요일 × 시간 히트맵 ---------- */
table.heat{ border-collapse:separate; border-spacing:2px; width:auto; font-size:11px }
table.heat th{ background:transparent; position:static; font-size:10.5px; color:var(--muted);
  padding:2px 4px; text-align:center; border:0 }
table.heat th.heat-d{ text-align:right; padding-right:8px; white-space:nowrap; color:var(--text); font-weight:700 }
.heat-n{ display:block; font-size:9px; font-weight:400; color:var(--muted) }
td.heat-c{ width:30px; height:26px; text-align:center; border:0; padding:0; border-radius:4px;
  font-size:9.5px; font-weight:700; color:var(--text);
  background:color-mix(in srgb, var(--brand) calc(var(--p,0) * 100%), var(--surface-2)) }
td.heat-c.heat-hi{ color:#fff }
td.heat-sum, th.heat-sum{ border:0; padding-left:10px; text-align:right; font-weight:700;
  font-size:11px; color:var(--text); background:transparent }
/* color-mix 를 못 쓰는 브라우저 대비 — 투명도로 같은 효과를 낸다 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  td.heat-c{ position:relative; background:var(--surface-2) }
  td.heat-c::before{ content:""; position:absolute; inset:0; border-radius:4px;
    background:var(--brand); opacity:var(--p,0) }
  td.heat-c{ z-index:0 } td.heat-c::before{ z-index:-1 }
}
.mb-etc{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line) }

/* ---------- 휴대폰 메뉴 접기 ---------- */
/* 메뉴가 16개라 휴대폰에서는 화면을 다 덮는다. 평소엔 접어두고 필요할 때 편다. */
.nav-btn{ display:none; align-items:center; gap:7px; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:7px; padding:7px 11px; font-size:13.5px; font-weight:700; font-family:inherit }
.nav-btn:hover{ background:rgba(255,255,255,.26) }
.nav-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.nav-ico{ font-size:15px; line-height:1 }
.nav-now{ max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

@media (max-width:820px){
  .topbar{ padding:0 12px; gap:8px }
  .nav-btn{ display:inline-flex; margin-left:auto; order:2 }
  .topbar .right{ order:3 }
  .topbar nav{
    order:4; flex:0 0 100%; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:min(70vh, 460px); overflow-y:auto;
    margin:0 -12px; padding:4px 0 8px;
    border-top:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.12);
  }
  .topbar nav.open{ display:flex }
  .topbar nav a{
    padding:12px 16px; font-size:14.5px; border-bottom:0;
    border-left:3px solid transparent;
  }
  .topbar nav a.active{ border-bottom:0; border-left-color:#fff; background:rgba(255,255,255,.12) }
  .topbar .brand{ font-size:15px; margin-right:0 }
  .topbar .right .who{ display:none }   /* 좁은 화면에서는 자리만 차지한다 */
}
@media (max-width:400px){
  .nav-now{ display:none }
  .topbar .right a{ padding:5px 8px }
}

/* ---------- 아이콘 고르기 ---------- */
td.ic-cell{ position:relative }
.ic-pick{ display:block; width:100%; margin-top:4px; cursor:pointer; font-size:10.5px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
  border-radius:5px; padding:3px 0; font-family:inherit }
.ic-pick:hover{ border-color:var(--brand); color:var(--brand) }
.ic-box{ position:absolute; z-index:30; top:100%; left:0; margin-top:4px; width:290px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:10px 12px; text-align:left }
.ic-head{ display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px }
.ic-grp{ margin-bottom:8px }
.ic-grp>b{ font-size:11px; color:var(--muted); display:block; margin-bottom:4px }
.ic-list{ display:flex; flex-wrap:wrap; gap:4px }
.ic-one{ cursor:pointer; min-width:30px; height:28px; padding:0 6px; font-size:14px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  border-radius:6px; font-family:inherit; line-height:1 }
.ic-one:hover{ border-color:var(--brand); background:var(--brand-soft) }

/* ---------- 보기 전용으로 들어온 「고치는 화면」 ---------- */
/* 저장은 서버에서 막지만, 눌러도 안 되는 단추가 살아 있으면 헷갈린다 */
.container.ro input:not([type=hidden]),
.container.ro select,
.container.ro textarea,
.container.ro button[type="submit"]{
  pointer-events:none; opacity:.5; filter:grayscale(.4);
}
.container.ro .msg input, .container.ro .msg select{ opacity:1; filter:none }

/* ---------- 어디서든 우클릭해 적는 메모 ---------- */
#memoBox{position:fixed;z-index:900;width:300px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 8px 28px rgba(0,0,0,.28)}
/* A 키로 열 때 — 마우스 자리가 없으므로 화면 가운데 위쪽에 세운다 */
#memoBox.memo-mid{left:50%;top:16vh;transform:translateX(-50%)}
#memoBox .memo-head{font-size:12px;font-weight:700;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#memoBox .memo-head .hint{font-weight:400}
#memoBox input[type=text]{width:100%}
#memoBox .memo-foot{display:flex;gap:8px;align-items:center;margin-top:8px}
#memoBox .memo-foot select{flex:0 0 auto}
#memoToast, #saveToast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:950;
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#memoToast.bad{background:var(--down,#B3261E)}
/* 저장하고 그 자리에 머물 때, 저장됐다는 것을 아래에 잠깐 띄운다 */
#saveToast{background:var(--up,#12684A)}
@media print{ #saveToast{ display:none !important } }

/* ---- 주간입력 : 좌·우 두 단말기 기계 ---- */
/* 좌(금액·경품) → 우(금액·경품) 차례로 넣도록 좌·우를 위아래로 놓는다 */
.lr{ display:flex; align-items:center; gap:5px; margin-bottom:3px }
.lr-t{ font-size:11px; color:var(--muted); flex:0 0 auto; width:11px; text-align:center }

/* ---- 주간입력 : 단말기 자료 ---- */
input.cnt.filled{ background:var(--brand-soft) }        /* 단말기에서 채운 칸 */
.tgap{ color:var(--down); font-weight:700; font-size:12px; white-space:nowrap }
.dzin{ width:132px; font-size:12px; margin-top:3px }

/* ---- 대시보드 : 한눈에 보는 요약 ---- */
/* 자세한 항목별 표는 월간회의에 두고, 여기는 금액·증감·움직인 것만 크게 보여준다 */
.brief{ margin:2px 0 14px }
.brief-k{ font-size:12px; color:var(--muted); font-weight:700 }
.brief-v{ font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:2px 0 4px }
.brief-d{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--muted) }
.brief-d b{ font-weight:700; color:var(--text) }
.brief-d b.up{ color:var(--up) }
.brief-d b.down{ color:var(--down) }
.brief-tags{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:7px;
  padding-top:8px; border-top:1px solid var(--line) }
.dash-more{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line) }
.dash-more a{ font-weight:700 }

/* ---- 1주 매출 : 기계별 차례 고르기 ---- */
.ordpick{ display:flex; gap:0; margin-left:auto; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden }
.ordpick a{ padding:6px 13px; font-size:12.5px; font-weight:700; text-decoration:none;
  color:var(--muted); background:var(--surface-2) }
.ordpick a + a{ border-left:1px solid var(--line) }
.ordpick a:hover{ color:var(--text) }
.ordpick a.on{ background:var(--brand); color:#fff }

/* 사업장 전환은 매출 데이터와 독립된 화면 이동이다. */
#workspaceSwitch{width:166px;max-width:100%;padding:7px 22px 7px 7px;background:#1f2937;color:#fff;border:1px solid #475569;border-radius:8px;font-size:13px;cursor:pointer}
#workspaceSwitch option{background:#1f2937;color:#fff}
.brand-shell label.brand{display:block;color:#aebbd0;font-size:10px;margin-bottom:4px}
/* ---------- 2026 작업공간 틀 ----------
   많은 화면을 한 줄에 늘어놓지 않고, 업무별 사이드바로 묶는다. */
@media (min-width:921px){
  body{ padding-left:74px }
  .topbar{
    position:fixed; inset:0 auto 0 0; width:74px; height:100vh; padding:22px 14px 16px;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:18px;
    background:#111827; box-shadow:7px 0 24px rgba(15,23,42,.09); overflow:hidden;
    transition:width .2s ease,box-shadow .2s ease; z-index:120;
  }
  .topbar:hover,.topbar:focus-within{ width:252px; box-shadow:14px 0 38px rgba(15,23,42,.18) }
  .brand-shell{ padding:0 6px 4px }
  .topbar nav{ display:block; flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:3px }
  .topbar nav{ scrollbar-width:none }
  .topbar nav::-webkit-scrollbar{ width:0 }
  .topbar:hover nav,.topbar:focus-within nav{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent }
  .topbar:hover nav::-webkit-scrollbar,.topbar:focus-within nav::-webkit-scrollbar{ width:6px }
  .topbar nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:8px }
  .nav-group{ margin-bottom:17px }
  .nav-group-title{ padding:0 10px 6px; color:rgba(255,255,255,.43); font-size:11px;
    font-weight:700; letter-spacing:.08em }
  .nav-links{ display:flex; flex-direction:column; gap:3px }
  .topbar nav a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:0;
    border-radius:9px; color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.35 }
  .topbar nav a:hover{ color:#fff; background:rgba(255,255,255,.08) }
  .topbar nav a.active{ color:#fff; background:#3156D9; border:0; font-weight:700 }
  .nav-symbol{ width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px;
    border-radius:7px; background:rgba(255,255,255,.08); font-size:12px; font-weight:700 }
  .topbar nav a.active .nav-symbol{ background:rgba(255,255,255,.18) }
  .topbar .right{ flex:0 0 auto; padding:13px 8px 0; border-top:1px solid rgba(255,255,255,.12);
    justify-content:space-between }
  .brand-shell>div,.nav-group-title,.nav-links a>span:last-child,.topbar .right .who,.topbar .right>a{
    opacity:0; visibility:hidden; white-space:nowrap; transition:opacity .12s ease,visibility .12s ease;
  }
  .topbar:hover .brand-shell>div,.topbar:focus-within .brand-shell>div,
  .topbar:hover .nav-group-title,.topbar:focus-within .nav-group-title,
  .topbar:hover .nav-links a>span:last-child,.topbar:focus-within .nav-links a>span:last-child,
  .topbar:hover .right .who,.topbar:focus-within .right .who,
  .topbar:hover .right>a,.topbar:focus-within .right>a{ opacity:1; visibility:visible }
  .topbar .right{ justify-content:center }
  .topbar:hover .right,.topbar:focus-within .right{ justify-content:space-between }
  .container{ max-width:1280px; padding:30px 28px 84px }
  .container.wide{ max-width:1800px }
}

.brand-shell{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand-mark{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  border-radius:10px; color:#fff; background:#3B63F3; font-size:15px; font-weight:800;
  box-shadow:0 8px 18px rgba(59,99,243,.28) }
.topbar .brand{ margin:0; padding:0; line-height:1.25; overflow:hidden; text-overflow:ellipsis }
.brand-sub{ margin-top:2px; color:rgba(255,255,255,.48); font-size:10.5px; letter-spacing:.03em;
  white-space:nowrap }
.nav-group-title{ text-transform:uppercase }

.section-tabs{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0 0 18px; padding:8px 10px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 5px 18px rgba(23,32,51,.04) }
.section-tabs-title{ flex:0 0 auto; padding:2px 7px 0; font-size:13px; font-weight:800; color:var(--muted) }
.section-tabs>div{ display:flex; gap:4px; min-width:0; max-width:100%; overflow-x:auto }
.section-tabs a{ flex:0 0 auto; padding:8px 12px; border-radius:9px; color:var(--muted);
  font-size:13px; font-weight:700; text-decoration:none }
.section-tabs a:hover{ color:var(--text); background:var(--surface-2) }
.section-tabs a.active{ color:#fff; background:var(--brand) }
.report-tabs{ display:flex; gap:5px; margin:0 0 18px; padding:5px; border:1px solid var(--line);
  border-radius:13px; background:var(--surface-2); overflow-x:auto }
.report-tabs button,.report-tabs a{ text-decoration:none; text-align:center; display:inline-block; flex:1 0 auto; min-width:120px; padding:9px 13px; border:0; border-radius:9px;
  color:var(--muted); background:transparent; font:inherit; font-size:13px; font-weight:700; cursor:pointer }
.report-tabs button:hover,.report-tabs a:hover{ color:var(--text); background:var(--surface) }
.report-tabs button.active,.report-tabs a.active{ color:#fff; background:var(--brand); box-shadow:0 4px 12px rgba(49,86,217,.24) }
[data-report-panel][hidden]{ display:none!important }
@media print{ [data-report-panel][hidden]{ display:block!important } .report-tabs{ display:none!important } }
.trend-brief-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px }
.trend-brief-list>div{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 8px;
  padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2) }
.trend-brief-list .tag{ grid-row:1 / span 2 }
.trend-brief-list b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
.trend-brief-list .hint{ font-size:11px }
.issue-trend-card{ border-color:#fecaca; background:linear-gradient(145deg,var(--surface) 0%,rgba(254,242,242,.72) 100%) }
.issue-news-list a{ grid-template-columns:auto minmax(0,1fr) }
.issue-level{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:4px 7px;
  border-radius:999px; font-size:11px; font-weight:800; grid-row:1 / span 2 }
.issue-level.level-high{ color:#991b1b; background:#fee2e2 }
.issue-level.level-mid{ color:#9a3412; background:#ffedd5 }
.issue-level.level-low{ color:#854d0e; background:#fef9c3 }
.trend-kpis{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.auto-character-strip{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:-5px 0 17px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.auto-character-strip>b{ margin-right:5px; font-size:12px }
.auto-character-strip small{ color:var(--muted); font-size:11px }
.source-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px }
.source-link{ display:flex; flex-direction:column; gap:3px; padding:13px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface-2); color:var(--text); text-decoration:none }
.source-link:hover{ border-color:var(--brand); transform:translateY(-1px) }
.source-link span{ color:var(--muted); font-size:12px }
.market-source-groups{ display:grid; gap:9px }
.market-source{ border:1px solid var(--line); border-radius:12px; background:var(--surface-2); overflow:hidden }
.market-source>summary{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; cursor:pointer; list-style:none }
.market-source>summary::-webkit-details-marker{ display:none }
.market-source>summary span{ color:var(--muted); font-size:12px }
.market-source .source-links{ padding:0 12px 12px }
.source-links.compact{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.source-links.compact .source-link{ padding:9px 10px }
.market-source-note{ margin:0; padding:0 13px 11px; color:var(--muted); font-size:11px }
.channel-pulse{ display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:8px; padding:0 12px 11px }
.channel-pulse section{ min-width:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface) }
.channel-pulse small{ display:block; margin-bottom:7px; color:var(--muted); font-size:10px; font-weight:800 }
.channel-pulse section>div{ display:flex; flex-wrap:wrap; gap:5px }
.channel-products>div{ display:grid!important; gap:5px }
.channel-products a,.channel-products span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px }
@media(max-width:780px){ .channel-pulse{ grid-template-columns:1fr } }
.repeat-news-summary{ margin:0 0 13px; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2) }
.repeat-news-summary h3{ margin:0 0 9px; font-size:14px }
.repeat-keyword-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:7px }
.repeat-keyword-grid details{ padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface) }
.repeat-keyword-grid summary{ display:flex; justify-content:space-between; gap:8px; cursor:pointer; list-style:none }
.repeat-keyword-grid p,.repeat-keyword-grid small{ display:block; margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.5 }
.naver-trend-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-top:10px }
.naver-trend-item{ display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); text-decoration:none }
.naver-trend-item strong{ color:var(--muted); font-size:13px }
.naver-trend-item strong.up{ color:#0b8f69 }.naver-trend-item strong.down{ color:#d14b4b }
.naver-trend-item span{ grid-column:1/-1; color:var(--muted); font-size:11px }
.keyword-coverage-card{ margin-top:14px }
.keyword-coverage-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:18px }
.keyword-coverage-grid h3{ margin:10px 0 8px; font-size:13px }
.keyword-rank-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:7px }
.keyword-rank-list details{ padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface) }
.keyword-rank-list summary{ display:flex; justify-content:space-between; gap:8px; cursor:pointer; list-style:none }
.keyword-rank-list small{ display:block; margin-top:6px; color:var(--muted); line-height:1.4 }
.keyword-gap-list{ display:flex; flex-wrap:wrap; gap:6px }
@media(max-width:760px){.keyword-coverage-grid{grid-template-columns:1fr}}
.live-news-list{ display:grid; gap:7px }
.live-news-list>a{ display:grid; grid-template-columns:auto 1fr; gap:3px 9px; align-items:center;
  padding:10px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text);
  background:var(--surface-2); text-decoration:none }
.live-news-list>a:hover{ border-color:var(--brand) }
.live-news-list .tag{ grid-row:1 / span 2 }
.live-news-list b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
.live-news-list .hint{ font-size:11px }
.news-clusters{ display:grid; gap:9px }
.news-cluster{ border:1px solid var(--line); border-radius:13px; background:var(--surface-2); overflow:hidden }
.news-cluster>summary{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center;
  padding:13px 14px; cursor:pointer; list-style:none }
.news-cluster>summary::-webkit-details-marker{ display:none }
.news-cluster>summary:after{ content:'＋'; position:absolute; right:14px; color:var(--muted); font-weight:800 }
.news-cluster[open]>summary:after{ content:'－' }
.news-cluster>summary{ position:relative; padding-right:42px }
.news-cluster>summary span:last-child{ display:grid; gap:3px }
.news-cluster>summary small{ color:var(--muted); font-size:12px; font-weight:500; line-height:1.45 }
.news-cluster-body{ padding:0 12px 12px }
.cluster-tags{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 0 }
.trend-search-form{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; margin-top:13px;
  padding:13px; border-radius:12px; background:var(--surface-2) }
.trend-search-form label{ display:grid; gap:5px; font-size:12px; font-weight:800; color:var(--muted) }
.trend-search-form textarea{ width:100%; resize:vertical }
.product-filter{ display:grid; gap:8px; margin:8px 0 12px; padding:11px; border-radius:12px; background:var(--surface-2) }
.product-filter>div{ display:flex; align-items:center; gap:6px; overflow-x:auto; padding-bottom:2px }
.product-filter b{ flex:0 0 52px; color:var(--muted); font-size:11px }
.product-filter button{ flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:6px 10px;
  background:var(--surface); color:var(--muted); font:inherit; font-size:11px; font-weight:700; cursor:pointer }
.product-filter button.active{ border-color:var(--brand); background:var(--brand); color:#fff }
.trend-product-list{ display:grid; gap:7px; max-height:650px; overflow:auto }
.trend-product{ border:1px solid var(--line); border-radius:11px; background:var(--surface); overflow:hidden }
.trend-product>summary{ display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  padding:10px 11px; cursor:pointer; list-style:none }
.trend-product>summary::-webkit-details-marker{ display:none }
.trend-product>summary b{ flex:1 1 280px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
.tag.soft{ opacity:.82 }
.product-price-chip{ flex:0 0 auto; padding:4px 7px; border-radius:7px; background:color-mix(in srgb,var(--brand) 10%,var(--surface)); color:var(--text); font-size:11px; font-weight:750 }
.trend-product-detail{ padding:0 12px 12px 12px; border-top:1px solid var(--line); background:var(--surface-2) }
.product-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:7px; padding-top:10px }
.product-facts span{ padding:8px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:11px; background:var(--surface) }
.product-facts b{ display:block; margin-top:2px; color:var(--text); font-size:12px }
.trend-product-detail>a{ display:inline-block; margin:10px 0 5px; font-size:12px; font-weight:700 }
.product-note{ margin:7px 0; font-size:12px }
.product-edit-form{ display:grid; grid-template-columns:2fr 1fr 2fr auto auto; gap:8px; align-items:end; margin-top:8px }
.product-edit-form label{ display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:700 }
.product-edit-form .product-hide{ display:flex; align-items:center; gap:5px; min-height:38px; white-space:nowrap }
.muted-product{ opacity:.58 }
.monthly-digest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.monthly-digest-grid section{ padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2) }
.monthly-digest-grid h3{ margin:0 0 9px; font-size:14px }
.digest-line{ padding:9px 0; border-top:1px solid var(--line) }
.digest-line:first-of-type{ border-top:0; padding-top:0 }
.digest-line p{ margin:4px 0; font-size:12px; line-height:1.5 }
.digest-line small{ color:var(--muted) }
@media(max-width:900px){
  .trend-search-form,.product-edit-form{ grid-template-columns:1fr }
  .monthly-digest-grid{ grid-template-columns:1fr }
  .trend-product>summary{ grid-template-columns:auto auto minmax(0,1fr) }
}

/* 정보 덩어리는 선보다 여백과 층으로 구분한다. */
.card,.kpi{ border-color:color-mix(in srgb,var(--line) 75%,transparent); box-shadow:0 8px 24px rgba(23,32,51,.055) }
.card{ padding:19px 20px; margin-bottom:18px }
.card h2{ font-size:16px; letter-spacing:-.01em }
.kpis{ gap:13px; margin-bottom:18px }
.kpi{ padding:16px 17px }
.kpi .v{ font-size:22px }
h1{ font-size:24px; letter-spacing:-.035em }
.sub{ margin-top:3px }
.btn{ border-radius:10px; box-shadow:0 2px 5px rgba(23,32,51,.08) }
select,input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],textarea{
  border-radius:10px; min-height:38px }

.wk-mobile-tools{ display:none }
.wk-filter-tools{ display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:13px;
  padding:11px 12px; border-radius:11px; background:var(--surface-2) }
.wk-filter-tools label{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted) }
.wk-filter-tools select{ min-height:34px; padding-top:5px; padding-bottom:5px }
.wk-filter-tools .wk-check{ min-height:34px; padding:0 4px; color:var(--text); cursor:pointer }
.wk-filter-tools input[type=checkbox]{ width:17px; height:17px; accent-color:var(--brand) }
#wk tr[hidden]{ display:none!important }

@media (max-width:920px){
  body{ padding-left:0 }
  .topbar{ padding:8px 12px; gap:8px; flex-wrap:wrap; background:#111827 }
  .brand-shell{ max-width:42% }
  .brand-sub{ display:none }
  .nav-btn{ display:inline-flex; margin-left:auto; order:2 }
  .topbar .right{ order:3 }
  .topbar nav{
    order:4; flex:0 0 calc(100% + 24px); display:none; max-height:calc(100vh - 66px);
    overflow-y:auto; margin:0 -12px -8px; padding:14px 12px 22px;
    background:#172033; border-top:1px solid rgba(255,255,255,.1)
  }
  .topbar nav.open{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .nav-group{ min-width:0 }
  .nav-group-title{ padding:0 8px 5px; color:rgba(255,255,255,.45); font-size:10.5px;
    font-weight:700; letter-spacing:.07em }
  .nav-links{ display:flex; flex-direction:column; gap:2px }
  .topbar nav a{ display:flex; align-items:center; gap:8px; padding:9px 8px; border:0;
    border-radius:8px; color:rgba(255,255,255,.76); font-size:13.5px; line-height:1.25 }
  .topbar nav a.active{ border:0; background:#3156D9; color:#fff }
  .nav-symbol{ width:20px; flex:0 0 20px; text-align:center; font-size:11px; font-weight:700 }
  .topbar .brand{ font-size:14.5px }
  .topbar .right .who{ display:none }
  .container{ padding:20px 12px 64px }
  .section-tabs{ align-items:flex-start; flex-direction:column; gap:5px; padding:8px }
  .section-tabs-title{ padding:3px 6px 0 }
  .section-tabs>div{ width:100% }
}

/* 주간 입력은 휴대폰에서 기계별 카드로 바꾼다. 자주 쓰는 두 카운터와 계산값을
   먼저 보여주고, 예외 처리 칸은 「모든 칸 보기」로 원래 표를 열 수 있다. */
@media (max-width:700px){
  .wk-mobile-tools{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:12px }
  #wk:not(.wk-full),#wk:not(.wk-full) tbody{ display:block; width:100% }
  #wk:not(.wk-full) thead{ display:none }
  #wk:not(.wk-full) tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px 12px; margin-bottom:10px; padding:13px; border:1px solid var(--line);
    border-radius:13px; background:var(--surface-2) }
  #wk:not(.wk-full) td{ display:block; min-width:0; padding:0; border:0; text-align:left;
    white-space:normal; background:transparent!important; box-shadow:none!important }
  #wk:not(.wk-full) td:nth-child(1),#wk:not(.wk-full) td:nth-child(2){ font-weight:700 }
  #wk:not(.wk-full) td:nth-child(1)::before{ content:'기계'; display:block }
  #wk:not(.wk-full) td:nth-child(2)::before{ content:'상품'; display:block }
  #wk:not(.wk-full) td:nth-child(6)::before{ content:'금액 카운터'; display:block }
  #wk:not(.wk-full) td:nth-child(7)::before{ content:'경품 · 두 번째'; display:block }
  #wk:not(.wk-full) td:nth-child(8)::before{ content:'계산 매출'; display:block }
  #wk:not(.wk-full) td:nth-child(9)::before{ content:'단말기'; display:block }
  #wk:not(.wk-full) td:nth-child(1)::before,#wk:not(.wk-full) td:nth-child(2)::before,
  #wk:not(.wk-full) td:nth-child(6)::before,#wk:not(.wk-full) td:nth-child(7)::before,
  #wk:not(.wk-full) td:nth-child(8)::before,#wk:not(.wk-full) td:nth-child(9)::before{
    color:var(--muted); font-size:10.5px; font-weight:700; margin-bottom:3px }
  #wk:not(.wk-full) td:nth-child(3),#wk:not(.wk-full) td:nth-child(4),
  #wk:not(.wk-full) td:nth-child(5),#wk:not(.wk-full) td:nth-child(10),
  #wk:not(.wk-full) td:nth-child(11){ display:none }
  #wk:not(.wk-full) input[type=number],#wk:not(.wk-full) input[type=text]{ width:100%!important; min-width:0 }
  #wk:not(.wk-full) .lr input[type=number]{ flex:1 1 auto }
  #wk:not(.wk-full) .dzin{ width:100%!important }
  #wk.wk-full{ min-width:1060px }
  h1{ font-size:22px }
  .card{ padding:15px 14px }
}

@media (max-width:430px){
  .topbar nav.open{ grid-template-columns:1fr }
  .brand-shell{ max-width:36% }
  .brand-mark{ width:30px; height:30px; flex-basis:30px; border-radius:9px }
}

/* 메뉴를 누르면 해당 업무의 세부 화면이 펼쳐진다. */
.topbar .nav-group-title{display:none}
.topbar .nav-group{margin-bottom:8px}
.nav-section{border:0;background:transparent;margin:0;padding:0}
.nav-section>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:10px;border-radius:9px;color:#d6deeb;font-size:13.5px;white-space:nowrap}
.nav-section>summary::-webkit-details-marker{display:none}
.nav-section>summary.active{background:#3156d9;color:#fff}
.nav-section>summary:hover{background:#26354e;color:#fff}
.nav-section-label{flex:1}
.nav-chevron{font-size:15px;transition:transform .15s}
.nav-section[open] .nav-chevron{transform:rotate(180deg)}
.nav-subtabs{margin:6px 0 9px 20px;padding-left:8px;border-left:1px solid #48556b;display:flex;flex-direction:column;gap:4px}
.topbar nav .nav-subtabs a{padding:8px 10px;font-size:12.5px;white-space:normal}
#workspaceToggle{text-decoration:none;color:white;cursor:pointer;transition:transform .15s}
#workspaceToggle:hover{transform:scale(1.08)}
#workspaceToggle:focus-visible{outline:2px solid white;outline-offset:3px}
@media(min-width:921px){
 .topbar:not(:hover):not(:focus-within) .nav-subtabs{display:none}
 .topbar:not(:hover):not(:focus-within) .nav-section-label,.topbar:not(:hover):not(:focus-within) .nav-chevron{visibility:hidden}
}
/* 사업장과 밝기 모드에 따라 사이드바까지 함께 전환 */
:root{--nav-bg:#eaf0ff;--nav-text:#233b69;--nav-muted:#53678c;--nav-line:#c9d6ef;--nav-hover:#d9e5ff;--nav-active:#3156d9;--nav-active-text:#fff;--icon-bg:#d8e4ff;--icon-color:#294fab}
:root[data-workspace="norway"]{--bg:#f0f6f1;--surface:#fff;--surface-2:#e7f0e9;--text:#193c2b;--muted:#547460;--line:#cdded2;--brand:#247c53;--brand-soft:#daeee1;--nav-bg:#e0eee3;--nav-text:#214c35;--nav-muted:#53725f;--nav-line:#bcd6c4;--nav-hover:#cce3d4;--nav-active:#247c53;--icon-bg:#c4e4d1;--icon-color:#205c3d}
:root[data-theme="dark"]{--nav-bg:#101b31;--nav-text:#dae5ff;--nav-muted:#9eaecd;--nav-line:#354664;--nav-hover:#263957;--nav-active:#83adf5;--nav-active-text:#0c203c;--icon-bg:#263f67;--icon-color:#c1d6ff}
:root[data-workspace="norway"][data-theme="dark"]{--bg:#0d1c15;--surface:#142b20;--surface-2:#1c3729;--text:#e0f1e5;--muted:#9cbca7;--line:#345641;--brand:#80cba0;--brand-soft:#204c34;--nav-bg:#10281c;--nav-text:#dbf2e3;--nav-muted:#9dbfa9;--nav-line:#345841;--nav-hover:#214630;--nav-active:#80cba0;--nav-active-text:#102b1a;--icon-bg:#28583b;--icon-color:#b7eccb}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"]){--nav-bg:#101b31;--nav-text:#dae5ff;--nav-muted:#9eaecd;--nav-line:#354664;--nav-hover:#263957;--nav-active:#83adf5;--nav-active-text:#0c203c;--icon-bg:#263f67;--icon-color:#c1d6ff}
 :root[data-workspace="norway"]:not([data-theme="light"]){--bg:#0d1c15;--surface:#142b20;--surface-2:#1c3729;--text:#e0f1e5;--muted:#9cbca7;--line:#345641;--brand:#80cba0;--brand-soft:#204c34;--nav-bg:#10281c;--nav-text:#dbf2e3;--nav-muted:#9dbfa9;--nav-line:#345841;--nav-hover:#214630;--nav-active:#80cba0;--nav-active-text:#102b1a;--icon-bg:#28583b;--icon-color:#b7eccb}
}
.topbar{background:var(--nav-bg);color:var(--nav-text);border-right:1px solid var(--nav-line)}
.topbar .brand,.topbar nav a,.topbar .nav-section>summary,.topbar .right a,.topbar .theme-btn,.topbar .nav-btn{color:var(--nav-text)}
.topbar .brand-sub,.topbar .nav-group-title{color:var(--nav-muted)}
.topbar .right,.nav-subtabs,.topbar .right a{border-color:var(--nav-line)}
.topbar nav a:hover,.topbar .nav-section>summary:hover{background:var(--nav-hover);color:var(--nav-text)}
.topbar nav a.active,.topbar .nav-section>summary.active{background:var(--nav-active);color:var(--nav-active-text)}
.topbar .nav-symbol{background:var(--icon-bg);color:var(--icon-color)}
.topbar nav a.active .nav-symbol,.topbar .nav-section>summary.active .nav-symbol{background:var(--icon-bg);color:var(--icon-color)}
#workspaceToggle{background:var(--nav-active);color:var(--nav-active-text);box-shadow:none}
.topbar .theme-btn,.topbar .nav-btn{background:var(--icon-bg);border-color:var(--nav-line)}
.nw-menu-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.nw-menu-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.nw-menu-form input:not([type=checkbox]),.nw-menu-form select,.nw-menu-form textarea{width:100%}
.nw-menu-form input[type=url]{padding:9px 12px;border:1px solid var(--line);border-radius:10px;min-height:38px;background:var(--surface);color:var(--text);font:inherit}
:root[data-workspace="norway"] .btn.primary{background:var(--nav-active);color:var(--nav-active-text);border-color:var(--nav-active)}
.nw-full{grid-column:1/-1}
.nw-menu-editor{border-bottom:1px solid var(--line);padding:14px 0}
.nw-menu-editor>summary{cursor:pointer;font-weight:700;margin-bottom:10px}
.nw-home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.nw-home-grid>a{text-decoration:none;color:var(--text)}
.nw-page-body{overflow-wrap:anywhere;margin-bottom:16px}
@media(max-width:920px){.topbar nav{background:var(--nav-bg);border-color:var(--nav-line)}}
@media(max-width:600px){.nw-menu-form{grid-template-columns:1fr}}

.naver-trend-item svg,.naver-trend-item small{grid-column:1/-1}.naver-trend-item small{color:var(--muted);font-size:11px}

/* Clear chart hierarchy on both themes. */
.chart .ln{stroke-width:1.5;vector-effect:non-scaling-stroke}.chart .dot{r:2.3}.chart .grid{opacity:.4}.chart .bar{rx:2}.chart .hit:focus{outline:2px solid var(--brand)}

/* Primary navigation is visually distinct from its detail tabs in either theme. */
.nav-section > summary{font-size:1.08rem;font-weight:800;border:1px solid color-mix(in srgb,var(--text,#8299bc) 24%,transparent);background:color-mix(in srgb,#4975cf 17%,transparent);border-radius:10px;min-height:46px}
.nav-section > summary .nav-section-label{font-weight:800;letter-spacing:.02em}
.nav-subtabs{padding-left:14px;border-left:2px solid #668cca;margin:7px 0 12px 12px}
.nav-subtabs a{font-size:.9rem;font-weight:500}
.machine-admin.is-compact .manual-product-input{display:none}
.meeting-note .note-editor{margin-top:10px}.meeting-note .note-editor summary{cursor:pointer;font-weight:700}.meeting-note form{padding-top:12px}
.machine-category[hidden]{display:none!important}

/* Keep product name and purchase selection together; table scrolls on narrow screens. */
.machine-admin .machine-product-cell{white-space:nowrap}
.machine-product-cell .current-product-name{display:inline-block;margin-right:8px}
.machine-product-cell .purchase-choice{vertical-align:middle}

/* 이벤트 중메뉴(인형 이벤트 · 펌프 이벤트) — 누르면 펼치기/접기, 이벤트별 운영 불(초록: 운영 중, 빨강: 중지) */
.nav-mid{ margin:2px 0 }
.nav-mid>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:7px 10px; border-radius:8px; user-select:none }
.nav-mid>summary::-webkit-details-marker{ display:none }
.nav-mid>summary::before{ content:'▸'; font-size:10px; transition:transform .15s }
.nav-mid[open]>summary::before{ transform:rotate(90deg) }
.nav-mid>summary:hover{ background:var(--surface-2,rgba(127,127,127,.12)) }
.nav-mid-items{ display:flex; flex-direction:column; gap:4px; padding-left:12px }
.nav-lights{ display:inline-flex; gap:3px }
.nav-light{ display:inline-block; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.15) }
.nav-light.is-on{ background:#22b35e } .nav-light.is-off{ background:#e0463c }
/* 화면 위 탭줄 안에서는 가로로 */
.section-tabs .nav-mid{ display:inline-flex; align-items:center; margin:0 0 0 6px; padding-left:6px; border-left:1px solid var(--line) }
.section-tabs .nav-mid>summary{ padding:8px 8px; white-space:nowrap; color:var(--text) }
.section-tabs .nav-mid[open]{ gap:4px }
.section-tabs .nav-mid-items{ flex-direction:row; padding-left:0 }
.section-tabs .nav-mid[open]>.nav-mid-items{ display:flex }
/* 탭줄 제목과 선택된 탭을 더 눈에 띄게 */
.section-tabs-title{ color:var(--brand)!important; font-size:14px!important; font-weight:900!important; letter-spacing:.01em }
.section-tabs a.active{ font-weight:800; box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 45%,transparent) }
.nav-mid>summary .nav-mid-label{ color:inherit; text-decoration:none; padding:0; border-radius:6px }
.nav-mid>summary a.nav-mid-label:hover{ text-decoration:underline }
/* 선택된 중메뉴 글자: 일반 선택 메뉴 규칙이 파란 배경을 깔기 때문에 글자는 흰색으로 (파란 글자면 안 보임) */
.nav-mid>summary a.nav-mid-label.active{ padding:3px 8px; background:var(--brand); color:#fff; border:0 }
.topbar .nav-mid>summary a.nav-mid-label.active{ background:var(--nav-active); color:var(--nav-active-text,#fff) }
/* 이벤트 창(고객 참가 화면 새 창) — 맨 위 중메뉴 */
.nav-mid-public .nav-public{ font-weight:600 }
.section-tabs .nav-mid-public{ margin:0 6px 0 0; padding:0 6px 0 0; border-left:0; border-right:1px solid var(--line) }
/* 1주 매출 기계별 — 합계 · 1대당 평균 줄 (2026-10-05) */
.mlist-foot th,.mlist-foot td{ background:var(--surface-2); font-weight:700; border-top:2px solid var(--line) }
.mlist-foot tr+tr th,.mlist-foot tr+tr td{ border-top:1px solid var(--line) }
/* 상품 관리 위쪽 탭 (구매 내역 · 남은 수량 · 메모) */
.product-tabs{ margin-bottom:14px }
/* 지출 입력 「확인 필요」 — 선택 칸 · 전체 선택 · 선택 삭제 / 제외한 것 되돌리기 (2026-10-05) */
.review-row{ display:flex; gap:8px; align-items:flex-start }
.review-row>details{ flex:1; min-width:0 }
.review-pick-cell{ flex:0 0 26px; padding-top:18px; text-align:center }
.review-pick-cell input,.restore-pick{ width:18px; height:18px }
.bulk-bar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 12px }
/* 지출 입력 미리보기 표 (2026-10-05) */
.chat-table tr.chat-exists td,.chat-table tr.chat-dup td{ opacity:.55 }
.chat-table tr.chat-check td{ background:color-mix(in srgb,var(--warn,#e0a020) 7%,transparent) }

/* 고른 달 기억 표시 (2026-10-06) — 「9월 보는 중 · 이번 달로」 */
.section-tabs .ym-chip{ flex:0 0 auto; align-self:center; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--brand-soft, #e8eefc); color:var(--brand)!important; text-decoration:none; white-space:nowrap }
.section-tabs .ym-chip:hover{ text-decoration:underline }
.section-tabs-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:0 }
.section-tabs-head .ym-chip{ margin-left:auto }
/* 휴대폰에서 탭이 화면 밖으로 잘리지 않게 줄을 바꾼다 (「트렌드&이슈」 알림 숫자까지 보이게) */
@media (max-width: 760px){ .section-tabs>div{ flex-wrap:wrap; overflow-x:visible } }
/* 쿠폰 발급 대기 — 여러 건 한 번에 (2026-10-06) */
.cbulk-bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; padding:8px 10px; border:1px dashed var(--line); border-radius:10px }
.cbulk-bar input[name=reason]{ flex:1 1 220px; min-width:0 }
.cbulk-pick,#cbulk-all{ width:18px; height:18px }
.coupon-tbl td,.coupon-tbl th{ text-align:left; vertical-align:top }
.coupon-tbl .pill{ white-space:normal; line-height:1.45 }
.coupon-tbl td:nth-child(5){ min-width:170px; max-width:300px }
.coupon-tbl td:last-child{ min-width:260px; max-width:360px; white-space:normal }
.coupon-tbl td:last-child p{ margin:0 0 6px; white-space:normal }
.coupon-tbl .sdo{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:0 0 6px }
.coupon-tbl .sdo input{ flex:1 1 140px; min-width:0 }
/* 눌러서 그 건을 처리하러 가는 숫자 칸 (2026-10-07) */
.kpi-link{ display:block; color:inherit; text-decoration:none; cursor:pointer }
.kpi-link:hover{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 25%,transparent) }
.kpi-link .v::after{ content:" →"; font-size:.7em; color:var(--brand) }
/* 매출 달력 날짜 코멘트 창 (2026-10-12) */
.day-note-box{ position:fixed; z-index:60; width:320px; max-width:calc(100vw - 16px); padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 12px 32px rgba(23,32,51,.18) }
.day-note-box #dayNoteClose{ float:right }
.day-note-box ul{ list-style:none; margin:8px 0; padding:0; display:grid; gap:6px; max-height:180px; overflow:auto }
.day-note-box li{ font-size:13px }
.day-note-box textarea{ width:100%; box-sizing:border-box; margin:4px 0 6px }
/* 상품별 남은 수량 — 확인 필요 줄 (2026-10-12) */
.ps-tbl tr.ps-check td{ background:color-mix(in srgb,var(--warn,#e0a020) 9%,transparent) }
.ps-tbl td,.ps-tbl th{ vertical-align:top }
/* 왼쪽 아코디언: 기본은 아이콘 레일, 펼침 상태는 공통 메뉴 스크립트가 관리 */
@media(min-width:921px){
 body .topbar:not(.menu-open){width:74px;box-shadow:7px 0 24px rgba(15,23,42,.09)}
 body .topbar.menu-open{width:268px;box-shadow:14px 0 38px rgba(15,23,42,.18)}
 body .topbar .nav-btn{display:flex;align-items:center;justify-content:center;min-height:40px;width:100%;padding:8px;border:1px solid var(--nav-line);background:var(--nav-bg);border-radius:10px;flex-shrink:0}
 body .topbar:not(.menu-open) .nav-now,body .topbar:not(.menu-open) .nav-group-title,body .topbar:not(.menu-open) .nav-subtabs{display:none}
 body .topbar:not(.menu-open) .brand-shell>div,body .topbar:not(.menu-open) .nav-section-label,body .topbar:not(.menu-open) .nav-chevron,body .topbar:not(.menu-open) .nav-links a>span:last-child,body .topbar:not(.menu-open) .right .who{visibility:hidden;opacity:0}
 body .topbar.menu-open .brand-shell>div,body .topbar.menu-open .nav-group-title,body .topbar.menu-open .nav-section-label,body .topbar.menu-open .nav-chevron,body .topbar.menu-open .nav-links a>span:last-child,body .topbar.menu-open .right .who,body .topbar.menu-open .right>a{visibility:visible;opacity:1}
 body .topbar.menu-open .nav-section[open]>.nav-subtabs{display:flex}
 body .topbar:not(.menu-open) .right{padding:10px 0 0;display:flex;flex-direction:column;gap:8px}
 body .topbar:not(.menu-open) .right>a:not(.theme-btn){display:none}
 body .topbar:not(.menu-open) .right>a.theme-btn{visibility:visible;opacity:1}
 body .topbar:not(.menu-open) .right .who{display:none}
 body .topbar .nav-group{margin-bottom:8px}
 body .topbar .nav-section>summary{min-height:44px}
}
/* 메뉴 항목의 상자 테두리를 없애고 선택·호버 배경만 표시한다. */
body .topbar .nav-btn,body .topbar .nav-section>summary,body .topbar .nav-links>a{border:0;box-shadow:none}
body .topbar .nav-btn,body .topbar .nav-section>summary:not(.active){background:transparent}
body .topbar .nav-btn:hover,body .topbar .nav-section>summary:not(.active):hover{background:var(--nav-hover)}
/* 관리자 로고: 선택한 3번 라인 워드마크, 기존 작업공간 전환 링크 유지 */
#workspaceToggle.admin-line-logo{display:block;flex:none;background:transparent;color:var(--nav-text);text-decoration:none;border-left:4px solid var(--nav-active);padding-left:12px;font-family:Arial,'Malgun Gothic',sans-serif}
.admin-line-word{display:block;font-size:24px;font-weight:900;line-height:1;letter-spacing:-.8px;white-space:nowrap}
.admin-line-word small{display:block;font-size:19px;letter-spacing:4px;font-weight:400;margin-top:3px}
.admin-line-badge{display:block;color:var(--nav-active);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:1px;margin-top:9px}
.admin-line-mini{display:none;font-size:23px;font-weight:900;color:var(--nav-active);line-height:34px}
@media(min-width:921px){
 body .topbar:not(.menu-open) .admin-line-word{display:none}
 body .topbar:not(.menu-open) .admin-line-mini{display:block}
 body .topbar:not(.menu-open) #workspaceToggle.admin-line-logo{border-left-width:3px;padding-left:9px;width:31px;box-sizing:border-box}
}
@media(max-width:920px){
 .admin-line-word{font-size:19px}
 .admin-line-word small{font-size:13px;letter-spacing:3px}
 .admin-line-badge{font-size:9px;margin-top:5px}
 #workspaceToggle.admin-line-logo{padding-left:8px;border-left-width:3px}
}