/* COMM-01 공통 셸 — 사이드바 + 유틸 바 레이아웃 (대시보드/인벤토리/프로비저닝/마이페이지 공유) */

.app-shell{ display:flex; min-height:100vh; }

/* 좌측 사이드바 (고정폭 220px, 라이트/다크 모두 짙은 네이비 고정) */
.sidebar{
  width:220px; flex:0 0 220px;
  background:var(--sidebar);
  color:#c3d2e0;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar__brand{ display:flex; align-items:center; gap:.55rem; padding:1.15rem 1rem; color:#fff; font-weight:700; }
.sidebar__nav{ flex:1 1 auto; padding:.5rem .6rem; display:flex; flex-direction:column; gap:.15rem; overflow-y:auto; }
.sidebar__section{ margin-top:.75rem; padding:.4rem .9rem .25rem; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:#8098af; }

.nav-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem; border-radius:.55rem;
  font-size:.9rem; color:#c3d2e0; text-decoration:none;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active{ background:var(--sidebar-accent); color:#fff; font-weight:600; }
.nav-item.disabled{ color:#6f86a0; cursor:not-allowed; }
.nav-item .badge{ margin-left:auto; font-size:.62rem; border:1px solid currentColor; border-radius:.35rem; padding:0 .3rem; opacity:.8; }
/* 메뉴 아이콘(이모지 → 아웃라인 SVG). currentColor를 상속해 기본/hover/active 색을 그대로 따른다. */
.nav-item .nav-ico{ flex:0 0 auto; opacity:.9; }
.nav-item:hover .nav-ico, .nav-item.active .nav-ico{ opacity:1; }
.sidebar__utils .bell-ico{ flex:0 0 auto; }

/* 프로비저닝 하위에 보안그룹을 묶는 접이식 그룹(nav-group) — 화살표 클릭 또는 그룹 내 항목이
   active일 때(프로비저닝/보안그룹 페이지) 자동으로 펼쳐진다. 초기화는 ui.js의 initSidebarNavGroups(). */
.nav-group__row{ display:flex; align-items:stretch; gap:.15rem; }
.nav-group__link{ flex:1 1 auto; min-width:0; }
.nav-group__toggle{
  display:grid; place-items:center; flex:0 0 auto; width:2rem; margin:0; padding:0;
  border:0; background:transparent; color:#c3d2e0; cursor:pointer; border-radius:.55rem;
}
.nav-group__toggle:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-group__chevron{ transition:transform .15s ease; }
.nav-group--open .nav-group__chevron{ transform:rotate(180deg); }
.nav-group__submenu{ display:flex; flex-direction:column; gap:.15rem; padding-left:.9rem; margin-top:.1rem; }
.nav-item--sub{ font-size:.85rem; }

/* 확장 기능(비용 관리·보고서 작성)을 기본 메뉴와 구분하는 은은한 하늘색 구분선 */
.sidebar__divider{ margin:.6rem .9rem; height:1px; border:0;
  background:linear-gradient(90deg, transparent, rgba(86,165,221,.45), transparent); }

.sidebar__foot{ border-top:1px solid rgba(255,255,255,.08); padding:.85rem 1rem; font-size:.8rem; }
.sidebar__remaining{ margin-bottom:.4rem; font-size:.72rem; color:#8fa3b6; display:flex; align-items:baseline; gap:.15rem; }
.sidebar__remaining-value{ color:#c3d2e0; font-variant-numeric:tabular-nums; }
/* 세션 연장 버튼 — 배경은 사이드바와 동일, 테두리만 달라 시선을 크게 끌지 않는다. */
.sidebar__extend{
  margin-left:.4rem; padding:.05rem .4rem; font-size:.68rem; line-height:1.5;
  color:#c3d2e0; background:var(--sidebar); border:1px solid rgba(255,255,255,.28);
  border-radius:.4rem; cursor:pointer; white-space:nowrap;
}
.sidebar__extend:hover{ border-color:#fff; color:#fff; }
.sidebar__extend:disabled{ opacity:.6; cursor:default; }
.sidebar__email{ color:#aebfd0; word-break:break-all; }
.sidebar__logout{ margin-top:.5rem; width:100%; text-align:left; color:#c3d2e0; background:transparent; border:0; padding:.35rem 0; cursor:pointer; font-size:.85rem; }
.sidebar__logout:hover{ color:#fff; }

/* 본문 영역 */
.main-area{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* 상단 유틸 컨트롤 — 다른 콘텐츠와 겹치지 않도록 사이드바 하단(footer 위)에 배치.
   개별 캡슐 스위치 형태를 유지하되, 다크 네이비 사이드바에 맞춘 은은한 톤으로. */
.sidebar__utils{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem .25rem;
  position:relative;            /* 알림 팝오버(.notif-pop)의 기준 컨테이너 */
}
.sidebar__utils .topbar__btn{
  display:grid; place-items:center; height:34px; min-width:34px; padding:0 .5rem;
  border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#c3d2e0; cursor:pointer; font-size:1rem;
}
.sidebar__utils .topbar__btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
/* 언어 선택 — 지구본 아이콘 클릭 → 드롭다운(한국어/English). 메뉴는 ui.js가 동적 생성. */
.sidebar__utils .lang-dd{ position:relative; }
.sidebar__utils .lang-dd__btn{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; }
.sidebar__utils .lang-dd__globe{ opacity:.85; flex:0 0 auto; }
.lang-dd__menu{
  position:absolute; bottom:calc(100% + .5rem); left:0;
  min-width:132px; padding:.25rem;
  background:var(--surface); color:var(--foreground);
  border:1px solid var(--border); border-radius:.7rem;
  box-shadow:0 12px 30px rgba(0,0,0,.28); z-index:60; overflow:hidden;
}
.lang-dd__item{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:.45rem .6rem; border:0; border-radius:.45rem;
  background:transparent; color:var(--foreground); font-size:.82rem;
}
.lang-dd__item:hover{ background:var(--muted); }
.lang-dd__item.active{ background:var(--muted); font-weight:600; }
.sidebar__utils .bell{ position:relative; }
.bell__badge{ position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:var(--yellow); color:var(--cta-text); font-size:.62rem; font-weight:700; display:grid; place-items:center; }

/* 🔔 알림 팝오버 — 사이드바 유틸 바 바로 위에 뜬다(목업 데이터, ui.js가 동적으로 생성) */
.notif-pop{
  position:absolute; bottom:calc(100% + .5rem); left:.75rem;
  width:290px; max-width:calc(100vw - 2rem);
  background:var(--surface); color:var(--foreground);
  border:1px solid var(--border); border-radius:.9rem;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  z-index:60; overflow:hidden;
}
.notif-pop__head{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem .9rem; font-size:.82rem; font-weight:700;
  border-bottom:1px solid var(--border);
}
.notif-pop__count{
  display:grid; place-items:center; min-width:18px; height:18px; padding:0 .3rem;
  border-radius:9999px; background:var(--sky); color:#fff; font-size:.66rem; font-weight:700;
}
/* 헤더 오른쪽 끝에 붙는 "모두 지우기" — count 뒤 남는 공간을 밀어서 채운다 */
.notif-pop__clear-all{
  margin-left:auto; border:0; background:transparent; cursor:pointer;
  font-size:.72rem; font-weight:500; color:var(--muted-foreground); padding:.15rem .3rem;
}
.notif-pop__clear-all:hover{ color:var(--foreground); text-decoration:underline; }
.notif-pop__list{ list-style:none; margin:0; padding:.25rem; max-height:320px; overflow-y:auto; }
.notif-pop__row{ display:flex; align-items:flex-start; gap:.1rem; border-radius:.6rem; }
.notif-pop__row:hover{ background:var(--muted); }
.notif-pop__item{
  display:flex; gap:.6rem; align-items:flex-start; flex:1 1 auto; min-width:0;
  padding:.6rem .65rem; border-radius:.6rem; text-decoration:none; color:var(--foreground);
}
/* 삭제 버튼 — 평소엔 옅게, 그 항목에 마우스가 올라가 있을 때만 또렷해진다 */
.notif-pop__delete{
  flex:0 0 auto; align-self:center; margin-right:.4rem;
  display:grid; place-items:center; width:22px; height:22px; border-radius:9999px;
  border:0; background:transparent; color:var(--muted-foreground); opacity:.5; cursor:pointer;
}
.notif-pop__row:hover .notif-pop__delete{ opacity:1; }
.notif-pop__delete:hover{ background:var(--border); color:var(--foreground); }
.notif-pop__icon{ flex:0 0 auto; font-size:1rem; line-height:1.3; }
.notif-pop__body{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.notif-pop__title{ font-size:.82rem; font-weight:600; }
.notif-pop__desc{ font-size:.75rem; color:var(--muted-foreground); }
.notif-pop__time{ font-size:.68rem; color:var(--muted-foreground); margin-top:.15rem; }

/* 콘텐츠: 최대 1180px, 본문 영역(사이드바 제외) 가운데 정렬 */
.content{ width:100%; max-width:1180px; margin-left:auto; margin-right:auto; padding:1.5rem; }

/* 프로비저닝 진행바 "지렁이 효과" — 채워진 바 위로 밝은 반투명 띠가 좌→우로 계속 흐른다.
   진행률(width) 값이 90%에서 멈춰 있어도 바가 살아있다는 인상을 준다. 진행 중(running)일 때만
   이 클래스를 붙이고, 완료/실패 시 provisioning.js가 className을 재설정하며 자동으로 사라진다.
   진행률 값·색 팔레트는 건드리지 않는 순수 시각 효과다. */
@keyframes mcp-prov-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.prov-bar--active{ position:relative; overflow:hidden; }
.prov-bar--active::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:mcp-prov-shimmer 1.2s linear infinite;
}
/* 동작 줄이기 설정을 존중 — 움직임 없이 정적으로 둔다. */
@media (prefers-reduced-motion: reduce){
  .prov-bar--active::after{ animation:none; }
}