/* =========================================================
   RIZE · Reality Intelligence Platform — Design System (app.css v2)
   Apple · Linear · Stripe · Notion 톤
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --primary:#2563EB; --primary-2:#1d4ed8; --primary-soft:#EFF4FF;
  --success:#10B981; --success-soft:#ECFDF5;
  --warning:#F59E0B; --warning-soft:#FFFBEB;
  --danger:#EF4444;  --danger-soft:#FEF2F2;
  --violet:#7c3aed;  --violet-soft:rgba(124,58,237,.14);   /* examples 통합: chip.v / NOC / partner 등 */
  --r-sm:10px; --r:14px; --r-lg:18px;
  --radius:18px;                                            /* examples 컴포넌트의 var(--radius) 별칭 */
  --ease:cubic-bezier(.22,.61,.36,1);
}
.theme-light{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F4F7FB; --surface-3:#F1F5F9;
  --border:#E5E7EB; --border-soft:#EAEAEA;
  --text:#0F172A; --text-2:#475569; --text-muted:#94A3B8;
  --side-bg:#FFFFFF; --side-border:#EAEAEA; --side-hover:#F4F7FB; --side-text:#475569;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.05);
  --shadow-lg:0 12px 34px rgba(16,24,40,.10);
}
.theme-dark{
  --bg:#0A0E16; --surface:#111725; --surface-2:#161D2C; --surface-3:#1B2333;
  --border:#222B3B; --border-soft:#222B3B;
  --text:#E6ECF7; --text-2:#A6B3C9; --text-muted:#6B7A93;
  --side-bg:#0C1119; --side-border:#1A2233; --side-hover:#161E2C; --side-text:#A6B3C9;
  --primary-soft:#16223f;
  --success-soft:#0e2920; --warning-soft:#2a2310; --danger-soft:#2a1517;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --shadow-lg:0 12px 34px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{text-decoration:none;color:inherit}
.muted{color:var(--text-muted)!important}
.t2{color:var(--text-2)!important}
.ml-auto{margin-left:auto}
.tnum{font-variant-numeric:tabular-nums}

/* ============ LAYOUT ============ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:256px;flex-shrink:0;background:var(--side-bg);border-right:1px solid var(--side-border);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:1040;
  transition:transform .26s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.main{flex:1;min-width:0;margin-left:256px;display:flex;flex-direction:column}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
}

/* ============ SIDEBAR ============ */
.s-head{padding:22px 22px 18px;display:flex;align-items:center;gap:12px}
.s-logo{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#2563EB,#7c3aed);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;letter-spacing:-1px;
  box-shadow:0 6px 16px rgba(37,99,235,.32);
}
.s-head .nm{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.1}
.s-head .tag{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.02em;margin-top:3px}

.s-section{padding:10px 16px 4px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase}
.s-nav{padding:4px 12px;flex:1;overflow-y:auto}
.s-nav a, .s-nav .grp-btn{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;
  color:var(--side-text);font-weight:500;font-size:13.5px;margin-bottom:2px;border:0;background:none;
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);text-align:left;
}
.s-nav a i,.s-nav .grp-btn i{font-size:17px;width:20px;text-align:center;stroke-width:1.5}
.s-nav a:hover,.s-nav .grp-btn:hover{background:var(--side-hover);color:var(--text)}
.s-nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.s-nav a.active i{color:var(--primary)}
.s-nav .grp-btn .chev{margin-left:auto;font-size:13px;transition:transform .2s var(--ease)}
.s-nav .grp.open .grp-btn .chev{transform:rotate(90deg)}
.s-nav .grp.open .grp-btn{color:var(--text)}
.s-sub{max-height:0;overflow:hidden;transition:max-height .26s var(--ease)}
.s-nav .grp.open .s-sub{max-height:280px}
.s-sub a{padding:8px 12px 8px 43px;font-size:13px;color:var(--text-muted)}
.s-sub a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.s-nav a .pill{margin-left:auto;font-size:10px;font-weight:700;background:var(--surface-2);color:var(--text-2);padding:2px 8px;border-radius:30px}
.s-nav a.active .pill{background:#fff;color:var(--primary)}
.s-nav .lbl{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.menu-title{display:block;font-size:13.5px;font-weight:700}
.menu-subtitle{display:block;font-size:10px;color:var(--text-muted);margin-top:2px;font-weight:500;letter-spacing:.01em}
.s-nav a.active .menu-subtitle{color:var(--primary);opacity:.7}
.s-nav .grp.open .grp-btn .menu-subtitle{color:var(--text-muted)}
.s-sub a .menu-title{font-size:13px;font-weight:600}
.s-sub a .menu-subtitle{font-size:9.5px}
.s-nav a, .s-nav .grp-btn{align-items:center}
.lang-menu{min-width:170px;padding:6px}
.lang-menu .dropdown-item{border-radius:8px;font-size:13px;padding:8px 12px;display:flex;align-items:center;gap:9px}
.lang-menu .dropdown-item.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.lang-menu .dropdown-item small{color:var(--text-muted);font-weight:500;margin-left:auto}

.s-foot{margin:12px;padding:13px 14px;border-radius:12px;border:1px solid var(--side-border);background:var(--surface-2)}
.s-foot .r1{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px}
.s-foot small{display:block;color:var(--text-muted);font-size:10.5px;margin-top:5px;line-height:1.55}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* ============ HEADER ============ */
.topbar{
  position:sticky;top:0;z-index:1030;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);padding:0 28px;height:66px;
  display:flex;align-items:center;gap:14px;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.search{position:relative;max-width:340px;flex:1}
.search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:15px}
.search input{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:11px;padding:9px 12px 9px 38px;font-size:13px;font-family:inherit;transition:.16s}
.search input:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-soft)}
.prod{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:30px;background:var(--success-soft);color:var(--success);font-weight:700;font-size:11.5px;border:1px solid color-mix(in srgb,var(--success) 22%,transparent)}
.prod .live-dot{box-shadow:0 0 0 0 rgba(16,185,129,.4)}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);display:grid;place-items:center;font-size:17px;cursor:pointer;position:relative;transition:.16s}
.icon-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-2)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.store-sel{display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--border);background:var(--surface);border-radius:11px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s}
.store-sel:hover{border-color:var(--primary)}
.store-sel .ic{width:24px;height:24px;border-radius:7px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:13px}
.profile{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;border-radius:11px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:.16s}
.profile:hover{border-color:var(--primary)}
.profile .av{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2563EB,#7c3aed);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.profile .nm{font-weight:700;font-size:12.5px;line-height:1.2}
.profile .rl{font-size:10.5px;color:var(--text-muted)}

/* ============ CONTENT ============ */
.content{padding:32px 40px 44px;max-width:1440px;width:100%;margin:0;animation:fadeUp .5s var(--ease) both}
@media (max-width:575.98px){.content{padding:22px 18px 36px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.page-head h2{font-size:22px;font-weight:700;margin:0;letter-spacing:-.4px}
.page-head .desc{color:var(--text-2);font-size:13px;margin-top:4px}
.sec-title{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-2);margin:0 0 13px;display:flex;align-items:center;gap:8px}
.sec-title .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--success);font-weight:600;margin-left:auto}

/* stagger reveal */
.reveal{animation:fadeUp .55s var(--ease) both}
.reveal:nth-child(1){animation-delay:.02s}.reveal:nth-child(2){animation-delay:.06s}
.reveal:nth-child(3){animation-delay:.10s}.reveal:nth-child(4){animation-delay:.14s}
.reveal:nth-child(5){animation-delay:.18s}.reveal:nth-child(6){animation-delay:.22s}

/* ============ CARD ============ */
.card2{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease),background .3s var(--ease)}
.card2.hov:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
.card2 .hd{display:flex;align-items:center;gap:11px;padding:18px 22px;border-bottom:1px solid var(--border)}
.card2 .hd h6{margin:0;font-weight:700;font-size:14.5px;letter-spacing:-.2px}
.card2 .hd .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.card2 .bd{padding:22px}
.ic-tile{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:30px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.chip.g{background:var(--success-soft);color:var(--success)}
.chip.b{background:var(--primary-soft);color:var(--primary)}
.chip.w{background:var(--warning-soft);color:var(--warning)}
.chip.r{background:var(--danger-soft);color:var(--danger)}
.chip.n{background:var(--surface-2);color:var(--text-2)}
.dot-s{width:8px;height:8px;border-radius:50%;display:inline-block}
.btn-primary{background:var(--primary);border-color:var(--primary);font-weight:600;font-size:12.5px;box-shadow:0 4px 12px rgba(37,99,235,.22)}
.btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
.btn-soft{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:12.5px;border-radius:9px;transition:.16s}
.btn-soft:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-2)}

/* ============ AI HERO (Store Manager) ============ */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:0;color:#eef3ff;
  background:radial-gradient(120% 140% at 85% 0%,#2f4bd6 0%,#1b2c7a 45%,#0e1746 100%);
  box-shadow:0 18px 44px rgba(14,23,70,.32)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.9),transparent);animation:scan 3.2s var(--ease) infinite}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hero .glow{position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.5),transparent 70%);pointer-events:none}
.hero .inner{display:flex;gap:28px;padding:28px 30px;position:relative;flex-wrap:wrap}
.hero .left{flex:1;min-width:280px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.12);padding:6px 12px;border-radius:30px;backdrop-filter:blur(6px)}
.hero .ai-live{width:7px;height:7px;border-radius:50%;background:#7fffd4;box-shadow:0 0 8px #7fffd4;animation:pulse 1.6s infinite}
.hero h3{font-size:25px;font-weight:800;letter-spacing:-.6px;margin:16px 0 4px;color:#fff}
.hero h3 span{color:#9db4ff}
.hero .status-line{font-size:14px;color:#c5d2ff;margin:0 0 18px}
.hero .pos{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.hero .pos .p{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#dbe6ff;
  background:rgba(255,255,255,.1);padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.hero .pos .p i{color:#7fffd4}
.hero .act-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;color:#9db4ff;text-transform:uppercase;margin-bottom:9px}
.hero .acts{display:flex;gap:9px;flex-wrap:wrap}
.hero .acts .a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);padding:8px 13px;border-radius:30px;border:1px solid rgba(255,255,255,.16);transition:.16s;cursor:pointer}
.hero .acts .a:hover{background:rgba(255,255,255,.24)}
.hero .acts .a i{color:#7fffd4}

/* Store Health ring */
.health{flex-shrink:0;width:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px}
.ring{position:relative;width:140px;height:140px}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val b{font-size:38px;font-weight:800;color:#fff;line-height:1}
.ring .val span{font-size:11px;color:#9db4ff;font-weight:600}
.health .stars{color:#ffd66e;font-size:15px;letter-spacing:2px;margin:13px 0 5px}
.health .tier{font-size:13px;font-weight:700}
.health .lbl{font-size:11px;color:#9db4ff;margin-top:2px}
@media (max-width:575.98px){.health{width:100%}}

/* ============ KPI ============ */
.kpi .top{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.kpi .top .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px}
.kpi .top .name{font-size:12.5px;font-weight:600;color:var(--text-2)}
.kpi .val{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1}
.kpi .row2{display:flex;align-items:center;gap:8px;margin:10px 0 12px}
.kpi .delta{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:2px}
.kpi .delta.up{color:var(--success)}.kpi .delta.down{color:var(--danger)}
.kpi .yday{font-size:11.5px;color:var(--text-muted)}
.kpi .ai{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-2);background:var(--surface-2);border-radius:9px;padding:8px 10px}
.kpi .ai .b{font-size:9.5px;font-weight:800;color:var(--primary);background:var(--primary-soft);padding:2px 6px;border-radius:5px;letter-spacing:.04em}

/* ============ ACTION (todo) ============ */
.todo{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)}
.todo:last-child{border-bottom:0;padding-bottom:0}.todo:first-child{padding-top:0}
.todo .n{width:28px;height:28px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.todo .tt{font-weight:600;font-size:13.5px}
.todo .ds{font-size:11.5px;color:var(--text-muted);margin-top:1px}

/* ============ ENGINE GRID ============ */
.eng{border:1px solid var(--border);border-radius:13px;padding:15px;background:var(--surface);transition:.18s}
.eng:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));transform:translateY(-2px)}
.eng .e-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.eng .e-ic{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:15px;color:var(--text-2)}
.eng .e-nm{font-weight:700;font-size:13px;line-height:1.1}
.eng .e-st{font-size:10.5px;color:var(--success);font-weight:600;display:flex;align-items:center;gap:4px}
.eng .e-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:11px}
.eng .e-meta div{display:flex;justify-content:space-between}
.eng .e-meta span{color:var(--text-muted)}
.eng .e-meta b{font-weight:600;color:var(--text-2)}

/* ============ EVENT TIMELINE ============ */
.ev{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.ev:last-child{border-bottom:0;padding-bottom:0}.ev:first-child{padding-top:0}
.ev .t{font-size:11px;color:var(--text-muted);font-weight:600;width:42px;flex-shrink:0;padding-top:1px}
.ev .dotline{position:relative;width:14px;flex-shrink:0;display:flex;justify-content:center}
.ev .dotline::before{content:"";position:absolute;top:5px;width:9px;height:9px;border-radius:50%;background:var(--primary)}
.ev .ds{font-size:12.5px}
.ev .ds .sub{font-size:11px;color:var(--text-muted)}

/* ============ NOTICE ============ */
.notice{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--border)}
.notice:last-child{border-bottom:0;padding-bottom:0}.notice:first-child{padding-top:0}
.notice .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex-shrink:0}

/* ============ TABLE ============ */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl thead th{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);font-weight:700;padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .strong{font-weight:700}
.table-wrap{overflow-x:auto}

/* ============ STORE / DEVICE CARD ============ */
.store{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);height:100%}
.store:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.store .cover{height:84px;background:linear-gradient(120deg,#1e3a8a,#3b5bdb);position:relative;display:flex;align-items:flex-end;padding:14px 16px}
.store .cover .st{position:absolute;top:14px;right:14px}
.store .cover .nm{color:#fff;font-weight:800;font-size:15px;letter-spacing:-.2px}
.store .cover .addr{color:#c3d0f3;font-size:11px}
.store .body{padding:16px}
.store .stat{display:flex;justify-content:space-between;padding:6px 0;font-size:12.5px}
.store .stat span{color:var(--text-muted)}.store .stat b{font-weight:700}

/* ============ FORM ============ */
.form-section{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--border)}
.form-section:last-child{border-bottom:0}
.form-section .lead{font-weight:700;font-size:14px}
.form-section .lead p{font-size:12px;color:var(--text-muted);margin:6px 0 0;line-height:1.6;font-weight:400}
@media (max-width:767.98px){.form-section{grid-template-columns:1fr;gap:14px}}
.field{margin-bottom:16px}.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}
.inp{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:10px 13px;font-size:13px;font-family:inherit;transition:.16s}
.inp:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-soft)}
.toggle-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:11px}
.toggle-row:last-child{margin-bottom:0}
.toggle-row .t-tt{font-weight:600;font-size:13px}
.toggle-row .t-ds{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.switch{position:relative;width:44px;height:25px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--surface-3);border:1px solid var(--border);border-radius:30px;cursor:pointer;transition:.22s}
.switch .sl::before{content:"";position:absolute;width:19px;height:19px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .sl{background:var(--primary);border-color:var(--primary)}
.switch input:checked + .sl::before{transform:translateX(19px)}

/* ============ FUNNEL / HEATMAP ============ */
.funnel-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.funnel-row:last-child{margin-bottom:0}
.funnel-row .fl-lbl{width:120px;font-size:12.5px;font-weight:600;flex-shrink:0}
.funnel-bar{height:38px;border-radius:10px;background:linear-gradient(90deg,#2563EB,#5b82f5);display:flex;align-items:center;justify-content:flex-end;padding:0 14px;color:#fff;font-weight:700;font-size:13px;min-width:64px}
.funnel-row .fl-pct{width:64px;text-align:right;font-size:12.5px;color:var(--text-muted);flex-shrink:0}
.heat{display:grid;grid-template-columns:auto repeat(12,1fr);gap:5px;font-size:10px;min-width:560px}
.heat .cell{height:26px;border-radius:6px}
.heat .hd-c{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-weight:700}
.heat .row-l{display:flex;align-items:center;color:var(--text-muted);font-weight:700;padding-right:4px}

/* ============ PERMISSION MATRIX ============ */
.matrix td .switch{margin:0 auto}
.matrix .ro{text-align:center}

/* progress */
.progress{height:6px;background:var(--surface-3);border-radius:30px;overflow:hidden}
.progress-bar{background:var(--primary)}

.scrim{display:none;position:fixed;inset:0;background:rgba(8,13,26,.4);z-index:1035;backdrop-filter:blur(2px)}
.scrim.show{display:block}
@media (max-width:991.98px){.hide-sm{display:none!important}}
.foot-note{text-align:center;color:var(--text-muted);font-size:11.5px;margin:34px 0 6px}

/* =========================================================
   Analytics — 한글 최적화 · 카드 균일 · AI 코멘트 · 색상 규칙
   ========================================================= */
:root{ --c-new:#2563EB; --c-reg:#10B981; --c-churn:#F59E0B; --c-vip:#7c3aed;
  --c-new-soft:rgba(37,99,235,.12); --c-reg-soft:rgba(16,185,129,.12);
  --c-churn-soft:rgba(245,158,11,.14); --c-vip-soft:rgba(124,58,237,.14); }

/* 제목/지표명 줄바꿈 — 한글 단어 단위로 끊고 카드 밖으로 안 나가게 */
.card-title{white-space:normal;word-break:keep-all;line-height:1.4;margin:0}
.metric-title{white-space:normal;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.card2 .hd h6{word-break:keep-all;line-height:1.4}
.chip{white-space:nowrap}

/* 분석 카드 그리드 — Flex/Grid 유동 레이아웃 */
.an-grid{display:grid;gap:20px;grid-template-columns:repeat(12,1fr);align-items:stretch}
.sp-3{grid-column:span 3}.sp-4{grid-column:span 4}.sp-5{grid-column:span 5}
.sp-6{grid-column:span 6}.sp-7{grid-column:span 7}.sp-8{grid-column:span 8}.sp-12{grid-column:span 12}

/* 균일 카드: 동일 높이/패딩/제목위치/차트크기/하단 AI 코멘트 */
.an-card{display:flex;flex-direction:column;min-height:380px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease),background .3s var(--ease)}
.an-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 26%,var(--border))}
.an-card .an-hd{display:flex;align-items:flex-start;gap:11px;padding:20px 22px 0}
.an-card .an-hd .ic-tile{flex-shrink:0}
.an-card .an-hd .tt{min-width:0;flex:1}
.an-card .an-hd .card-title{font-size:14.5px;font-weight:700}
.an-card .an-hd .sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;word-break:keep-all;line-height:1.45}
.an-card .an-body{flex:1;padding:18px 22px 6px;display:flex;flex-direction:column;justify-content:center;min-height:0}
.an-card .chart-box{position:relative;width:100%;height:260px}        /* 차트 +25% 확대 */
.an-card .chart-box canvas{width:100%!important;height:100%!important}
.an-card .ai-comment{margin:8px 22px 20px}

/* 하단 AI 코멘트 박스 */
.ai-comment{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:13px}
.ai-comment .ai-b{flex-shrink:0;font-size:10px;font-weight:800;color:var(--primary);background:var(--primary-soft);
  padding:3px 8px;border-radius:7px;letter-spacing:.04em;margin-top:1px}
.ai-comment .ai-tx{font-size:12.5px;color:var(--text-2);line-height:1.65;word-break:keep-all}
.ai-comment .ai-tx b{color:var(--text);font-weight:700}

/* 색상 레전드 (신규/단골/이탈/VIP 공통) */
.legend{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center}
.legend .lg{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;word-break:keep-all}
.legend .lg .sw{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.legend .lg .pct{font-weight:800;font-variant-numeric:tabular-nums}

/* 가로 막대(구역/구성 비중) */
.hbar{margin-bottom:14px}.hbar:last-child{margin-bottom:0}
.hbar .hb-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;word-break:keep-all}
.hbar .hb-top b{font-weight:800;font-variant-numeric:tabular-nums}
.hbar .hb-track{height:12px;border-radius:30px;background:var(--surface-3);overflow:hidden}
.hbar .hb-fill{height:100%;border-radius:30px}

/* 반응형: 320 / 768 / 1024 / 1440 / 1920 / 2560 */
@media (max-width:1199.98px){
  .sp-3,.sp-4,.sp-5{grid-column:span 6}
  .sp-7,.sp-8{grid-column:span 12}
}
@media (max-width:767.98px){
  .an-grid{gap:16px}
  .sp-3,.sp-4,.sp-5,.sp-6,.sp-7,.sp-8{grid-column:span 12}
  .an-card{min-height:340px}
  .an-card .chart-box{height:220px}
}
@media (max-width:359.98px){
  .an-card .an-hd{padding:16px 16px 0}
  .an-card .an-body{padding:14px 16px 4px}
  .an-card .ai-comment{margin:8px 16px 16px}
  .an-card .an-hd .card-title{font-size:13.5px}
}
@media (min-width:1920px){ .an-grid{gap:24px} .an-card .chart-box{height:300px} }
@media (min-width:2560px){ .an-card .chart-box{height:340px} }

/* =========================================================
   통합 레이어 1 — examples(v0.1) 전용 컴포넌트 이식
   ---------------------------------------------------------
   rize_site 디자인 시스템을 베이스로 두고, examples 페이지
   (admin/noc/partner/install/live/store/system-reports/settings)
   에서만 쓰던 클래스를 충돌 없이 보강한다.
   · KPI 변형은 .card2.kpi 로 스코프하여 베이스 .kpi 와 분리.
   · 색상은 통합 토큰(var(--violet) 등)을 사용.
   ========================================================= */

/* ----- 카드 헤더 아이콘 (examples 는 .hd 안에 .ic 사용) ----- */
.card2 .hd .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.icon-tile{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}

/* ----- KPI 변형(examples): .card2.kpi > .bd > .lbl/.val/.trend ----- */
.card2.kpi .bd{padding:18px 20px}
.card2.kpi .lbl{font-size:12px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:7px}
.card2.kpi .lbl .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.card2.kpi .val{font-size:27px;font-weight:800;letter-spacing:-.5px;margin:11px 0 3px;line-height:1.05}
.card2.kpi .val small{font-size:14px;font-weight:700;color:var(--text-muted)}
.trend{font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.trend.up{color:var(--success)}
.trend.down{color:var(--danger)}

/* ----- chip 보라색(violet) 추가 ----- */
.chip.v{background:var(--violet-soft);color:var(--violet)}

/* ----- 보라 soft 배경(아이콘 타일용) ----- */
.violet-soft-bg{background:var(--violet-soft);color:var(--violet)}

/* ----- AI HERO (examples 점주/관리자 브리핑 배너) ----- */
.ai-hero{border-radius:var(--r-lg);padding:22px 24px;color:#eaf0ff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0e1f44 0%,#1b3a86 55%,#3a4fb0 100%);box-shadow:0 12px 30px rgba(14,31,68,.3)}
.ai-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,77,255,.45),transparent 70%);pointer-events:none}
.ai-hero .tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.14);padding:5px 11px;border-radius:30px;position:relative}
.ai-hero h4{font-size:18px;font-weight:800;margin:13px 0 7px;line-height:1.45;position:relative;color:#fff;word-break:keep-all}
.ai-hero p{color:#c3d0f3;margin:0;font-size:13px;line-height:1.6;max-width:760px;position:relative;word-break:keep-all}
.ai-hero .metrics{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap;position:relative}
.ai-hero .metrics div b{display:block;font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.ai-hero .metrics div span{font-size:11px;color:#a9bbe8}

/* ----- 리스트 아이템(알림/감지/처리필요) ----- */
.item{display:flex;gap:12px;padding:13px 0;border-bottom:1px dashed var(--border)}
.item:last-child{border-bottom:0;padding-bottom:0}
.item:first-child{padding-top:0}
.item .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.item .tt{font-weight:700;font-size:13.5px}
.item .ds{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.5;word-break:keep-all}

/* ----- 액션 카드(추천 액션) ----- */
.action{border:1px solid var(--border);border-radius:13px;padding:14px;background:var(--surface-2);margin-bottom:11px}
.action:last-child{margin-bottom:0}
.action .top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.action .top .num{width:26px;height:26px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.action .top b{font-size:13.5px}
.action p{margin:0 0 11px;font-size:12px;color:var(--text-muted);line-height:1.55}
.action .ft{display:flex;align-items:center;gap:9px}

/* ----- 디바이스 라인(간단형) ----- */
.dev{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:10px}
.dev:last-child{margin-bottom:0}
.dev .cam{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.dev .nm{font-weight:700;font-size:13px}
.dev .meta{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ----- 타임라인(설치 일정) ----- */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:17px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl{position:relative;display:flex;gap:12px;padding:0 0 18px}
.tl:last-child{padding-bottom:0}
.tl .no{position:relative;width:36px;height:36px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.tl .tx{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:12px;flex:1;min-width:0}
.tl .tx b{font-size:13px}
.tl .tx p{font-size:12px;color:var(--text-muted);margin:4px 0 0;line-height:1.55;word-break:keep-all}

/* ----- Live Relay (영상 저장 없이 박스/이벤트 메타데이터만 표시) ----- */
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.live-box{height:220px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3));position:relative;overflow:hidden}
.live-box .scan{position:absolute;inset:18px;border:1px dashed rgba(47,91,234,.35);border-radius:12px}
.live-box .person{position:absolute;border:2px solid var(--primary);border-radius:10px;background:rgba(47,91,234,.08)}
.live-box .tagg{position:absolute;top:-24px;left:0;background:var(--primary);color:#fff;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:7px}
.live-box .caption{position:absolute;left:14px;bottom:12px;right:14px;display:flex;align-items:center;justify-content:space-between}

/* ----- 메트릭 라인(파이프라인/구성 비중) ----- */
.metric-list{display:grid;gap:10px}
.metric-line{display:flex;align-items:center;gap:10px}
.metric-line .label{width:90px;font-size:12px;font-weight:800;flex-shrink:0}
.metric-line .bar{height:10px;flex:1;background:var(--surface-3);border-radius:30px;overflow:hidden}
.metric-line .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--violet));border-radius:30px}
.metric-line .val{font-size:12px;color:var(--text-muted);width:50px;text-align:right;flex-shrink:0}

/* ----- Privacy strip (영상 비저장/민감데이터 차단 안내) ----- */
.privacy-strip{display:inline-flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;
  background:var(--success-soft);color:var(--success);font-size:12px;font-weight:800;
  border:1px solid color-mix(in srgb,var(--success) 22%,transparent)}

/* ----- 상태 그리드 / 헬스 행 (본사 관리자·시스템 보고서에서 사용) ----- */
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.status-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.status-card .x{font-size:11.5px;color:var(--text-muted);font-weight:700}
.status-card .y{font-size:20px;font-weight:900;margin-top:5px;font-variant-numeric:tabular-nums}
.status-card .z{font-size:11px;color:var(--text-muted);margin-top:2px}
.health-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--border)}
.health-row:last-child{border-bottom:0}
.health-row .nm{font-weight:800;font-size:13px}
.health-row .ds{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.health-row .port{font-size:11px;color:var(--text-muted);font-weight:800}

/* =========================================================
   통합 레이어 2 — 로그인 화면(examples 디자인 우선)
   ========================================================= */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:var(--bg)}
.login-visual{position:relative;padding:56px;background:linear-gradient(135deg,#0e1f44 0%,#1b3a86 58%,#3a4fb0 100%);
  color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.login-visual::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,77,255,.55),transparent 68%)}
.login-visual .brand-big{position:relative;display:flex;align-items:center;gap:14px;font-weight:900;font-size:24px;letter-spacing:-.5px;line-height:1.15}
.login-visual .brand-big .mark{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.16);display:grid;place-items:center;border:1px solid rgba(255,255,255,.2)}
.login-visual h1{position:relative;font-size:34px;font-weight:900;letter-spacing:-1px;line-height:1.28;margin:0 0 16px;word-break:keep-all}
.login-visual p{position:relative;max-width:620px;color:#c3d0f3;line-height:1.72;margin:0;word-break:keep-all}
.login-visual .metrics{position:relative;display:flex;gap:26px;flex-wrap:wrap;margin-top:10px}
.login-visual .metrics div b{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.login-visual .metrics div span{font-size:11px;color:#a9bbe8}
.login-panel{display:flex;align-items:center;justify-content:center;padding:42px}
.login-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:22px;padding:28px}
.login-card h2{font-size:22px;font-weight:900;margin:0 0 6px;letter-spacing:-.3px}
.login-card .hint{color:var(--text-muted);font-size:12.5px;margin-bottom:22px}

/* =========================================================
   통합 레이어 3 — 신규 페이지(index 랜딩 / admin 본사 관리자) 헬퍼
   ========================================================= */
/* 랜딩 진입 화면 */
.landing{min-height:100vh;display:flex;flex-direction:column}
.landing-hero{flex:1;display:grid;place-items:center;padding:48px 22px;position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 80% 0%,#1b3a86 0%,#0e1746 55%,#080d1a 100%);color:#eef3ff}
.landing-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.9),transparent);animation:scan 3.2s var(--ease) infinite}
.landing-inner{width:min(760px,100%);text-align:center;position:relative}
.landing-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.12);padding:7px 14px;border-radius:30px;backdrop-filter:blur(6px);margin-bottom:22px}
.landing-logo{width:72px;height:72px;border-radius:22px;margin:0 auto 22px;
  background:linear-gradient(135deg,#2563EB,#7c3aed);display:grid;place-items:center;color:#fff;font-weight:900;font-size:34px;
  box-shadow:0 14px 36px rgba(37,99,235,.42)}
.landing-inner h1{font-size:38px;font-weight:900;letter-spacing:-1.2px;margin:0 0 12px;color:#fff;line-height:1.18;word-break:keep-all}
.landing-inner .lead{font-size:15px;color:#c5d2ff;max-width:560px;margin:0 auto 30px;line-height:1.7;word-break:keep-all}
.landing-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.landing-cta .btn{padding:13px 22px;font-size:14px;border-radius:12px}
.btn-ghost-light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700}
.btn-ghost-light:hover{background:rgba(255,255,255,.2);color:#fff}
.landing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.landing-grid .lc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 14px;text-align:left}
.landing-grid .lc i{font-size:20px;color:#9db4ff}
.landing-grid .lc .t{font-weight:700;font-size:13px;margin:9px 0 3px;color:#fff}
.landing-grid .lc .d{font-size:11px;color:#9db4ff;line-height:1.5}
.landing-foot{padding:18px;text-align:center;color:var(--text-muted);font-size:11.5px;background:var(--bg)}
@media (max-width:767.98px){
  .landing-inner h1{font-size:28px}
  .landing-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   통합 레이어 4 — 반응형 보강 (360 / 768 / 1024 / 1440)
   ========================================================= */
/* 태블릿 이하: 탑바 좌우 여백·간격 축소 */
@media (max-width:991.98px){
  .topbar{padding:0 16px;gap:10px}
  .content{padding:24px 18px 40px}
  .login-wrap{grid-template-columns:1fr}
  .login-visual{display:none}            /* 모바일: 좌측 비주얼 숨김 */
  .login-panel{padding:28px 18px}
  .live-grid{grid-template-columns:1fr}
  .status-grid{grid-template-columns:repeat(2,1fr)}
}
/* 모바일: 프로필 텍스트 숨김은 .hide-sm 로 처리됨. 아이콘 버튼 약간 축소 */
@media (max-width:575.98px){
  .icon-btn{width:38px;height:38px;font-size:16px}
  .topbar{height:60px;gap:8px}
  .profile{padding:4px}
  .page-head h2{font-size:20px}
  .ai-hero{padding:18px 16px}
  .ai-hero .metrics{gap:16px}
  .status-grid{grid-template-columns:1fr}
}
/* 초소형 360px: 그리드/타이포 안전 처리 */
@media (max-width:380px){
  .content{padding:18px 14px 34px}
  .kpi .val{font-size:26px}
  .card2.kpi .val{font-size:24px}
  .landing-inner h1{font-size:25px}
}
/* 터치 타깃 최소 크기 보장 */
.btn,.btn-soft,.btn-primary,.icon-btn,.switch{min-height:38px}
.btn-sm{min-height:32px}

/* 모든 테이블은 좁은 화면에서 가로 스크롤 (카드 깨짐 방지) */
.table-wrap{ -webkit-overflow-scrolling:touch }
.table-wrap table{min-width:560px}
@media (max-width:575.98px){ .table-wrap table{min-width:520px} }