/* 상단 빠른 확인 메뉴. 작은 화면에서는 같은 내용을 하단 패널로 연다. */
.header-menu[hidden],.header-menu-backdrop[hidden]{display:none}
.header-menu{position:fixed;z-index:90;top:var(--menu-top);right:var(--menu-right);width:min(400px,calc(100vw - 32px));max-height:var(--menu-available);overflow:auto;overscroll-behavior:contain;margin:0;padding:0;background:var(--paper);border:1px solid rgba(32,45,56,.09);border-radius:16px;box-shadow:0 1px 2px rgba(20,32,42,.04),0 14px 34px -10px rgba(20,32,42,.2);color:var(--ui-ink)}
.header-menu.is-account{width:min(312px,calc(100vw - 32px));padding-bottom:6px}
.header-menu-backdrop{display:none}
.header-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 6px 0 18px}
.header-menu-heading h2{font-size:15px;font-weight:650;line-height:1.4;letter-spacing:-.02em;margin:0}
.header-menu-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:11px;color:var(--ui-ink-3)}
.header-menu-close:hover{background:var(--ui-surface-2)}
.header-menu svg{width:19px;height:19px;flex-shrink:0}
.header .nav-actions>#account{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:var(--ui-radius-s);white-space:nowrap}
.header .nav-actions>#account svg{width:14px;height:14px}
.header .nav-actions>#account[aria-expanded="true"],.notification-trigger[aria-expanded="true"]{background:var(--ui-surface-2)}
.account-menu-person{display:flex;gap:12px;align-items:center;padding:6px 18px 14px}
.account-menu-person>div{min-width:0;overflow-wrap:anywhere}
.account-menu-person strong{font-size:14px;font-weight:650;display:block;line-height:1.6}
.account-menu-person small{display:block;color:var(--ui-ink-3);font-size:12px;margin-top:3px}
.account-menu-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--ui-accent);color:#fff;font-size:15px;font-weight:650}
.account-menu-credit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 6px 6px;padding:12px 12px 12px 14px;border-radius:12px;background:var(--ui-surface);box-shadow:inset 0 0 0 1px rgba(32,45,56,.07);font-size:13px;color:var(--ui-ink-2);min-height:52px;transition:background .12s ease}
.account-menu-credit>[data-account-balance]{margin-left:auto;font-size:12px;color:var(--ui-ink-3)}
.account-menu-credit strong{font-size:17px;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.account-menu-credit>svg{width:14px;height:14px}
.account-menu-link{display:flex;align-items:center;gap:12px;width:calc(100% - 12px);min-height:44px;margin:0 6px;padding:10px 12px;border-radius:10px;text-align:left;font-size:14px;line-height:1.5;color:var(--ui-ink-2);transition:background .12s ease,color .12s ease}
.account-menu-link>span{flex:1}
.header-menu .account-menu-link>svg{width:18px;height:18px;color:var(--ui-ink-3);transition:color .12s ease}
.account-menu-credit:hover,.account-menu-link:hover,.account-menu-link:focus-visible{background:var(--ui-surface-2);color:var(--ui-ink)}
.account-menu-link:hover>svg,.account-menu-link:focus-visible>svg{color:var(--ui-ink)}
.account-menu-link:focus-visible,.account-menu-credit:focus-visible{outline-offset:-2px}
.account-menu-section+.account-menu-section,.account-menu-footer{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--ui-line)}
.account-menu-footer .account-menu-link{color:var(--ui-ink-3)}
/* 작업 공간 칸 — 지금 고른 작업 공간과 그에 따라 달라지는 요금제·AI 사용량·프로젝트 파일 */
.account-menu-workspace:empty{display:none}
.account-ws{margin:0 6px 6px;padding:12px 14px 14px;border-radius:12px;background:var(--ui-surface);box-shadow:inset 0 0 0 1px rgba(32,45,56,.07);font-size:13px;color:var(--ui-ink-2)}
.account-ws-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.account-ws-label,.account-menu-group{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ui-ink-3)}
.account-ws-toggle{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-right:-6px;padding:4px 8px;border-radius:var(--ui-radius-s);font-size:12px;font-weight:600;color:var(--ui-link)}
.account-ws-toggle:hover{background:var(--ui-surface-2)}
.account-ws-toggle svg{width:14px;height:14px;transition:transform .15s ease}
.account-ws-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.account-ws-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:2px 0 0}
.account-ws-name strong{font-size:15px;font-weight:650;color:var(--ui-ink);overflow-wrap:anywhere}
.account-ws-name span{font-size:12px;color:var(--ui-ink-3)}
.account-ws-list{list-style:none;margin:10px -6px 0;padding:4px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ui-line)}
.account-ws-list[hidden]{display:none}
.account-ws-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border-radius:8px;text-align:left;font-size:13px;color:var(--ui-ink-2)}
.account-ws-list button:hover{background:var(--ui-surface-2);color:var(--ui-ink)}
.account-ws-option{flex:1;min-width:0;overflow-wrap:anywhere}
.account-ws-list small{font-size:11px;color:var(--ui-ink-3);white-space:nowrap}
.account-ws-dot{width:14px;height:14px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ui-line-strong)}
.account-ws-list button[aria-pressed="true"]{color:var(--ui-ink);font-weight:600}
.account-ws-list button[aria-pressed="true"] .account-ws-dot{box-shadow:inset 0 0 0 4px var(--ui-accent)}
.account-ws-facts{display:grid;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--ui-line)}
.account-ws-facts>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px}
.account-ws-facts dt{font-size:12px;color:var(--ui-ink-3)}
.account-ws-facts dd{margin:0;text-align:right;font-size:12px;color:var(--ui-ink-3);font-variant-numeric:tabular-nums}
.account-ws-facts dd strong{font-size:14px;font-weight:650;color:var(--ui-ink)}
.account-ws-facts dd a{font-size:13px;font-weight:600;color:var(--ui-link)}
.account-ws-facts dd.account-ws-bar{grid-column:1/-1;display:grid;gap:4px;text-align:left}
.account-ws-facts small{font-size:11px;color:var(--ui-ink-3)}
.account-ws-meter{display:block;height:6px;border-radius:var(--ui-pill);overflow:hidden;background:var(--ui-surface-2);box-shadow:inset 0 0 0 1px rgba(32,45,56,.05)}
.account-ws-meter>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--ui-accent)}
.account-ws-warn{font-size:11px;font-weight:600;color:#a03c2a}
.account-ws-note{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--ui-ink-3)}
.account-ws-state{margin:4px 0 0;font-size:12px;color:var(--ui-ink-3)}
.account-ws .text-button{margin-top:6px;font-size:12px}
.account-menu-group{margin:4px 18px 2px;padding-top:4px}
.account-menu-link>.account-menu-value{flex:0 0 auto;font-size:12px;color:var(--ui-ink-3);font-variant-numeric:tabular-nums}
.account-menu-value strong{font-size:14px;font-weight:650;color:var(--ui-ink)}
@keyframes header-menu-in{from{opacity:0;transform:translateY(-6px)}}
@media(min-width:761px){.header-menu:not([hidden]){animation:header-menu-in .16s cubic-bezier(.2,.7,.3,1)}}
@media(prefers-reduced-motion:reduce){.header-menu:not([hidden]){animation:none}.account-menu-link,.account-menu-credit,.header-menu .account-menu-link>svg,.account-ws-toggle svg{transition:none}}
.header-menu .notification-toolbar{gap:4px;padding:0 12px;border-top:0;flex-wrap:nowrap}
.header-menu .notification-filters{flex-wrap:nowrap;gap:0}
.header-menu .notification-toolbar button{padding:10px;font-size:12px;white-space:nowrap}
.header-menu .notification-tools button{font-size:11px}
.header-menu .notification-filters button[aria-pressed="true"]{color:var(--ui-ink);background:transparent;border-radius:0;box-shadow:inset 0 -2px var(--ui-ink)}
.header-menu .notification-status{font-size:12px;margin:10px 20px}
.header-menu .notification-list{border-top:0}
.header-menu .notification-row>a{padding:17px 20px;gap:12px;border-radius:0}
.header-menu .notification-row.is-unread{background:var(--ui-accent-soft)}
.header-menu .notification-symbol{width:30px;height:30px;font-size:17px;border-radius:var(--ui-radius-s);background:var(--paper);border:1px solid var(--ui-line)}
.header-menu .notification-symbol svg{width:17px;height:17px}
.header-menu .notification-content{gap:5px}
.header-menu .notification-title{font-size:13px;line-height:1.6;font-weight:500}
.header-menu .is-unread .notification-title{font-weight:650}
.header-menu .notification-post{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.header-menu .notification-meta{font-size:11px;gap:8px}
.header-menu .notification-meta>span:first-child,.header-menu .notification-excerpt,.header-menu .notification-arrow,.header-menu .notification-credit-detail{display:none}
.header-menu .notification-amount{font-size:16px}
.header-menu .notification-amount>span{font-size:12px}
.header-menu .notifications-empty{padding:32px 20px}
.header-menu .notifications-empty h2{font-size:16px}
.header-menu .notifications-empty p{font-size:13px}
.notification-preview-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;min-height:52px;font-size:13px;border-top:1px solid var(--ui-line)}
.notification-preview-all:hover{background:var(--ui-surface-2)}
.notification-return{display:flex;align-items:center;gap:8px;max-width:1320px;width:calc(100% - 48px);margin:24px auto 0;padding:8px 0;font-size:13px;color:var(--ui-link);text-align:left;min-height:44px}
.saved-page{max-width:1000px;min-height:60vh}
.saved-page .supplier-list{margin-top:24px}
@media(max-width:760px){
 body.header-menu-open{overflow:hidden}
 .header-menu,.header-menu.is-account{top:auto;right:0;left:0;bottom:0;width:100%;max-height:calc(100dvh - 24px);padding-bottom:env(safe-area-inset-bottom);border-radius:var(--ui-radius-l) var(--ui-radius-l) 0 0;border-bottom:0}
 .header-menu-backdrop{display:block;position:fixed;inset:0;background:rgba(20,32,42,.24);z-index:89}
 .header-menu-heading{padding:12px 18px 8px}
 .header-menu .notification-row>a{padding:15px 18px}
 .header-menu .notification-toolbar button{min-height:44px}
 .notification-return{margin-top:16px}
}
