@charset "utf-8";
/* The Portal's frame in the Click design (Click 포털 리디자인 1단계; design/click-portal HANDOFF 4절 셸·사이드바·전역 검색·알림,
   6절 반응형; prototype Click Portal.dc.html). redesign-rf2.css keeps the frame's structure and behaviour (the gate, the
   panels, the 안쪽 목차, the sign-in page); this sheet, read after it (portal-modules.json styles), gives the frame the
   design's look by click-tokens.css's tokens:
   - the side bar: the wordmark, the company card, the groups (mono number + name), 36px menus with the design's icons
     (click-icons.js; the open menu on the yellow tint with its icon filled), counts as ink pills, the account at its foot;
   - one page with no sheet around it: a 60px top line (group › menu, ⌘K, bell, "?") with the tabs as a 42px row under
     it, translucent and sticky, and the page under it in the design's room (--pad-x/--pad-y);
   - the small windows (bell, help, account) and the toast at the bottom middle in the design's ink, lines and shadow;
   - under 1200px the side bar is a 72px rail (icons, the bolt mark), under 768px a panel opened by the menu button
     (app.js narrowNav), the 768–900px band that redesign-rf2.css draws as a panel drawn as the rail instead.
   Click Design System (2단계, docs/design/DESIGN_SYSTEM.md 결정 기록): the side bar 200px and the top line 52px (brief
   §7), the page as wide as the window gives up to --content-max (no 1370px cap leaving a dead strip on a 1920 screen),
   and no zoom on a wide window (--lx-scale stays 1: a 1920 screen shows more, not the same larger). Kept: the bell's
   window 392px (X203), the 안쪽 목차 folded under 900px.
   The sign-in page is not the frame and keeps its own sheet. */

/* ---------- 틀 ---------- */
:root{--lx-scale:1;--lx-page-max:var(--content-max)}
body{background:var(--bg-app)}
.lx-app{--side:var(--sidebar-w);background:var(--bg-app);color:var(--ink);font-family:var(--font-sans)}
.ck-i{flex:none;width:20px;height:20px;fill:currentColor}

/* ---------- 사이드바 ---------- */
.lx-side{padding:0 12px 0;border-right:1px solid var(--border);background:var(--bg-sidebar)}
.lx-brand{flex:none;height:var(--header-h);gap:9px;padding:0 10px;color:var(--ink)}
.lx-brand-wm{display:block;flex:none;width:auto;height:26px}
.lx-brand-mark{display:none;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--brand-ink)}
.lx-brand-mark svg{display:block;width:11px;height:22px}
.lx-org{flex:none;margin:2px 0 10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.lx-org[data-switchable]:hover{border-color:var(--border-strong)}
.lx-org b{color:var(--ink);font-size:var(--fs-sm);font-weight:600}
.lx-org small{margin-top:1px;color:var(--muted);font-size:var(--fs-3xs)}
.lx-org .lx-org-caret{width:18px;height:18px;color:var(--faint)}
.lx-nav{flex:1 1 auto;min-height:0;gap:2px;padding:4px 0 12px;overflow-y:auto}
.lx-nav-g{display:flex;align-items:center;gap:7px;margin:14px 0 0;padding:4px 10px 6px;color:var(--muted);font-size:var(--fs-2xs);font-weight:600;letter-spacing:0}
/* A group's number (app.js MENU_ORDER no, data-nav-no) before its name, the name alone its words. */
.lx-nav-g[data-nav-no]::before{content:attr(data-nav-no);color:var(--faint);font-family:var(--font-mono);font-size:var(--fs-4xs);font-weight:500}
/* 설정 stands at the foot of the side bar, over the account (the design's 아래 묶음). */
a.lx-nav-i[data-menu="settings"]{margin-top:auto}
a.lx-nav-i,button.lx-nav-i{position:relative;gap:10px;height:36px;min-height:36px;padding:0 10px;border-radius:var(--r-ctl);color:var(--ink-2);font:500 var(--fs-sm)/1.5 var(--font-sans);white-space:nowrap}
a.lx-nav-i:hover,button.lx-nav-i:hover{background:var(--divider-soft)}
a.lx-nav-i.active,button.lx-nav-i.active{background:var(--primary-tint);color:var(--primary-ink);font-weight:600;box-shadow:none}
a.lx-nav-i .ck-i,button.lx-nav-i .ck-i{color:var(--muted)}
a.lx-nav-i.active .ck-i,button.lx-nav-i.active .ck-i{color:var(--primary)}
.lx-nav-i .ck-i-f,.lx-nav-i.active .ck-i-o{display:none}
.lx-nav-i.active .ck-i-f{display:block}
.lx-nav-t{overflow:hidden;text-overflow:ellipsis}
.lx-nav-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--brand-ink);color:var(--surface);font-size:var(--fs-3xs);font-weight:700;line-height:1}
.lx-me{flex:none;gap:6px;margin-top:0;padding:8px 0 12px;border-top:1px solid var(--divider)}
button.lx-me-btn{gap:10px;padding:6px}
button.lx-me-btn:hover{background:var(--divider-soft)}
.lx-av{width:32px;height:32px;background:var(--primary-tint);color:var(--primary-ink);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.lx-me-t b{color:var(--ink);font-size:var(--fs-sm);font-weight:600}
.lx-me-t small{color:var(--muted);font-size:var(--fs-3xs)}

/* ---------- 위쪽 줄과 탭 ---------- */
.lx-main{margin:0;border:0;border-radius:0;background:var(--bg-app)}
.lx-top{z-index:40;min-height:var(--header-h);gap:0 12px;padding:0 var(--pad-x);border-radius:0;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px)}
.lx-place{min-height:var(--header-h);gap:8px}
.lx-crumb{gap:8px;color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.lx-crumb .ck-i{width:16px;height:16px;color:var(--border-strong)}
.lx-place-g{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:var(--fs-sm);font-weight:400;white-space:nowrap}
.lx-place-g[hidden]{display:none}
.lx-place-g .ck-i{width:16px;height:16px;color:var(--border-strong)}
.lx-h1{color:var(--ink);font-size:var(--fs-section);font-weight:var(--fw-semibold);letter-spacing:-.01em}
.lx-tabs-host>.lx-tabs{order:1;flex:1 0 100%;flex-wrap:nowrap;gap:2px;min-width:0;margin:0 -10px;overflow-x:auto;scrollbar-width:none}
.lx-tabs-host>.lx-tabs::-webkit-scrollbar{display:none}
a.lx-tab,button.lx-tab{height:var(--tabs-h);margin:0 0 -1px;padding:0 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font:500 var(--fs-sm)/1 var(--font-sans)}
a.lx-tab:hover,button.lx-tab:hover{background:transparent;color:var(--ink)}
a.lx-tab.active,button.lx-tab.active{border-bottom-color:var(--primary);background:transparent;color:var(--ink);font-weight:600}
.lx-tab .lx-n{padding:1px 7px;border-radius:var(--r-pill);background:var(--divider-soft);color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-semibold)}
.lx-tab.active .lx-n{background:var(--primary-tint);color:var(--primary-ink)}
.lx-util{gap:4px}
.lx-top .lx-ibtn{width:var(--ctl-h);height:var(--ctl-h);border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-3)}
.lx-top .lx-ibtn:hover,.lx-top .lx-ibtn[aria-expanded="true"]{background:var(--divider-soft);color:var(--ink-2)}
.lx-top .lx-ibtn .ck-i{width:20px;height:20px}
.lx-pip{top:8px;right:9px;width:7px;height:7px;border:1.5px solid var(--surface);background:var(--st-unmanaged)}
/* 전역 검색 ⌘K (click-ask.js draws the button into #click-ask-slot). */
@media(min-width:901px){
  .lx-util #click-ask-slot{flex:0 1 clamp(200px,24vw,380px)}
  .lx-util #click-ask-open{gap:8px;height:var(--ctl-h);padding:0 8px 0 11px;border:1px solid var(--border);border-radius:9px;background:var(--bg-subtle);color:var(--muted);font:400 var(--fs-sm)/1 var(--font-sans)}
  .lx-util #click-ask-open:hover{border-color:var(--border-strong);background:var(--surface);color:var(--muted)}
  .lx-util #click-ask-open .lt-kbd{padding:2px 6px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--muted);font:500 11px var(--font-mono)}
}

/* ---------- 본문 ---------- */
main.lx-page{padding:var(--pad-y) var(--pad-x) 96px}
/* The width limit is redesign-rf1.css's, its two sides now the design's room (it said them as 2 × 28px). */
.lx-split>main.lx-page{max-width:calc(var(--content-max) + 2 * var(--pad-x))}

/* ---------- 알림 · 도움말 · 계정의 작은 창, 토스트 ---------- */
.lx-pop{border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-pop)}
.lx-pop-h{padding:14px 16px 10px}
.lx-pop-t{font-size:var(--fs-body);font-weight:var(--fw-bold)}
.lx-pop-list{border-top:0}
button.lx-ni,a.lx-ni{column-gap:12px;padding:12px 16px;border-top:1px solid var(--divider-soft);border-bottom:0;background:var(--surface)}
button.lx-ni:hover,a.lx-ni:hover{background:var(--select-bg)}
button.lx-ni.lx-new,a.lx-ni.lx-new{background:var(--primary-wash)}
.lx-ni b{color:var(--ink);font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.lx-ni small{margin-top:2px;color:var(--muted);font-size:var(--fs-2xs)}
.lx-pipdot{background:var(--brand-ink)}
.lx-pop-f{border-top:1px solid var(--divider-soft)}
.lx-menu{border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop)}
button.lx-menu-i:hover,a.lx-menu-i:hover{background:var(--divider-soft)}
.lx-toast{border-radius:10px;background:var(--brand-ink);color:var(--surface);box-shadow:var(--shadow-pop)}
dialog.lx-gloss{border-left:1px solid var(--border);box-shadow:var(--shadow-drawer)}

/* ---------- 키보드 포커스 (HANDOFF 8절) ---------- */
/* (not a [tabindex="-1"] the script focuses -- a dialog or region taking the focus on open, such as 발표 모드, draws no
   ring around the whole screen; browser_universe_present) */
.lx-app :is(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--select-ring);outline-offset:2px}

/* ---------- 1200px 아래: 아이콘 레일 ---------- */
@media(max-width:1199px) and (min-width:768px){
  .lx-app{--side:var(--sidebar-rail-w);display:flex}
  .lx-side{position:sticky;top:0;bottom:auto;left:auto;z-index:auto;width:var(--side);max-width:none;height:100vh;padding:0 12px;transform:none;box-shadow:none;clip-path:none}
  .lx-brand{justify-content:center;padding:0}
  .lx-brand-wm{display:none}
  .lx-brand-mark{display:grid}
  .lx-org{justify-content:center;padding:6px 0}
  .lx-org .lx-org-t{display:none}
  .lx-org:not([data-switchable]){display:none}
  .lx-nav-g{display:block;height:1px;margin:2px 8px 8px;padding:0;overflow:hidden;background:var(--divider);color:transparent;font-size:0}
  .lx-nav-g:first-child{display:none}
  .lx-nav-g::before{content:none}
  a.lx-nav-i,button.lx-nav-i{justify-content:center;padding:0}
  .lx-nav-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lx-nav-n{position:absolute;top:6px;right:14px;min-width:0;width:8px;height:8px;padding:0;border:2px solid var(--bg-sidebar);font-size:0}
  a.lx-nav-i.active .lx-nav-n{border-color:var(--primary-tint)}
  .lx-me{flex-direction:column;align-items:center;padding:8px 0 12px}
  button.lx-me-btn{justify-content:center;flex:none}
  .lx-me-t{display:none}
  .lx-backdrop{display:none!important}
  .lx-nav-toggle{display:none!important}
  .lx-main{min-height:100vh}
}

/* ---------- 768px 아래: 메뉴 버튼으로 여는 패널 ---------- */
@media(max-width:767px){
  .lx-side{width:280px;padding:0 12px}
  .lx-top{padding:0 16px}
  main.lx-page{padding:16px 16px 72px}
  .lx-nav-toggle .ck-i{width:22px;height:22px}
  .lx-place-g{display:none}
  /* A phone: the tab row wraps to a second line, every tab whole on the screen (browser_menu_tabs, as before the redesign),
     never a row going on past the edge. */
  .lx-tabs-host>.lx-tabs{flex-wrap:wrap;margin:0;overflow-x:visible}
}

/* Settings' inner menu (안쪽 목차) with every group open (조직 · 수집 · 운영 …, 26 entries) is taller than a laptop screen
   (1440x800, 1280x720). Sticky below the top line with no height of its own, it moved only with the page: its last
   entries came into view at the page's very end, and a wheel over it scrolled the page. From 1106px (where it stands
   beside the page) it holds the screen's height below the top line (61px line, 16px and 24px of the menu's padding: the
   page gains no height from it) and scrolls by itself; a wheel at its end does not
   go on to the page. Folded (900-1105px) and on a phone it opens over the page as before. */
@media(min-width:1106px){
  .lx-snav>.lx-snav-list:not([hidden]){max-height:calc(100vh - 104px);margin:0 -4px;padding:0 4px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}