/* =========================================================================
   안전캠 SafetyCam — .sc 공통 베이스 (헤더/GNB + 공통 컴포넌트)
   sc-tokens.css 토큰 기반. 모든 규칙이 .sc 네임스페이스로 스코프되어
   기존 design.css(미개편 화면)와 충돌하지 않음.
   ========================================================================= */

/* ----- .sc 컨테이너 리셋 / 베이스 ----- */
.sc, .sc *{box-sizing:border-box}
.sc{font-family:var(--font-ui);color:var(--fg);font-size:15px;line-height:1.5;--accent:var(--blue)}
.sc ul,.sc ol{list-style:none;margin:0;padding:0}
.sc button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
.sc img{display:block;max-width:100%}
.sc a{color:inherit;text-decoration:none}

/* ===================== 버튼 / 아이콘 (공통) ===================== */
.sc .btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;
  background:var(--surface-raised);border:1px solid var(--gray900);border-radius:var(--radius-sm);
  padding:0 14px;font-size:14px;font-weight:500;color:var(--fg-strong);transition:background .15s,border-color .15s}
.sc .btn:hover{background:#4a5d73}
.sc .btn.primary{background:var(--accent);border-color:transparent}
.sc .btn.primary:hover{filter:brightness(1.12)}
.sc .btn.line{background:transparent;border-color:var(--line-btn)}
.sc .btn.line:hover{border-color:var(--fg-muted)}
.sc .btn.sm{height:30px;padding:0 10px;font-size:13px}
.sc .ico{display:inline-block;width:20px;height:20px;flex-shrink:0;background-position:center;background-repeat:no-repeat;background-size:contain}

/* ===================== 앱바 (상단 헤더) ===================== */
.sc.appbar{flex-shrink:0;height:60px;display:flex;align-items:stretch;gap:24px;padding:0 24px;position:relative;z-index:20;
  background:linear-gradient(var(--surface-header),var(--surface-header)) padding-box,
             linear-gradient(to bottom,#64758b,#1f232b) border-box;
  border:1px solid transparent;border-width:0 0 1px 0;box-shadow:var(--shadow-header)}
.sc .brand{flex:1 1 0;display:flex;align-items:center}
.sc .brand a{display:flex;align-items:center}
.sc .brand .logo{display:block;width:78px;height:32px;font-size:0;background:url(../img/sc/logo.png) no-repeat left center/contain}

/* GNB — 풀높이 탭 + 하단 엑센트 인디케이터 */
.sc .gnb{display:flex;align-items:stretch;gap:2px;flex:0 0 auto}
.sc .gnb .item{position:relative;display:flex}
.sc .gnb .item>a{display:flex;align-items:center;gap:6px;height:100%;padding:0 18px;position:relative;
  color:var(--fg-muted);font-size:15px;font-weight:500;transition:color .15s;white-space:nowrap}
.sc .gnb .item>a:hover{color:var(--fg-strong)}
.sc .gnb .item.on>a{color:#fff;font-weight:700}
.sc .gnb .item.has-sub>a::after{content:"";width:14px;height:14px;background:var(--fg-muted);
  -webkit-mask:url(../img/icons/icon_down.svg) center/contain no-repeat;mask:url(../img/icons/icon_down.svg) center/contain no-repeat}
.sc .gnb .sub{position:absolute;left:50%;top:100%;transform:translate(-50%,-6px);min-width:180px;background:var(--surface-panel);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:6px;
  box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transition:all .18s;z-index:50}
.sc .gnb .item:hover .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sc .gnb .sub a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:4px;font-size:14px;color:var(--fg)}
.sc .gnb .sub a:hover{background:var(--blue-dark);color:#fff}

/* 우측 클러스터 — 시계 · 알림 · 계정 */
.sc .bar-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.sc .clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.18;font-variant-numeric:tabular-nums}
.sc .clock .t{font-size:16px;font-weight:700;color:var(--fg-strong);letter-spacing:.01em}
.sc .clock .d{font-size:11px;font-weight:500;color:var(--fg-subtle)}
.sc .divider{width:1px;height:24px;background:var(--line-strong);flex-shrink:0}

/* 알림 벨 */
.sc .bell-wrap{position:relative;display:flex;align-items:center}
.sc .bell{position:relative;width:34px;height:34px;border-radius:var(--radius-sm)}
.sc .bell .ico{position:absolute;inset:7px;width:20px;height:20px;background-image:url(../img/icons/icon_bell.svg)}
.sc .bell:hover{background:rgba(255,255,255,.06)}
.sc .bell.on{background:rgba(255,255,255,.1)}
.sc .bell .num{position:absolute;right:2px;top:2px;min-width:16px;height:16px;border-radius:500px;background:var(--danger);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--surface-header)}

/* 알림 드롭다운 */
.sc .noti-back{position:fixed;inset:0;z-index:45}
.sc .noti-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:46;width:380px;max-width:92vw;
  display:flex;flex-direction:column;max-height:min(560px,78vh);
  background:var(--surface-panel);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop);overflow:hidden}
.sc .noti-pop::before{content:"";position:absolute;right:11px;top:-6px;width:11px;height:11px;transform:rotate(45deg);
  background:var(--surface-panel);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong)}
.sc .noti-hd{flex-shrink:0;display:flex;align-items:center;gap:9px;height:48px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--surface-tint)}
.sc .noti-hd h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--fg-strong)}
.sc .noti-hd .noti-act{margin-left:auto;height:26px;padding:0 10px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:500;color:var(--fg-muted)}
.sc .noti-hd .noti-act:disabled{opacity:.4;cursor:default}
.sc .noti-bd{flex-grow:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.sc .noti-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 28px 52px}
.sc .noti-empty .ne-ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(120,140,170,.12);border:1px solid var(--line)}
.sc .noti-empty .ne-ico .ico{width:28px;height:28px;background-image:url(../img/icons/icon_bell.svg);opacity:.45}
.sc .noti-empty .ne-t{font-size:14px;font-weight:700;color:var(--fg)}
.sc .noti-empty .ne-s{font-size:12.5px;line-height:1.55;color:var(--fg-subtle)}

/* 계정 메뉴 */
.sc .acct{position:relative;display:flex;align-items:center}
.sc .acct-btn{display:flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:var(--radius-sm);
  font-size:14px;color:var(--fg-muted);transition:background .15s,color .15s}
.sc .acct-btn .nm b{font-weight:700;color:var(--fg-strong)}
.sc .acct-btn:hover{background:rgba(255,255,255,.06);color:var(--fg-strong)}
.sc .acct.open .acct-btn{background:rgba(255,255,255,.09)}
.sc .acct-btn .cv{width:13px;height:13px;flex-shrink:0;background:var(--fg-muted);
  -webkit-mask:url(../img/icons/icon_down.svg) center/contain no-repeat;mask:url(../img/icons/icon_down.svg) center/contain no-repeat;transition:transform .2s}
.sc .acct.open .acct-btn .cv{transform:rotate(180deg)}
.sc .acct-back{position:fixed;inset:0;z-index:45}
.sc .acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;background:var(--surface-panel);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:6px;box-shadow:var(--shadow-pop);z-index:46}
.sc .acct-item{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border-radius:4px;
  font-size:14px;color:var(--fg);text-align:left;transition:background .15s,color .15s}
.sc .acct-item:hover{background:var(--blue-dark);color:#fff}
.sc .acct-item .ico{width:16px;height:16px;opacity:.85;background-image:url(../img/icons/icon_logout.svg)}