/* 공통 고객 메뉴 스타일 — customer-shell.js가 만드는 사이드바·drawer·만들기 선택창.
   기준은 기존 workspace의 로고·230px 사이드바·NotoSans/SpaceGrotesk·파란 선택 표시다.
   페이지별 규칙은 각 페이지 CSS에 두고, 메뉴에 관한 것은 여기서만 바꾼다. */
@font-face{font-family:SpaceGrotesk;src:url('/static/home/fonts/SpaceGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:NotoSans;src:url('/static/home/fonts/NotoSansKR-Regular.woff2') format('woff2');font-weight:400 700;font-display:swap}

.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line,#e4e6eb);padding:28px 18px 14px;overflow-y:auto}
.sidebar-inner{display:flex;flex-direction:column;min-height:100%;font:13px/1.55 var(--font,NotoSans,Arial,sans-serif);color:var(--ink,#17191e)}
.sidebar a{color:inherit;text-decoration:none}
.sidebar button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
.sidebar button:focus-visible,.sidebar a:focus-visible,.sidebar select:focus-visible{outline:3px solid var(--blue,#2f55ff);outline-offset:3px}
.sidebar svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* nav-item의 display:flex가 UA의 [hidden] 숨김을 이기지 않게 — 관리자 링크는 일반 고객에게 숨긴다 */
.sidebar [hidden]{display:none!important}

.brand{display:flex;align-items:center;gap:10px;padding:0 8px;font:700 18px SpaceGrotesk,var(--font,NotoSans,Arial,sans-serif)}
.brand img{width:36px;height:36px}
.business-switch{border:1px solid var(--line,#e4e6eb);background:#fff;border-radius:10px;padding:12px;text-align:left;margin:26px 0 22px;width:100%;overflow-wrap:anywhere}
.business-switch small{font-size:10px;color:var(--muted,#656974);margin-bottom:3px;display:block}
.business-switch strong{font-size:12px;display:block}

.nav-item{display:flex;align-items:center;gap:11px;text-align:left;padding:12px 13px;border-radius:9px;width:100%;min-height:44px;color:#626773;margin:3px 0;font-weight:700}
.nav-item:hover{background:#f5f6fa}
.nav-item.active{background:#edf1ff;color:var(--blue,#2f55ff)}
.nav-label{text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#828691;margin:26px 13px 8px}
.nav-icon{flex:0 0 20px}

.side-bottom{margin-top:auto;padding-top:30px}
.language{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted,#656974)}
.language select{max-width:118px;background:#fff;border:1px solid var(--line,#e4e6eb);border-radius:7px;padding:6px;color:var(--ink,#17191e);font:inherit}
.account{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line,#e4e6eb);padding:17px 0 6px;margin-top:18px}
.account>div{min-width:0}
.account strong{display:block;font-size:11px;overflow-wrap:anywhere}
.account small{font-size:10px;color:var(--muted,#656974);margin-top:3px;display:block}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--yellow,#ffce21);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.legal{display:flex;gap:15px;font-size:10px;color:var(--muted,#656974);padding:8px 13px}

/* 좁은 화면 열기 버튼 — 페이지에 topbar 버튼이 없으면 shell이 띄운 것도 같은 모양 */
/* button.menu-toggle — 페이지의 .icon-button{display:inline-flex}보다 특이성을 높여 넓은 화면에서 확실히 숨긴다 */
button.menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;border-radius:9px;min-height:42px;font-weight:700;border:1px solid var(--line,#e4e6eb);background:#fff;padding:8px 13px;cursor:pointer;color:var(--ink,#17191e)}
button.menu-toggle:hover{border-color:#bdc7ee}
button.menu-toggle:focus-visible{outline:3px solid var(--blue,#2f55ff);outline-offset:3px}
button.menu-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* shell이 띄운 버튼(topbar가 없는 페이지) — 화면 위에 떠서 어느 페이지든 메뉴에 닿게 한다 */
body>button.menu-toggle{position:fixed;top:14px;left:14px;z-index:6}

@media(max-width:1170px){
  .sidebar{padding:25px 13px 14px}
  .brand{font-size:16px;gap:7px}
  .brand img{width:32px;height:32px}
}
@media(max-width:850px){
  .brand{font-size:14px;padding:0}
  .nav-item{font-size:11px;padding:11px 8px}
}
@media(max-width:600px){
  .sidebar{display:none;position:fixed;inset:0 auto 0 0;width:min(290px,83vw);z-index:5;box-shadow:0 0 0 100vmax #11182770;padding:26px 20px;height:100vh}
  .menu-open .sidebar{display:block}
  .sidebar .brand{font-size:18px}
  .nav-item{font-size:13px}
  button.menu-toggle{display:inline-flex}
}