*,*::before,*::after{box-sizing:border-box}
  :root{
    --bg:#0f1220;
    --fg:#e8ecf3;
    --muted:#97a0b8;
    --surface:#151a2c;
    --surface-weak:#1b2238;
    --border:#26304b;
    --brand:#70a5ff;
    --pale:#1f2742;
    --sky:#68c1ff;
    --radius:14px;
    --topbar:56px;
    --sidebar:320px;
    --ease: .25s ease;
  }
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoi UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;line-height:1.5}
  a{color:inherit;text-decoration:none}
  .muted{color:var(--muted)}
  .bold{font-weight:800}
  #navToggle, #infoToggle { position:absolute; inset:auto; width:1px; height:1px; opacity:0; pointer-events:none; }

  .topbar{
    position:fixed; inset:0 0 auto 0; height:var(--topbar); display:flex; align-items:center; gap:.75rem;
    padding:0 12px; background:rgba(10,12,20,.6); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--border); z-index:50;
  }
  .hamburger{
    display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer;
  }
  .hamburger:hover{background:var(--surface-weak)}
  .brand{font-weight:800; letter-spacing:.2px; color:#fff}

  .sidebar{
    position:fixed; top:var(--topbar); left:0; bottom:0; width:var(--sidebar);
    background:var(--surface); border-right:1px solid var(--border); padding:14px; overflow:auto; z-index:40;
    transform:translateX(0); transition:transform var(--ease);
  }
  #navToggle:not(:checked) ~ .sidebar{ transform:translateX(calc(-1 * var(--sidebar))); }

  .content{ margin: var(--topbar) 0 0 calc(var(--sidebar) + 16px); padding:16px; transition:margin var(--ease);}
  #navToggle:not(:checked) ~ .content{ margin-left:16px; }

  .company{ display:flex; align-items:center; gap:.6rem; margin:2px 0 10px; }
  .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .dot.online{ background:var(--brand); box-shadow:0 0 10px color-mix(in oklab,var(--brand) 35%, transparent); }
  .dot.offline{ background:#6b7280; }
  .company .dot{ width:10px; height:10px; }
  .company .name{ font-weight:900; font-size:1.05rem; }

  .profile{ display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; margin:8px 0 12px; }
  .avatar{
    width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#00c3c4,#01a1a6); border:1px solid var(--border);
  }
  .who .nick{ font-weight:800; }
  .who .nick-ghost{ color:var(--muted); font-size:.92rem; }

  .box{
    background:var(--pale); border:1px solid var(--border); border-radius:var(--radius);
    padding:12px 12px; margin:10px 0;
  }
  .box .hr{ border-top:1px solid var(--border); margin:10px 0; }
  .logout{ display:inline-block; padding:.55rem .9rem; border-radius:12px; background:var(--surface-weak); border:1px solid var(--border); font-weight:700; }

  .stat{ display:flex; justify-content:space-between; padding:8px 2px; border-bottom:1px dashed color-mix(in oklab,var(--border) 70%, transparent); }
  .stat:last-child{ border-bottom:0; }

  .btn-box{
    display:block; text-align:center; font-weight:900; padding:12px; border-radius:12px; border:1px solid var(--border);
    background:#01a1a6; color:#042033; margin:12px 0;
  }

  /* ✅ 수정된 qr-box */
  .qr-box{
    display:block;
    text-align:center;
    background:var(--pale);
    color:var(--fg);
    border:1px dashed #3a4a74;
    padding:14px;
    border-radius:12px;
    margin:10px 0;
    font-weight:600;
    line-height:1.4;
  }
  .qr-box:hover{
    background:var(--surface-weak);
    border-color:var(--border);
  }

  .menu{ margin:14px 0; }
  .menu a{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:10px 10px; margin:4px 0; background:transparent; border:1px solid transparent; color:var(--fg); border-radius:10px; cursor:pointer;
  }
  .menu a:hover{ background:var(--surface-weak); border-color:var(--border); }

  .mini-box{
    margin:6px 0 10px; padding:10px; border:1px solid var(--border); border-radius:12px;
    background:var(--surface-weak); font-size:.9rem;
  }
  .user-row{ display:flex; align-items:center; gap:8px; padding:6px 4px; }
  .user-row .time{ color:var(--muted); font-size:.85rem; margin-left:auto; }

  .accordion{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:10px 10px; margin:4px 0; background:transparent; border:1px solid transparent; color:var(--fg); border-radius:10px; cursor:pointer;
  }
  .accordion:hover{ background:var(--surface-weak); border-color:var(--border); }

  .label-text{ font-weight:600; }
  .caret-box{
    flex:0 0 auto; width:28px; height:28px; border:1px solid var(--border); border-radius:8px;
    display:inline-grid; place-items:center; background:var(--surface-weak);
  }
  .caret{
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid var(--muted);
    transform-origin:center;
    transition:transform .2s ease;
  }
  #infoToggle:checked ~ label.accordion .caret { transform: scaleY(-1); }

  .submenu{
    overflow:hidden; max-height:0; padding-left:8px;
    transition:max-height .28s ease;
  }
  .submenu a{ margin:2px 0; }
  #infoToggle:checked ~ label.accordion + .submenu{ max-height:420px; }

  @media (max-width: 860px){
    :root{ --sidebar: 86vw; }
    .content{ padding:14px; }
  }

  .sidebar{ scrollbar-width:thin; scrollbar-color:#3a4669 transparent; }
  .sidebar::-webkit-scrollbar{ width:10px } 
  .sidebar::-webkit-scrollbar-thumb{ background:#314168; border-radius:12px; border:2px solid transparent; background-clip:content-box; }