/* ============================================================================
   AP 자금운용 관리 — 디자인 시스템

   두 원천을 합친다(스펙 부록 D + D.5).
     · 구조·컴포넌트 규격 = Credit-Lens(= shadcn/ui 룩)
       카드 1px 링 · 컨트롤 h-8(32px) · 표 헤더 h-10(40px)·셀 8px · 알약 배지 h-5 ·
       4px 간격 그리드 · 포커스 링 3px · 숫자 우측정렬 + tabular-nums
     · 브랜드 레이어 = 아모레퍼시픽 그룹(apgroup.com)
       AP 블루 · 뉴트럴 모노크롬 캔버스 · 세리프 디스플레이 · 자간 넓은 아이브로우

   원천 문서
     docs/reference/CREDITLENS-DESIGN-GUIDE.md   (컴포넌트 규칙 정본)
     docs/reference/apgroup-home.png             (브랜드 레이어 실측)
     docs/superpowers/specs/2026-09-01-ap-treasury-design.md 부록 D·D.5

   ── AP 브랜드 오버라이드 (Credit-Lens와 갈라지는 지점, 2026-09-01) ─────────────
     1. 액센트   라임 #9fe870  →  AP 블루 #005295 (다크는 #1a76b5로 승급)
                   액센트 위 글자는 두 테마 모두 흰색 고정(라이트 7.95:1 · 다크 4.88:1)
     2. 캔버스   세이지 #e8ebe6 →  뉴트럴 #f5f5f5. 카드는 순백 + 헤어라인 링
     3. 보조면   세이지 → 뉴트럴 #f0f0f0 (활성 탭·hover)
     4. 디스플레이 서체 = 세리프(아리따부리 계열). 본문·표·컨트롤은 산세리프 유지
     5. muted-foreground 도 중성 회색으로(원천은 녹빛이 도는 회색이었다)
   ──────────────────────────────────────────────────────────────────────────────

   원칙
     1. 액센트(--primary)는 브랜드이자 유일한 주 액션 색.
        성공·상승 같은 의미 표시에 재사용하지 않는다.
     2. 면 대비가 그림자를 대신한다. drop-shadow 금지, 깊이는 1px 헤어라인.
        카드에 border와 shadow를 함께 쓰지 않는다.
     3. 숫자가 주인공 — 우측정렬 + tabular-nums.
     4. 로그인(랜딩)과 앱이 같은 껍데기를 쓴다.
     5. 하드코딩 hex 금지 — hex는 아래 토큰 블록에만 존재한다.

   ⚠️ 등락 파랑과 브랜드 블루가 충돌하지 않게 문맥을 나눈다(D.5):
      브랜드 블루(#005295, 어두운 코발트) = 컨트롤·링·타일·브랜드 마크에만.
      하락 파랑(#2563eb, 밝은 블루)       = 표 안 수치 텍스트에만.
   ⚠️ Credit-Lens 로고·브랜드마크는 쓰지 않는다. 아모레퍼시픽 로고도 쓰지 않는다
      (자체 모노그램 타일). 문법만 공유한다.
   ⚠️ Tailwind·외부 폰트·CDN 로드 없음(스펙 §4 제약). 서체는 설치돼 있으면 잡히는 스택.
   ============================================================================ */

/* ── 토큰: 라이트 ────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --background:            #ffffff;
  --foreground:            #111111;   /* ink — AP는 순검정 대신 근검정 */
  --canvas:                #f5f5f5;   /* 앱 바탕 = 뉴트럴. 그 위에 순백 카드 */
  --card:                  #ffffff;
  --card-foreground:       #111111;
  --popover:               #ffffff;

  --primary:               #005295;   /* AP 블루 — 주 액션·포커스 링·브랜드 타일 */
  --primary-foreground:    #ffffff;   /* 블루 위 글자는 흰색(대비 7.95:1) */
  --secondary:             #f0f0f0;   /* 뉴트럴 보조면 — 활성 탭·보조 버튼 */
  --secondary-foreground:  #111111;
  --muted:                 #f5f5f5;
  --muted-foreground:      #6b6b6b;   /* 중성 회색(4.89:1 on canvas) */
  --destructive:           #c0392b;

  --border:                #e5e5e5;
  --input:                 #d4d4d4;
  --ring:                  #005295;
  --ring-soft:             rgba(0, 82, 149, 0.28);   /* 포커스 링 확산 */
  --hairline:              rgba(17, 17, 17, 0.12);   /* 카드 링 — 캔버스 대비가 옅어 조금 진하게 */
  /* 분절 컨트롤의 선택된 알약 — "떠 있는" 면. 라이트는 밝게, 다크도 밝게(다크에서
     밝음 = 융기다). --card 를 그대로 쓰면 다크에서 오히려 파여 보인다. */
  --raised:                #ffffff;

  /* 링크·아이콘용 브랜드 글자색(면색을 글자에 그대로 쓰지 않는다) */
  --leaf:                  #005295;

  /* 의미색 — 판정 배지·경고. 브랜드 블루를 여기에 쓰지 않는다(원천의 --rpt-good/warn/bad)
     ⚠️ 2026-09-01 AA 대비 보정: --warn/--good 라이트 값은 WCAG AA(4.5:1) 미달이라
     #966319(4.64:1)/#277942(4.64:1)로 조정. soft 배경·다크 값은 이미 통과라 유지. */
  --good:                  #277942;  --good-soft: #e3f2e4;
  --warn:                  #966319;  --warn-soft: #faf3e3;
  --bad:                   #9b2c2c;  --bad-soft:  #f9e9e9;

  /* 등락 — 한국 관례: 상승=빨강 · 하락=파랑 · 보합=muted (가이드 §2.3) */
  --up:                    #dc2626;  --up-soft:   #fbe9e9;
  --down:                  #2563eb;  --down-soft: #e8eefc;

  /* 차트 — AP 모노크롬 + 블루 램프. 임의 색 추가 금지(§2.2) */
  --chart-1: #005295;  --chart-2: #3f7fb5;  --chart-3: #7ba7cc;
  --chart-4: #9a9a9a;  --chart-5: #c8c8c8;

  /* 형태 — --radius 1rem 기준 */
  --radius:      1rem;
  --radius-sm:   calc(var(--radius) * 0.6);   /* 9.6px */
  --radius-md:   calc(var(--radius) * 0.8);   /* 12.8px — 중첩 블록 */
  --radius-lg:   var(--radius);               /* 16px — 버튼·입력 */
  --radius-xl:   calc(var(--radius) * 1.4);   /* 22.4px — 카드 */
  --radius-pill: calc(var(--radius) * 2.6);   /* 알약 배지 */

  /* 컨트롤 밀도 — 데이터 화면이라 일반 웹보다 작다 */
  --control-h: 32px;

  /* 타이포 — 외부 폰트 로드 금지(스펙 §4). 설치돼 있으면 잡히는 스택으로만 쓴다.
     본문·표·컨트롤 = 산세리프(아리따돋움 → Inter → 시스템)
     디스플레이·스탯 숫자 = 세리프(아리따부리 → 명조 → Georgia)
     AP의 목소리는 세리프 디스플레이 + 산세리프 본문의 대비다(apgroup.com). */
  --font-sans: "Arita Dotum", "아리따돋움", AritaDotum, Inter, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* ⚠️ 세리프 스택에 고딕(Apple SD Gothic Neo 등)을 섞지 않는다 — 한 대만 산세리프로
     떨어져도 화면의 목소리가 바뀐다. 폴백은 끝까지 명조/세리프만. */
  --font-display: "Arita Buri", "아리따부리", AritaBuri, "Noto Serif KR",
                  "Noto Serif CJK KR", "Nanum Myeongjo", Batang, 바탕,
                  Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Roboto Mono", monospace;
}

/* ── 토큰: 다크 (system) ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0f0f0f;
    --foreground: #f2f2f2;
    --canvas:     #0b0b0b;   /* 카드(#191919)보다 어둡게 — 도형-바탕 유지 */
    --card:       #191919;
    --card-foreground: #f2f2f2;
    --popover:    #191919;

    /* 다크 액센트는 라이트(#005295)보다 밝히되, 흰 글자가 AA를 넘는 선까지만 올린다.
       #1a76b5 — 흰 글자 4.88:1(AA ✓) · 캔버스(#0b0b0b) 4.03:1 · 카드(#191919) 3.60:1
       (둘 다 비문자 대비 3:1 ✓). 액센트 위 글자는 두 테마 모두 흰색 고정이다. */
    --primary: #1a76b5;
    --primary-foreground: #ffffff;
    --secondary: #242424;
    --secondary-foreground: #f2f2f2;
    --muted: #1e1e1e;
    --muted-foreground: #a1a1a1;
    --destructive: #e05a4d;

    --border: rgba(242, 242, 242, 0.12);
    --input:  rgba(242, 242, 242, 0.18);
    --ring: #1a76b5;
    --ring-soft: rgba(26, 118, 181, 0.45);
    --hairline: rgba(242, 242, 242, 0.12);
    --raised:   #303030;

    --leaf: #7cb6e2;

    --good: #57c66f;  --good-soft: #1b2a1e;
    --warn: #d9a441;  --warn-soft: #322a18;
    --bad:  #d98080;  --bad-soft:  #33201f;

    --up:   #f87171;  --up-soft:   #3a1f1f;
    --down: #60a5fa;  --down-soft: #17243a;

    --chart-1: #4d94d0;  --chart-2: #7cb6e2;  --chart-3: #a9d0ee;
    --chart-4: #8a8a8a;  --chart-5: #c4c4c4;
  }
}

/* ── 토큰: 다크 (명시 선택) ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0f0f0f;
  --foreground: #f2f2f2;
  --canvas:     #0b0b0b;   /* 카드(#191919)보다 어둡게 — 도형-바탕 유지 */
  --card:       #191919;
  --card-foreground: #f2f2f2;
  --popover:    #191919;

  /* 다크 액센트 — 위 @media 블록과 같은 값(#1a76b5, 흰 글자 4.88:1). 두 테마 모두 흰 글자. */
  --primary: #1a76b5;
  --primary-foreground: #ffffff;
  --secondary: #242424;
  --secondary-foreground: #f2f2f2;
  --muted: #1e1e1e;
  --muted-foreground: #a1a1a1;
  --destructive: #e05a4d;

  --border: rgba(242, 242, 242, 0.12);
  --input:  rgba(242, 242, 242, 0.18);
  --ring: #1a76b5;
  --ring-soft: rgba(26, 118, 181, 0.45);
  --hairline: rgba(242, 242, 242, 0.12);
  --raised:   #303030;

  --leaf: #7cb6e2;

  --good: #57c66f;  --good-soft: #1b2a1e;
  --warn: #d9a441;  --warn-soft: #322a18;
  --bad:  #d98080;  --bad-soft:  #33201f;

  --up:   #f87171;  --up-soft:   #3a1f1f;
  --down: #60a5fa;  --down-soft: #17243a;

  --chart-1: #4d94d0;  --chart-2: #7cb6e2;  --chart-3: #a9d0ee;
  --chart-4: #8a8a8a;  --chart-5: #c4c4c4;
}

/* ── 토큰: 라이트 (명시 선택) ───────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #111111;
  --canvas:     #f5f5f5;
  --card:       #ffffff;
  --card-foreground:       #111111;
  --popover:    #ffffff;

  --primary:    #005295;
  --primary-foreground:    #ffffff;
  --secondary:  #f0f0f0;
  --secondary-foreground:  #111111;
  --muted:      #f5f5f5;
  --muted-foreground:      #6b6b6b;
  --destructive:           #c0392b;

  --border:     #e5e5e5;
  --input:      #d4d4d4;
  --ring:       #005295;
  --ring-soft:  rgba(0, 82, 149, 0.28);
  --hairline:   rgba(17, 17, 17, 0.12);
  --raised:     #ffffff;

  --leaf:       #005295;

  --good: #277942;  --good-soft: #e3f2e4;
  --warn: #966319;  --warn-soft: #faf3e3;
  --bad:  #9b2c2c;  --bad-soft:  #f9e9e9;

  --up:   #dc2626;  --up-soft:   #fbe9e9;
  --down: #2563eb;  --down-soft: #e8eefc;

  --chart-1: #005295;  --chart-2: #3f7fb5;  --chart-3: #7ba7cc;
  --chart-4: #9a9a9a;  --chart-5: #c8c8c8;
}

/* ── 구(舊) 토큰 별칭 ────────────────────────────────────────────────────
   템플릿 <style> 블록(캘린더·추이·집중도·보유)이 옛 이름을 그대로 참조한다.
   이름은 유지하고 값만 Credit-Lens 토큰으로 갈아끼운다 — var() 는 사용 시점에
   해석되므로 테마가 바뀌면 별칭도 따라 바뀐다. 템플릿을 건드리지 않기 위한 장치.
   ⚠️ 새 스타일에는 아래 별칭 대신 위 원본 토큰을 쓸 것.                        */
:root {
  --paper:       var(--canvas);
  --panel:       var(--card);
  --panel-sub:   var(--muted);
  --ink:         var(--foreground);
  --ink-soft:    var(--muted-foreground);
  --ink-faint:   var(--muted-foreground);
  --hair:        var(--border);
  --hair-strong: var(--input);
  --accent:      var(--primary);    /* 옛 --accent = 면 채움용 강조색 → AP 블루(=chart-1) */
  --accent-soft: var(--secondary);  /* 뉴트럴 보조면 */
  --full:        var(--good);      --full-bg:    var(--good-soft);
  --part:        var(--warn);      --part-bg:    var(--warn-soft);
  --gap:         var(--bad);       --gap-bg:     var(--bad-soft);
  --neutral:     var(--muted-foreground);  --neutral-bg: var(--muted);
  --font-serif:  var(--font-display);  /* 옛 별칭 — 디스플레이 세리프로 연결 */
}

/* ============================================================================
   기반
   ============================================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;           /* 앱 본문 14px — 데이터 밀도 */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--leaf); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-soft);
  border-radius: var(--radius-sm);
}

/* ============================================================================
   상단바 — 랜딩과 앱이 같은 껍데기
   ============================================================================ */
.topbar {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1.25rem; min-height: 56px;   /* h-14 */
}

/* 브랜드 — AMOREPACIFIC 워드마크(사용자 지시 2026-09-01).
   ⚠️ 「워드마크 사용 금지」였던 종전 판정을 사용자가 뒤집었다. 블루 타일이 빠졌지만
   브랜드 블루는 활성 탭 언더라인·주 액션에 그대로 남는다.
   테마 스왑은 CSS로만 한다 — 라이트=잉크판, 다크=흰판. 기본(:root)이 라이트이므로
   흰판을 숨겨 두고, 다크 3분기(system·data-theme=dark)에서 뒤집는다. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 21px; width: auto; display: block; }
.brand-logo-white { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-ink { display: none; }
  :root:not([data-theme="light"]) .brand-logo-white { display: block; }
}
:root[data-theme="dark"] .brand-logo-ink { display: none; }
:root[data-theme="dark"] .brand-logo-white { display: block; }
/* 명시 라이트는 system이 다크여도 잉크판이어야 한다 */
:root[data-theme="light"] .brand-logo-ink { display: block; }
:root[data-theme="light"] .brand-logo-white { display: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: calc(var(--radius) * 0.62);
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  line-height: 1; user-select: none;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.1rem; letter-spacing: -0.005em;
  color: var(--foreground); white-space: nowrap;
}

/* 탭바 — 활성 표시는 브랜드 블루 언더라인(apgroup.com 문법). 면을 칠하지 않는다 */
.tabbar {
  display: flex; gap: .25rem; flex: 1; min-width: 0; flex-wrap: wrap;
  align-self: stretch; align-items: stretch;
}
.tab-link {
  display: inline-flex; align-items: center;
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
  text-decoration: none; padding: 0 .75rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  line-height: 1.5; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tab-link:hover { color: var(--foreground); text-decoration: none; }
.tab-link.active {
  color: var(--foreground); font-weight: 700;
  border-bottom-color: var(--primary);
}

/* 하위 탭 줄(대분류 안의 화면들) — 뉴트럴 캔버스 위 분절 컨트롤.
   활성은 순백 알약 + 헤어라인 링(shadcn 문법). 상단 탭의 언더라인과 층을 구분한다. */
.tabbar.subtabs {
  gap: .25rem; flex: 0 0 auto; align-self: flex-start; align-items: center;
  background: var(--secondary); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: .25rem;
}
.tabbar.subtabs .tab-link {
  font-size: .8125rem; padding: .25rem .875rem; height: 28px;
  border-radius: var(--radius-pill); border-bottom: none; margin-bottom: 0;
}
.tabbar.subtabs .tab-link.active {
  background: var(--raised); color: var(--foreground);
  box-shadow: 0 0 0 1px var(--hairline);
}

.user-box { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.user-name { font-size: .82rem; color: var(--muted-foreground); }
.logout-form { margin: 0; }

/* ============================================================================
   버튼 — 주 액션(AP 블루)은 화면당 1개. 필터·토글은 outline, 표 안 액션은 ghost
   ============================================================================ */
.btn,
.btn-primary,
.btn-logout,
.btn-outline,
.btn-ghost,
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 500;
  height: var(--control-h); padding: 0 .75rem;   /* h-8 px-3 */
  border-radius: var(--radius-lg); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-logout:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--ring-soft); }

/* outline — 필터·보조 액션 (.btn-logout 은 기존 마크업의 outline 자리).
   ⚠️ .btn-primary 보다 먼저 와야 class="btn btn-primary" 가 브랜드 면을 유지한다 */
.btn, .btn-outline, .btn-logout {
  background: transparent; color: var(--foreground); border-color: var(--input);
}
.btn:hover, .btn-outline:hover, .btn-logout:hover { background: var(--secondary); text-decoration: none; }

/* default — AP 블루 + 흰 글자. 화면당 1개 */
.btn-primary {
  background: var(--primary); color: var(--primary-foreground); border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(0.96); text-decoration: none; }

/* secondary — 보조 액션(뉴트럴 면) */
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: transparent; }
.btn-secondary:hover { filter: brightness(0.97); text-decoration: none; }

/* ghost — 표 안 인라인 액션. shadcn ghost 는 글자색이 foreground 다(muted 아님) —
   옆에 destructive 가 서면 muted 글자는 위계가 뒤집혀 보인다 */
.btn-ghost { background: transparent; color: var(--foreground); border-color: transparent; }
.btn-ghost:hover { background: var(--secondary); }

/* destructive — 삭제·해지 */
.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.btn-danger:hover { filter: brightness(0.97); }

.btn-sm { height: 28px; padding: 0 .625rem; font-size: .78rem; }   /* h-7 px-2.5 */
.btn-lg { height: 36px; padding: 0 1rem; font-size: .875rem; }      /* h-9 px-4 */
button[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================================
   레이아웃
   ============================================================================ */
.page { padding: 1rem 1.25rem 4rem; }
.page-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1rem;
}

/* 페이지 머리 — 아이브로우 + 문장형 제목(마침표). CL의 목소리는 명사 나열이 아니다.
   앱 화면이므로 랜딩 히어로만큼 크게 쓰지 않는다(§3.1 '페이지 제목(앱)'). */
.page-head { display: flex; flex-direction: column; gap: .125rem; padding: .25rem 0 0; }
.page-eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  color: var(--muted-foreground); text-transform: uppercase;
}
.page-title {
  margin: 0; font-family: var(--font-display);
  font-size: 2rem; line-height: 1.18;
  font-weight: 600; letter-spacing: -0.01em; color: var(--foreground);
}
@media (max-width: 768px) { .page-title { font-size: 1.4rem; } }
@media (max-width: 768px) {
  .page { padding: .75rem .75rem 3rem; }
  .topbar-inner { padding: 0 .75rem; gap: .75rem; }
  /* 좁은 폭에서 메뉴는 줄바꿈 대신 한 줄로 가로 스크롤(헤더가 세로로 부푸는 것 방지) */
  /* 모바일 탭 = 왼쪽 숨김 사이드바(≡) — 사용자 지시 2026-09-02. 데스크톱 규칙은 그대로 두고
     좁은 폭에서만 .tabbar를 화면 밖 고정 패널로 바꾼다. body.nav-open이 열림 상태. */
  .topbar-inner { gap: .6rem; }
  .topbar-inner .menu-btn { display: inline-flex; order: -1; }   /* 특이도 상향 + 맨 왼쪽(로고 앞), 사용자 지시 2026-09-02 */
  .user-box { margin-left: auto; }
  .tabbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(78vw, 280px); z-index: 1100;
    flex-direction: column; align-items: stretch; gap: .15rem; flex-wrap: nowrap;
    background: var(--card); border-right: 1px solid var(--hairline);
    box-shadow: 0 10px 40px rgba(0,0,0,.18); padding: 3.5rem .75rem 1rem;
    transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto;
  }
  body.nav-open .tabbar { transform: none; }
  .tabbar .tab-link { padding: .65rem .75rem; border-radius: var(--radius-md); font-size: .95rem; }
  body.nav-open .drawer-backdrop { display: block; }
  .tile .num { font-size: 1.625rem; }
}

/* 필터 바 / 기준일 바 — AsOfBar 관례: 카드 면 + 얇은 링, 프레임은 패딩만 */
.filters, .asof-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: .75rem;   /* AsOfBar = p-3 */
  min-height: 56px;
}
.filters label, .asof-bar label {
  font-size: .78rem; color: var(--muted-foreground); margin-right: .125rem;
}

/* 입력·선택 — 높이 32px, 포커스는 브랜드 블루 링 */
.filters select, .filters input,
.asof-bar select, .asof-bar input,
select.ctl, input.ctl {
  font-family: var(--font-sans); font-size: .8125rem; color: var(--foreground);
  height: var(--control-h); padding: 0 .625rem;   /* h-8 px-2.5 */
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  background: transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filters input[type="file"] {
  height: auto; padding: .3125rem .5rem;
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  background: transparent; font-size: .8125rem; color: var(--foreground);
}
/* 파일 선택 버튼은 UA 기본 모양이 남아 관리 화면만 다른 제품처럼 보인다 — secondary 로 맞춘다 */
.filters input[type="file"]::file-selector-button {
  height: 22px; margin-right: .5rem; padding: 0 .5rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--secondary); color: var(--secondary-foreground);
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500; cursor: pointer;
}
.filters input[type="file"]::file-selector-button:hover { filter: brightness(0.97); }
.filters select:focus-visible, .filters input:focus-visible,
.asof-bar select:focus-visible, .asof-bar input:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft);
}

/* ============================================================================
   카드 — 뉴트럴 캔버스 위 순백 카드. 그림자 없이 1px 헤어라인으로만 깊이를 준다
   (템플릿이 style="border-color:…" 로 강조 카드를 만들기 때문에 ring 대신 border)
   ============================================================================ */
.panel {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  padding: 1rem;   /* Card = py-4 px-4, 4px 그리드 */
}
.panel-title {
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  margin: 0 0 .75rem; color: var(--foreground);
}
/* 문장형 제목 — 화면당 1~2곳만. 아이브로우(.panel-eyebrow)와 짝을 이룬다 */
.panel-head { margin: 0 0 .5rem; }
.panel-eyebrow {
  /* .7rem(11.2px≈8.4pt) → .875rem(14px≈10.5pt): 사용자 지시 2026-09-02 「글씨크기 2pt 크게」 */
  display: block; font-size: .875rem; font-weight: 600; letter-spacing: .12em;
  color: var(--muted-foreground); margin-bottom: .125rem; text-transform: uppercase;
}
.panel-title.display {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em;
  line-height: 1.25; margin: 0;
}
.panel > .panel-title:only-child { margin-bottom: 0; }
.section-title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.005em; margin: 0 0 .5rem;
}
.eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.hint, .caption, .sub { font-size: .78rem; color: var(--muted-foreground); }
.tile .sub { font-size: .72rem; }
.mono, .code { font-family: var(--font-mono); font-size: .95em; }

/* 통계 타일 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.tile {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: 1rem;
  position: relative; overflow: hidden;
}
.tile .num {
  font-family: var(--font-display);
  font-size: 2rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em;
  /* ⚠️ 세리프는 옛 숫자(oldstyle)를 기본으로 쓰는 서체가 있다 — 높이를 맞춰 세운다 */
  font-variant-numeric: lining-nums tabular-nums; color: var(--foreground);
}
/* ⚠️ `.tile .num`이 color를 명시하므로(특정도 0,2,0) `.up`/`.down`(0,1,0)만으로는
   타일 숫자에 등락색이 먹지 않는다 — 같은 깊이로 다시 못 박는다. */
.tile .num.up   { color: var(--up); }
.tile .num.down { color: var(--down); }
.tile .num.flat { color: var(--muted-foreground); }
.tile .lab { font-weight: 600; margin: .25rem 0 0; font-size: .78rem; color: var(--muted-foreground); }
.tile .sub { color: var(--muted-foreground); font-size: .72rem; margin-top: .25rem; opacity: .85; }

/* 히어로 타일 — 화면의 첫 수치 1개만. 두꺼운 ink 테두리(가이드 §5)로 위계를 만든다.
   AP는 모노크롬이라 색이 아니라 선의 굵기가 위계를 만든다.
   ⚠️ 브랜드 면을 쓰지 않는다 — 주 액션 색이 수치 타일에 번지면 CTA가 죽는다. */
.tile-hero { border: 2px solid var(--foreground); }
.tile-hero .num { font-size: 2.625rem; }
.tile-hero .lab { color: var(--foreground); font-weight: 700; }
@media (max-width: 768px) { .tile-hero .num { font-size: 2rem; } }

/* 중첩 블록 — 카드 안의 보조 면(관리 화면의 안내·미리보기 박스).
   의미색이 필요하면 .subpanel-warn / .subpanel-alert 를 겹쳐 쓴다. */
.subpanel {
  background: var(--muted); color: var(--foreground);
  border-radius: var(--radius-md); padding: .75rem;
  margin-bottom: .75rem; font-size: .8125rem;
}
.subpanel-warn  { background: var(--warn-soft); color: var(--warn); }
.subpanel-alert { background: var(--bad-soft);  color: var(--bad); }
.subpanel-title { font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }

/* 폼 컨트롤 baseline — 표 안·중첩 블록 안의 맨 input/select/textarea 도
   shadcn 규격(h-8 · radius-lg · 1px input 테두리 · 포커스 링)을 따르게 한다.
   ⚠️ .filters 밖의 컨트롤이 브라우저 기본 모양으로 남으면 관리 화면만 다른 제품처럼 보인다.
   ⚠️ 로그인 입력(.login-input)은 이 선택자에 걸리지 않게 범위를 좁혔다. */
.tbl input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.tbl select, .tbl textarea,
.subpanel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.subpanel select {
  font-family: var(--font-sans); font-size: .8125rem; color: var(--foreground);
  height: var(--control-h); padding: 0 .625rem;
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  background: transparent; max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tbl textarea {
  height: auto; padding: .375rem .625rem; line-height: 1.5;
  font-family: var(--font-sans); resize: vertical;
}
.tbl input:focus-visible, .tbl select:focus-visible, .tbl textarea:focus-visible,
.subpanel input:focus-visible, .subpanel select:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft);
}
.tbl input::placeholder, .tbl textarea::placeholder,
.subpanel input::placeholder { color: var(--muted-foreground); }
/* 표 안에 컨트롤이 들어가면 셀 정렬 기준을 가운데로 내린다 */
.tbl tbody td.cell-form { vertical-align: middle; }

/* 안내 박스 */
.empty { color: var(--muted-foreground); font-size: .85rem; padding: .3rem 0; }
.info-box, .warn-box, .alert-box {
  border-radius: var(--radius-md); padding: .75rem; font-size: .8125rem;
}
.info-box  { background: var(--secondary); color: var(--foreground); }
.warn-box  { background: var(--warn-soft); color: var(--warn); }
.alert-box { background: var(--bad-soft);  color: var(--bad); }

/* ============================================================================
   표 — 숫자가 주인공. 단위는 헤더에, 셀에서 반복하지 않는다.
   모바일에서도 카드형으로 접지 않고 가로 스크롤을 유지한다(열 간 비교가 목적).
   ============================================================================ */
.scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--card);
}
.tbl {
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.tbl thead th {
  text-align: left; font-size: .75rem; font-weight: 500;
  color: var(--foreground); white-space: nowrap;
  height: 40px; padding: 0 .5rem;               /* h-10 px-2 */
  border-bottom: 1px solid var(--border);
}
.tbl tbody td {
  padding: .5rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.tbl tfoot td {
  padding: .5rem; border-top: 1px solid var(--border);
  background: var(--muted); font-weight: 700; font-size: .8125rem;
}
/* 수치 열 — 우측정렬 + tabular-nums (자릿수가 흔들리면 비교가 안 된다) */
.num-c {
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.tbl td.code, .tbl td .code { font-family: var(--font-mono); }

/* 행 강조 */
.tbl tbody tr.row-alert { background: var(--bad-soft); }
.tbl tbody tr.row-warn  { background: var(--warn-soft); }
.tbl tbody tr.row-muted td { color: var(--muted-foreground); }

/* ============================================================================
   등락 — 한국 관례: 상승=빨강 · 하락=파랑 · 보합=muted
   ⚠️ 하락 파랑(#2563eb)과 브랜드 블루(#005295)는 다른 색이다 — 하락은 표 안 수치에만.
   ============================================================================ */
.up, .pos   { color: var(--up); font-weight: 600; }
.down, .neg { color: var(--down); font-weight: 600; }
.flat, .zero { color: var(--muted-foreground); }
/* ⚠️ 등급 변동은 등락(방향색)이 아니라 판정이다 — 의미색을 쓴다 */
.rating-cut { color: var(--bad); font-weight: 700; }
.rating-up  { color: var(--good); font-weight: 700; }

/* ============================================================================
   배지 — 알약. 판정 배지는 의미색이며 브랜드 블루를 쓰지 않는다
   ============================================================================ */
.badge, .chip, .pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; font-weight: 500; line-height: 1;
  height: 20px; padding: 0 .5rem;   /* h-5 px-2 */
  border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.badge-ok      { background: var(--good-soft); color: var(--good); }
.badge-warn    { background: var(--warn-soft); color: var(--warn); }
.badge-gap,
.badge-danger  { background: var(--bad-soft);  color: var(--bad); }
.badge-neu     { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge-outline { background: transparent; color: var(--foreground); border-color: var(--input); }
.badge-sage    { background: var(--secondary); color: var(--secondary-foreground); }
/* 브랜드 강조에만 — 판정·상태 값에는 쓰지 않는다 */
.badge-brand   { background: var(--primary); color: var(--primary-foreground); }

/* ============================================================================
   로그인 — 뉴트럴 캔버스 위 순백 카드(앱과 같은 껍데기). 상단에 브랜드 마크.
   ============================================================================ */
.login-body {
  margin: 0; min-height: 100vh; background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); color: var(--foreground);
}
.login-wrap {
  width: 100%; max-width: 400px; padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
/* 로그인 브랜드 — 타일을 한 단계 키운다(랜딩 로고 자리) */
.login-brand { display: inline-flex; align-items: center; }
.login-brand .brand-logo { height: 28px; }

.login-card {
  width: 100%; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem;
}
.login-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.625rem;
  letter-spacing: -0.005em; text-align: center;
}
.login-sub {
  color: var(--muted-foreground); font-size: .8125rem;
  text-align: center; margin-bottom: 1rem;
}
.login-error {
  background: var(--bad-soft); color: var(--bad);
  border-radius: var(--radius-md); padding: .5rem .75rem; font-size: .8125rem;
}
.login-label { font-size: .78rem; font-weight: 500; color: var(--muted-foreground); margin-top: .25rem; }
.login-card .login-input {
  font-family: var(--font-sans); font-size: .875rem; color: var(--foreground);
  height: 36px; border: 1px solid var(--input); border-radius: var(--radius-lg);
  padding: 0 .75rem; background: transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-card .login-input:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft);
}
.login-submit { margin-top: 1rem; height: 40px; width: 100%; font-size: .875rem; font-weight: 600; }
.login-foot { font-size: .75rem; color: var(--muted-foreground); text-align: center; }

/* ============================================================================
   대시보드 그리드 — 계약정보(랜딩)의 위젯 배치. 패널 자체는 그대로 두고 배치만 얹는다.
   ⚠️ `minmax(0, …)`가 필수다. 기본값 `minmax(auto, …)`이면 안쪽 표(.scroll)의 내용
   너비가 열을 밀어내 페이지 전체에 가로 스크롤이 생긴다.
   ============================================================================ */
.dash-2col {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
@media (max-width: 1279px) { .dash-2col { grid-template-columns: minmax(0, 1fr); } }
/* 반폭 위젯의 캘린더는 셀 밀도를 한 단계 줄인다(도래액은 억 1자리 그대로) */
/* 2열 패널 안의 표는 .tbl의 min-width:640px를 풀어 패널 폭에 맞춘다 — 가로 스크롤 방지(사용자 지시 2026-09-02) */
.dash-2col .tbl { min-width: 0; }
.dash-2col .tbl th, .dash-2col .tbl td { padding-left: .5rem; padding-right: .5rem; }
.dash-2col .cal-table { min-width: 440px; }
.dash-2col .cal-table td.cal-day { height: 66px; }
.dash-2col .cal-table td.cal-day a { padding: .3rem .35rem; gap: .1rem; }
.dash-2col .cal-amt { font-size: .76rem; }
.dash-2col .cal-cnt { font-size: .66rem; }

/* ============================================================================
   만기 캘린더 월 그리드 — /calendar와 계약정보(/)가 같은 파셜(_calendar_grid.html)을
   공유한다. 규칙을 화면 템플릿 안에 두면 그 화면에서만 살아 있어 파셜이 다른 곳에서
   민무늬로 렌더된다 — 그래서 정본은 여기다.
   ============================================================================ */
.cal-nav { display:flex; align-items:center; gap:.5rem; }
.cal-nav a.btn-outline { text-decoration:none; }
.cal-table { min-width: 720px; }
.cal-table th { text-align:center; }
.cal-table td.cal-empty { background: var(--panel-sub); border:1px solid var(--hair); padding:0; }
.cal-table td.cal-day { border:1px solid var(--hair); padding:0; height: 84px; vertical-align: top; }
.cal-table td.cal-day a {
  display:flex; flex-direction:column; height:100%; padding:.4rem .5rem;
  text-decoration:none; color: var(--ink); gap:.15rem;
}
.cal-table td.cal-day:hover { background: var(--panel-sub); }
.cal-table td.cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-table td.cal-selected { background: var(--accent-soft); }
.cal-table td.cal-has { background: var(--part-bg); }
.cal-table td.cal-has.cal-selected { background: var(--accent-soft); }
.cal-daynum { font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); }
.cal-amt { font-family: var(--font-mono); font-weight:600; font-size:.82rem; color: var(--part); margin-top:.15rem; }
.cal-cnt { font-size:.7rem; color: var(--ink-faint); }
.cal-fillbar { margin-top:auto; height:4px; background: var(--panel-sub); border-radius:2px; overflow:hidden; }
.cal-fill { height:100%; background: var(--gap); }

/* 가운데 정렬 표 (사용자 지시 2026-09-01: 예치기관별 집중도) */
.tbl-center th, .tbl-center td, .tbl-center .num-c { text-align: center !important; }

/* 최종차주 코멘트 줄 — 리스크관리 표에서 차주 행 바로 아래에 항상 펼쳐져 있다.
   ⚠️ .tbl-center가 모든 td를 !important로 가운데 정렬하므로, 문장이 가운데로 밀리지
   않도록 같은 무게의 선택자로 왼쪽 정렬을 되돌린다(문장은 왼쪽에서 읽는다). */
.cmt-row td { background: var(--muted); text-align: left; }
.tbl-center tr.cmt-row td { text-align: left !important; }
.tbl-center tr.cr-row td, .tbl-center tr.cr-row td .cr-card, .cr-card summary, .cr-card * { text-align: left !important; }   /* 신평서 카드 펼침 내용 왼쪽 정렬(사용자 지시 2026-09-02) */
.cmt-body { white-space: pre-wrap; font-size: .8rem; line-height: 1.45; padding: .25rem .5rem .25rem 7ch; }   /* 왼쪽 여백 = 스페이스 7칸(7ch), 사용자 지시 2026-09-02 */

/* ============================================================================
   대시보드(랜딩 `/`) — 위젯 머리·미니 스탯·신선도 줄
   ⚠️ 위젯 제목은 아이브로우뿐이다(문장형 제목 금지) — 「자세히 →」가 오른쪽에 붙는다.
   ============================================================================ */
.widget-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.widget-more { font-size: .78rem; color: var(--muted-foreground); white-space: nowrap; }
.widget-more:hover { color: var(--foreground); }

/* 미니 스탯 — 대시보드 위젯 안의 4칸. .tile보다 한 단계 낮은 밀도다
   (위젯 안의 카드라 테두리를 두지 않고 면으로만 구분한다). */
.mini-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mini-tile { background: var(--muted); border-radius: var(--radius-lg); padding: .625rem .75rem; }
.mini-tile .num {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; color: var(--foreground);
}
.mini-tile .num.up   { color: var(--up); }
.mini-tile .num.down { color: var(--down); }
.mini-tile .num.flat { color: var(--muted-foreground); }
.mini-tile .lab { font-size: .72rem; font-weight: 600; color: var(--muted-foreground); margin-top: .125rem; }

/* 데이터 신선도 — 한 줄. 좁은 화면에서는 줄바꿈만 하고 가로 스크롤을 만들지 않는다. */
.dash-fresh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; padding: .625rem 1rem; }
.fresh-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; font-size: .8rem; }
.fresh-item { color: var(--muted-foreground); }
.fresh-item b { color: var(--foreground); font-weight: 600; font-family: var(--font-mono); font-size: .78rem; }
.fresh-sep { color: var(--muted-foreground); }

/* ============================================================================
   캘린더 셀 — 한 칸 안에 **형제 앵커 2개**다(자산 → /assets, 계약 → /contracts).
   ⚠️ `<a>` 중첩은 HTML 위반이라 계약 뱃지를 셀 앵커 밖으로 뺐다. 절대배치는 쓰지 않는다
   (표 칸은 위치기준(containing block)이 브라우저마다 달라 상자가 칸 밖으로 샜다) —
   칸 안을 세로 flex로 쌓아 **보이던 순서 그대로**(일자·도래액 → 계약 뱃지 → 채움바) 둔다.
   ============================================================================ */
.cal-table td.cal-day .cal-cell { display: flex; flex-direction: column; height: 100%; }
.cal-table td.cal-day a.cal-main { height: auto; flex: 1 1 auto; }
.cal-table td.cal-day a.cal-contract {
  /* ⚠️ height/flex를 명시로 되돌린다 — 위의 `td.cal-day a`가 height:100%를 걸어 두어
     그대로 두면 뱃지가 칸 높이만큼 부풀어 채움바를 밀어낸다. */
  display: block; height: auto; flex: 0 0 auto; line-height: 1.3;
  padding: 0 .5rem; font-size: .68rem; color: var(--part);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-table td.cal-day a.cal-contract:hover { text-decoration: underline; color: var(--foreground); }
/* 채움바는 이제 앵커 밖이라 좌우 여백을 스스로 갖는다(margin-top:auto는 그대로 바닥에 붙인다) */
.cal-table td.cal-day .cal-cell > .cal-fillbar { margin: .15rem .5rem .4rem; margin-top: auto; }
.dash-2col .cal-table td.cal-day a.cal-contract { padding: 0 .35rem; }
.dash-2col .cal-table td.cal-day .cal-cell > .cal-fillbar { margin: .1rem .35rem .3rem; margin-top: auto; }

/* 표 안 즉시 필터 바 — 서버 필터(.filters)와 같은 규격, 표 바로 위 */
.tbl-filter { margin-bottom: .5rem; }

/* 계약만기 셀 — 자산만기와 같은 2줄 양식(금액/건수), 연한 파란색 바탕(사용자 지시 2026-09-02) */
.cal-table td.cal-day a.cal-contract {
  display:flex; flex-direction:column; align-items:flex-start;
  background: #e8f1fa; color: var(--primary); border-radius: 4px;
  padding: .15rem .35rem; margin-top: .15rem; text-decoration: none;
}
.cal-table td.cal-day a.cal-contract .cal-amt { color: var(--primary); margin-top: 0; }
.cal-table td.cal-day a.cal-contract .cal-cnt { color: var(--primary); opacity: .8; }
.cal-table td.cal-day a.cal-contract:hover { background: #d6e6f5; color: var(--primary); }
:root:not([data-theme="light"]) .cal-table td.cal-day a.cal-contract { background: rgba(0,82,149,.25); }

/* 리스크관리 차주 행 음영 — AP 블루를 옅게 푼 연파랑(사용자 지시 2026-09-02). 코멘트 줄(회색)과 구분. */
.tbl tr.ob-row td { background: #eef4fa; }
:root:not([data-theme="light"]) .tbl tr.ob-row td { background: rgba(0,82,149,.18); }

/* 카드 숫자 옆 보조값(예: 현금성 비중) */
.tile .num .num-sub { font-size: .55em; font-weight: 500; color: var(--muted-foreground); }

/* 캘린더 팝업(모달) — 2026-09-02 */
/* ⚠️ hidden 속성보다 아래 display:flex가 이겨서 닫히지 않던 버그(2026-09-02) — [hidden]을 명시로 숨긴다 */
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; overflow-y: auto; }   /* 세로 가운데(사용자 지시 2026-09-02) */
.modal { position: relative; background: var(--card, var(--background)); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: min(1100px, 100%); max-height: calc(100vh - 4rem); overflow: auto; padding: 1rem 1.25rem; }
.modal .panel { border: 0; box-shadow: none; padding: 0; margin: 0; }
.modal-close { position: absolute; top: .5rem; right: .6rem; z-index: 5; border: 0; background: transparent;
  width: 2rem; height: 2rem; border-radius: 999px;
  font-size: 1.4rem; line-height: 1; color: var(--muted-foreground); cursor: pointer; }
.modal-close:hover { color: var(--foreground); background: var(--muted); }
body.modal-open { overflow: hidden; }

/* 부제 괄호 부분 — 본제보다 3pt(4px) 작게(사용자 지시 2026-09-02) */
.page-title-sub { font-size: calc(1em - 4px); }

/* ≡ 버튼·사이드바 배경 — 데스크톱에서는 숨김, 모바일 미디어쿼리에서 켠다 */
.menu-btn { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--card);
  color: var(--foreground); font-size: 1.35rem; line-height: 1; cursor: pointer; z-index: 1110; position: relative; }
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 1090; }
.drawer-backdrop[hidden] { display: none !important; }
body.nav-open .drawer-backdrop[hidden] { display: block !important; }

/* 로그인 「아이디·비밀번호 저장」 체크 줄 */
.login-remember { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 .9rem; font-size: .85rem; color: var(--muted-foreground); cursor: pointer; }
.login-remember input { width: 1rem; height: 1rem; accent-color: var(--primary); }