/* RF2 틀 -- the Portal's frame in the redesign (명세 5절, 6.8, 8.14, 8.19): the side bar (brand, company card, menus
   under their groups, the account and the connection's dot), the white sheet of the page with its top line (heading,
   tabs, ⌘K slot, bell, "?"), the 안쪽 목차 beside the page, the small windows of the top line and the account menu,
   용어 사전 as a wide panel, the frame's own states, the narrow screen and the sign-in page. Class names are click.css's
   with the parts' prefix (lx-, redesign-rf1.css). Only RF2 writes here; index.html links it after the parts. */

/* Gate: the sign-in page and the console are never drawn together (app.js gate block). */
html[data-portal-gate]:not([data-portal-gate="open"]) .lx-app{display:none}
html[data-portal-gate="open"] .lx-login{display:none}
html:not([data-portal-gate="checking"]) .lx-login-checking{display:none}
html[data-portal-roles="pending"] #menu-snav{visibility:hidden}

/* ---------- 틀: 왼쪽 메뉴 + 흰 본문 한 장 ---------- */
body{background:var(--ds-bg);word-break:keep-all;overflow-wrap:break-word}
.lx-app{--side:236px;display:flex;min-height:100vh;background:var(--ds-bg);color:var(--ds-text);font-family:var(--ds-font)}
.lx-app .lx-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lx-side{position:sticky;top:0;flex:0 0 var(--side);width:var(--side);height:100vh;display:flex;flex-direction:column;padding:14px 12px 12px;overflow-y:auto;background:var(--ds-bg)}
.lx-brand{display:flex;align-items:center;gap:9px;height:36px;padding:0 8px;color:var(--ds-text);font-size:16px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.lx-brand img{width:22px;height:22px}
.lx-org{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 4px;padding:8px 10px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface)}
.lx-org:has(#workspace-company:empty){visibility:hidden}
.lx-org-t{min-width:0}
/* Its words wait (their place kept) until the sign-in mode is read (auth.js data-auth-mode). */
.lx-org:not([data-auth-mode]) .lx-org-t{visibility:hidden}
.lx-org b{display:block;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.lx-org small{display:block;color:var(--ds-text-3);font-size:13px}
.lx-org-caret{display:none;color:var(--ds-text-3)}
.lx-org[data-switchable]{cursor:pointer}
.lx-org[data-switchable] .lx-org-caret{display:block}
.lx-org[data-switchable]:hover{border-color:var(--ds-line-strong)}
.lx-org:has(select:focus-visible){outline:2px solid var(--ds-focus);outline-offset:2px}
/* The company's choice lies over the card, the card's words seen through it (명세 5절: 누르면 회사를 고른다). */
.lx-org-pick{position:absolute;inset:0;display:block;margin:0}
.lx-org-pick select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.lx-nav{display:flex;flex-direction:column;gap:1px}
/* The shell's moves are links: the shared button rules' fade on hover, and the bell's two links in the size their row had as buttons. */
a:is(.lx-nav-i,.lx-tab,.lx-snav-i,.lx-ni,.lx-menu-i){transition:background-color .12s cubic-bezier(.2,.7,.2,1),border-color .12s cubic-bezier(.2,.7,.2,1),color .12s cubic-bezier(.2,.7,.2,1)}
#issue-bell-panel a.lx-lk{font-size:13px;line-height:normal;font-variant-numeric:normal;font-feature-settings:normal}
.lx-nav-g{margin:14px 10px 4px;color:var(--ds-text-3);font-size:12px;font-weight:600;letter-spacing:.02em}
.lx-nav-g[hidden]{display:none}
button.lx-nav-i,a.lx-nav-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;margin:0;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);font:500 14px/1.5 var(--ds-font);text-align:left;box-shadow:none;cursor:pointer;text-decoration:none}
button.lx-nav-i:hover,a.lx-nav-i:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
button.lx-nav-i.active,a.lx-nav-i.active{background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-text);font-weight:650;box-shadow:var(--ds-shadow),0 0 0 1px var(--ds-line)}
button.lx-nav-i.active .lx-i,a.lx-nav-i.active .lx-i{color:var(--ds-accent)}
.lx-nav-i[hidden]{display:none}
.lx-nav-t{flex:1;min-width:0}
.lx-nav-n{margin-left:auto;min-width:22px;padding:0 6px;border-radius:999px;background:var(--ds-danger-soft);color:var(--ds-danger-text,#B3261E);font-size:12px;font-weight:650;line-height:20px;text-align:center}
.lx-nav-n[hidden]{display:none}
.lx-me{position:relative;display:flex;align-items:center;gap:6px;margin-top:auto;padding:10px 4px 4px;border-top:1px solid var(--ds-line)}
button.lx-me-btn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin:0;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--ds-text);font:inherit;text-align:left;box-shadow:none;cursor:pointer}
button.lx-me-btn:hover{background:var(--ds-surface-3)}
.lx-me-t{min-width:0}
.lx-me-t b{display:block;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.lx-me-t small{display:block;overflow:hidden;color:var(--ds-text-3);font-size:13px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.lx-av{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-size:12px;font-weight:700}
/* The connection: a dot beside the account; its words beside it only when something is wrong (명세 5절). */
.lx-health{display:flex;align-items:center;gap:6px;flex:none;max-width:100%;padding-right:6px}
.lx-health-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ds-neutral)}
.lx-health-dot[data-health="ok"]{background:var(--ds-ok)}
.lx-health-dot[data-health="partial"],.lx-health-dot[data-health="signed-out"]{background:var(--ds-caution)}
.lx-health-dot[data-health="failed"]{background:var(--ds-danger)}
.lx-health-t{color:var(--ds-caution-text,#8F4A0B);font-size:13px}
.lx-me:has(.lx-health-t:not(.sr-only)){flex-wrap:wrap}
.lx-me:has(.lx-health-t:not(.sr-only)) .lx-health{order:3;width:100%;padding:2px 6px 0}

.lx-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;border:1px solid var(--ds-line);border-radius:14px;background:var(--ds-surface)}
.lx-top{position:sticky;top:0;z-index:30;border-radius:13px 13px 0 0;background:var(--ds-surface);display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:60px;padding:10px 28px;border-bottom:1px solid var(--ds-line)}
.lx-place{display:flex;align-items:center;gap:6px;min-width:0}
/* A screen's own small line beside the heading (portalShell.placeSlot): empty, it takes no room. */
.lx-place-slot{display:flex;align-items:center;gap:8px;margin-left:6px;min-width:0;color:var(--ds-text-2);font-size:12px;white-space:nowrap}
.lx-place-slot:empty{display:none}
.lx-crumb{display:none;align-items:center;gap:6px;margin:0;color:var(--ds-text-3);font-size:14px;font-weight:500;white-space:nowrap}
.lx-crumb[data-crumb-shown]{display:flex}
.lx-crumb[data-crumb-back]{color:var(--ds-accent-text);cursor:pointer}
.lx-crumb[data-crumb-back]:hover{text-decoration:underline}
.lx-h1{margin:0;color:var(--ds-text);font-size:var(--ds-fs-xl);font-weight:700;letter-spacing:-.02em;line-height:1.3;white-space:nowrap}
.lx-tabs-host{display:contents}
.lx-tabs{display:flex;flex-wrap:wrap;gap:2px}
.lx-tabs[hidden]{display:none}
button.lx-tab,a.lx-tab{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);font:500 14px/1.5 var(--ds-font);white-space:nowrap;box-shadow:none;cursor:pointer;text-decoration:none}
button.lx-tab:hover,a.lx-tab:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
button.lx-tab.active,a.lx-tab.active{background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-text);font-weight:650}
.lx-tab[hidden],.lx-snav-i[hidden]{display:none}
.lx-tab .lx-n,.lx-snav-i .lx-n{color:var(--ds-text-3);font-size:13px;font-weight:500}
.lx-util{display:flex;align-items:center;gap:6px;margin-left:auto}
/* 찾기 · Click에게 묻기 ⌘K (명세 5절 .cmd): RM4 draws the button into #click-ask-slot (click-ask.js); its look in the top
   line is the frame's. The older sheet drew it as a 36px icon (style.css #click-ask-open); under 900px it stays one. */
@media(min-width:901px){
  html:not([data-modules="failed"]):not([data-modules="partial"]) .lx-util #click-ask-slot:empty[data-opener="awaited"]{width:300px;height:34px}
  /* The box gives way before the top line breaks (a screen's place beside the heading, a row of tabs): from 300px
     down to 160px, its words cut with an ellipsis. */
  .lx-util{flex:1 1 244px;min-width:0;justify-content:flex-end}
  .lx-util #click-ask-slot{display:flex;flex:0 1 300px;min-width:160px}
  .lx-util #click-ask-slot[hidden]{display:none}
  .lx-util #click-ask-slot:empty:not([data-opener="awaited"]){flex:none;min-width:0}
  .lx-util #click-ask-open{display:flex;align-items:center;gap:8px;width:100%;max-width:100%;height:34px;margin:0;padding:0 10px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface-2);box-shadow:none;color:var(--ds-text-3);font:400 14px/1 var(--ds-font);text-align:left;overflow:hidden;cursor:pointer}
  .lx-util #click-ask-open[hidden]{display:none}
  .lx-util #click-ask-open:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-2);color:var(--ds-text-2)}
  .lx-util #click-ask-open::before{flex:none;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E") center/16px no-repeat}
  .lx-util #click-ask-open [data-click-cmd-label]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lx-util #click-ask-open .lt-kbd{flex:none;margin-left:auto;padding:1px 6px;border:1px solid var(--ds-line);border-radius:6px;background:var(--ds-surface);color:var(--ds-text-3);font:500 12px var(--ds-font-mono,ui-monospace,monospace)}
}
.lx-pip{position:absolute;top:7px;right:8px;width:7px;height:7px;border:1.5px solid var(--ds-surface);border-radius:50%;background:var(--ds-danger)}
.lx-pip[hidden]{display:none}
.lx-nav-toggle{display:none!important}
/* The bar under the top line while a read is on its way (app.js wait block), and the page under it. */
.lx-main .shell-wait{margin:0 0 -3px;border-radius:0}
.lx-split{display:flex;flex:1;min-height:0}
main.lx-page{flex:1 1 0;min-width:0;max-width:none;margin:0;padding:24px 28px 40px}
/* 안쪽 목차 (명세 5절): LLM Gateway and 설정's screens in named groups, beside the page. A group's name is a head that
   does nothing (명세 16 10-18 16:5x): 12px/700 and spaced, over a line and 16px above all but the first, no hover; its
   screens 14px/500 set in 12px past it, the one open on a tint with a 2px bar at its left. 개요, above the groups, stands
   at the head's edge with the first group's line under it. */
.lx-snav{flex:0 0 212px;display:flex;flex-direction:column;gap:1px;padding:16px 12px 24px;border-right:1px solid var(--ds-line)}
.lx-snav[hidden],.lx-snav-list[hidden]{display:none}
.lx-snav-list{display:flex;flex-direction:column;gap:1px;position:sticky;top:12px}
.lx-snav-g{margin:16px 10px 6px;padding-top:12px;border-top:1px solid var(--ds-line);color:var(--ds-text-3);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.3;cursor:default;user-select:none}
.lx-snav-g:first-child{margin-top:0;padding-top:0;border-top:0}
.lx-snav-g[hidden]{display:none}
button.lx-snav-i,a.lx-snav-i{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;margin:0;padding:5px 10px;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);font:500 14px/1.5 var(--ds-font);text-align:left;box-shadow:none;cursor:pointer;text-decoration:none}
button.lx-snav-i:hover,a.lx-snav-i:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.lx-snav-g~button.lx-snav-i{padding-left:22px}
.lx-snav-g~a.lx-snav-i{padding-left:22px}
button.lx-snav-i.active{border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--ds-accent) 12%,transparent);box-shadow:inset 2px 0 0 var(--ds-accent);color:var(--ds-text);font-weight:650}
a.lx-snav-i.active{border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--ds-accent) 12%,transparent);box-shadow:inset 2px 0 0 var(--ds-accent);color:var(--ds-text);font-weight:650}
/* A page's own frame (its module not come, the server not reached: 명세 6.8). */
#shell-offline.lx-note{margin:0 0 16px}
#shell-offline[hidden]{display:none}
/* What a sign-in or an invitation came to (app.js #auth-outcome), over the page it arrived at. */
.lx-auth-outcome{margin:0 0 16px}
/* The top line goes up with the page (명세 5절): a list's head that stays stands at the window's top, not under the older
   sticky header's 64px (screens-agents.css; RF1 may move this into that sheet). */
.lx-app .ml-table thead th{top:0}
#module-load-status{margin:0 0 16px}
.module-pending.lx-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius);color:var(--ds-text-3);text-align:center}
.module-pending.lx-empty b{color:var(--ds-text);font-weight:600}
/* The tooltip: a small dark box (명세 6.8). */
#app-tooltip.app-tooltip{border:0;border-radius:8px;background:#0F1728;color:#F5F6F8;box-shadow:var(--ds-shadow-pop);font-size:13px;line-height:1.5}

/* ---------- 위쪽 한 줄의 작은 창과 계정 메뉴 ---------- */
.lx-pop-wrap{position:relative;display:inline-flex}
.lx-pop{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:392px;max-width:calc(100vw - 32px);border:1px solid var(--ds-line);border-radius:14px;background:var(--ds-surface);color:var(--ds-text);box-shadow:var(--ds-shadow-pop)}
.lx-pop[hidden]{display:none}
.lx-pop-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.lx-pop-t{margin:0;font-size:var(--ds-fs-lg);font-weight:650}
/* What a panel's screen puts beside its title (the bell's 새 알림 / 전체, RA11): the right end of the head. */
.lx-pop-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.lx-pop-tools:empty{display:none}
.lx-pop-list{max-height:min(520px,60vh);overflow-y:auto;border-top:1px solid var(--ds-line)}
button.lx-ni,a.lx-ni{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;width:100%;margin:0;padding:12px 16px;border:0;border-bottom:1px solid var(--ds-line);border-radius:0;background:transparent;color:var(--ds-text);font:inherit;text-align:left;box-shadow:none;cursor:pointer;text-decoration:none}
button.lx-ni.lx-new,a.lx-ni.lx-new{background:#FAFBFF}
button.lx-ni:hover,a.lx-ni:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.lx-ni b{display:block;font-weight:600}
.lx-ni small{display:block;color:var(--ds-text-3);font-size:13px}
.lx-pipdot{width:7px;height:7px;margin:7px 0 0 4px;border-radius:50%;background:var(--ds-accent)}
.lx-bell-note{margin:0;padding:14px 16px;color:var(--ds-text-3);font-size:13px}
.lx-pop-f{display:flex;justify-content:space-between;gap:12px;padding:10px 16px}
.lx-pop button.lx-lk,.lx-help button.lx-lk{margin:0;padding:0;border:0;background:transparent;color:var(--ds-accent-text);font:500 13px var(--ds-font);box-shadow:none;cursor:pointer}
.lx-pop button.lx-lk:hover{background:transparent;text-decoration:underline}
.lx-pop button.lx-lk[hidden]{display:none}
.lx-help{width:320px;padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lx-help-line{margin:0;color:var(--ds-text-2);font-size:14px;line-height:1.55}
.lx-help-line[hidden]{display:none}
.lx-menu{position:absolute;z-index:40;left:0;right:auto;width:max-content;min-width:100%;max-width:min(320px,calc(100vw - 16px));bottom:calc(100% + 6px);display:flex;flex-direction:column;padding:6px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.lx-menu[hidden]{display:none}
.lx-account-who{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--ds-line)}
.lx-account-who b{font-weight:600;font-size:14px}
.lx-account-who small{display:flex;flex-wrap:wrap;column-gap:4px;color:var(--ds-text-3);font-size:13px}
.lx-account-who small span{min-width:0;overflow-wrap:anywhere}
button.lx-menu-i,a.lx-menu-i{display:flex;align-items:center;width:100%;min-height:34px;margin:0;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ds-text);font:500 14px var(--ds-font);text-align:left;box-shadow:none;cursor:pointer;text-decoration:none}
button.lx-menu-i:hover,a.lx-menu-i:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
button.lx-menu-i[hidden],a.lx-menu-i[hidden]{display:none}

/* ---------- 용어 사전: 넓은 오른쪽 패널 ---------- */
/* 명세 5절: the panel opens under the top line (찾기, 알림, 도움말), never over it. */
dialog.lx-gloss{position:fixed;inset:69px 0 0 auto;width:min(540px,100vw);max-width:100vw;height:calc(100vh - 69px);max-height:calc(100vh - 69px);margin:0;padding:0;border:0;border-left:1px solid var(--ds-line);border-radius:0;background:var(--ds-surface);color:var(--ds-text);box-shadow:var(--ds-shadow-pop);overflow:hidden}
dialog.lx-gloss::backdrop{background:rgba(15,23,40,.24)}
.lx-gloss form{display:flex;flex-direction:column;height:100%;margin:0}
.lx-gloss-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 22px 14px;border-bottom:1px solid var(--ds-line)}
.lx-gloss-t{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.lx-gloss-body{flex:1;overflow-y:auto;padding:8px 22px 32px}
.lx-gloss-body section{padding:14px 0;border-bottom:1px solid var(--ds-line)}
.lx-gloss-body h3{margin:0 0 8px;color:var(--ds-text-3);font-size:13px;font-weight:600}
.lx-gloss-body .glossary-item{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px 14px;padding:6px 0;border:0}
.lx-gloss-body .glossary-item b{font-weight:600}
.lx-gloss-body .glossary-item p{margin:0;color:var(--ds-text-2);font-size:14px}
.lx-gloss-f{display:flex;justify-content:flex-end;padding:12px 22px;border-top:1px solid var(--ds-line)}

/* ---------- 좁은 화면(900px 아래): 메뉴를 접고 버튼으로 연다 ---------- */
.lx-backdrop{display:none}
@media(max-width:900px){
  .lx-app{display:block}
  .lx-side{position:fixed;z-index:60;top:0;bottom:0;left:0;width:272px;max-width:85vw;height:auto;background:var(--ds-bg);box-shadow:var(--ds-shadow-pop);transform:translateX(-105%)}
  body.nav-moving .lx-side{transition:transform .24s ease}
  body.nav-open .lx-side{transform:none}
  .lx-backdrop:not([hidden]){display:block;position:fixed;z-index:55;inset:0;background:rgba(15,23,40,.32)}
  .lx-nav-toggle{display:grid!important}
  /* The button that opened the menu stays over it, so pressing it again closes the menu (명세 5절: 지금처럼 메뉴를
     접고 버튼으로 연다; the older sheet kept it there the same way). */
  body.nav-open .lx-nav-toggle{position:relative;z-index:61;background:var(--ds-surface)}
  /* The top line is a sticky stacking context (z-index 30), so the button's own z-index left it under the panel's
     logo (X468): once the panel has slid in, it and its backdrop leave out the button's square (--lx-nav-hole,
     app.js holeNav), and the press is the button's. */
  body.nav-open:not(.nav-moving) .lx-side,body.nav-open:not(.nav-moving) .lx-backdrop:not([hidden]){clip-path:var(--lx-nav-hole,none)}
  .lx-main{margin:0;border:0;border-radius:0;min-height:100vh}
  .lx-top{gap:8px 12px;padding:10px 16px}
  .lx-util{gap:2px}
  .lx-split{display:block}
  .lx-place{flex-wrap:wrap;max-width:100%}
  /* A long name (a framework's, an entity's: portalShell.setPath) stands whole on the lines it needs, never past the screen. */
  .lx-h1,.lx-crumb{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .lx-place-slot{flex-wrap:wrap;white-space:normal}
  /* The menu button, the page's name and the icons stand on one line and the tabs on their own under it (명세 5절,
     user review 10-06): a row of tabs no longer pushes the bell and "?" to a line of their own. */
  .lx-tabs-host>.lx-tabs{order:1;flex:1 0 100%;min-width:0}
  /* Reuse the shell's menu toggle, selection close and Escape focus return on phones. The
     long settings menu opens over the page instead of pushing the first action offscreen. */
  .lx-snav{position:relative;z-index:auto;flex-direction:column;padding:8px 16px;border-right:0;border-bottom:1px solid var(--ds-line)}
  .lx-snav[data-snav-open]{z-index:36}
  .lx-snav>.lx-snav-fold{display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;min-height:36px;padding:6px 10px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface);color:var(--ds-text-2);font:inherit}
  .lx-snav>.lx-snav-fold::after{content:attr(aria-label)}
  .lx-snav:not([data-snav-open])>.lx-snav-list{display:none}
  .lx-snav[data-snav-open]>.lx-snav-list:not([hidden]){position:absolute;top:100%;left:0;right:0;max-height:65vh;overflow-y:auto;flex-direction:column;gap:2px;padding:12px 16px;background:var(--ds-surface);border-bottom:1px solid var(--ds-line);box-shadow:var(--ds-shadow-pop)}
  main.lx-page{padding:20px 16px 32px}
  .lx-pop{position:fixed;top:64px;left:12px;right:12px;width:auto;max-width:none}
}
@media(prefers-reduced-motion:reduce){body.nav-moving .lx-side{transition:none}}

/* ---------- 로그인(명세 8.14): 왼쪽 어두운 무대, 오른쪽 양식 ---------- */
/* Sizes follow the window (명세 8.14, 사용자 결정 10-13, 저녁에 키움), on this page alone: --lx-login-grow is how far the form
   has grown past its 420px, 0px at 1280 wide and under, 40px at 1440, 140px at 1920, and 220px (the stop) from 2560, a
   straight line between each pair. Every size below is its 1280 value plus its own share of that
   (calc(<1280 value> + grow*<range>/220)), so all of them grow together, the same for each way of signing in (조직 계정,
   아이디 · 비밀번호, 관리 서버 API 키). A window under 720px high stays at the 1280 sizes, the form whole on it.
   The image and the white side stand 45:55 (their bases are 45% and 55% of 900px and they grow 45:55, so the ratio is the
   same at every width they stand side by side), the form in the middle of the white side; under 900px they stack. */
.lx-login{--lx-login-grow:clamp(0px,min(25vw - 320px,20.8333vw - 260px,12.5vw - 100px),220px);display:flex;flex-wrap:wrap;min-height:100vh;background:#FFFFFF;color:var(--ds-text);font-family:var(--ds-font)}
@media(max-height:719px){.lx-login{--lx-login-grow:0px}}
.lx-login-stage{position:relative;flex:45 1 405px;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(48px + var(--lx-login-grow)*48/220);overflow:hidden;background:var(--ds-stage-bg,#0B1330);color:#FFFFFF}
.lx-login-say{position:relative;z-index:1;max-width:calc(520px + var(--lx-login-grow)*400/220)}
.lx-login-lede{margin:0;color:#FFFFFF;font-size:calc(34px + var(--lx-login-grow)*26/220);font-weight:700;letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
/* F6: the title is these two lines at every width, each kept whole */
.lx-login-lede>span{display:block;white-space:nowrap}
.lx-login-sub{word-break:keep-all;margin:calc(12px + var(--lx-login-grow)*8/220) 0 0;color:#AAB6D8;font-size:calc(15px + var(--lx-login-grow)*7/220)}
.lx-login-side{flex:55 1 495px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 32px}
.lx-login-form{width:100%;max-width:calc(420px + var(--lx-login-grow));display:flex;flex-direction:column;gap:calc(22px + var(--lx-login-grow)*12/220)}
.lx-login-brand{display:flex;align-items:center;gap:calc(12px + var(--lx-login-grow)*4/220);margin-bottom:calc(8px + var(--lx-login-grow)*3/220);font-size:calc(22px + var(--lx-login-grow)*10/220);font-weight:700;letter-spacing:-.02em}
.lx-login-brand img{width:calc(32px + var(--lx-login-grow)*14/220);height:auto}
.lx-login-h{margin:0;font-size:calc(28px + var(--lx-login-grow)*12/220);font-weight:700;letter-spacing:-.03em}
.lx-login-checking{margin:0;padding:calc(12px + var(--lx-login-grow)*4/220) calc(16px + var(--lx-login-grow)*6/220);border-radius:10px;background:var(--ds-surface-2);color:var(--ds-text-2);font-size:calc(15px + var(--lx-login-grow)*3/220)}
.lx-login-body{display:flex;flex-direction:column;gap:calc(20px + var(--lx-login-grow)*10/220);margin:0}
.lx-login-body[hidden]{display:none}
.lx-login-note{margin:0;padding:calc(12px + var(--lx-login-grow)*4/220) calc(16px + var(--lx-login-grow)*6/220);border-radius:10px;background:var(--ds-surface-2);color:var(--ds-text-2);font-size:calc(14px + var(--lx-login-grow)*3/220)}
.lx-login-note:empty{display:none}
.lx-login-note:not([data-auth-message="needed"],[data-auth-message="sign-in"],[data-auth-message="signed-out"]){background:var(--ds-caution-soft);color:var(--ds-caution-text,#8F4A0B)}
.lx-login-legacy{color:var(--ds-text-3);font-size:calc(14px + var(--lx-login-grow)*3/220)}
.lx-login-legacy[hidden]{display:none}
.lx-login-fields{display:flex;flex-direction:column;gap:calc(22px + var(--lx-login-grow)*12/220)}
.lx-login-fields[hidden]{display:none}
label.lx-login-field{display:flex;flex-direction:column;gap:calc(8px + var(--lx-login-grow)*3/220);margin:0;color:var(--ds-text-2);font-size:calc(14px + var(--lx-login-grow)*3/220);font-weight:600}
.lx-login-field input{width:100%;height:calc(52px + var(--lx-login-grow)*16/220);margin:0;padding:0 calc(12px + var(--lx-login-grow)*4/220);border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:400 calc(16px + var(--lx-login-grow)*5/220) var(--ds-font)}
.lx-login-secret{position:relative;display:block}
.lx-login-secret input{padding-right:calc(52px + var(--lx-login-grow)*16/220)}
button.lx-login-show{position:absolute;top:calc(6px + var(--lx-login-grow)*2/220);right:calc(6px + var(--lx-login-grow)*2/220);display:grid;place-items:center;width:calc(40px + var(--lx-login-grow)*12/220);height:calc(40px + var(--lx-login-grow)*12/220);margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);box-shadow:none;cursor:pointer}
button.lx-login-show:hover,button.lx-login-show[aria-pressed="true"]{background:var(--ds-surface-3)}
.lx-login-show svg{width:calc(18px + var(--lx-login-grow)*6/220);height:calc(18px + var(--lx-login-grow)*6/220);fill:none;stroke:currentColor;stroke-width:1.5}
.lx-login-error{margin:calc(-8px - var(--lx-login-grow)*4/220) 0 0;color:var(--ds-danger-text,#B3261E);font-size:calc(14px + var(--lx-login-grow)*3/220)}
.lx-login-error[hidden]{display:none}
button.lx-login-go{height:calc(52px + var(--lx-login-grow)*16/220);margin:0;padding:0 12px;border:1px solid var(--ds-accent);border-radius:8px;background:var(--ds-accent);color:#FFFFFF;font:600 calc(16px + var(--lx-login-grow)*5/220) var(--ds-font);cursor:pointer}
button.lx-login-go:hover{background:var(--ds-accent-strong);border-color:var(--ds-accent-strong)}
button.lx-login-go:disabled{opacity:.5;cursor:not-allowed}
button.lx-login-back{height:calc(48px + var(--lx-login-grow)*14/220);margin:0;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:600 calc(15px + var(--lx-login-grow)*4/220) var(--ds-font)}
button.lx-login-back:hover{background:var(--ds-surface-2)}
.lx-login-back[hidden],.lx-login-unset[hidden]{display:none}
.lx-login-unset{margin:0;color:var(--ds-text-3);font-size:calc(14px + var(--lx-login-grow)*3/220)}
@media(max-width:900px){.lx-login-stage{min-height:220px;padding:28px}.lx-login-lede{font-size:26px}.lx-login-side{padding:32px 16px}}
/* X203 (UM2370/002): the bell's panel is 392px in every window; the window less 24px only keeps it on the page when the window is narrower than 416px (명세 8.19). */
#issue-bell-panel.lx-pop{width:392px;max-width:calc(100vw - 24px)}
@media(max-width:600px){#issue-bell-panel.lx-pop{left:auto;right:12px;width:392px;max-width:calc(100vw - 24px)}}

/* Language (T12-4): the sign-in page's and the account menu's choice, one select beside its name. */
.lx-login-lang{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;color:var(--ds-text);font:500 14px var(--ds-font)}
.lx-login-lang select,.lx-menu-lang select{min-height:32px;padding:4px 8px;border:1px solid var(--ds-border,#CBD5E1);border-radius:8px;background:var(--ds-bg,transparent);color:var(--ds-text);font:500 14px var(--ds-font)}
.lx-menu-lang{justify-content:space-between;gap:8px;cursor:default}

/* Settings finder owns folding separately from the shell's permission-hidden rows. */
button.lx-snav-g[data-snav-group-fold]{display:flex;align-items:center;justify-content:space-between;gap:8px;border-right:0;border-bottom:0;border-left:0;border-radius:0;background:transparent;box-shadow:none;font-family:inherit;text-align:left;cursor:pointer}
button.lx-snav-g[data-snav-group-fold]::after{content:'⌄';font-size:14px}
button.lx-snav-g[data-snav-group-fold][aria-expanded="false"]::after{content:'›'}
button.lx-snav-g[data-snav-group-fold][hidden],.lx-snav-i[data-snav-collapsed]{display:none}