/* 2.2.1: the self-hosted WOFF2 (Pretendard v1.3.9) ships at fonts/ next to
   this sheet, served by both services through the shared app.  swap keeps
   system fonts on screen until it arrives.  (c) 2021 Kil Hyung-jin, SIL
   Open Font License 1.1 -- fonts/OFL.txt travels with the binary. */
@font-face {
    font-family: "Pretendard Variable";
    src: local("Pretendard Variable"), url("fonts/PretendardVariable.302ec55f5b43.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
}

/* 2.2.1 (v2.23.0): the icon glyphs both services use -- the FBAR institution
   search dialog's and the landing tiles' -- as one self-hosted subset of
   Material Symbols Outlined at fonts/ next to this sheet.  Measured from the
   binary on 2026-09-08 (fontTools, GSUB ligatures): 16 names --
   account_balance assignment bar_chart beach_access check_circle
   check_circle_outline description location_on location_pin place
   progress_activity public radio_button_checked radio_button_unchecked room
   science (assignment added 2026-09-08 for the 상담일지 tile).  A name that is NOT in
   that list renders as its own text until the subset is regenerated:
   fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,
   GRAD@20..48,400,0,0&icon_names=<names> -- never a CDN <link>, which rendered
   raw ligature names whenever it was blocked.  block keeps the name text
   invisible until the glyphs arrive.  The left menu (v2.33.0) does not use
   this font at all; its icons are inline SVG symbols in the shared partial.
   (c) Google, Apache License 2.0 -- fonts/LICENSE-material-symbols.txt travels
   with the binary. */
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("fonts/material-symbols-outlined-subset.ec13900f38d2.woff2") format("woff2");
}
.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

:root {
    --pundit-blue: #2458c6;
    --pundit-blue-dark: #163F9F;
    --pundit-canvas: #F5F7FB;
    --pundit-border: #dce3ee;
    /* 2.1 (v2.24.0): 조작할 수 있는 것의 테두리.  --pundit-border 는 흰 표면에서
       1.29:1, 캔버스에서 1.20:1 이라 카드·구분선에는 맞지만 버튼·입력의 경계로는
       WCAG 1.4.11(비텍스트 3:1)에 못 미친다.  그 토큰을 통째로 진하게 하면
       카드와 표까지 무거워지므로 쓰임새로 쪼갠다 — 장식은 --pundit-border,
       누르거나 값을 넣는 것은 이 토큰(흰 표면 3.49:1, 캔버스 3.25:1). */
    --pundit-border-control: #7E8A9F;
    --pundit-text: #172033;
    --pundit-muted: #69778D;
    --pundit-muted-strong: #526277;
    --pundit-focus: #2458C6;
    /* 2.2.1: Pretendard first (self-hosted @font-face above); no CDN. */
    --pundit-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* 2.24.0 화면 폭.  Punditapp 은 사내 데스크탑 전용이라 페이지 껍데기는
       주어진 화면을 그대로 쓴다.  전에는 화면마다 1400·1440·1200·1160·960px
       상한을 손으로 골라 써서, 1920px 모니터에서 좌우가 텅 빈 채 표가 가운데
       한 줄기로 눌려 있었다.  상한은 초대형 모니터에서 글줄이 지나치게
       길어지는 것만 막는다. */
    --pundit-page-max: 2560px;
    --pundit-page-gutter: 32px;

    /* 4.28 좌측 메뉴 (v2.33.0).  본문은 메뉴 폭만큼 오른쪽에서 시작한다 --
       body 의 padding-left 가 이 토큰을 읽는다.  접힌 폭은 아이콘 칩 하나와
       양쪽 여백이 들어가는 최소값이다. */
    --pundit-side-w: 320px;
    --pundit-side-w-collapsed: 84px;
    --pundit-topbar-h: 72px;

    /* 겹침 순서 한 벌 (가이드 §4.11).  화면 위에 뜨는 것 -- 서랍·대화상자·팝업 --
       은 왼쪽 메뉴 위에 선다.  전에는 화면마다 z-index 를 손으로 적어 금융기관
       서랍(70/71)과 등록 대화상자(50)가 메뉴(900) 밑으로 들어갔다: 서랍이 메뉴
       아래로 미끄러지고, 등록 대화상자는 제목이 든 왼쪽이 메뉴에 가려졌다.
       위로 갈수록: 메뉴 900 < 뒤 배경 950 < 본체 951 < 도움말 모달 1000 <
       진행 중 화면을 막는 덮개 1200.  확인창(ActionDialog)은 <dialog> showModal
       이라 최상위 층에 그려져 이 수치와 무관하게 늘 맨 위다.  새 서랍·대화상자는
       숫자를 적지 말고 아래 토큰을 쓴다. */
    --pundit-z-sidebar: 900;
    --pundit-z-scrim: 950;
    --pundit-z-overlay: 951;

    /* 가이드 §2.1 이 정한 이름들.  이 이름이 없어서 화면마다 hex 를 직접
       적었고, 같은 '정보' 배지가 어디서는 청록 어디서는 파랑이 됐다. */
    --pundit-primary: #2458C6;
    --pundit-primary-strong: #163F9F;
    --pundit-primary-soft: #EDF4FF;
    --pundit-surface: #FFFFFF;
    --pundit-surface-soft: #F8FAFC;
    --pundit-success: #0F8A62;
    --pundit-success-strong: #087154;
    /* 2.1 (v2.24.0): 성공만 단계가 셋인 이유.  다른 역할은 기본색이 흰 글자에
       AA 를 넘어 기본=채움, -strong=호버로 두 단계면 된다.  --pundit-success 는
       4.35:1 로 AA 에 못 미쳐 버튼 채움이 이미 -strong(6.00:1)이고, 그래서
       §4.5 가 요구하는 "호버는 한 단계 더 진하게" 자리가 비어 있었다.
       .btn-success:hover 가 기본과 같은 값이라 되먹임이 없던 결함이 그것이다.
       이 토큰이 그 셋째 단계다 (흰 글자 7.46:1). */
    --pundit-success-stronger: #06614A;
    --pundit-warning: #C46A08;
    --pundit-warning-strong: #8A4A05;
    --pundit-danger: #C93D38;
    --pundit-danger-strong: #A8302C;
    /* 상태 배경은 옅게 쓴다 (§2.1). */
    --pundit-success-bg: #F1FBF7;
    --pundit-warning-bg: #FFF7E8;
    --pundit-danger-bg: #FFF1F0;
    --pundit-info-bg: #F1F6FF;
    /* 알림 상자의 옅은 테두리 (§2.1·§4.9, v2.51.0).  상자는 장식이 아니라 상태를
       담는 틀이라 기본색(진한 빨강 1px)으로 두르면 본문보다 테두리가 먼저 보인다.
       성공 값은 v2.10.1 완료 배너가 이미 쓰던 #B9E5D2, 나머지 셋은 가이드 견본
       (.dsg-notice--*)이 쓰던 값이다 — 새 색을 만든 것이 아니라 이름을 붙였다. */
    --pundit-success-border: #B9E5D2;
    --pundit-warning-border: #F4D69D;
    --pundit-danger-border: #EFC2BF;
    --pundit-info-border: #BFD3F7;
    /* 2.1 제품 식별색: 랜딩의 Form 14654 타일만 쓴다 (v2.19.0 승인). */
    --pundit-form14654-accent: #7B1FA2;
    --pundit-form14654-bg: #F3E5F5;
}

/* 세로 스크롤 막대 자리를 항상 비워 둔다.  긴 목록 화면(예: 수임 목록의 전체·진행중·홀딩 탭)을
   다시 그리는 동안 막대가 사라졌다 나타나면 본문 폭이 막대 폭만큼 넓어졌다 줄어들어 표가
   왼쪽으로 늘었다 돌아오는 것처럼 보인다(대표 2026-09-22, 실서버에서 관찰).  자리를 미리
   잡아 두면 막대가 생기고 없어져도 폭이 같다. */
html {
    scrollbar-gutter: stable;
}

html body {
    background-color: var(--pundit-canvas);
    color: var(--pundit-text);
    font-family: var(--pundit-font-sans);
}

/* 2.2.1 폼 컨트롤 글꼴 상속: 브라우저 기본(UA) 스타일시트가 input/textarea/select/button 에는
   위 html body 의 font-family 를 상속시키지 않는다.  각 컴포넌트 CSS 가 font: inherit 을
   따로 넣어 왔지만 빠뜨린 칸(예: 메모 textarea)은 브라우저 기본값(대개 monospace 계열)으로
   보였다.  전역으로 한 번 상속시킨다 — 코드·계좌번호 등 의도적으로 monospace 를 쓰는 칸은
   더 구체적인 선택자라 이 규칙보다 우선한다. */
input, textarea, select, button {
    font: inherit;
    line-height: inherit;
}

/* ------------------------------------------------------------------ */
/* 4.28 좌측 메뉴 + 상단바 (v2.33.0).  예전의 파란 머리띠를 대신한다.        */
/*                                                                    */
/* 메뉴는 화면 왼쪽에 고정되고, 본문은 body 의 padding-left 로 그만큼      */
/* 오른쪽에서 시작한다.  서식의 구조는 바뀌지 않는다 -- 사이드바가 있는 body */
/* 만 :has() 로 골라 밀어내므로, 메뉴를 include 하지 않는 팝업 창은 그대로다. */
/* 접힘은 <html> 의 클래스 하나로 표현하고(첫 그림 전 인라인 스크립트가 붙임), */
/* 그 안의 글자·표지·묶음 이름을 감추고 폭 토큰을 바꾼다.                    */
/* ------------------------------------------------------------------ */
/* 두 벌씩이다: 서식의 인라인 스크립트가 <html> 에 다는 .pundit-has-sidebar 와,
   스크립트가 없을 때의 :has().  :has() 를 모르는 엔진(Chrome 105 · Firefox 121 ·
   Safari 15.4 이전)은 그 규칙만 버리므로 한 선택자 목록에 섞지 않고 따로 적는다 --
   섞으면 목록 전체가 죽어 본문이 고정 메뉴 밑에 깔린다. */
html.pundit-has-sidebar body {
    padding-left: var(--pundit-side-w);
    /* 메뉴 폭과 같은 박자로 밀려야 접는 동안 본문이 메뉴 밑에 들어가지 않는다. */
    transition: padding-left 200ms ease;
}

html body:has(.pundit-sidebar) {
    padding-left: var(--pundit-side-w);
    transition: padding-left 200ms ease;
}

html.pundit-side-collapsed.pundit-has-sidebar body {
    padding-left: var(--pundit-side-w-collapsed);
}

html.pundit-side-collapsed body:has(.pundit-sidebar) {
    padding-left: var(--pundit-side-w-collapsed);
}

.pundit-sidebar-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pundit-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--pundit-z-sidebar);
    box-sizing: border-box;
    width: var(--pundit-side-w);
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    background: var(--pundit-surface);
    color: var(--pundit-text);
    border-right: 1px solid var(--pundit-border);
    transition: width 200ms ease, padding 200ms ease;
}

html.pundit-side-collapsed .pundit-sidebar {
    width: var(--pundit-side-w-collapsed);
    padding: 22px 12px;
}

.pundit-sidebar__toggle {
    position: absolute;
    top: 30px;
    right: -14px;
    z-index: 1;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pundit-border-control);
    border-radius: 50%;
    background: var(--pundit-surface);
    color: var(--pundit-muted-strong);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

/* 보이는 원은 28px 이지만 클릭 영역은 가이드 §6 의 최소 40×40 이다. */
.pundit-sidebar__toggle::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.pundit-sidebar__toggle:hover {
    color: var(--pundit-primary);
    border-color: var(--pundit-primary);
}

.pundit-sidebar__toggle .pundit-sidebar__ico {
    width: 14px;
    height: 14px;
    transition: transform 200ms ease;
}

html.pundit-side-collapsed .pundit-sidebar__toggle .pundit-sidebar__ico {
    transform: rotate(180deg);
}

.pundit-global-brand {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 4px 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pundit-text);
    text-decoration: none;
    font-weight: 700;
}

.pundit-global-brand img {
    display: block;
    width: auto;
    height: 34px;
    max-width: 132px;
    object-fit: contain;
}

/* 접히면 로고 그림 대신 정사각 마크 하나.  로고는 가로로 긴 그림이라 84px 안에
   들어가지 않는다.  마크 파일이 없는 서비스는 머리글자를 쓴다. */
.pundit-global-brand__mark,
.pundit-global-brand__fallback {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--pundit-primary);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.pundit-global-brand__fallback {
    display: inline-flex;
}

/* 마크가 그림일 때는 파란 바탕 사각형이 아니라 그림 그대로다 -- 위 규칙의
   background · border-radius 를 되돌린다.  `.pundit-global-brand img`(0,1,1) 는 위
   `.pundit-global-brand__mark`(0,1,0) 를 특이성으로 이기므로 display · 치수를 여기서
   다시 적는다 -- 안 적으면 펼친 메뉴에 로고와 마크가 나란히 선다.  접힘 규칙
   `html.pundit-side-collapsed .pundit-global-brand__mark`(0,2,1) 가 이것을 이긴다. */
img.pundit-global-brand__mark {
    display: none;
    width: 36px;
    height: 36px;
    max-width: 36px;
    border-radius: 0;
    background: none;
    object-fit: contain;
}

html.pundit-side-collapsed .pundit-global-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* 접히면 가로로 긴 로고를 감춘다.  마크도 <img> 라서 `:not()` 으로 빼 두지 않으면
   이 규칙(0,2,2)이 아래의 마크 표시 규칙(0,2,1)을 특이성으로 이겨 둘 다 사라진다. */
html.pundit-side-collapsed .pundit-global-brand img:not(.pundit-global-brand__mark),
html.pundit-side-collapsed .pundit-global-brand__name {
    display: none;
}

html.pundit-side-collapsed .pundit-global-brand__mark {
    display: inline-flex;
}

/* 메뉴 본문.  화면 껍데기가 <nav> 에 flex/gap/justify-content 를 두는 경우가
   있어(trades/base.html), 세로 목록으로 되돌린다. */
.pundit-global-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pundit-sidebar__label {
    margin: 22px 12px 8px;
    color: var(--pundit-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* 묶음 구분선 (대표 요청 2026-09-28 21:40 "접었을 때 섹션별로 --- 이런 바로 구분해줘").
   서식이 묶음 이름표 바로 앞에 하나씩 둔다.  펼친 메뉴에서는 이름표가 그 일을 하므로
   감추고(display:none 이라 nav 의 gap 도 먹지 않는다 -- 펼친 모양은 그대로다), 접힌
   메뉴에서만 이름표 자리에 짧은 가로선으로 선다(아래 접힘 규칙과 좁은 창 블록).
   장식이라 서식에서 aria-hidden 이고 글자가 없다. */
.pundit-sidebar__divider {
    display: none;
    flex: none;
    align-self: center;
    width: 28px;
    height: 2px;
    margin: 6px 0;
    border-radius: 2px;
    background: var(--pundit-border);
}

/* 맨 위에는 긋지 않는다 -- 선은 묶음과 묶음 **사이**에만 선다.  지금은 대시보드 항목이
   늘 먼저라 이 자리가 비지 않지만, 그 항목이 빠져도 선이 로고 밑에 홀로 서지 않게. */
html .pundit-global-nav > .pundit-sidebar__divider:first-child {
    display: none;
}

/* 항목 하나.  링크와 단추(DB 관리 팝업)가 같은 모양이다.  껍데기의 `nav a`
   (흰 글자·흰 호버)보다 특이성이 높아야 하므로 부모 클래스를 붙여 쓴다. */
.pundit-global-nav .pundit-sidebar__item,
.pundit-sidebar__foot .pundit-sidebar__item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pundit-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.pundit-global-nav .pundit-sidebar__item:hover,
.pundit-sidebar__foot .pundit-sidebar__item:hover {
    color: var(--pundit-text);
    background: var(--pundit-surface-soft);
}

.pundit-global-nav .pundit-sidebar__item[aria-current="page"] {
    color: var(--pundit-primary-strong);
    background: var(--pundit-primary-soft);
    font-weight: 700;
}

/* 지금 여기 표시: 왼쪽 세로 선.  색은 그 워크스페이스의 식별색이다 --
   랜딩 카드와 같은 계열이라 메뉴와 카드가 한 체계로 읽힌다. */
.pundit-global-nav .pundit-sidebar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--pundit-side-accent, var(--pundit-primary));
}

.pundit-sidebar__chip {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pundit-side-accent-bg, var(--pundit-surface-soft));
    color: var(--pundit-side-accent, var(--pundit-muted-strong));
}

.pundit-sidebar__ico {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
}

.pundit-sidebar__ico-text {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pundit-sidebar__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pundit-sidebar__badge {
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pundit-danger-bg);
    color: var(--pundit-danger);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pundit-sidebar__badge.is-working {
    background: var(--pundit-warning-bg);
    color: var(--pundit-warning-strong);
}

.pundit-sidebar__badge.is-flagship {
    background: var(--pundit-primary);
    color: #fff;
}

/* 워크스페이스 식별색 -- 랜딩 카드의 card-* 클래스와 같은 이름을 쓴다. */
.pundit-sidebar__item.card-stock { --pundit-side-accent: var(--pundit-primary); --pundit-side-accent-bg: var(--pundit-primary-soft); }
.pundit-sidebar__item.card-client-list { --pundit-side-accent: var(--pundit-primary-strong); --pundit-side-accent-bg: var(--pundit-primary-soft); }
.pundit-sidebar__item.card-fbar { --pundit-side-accent: var(--pundit-success-strong); --pundit-side-accent-bg: var(--pundit-success-bg); }
.pundit-sidebar__item.card-form14654 { --pundit-side-accent: var(--pundit-form14654-accent); --pundit-side-accent-bg: var(--pundit-form14654-bg); }
.pundit-sidebar__item.card-leave { --pundit-side-accent: var(--pundit-warning-strong); --pundit-side-accent-bg: var(--pundit-warning-bg); }
.pundit-sidebar__item.card-design-system { --pundit-side-accent: var(--pundit-primary); --pundit-side-accent-bg: var(--pundit-primary-soft); }
.pundit-sidebar__item.card-settings { --pundit-side-accent: var(--pundit-muted-strong); --pundit-side-accent-bg: var(--pundit-surface-soft); }

.pundit-sidebar__foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pundit-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pundit-sidebar__foot .pundit-sidebar__item {
    min-height: 44px;
    font-size: 14px;
}

/* 접힘: 아이콘만 보인다.  항목 이름은 시각적으로만 숨겨 접근성 트리에 남기고
   (링크 이름이 비지 않는다), 눈에는 아래 말풍선(:520 부근)이 보여 준다 --
   workspace_shell.js 가 이름을 data-title 에 넣고 서식이 그것을 그린다.
   묶음 이름과 표지는 장식이라 display:none 이다. */
html.pundit-side-collapsed .pundit-sidebar__label,
html.pundit-side-collapsed .pundit-sidebar__badge {
    display: none;
}

/* 이름표가 사라진 자리에 구분선이 선다 (위 .pundit-sidebar__divider). */
html.pundit-side-collapsed .pundit-sidebar__divider {
    display: block;
}

html.pundit-side-collapsed .pundit-sidebar__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html.pundit-side-collapsed .pundit-global-nav .pundit-sidebar__item,
html.pundit-side-collapsed .pundit-sidebar__foot .pundit-sidebar__item {
    justify-content: center;
    padding: 0;
}

html.pundit-side-collapsed .pundit-global-nav .pundit-sidebar__item[aria-current="page"]::before {
    left: -12px;
}

/* 메뉴 본문은 접혀도 제 스크롤을 그대로 가진다.
   한때 여기서 `overflow: visible` 로 잘라 내기를 풀었다 -- 말풍선을 상자 밖으로
   내보내려던 것인데, CSS 에는 "가로는 보이고 세로는 스크롤" 이 없어서 그 한 줄이
   메뉴의 **유일한** 스크롤을 없앴다.  낮은 창(1366x768 에 항목이 많은 대표 계정)
   에서는 아래쪽 항목과 로그아웃이 화면 밖으로 나가 닿지 않는다.
   말풍선은 대신 `position: fixed` 로 상자를 벗어난다(아래) -- 스크롤 상자는
   fixed 자손을 자르지 못한다. */
html.pundit-side-collapsed .pundit-global-nav {
    overflow-y: auto;
    overflow-x: hidden;
}

/* 접힌 메뉴의 이름 말풍선 (2차 시안 shell.css).  브라우저의 title 풍선은 1초쯤
   뒤에야 뜨고 커서 아래에 붙는데, 아이콘만 남은 메뉴에서는 그 사이가 길다.
   이름은 workspace_shell.js 가 data-title 에 넣는다.

   자리는 `position: fixed` 다 -- 메뉴가 세로로 스크롤하는 상자라 absolute 로는
   상자 안에서 잘린다.  좌표(--pundit-bubble-top/left)는 마우스를 올리거나 초점이
   닿는 순간 workspace_shell.js 가 그 항목의 실제 자리로 넣어 준다.  스크립트가
   없으면 data-title 자체가 없으니 말풍선도 없다. */
html.pundit-side-collapsed .pundit-sidebar .pundit-sidebar__item[data-title]::after {
    content: attr(data-title);
    position: fixed;
    left: var(--pundit-bubble-left, var(--pundit-side-w-collapsed));
    top: var(--pundit-bubble-top, 50%);
    transform: translateY(-50%);
    z-index: 30;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--pundit-text);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease;
}

html.pundit-side-collapsed .pundit-sidebar .pundit-sidebar__item[data-title]:hover::after,
html.pundit-side-collapsed .pundit-sidebar .pundit-sidebar__item[data-title]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.pundit-sidebar__toggle:focus-visible,
.pundit-global-brand:focus-visible,
.pundit-global-nav .pundit-sidebar__item:focus-visible,
.pundit-sidebar__foot .pundit-sidebar__item:focus-visible {
    outline: 3px solid var(--pundit-focus);
    outline-offset: 2px;
}

/* 상단바.  껍데기들이 <header> 에 파란 그라데이션과 흰 글자를 두므로
   (trades/base.html, fbar/index.html) 요소+클래스로 이긴다.  고정(sticky)하지
   않는다 -- 화면들이 저마다 표 머리 행·목차를 top:0 근처에 sticky 로 두는데,
   고정 상단바는 그것들을 72px 아래에 가린다.  이동은 어차피 왼쪽 메뉴가 맡는다. */
header.pundit-topbar {
    position: relative;
    box-sizing: border-box;
    min-height: var(--pundit-topbar-h);
    margin: 0 0 24px;
    padding: 0 var(--pundit-page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--pundit-text);
    background: var(--pundit-surface);
    border-bottom: 1px solid var(--pundit-border);
    box-shadow: none;
}

.pundit-global-title {
    margin: 0;
    color: var(--pundit-text);
    text-align: left;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.pundit-topbar__user {
    box-sizing: border-box;
    min-height: 42px;
    padding: 0 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--pundit-border);
    border-radius: 999px;
    background: var(--pundit-surface);
    font-size: 13px;
    white-space: nowrap;
}

.pundit-topbar__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pundit-primary-soft);
    color: var(--pundit-primary-strong);
    font-size: 13px;
    font-weight: 800;
}

/* 화면 전환(시험 서버 전용, 가이드 §4.37).  대표가 다른 직원으로 전환해 있는 동안
   모든 화면의 상단바 위에 주의(warning) 띠가 선다.  상단바와 같은 까닭으로 고정(fixed ·
   sticky)하지 않는다 -- 화면들이 top:0 근처에 둔 표 머리 행 · 목차를 가린다.  스크롤한 뒤에도
   이름표의 「전환」 표가 남는다.  단추는 buttons.css 를 싣지 않는 FBAR 화면에서도 같게 보이도록
   §4.5 Secondary · 38px(.btn-sm) 계약을 여기서 그대로 적는다. */
.pundit-view-as-banner {
    box-sizing: border-box;
    min-height: 54px;
    margin: 0;
    padding: 8px var(--pundit-page-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    background: var(--pundit-warning-bg);
    border-bottom: 1px solid var(--pundit-warning-border);
    border-left: 4px solid var(--pundit-warning);
    color: var(--pundit-text);
    font-size: 14px;
    line-height: 1.5;
}

.pundit-view-as-banner__text {
    margin: 0;
}

.pundit-view-as-banner__text strong {
    color: var(--pundit-warning-strong);
    font-weight: 800;
}

.pundit-view-as-banner__form {
    margin: 0;
}

.pundit-view-as-banner__stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 38px;
    margin: 0;
    padding: 6px 12px;
    background: var(--pundit-surface);
    border: 1px solid var(--pundit-border-control);
    border-radius: 8px;
    color: var(--pundit-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.pundit-view-as-banner__stop:hover {
    background: var(--pundit-surface-soft);
    border-color: var(--pundit-muted-strong);
}

.pundit-view-as-banner__stop:focus-visible {
    outline: 3px solid var(--pundit-focus);
    outline-offset: 2px;
}

.pundit-topbar__switch-badge {
    padding: 2px 8px;
    border: 1px solid var(--pundit-warning-border);
    border-radius: 999px;
    background: var(--pundit-warning-bg);
    color: var(--pundit-warning-strong);
    font-size: 12px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    html.pundit-has-sidebar body,
    .pundit-sidebar,
    .pundit-sidebar__toggle .pundit-sidebar__ico,
    .pundit-global-nav .pundit-sidebar__item {
        transition: none;
    }
}

body .card,
body .workspace-panel,
body .workspace-header {
    border-color: var(--pundit-border);
}

.pundit-db-popup-page {
    min-height: 100vh;
    background: var(--pundit-canvas);
}

.pundit-db-popup-toolbar {
    position: sticky;
    top: 0;
    /* Keep the popup toolbar above page content, but below modal and drawer layers. */
    z-index: 30;
    min-height: 64px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--pundit-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.pundit-db-popup-toolbar__title {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pundit-db-popup-toolbar__title strong {
    color: var(--pundit-text);
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}

.pundit-db-popup-toolbar__title span {
    color: var(--pundit-muted);
    font-size: 0.78rem;
}

.pundit-db-popup-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pundit-db-popup-toolbar__home,
.pundit-db-popup-toolbar__back {
    box-sizing: border-box;
    min-height: 42px;
    margin: 0;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pundit-db-popup-toolbar__home,
.pundit-db-popup-toolbar__back {
    /* 컨트롤 테두리 (2.1): 옅은 파란 채움 위 3.15:1 */
    border: 1px solid var(--pundit-border-control);
    color: var(--pundit-primary-strong);
    background: var(--pundit-primary-soft);
}

.pundit-db-popup-toolbar__home:hover,
.pundit-db-popup-toolbar__back:hover {
    filter: brightness(0.97);
}

.pundit-db-popup-toolbar__home:focus-visible,
.pundit-db-popup-toolbar__back:focus-visible {
    outline: 3px solid var(--pundit-focus);
    outline-offset: 2px;
}

.pundit-db-popup-page > .container,
.pundit-db-popup-page > .page-shell,
.pundit-db-popup-page > main {
    width: 100%;
    max-width: var(--pundit-page-max);
    margin-right: auto;
    margin-left: auto;
}

/* 페이지 껍데기 한 벌.  새 화면은 이 클래스를 쓰고, 이미 자기 껍데기
   클래스를 가진 화면(.container · .fbar-shell · .page-shell · main)은 같은
   두 토큰을 자기 규칙 안에서 쓴다.  세로 여백은 화면마다 다르므로 여기서
   정하지 않는다. */
.pundit-page-shell {
    width: 100%;
    max-width: var(--pundit-page-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--pundit-page-gutter);
    padding-left: var(--pundit-page-gutter);
}

.pundit-db-popup-page > .container {
    padding-top: 24px;
}

/* 1200px 아래에서는 메뉴가 저절로 접힌다 -- 사내 데스크탑 기준(1920)보다
   좁은 창에서 320px 메뉴는 본문을 너무 먹는다.  단, 사람이 단추로 펼쳤으면
   (html.pundit-side-expanded, workspace_shell.js) 그 선택이 이긴다 -- 그래서
   모든 규칙이 :not(.pundit-side-expanded) 를 단다. */
@media (max-width: 1199px) {
    html.pundit-has-sidebar:not(.pundit-side-expanded) body {
        padding-left: var(--pundit-side-w-collapsed);
    }

    html:not(.pundit-side-expanded) body:has(.pundit-sidebar) {
        padding-left: var(--pundit-side-w-collapsed);
    }

    html:not(.pundit-side-expanded) .pundit-sidebar {
        width: var(--pundit-side-w-collapsed);
        padding: 22px 12px;
    }

    html:not(.pundit-side-expanded) .pundit-sidebar__label,
    html:not(.pundit-side-expanded) .pundit-sidebar__badge,
    html:not(.pundit-side-expanded) .pundit-global-brand img:not(.pundit-global-brand__mark),
    html:not(.pundit-side-expanded) .pundit-global-brand__name {
        display: none;
    }

    html:not(.pundit-side-expanded) .pundit-sidebar__divider {
        display: block;
    }

    html:not(.pundit-side-expanded) .pundit-sidebar__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    html:not(.pundit-side-expanded) .pundit-global-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html:not(.pundit-side-expanded) .pundit-global-brand__mark {
        display: inline-flex;
    }

    html:not(.pundit-side-expanded) .pundit-global-nav .pundit-sidebar__item,
    html:not(.pundit-side-expanded) .pundit-sidebar__foot .pundit-sidebar__item {
        justify-content: center;
        padding: 0;
    }

    html:not(.pundit-side-expanded) .pundit-global-nav .pundit-sidebar__item[aria-current="page"]::before {
        left: -12px;
    }

    html:not(.pundit-side-expanded) .pundit-sidebar__toggle .pundit-sidebar__ico {
        transform: rotate(180deg);
    }

    /* 좁은 창의 자동 접힘에도 이름 말풍선이 뜬다 (위 접힘 규칙과 같은 모양).
       메뉴의 스크롤은 건드리지 않는다 -- 말풍선이 fixed 라 상자를 벗어난다. */
    html:not(.pundit-side-expanded) .pundit-sidebar .pundit-sidebar__item[data-title]::after {
        content: attr(data-title);
        position: fixed;
        left: var(--pundit-bubble-left, var(--pundit-side-w-collapsed));
        top: var(--pundit-bubble-top, 50%);
        transform: translateY(-50%);
        z-index: 30;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--pundit-text);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 120ms ease;
    }

    html:not(.pundit-side-expanded) .pundit-sidebar .pundit-sidebar__item[data-title]:hover::after,
    html:not(.pundit-side-expanded) .pundit-sidebar .pundit-sidebar__item[data-title]:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }
}

/* 좁은 창에서는 여백 토큰 하나만 줄이면 모든 껍데기가 함께 좁아진다. */
@media (max-width: 900px) {
    :root {
        --pundit-page-gutter: 18px;
    }

    .pundit-global-title {
        font-size: 1rem;
    }
}

@media (max-width: 520px) {
    :root {
        --pundit-page-gutter: 12px;
    }

    .pundit-topbar__name {
        display: none;
    }

    .pundit-db-popup-toolbar {
        min-height: 60px;
        padding: 9px 12px;
    }

    .pundit-db-popup-toolbar__title span {
        display: none;
    }

    .pundit-db-popup-toolbar__home,
    .pundit-db-popup-toolbar__back {
        min-height: 42px;
        padding: 9px 11px;
    }
}