/* ═══════════════════════════════════════════════════════════
   REF — 참고 이미지 디자인을 모든 화면에 통일 적용 (마지막에 로드)
   라이트 : 연회색 배경 · 흰 둥근 카드 · 검정 알약 버튼 · 알약 하단바
   다크   : 순검정 배경 · 짙은 회색 카드 · 흰색 포인트 (초록 없음)
   ═══════════════════════════════════════════════════════════ */
body{font-family:"Plus Jakarta Sans","DM Sans","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;letter-spacing:-.01em}
:root{--r:28px}

/* ───────────── 라이트 ───────────── */
:root[data-theme="light"]{--card:#fcfcfc;--card-2:#f1f2f1;--card-3:#e4e6e4;--bd:#ececea;--bd-2:#dcdedc;--muted:#6a6d6a;--faint:#8c8f8c;--text:#090b0a;--ink:#000;--mid:#8f918f}
:root[data-theme="light"] body{background:#eceeed linear-gradient(180deg,#f6f7f7 0%,#eceeed 60%,#e8eae8 100%) fixed}
:root[data-theme="light"] .shell{background:linear-gradient(180deg,#f8f9f9,#eff1f0);border-radius:36px;box-shadow:0 30px 80px rgba(0,0,0,.07),0 0 0 1px rgba(255,255,255,.7) inset;overflow:hidden}
:root[data-theme="light"] .side{background:transparent}
:root[data-theme="light"] .card,:root[data-theme="light"] .st,:root[data-theme="light"] .cal-stock,:root[data-theme="light"] .alerts,:root[data-theme="light"] .modal,:root[data-theme="light"] .drawer{background:linear-gradient(180deg,#fff,#fafafa);border-radius:28px;box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(20,30,25,.05)}
:root[data-theme="light"] .tb-s,:root[data-theme="light"] .tb-i,:root[data-theme="light"] .pill,:root[data-theme="light"] .drange,:root[data-theme="light"] .wnav{background:#fff;color:#0b0d0c;box-shadow:0 6px 18px rgba(20,30,25,.06)}
:root[data-theme="light"] .nav button{color:#5f625f;font-weight:500}
:root[data-theme="light"] .nav button:hover{background:rgba(0,0,0,.035);color:#111}
:root[data-theme="light"] .nav button.on{background:#e6e8e6;color:#000;font-weight:600}
:root[data-theme="light"] .btn.primary{background:#000;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
:root[data-theme="light"] .btn.ghost{background:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(20,30,25,.06)}
:root[data-theme="light"] .input,:root[data-theme="light"] select.input,:root[data-theme="light"] textarea.input{background:#f2f3f2;border-radius:18px}
:root[data-theme="light"] .tbh{border-color:#ececea}
:root[data-theme="light"] .pill.on,:root[data-theme="light"] .seg button.on,:root[data-theme="light"] .chip.on{background:#000;color:#fff}
:root[data-theme="light"] .sw.on i{background:#000}
:root[data-theme="light"] .bc-c.on .bc-b i,:root[data-theme="light"] .cal-d.on{background:#000;color:#fff}
:root[data-theme="light"] .cal-d.on b{color:#fff}
:root[data-theme="light"] .paid{background:#000;color:#fff}

/* ───────────── 다크 (포인트 = 흰색) ───────────── */
:root[data-theme="dark"]{--card:#1c1c1c;--card-2:#262626;--card-3:#303030;--bd:#272727;--bd-2:#333;--muted:#aaa;--faint:#7f7f7f;--text:#fff;--ink:#fff;--mid:#9a9a9a}
:root[data-theme="dark"] body{background:#070707}
:root[data-theme="dark"] .shell{background:#0a0a0a;border-radius:36px;box-shadow:0 0 0 1px #1a1a1a,0 30px 80px rgba(0,0,0,.6);overflow:hidden}
:root[data-theme="dark"] .side{background:#0a0a0a}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .st,:root[data-theme="dark"] .cal-stock,:root[data-theme="dark"] .alerts,:root[data-theme="dark"] .modal,:root[data-theme="dark"] .drawer{background:#1c1c1c;border-radius:28px;box-shadow:none}
:root[data-theme="dark"] .tb-s,:root[data-theme="dark"] .tb-i,:root[data-theme="dark"] .pill,:root[data-theme="dark"] .drange,:root[data-theme="dark"] .wnav,:root[data-theme="dark"] .rnd{background:#1c1c1c;color:#fff}
:root[data-theme="dark"] .nav button{color:#b0b0b0;font-weight:500}
:root[data-theme="dark"] .nav button:hover{background:#161616;color:#fff}
:root[data-theme="dark"] .nav button.on{background:#262626;color:#fff;font-weight:600}
:root[data-theme="dark"] .btn.primary{background:#fff;color:#000}
:root[data-theme="dark"] .btn.ghost{background:#262626;border-color:transparent;color:#fff}
:root[data-theme="dark"] .input,:root[data-theme="dark"] select.input,:root[data-theme="dark"] textarea.input{background:#262626;border-radius:18px}
:root[data-theme="dark"] .pill.on,:root[data-theme="dark"] .seg button.on,:root[data-theme="dark"] .chip.on{background:#fff;color:#000}
:root[data-theme="dark"] .sw.on i{background:#fff}
:root[data-theme="dark"] .sw.on i::after{background:#000}
:root[data-theme="dark"] .bc-c.on .bc-b i,:root[data-theme="dark"] .cal-d.on{background:#fff;color:#000}
:root[data-theme="dark"] .cal-d.on b{color:#000}
:root[data-theme="dark"] .bc-c.on span{color:#fff}
:root[data-theme="dark"] .paid{background:#fff;color:#000}
:root[data-theme="dark"] .dot{background:#fff;color:#000}

/* 검정 배너 (서버 카드 · 검정 통계 카드) — 두 테마 공통 */
.upg,.st.dark{background:radial-gradient(120% 160% at 100% 100%,rgba(255,255,255,.26) 0,rgba(255,255,255,0) 58%),linear-gradient(100deg,#050505 40%,#1c1c1c)!important;color:#fff!important;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.upg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;text-align:left!important;padding:14px 14px 14px 16px!important;border-radius:24px!important}
.upg b{grid-column:1;color:#fff;font-weight:600;font-size:13px}
.upg p{grid-column:1;margin:2px 0 0!important;color:#b0b0b0!important;font-size:11px}
.upg .btn.upg-btn{grid-column:2;grid-row:1/3;width:34px;height:34px;padding:0!important;border-radius:50%!important;background:#fff!important;color:#000!important;font-size:0!important;position:relative;box-shadow:none}
.upg .btn.upg-btn::after{content:"";position:absolute;left:11px;top:12px;width:7px;height:7px;border-right:2px solid #000;border-top:2px solid #000;transform:rotate(45deg)}
.st.dark .st-l,.st.dark .t-row{color:#b8b8b8!important}
.st.dark .st-v{color:#fff}

/* 전체 공통: 제목 · 목록 · 버튼 모양 통일 */
.btn,.pill,.drange,.chip,.seg button{border-radius:99px}
.card h3,.cd-h h3,.cat-h h3,.dstat .sec-h h3{font-weight:500;letter-spacing:-.02em}
.tb h1{font-size:26px;font-weight:400;letter-spacing:-.03em}
.prod .name,.pend .who,.ri .rn{font-weight:500}
.picker,.modal,.drawer{border-radius:28px}
.cv-r,.cv-d{display:inline-block;flex:none;width:.55em;height:.55em;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:rotate(45deg);margin:0 .35em 0 0}
.cv-d{border-top:0;border-bottom:2px solid var(--muted);margin:0 .4em .3em 0}

/* 모바일 공통 */
@media (max-width:860px){
  .shell{padding-left:18px!important;padding-right:18px!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
  .m-top{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}
  .m-brand{font-size:24px;font-weight:400;letter-spacing:-.03em}
  :root[data-theme="light"] .bottom{left:16px;right:16px;background:rgba(255,255,255,.94);border:0;border-radius:99px;box-shadow:0 12px 34px rgba(20,30,25,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  :root[data-theme="light"] .bottom button{color:#5f625f;border-radius:99px}
  :root[data-theme="light"] .bottom button.on{background:#e6e8e6;color:#000}
  :root[data-theme="dark"] .bottom{left:16px;right:16px;background:rgba(28,28,28,.94);border:0;border-radius:99px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
  :root[data-theme="dark"] .bottom button{color:#b0b0b0;border-radius:99px}
  :root[data-theme="dark"] .bottom button.on{background:#2e2e2e;color:#fff}
}

/* ═══════════ 홈(대시보드) — 참고 이미지와 같은 크기·위치 (1em = 폰 14px) ═══════════ */
.shell.home .tb{display:none}
.shell.home .main{padding-top:20px}
.hm{font-size:15px;color:var(--text)}
@media (min-width:861px){.hm{font-size:17px;max-width:640px;margin:0 auto}}
.hm .grow{flex:1;min-width:0}
.hm-top{display:flex;align-items:center;gap:.8em;margin:0 0 1.2em}
.hm-top .tb-av{width:3.4em;height:3.4em;font-size:1em}
.hm-hi{display:flex;flex-direction:column;line-height:1.3}
.hm-hi small{font-size:.8em;color:var(--muted)}
.hm-hi b{font-size:1.2em;font-weight:500;letter-spacing:-.02em}
.hm-top .tb-i{width:3.3em;height:3.3em}
.hm-top .tb-i svg{width:1.3em;height:1.3em}
.hm-ban{display:flex;align-items:center;gap:1em;width:100%;height:6.4em;margin:0 0 1.9em;padding:0 2.6em 0 2.6em;border:0;border-radius:2.6em;text-align:left;cursor:pointer;color:#fff;font:inherit;background:radial-gradient(90% 240% at 100% 100%,rgba(255,255,255,.3),rgba(255,255,255,0) 62%),linear-gradient(100deg,#050505 45%,#1d1d1d);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.hm-bolt{display:grid;place-items:center;width:2.2em;height:2.2em}
.hm-bolt svg{width:2.1em;height:2.1em;fill:#f6b91a;stroke:#f6b91a;stroke-width:1}
.hm-bt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15em}
.hm-bt b{font-size:1.3em;font-weight:500;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-bt small{font-size:.9em;color:#b4b4b4}
.hm-go{position:relative;flex:none;width:2.9em;height:2.9em;margin-right:-1.4em;border-radius:50%;background:#fff}
.hm-go::after{content:"";position:absolute;left:1em;top:1.05em;width:.7em;height:.7em;border-right:2.5px solid #000;border-top:2.5px solid #000;transform:rotate(45deg)}
.hm-h2{margin:0 0 .8em 0;font-size:1.55em;font-weight:400;letter-spacing:-.03em;color:var(--text)}
.hm-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2em;margin-bottom:1.2em}
.hm-c,.hm-wide,.hm-row{border:0;color:var(--text);text-align:left;font:inherit}
:root[data-theme="light"] .hm-c,:root[data-theme="light"] .hm-wide,:root[data-theme="light"] .hm-row{background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(20,30,25,.05)}
:root[data-theme="dark"] .hm-c,:root[data-theme="dark"] .hm-wide,:root[data-theme="dark"] .hm-row{background:#1c1c1c}
.hm-c{display:flex;flex-direction:column;min-width:0;height:12em;padding:1.2em;border-radius:1.8em;cursor:pointer;overflow:hidden}
.hm-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:.4em}
.hm-ch b{display:flex;flex-direction:column;font-size:1.05em;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.hm-ch .cv-r{margin-top:.35em;margin-right:.2em}
/* 왼쪽 카드: 요일 라벨 + 5칸 막대 */
.hm-dl{display:flex;gap:.5em;margin-top:auto;margin-bottom:.4em}
.hm-dl span{flex:1;text-align:center!important;font-size:.75em;color:var(--muted)}
.hm-bars{display:flex;gap:.5em;height:2.7em}
.hm-bars>span{flex:1;display:flex;align-items:flex-end;border-radius:.7em;background:var(--card-2);overflow:hidden}
.hm-bars i{display:block;width:100%;background:var(--ink)}
/* 오른쪽 카드: 숫자 둘 + 선 그래프 */
.hm-kv{display:flex;gap:.9em;margin-top:.8em}
.hm-kv>div{display:flex;flex-direction:column;gap:.1em;min-width:0}
.hm-kv>div+div{padding-left:.9em;border-left:1px solid var(--bd-2)}
.hm-kv b{font-size:.95em;font-weight:500;white-space:nowrap}
.hm-kv small{font-size:.72em;color:var(--muted)}
.hm-plot{position:relative;margin-top:auto;height:3.6em}
.hm-line{display:block;width:100%;height:100%;color:var(--muted)}
/* 넓은 카드 */
.hm-wide{display:flex;align-items:center;justify-content:space-between;gap:1em;height:11.8em;margin-bottom:2.3em;padding:1.2em 1.4em;border-radius:1.8em}
.hm-wl{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hm-wl small{font-size:.75em;color:var(--muted)}
.hm-wl h3{margin:.2em 0 0;font-size:1.2em;font-weight:500;letter-spacing:-.02em}
.hm-wl p{margin:.9em 0 .9em;font-size:.75em;line-height:1.5;color:var(--muted)}
.hm-wl .btn{height:2.4em;padding:0 1.5em;font-size:1em;font-weight:500;margin-top:auto}
.hm-ring{position:relative;flex:none;width:9.4em;height:9.4em;display:grid;place-items:center;border-radius:50%;background:var(--card-2);box-shadow:0 0 0 1px var(--bd-2) inset}
.hm-rsvg{position:absolute;inset:0;width:100%;height:100%}
.hm-rsvg circle{fill:none;stroke-width:1.6}
.hm-rsvg .rb{stroke:transparent}
.hm-rsvg .rf{stroke:var(--text);stroke-linecap:round}
.hm-rico{display:grid;place-items:center;color:var(--text)}
.hm-rico svg{width:3.8em;height:3.8em;stroke-width:1.4}
/* 최근 구매 */
.hm-sec{margin-bottom:2.4em}
.hm-sh{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 .9em}
.hm-sh h2{margin:0;font-size:1.55em;font-weight:400;letter-spacing:-.03em}
.hm-sh p{margin:.25em 0 0;font-size:1em;color:var(--muted)}
.hm-more{border:0;background:transparent;padding:.6em .4em;cursor:pointer}
.hm-row{display:flex;align-items:center;gap:1em;width:100%;min-height:5.6em;margin-bottom:.8em;padding:1em 1.2em 1em 1.4em;border-radius:1.8em;cursor:pointer}
.hm-row.empty{justify-content:center;color:var(--muted);cursor:default}
.hm-ic{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;color:var(--text)}
.hm-ic svg{width:1.7em;height:1.7em;stroke-width:1.6}
.hm-row .grow{display:flex;flex-direction:column;gap:.2em}
.hm-row .grow b{font-size:1.15em;font-weight:500;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-row .grow small{font-size:.85em;color:var(--muted)}
.hm-sh~.hm-row:last-child{margin-bottom:0}
.hm .dtop{justify-content:stretch}
.hm .dtop .pill{flex:1}
.hm .dtop .drange{flex:1 1 100%;justify-content:center}
@media (max-width:520px){.hm .dtop .pill{flex:1 1 28%}}

/* ═══════════ 설정 — 작은 회색 제목 + 묶음 카드 + 화살표 ═══════════ */
.rcard .card-h h3{font-size:12.5px;font-weight:500;color:var(--muted)}
.card.rcard{padding:6px}
.rcard .lrow,.rcard .rule{padding:12px 14px;border-top:0;min-height:54px;border-radius:18px}
.rcard .lt,.rcard .rt{font-size:14.5px;font-weight:500}
.lgo{color:var(--muted)}
:root[data-theme="dark"] .lrow:hover{background:#242424}
:root[data-theme="light"] .lrow:hover{background:#f4f5f4}
.set-title h2{display:block;margin:2px 2px 20px;font-size:26px;font-weight:400;letter-spacing:-.03em}
.sg{margin-bottom:22px;max-width:760px}
.sg-l{margin:0 4px 8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.card.sgc{padding:6px}
.lrow.sr{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 14px;border:0;border-radius:18px}
.sr-ic{display:grid;place-items:center;flex:none;width:26px;height:26px;color:var(--muted)}
.sr-ic svg{width:19px;height:19px;stroke-width:1.6}
.lrow.sr .lt{font-size:15px;font-weight:500;color:var(--text)}
.set-nav{background:transparent!important;box-shadow:none;padding:0}
:root[data-theme="dark"] .set-nav button{background:#1c1c1c;margin-bottom:2px}
:root[data-theme="dark"] .set-nav button.on{background:#262626}
:root[data-theme="light"] .set-nav button{background:#fff}
:root[data-theme="light"] .set-nav button.on{background:#e6e8e6}
.set-nav .si,.set-nav .on .si{background:transparent!important;color:inherit!important}

/* ═══════════ 이번 수정 ═══════════ */
.shell.home .m-top{display:none!important}
.hm *{text-align:left}
.hm .dtop *,.hm .hm-dl span{text-align:center}
.hm .dtop{margin-top:1.2em}
.hm .mid,.hm .dstat{margin-bottom:1.2em}
.hm-sec{margin-top:1.2em}
@media (max-width:860px){
  :root{--nav-h:52px}
  .main{padding:0!important}
  .shell.home{padding-top:calc(16px + env(safe-area-inset-top))!important}
  .bottom{left:18px!important;right:18px!important;height:var(--nav-h)!important;padding:4px!important;gap:2px}
  .bottom button{font-size:10.5px!important;gap:1px!important}
  .bottom button svg{width:19px!important;height:19px!important}
  body{font-size:14px}
  .btn{font-size:14px}
  .card h3,.card-h h3,.cat-h h3{font-size:15.5px}
  .card .desc,.desc,.page-h p{font-size:12.5px}
  .prod .name{font-size:14.5px}.prod .meta,.pend .meta{font-size:12.5px}
  .rule .rt,.lrow .lt,.rcard .rt,.rcard .lt{font-size:14.5px}
  .rule .rd,.lrow .lv,.rcard .rd{font-size:12.5px}
  .tbh,.tbr{font-size:12.5px}
}

/* ═══════════ 날짜 선택 · 박스 이미지 ═══════════ */
button.drange{border:0;cursor:pointer;font:inherit;color:inherit}
.hm .dtop{display:block}
.hm button.drange{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;height:3em;padding:0 1.2em;font-size:1em;font-weight:500}
.hm .drange svg{width:1.1em;height:1.1em}
.hm .drange .cv-d{margin:0 0 .25em .2em}
.hm-rico img{display:block;width:6em;height:6em;object-fit:contain;filter:drop-shadow(0 .5em .6em rgba(0,0,0,.18));-webkit-user-drag:none;user-select:none}
.avatar.boxfb{background:transparent!important;overflow:visible}
.avatar.boxfb img{width:100%;height:100%;object-fit:contain;border-radius:0}

/* ═══════════ 구분선은 곡선 없이 일자로 ═══════════ */
.prod,.pend,.rule,.lrow,.ri,.alert,.tbr,.tbh,.erow,.ac-item,.imp-dup li,.sale-f,.wd-h,.rall,.cat-h,.cat-inner,.cat-body{border-radius:0!important}
.prod.dragging{border-radius:14px!important}
.rcard .rule,.rcard .lrow{border-top:1px solid var(--bd)!important}
.rcard .rules>:first-child,.rcard .card-h+.rule,.rcard .card-h+.lrow{border-top:0!important}
.card.sgc .lrow.sr{border-top:0!important;border-radius:18px!important}

/* ═══════════ 제품 · 충전 화면 글씨 정렬 ═══════════ */
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-h .card-h{margin:0;padding:0;flex:none;gap:8px}
.card-h h3{margin:0;text-align:left}
.prod{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dr info bd" ". bt bt";align-items:center;column-gap:12px;row-gap:10px;text-align:left}
.prod>.drag,.prod>.drag-ph{grid-area:dr;width:28px;height:32px}
.prod>.grow{grid-area:info;min-width:0;text-align:left}
.prod>.badge{grid-area:bd;justify-self:end}
.prod>.btns{grid-area:bt;display:flex;gap:6px;width:100%}
.prod>.btns .btn{flex:1;padding-left:6px;padding-right:6px}
.prod .name{display:flex;align-items:center;gap:6px;line-height:1.4}
.prod .meta{margin-top:2px;line-height:1.45}
.prod.user{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info chev"}
.pend{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info amt" "bt bt";align-items:start;column-gap:12px;row-gap:10px;text-align:left}
.pend>.info{grid-area:info;min-width:0}
.pend>.amt{grid-area:amt;justify-self:end;text-align:right;margin:0}
.pend>.btns{grid-area:bt;display:flex;gap:6px;width:100%}
.pend>.btns .btn{flex:1}
.cat-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cat-h .cat-t{flex:1 1 100%;display:flex;align-items:center;gap:10px;min-width:0}
.cat-h .cat-t .cv{order:9;margin:0 .5em 0 .2em}
.cat-h .cat-t .cnt{order:8;margin-left:auto;font-weight:500;color:var(--muted)}
.cat-h .cat-t h3{flex:0 1 auto;text-align:left}
.cat-act{flex:1 1 100%;width:100%}
.cat-act .btn{flex:1}
@media (min-width:861px){
  .cat-h .cat-t{flex:1 1 0}
  .cat-act{flex:none;width:auto}
  .cat-act .btn{flex:none}
  .prod{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"dr info bd bt"}
  .prod>.btns{width:auto}
  .prod>.btns .btn{flex:none;padding-left:14px;padding-right:14px}
  .pend{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"info amt bt";align-items:center}
  .pend>.btns{width:auto}
  .pend>.btns .btn{flex:none}
}

/* ═══════════ v3 — 참고 이미지 그라데이션 · 홈 순서 · PC 레이아웃 · 정렬 ═══════════ */
body{font-family:"Plus Jakarta Sans","Noto Sans KR","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif}
/* 배경 그라데이션 (참고 이미지의 연한 회색 → 살짝 초록빛 회색) */
:root[data-theme="light"] body{background:radial-gradient(900px 520px at 18% -8%,#fff 0,rgba(255,255,255,0) 62%),radial-gradient(800px 520px at 100% 100%,#e3e7e2 0,rgba(227,231,226,0) 60%),linear-gradient(180deg,#f7f8f8 0%,#eceeed 55%,#e7eae7 100%) fixed;min-height:100vh}
:root[data-theme="light"] .shell{background:linear-gradient(180deg,rgba(250,251,251,.92),rgba(238,241,239,.92))}
:root[data-theme="dark"] body{background:radial-gradient(800px 480px at 82% -10%,#20231b 0,rgba(32,35,27,0) 62%),linear-gradient(180deg,#0f0f0f 0%,#080808 60%,#050505 100%) fixed;min-height:100vh}
:root[data-theme="dark"] .shell{background:linear-gradient(180deg,#111 0%,#0a0a0a 100%)}

/* 박스 아이콘 대신 재고 링 가운데에 퍼센트 */
.hm-rpct{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15em;line-height:1.1}
.hm-rpct b{font-size:2.1em;font-weight:500;letter-spacing:-.04em;color:var(--text)}
.hm-rpct small{font-size:.75em;color:var(--muted)}

/* 7일 매출 선 그래프: 가는 선 + 최고점 세로선/숫자 (참고 이미지) */
.hm-mk{position:absolute;top:0;bottom:0;width:1px;background:var(--bd-2);pointer-events:none}
.hm-tag{position:absolute;top:-.1em;margin-left:.35em;font-size:.72em;font-weight:500;color:var(--text);pointer-events:none;white-space:nowrap}

/* 홈 섹션 */
.hm-cards{display:block}
.hm-cards .hm-wide{margin-bottom:2.3em}
.hm .hm-h2+.dtop{margin-top:0}
.hm .mid,.hm .dstat{margin-bottom:1.2em}
.hm .dstat{margin-bottom:0}

/* 제품: 제목 문구를 지우고 버튼만 오른쪽 */
.prod-head{display:flex;align-items:center;justify-content:flex-end;margin:0 2px 12px}
/* 충전: 제목과 "자동충전 켜짐" 알약을 같은 줄 가운데에 */
.rcard .card-h.charge-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;padding:14px 14px 10px}
.charge-head h3{margin:0;line-height:1.2}
.charge-head .badge{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:28px;margin:0;padding:0 13px;line-height:1;font-size:12px;font-weight:600;border-radius:99px;box-sizing:border-box}

/* 설정: 목록 첫 줄이 위 제목에 붙지 않게 */
.main>.sg:first-child{margin-top:4px}

/* ───────── PC (861px 이상): 가운데 좁은 폰 화면이 아니라 화면 폭을 쓰는 대시보드 ───────── */
@media (min-width:861px){
  .shell.home .main{padding:22px 32px 32px 30px}
  .hm{font-size:15px;max-width:1120px;margin:0 auto}
  .hm-top{margin-bottom:1.3em}
  .hm-ban{height:5.8em;margin-bottom:2em}
  .hm-cards{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.2em;margin-bottom:2.4em}
  .hm-cards .hm-2{margin:0}
  .hm-cards .hm-wide{margin:0;height:auto;min-height:12em}
  .hm-c{height:12.4em}
  .hm-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2em;row-gap:.8em;margin-bottom:2.4em}
  .hm-sec .hm-sh{grid-column:1/-1;margin:0}
  .hm-sec .hm-row{margin:0}
  .hm .dtop{max-width:360px;margin:0 0 1em}
  .hm .mid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2em}
}
@media (min-width:861px) and (max-width:1180px){
  .hm .mid{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════ v4 — 섬세한 카드(7일 매출 · 재고 현황) · 입금 보안 · 달력 제거 ═══════════ */
.hm .mid.single{display:block}
.hm .mid.single>.card{margin:0}

/* 7일 매출 카드 (참고 이미지 Steps) */
.hm-c{padding:1.3em 1.3em 1.1em;border-radius:2em}
.hm-ch b{font-size:1.15em;font-weight:500;letter-spacing:-.02em}
.hm-kv{gap:1em;margin-top:.9em}
.hm-kv>div{gap:.12em}
.hm-kv>div+div{padding-left:1em;border-left:1px solid var(--bd-2)}
.hm-kv b{font-size:1em;font-weight:500;letter-spacing:-.01em}
.hm-kv small{font-size:.74em;color:var(--faint)}
.hm-plot{height:4em;margin-top:auto}
.hm-line{color:#9a9c9a;overflow:visible}
:root[data-theme="dark"] .hm-line{color:#8a8a8a}
.hm-mk{background:var(--bd-2);opacity:.9}
.hm-tag{top:.2em;margin-left:.3em;padding:.12em .5em;border-radius:.45em;font-size:.74em;font-weight:500;background:rgba(255,255,255,.92);color:#111;box-shadow:0 1px 4px rgba(20,30,25,.1)}
:root[data-theme="dark"] .hm-tag{background:#2a2a2a;color:#fff;box-shadow:none}
.hm-bars>span{background:var(--card-2);border-radius:.8em}
.hm-dl span{color:var(--faint)}

/* 재고 현황 카드 (참고 이미지 Overall Progress) */
.hm-wide{padding:1.4em 1.5em;border-radius:2em}
.hm-wl small{font-size:.76em;color:var(--faint)}
.hm-wl h3{margin-top:.25em;font-size:1.25em;font-weight:500;letter-spacing:-.025em}
.hm-wl p{margin:1em 0 1.1em;font-size:.76em;line-height:1.55;color:var(--faint)}
.hm-wl .btn{height:2.7em;padding:0 1.7em;font-size:1em;font-weight:500}
.hm-ring{width:10em;height:10em;background:radial-gradient(circle at 34% 28%,#fff 0,var(--card-2) 78%);box-shadow:0 0 0 1px var(--bd-2) inset,0 .8em 1.6em rgba(20,30,25,.05)}
:root[data-theme="dark"] .hm-ring{background:radial-gradient(circle at 34% 28%,#2a2a2a 0,#1f1f1f 78%);box-shadow:0 0 0 1px #2c2c2c inset}
.hm-rsvg circle{stroke-width:1.2}
.hm-rsvg .rf{stroke-width:1.4}

/* ON / OFF 글씨는 어디에서도 표시하지 않음 */
.sw span{display:none!important}

/* 최근 구매: 2건씩 보이고 아래로 내려서 더 보기 */
.hm-rows{max-height:12em;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hm-rows::-webkit-scrollbar{display:none}
.hm-rows .hm-row{height:5.6em;min-height:5.6em;margin:0 0 .8em;scroll-snap-align:start}
@media (min-width:861px){
  .hm-sec{display:block}
  .hm-sec .hm-sh{margin:0 0 .9em}
}

/* 유저 목록: 이름 / ID / 금액 줄 맞춤 + 버튼 줄 정렬 */
.prod.user{grid-template-columns:minmax(0,1fr);grid-template-areas:"info" "bt";row-gap:10px;padding:14px 2px;align-items:start}
.prod.user>.grow{grid-area:info;min-width:0;text-align:left}
.prod.user>.btns{grid-area:bt;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
.prod.user>.btns .btn{flex:none;width:100%;padding:0 8px;justify-content:center}
.prod.user .name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.4}
.prod.user .meta{margin-top:2px;line-height:1.5;word-break:break-all;text-align:left}
@media (min-width:861px){
  .prod.user{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info bt";align-items:center;column-gap:16px}
  .prod.user>.btns{display:flex;width:auto}
  .prod.user>.btns .btn{width:auto;padding:0 14px}
}

/* 충전 > 입금 보안: 계좌 · 충전 금액 카드와 같은 모양 */
.sec-rules{display:flex;flex-direction:column;margin:0 0 6px}
.sec-rules .rule{padding:14px 0;gap:14px;min-height:0;border-top:1px solid var(--bd);align-items:center}
.sec-rules .rule:first-child{border-top:0;padding-top:4px}
.sec-rules .rt{font-size:15px;font-weight:600;line-height:1.4;color:var(--text)}
.sec-rules .rd{margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)}
.sec-rules .sw{width:auto;flex:none}

/* ═══════════════════════════════════════════════════════════
   설정 · 충전(자동충전 포함) 화면 전용 — 카드 제목 구분선 + 글자 크기 통일
   (다른 탭은 건드리지 않음: #app 안의 [data-tab=settings|charge] 안에서만 적용)
   ═══════════════════════════════════════════════════════════ */
/* 구분선: 제목·설명 줄과 본문 사이. 본문이 있는 카드에만 */
:is([data-tab="settings"],[data-tab="charge"]) .card:not(.fold)>.card-h:not(:last-child){margin:0 0 12px;padding:14px 0 12px;border-bottom:1px solid var(--bd-2)}
:is([data-tab="settings"],[data-tab="charge"]) .card.rcard>.card-h:not(:last-child){margin:0;padding:14px 16px 12px}
:is([data-tab="settings"],[data-tab="charge"]) .card.rcard>.card-h.charge-head{padding:14px 16px 12px}
:is([data-tab="settings"],[data-tab="charge"]) .card>.card-h:last-child{border-bottom:0}
:is([data-tab="settings"],[data-tab="charge"]) .scard .sbody{padding-top:0}
:is([data-tab="settings"],[data-tab="charge"]) .card.rcard>.card-h+.rules>:first-child{border-top:0}

/* 글자 크기: 제목 15 / 항목 13.5 / 설명·보조 12.5 / 배지·버튼 13 — 화면 크기와 상관없이 같은 값 */
:is([data-tab="settings"],[data-tab="charge"]) .card-h h3,
:is([data-tab="settings"],[data-tab="charge"]) .scard .card-h h3,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .card-h h3{font-size:15px;font-weight:600;line-height:1.3}
:is([data-tab="settings"],[data-tab="charge"]) .card-h .desc,
:is([data-tab="settings"],[data-tab="charge"]) .scard .card-h .desc,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .card-h .desc,
:is([data-tab="settings"],[data-tab="charge"]) .page-h p,
:is([data-tab="settings"],[data-tab="charge"]) .hint,
:is([data-tab="settings"],[data-tab="charge"]) .set-body .field .hint,
:is([data-tab="settings"],[data-tab="charge"]) .fgrid .hint,
:is([data-tab="settings"],[data-tab="charge"]) .rd,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .rd,
:is([data-tab="settings"],[data-tab="charge"]) .sec-rules .rd,
:is([data-tab="settings"],[data-tab="charge"]) .lv,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .lv,
:is([data-tab="settings"],[data-tab="charge"]) .ac-id,
:is([data-tab="settings"],[data-tab="charge"]) .item .meta,
:is([data-tab="settings"],[data-tab="charge"]) .ac-dev span,
:is([data-tab="settings"],[data-tab="charge"]) .sg-l{font-size:12.5px;line-height:1.45;font-weight:400}
:is([data-tab="settings"],[data-tab="charge"]) .sg-l{font-weight:500}
:is([data-tab="settings"],[data-tab="charge"]) .rt,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .rt,
:is([data-tab="settings"],[data-tab="charge"]) .sec-rules .rt,
:is([data-tab="settings"],[data-tab="charge"]) .lt,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .lt,
:is([data-tab="settings"],[data-tab="charge"]) .rule .rt,
:is([data-tab="settings"],[data-tab="charge"]) .lrow .lt,
:is([data-tab="settings"],[data-tab="charge"]) .set-body .field>label,
:is([data-tab="settings"],[data-tab="charge"]) .field>label,
:is([data-tab="settings"],[data-tab="charge"]) .set-body .plabel,
:is([data-tab="settings"],[data-tab="charge"]) .ac-it,
:is([data-tab="settings"],[data-tab="charge"]) .item .name,
:is([data-tab="settings"],[data-tab="charge"]) .ac-dev b,
:is([data-tab="settings"],[data-tab="charge"]) .ac-fold>summary{font-size:13.5px;font-weight:600;line-height:1.4}
:is([data-tab="settings"],[data-tab="charge"]) .set-body .field>label,
:is([data-tab="settings"],[data-tab="charge"]) .field>label{font-weight:500}
:is([data-tab="settings"],[data-tab="charge"]) .lgo,
:is([data-tab="settings"],[data-tab="charge"]) .rcard .lgo,
:is([data-tab="settings"],[data-tab="charge"]) .crumb,
:is([data-tab="settings"],[data-tab="charge"]) .badge,
:is([data-tab="settings"],[data-tab="charge"]) .charge-head .badge,
:is([data-tab="settings"],[data-tab="charge"]) .btn.sm{font-size:13px;font-weight:600}
:is([data-tab="settings"],[data-tab="charge"]) .sfoot .btn,
:is([data-tab="settings"],[data-tab="charge"]) .sfoot .btn.primary,
:is([data-tab="settings"],[data-tab="charge"]) .set-body .actions .btn,
:is([data-tab="settings"],[data-tab="charge"]) .keyrow .btn{font-size:13.5px;font-weight:600}
:is([data-tab="settings"],[data-tab="charge"]) .set-body .input,
:is([data-tab="settings"],[data-tab="charge"]) .set-body select.input,
:is([data-tab="settings"],[data-tab="charge"]) .set-body textarea.input,
:is([data-tab="settings"],[data-tab="charge"]) .keyrow .input{font-size:14px}
:is([data-tab="settings"],[data-tab="charge"]) .pv-t{font-size:15px}
:is([data-tab="settings"],[data-tab="charge"]) .pv-b,
:is([data-tab="settings"],[data-tab="charge"]) .dbtn{font-size:13px}
@media (max-width:860px){
  /* 모바일 입력칸은 16px 이어야 iOS 에서 확대되지 않아요 */
  :is([data-tab="settings"],[data-tab="charge"]) .set-body .input,
  :is([data-tab="settings"],[data-tab="charge"]) .set-body select.input,
  :is([data-tab="settings"],[data-tab="charge"]) .set-body textarea.input,
  :is([data-tab="settings"],[data-tab="charge"]) .keyrow .input{font-size:16px}
}
:is([data-tab="settings"],[data-tab="charge"]) .rcard .card-h h3{color:var(--text)}