@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');

/* Pretendard 폰트 로드 (CDN) */
/* 디자인 시스템 토큰 (간격/라운드/폰트크기/그림자/의미색 등) */
/**
 * 디자인 시스템 토큰
 *
 * 변경 시 docs/design-system/tokens.md 도 함께 수정.
 * 색상 raw hex/rgb 사용 금지 (이 파일과 style.css 제외) — npm run lint:tokens 로 검사.
 *
 * 기존 style.css 의 토큰(--primary-color, --text-*, --surface-*, --border-color 등)은
 * 그대로 유지하고, 이 파일은 빠져 있던 토큰만 추가한다.
 */
:root {
  /* ══════════════════════════════════════════════════════════════════════
     @tier seed — 씨앗 (디자인 시스템 2기)
     테마가 바꾸는 유일한 값. 아래 사다리·역할 토큰은 전부 여기서 계산된다.
     ⛔ 화면은 씨앗을 직접 쓰지 않는다 (lint:role 이 막는다).
     상세: docs/design-system/v2-architecture.md
     ══════════════════════════════════════════════════════════════════════ */
  --seed-space-unit: 4px;      /* 간격의 기본 눈금 */
  --seed-density: 1;           /* 화면 밀도 — 0.85 빽빽 · 1.15 넉넉 */
  --seed-radius: 6px;          /* 모서리 기준 (실측: 버튼 79%·입력 54% 가 6px) */
  --seed-font-family: 'Pretendard Variable';   /* 본문 글꼴 — 테마가 서체를 바꾸는 자리 */
  --seed-font-mono: ui-monospace;              /* 등폭 글꼴 */
  --seed-font-size: 14px;      /* 본문 기준 (실측: 판·머리·칸·툴바 100% 가 14px) */
  --seed-font-scale: 1;        /* 글자 크기 배율 */
  --seed-title-weight: 600;    /* 제목 굵기 (실측 48%) */
  --seed-motion: 1;            /* 전환 시간 배율 — 0 이면 애니메이션 없음 */
  --seed-elevation: 1;         /* 그림자 세기 배율 */
  --seed-ambient: 1;           /* 바탕 무늬(글로우) 세기 — 0 이면 무늬 없음 */
  --seed-border-width: 1px;    /* 선 두께 */
  --seed-row-height: 44px;     /* 목록 행 높이 (실측 40%) */

  /* 씨앗에서 곧바로 나오는 단위 — 아래 역할 토큰이 이것으로 계산한다 */
  --u: calc(var(--seed-space-unit) * var(--seed-density));
  /* @tier end */

  /* === Spacing (4px 베이스, rem 단위) === */
  /* ⛔ 씨앗에서 파생한다 — 하드코딩하면 공통 컴포넌트(버튼·목록·모달)가 밀도 씨앗을 안 따라,
     화면 픽셀의 대부분이 테마에서 빠진다(2026-08-29 발견). */

  /* === 페이지/탭 콘텐츠 여백 (상단·좌·우 공통) ===
     설정 탭 등 콘텐츠의 상단·좌·우 여백을 이 토큰 하나로 통일.
     데스크탑 1rem, 좁은 화면(≤768px) 0.5rem 으로 축소. */
  --page-pad-x: calc(1rem * var(--seed-density));

  /* === Border radius === */

  /* === Font family (글꼴 스택 — 단일 진실 원천) ===
     ⛔ 화면 어디서도 글꼴 스택을 다시 적지 않는다. 스택을 그 자리에서 손으로 적으면
        순서 하나만 달라도 그 화면만 다른 글꼴로 그려진다(실사고 2026-08-21:
        MarkdownViewer 가 -apple-system 을 Pretendard 앞에 두어 그 화면만 애플 기본
        글꼴로 렌더). 본문은 상속으로 충분하고, 되돌릴 일이 있으면 var(--font-sans).
     ⛔ 코드·ID·해시·수치 같은 등폭 글자는 반드시 var(--font-mono) — 손으로 적으면
        같은 사이트 안에서 SF Mono / Courier New / Fira Code 가 뒤섞인다
        (실측 2026-08-21: 모노 스택 10종, 총 96곳). */
  /* ⛔ 맨 앞은 **씨앗**이다 — 테마가 서체를 갈아 끼우는 지점(디자인 시스템 2기).
     뒤는 그 글꼴이 없을 때의 사다리이므로 순서를 바꾸지 않는다. */
  --font-sans:
    var(--seed-font-family), 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-mono:
    var(--seed-font-mono), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'D2Coding', 'Nanum Gothic Coding', monospace;

  /* === Font sizes (12px 기본) ===
     ⛔ 이 사다리 밖의 크기를 쓰지 않는다. 밖의 값이 필요해 보이면 사다리에 없는 단이
        정말 필요한 것인지 먼저 따지고, 필요하면 **여기에 단을 추가**한다 — 그 자리에서
        raw 값 + css-ignore 로 빠져나가면 사다리가 이름 없는 값으로 계속 늘어난다. */
  /* 디스플레이 단 — 통계 수치·소개 화면 표제처럼 '읽는 글'이 아닌 큰 글자 전용.
     목록·폼·카드 본문에는 쓰지 않는다. */

  /* === Icon sizes (아이콘·장식 글리프 전용 사다리) ===
     아이콘은 '읽는 글자'가 아니라 **그림**이라 본문 사다리(--font-*)와 축이 다르다.
     FontAwesome 은 font-size 로 크기를 받으므로 여기 단을 쓴다.
     ⛔ 아이콘 크기를 raw px/rem/em 으로 적지 않는다 — em 으로 적으면 부모에 따라
        9.6px·11.52px 처럼 이름 없는 크기가 화면마다 생긴다(실측 2026-08-21). */

  /* === 상대 글자 크기 (부모를 따라가야 하는 조각) ===
     건수 `(12)`·아이디 `#572375`·단위 `14.6MB`·시각처럼 **앞 글자에 곁들이는 조각**은
     절대 크기로 못 박으면 안 된다 — 14px 제목 옆과 11px 라벨 옆이 같은 크기가 돼 어긋난다.
     그렇다고 그때그때 0.8em·0.85em·0.9em·0.95em 을 손으로 적으면(실측 2026-08-21: 비율 6종)
     화면마다 다른 비율이 된다. **비율도 사다리로 못 박는다.** */
  --font-rel-sm: 0.85em;   /* 곁들이는 조각 — 건수·아이디·단위·시각 */
  --font-rel-xs: 0.7em;    /* 아주 작은 표식 — 겹친 화살표 등 */
  --font-rel-code: 0.9em;  /* 본문 속 인라인 코드(code/pre) — 산돌 대비 등폭이 커 보여 한 톤 낮춘다 */

  /* === Font weights === */

  /* === 제목의 자리별 단 (사용자 확정 2026-08-22) ===
     제목은 **자리**에 따라 크기가 다른 게 맞다(표지 44 · 화면 20 · 절 18 · 카드 16 · 행 14).
     ⛔ 어긋나면 안 되는 것은 **굵기와 색**이다 — 실측(2026-08-22) 결과 같은 20px 인데
        600/700 이 섞이고, 같은 14px 행 제목이 600 흰색·600 회색·400 흰색으로 갈려 있었다.
     아래 굵기를 자리마다 못 박고, 제목 색은 **--text-primary 하나**로 한다.
     (회색 제목이 필요하면 그건 제목이 아니라 '곁들이는 글'이다 — --text-secondary 로.) */

  /* === Line heights === */
  --line-none: 1;            /* 버튼/뱃지/단일 줄 컨트롤 */
  --line-snug: 1.2;          /* 밀집 카드/메타 텍스트 */
  --line-tight: 1.25;        /* 기본 빽빽 */
  --line-comfortable: 1.4;   /* 목록/폼 본문 */
  --line-normal: 1.5;        /* 본문 기본 */
  --line-relaxed: 1.7;       /* 긴 본문/안내 */

  /* === 의미 색상 (테마 무관 — 상태 표현) === */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  /* --primary-color, --primary-hover 는 style.css 에 정의됨.
     (구 --success-color 는 --primary 와 값이 겹치는 중복이라 제거 → 성공 의미는 --color-success 로 통합) */

  /* === 분류 강조색 (status 외 카테고리 구분 — 뱃지·라벨·차트) === */
  /* purple·indigo 는 **글자색으로도** 쓰인다(뱃지 soft, 링크). 원래 값은 연한 면
     (--surface-muted #1a1a1a) 위에서 4.40 / 3.90 으로 본문 AA(4.5) 미달이라
     한 단 밝게 올렸다(5.96 / 5.83). 실측 2026-08-21 lint:contrast. */
  --color-purple: #b47cf9;
  --color-indigo: #818cf8;
  --color-orange: #f97316;
  --color-cyan: #06b6d4;
  --color-pink: #ec4899;
  --color-lime: #84cc16;

  /* === 고정 브랜드색 (외부 규정 — 리테마 대상 아님) === */
  --brand-kakao: #fee500;

  /* === 장식색 (일러스트 — 책 메타포) === */
  --deco-book-page: #f5efdc;
  --deco-book-page-line: #d8cfb2;

  /* === 상태 표면 (테마 의존 — 다크 기본) === */
  /* === 화면 바탕 층 ===
     다크는 앱 껍데기(셸·상단바·사이드바·탭바·페이지 판)를 **비워** 바탕의 은은한
     글로우가 그대로 비치게 한다. 라이트는 글로우가 없으므로 지금까지의 면색 그대로.
     ⛔ 카드·드롭다운·모달은 이 토큰을 쓰지 않는다 — 그것들은 바탕 위에 **떠 있어야**
        하므로 불투명(--card-bg / --surface-color)이라야 한다. */
  --chrome-bg: transparent;   /* 껍데기 판 */

  /* 바탕 글로우 — style.css 의 body::before 가 그린다. 알파는 0.10 을 넘기지 않는다.
     ⛔ 색을 박아 두지 않는다 — **주제색(씨앗)에서 파생**한다. 예전엔 초록이 박혀 있어
     테마를 바꿔도 바탕만 초록으로 남았다(사용자 지적 2026-08-29). */
  --app-ambient:
    radial-gradient(circle at 18% 22%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.10), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.07), transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(99, 102, 241, 0.05), transparent 34%);

  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(255, 255, 255, 0.08);
  /* 목록 테이블 교대 행(zebra) 배경 — 검은 배경 위에서 또렷이 보이는 수준 */
  --surface-stripe: rgba(255, 255, 255, 0.05);

  /* === 의미색 연한 배경 (뱃지·알림 박스 틴트·선택 칩) === */
  --surface-primary-soft: rgba(var(--seed-brand-rgb, 16, 185, 129), 0.12);
  /* 손잡이 자리처럼 **한 점으로 눈을 모으는** 자리에 쓰는 한 단 진한 브랜드 면.
     ⛔ 면 전체를 이 값으로 채우지 않는다 — 옅은 값에서 이 값으로 번지게 해서 쓴다. */
  --surface-primary-mid: rgba(var(--seed-brand-rgb, 16, 185, 129), 0.3);
  --surface-warning-soft: rgba(245, 158, 11, 0.15);
  --surface-danger-soft: rgba(239, 68, 68, 0.10);
  /* 브랜드의 mid 와 같은 단 — 옅은 틴트로는 수면·손잡이가 안 읽히는 작은 자리에 쓴다.
     ⛔ 판·카드 같은 넓은 면을 이 값으로 채우지 않는다(brand 의 mid 와 같은 제약). */
  --surface-warning-mid: rgba(245, 158, 11, 0.3);
  --surface-danger-mid: rgba(239, 68, 68, 0.3);
  --surface-info-soft: rgba(59, 130, 246, 0.12);
  --surface-success-soft: rgba(34, 197, 94, 0.12);
  --surface-purple-soft: rgba(168, 85, 247, 0.12);
  --surface-indigo-soft: rgba(99, 102, 241, 0.12);
  --surface-orange-soft: rgba(249, 115, 22, 0.12);
  --surface-cyan-soft: rgba(6, 182, 212, 0.12);
  --surface-pink-soft: rgba(236, 72, 153, 0.12);
  --surface-lime-soft: rgba(132, 204, 22, 0.12);

  /* === 키워드 검색 형광 표시 (사이트 전역 단일 진실) ===
     문서/상품/회사 카드, 목록(HighlightText), 메타편집기, 비교, 터미널 등
     모든 키워드 형광처리가 이 토큰 하나만 참조한다 → 여기서만 고치면 전역 반영.
     솔리드는 과하므로 워닝색 반투명 틴트. 다크 기본값(밝은 워닝색이라 조금 옅게). */
  --highlight-mark-bg: color-mix(in srgb, var(--color-warning) 32%, transparent);

  /* === 중립 경계선 (slate 반투명 — 테마 무관, 미세 구분선) === */
  --border-subtle: rgba(148, 163, 184, 0.15);

  /* === 스크롤바 (테마 의존 — 다크 기본) === */
  --scrollbar-thumb: #4a5568;
  --scrollbar-thumb-hover: #718096;
  --scrollbar-track: rgba(255, 255, 255, 0.05);

  /* === 고정색 — 컬러/accent 배경 위 텍스트·아이콘 (테마 무관) === */
  /* === 면 위의 잉크 (on-color) ===
     채워진 색 면(primary 버튼·의미색 뱃지) 위에 얹는 글자·아이콘 색.
     ⛔ 면 위 잉크로 `--background-color` 나 `--color-white` 를 빌려 쓰지 않는다 —
        이름이 뜻을 못 담고, 배경 토큰을 손대면 엉뚱하게 글자색이 따라 바뀐다.
        잉크는 이 토큰 하나로만 바꾼다(전 화면 버튼·뱃지·아바타가 한 번에 따라온다).

     ✅ **잉크는 흰색 하나로 끝났다 — 고칠 곳은 언제나 면이다.**
        다크의 원색(브랜드 #10b981 2.54 · 주황 2.15 · 연초록 2.28 · 빨강 3.76 · 파랑 3.68)
        위에 흰 글씨를 얹으면 본문 AA(4.5)에 못 미친다. 어두운 잉크로 바꿔 보았으나
        **사용자가 밝은 쪽을 택했다**(2026-08-21). 그래서 처방은 잉크가 아니라 면이다 —
        브랜드는 2026-08-29 에, 나머지 의미색·보조색은 2026-09-03 에 **한 단 깊게**
        갔다(`--bg-<의미>`, 씨앗에서 color-mix 56% + 검정 44%). 실측 6.07~9.06.
        ⛔ 그래서 `lint:contrast` 의 알려진 예외 목록은 **비어 있다.** 채워진 면 위 흰
           글씨가 다시 걸리면 그것은 예외가 아니라 **면을 잘못 고른 것**이다 —
           `--ink-<의미>`(잉크)를 면으로 쓰지 않았는지부터 본다.
     라이트는 의미색이 원래 깊어(5.02~6.47) 원색 그대로 면이 된다. */
  --on-solid: #ffffff;    /* 채워진 의미색(danger/warning/info/success) 면 위 */

  --color-white: #ffffff;
  --color-black: #000000;

  /* === RGB 트리플 — 투명도 변종용 (rgba(var(--xxx-rgb), α)) ===
     의미색의 반투명 테두리·오버레이·glow 를 토큰 기반으로 표현. 색상값은
     위 hex 토큰과 동기 유지할 것. */
  --primary-rgb: var(--seed-brand-rgb, 16, 185, 129);
  /* 채워진 브랜드 면의 기본값 — 테마 블록이 각자 덮어쓴다(style.css). 여기 값이 없으면
     data-theme 이 붙기 전 한 순간 면이 통째로 사라진다. */
  --surface-brand: color-mix(in srgb, rgb(var(--seed-brand-rgb, 16, 185, 129)) 56%, #000 44%);
  /* 의미색 면도 같은 폴백을 갖는다 — 테마 블록이 각자 덮어쓴다(style.css). */
  --surface-danger: color-mix(in srgb, var(--color-danger) 56%, #000 44%);
  --surface-warning: color-mix(in srgb, var(--color-warning) 56%, #000 44%);
  --surface-success: color-mix(in srgb, var(--color-success) 56%, #000 44%);
  --surface-info: color-mix(in srgb, var(--color-info) 56%, #000 44%);
  --surface-purple: color-mix(in srgb, var(--color-purple) 56%, #000 44%);
  --surface-indigo: color-mix(in srgb, var(--color-indigo) 56%, #000 44%);
  --surface-orange: color-mix(in srgb, var(--color-orange) 56%, #000 44%);

  /* === 포커스 링 === */
  --ring-focus: 0 0 0 3px rgba(var(--seed-brand-rgb, 16, 185, 129), 0.18);

  /* 초점 테두리 — 키보드로 옮겨 다닐 때 「지금 어디인지」를 보이게 한다(WCAG 2.4.7).
     ⛔ 이 값을 화면마다 손으로 적지 않는다. 대부분의 컨트롤은 이미 자기 방식(테두리 색·그림자)으로
        초점을 알리고 있고(2026-08-22 실측 615개 중 610개), 이 토큰은 **아무 표시도 없는 것**에만
        걸리는 안전망(style.css 의 :where(...) 규칙)에서 쓰인다. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.18);

  /* === Shadows === */
  --shadow-sm: 0 calc(1px * var(--seed-elevation)) calc(2px * var(--seed-elevation)) rgba(0, 0, 0, 0.08);
  --shadow-md: 0 calc(4px * var(--seed-elevation)) calc(12px * var(--seed-elevation)) rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 calc(8px * var(--seed-elevation)) calc(20px * var(--seed-elevation)) rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 calc(18px * var(--seed-elevation)) calc(45px * var(--seed-elevation)) rgba(15, 23, 42, 0.45);

  /* === Z-index 단계 ===
     ⛔ **손으로 숫자를 쓰지 않는다.** 2026-09-03 실측: raw z-index 94건 중 16건이 전역 층인데
        사다리에 그 단이 없어서 1100·1500·2000·2500·9999 같은 값을 손으로 적고 있었다.
        같은 뜻(모달 뒷판)이 다섯 값으로 갈려 있었고, `--z-modal-backdrop` 은 **쓰는 곳이 0곳**이었다.
        단이 없으면 숫자를 쓰지 말고 **여기에 단을 만든다.** */
  /* 판 안에서 떠 있는 조작부(분리대 손잡이 무리·격자 고르개).
     본문 위·앱 껍데기(1000~) 아래 — 판을 벗어나지 않는 것들이다. */
  --z-pane-control: 100;
  /* 판 안에서 쓰는 뒷판 — **앱 껍데기(상단바·사이드바)를 덮지 않는다.**
     ⛔ 모달 뒷판(--z-modal-backdrop 9000)과 다른 것이다: 그쪽은 화면 전체를 덮어 껍데기까지
        함께 흐리고, 이쪽은 본문만 덮어 껍데기가 선명하게 남는다(실측 2026-09-03에 두 모습을
        나란히 찍어 확인). 어느 쪽인지는 **그 판이 정한다** — 값으로 정하지 말 것. */
  --z-pane-backdrop: 1000;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  /* 좌/우 분할 분리대(드래그 핸들 + < = > 토글 버튼).
     - sticky 헤더(1020) 의 negative margin 이 분리대를 덮지 않도록 그보다 위
     - 단 앱 크롬(--z-fixed=1030)보다는 아래 — 안 그러면 탑바 드롭다운이 분리대 뒤로 깔림 */
  --z-splitter: 1021;
  --z-fixed: 1030;
  /* 모바일 내비게이션 드로어(사이드바) + 백드롭.
     반드시 앱 크롬(--z-fixed=1030)보다 위 — 그렇지 않으면 드로어가 탑바에 가려진다.
     백드롭은 탑바 위·드로어 아래에 와서 탑바까지 함께 어둡게 덮는다. */
  --z-drawer-backdrop: 1035;
  --z-drawer: 1040;
  /* 껍데기(상단바) 위로 여는 메뉴 — 드로어(1040)보다도 위라야 모바일에서 안 깔린다.
     떠 있는 것(9000~)보다는 아래 — 모달이 열리면 메뉴는 그 밑으로 들어가야 한다. */
  --z-chrome-menu: 1100;
  --z-chrome-submenu: 1101;   /* 그 메뉴가 여는 하위 메뉴 — 부모 바로 위 한 단 */
  /* 분할 드래그 중 iframe/PDF 가 마우스 이벤트 가로채지 못하게 깔리는 overlay.
     반드시 --z-splitter 보다 낮아야 한다 — 그렇지 않으면 mousedown 직후 Vue 리렌더로
     overlay 가 < = > 버튼 위를 덮어, mouseup 이 overlay 에서 발생 → click 이 공통 조상에서
     fire 되어 버튼 @click 이 호출되지 않는 회귀가 발생한다 (#2026-05-21 발견). */
  --z-resize-overlay: 5;
  /* 모달의 뒷판 — `inset: 0` 로 화면을 덮고 --bg-backdrop 를 칠하는 그 층이다.
     ⛔ 도메인 모달이 제 오버레이를 손으로 만들며 1000·1500·2000·2500·10000 을 적어 두어
        이 단이 오래 비어 있었다(2026-09-03에 6곳을 여기로 모았다). 새 오버레이도 여기다. */
  --z-modal-backdrop: 9000;
  --z-modal: 10000;
  /* 트리거에 붙는 팝오버(AppPopover). body 로 텔레포트되므로 페이지의 다른 레이어와 직접 겨룬다 —
     분할 화면 분리대(1021)·앱 크롬(1030)보다 위여야 메타 내용보기 3단에서 안 깔린다
     (2026-08-02 화면 검수에서 팝오버가 --z-dropdown(1000) 이라 뒤로 깔리는 것을 확인). */
  --z-popover: 11000;
  --z-toast: 12000;
  --z-tooltip: 13000;
  /* 본문 바로가기 — 초점을 받는 순간 무엇에도 가리면 안 되므로 가장 위. */
  --z-skip-link: 14000;

  /* === 전환 === */

  /* === 백드롭 === */
  --backdrop-bg: rgba(15, 23, 42, 0.55);
  --backdrop-blur: blur(4px);

  /* === 컴포넌트 크기 (버튼/입력 통일) === */
  --control-height-xs: calc(22px * var(--seed-density));
  --control-height-sm: calc(26px * var(--seed-density));
  --control-height-md: calc(32px * var(--seed-density));
  --control-height-lg: calc(40px * var(--seed-density));

  /* === 토글 스위치 (자체 위젯 — 트랙·엄지 산술이 맞물려 있으므로 한 묶음으로 토큰화) ===
     트랙 안에 엄지가 (track-h - thumb)/2 = 2px 패딩을 두고 들어가는 비율 유지.
     md: 텍스트/스타일 토글(추출 상태바). sm: on/off 토글(규칙 탭 등). */

  /* 앱 셸 상단 바 높이 — 탑바(Topbar)와 사이드바 헤더(Sidebar header)가
     공유해 두 영역의 아래 구분선이 같은 높이에서 만나도록 한다. */
  --app-header-height: 57px;

  /* === 차트 높이 ===
     모니터링 패널 안에 끼워 넣는 추이 차트. 값 자체보다 '패널마다 제각각이 아닐 것'이 중요하다
     (파싱 모니터링의 시간대별 차트가 쓰던 150px 을 기준으로 삼았다). */
  --chart-height-sm: 150px;
  --chart-height-md: 260px;
  /* 차트가 그 판의 «주인공»인 자리(통계 화면·상세의 큰 차트).
     ⛔ 실측 2026-09-04: 옮기기 전 화면들이 160·180·280·300·320·350·360px 로 **일곱 갈래**를
        손으로 적고 있었다. 세 단(sm·md·lg)으로 모은다 — 가장 크게 움직이는 자리도 40px 이다. */
  --chart-height-lg: 320px;
  /* 스파크라인 — 값 옆에 곁들이는 초소형 추이. 글자 한 줄보다 낮아야 줄을 밀지 않는다. */
  --chart-height-spark: 12px;
  /* 카드 안에서 추이 자체가 주인공인 자리(사용량 모니터링의 최근 60분). 축은 여전히 없다. */
  --chart-height-spark-lg: 2.5rem;

  /* === 달력 ===
     월간 달력이 화면 높이를 채우되, 화면이 낮아도 한 달이 뭉개지지 않을 최소 높이.
     6주 × 한 칸 최소 70px 기준(칸 안에 날짜 + 파비콘 한 줄이 들어가는 크기). */

  /* === 목록 화면 (list-screen) === */
  /* 테이블 행은 고정 높이. (카드는 내용에 따른 가변 높이 — 측정형 가상 스크롤) */

  /* === 장해 도해 부위색 (참조자료 > 장해) ===
     장해분류표 13개 신체부위를 서로 구분하는 분류색. 상태색(danger/warning/…)이 아니라
     **분류색**이라 의미가 없다 — 이웃한 부위끼리 헷갈리지 않는 것만이 목적이다.
     ⚠️ 색상환을 고르게 돌리되 채도를 낮췄다. 원색 13개를 몸 위에 얹으면 도해가 아니라
        색표가 되고, 값 배지(강조색)가 부위색에 묻힌다.
     ⚠️ 실제 칠은 이 색을 몸통색과 섞어 쓴다(선택 전 옅게 → 선택 시 진하게).
        --disability-zone-* 가 그 섞는 비율이다. */
  --disability-part-1: #a9737a;
  --disability-part-2: #be9469;
  --disability-part-3: #6e97a0;
  --disability-part-4: #93a074;
  --disability-part-5: #7fa08c;
  --disability-part-6: #7c8fbc;
  --disability-part-7: #9c88b8;
  --disability-part-8: #6e9ab4;
  --disability-part-9: #be9b77;
  --disability-part-10: #b683a6;
  --disability-part-11: #79ab92;
  --disability-part-12: #bc857c;
  --disability-part-13: #8b949e;
  /* 몸통 바탕 — 어두운 배경 기준. 라이트에서 재보정한다. */
  --disability-figure: #2e343a;
  --disability-figure-line: #8b939c;
  /* 섞는 비율 — 어두운 배경에서는 같은 비율이 더 옅게 보여 한 단계씩 올린다. */
  --disability-zone-rest: 36%;
  --disability-zone-hover: 50%;
  --disability-zone-on: 62%;
  --disability-zone-active: 78%;

  /* ══════════════════════════════════════════════════════════════════════
     @tier role — 역할 토큰 (디자인 시스템 2기)
     ⭐ **화면이 쓸 수 있는 유일한 어휘.** 값은 2026-08-29 실측(28화면·6,369요소)에서 왔다.
     ⛔ 여기 없는 것이 필요하면 화면에서 우회하지 말고 이 표에 추가한다.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── 여백 — 자리가 정한다 ── */
  --pad-row: calc(var(--u) * 2) calc(var(--u) * 4);      /* 8 16  — 목록 행·항목 (실측 66%) */
  --pad-row-dense: calc(var(--u) * 2) calc(var(--u) * 3); /* 8 12  — 판 안쪽 줄 (실측 최다) */
  --pad-card: calc(var(--u) * 4);                         /* 16    — 카드 본문 */
  --pad-tile: calc(var(--u) * 3);                         /* 12    — 통계 타일·작은 카드 (실측 최다) */
  --pad-card-dense: calc(var(--u) * 2) calc(var(--u) * 3); /* 8 12  — 빽빽 모드 카드(목록 카드 compact·도움말 카드) */
  --pad-hero: calc(var(--u) * 6);                         /* 24    — 표지·안내처럼 한 장으로 서는 큰 카드 */
  --pad-panel: calc(var(--u) * 3) calc(var(--u) * 4);     /* 12 16 — 판·패널 (실측 100%) */
  --pad-tab: calc(var(--u) * 3) calc(var(--u) * 4);       /* 12 16 — 탭 (실측 41%) */
  --pad-control: 0 calc(var(--u) * 3);                    /* 0 12  — 입력·버튼 (높이는 --h-control-*) */
  --pad-badge: calc(var(--u) * 0.5) calc(var(--u) * 2);   /* 2 8   — 뱃지 (실측 61%) */
  --pad-cell: calc(var(--u) * 1) calc(var(--u) * 2);      /* 4 8   — 표 칸 */
  --pad-modal: calc(var(--u) * 4) calc(var(--u) * 5);     /* 16 20 — 모달 본문 */
  --pad-menu: calc(var(--u) * 1);                         /* 4     — 메뉴 껍데기(항목 둘레 여백) */
  --pad-menu-item: calc(var(--u) * 1.5) calc(var(--u) * 2.5); /* 6 10 — 메뉴 한 항목 */
  /* 화면 좌우 바깥 여백 — 좁은 화면에서 함께 줄어든다.
     ⛔ 예전엔 `--pad-page: var(--page-pad-y) var(--page-pad-x)` 라는 두 값짜리가 있었는데
        **`--page-pad-y` 는 정의된 적이 없었다.** 그래서 `padding: var(--pad-page)` 는
        값이 통째로 비어 실제로는 **0px** 이었다(2026-08-29 뜬 화면 실측). 조용히 무너지는
        토큰은 없느니만 못하므로 지웠다 — 세로 여백이 필요하면 --space-* 사다리에서 고른다. */
  --pad-page-x: var(--page-pad-x);

  /* ── 사이(gap·margin) — **무엇과 무엇 사이인가**로 부른다 ──
     ⛔ 숫자로 된 단(`--sp-2` 따위)은 없다. 숫자를 고를 수 있으면 화면마다 갈리고,
        테마도 "행 간격만 넓히기"를 못 한다(2026-08-29 사용자 지적). */
  --gap-glyph: calc(var(--u) * 1);    /* 4  — 붙어 다니는 것 사이(아이콘과 글자, 작업 아이콘) */
  --gap-overlap: calc(var(--u) * -2); /* -8 — **겹쳐 세우는 것**의 겹침(아바타 무더기).
                                            ⛔ 화면마다 -8·-6 으로 갈려 있던 것을 모았다(2026-09-03). */
  --gap-inline: calc(var(--u) * 2);   /* 8  — 한 줄 안 이웃(라벨과 값, 탭, 뱃지) */
  --gap-stack: calc(var(--u) * 3);    /* 12 — 세로로 쌓인 덩어리 사이 */
  --gap-group: calc(var(--u) * 4);    /* 16 — 묶음(구획) 사이 */
  --gap-pane: calc(var(--u) * 2);     /* 8  — **탭 판 안의 블록 사이**. 관리자 설정의 모든 탭이 이 값이다
                                             (실측 2026-08-29: 다른 탭 전부 8px 인데 새 탭만 16px 이었다) */
  --gap-band: calc(var(--u) * 6);     /* 24 — 화면 띠 사이 */
  --gap-page: calc(var(--u) * 8);     /* 32 — 가장 넓은 자리 */

  /* ── 안쪽(padding) — **어떤 그릇인가**로 부른다 ──
     자리가 정해진 그릇은 아래 자리 토큰 하나로 끝낸다(--pad-row·--pad-card …).
     자리를 특정할 수 없는 그릇만 아래 네 단을 쓴다. */
  --space-tight: calc(var(--u) * 1);    /* 4  — 아주 작은 칸 */
  --space-snug: calc(var(--u) * 2);     /* 8  — 작은 상자 */
  --space-cozy: calc(var(--u) * 3);     /* 12 — 보통 상자 */
  --space-roomy: calc(var(--u) * 4);    /* 16 — 큰 상자 */
  --space-band: calc(var(--u) * 6);     /* 24 — 빈 상태·표지처럼 넓은 자리 */
  --space-wide: calc(var(--u) * 8);     /* 32 — 가장 넓은 자리 */

  /* ── 모서리 ── */
  --radius-control: var(--seed-radius);                   /* 6   — 버튼·입력·탭 */
  --radius-card: calc(var(--seed-radius) + 2px);          /* 8   — 카드·판 (실측 지배값) */
  --radius-float: calc(var(--seed-radius) * 2);           /* 12  — 모달·드롭다운·팝오버 */
  --radius-badge: calc(var(--seed-radius) - 2px);         /* 4   — 뱃지 (실측 63%) */
  --radius-pill: 999px;                                   /* 칩·원형 */

  /* ── 글자 — 10단. ⛔ 이 밖의 크기는 없다 ──
     1기의 11단에서 11px 를 12px 로 접었다(205곳 — 11·12 는 같은 자리에서 갈려 쓰였다).
     13·14 는 쓰임이 뚜렷이 갈려 둘 다 남긴다(실측: 버튼 13px 66% · 표 칸 14px 100%).
     제목은 크기 토큰 + --weight-title 로 만든다 — 행 제목 = body, 카드 제목 = lead, 화면 제목 = title. */
  --size-meta: calc(12px * var(--seed-font-scale));         /* 곁들이는 글·건수·시각·뱃지 */
  --size-label: calc(13px * var(--seed-font-scale));        /* 버튼·라벨·힌트·설명 (실측 66~100%) */
  --size-body: calc(var(--seed-font-size) * var(--seed-font-scale)); /* 14 — 본문·표 칸 (실측 100%) */
  --size-lead: calc(16px * var(--seed-font-scale));         /* 카드 제목·머리글 */
  --size-title-sm: calc(18px * var(--seed-font-scale));     /* 소절 제목 */
  --size-title: calc(20px * var(--seed-font-scale));        /* 화면 제목 */
  --size-title-lg: calc(24px * var(--seed-font-scale));     /* 큰 표제 */
  --size-display-sm: calc(28px * var(--seed-font-scale));   /* 통계 수치 (실측 100%) */
  --size-display: calc(32px * var(--seed-font-scale));      /* 절 표제 */
  --size-display-lg: calc(44px * var(--seed-font-scale));   /* 표지 */
  --weight-title: var(--seed-title-weight);   /* 600 (실측 48%) */
  --weight-label: 500;                        /* 버튼·라벨 (실측 84%) */
  --weight-body: 400;
  --weight-strong: 700;                       /* 통계 수치 (실측 100%) */

  /* ── 잉크 (글자·아이콘) ── */
  --ink-primary: var(--text-primary);
  --ink-secondary: var(--text-secondary);
  --ink-muted: var(--text-tertiary);
  --ink-brand: var(--primary-color);
  --ink-on-solid: var(--on-solid);

  /* ── 면 ── */
  --bg-page: var(--surface-color);
  --bg-card: var(--card-bg);
  --bg-float: var(--surface-solid);
  --bg-field: var(--surface-muted);
  --bg-subtle: var(--surface-stripe);
  --bg-brand: var(--surface-brand);   /* 채워진 브랜드 면 — 그 위 글자는 --ink-on-solid */
  /* 채워진 의미색 면 — 그 위 글자는 --ink-on-solid.
     ⛔ --ink-danger 같은 **잉크를 면으로 쓰지 않는다**(다크에서 흰 글자가 무너진다). */
  --bg-danger: var(--surface-danger);
  --bg-warning: var(--surface-warning);
  --bg-success: var(--surface-success);
  --bg-info: var(--surface-info);
  --bg-purple: var(--surface-purple);
  --bg-indigo: var(--surface-indigo);
  --bg-orange: var(--surface-orange);
  --bg-chrome: var(--chrome-bg);      /* 껍데기 판 — 셸·상단바·사이드바·탭바(다크에서 비운다) */

  /* ── 의미 잉크 — 상태를 말하는 글자·아이콘 ──
     ⛔ 이 이름 하나로 글자·테두리·채움을 다 쓴다(값이 하나이므로). 연한 면은 --bg-*-soft 다. */
  --ink-danger: var(--color-danger);

  /* ── 사용자가 고른 임의 색을 «잉크»로 쓸 때 (ToDo 태그 등) ──
     의미색 12종은 라이트에서 한 단 어둡게 재보정되지만(아래 라이트 블록), **DB 에 저장된
     태그 hex 는 그 보정을 못 받는다.** 그래서 그 색을 잉크로 쓰는 자리는 이 토큰을 거친다.
     ⛔ 여기서 색을 **완성해 주지는 못한다** — 커스텀 속성의 `var()` 는 «적은 자리»에서
     풀리므로 `:root` 에 `var(--_tag-color)` 를 적으면 그 자리에 그 색이 없어 빈 값이 된다.
     그래서 «재료»만 둔다: 쓰는 쪽이 제 색과 함께 color-mix 로 조합한다.
       color-mix(in srgb, var(--_tag-color) var(--tag-ink-amt), var(--tag-ink-shade))
     ⛔ 다크는 그대로다(100% + transparent) — 검은 바탕 위에서는 원색이 오히려 잘 읽힌다
     (실측 2026-09-05: 태그 면이 그 색 14% 를 #050505 위에 얹은 것이라 원색이 선명.
     지금 쓰는 세 태그는 에러 4.85 · 정보 4.88 · 경고 7.91 로 모두 AA 를 넘는다).
     ⚠️ 다만 **아주 어두운 태그색을 새로 만들면 다크에서 걸린다**(계산: 남색 #334155 는 1.88).
     그때는 잉크를 흰색 쪽으로 섞어야 한다 — 여덟 색이 모두 넘으려면 65% 가 필요하지만
     그러면 지금 색들이 바래므로, 실제로 그런 태그가 생겼을 때 그 색만 놓고 다시 정한다.
     이 자리는 뜬 화면에서 재는 검사(lint:contrast·lint:screens)가 지킨다 — 오늘부터 CI 가 돈다. */
  --tag-ink-amt: 100%;
  --tag-ink-shade: transparent;
  --ink-danger-hover: var(--color-danger-hover);
  --ink-warning: var(--color-warning);
  --ink-warning-hover: var(--color-warning-hover);
  --ink-success: var(--color-success);
  --ink-success-hover: var(--color-success-hover);
  --ink-info: var(--color-info);
  --ink-info-hover: var(--color-info-hover);
  --ink-brand-hover: var(--primary-hover);

  /* ── 분류 잉크 — 상태가 아니라 '갈래'를 나눌 때 (차트 계열·태그 종류) ── */
  --ink-accent-indigo: var(--color-indigo);
  --ink-accent-purple: var(--color-purple);
  --ink-accent-orange: var(--color-orange);
  --ink-accent-cyan: var(--color-cyan);
  --ink-accent-lime: var(--color-lime);
  --ink-accent-pink: var(--color-pink);

  /* ── 면 — 상태·틴트 ── */
  --bg-hover: var(--surface-hover);
  --bg-active: var(--surface-active);
  --bg-brand-vivid: var(--primary-color);   /* 글자를 얹지 않는 브랜드 채움(띠·점·진행) — 원색 그대로 */
  /* 그라데이션의 두 번째 색 — 한 단 밝은 브랜드. ⛔ 예전엔 틸(#2dd4bf)이 박혀 있어
     테마를 바꿔도 그 자리만 청록으로 남았다(2026-08-29). 씨앗에서 뽑는다. */
  --bg-brand-lift: color-mix(in srgb, rgb(var(--seed-brand-rgb, 16, 185, 129)) 55%, #ffffff 45%);
  --bg-brand-soft: var(--surface-primary-soft);
  --bg-brand-mid: var(--surface-primary-mid);
  --bg-danger-soft: var(--surface-danger-soft);
  --bg-danger-mid: var(--surface-danger-mid);
  --bg-warning-soft: var(--surface-warning-soft);
  --bg-warning-mid: var(--surface-warning-mid);
  --bg-success-soft: var(--surface-success-soft);
  --bg-info-soft: var(--surface-info-soft);
  --bg-accent-indigo-soft: var(--surface-indigo-soft);
  --bg-accent-purple-soft: var(--surface-purple-soft);
  --bg-accent-orange-soft: var(--surface-orange-soft);
  --bg-accent-cyan-soft: var(--surface-cyan-soft);
  --bg-accent-lime-soft: var(--surface-lime-soft);
  --bg-accent-pink-soft: var(--surface-pink-soft);

  /* ── 선 색 — 테두리를 '다른 색'으로 그릴 때 (모양은 --line-strong/soft 가 갖는다) ── */
  --line-color: var(--border-color);
  --line-color-subtle: var(--border-subtle);

  /* ── 껍데기·떠 있는 것의 면과 흐림 ── */
  --bg-page-alt: var(--surface-color-secondary);   /* 판 안의 한 단 다른 바탕 */
  --bg-sticky: var(--sticky-bg);                   /* 스크롤해도 붙어 있는 줄 */
  /* 반투명 면 — 스크롤 통 안에서 내용 **위에 떠 있으면서도** 아래가 비쳐야 하는 자리
     (탭 바의 좌우 스크롤 화살표). 불투명하면 그 밑을 지나는 내용이 뚝 끊겨 보이고,
     완전 투명하면 글자와 겹쳐 읽히지 않는다. 면색은 판을 따라가므로 테마가 알아서 바뀐다. */
  --bg-veil: color-mix(in srgb, var(--bg-page) 78%, transparent);
  --blur-sticky: var(--sticky-blur);
  --bg-backdrop: var(--backdrop-bg);               /* 모달 뒤를 덮는 막 */
  --blur-backdrop: var(--backdrop-blur);
  --bg-scroll-thumb: var(--scrollbar-thumb);
  --bg-scroll-thumb-hover: var(--scrollbar-thumb-hover);
  --bg-scroll-track: var(--scrollbar-track);
  --bg-mark: var(--highlight-mark-bg);             /* 찾은 낱말에 치는 형광 */
  --bg-paper: var(--color-white);                  /* 문서 종이 — 테마와 무관하게 흰 바탕 */

  /* ── 잉크 (계속) ── */
  --ink-inverse: var(--color-white);               /* 짙은 면 위 글자 */
  --ink-brand-rgb: var(--seed-brand-rgb);          /* rgba(var(--ink-brand-rgb), α) 용 */
  --ink-kakao: var(--brand-kakao);                 /* 외부 브랜드색 — 그쪽이 정한 값이다 */
  --ink-black: var(--color-black);                 /* 검정 그 자체가 필요한 자리(카메라 화면 등) */

  /* ── 상태 카드의 옅은 면·선 — 테마마다 값이 갈리므로 여기 남는다(화면에 raw 색을 적지 않기 위해) ── */
  --bg-status-ok: var(--company-card-success-bg);
  --line-status-ok: var(--company-card-success-border);
  --bg-status-fail: var(--company-card-failed-bg);
  --line-status-fail: var(--company-card-failed-border);

  /* ── 그 밖 — 테마마다 값이 갈려 여기 남는다 ── */
  --blur-topbar: var(--topbar-blur);
  --shadow-card-hover: var(--card-shadow-hover);
  --bg-thumb: var(--thumb-bg);          /* 카탈로그 표지 자리 */
  --bg-bubble: var(--chat-bubble-bg);   /* 채팅 말풍선 */

  /* ── 높이 (계속) ── */
  --h-control-xs: var(--control-height-xs);
  --h-app-header: var(--app-header-height);
  --h-chart-sm: var(--chart-height-sm);
  --h-chart-md: var(--chart-height-md);
  --h-chart-lg: var(--chart-height-lg);
  --h-chart-spark: var(--chart-height-spark);
  --h-chart-spark-lg: var(--chart-height-spark-lg);

  /* ── 선 ── */
  --line-soft: var(--seed-border-width) solid var(--border-subtle);
  --line-strong: var(--seed-border-width) solid var(--border-color);
  --line-w: var(--seed-border-width);                    /* 1px — 색이 다른 테두리를 그릴 때의 두께 */
  --line-w-thick: calc(var(--seed-border-width) * 2);    /* 2px — 선택·활성 강조 */
  --line-accent: calc(var(--seed-border-width) * 3);     /* 3px — 왼쪽 강조 띠 */

  /* ── 동작·고도 ── */
  --motion-fast: calc(0.12s * var(--seed-motion));
  --motion-base: calc(0.2s * var(--seed-motion));
  --motion-slow: calc(0.3s * var(--seed-motion));   /* 펼침·접힘처럼 큰 움직임 */
  --shadow-card: var(--card-shadow);
  --shadow-float: var(--shadow-lg);


  /* ── 아이콘 — 8단. 1기 11단에서 접었다(8→10 · 12→14 · 40·64→48, 총 39곳) ──
     ⛔ 곁들이는 아이콘은 옆 글자보다 커지지 않는다 → 되도록 --icon-inline 을 쓴다. */
  --icon-inline: 1em;      /* 글자를 따라간다 — 라벨·버튼 안 (가장 권장) */
  --icon-marker: 0.625rem; /* 10px — 뱃지 위 점·미세 표식 (실측 최다) */
  --icon-label: 0.875rem;   /* 14px — 버튼·라벨 옆 */
  --icon-toolbar: 1rem;     /* 16px — 툴바·탭 */
  --icon-header: 1.25rem;   /* 20px — 머리·카드 */
  --icon-lead: 1.5rem;      /* 24px — 강조 */
  --icon-empty: 2rem;      /* 32px — 빈 목록 안내 */
  --icon-hero: 3rem;       /* 48px — 표지·큰 빈 상태 */

  /* ── 상태·분류 색 (화면이 직접 쓴다) ──
     정의는 위 의미 블록에 있고, 여기서는 '역할 어휘에 속한다'는 것만 선언한다.

     ⛔ 이 주석 안에서 주석 여는 표시를 **또 쓰지 않는다** — CSS 주석은 중첩되지 않는다.
        한때 아래 「장해 도해 팔레트」 설명이 주석을 다시 열고 그 끝의 닫는 표시가 **바깥 주석을
        닫아버려**, 뒤따르던 @tier role-also 줄들이 살아 있는 CSS 가 되었다. 파서는 `@tier` 를
        at-rule 로 보고 **다음 `;` 까지 통째로 삼켰고**, 그 `;` 이 하필 `--h-row: …;` 의 끝이라
        **`--h-row` 가 런타임에 아예 없었다**(2026-09-04 뜬 화면에서 발견 — `getPropertyValue('--h-row')` 가 빈 문자열).
        화면도 콘솔도 조용했다: `var(--h-row)` 를 쓴 자리는 그 속성만 사라져 기본값으로 흘렀다.

     @tier role-also: --z-dropdown --z-sticky --z-splitter --z-fixed --z-drawer --z-drawer-backdrop
     @tier role-also: --z-modal --z-modal-backdrop --z-popover --z-toast --z-tooltip --z-skip-link --z-resize-overlay
     @tier role-also: --font-mono --font-sans --line-none --line-snug --line-tight

     장해 도해 팔레트 — 잔재가 아니라 **도메인 어휘**다. `partColor(no)` 가 이름을 코드로
     조합해 부르고(`--disability-part-${no}`), DisabilityBodyFigure 와 ReferenceDisabilityPanel
     **두 컴포넌트**가 같은 색을 써야 하므로 전역에 있어야 한다(2026-08-30 확인).
     @tier role-also: --disability-figure --disability-figure-line
     @tier role-also: --disability-zone-rest --disability-zone-hover --disability-zone-on --disability-zone-active
     @tier role-also: --line-comfortable --line-normal --line-relaxed
     @tier role-also: --ring-focus --ring-danger
     @tier role-also: --font-rel-sm --font-rel-xs --font-rel-code
     @tier role-also: --shadow-sm --shadow-md --shadow-modal
     @tier role-also: --topbar-h --deco-book-spine --deco-book-page
     @tier role-also: --focus-ring-width --focus-ring-offset
     @tier role-also: --company-favicon-size
     @tier role-also:
     @tier role-also: --app-ambient --app-ambient-dark */

  /* ── 크기 ── */
  --h-row: calc(var(--seed-row-height) * var(--seed-density));
  --h-control-sm: var(--control-height-sm);
  --h-control-md: var(--control-height-md);
  --h-control-lg: var(--control-height-lg);
  /* @tier end */

}
/* 페이지 여백 — 아주 좁은 화면에서만 축소.
   ⛔ 768px 에서 줄이지 않는다(사용자 지적 2026-08-29). 그 폭에서 사이드바가 드로어로
      빠져 본문이 220px 를 되받는데, 하필 같은 지점에서 여백까지 반으로 줄여
      글자가 화면 가장자리에 붙었다(실측 700px: 본문 8px, 탭 바 0px). 자리가 늘어난
      순간에 숨을 뺏는 셈이라 답답해진다. 손에 쥐는 폭(≤480)에서만 줄인다. */
@media (max-width: 480px) {
  :root {
    --page-pad-x: calc(0.5rem * var(--seed-density));
  }
}
/* 라이트 테마 오버라이드 */
html[data-theme='light'],
body[data-theme='light'] {
  /* 바탕 글로우 — 라이트에도 깐다(사용자 확정 2026-08-22).
     ⛔ 알파는 다크의 **절반쯤**이라야 한다: 흰 바탕 위에서는 같은 알파가 훨씬 진하게 보인다.
     껍데기·본문 바탕을 비워야 글로우가 닿는다 — 비우기 전에는 판이 흰색으로 다 덮어
     알파를 아무리 올려도 화면이 한 픽셀도 바뀌지 않았다(2026-08-22 실측: 바탕 노출 0%).
     비우면 바탕(#f8fafc)이 드러나 흰 카드(#ffffff)와 층이 생겨 구조도 또렷해진다. */
  --chrome-bg: transparent;
  /* ⛔ **흰 바탕에 색을 얹지 않는다.** 다크 값을 그대로 옮기면 글로우 자리가 오히려
     **어두워져** 빛이 아니라 얼룩처럼 읽힌다(2026-08-22 실측: 좌상 242 vs 중앙 248).
     라이트는 바탕을 한 단 내리고(#f2f5f9) **흰빛을 얹어 밝힌다** — 그래야 다크와
     같은 원리(글로우 자리가 밝아진다)가 된다(실측: 좌상 253 vs 중앙 246).
     브랜드색은 아주 옅게 한 겹만 곁들인다. */
  --app-ambient:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9), transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(var(--seed-brand-rgb, 4, 120, 87), 0.05), transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(255, 255, 255, 0.7), transparent 36%);

  /* 면 위 잉크 — 라이트는 primary·의미색이 모두 어두워 흰 잉크가 맞다 */
  --on-solid: #ffffff;

  --surface-hover: rgba(15, 23, 42, 0.04);
  --surface-active: rgba(15, 23, 42, 0.08);
  --surface-stripe: rgba(15, 23, 42, 0.04);

  --shadow-sm: 0 calc(1px * var(--seed-elevation)) calc(2px * var(--seed-elevation)) rgba(15, 23, 42, 0.06);
  --shadow-md: 0 calc(4px * var(--seed-elevation)) calc(12px * var(--seed-elevation)) rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 calc(8px * var(--seed-elevation)) calc(20px * var(--seed-elevation)) rgba(15, 23, 42, 0.15);
  --shadow-modal: 0 calc(18px * var(--seed-elevation)) calc(45px * var(--seed-elevation)) rgba(15, 23, 42, 0.18);

  --backdrop-bg: rgba(15, 23, 42, 0.35);

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --scrollbar-track: rgba(15, 23, 42, 0.04);

  /* 키워드 형광 — 흰 배경에선 조금 더 진하게(워닝색도 어두운 계열로 재보정됨) */
  --highlight-mark-bg: color-mix(in srgb, var(--color-warning) 38%, transparent);

  /* 상태색·분류색 라이트 재보정 —
     :root 값은 검정 배경 기준(밝은 채도)이라 흰/카드 배경에서 전경 텍스트·아이콘·soft 배지가
     대비 1.8~3.5:1 로 바래 보인다(특히 카드 안 배지). 한 단계 어둡게(-700 계열) 내려
     흰 배경 텍스트 ≥4.9, soft 배지(원 틴트 위) ≥4.5:1 로 확보. 다크는 그대로(검정 위 선명). */
  /* 임의 태그색 잉크도 같은 이유로 한 단 깊게 — 원색 그대로면 제 색 14% 틴트 위에서
     대비가 2.8~3.4:1 로 바랜다(실사고 2026-09-04: ToDo 태그 「에러」 3.38:1).
     45%를 검정으로 섞으면 빨강 7.04 · 파랑 6.94 · 보라 7.24 · 초록 5.27 · 노랑 5.05 로
     시험한 다섯 색 모두 4.5:1 을 넘는다(실측). */
  --tag-ink-amt: 55%;
  --tag-ink-shade: #000;

  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;
  --color-warning: #b45309;
  --color-warning-hover: #92400e;
  --color-info: #2563eb;
  --color-info-hover: #1d4ed8;
  --color-success: #15803d;
  --color-success-hover: #166534;
  --color-purple: #9333ea;
  --color-indigo: #4f46e5;
  --color-orange: #c2410c;
  --color-cyan: #0e7490;
  --color-pink: #be185d;
  --color-lime: #4d7c0f;

  /* 장해 도해 — 밝은 배경에서는 몸통이 밝아야 부위색이 읽힌다. 섞는 비율은 한 단계 낮춘다
     (같은 비율이면 흰 배경 위에서 색이 과하게 진해 도해가 시끄러워진다). */
  --disability-figure: #e4e2dd;
  --disability-figure-line: #6b7178;
  --disability-zone-rest: 26%;
  --disability-zone-hover: 44%;
  --disability-zone-on: 58%;
  --disability-zone-active: 74%;
}
/* ⛔ **@import 는 여기까지다.** CSS 규칙은 @import 보다 뒤에 와야 한다 — 규칙을 위에 끼워
   넣으면 그 아래 @import 가 통째로 무효가 되고, 토큰이 안 실려 화면이 무너진다
   (2026-08-10 실사고: @font-face 를 위에 두었다가 tokens.css 가 안 실려 전 화면 붕괴).
   아래부터는 일반 규칙만. */
:root {

  /* @tier seed — 색 씨앗. 테마 세트가 갈아 끼우는 값 (v2-architecture.md §2) */
  --seed-bg: #050505;
  --seed-surface: #000000;
  --seed-surface-2: #000000;
  --seed-field: #1a1a1a;
  --seed-line: #2a2a2a;
  --seed-brand: rgb(var(--seed-brand-rgb, 16, 185, 129));
  --seed-brand-hover: #34d399;
  --seed-ink-1: #f9fafb;
  --seed-ink-2: #9ca3af;
  --seed-ink-3: #64748b;
  /* @tier end */
  font-family: var(--font-sans);
  line-height: 1.5;
  font-weight: var(--weight-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #f3f4f6;
  /* ⛔ 여기에 background-color 를 두지 않는다 — `:root`(0,1,0)가 아래 `html`(0,0,1) 규칙을
     이겨, 테마가 정한 --background-color 가 바탕에 반영되지 않는다(2026-08-21 실사고).
     바탕은 아래 `html { background: var(--background-color) }` 한 곳에서만 칠한다. */
  --background-color: var(--seed-bg);
  --surface-color: var(--seed-surface);
  --surface-color-secondary: var(--seed-surface-2);
  --surface-muted: var(--seed-field);
  --border-color: var(--seed-line);
  --primary-color: var(--seed-brand);
  --primary-hover: var(--seed-brand-hover);
  --text-primary: var(--seed-ink-1);
  --text-secondary: var(--seed-ink-2);
  --text-tertiary: var(--seed-ink-3);
  /* 회사 카드 상태용 색상 (기존 HTML 버전과 맞춤) */
  --company-card-success-bg: rgba(0, 170, 119, 0.03);
  --company-card-success-border: rgba(0, 170, 119, 0.14);
  --company-card-failed-bg: rgba(244, 67, 54, 0.03);
  --company-card-failed-border: rgba(244, 67, 54, 0.14);
}
html[data-theme='dark'],
body[data-theme='dark'] {

  /* @tier seed — 색 씨앗. 테마 세트가 갈아 끼우는 값 (v2-architecture.md §2) */
  --seed-bg: #050505;
  --seed-surface: transparent;
  --seed-surface-2: transparent;
  --seed-field: rgba(255, 255, 255, 0.055);
  --seed-card: rgba(255, 255, 255, 0.045);
  --seed-float: #16181b;
  --seed-line: #2a2a2a;
  --seed-ink-1: #f9fafb;
  --seed-ink-2: #9ca3af;
  --seed-ink-3: #7d8a9e;
  --seed-brand: rgb(var(--seed-brand-rgb, 16, 185, 129));
  --seed-brand-hover: #34d399;
  /* @tier end */
  /* 완전 검정(#000)이 아니라 한 단 들어올린 값 — 그 위에 아래 body::before 의
     은은한 브랜드 글로우가 깔린다(사용자 확정 2026-08-21, IVE 배경 방식). */
  --background-color: var(--seed-bg);
  /* === 면 — 다크에서는 판을 비운다 (사용자 확정 2026-08-22) ===
     바탕(#050505)에 은은한 브랜드 글로우가 깔려 있다. 그 위에 어두운 면을 얹으면
     그 자리만 검게 파인 '섬'이 된다.
     그래서 판은 아예 비우고(transparent), 살짝 띄워야 하는 것(입력·카드)만
     **흰 베일**을 아주 옅게 얹는다 — 바탕이 그대로 비치면서 층은 읽힌다.
     ⛔ 어두운 색을 얹지 않는다. rgba(15,17,20,.72) 같은 값을 판마다 얹었다가
        화면 곳곳이 섬이 됐다. 하나씩 쫓지 말고 여기서 끊는다.
     ⛔ 뒤를 가려야 하는 것(드롭다운·팝오버·모달·자동완성)은 비우면 안 된다 —
        뒤 글자가 비쳐 겹쳐 읽힌다. 그 자리는 --surface-solid.
     검사: npm run lint:surfaces (뜬 화면에서 섬을 찾아 준다) */
  --surface-color: var(--seed-surface);            /* 판 — 비운다 */
  --surface-color-secondary: var(--seed-surface-2);  /* 보조 판 — 비운다 */
  --surface-muted: var(--seed-field);  /* 입력·비활성 — 흰 베일 한 겹 */
  --card-bg: var(--seed-card);        /* 카드 — 흰 베일 한 겹 (그림자로 더 띄운다) */
  /* 떠 있는 것(모달·드롭다운·팝오버) — 뒤를 **완전히 가려야** 하므로 불투명.
     바탕보다 한 단 밝아 '위에 떠 있음'이 읽힌다. */
  --surface-solid: var(--seed-float);
  /* 흐름 안에서 붙어 있는 것(sticky 헤더·툴바·표 머리) — 아래 내용이 지나가므로
     가려야 하지만, 불투명하게 칠하면 회색 띠가 되어 오히려 튄다(2026-08-22 실사고).
     ⛔ 여기에 --surface-solid 를 쓰지 않는다. 반투명 + 아래 --sticky-blur 로
        지나가는 글자를 뭉개면 가려지면서도 바탕 글로우가 이어진다.
     ⛔ **바탕보다 어두운 색을 쓰지 않는다.** 바탕에는 글로우가 얹혀 있어 자리마다 밝기가
        다르므로, 고정된 어두운 색을 칠하면 그 띠만 검게 파인다(2026-08-22 실사고:
        rgba(6,8,10,.82) 로 칠했더니 새로고침 바가 검은 띠가 됐다).
        정답은 **배경을 아예 두지 않는 것**이다 — 바탕이 그대로 비쳐 화면이 이어진다
        (사용자 확정 2026-08-22: 「배경이 없는 것처럼 해야 하는 거 아냐?」).
        ⛔ 블러도 걸지 않는다 — 블러는 그 띠만 다르게 보이게 만든다. */
  /* 붙어 있는 바는 상단바와 같은 방식이다 — 색은 얹지 않고 블러만.
     아래로 지나갈 내용이 없는 바(안쪽 스크롤러가 따로 있는 새로고침 바 등)에도
     블러는 해가 없다: 매끄러운 바탕을 흐려도 같은 색이라 티가 안 난다.
     ⛔ 색을 얹지 말 것 — 어두우면 검은 띠, 밝으면 회색 띠가 된다. */
  /* 분리대 손잡이·접기 버튼처럼 **판 위에 떠 있는 작은 컨트롤** — 불투명이라야 한다.
     ⛔ 흰 베일(0.045)로 두면 검은 바탕 위에서 사실상 안 보인다(2026-08-22 지적).
        반투명(0.16)도 뒤가 비쳐 눌리는 자리처럼 안 읽힌다 → 불투명으로 못 박는다
        (사용자 확정 2026-08-22). 크기가 작아 글로우를 가리는 폭도 미미하다. */

  --sticky-bg: transparent;
  /* ⛔ saturate 를 걸지 않는다 — 뒤 색의 채도를 부풀려 그 띠만 색이 돈다
     (2026-08-22 실측: 상단바 색기울기 9 vs 주변 6 — 푸른기가 돌았다).
     블러만 걸면 뒤 색의 평균을 그대로 써서 주변과 정확히 같아진다(차이 0). */
  --sticky-blur: blur(18px);
  /* 상단바 — 화면 맨 위에 **고정**되어 내용이 그 아래로 지나간다. 여기만은 비우면 안 된다
     (2026-08-22 실사고: 투명하게 뒀더니 스크롤할 때 글자가 상단 메뉴와 겹쳐 읽혔다).
     대신 불투명 판으로 칠하지 않고 **유리처럼** — 옅게 깔고 뒤를 흐려 지나가는 글자를
     뭉갠다. 바탕 글로우는 그대로 통과한다.
     ⛔ **색을 얹지 않는다.** 어두우면 검은 띠, 밝으면 회색 띠가 된다(2026-08-22 둘 다 실사고).
        가리는 일은 **블러 혼자** 한다 — 블러는 뒤 색의 평균을 그대로 쓰므로 주변과
        이어지면서 지나가는 글자만 뭉갠다. */
  --topbar-blur: blur(18px);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.6);
  /* 카탈로그 카드 썸네일 영역 — 다크: 짙은 검정 위 형광 그린 글로우(미래적), 라이트는 별도 정의 */
  /* 썸네일 바닥을 순수 검정으로 두지 않는다 — 바탕 글로우 위에서 그 칸만 파여 보인다.
     반투명으로 두어 아래 바탕이 이어지게 한다(2026-08-21 lint:surfaces 적발). */
  --thumb-bg: radial-gradient(circle at 25% 30%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.16) 0%, transparent 55%), rgba(8, 10, 12, 0.72);
  --border-color: var(--seed-line);
  --text-primary: var(--seed-ink-1);
  --text-secondary: var(--seed-ink-2);
  /* tertiary: 다크는 검정/카드 위에서 어두우면 본문 AA(4.5) 에 못 미친다.
     #64748b(3.66~4.41) → #748196(4.41~5.32) 로 한 번 올렸는데도 **연한 면**
     (--surface-muted #1a1a1a·카드 #181a1d) 위에서 4.41~4.42 로 여전히 미달이었다
     (실측 2026-08-21 lint:contrast). 한 단 더 올려 4.97~6.00 확보. */
  --text-tertiary: var(--seed-ink-3);
  /* 다크 테마용 회사 카드 상태 색상 */
  --company-card-success-bg: rgba(74, 222, 128, 0.08);
  --company-card-success-border: rgba(74, 222, 128, 0.22);
  --company-card-failed-bg: rgba(248, 113, 113, 0.08);
  --company-card-failed-border: rgba(248, 113, 113, 0.22);
  --chat-bubble-bg: #1f2937;
  /* 다크모드 채팅 말풍선 배경 (어두운 회색) */

  /* 브랜드색 — :root 에서 새어 들어오게 두지 않고 **여기 명시**한다.
     한쪽 테마만 고치고 반대쪽을 빼먹는 사고를 구조로 막는다
     (npm run lint:theme 이 두 블록의 토큰 집합이 다르면 잡는다). */
  --primary-color: var(--seed-brand);
  --primary-hover: var(--seed-brand-hover);
  --seed-brand-rgb: 16, 185, 129;   /* @tier seed — 브랜드를 트리플로 둔다: 색과 틴트가 한 곳에서 나온다 */
  --primary-rgb: var(--seed-brand-rgb);
  /* 채워진 **브랜드 면** — 잉크와 다른 값이다.
     다크의 브랜드는 글자로 읽히라고 밝게 잡는데(--ink-brand), 그 위에 흰 글자를 얹으면
     대비가 무너진다(실측 2026-08-29: 2.54, 보험 세트 1.86). 사용자는 2026-08-21 에
     **흰 글자를 유지**하기로 정했으므로, 고칠 곳은 잉크가 아니라 **면**이다 — 한 단 깊게 간다.
     테마 세트가 브랜드를 바꿔도 같은 비율로 따라 깊어진다. */
  --surface-brand: color-mix(in srgb, rgb(var(--seed-brand-rgb)) 56%, #000 44%);
  /* 채워진 **의미색 면** — 브랜드와 똑같은 처방이다(사용자 확정 2026-09-03).
     의미색 잉크(--ink-danger 등)는 다크 바탕에서 읽히라고 밝게 잡혀 있어, 그것을 그대로
     면으로 쓰면 흰 글자가 무너진다(실측: 빨강 3.76 · 주황 2.15 · 연초록 2.28 · 파랑 3.68).
     ⛔ 잉크를 면으로 쓰지 않는다 — 면이 필요하면 아래 것을 쓴다. 섞은 뒤 6.07~9.06. */
  --surface-danger: color-mix(in srgb, var(--color-danger) 56%, #000 44%);
  --surface-warning: color-mix(in srgb, var(--color-warning) 56%, #000 44%);
  --surface-success: color-mix(in srgb, var(--color-success) 56%, #000 44%);
  --surface-info: color-mix(in srgb, var(--color-info) 56%, #000 44%);
  --surface-purple: color-mix(in srgb, var(--color-purple) 56%, #000 44%);
  --surface-indigo: color-mix(in srgb, var(--color-indigo) 56%, #000 44%);
  --surface-orange: color-mix(in srgb, var(--color-orange) 56%, #000 44%);
}
html[data-theme='light'],
body[data-theme='light'] {

  /* @tier seed — 색 씨앗. 테마 세트가 갈아 끼우는 값 (v2-architecture.md §2) */
  --seed-bg: #f2f5f9;
  --seed-float: #ffffff;
  --seed-surface: #ffffff;
  --seed-surface-2: #f1f5f9;
  --seed-field: #eff3fb;
  --seed-card: #ffffff;
  --seed-line: #e2e8f0;
  --seed-ink-1: #0f172a;
  --seed-ink-2: #334155;
  --seed-ink-3: #5f6f85;
  --seed-brand: rgb(var(--seed-brand-rgb, 4, 120, 87));
  --seed-brand-hover: #065f46;
  /* @tier end */
  /* 바탕을 한 단 내린다 — 그 위에 흰빛 글로우를 얹어야 '밝아지는' 글로우가 된다
     (다크가 #050505 위에 빛을 얹는 것과 같은 원리). 카드(#ffffff)와도 층이 생긴다. */
  --background-color: var(--seed-bg);
  /* 라이트는 바탕 글로우가 없으므로 면이 전부 불투명이어도 섬이 생기지 않는다 */
  --surface-solid: var(--seed-float);
  /* 붙어 있는 바 — 다크와 같이 색을 얹지 않는다(위 상단바와 같은 이유) */
  --sticky-bg: transparent;
  /* ⛔ saturate 를 걸지 않는다 — 뒤 색의 채도를 부풀려 그 띠만 색이 돈다
     (2026-08-22 실측: 상단바 색기울기 9 vs 주변 6 — 푸른기가 돌았다).
     블러만 걸면 뒤 색의 평균을 그대로 써서 주변과 정확히 같아진다(차이 0). */
  --sticky-blur: blur(18px);
  /* 상단바 — 다크와 **같은 방식**이다: 색을 얹지 않고 블러만.
     ⛔ 흰색(0.82)을 얹었더니 바탕(#f8fafc)보다 밝아 흰 띠가 됐다(2026-08-22 실측 차이 8).
        블러는 뒤 색의 평균을 그대로 쓰므로 주변과 이어지면서 지나가는 글자만 뭉갠다. */
  --topbar-blur: blur(18px);
  --surface-color: var(--seed-surface);
  --surface-color-secondary: var(--seed-surface-2);
  --surface-muted: var(--seed-field);
  --card-bg: var(--seed-card);
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.12);
  /* 라이트 썸네일 — 부드러운 슬레이트 톤 종이 + 코너에 옅은 그린/블루 highlight (살짝만)
     쨍한 그린 글로우는 라이트에서 화상품처럼 보여서 밋밋한 종이 톤으로 정돈 */
  --thumb-bg:
    radial-gradient(circle at 22% 18%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.07) 0%, transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 55%),
    linear-gradient(160deg, #fcfdfe 0%, #eef2f7 100%);
  --border-color: var(--seed-line);
  --text-primary: var(--seed-ink-1);
  --text-secondary: var(--seed-ink-2);
  /* tertiary(라이트): #64748b 는 연한 면(--surface-muted #eff3fb) 위에서 4.28 로
     본문 AA(4.5) 미달이었다(실측 2026-08-21). 한 단 어둡게 — 흰 배경 5.12 / 연한 면 4.61. */
  --text-tertiary: var(--seed-ink-3);
  --chat-bubble-bg: #f1f5f9;
  /* 라이트모드 채팅 말풍선 배경 (기존 surface-secondary) */

  /* 라이트 브랜드색 재보정 — :root 값(#10b981 등)은 순수 검정 배경 기준으로 튜닝돼
     흰 배경에서 대비가 2.5:1 이하로 후퇴한다(전경 텍스트/아이콘/링크로 467곳+ 사용).
     한 단계 어둡게 내려 AA 대비를 확보한다(측정: 흰 배경 3.8~5.5:1). */
  /* emerald-700 — 작은 전경 텍스트(카운트·링크·메타, 12px)까지 본문 AA 확보(흰 배경 5.48).
     #059669(600)는 3.77 로 UI 는 통과하나 작은 텍스트가 바래 보여 한 단계 더 진하게. */
  --primary-color: var(--seed-brand);
  --primary-hover: var(--seed-brand-hover);   /* emerald-800 — 라이트 hover 는 더 어둡게 */
  --seed-brand-rgb: 4, 120, 87;    /* @tier seed */
  --primary-rgb: var(--seed-brand-rgb);  /* rgba(var(--primary-rgb), α) 글로우/링 동기화 */
  /* 라이트의 브랜드는 이미 깊은 색(emerald-700)이라 그대로 면으로 쓴다. */
  --surface-brand: rgb(var(--seed-brand-rgb));
  /* 라이트의 의미색도 이미 깊어(흰 글자 5.02~6.47) 그대로 면으로 쓴다.
     ⛔ 다크 블록과 **같은 토큰 집합**이라야 한다(lint:theme 이 비대칭을 잡는다). */
  --surface-danger: var(--color-danger);
  --surface-warning: var(--color-warning);
  --surface-success: var(--color-success);
  --surface-info: var(--color-info);
  --surface-purple: var(--color-purple);
  --surface-indigo: var(--color-indigo);
  --surface-orange: var(--color-orange);


  /* 회사 카드 상태색 — 라이트 전용 값을 명시(다크 블록과 짝을 맞춘다) */
  --company-card-success-bg: rgba(0, 170, 119, 0.06);
  --company-card-success-border: rgba(0, 170, 119, 0.22);
  --company-card-failed-bg: rgba(244, 67, 54, 0.05);
  --company-card-failed-border: rgba(244, 67, 54, 0.20);
}
html,
/* 바탕은 **html 이 칠한다.** body 가 칠하면 아래 body::before(z-index:-1) 가 그 뒤로
   숨어 글로우가 통째로 안 보인다. */
html {
  background: var(--background-color);
}
/* === 바탕 글로우 ===
   완전 검정은 판이 어디서 끝나는지 알 수 없어 화면이 납작해 보인다. 아주 옅은
   브랜드 그린/틸/인디고를 넓게 깔아 깊이를 준다. 24초에 걸쳐 아주 천천히 흐른다.
   ⛔ 알파를 올리지 말 것 — 0.10 을 넘으면 '바탕'이 아니라 '무늬'가 된다.
   ⛔ 라이트에도 --app-ambient 가 있다(흰빛). '다크 전용'이 아니다 — 예전 주석이 틀렸다.

   ⛔ 타이밍을 steps() 에서 되돌리지 말 것 (2026-08-29 실측).
   이 층은 화면 전체(뷰포트의 140%)를 덮는데, transform 이 매 프레임 바뀌면
   브라우저가 그 넓이를 초당 60번 다시 칠한다. 그런데 24초에 걸친 움직임이라
   연속한 두 프레임의 픽셀 차이는 256단계 중 0~2 — 절반은 앞 프레임과 완전히 동일하다.
   즉 같은 그림을 하루 500만 번 다시 그리는 셈이었다.
   실측(파이어폭스·다크·1600x1000): ease-in-out 58% → steps(8) 로 바닥 수준.
   steps(8) 은 3초에 한 칸씩만 갱신하고, 한 칸의 변화량이 2~3/256 이라 눈에는 이어져 보인다. */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: var(--app-ambient);
  /* 배경 무늬 세기 — 씨앗으로 조절한다(0 이면 무늬 없음). 알파를 손대지 않고 층만 흐린다. */
  opacity: var(--seed-ambient, 1);
  animation: ambient-glow 24s steps(8) infinite alternate;
  z-index: -1; /* css-ignore — 문서 바탕 층. 전역 레이어(--z-*)와 다른 축이다 */
  pointer-events: none;
}
@keyframes ambient-glow {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.08) translate(2%, 3%); }
  66% { transform: scale(1.04) translate(-2%, 1%); }
  100% { transform: scale(1) translate(0, 0); }
}
/* 움직임을 줄여 달라고 한 사용자에게는 흐르지 않는다 (접근성) */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* ⛔ **문서(페이지)는 절대 튕기지 않는다.** 앱 껍데기는 100dvh 고정이라 페이지 자체는
     스크롤할 것이 없는데도, 모바일 브라우저는 안쪽 목록이 끝에 닿은 뒤 손가락을 더 끌면
     그 스크롤을 문서로 넘겨(scroll chaining) **화면 전체를 통째로 밀어 올렸다가 되돌린다**
     (iOS 고무줄 / 안드로이드 당겨서 새로고침). 목록 끝에서 더 올리면 상단 바까지 딸려
     올라가 보이던 증상이 이것이다 — 여기서 문서 쪽 넘김을 끊는다.
     (안쪽 스크롤러 각각도 overscroll-behavior: contain 으로 이중으로 막는다.)
     세로만 막는다 — 가로까지 none 으로 두면 브라우저의 '옆으로 밀어 뒤로가기' 제스처까지
     함께 죽는다. 문제는 세로였다. */
  overscroll-behavior-y: none;
}
/* ⛔ **기준 글자 크기를 여기서 못 박는다.** 없으면 크기를 안 적은 자리가 전부 브라우저 기본
   16px 로 떨어져, 13px 로 그린 패널 제목보다 그 옆 캡션이 더 커진다(2026-08-06 실측:
   상세 화면의 .dgp__panel-note 5곳·제목 1곳). 화면마다 잊었을 때만 티가 나서 「가끔 폰트가
   이상하다」로 보였다 — 원인은 그 화면이 아니라 기준이 없던 것이다.
   ⛔ **html 에 주면 안 된다.** 토큰이 rem 이라 간격·라운드·글자가 통째로 다시 계산돼
   화면 전체가 0.875배로 줄어든다(내가 한 번 그렇게 해서 확인했다). body 에만 준다. */
body {
  font-size: var(--size-body);
  line-height: var(--line-normal);
}
/* 모든 요소가 전역 폰트를 상속받도록 */
*,
*::before,
*::after {
  font-family: inherit;
}
#app {
  min-height: 100vh;
  /* iOS Safari 주소 표시줄 문제 해결: CSS 변수 사용 */
  min-height: var(--vh, 100vh);
  min-height: 100dvh;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: inherit;
}
/* 언어 선택기 드롭다운 스타일 - Select 컨트롤과 동일하게 */
.p-select-overlay.p-component,
.p-select-overlay {
  padding: 0.125rem !important;
}
.p-select-overlay .p-select-list,
.p-select-overlay ul,
.p-select-overlay [role="listbox"] {
  padding: 0 !important;
}
.p-select-overlay .p-select-item,
.p-select-overlay .p-select-item.p-component,
.p-select-overlay [role="option"],
.p-select-overlay li {
  padding: 0 0.5rem !important;
  min-height: 28px !important;
  height: 28px !important;
  max-height: 28px !important;
  font-size: 0.8125rem !important;
  line-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.p-select-overlay .p-select-item-label,
.p-select-overlay .p-select-item .p-select-item-label,
.p-select-overlay [role="option"]>* {
  padding: 0 !important;
  line-height: 28px !important;
  height: 28px !important;
  font-size: 0.8125rem !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
/* 전역 스크롤바 스타일 */
/* Firefox용 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
/* Webkit 브라우저용 (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  -webkit-appearance: none;
  display: block;
}
*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
  border: 1px solid transparent;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
*::-webkit-scrollbar-thumb:active {
  background: var(--text-secondary);
}
/* 라이트 테마에서 스크롤바 더 어둡게 (명확하게 보이도록) */
html[data-theme='light'] *::-webkit-scrollbar-thumb,
body[data-theme='light'] *::-webkit-scrollbar-thumb {
  background: #94a3b8;
}
html[data-theme='light'] *::-webkit-scrollbar-thumb:hover,
body[data-theme='light'] *::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
html[data-theme='light'] *::-webkit-scrollbar-thumb:active,
body[data-theme='light'] *::-webkit-scrollbar-thumb:active {
  background: #475569;
}
html[data-theme='light'] * {
  scrollbar-color: #94a3b8 transparent;
}
/* 다크 테마에서 스크롤바 더 밝게 */
html[data-theme='dark'] *::-webkit-scrollbar-thumb,
body[data-theme='dark'] *::-webkit-scrollbar-thumb {
  background: #4a5568;
}
html[data-theme='dark'] *::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] *::-webkit-scrollbar-thumb:hover {
  background: #718096;
}
html[data-theme='dark'] * {
  scrollbar-color: #4a5568 transparent;
}
/* 전역 입력 필드 기본 스타일 (hover/focus 효과 통일) */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  outline: none;
  transition: border-color 0.2s ease;
}
input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
  /* border가 있는 경우에만 효과가 보임 */
  border-color: var(--primary-color);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--primary-color);
}
/* === 초점 표시 안전망 (WCAG 2.4.7) ===
   ⛔ 전 화면을 덮어쓰는 규칙이 아니다. `:where(...)` 라 **특이도 0** 이므로 컨트롤이 자기 초점
      표시를 갖고 있으면 그쪽이 늘 이긴다(2026-08-22 실측: 초점 대상 615개 중 610개가 이미 갖고 있다).
      아무 표시도 없는 것 — 예: 도움말 닫기 버튼, 목록 스크롤 영역 — 만 이 규칙에 걸린다.
   ⛔ `:focus` 가 아니라 `:focus-visible` 이다. 마우스로 누를 때는 안 나오고 키보드로 옮길 때만 나온다. */
:where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--primary-color);
  outline-offset: var(--focus-ring-offset);
}
/* wrapper 내부의 border: none인 input은 전역 스타일 적용해도 시각적 변화 없음 */
/* 예: .list-view__autocomplete-input, .login__input 등은 border: none이므로 영향 없음 */
/* === 도움말 → 컨트롤 하이라이트 (전역 유틸) ===
   도움말 내 링크 클릭 시 대상 UI 컨트롤을 잠시 강조한다.
   사용처: MetaContentHelpTab 의 [data-highlight] 링크 → onHelpHighlight 가
   document.querySelector('[data-help-target="X"]') 로 찾아 이 클래스를 토글.
   scoped 컴포넌트 경계를 가로질러 작동해야 하므로 전역. */
.flash-highlight {
  animation: flash-highlight-pulse 0.55s ease-in-out 3;
  border-radius: var(--radius-badge);
  position: relative;
  z-index: 2;
}
/* 외곽 링 — 부모 컨테이너의 overflow:hidden 에 잘리지 않도록
   하이라이트 중인 자손이 있는 조상 체인의 overflow 를 일시적으로 visible 로 풀어준다.
   (:has() 가 부모 → 부모의 부모 … 로 전파되어 잘리는 조상까지 모두 해제됨) */
*:has(.flash-highlight) {
  overflow: visible !important;
}
@keyframes flash-highlight-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
    background: transparent;
  }
  50% {
    /* 하드 링은 얇게(2px) + 외곽 글로우(8px blur)로 부드럽게.
       작은 컨트롤(토글 등)에서도 잘려 보이지 않도록 글로우가 가시성 보완. */
    box-shadow:
      0 0 0 2px var(--primary-color),
      0 0 8px 4px rgba(var(--seed-brand-rgb, 16, 185, 129), 0.35);
    background: var(--surface-primary-soft);
  }
}
/* help-flash — 큰 영역(패널/표) 강조용. 링/글로우를 요소 '안쪽(inset)' 에 그려
   조상 overflow 를 건드리지 않는다(외곽 링 방식의 *:has(){overflow:visible} 가
   height:100%·overflow:hidden 레이아웃에서 전체 스크롤바를 유발하던 문제 회피).
   scoped 경계를 넘어야 하므로 전역. */
.help-flash {
  animation: help-flash-pulse 0.6s ease-in-out 3;
  border-radius: var(--radius-control);
  position: relative;
  z-index: 2;
}
@keyframes help-flash-pulse {
  0%, 100% {
    outline: 2px solid transparent;
    outline-offset: 4px;
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    /* outline-offset 으로 요소와 강조 링 사이에 투명 여백(4px)을 둔다 →
       내용에 밀착되지 않고 살짝 떨어진 링 + 부드러운 글로우. 배경색 가정 불필요. */
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    box-shadow: 0 0 12px 6px rgba(var(--seed-brand-rgb, 16, 185, 129), 0.22);
  }
}
/* 모바일(iOS Safari) 입력 시 화면 자동 확대 방지 */
/* iOS Safari는 font-size 16px 미만인 input에 focus 시 화면을 자동 확대함 */
@media screen and (max-width: 768px) {
  input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }

  /* 공통 VerticalSplitter — 모바일 탭 모드(옵트인) 전용.
     VerticalSplitter 가 mobileTabs prop 을 받으면 mount 시 부모 .vertical-split-container 에
     --mobile-tabs 변경자 클래스를 자동 부착한다. 이 룰은 그 클래스가 붙은 컨테이너에만 적용되어
     좌우 분할을 위·아래로 쌓고 자식 인라인 width 를 무력화한다.
     옵트인 안 한 화면은 이 클래스가 없으므로 영향 0. */
  .vertical-split-container--mobile-tabs {
    flex-direction: column !important;
    /* 부모(보통 .list-screen__body)가 flex column 일 때 남은 세로 공간을 정확히 차지.
       데스크톱 row 에선 height:100% 로 잡히지만 모바일에서 column 으로 바뀌면
       flex 명시가 없으면 콘텐츠 만큼만 자라 좌측 패널이 부모를 늘려 탭이 화면 밖으로 밀려난다. */
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  .vertical-split-container--mobile-tabs > * {
    width: 100% !important;
  }
  /* 탭 헤더(분리대)는 자기 콘텐츠 높이, 좌/우 패널은 남은 세로 공간을 모두 차지.
     이 룰이 없으면 첫 자식이 부모 height 전체를 먹어 탭 헤더가 화면 밖으로 밀려나고,
     반대 탭으로 전환했을 때도 자식이 height 100% 를 못 잡아 PDF iframe 등이 짜부라진다. */
  .vertical-split-container--mobile-tabs > *:not(.vertical-split-resizer) {
    flex: 1 1 0;
    min-height: 0;
  }
  /* DOM 순서는 데스크톱 row 기준 `left → resizer → right` 라, column 으로 쌓으면 탭이
     화면 맨 아래에 박혀 사용자가 못 본다. 모바일에서는 탭(분리대)을 헤더처럼 맨 위로 올린다.
     swapped 클래스가 좌/우 order 를 바꿔도 탭은 항상 최상단을 유지하도록 -1 사용. */
  .vertical-split-container--mobile-tabs > .vertical-split-resizer {
    order: -1;
  }
}
/* ─────────────────────────────────────────────────────────────
   목록 셀의 날짜·시각 — 한 벌뿐이다
   ⛔ 화면마다 자체 클래스(.cell-muted / .dg-num / .st-num)로 각자 색을 박다가
      같은 「최종수정일시」가 참조법령=tertiary · 질병=primary · 수술=primary 로
      **세 색으로 갈렸다**(2026-08-22 실측, 사용자가 세 번 지적). 토큰은 셋 다
      정식이라 lint:tokens/theme/contrast 가 전부 통과했다 — '적법'과 '같음'은
      다른 말이다. 날짜·시각을 찍는 자리는 이 클래스만 쓴다.
   검사: npm run lint:sameness
   ───────────────────────────────────────────────────────────── */
.cell-datetime {
  color: var(--text-secondary);
  font-size: var(--size-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────
   목록 셀의 사람 한 명 → **공용 부품 `UserLabel` 이 그린다.**
   ⛔ 여기에 `.cell-user` 를 다시 만들지 않는다 — 그릇을 화면마다(그리고 여기서도) 따로
      두었기 때문에 아바타↔이름 간격이 4px·8px·12px 로 갈렸다(2026-09-12 실측 45자리).
   components/common/UserLabel.vue · docs/design-system/user-label.md
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   곁들이는 글 — 앞 글자에 딸린 괄호·단위·구분자
   「2026-08-16 **(3개월)**」, 「법령 **/
** 별표」 처럼 **혼자 서지 못하는 글**이다.
   ⛔ 절대 크기(px/rem)로 박지 않는다 — 14px 줄에서도 12px 줄에서도 같은 크기가 되어
      어떤 줄에서는 본문만 하고 어떤 줄에서는 지나치게 작아진다.
      상대 사다리(--font-rel-sm)를 써서 **앞 글자를 따라가게** 한다.
   검사: lint:uniformity 는 이 클래스를 '작아도 되는 자리'로 안다.
   ───────────────────────────────────────────────────────────── */
.text-aside {
  font-size: var(--font-rel-sm);
  color: var(--text-tertiary);
}
/*!
 * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2025 Fonticons, Inc.
 */
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-solid,.fab,.far,.fas{--_fa-family:var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free"));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:var(--fa-display,inline-block);font-family:var(--_fa-family);font-feature-settings:normal;font-style:normal;font-synthesis:none;font-variant:normal;font-weight:var(--fa-style,900);line-height:1;text-align:center;text-rendering:auto;width:var(--fa-width,1.25em)}:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)/""}@supports not (content:""/""){:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)}}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-ul{list-style-type:none;margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0}.fa-ul>li{position:relative}.fa-li{inset-inline-start:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.0625em) var(--fa-border-style,solid) var(--fa-border-color,#eee);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-end,.fa-pull-right{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation:none!important;transition:none!important}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{--fa-width:100%;inset:0;position:absolute;text-align:center;width:var(--fa-width);z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30 "}.fa-1{--fa:"\31 "}.fa-2{--fa:"\32 "}.fa-3{--fa:"\33 "}.fa-4{--fa:"\34 "}.fa-5{--fa:"\35 "}.fa-6{--fa:"\36 "}.fa-7{--fa:"\37 "}.fa-8{--fa:"\38 "}.fa-9{--fa:"\39 "}.fa-exclamation{--fa:"\!"}.fa-hashtag{--fa:"\#"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\$"}.fa-percent,.fa-percentage{--fa:"\%"}.fa-asterisk{--fa:"\*"}.fa-add,.fa-plus{--fa:"\+"}.fa-less-than{--fa:"\<"}.fa-equals{--fa:"\="}.fa-greater-than{--fa:"\>"}.fa-question{--fa:"\?"}.fa-at{--fa:"\@"}.fa-a{--fa:"A"}.fa-b{--fa:"B"}.fa-c{--fa:"C"}.fa-d{--fa:"D"}.fa-e{--fa:"E"}.fa-f{--fa:"F"}.fa-g{--fa:"G"}.fa-h{--fa:"H"}.fa-i{--fa:"I"}.fa-j{--fa:"J"}.fa-k{--fa:"K"}.fa-l{--fa:"L"}.fa-m{--fa:"M"}.fa-n{--fa:"N"}.fa-o{--fa:"O"}.fa-p{--fa:"P"}.fa-q{--fa:"Q"}.fa-r{--fa:"R"}.fa-s{--fa:"S"}.fa-t{--fa:"T"}.fa-u{--fa:"U"}.fa-v{--fa:"V"}.fa-w{--fa:"W"}.fa-x{--fa:"X"}.fa-y{--fa:"Y"}.fa-z{--fa:"Z"}.fa-faucet{--fa:"\e005"}.fa-faucet-drip{--fa:"\e006"}.fa-house-chimney-window{--fa:"\e00d"}.fa-house-signal{--fa:"\e012"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-trailer{--fa:"\e041"}.fa-bacteria{--fa:"\e059"}.fa-bacterium{--fa:"\e05a"}.fa-box-tissue{--fa:"\e05b"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-hand-sparkles{--fa:"\e05d"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-handshake-alt-slash,.fa-handshake-simple-slash,.fa-handshake-slash{--fa:"\e060"}.fa-head-side-cough{--fa:"\e061"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-head-side-mask{--fa:"\e063"}.fa-head-side-virus{--fa:"\e064"}.fa-house-chimney-user{--fa:"\e065"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-lungs-virus{--fa:"\e067"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-plane-slash{--fa:"\e069"}.fa-pump-medical{--fa:"\e06a"}.fa-pump-soap{--fa:"\e06b"}.fa-shield-virus{--fa:"\e06c"}.fa-sink{--fa:"\e06d"}.fa-soap{--fa:"\e06e"}.fa-stopwatch-20{--fa:"\e06f"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-store-slash{--fa:"\e071"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-users-slash{--fa:"\e073"}.fa-virus{--fa:"\e074"}.fa-virus-slash{--fa:"\e075"}.fa-viruses{--fa:"\e076"}.fa-vest{--fa:"\e085"}.fa-vest-patches{--fa:"\e086"}.fa-arrow-trend-down{--fa:"\e097"}.fa-arrow-trend-up{--fa:"\e098"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-austral-sign{--fa:"\e0a9"}.fa-baht-sign{--fa:"\e0ac"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-book-bookmark{--fa:"\e0bb"}.fa-camera-rotate{--fa:"\e0d8"}.fa-cedi-sign{--fa:"\e0df"}.fa-chart-column{--fa:"\e0e3"}.fa-chart-gantt{--fa:"\e0e4"}.fa-clapperboard{--fa:"\e131"}.fa-clover{--fa:"\e139"}.fa-code-compare{--fa:"\e13a"}.fa-code-fork{--fa:"\e13b"}.fa-code-pull-request{--fa:"\e13c"}.fa-colon-sign{--fa:"\e140"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-display{--fa:"\e163"}.fa-dong-sign{--fa:"\e169"}.fa-elevator{--fa:"\e16d"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-florin-sign{--fa:"\e184"}.fa-folder-closed{--fa:"\e185"}.fa-franc-sign{--fa:"\e18f"}.fa-guarani-sign{--fa:"\e19a"}.fa-gun{--fa:"\e19b"}.fa-hands-clapping{--fa:"\e1a8"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-kip-sign{--fa:"\e1c4"}.fa-lari-sign{--fa:"\e1c8"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-manat-sign{--fa:"\e1d5"}.fa-mask-face{--fa:"\e1d7"}.fa-mill-sign{--fa:"\e1ed"}.fa-money-bills{--fa:"\e1f3"}.fa-naira-sign{--fa:"\e1f6"}.fa-notdef{--fa:"\e1fe"}.fa-panorama{--fa:"\e209"}.fa-peseta-sign{--fa:"\e221"}.fa-peso-sign{--fa:"\e222"}.fa-plane-up{--fa:"\e22d"}.fa-rupiah-sign{--fa:"\e23d"}.fa-stairs{--fa:"\e289"}.fa-timeline{--fa:"\e29c"}.fa-truck-front{--fa:"\e2b7"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-vault{--fa:"\e2c5"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bowl-rice{--fa:"\e2eb"}.fa-person-pregnant{--fa:"\e31e"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-house-crack{--fa:"\e3b1"}.fa-house-medical{--fa:"\e3b2"}.fa-cent-sign{--fa:"\e3f5"}.fa-plus-minus{--fa:"\e43c"}.fa-sailboat{--fa:"\e445"}.fa-section{--fa:"\e447"}.fa-shrimp{--fa:"\e448"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-chart-simple{--fa:"\e473"}.fa-diagram-next{--fa:"\e476"}.fa-diagram-predecessor{--fa:"\e477"}.fa-diagram-successor{--fa:"\e47a"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-bug-slash{--fa:"\e490"}.fa-file-circle-plus{--fa:"\e494"}.fa-shop-lock{--fa:"\e4a5"}.fa-virus-covid{--fa:"\e4a8"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-anchor-lock{--fa:"\e4ad"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-arrows-spin{--fa:"\e4bb"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-bore-hole{--fa:"\e4c3"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-bottle-water{--fa:"\e4c5"}.fa-bowl-food{--fa:"\e4c6"}.fa-boxes-packing{--fa:"\e4c7"}.fa-bridge{--fa:"\e4c8"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-bridge-water{--fa:"\e4ce"}.fa-bucket{--fa:"\e4cf"}.fa-bugs{--fa:"\e4d0"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-building-circle-check{--fa:"\e4d2"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-building-flag{--fa:"\e4d5"}.fa-building-lock{--fa:"\e4d6"}.fa-building-ngo{--fa:"\e4d7"}.fa-building-shield{--fa:"\e4d8"}.fa-building-un{--fa:"\e4d9"}.fa-building-user{--fa:"\e4da"}.fa-building-wheat{--fa:"\e4db"}.fa-burst{--fa:"\e4dc"}.fa-car-on{--fa:"\e4dd"}.fa-car-tunnel{--fa:"\e4de"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-children{--fa:"\e4e1"}.fa-circle-nodes{--fa:"\e4e2"}.fa-clipboard-question{--fa:"\e4e3"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-computer{--fa:"\e4e5"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-explosion{--fa:"\e4e9"}.fa-ferry{--fa:"\e4ea"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-file-circle-question{--fa:"\e4ef"}.fa-file-shield{--fa:"\e4f0"}.fa-fire-burner{--fa:"\e4f1"}.fa-fish-fins{--fa:"\e4f2"}.fa-flask-vial{--fa:"\e4f3"}.fa-glass-water{--fa:"\e4f4"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-handcuffs{--fa:"\e4f8"}.fa-hands-bound{--fa:"\e4f9"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-heart-circle-plus{--fa:"\e500"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-helicopter-symbol{--fa:"\e502"}.fa-helmet-un{--fa:"\e503"}.fa-hill-avalanche{--fa:"\e507"}.fa-hill-rockslide{--fa:"\e508"}.fa-house-circle-check{--fa:"\e509"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-house-fire{--fa:"\e50c"}.fa-house-flag{--fa:"\e50d"}.fa-house-flood-water{--fa:"\e50e"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-house-lock{--fa:"\e510"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-house-medical-flag{--fa:"\e514"}.fa-house-tsunami{--fa:"\e515"}.fa-jar{--fa:"\e516"}.fa-jar-wheat{--fa:"\e517"}.fa-jet-fighter-up{--fa:"\e518"}.fa-jug-detergent{--fa:"\e519"}.fa-kitchen-set{--fa:"\e51a"}.fa-land-mine-on{--fa:"\e51b"}.fa-landmark-flag{--fa:"\e51c"}.fa-laptop-file{--fa:"\e51d"}.fa-lines-leaning{--fa:"\e51e"}.fa-location-pin-lock{--fa:"\e51f"}.fa-locust{--fa:"\e520"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-mask-ventilator{--fa:"\e524"}.fa-mattress-pillow{--fa:"\e525"}.fa-mobile-retro{--fa:"\e527"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-mosquito{--fa:"\e52b"}.fa-mosquito-net{--fa:"\e52c"}.fa-mound{--fa:"\e52d"}.fa-mountain-city{--fa:"\e52e"}.fa-mountain-sun{--fa:"\e52f"}.fa-oil-well{--fa:"\e532"}.fa-people-group{--fa:"\e533"}.fa-people-line{--fa:"\e534"}.fa-people-pulling{--fa:"\e535"}.fa-people-robbery{--fa:"\e536"}.fa-people-roof{--fa:"\e537"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-person-burst{--fa:"\e53b"}.fa-person-cane{--fa:"\e53c"}.fa-person-chalkboard{--fa:"\e53d"}.fa-person-circle-check{--fa:"\e53e"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-person-circle-minus{--fa:"\e540"}.fa-person-circle-plus{--fa:"\e541"}.fa-person-circle-question{--fa:"\e542"}.fa-person-circle-xmark{--fa:"\e543"}.fa-person-dress-burst{--fa:"\e544"}.fa-person-drowning{--fa:"\e545"}.fa-person-falling{--fa:"\e546"}.fa-person-falling-burst{--fa:"\e547"}.fa-person-half-dress{--fa:"\e548"}.fa-person-harassing{--fa:"\e549"}.fa-person-military-pointing{--fa:"\e54a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-person-military-to-person{--fa:"\e54c"}.fa-person-rays{--fa:"\e54d"}.fa-person-rifle{--fa:"\e54e"}.fa-person-shelter{--fa:"\e54f"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-person-walking-luggage{--fa:"\e554"}.fa-plane-circle-check{--fa:"\e555"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-plane-lock{--fa:"\e558"}.fa-plate-wheat{--fa:"\e55a"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-plug-circle-check{--fa:"\e55c"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-ranking-star{--fa:"\e561"}.fa-road-barrier{--fa:"\e562"}.fa-road-bridge{--fa:"\e563"}.fa-road-circle-check{--fa:"\e564"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-road-circle-xmark{--fa:"\e566"}.fa-road-lock{--fa:"\e567"}.fa-road-spikes{--fa:"\e568"}.fa-rug{--fa:"\e569"}.fa-sack-xmark{--fa:"\e56a"}.fa-school-circle-check{--fa:"\e56b"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-school-flag{--fa:"\e56e"}.fa-school-lock{--fa:"\e56f"}.fa-sheet-plastic{--fa:"\e571"}.fa-shield-cat{--fa:"\e572"}.fa-shield-dog{--fa:"\e573"}.fa-shield-heart{--fa:"\e574"}.fa-square-nfi{--fa:"\e576"}.fa-square-person-confined{--fa:"\e577"}.fa-square-virus{--fa:"\e578"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-tarp{--fa:"\e57b"}.fa-tarp-droplet{--fa:"\e57c"}.fa-tent{--fa:"\e57d"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tent-arrows-down{--fa:"\e581"}.fa-tents{--fa:"\e582"}.fa-toilet-portable{--fa:"\e583"}.fa-toilets-portable{--fa:"\e584"}.fa-tower-cell{--fa:"\e585"}.fa-tower-observation{--fa:"\e586"}.fa-tree-city{--fa:"\e587"}.fa-trowel{--fa:"\e589"}.fa-trowel-bricks{--fa:"\e58a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-truck-droplet{--fa:"\e58c"}.fa-truck-field{--fa:"\e58d"}.fa-truck-field-un{--fa:"\e58e"}.fa-truck-plane{--fa:"\e58f"}.fa-users-between-lines{--fa:"\e591"}.fa-users-line{--fa:"\e592"}.fa-users-rays{--fa:"\e593"}.fa-users-rectangle{--fa:"\e594"}.fa-users-viewfinder{--fa:"\e595"}.fa-vial-circle-check{--fa:"\e596"}.fa-vial-virus{--fa:"\e597"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-worm{--fa:"\e599"}.fa-xmarks-lines{--fa:"\e59a"}.fa-child-dress{--fa:"\e59c"}.fa-child-reaching{--fa:"\e59d"}.fa-file-circle-check{--fa:"\e5a0"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-person-through-window{--fa:"\e5a9"}.fa-plant-wilt{--fa:"\e5aa"}.fa-stapler{--fa:"\e5af"}.fa-train-tram{--fa:"\e5b4"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-chart-diagram{--fa:"\e695"}.fa-comment-nodes{--fa:"\e696"}.fa-file-fragment{--fa:"\e697"}.fa-file-half-dashed{--fa:"\e698"}.fa-hexagon-nodes{--fa:"\e699"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-square-binary{--fa:"\e69b"}.fa-pentagon{--fa:"\e790"}.fa-non-binary{--fa:"\e807"}.fa-spiral{--fa:"\e80a"}.fa-mobile-vibrate{--fa:"\e816"}.fa-single-quote-left{--fa:"\e81b"}.fa-single-quote-right{--fa:"\e81c"}.fa-bus-side{--fa:"\e81d"}.fa-heptagon,.fa-septagon{--fa:"\e820"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-music{--fa:"\f001"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-heart{--fa:"\f004"}.fa-star{--fa:"\f005"}.fa-user,.fa-user-alt,.fa-user-large{--fa:"\f007"}.fa-film,.fa-film-alt,.fa-film-simple{--fa:"\f008"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-check{--fa:"\f00c"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-power-off{--fa:"\f011"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-road{--fa:"\f018"}.fa-download{--fa:"\f019"}.fa-inbox{--fa:"\f01c"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-lock{--fa:"\f023"}.fa-flag{--fa:"\f024"}.fa-headphones,.fa-headphones-alt,.fa-headphones-simple{--fa:"\f025"}.fa-volume-off{--fa:"\f026"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-qrcode{--fa:"\f029"}.fa-barcode{--fa:"\f02a"}.fa-tag{--fa:"\f02b"}.fa-tags{--fa:"\f02c"}.fa-book{--fa:"\f02d"}.fa-bookmark{--fa:"\f02e"}.fa-print{--fa:"\f02f"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-font{--fa:"\f031"}.fa-bold{--fa:"\f032"}.fa-italic{--fa:"\f033"}.fa-text-height{--fa:"\f034"}.fa-text-width{--fa:"\f035"}.fa-align-left{--fa:"\f036"}.fa-align-center{--fa:"\f037"}.fa-align-right{--fa:"\f038"}.fa-align-justify{--fa:"\f039"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-indent{--fa:"\f03c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-image{--fa:"\f03e"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-backward{--fa:"\f04a"}.fa-play{--fa:"\f04b"}.fa-pause{--fa:"\f04c"}.fa-stop{--fa:"\f04d"}.fa-forward{--fa:"\f04e"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-eject{--fa:"\f052"}.fa-chevron-left{--fa:"\f053"}.fa-chevron-right{--fa:"\f054"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-crosshairs{--fa:"\f05b"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-arrow-left{--fa:"\f060"}.fa-arrow-right{--fa:"\f061"}.fa-arrow-up{--fa:"\f062"}.fa-arrow-down{--fa:"\f063"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-expand{--fa:"\f065"}.fa-compress{--fa:"\f066"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-gift{--fa:"\f06b"}.fa-leaf{--fa:"\f06c"}.fa-fire{--fa:"\f06d"}.fa-eye{--fa:"\f06e"}.fa-eye-slash{--fa:"\f070"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-plane{--fa:"\f072"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-comment{--fa:"\f075"}.fa-magnet{--fa:"\f076"}.fa-chevron-up{--fa:"\f077"}.fa-chevron-down{--fa:"\f078"}.fa-retweet{--fa:"\f079"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-folder-open{--fa:"\f07c"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-camera-retro{--fa:"\f083"}.fa-key{--fa:"\f084"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-comments{--fa:"\f086"}.fa-star-half{--fa:"\f089"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-trophy{--fa:"\f091"}.fa-upload{--fa:"\f093"}.fa-lemon{--fa:"\f094"}.fa-phone{--fa:"\f095"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-unlock{--fa:"\f09c"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-bullhorn{--fa:"\f0a1"}.fa-certificate{--fa:"\f0a3"}.fa-hand-point-right{--fa:"\f0a4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-hand-point-up{--fa:"\f0a6"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-globe{--fa:"\f0ac"}.fa-wrench{--fa:"\f0ad"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-filter{--fa:"\f0b0"}.fa-briefcase{--fa:"\f0b1"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-users{--fa:"\f0c0"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-cloud{--fa:"\f0c2"}.fa-flask{--fa:"\f0c3"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-copy{--fa:"\f0c5"}.fa-paperclip{--fa:"\f0c6"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-square{--fa:"\f0c8"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-strikethrough{--fa:"\f0cc"}.fa-underline{--fa:"\f0cd"}.fa-table{--fa:"\f0ce"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-truck{--fa:"\f0d1"}.fa-money-bill{--fa:"\f0d6"}.fa-caret-down{--fa:"\f0d7"}.fa-caret-up{--fa:"\f0d8"}.fa-caret-left{--fa:"\f0d9"}.fa-caret-right{--fa:"\f0da"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-envelope{--fa:"\f0e0"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-sitemap{--fa:"\f0e8"}.fa-umbrella{--fa:"\f0e9"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-lightbulb{--fa:"\f0eb"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-stethoscope{--fa:"\f0f1"}.fa-suitcase{--fa:"\f0f2"}.fa-bell{--fa:"\f0f3"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-angle-left{--fa:"\f104"}.fa-angle-right{--fa:"\f105"}.fa-angle-up{--fa:"\f106"}.fa-angle-down{--fa:"\f107"}.fa-laptop{--fa:"\f109"}.fa-tablet-button{--fa:"\f10a"}.fa-mobile-button{--fa:"\f10b"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-spinner{--fa:"\f110"}.fa-circle{--fa:"\f111"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-gamepad{--fa:"\f11b"}.fa-keyboard{--fa:"\f11c"}.fa-flag-checkered{--fa:"\f11e"}.fa-terminal{--fa:"\f120"}.fa-code{--fa:"\f121"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-location-arrow{--fa:"\f124"}.fa-crop{--fa:"\f125"}.fa-code-branch{--fa:"\f126"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-info{--fa:"\f129"}.fa-superscript{--fa:"\f12b"}.fa-subscript{--fa:"\f12c"}.fa-eraser{--fa:"\f12d"}.fa-puzzle-piece{--fa:"\f12e"}.fa-microphone{--fa:"\f130"}.fa-microphone-slash{--fa:"\f131"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-calendar{--fa:"\f133"}.fa-fire-extinguisher{--fa:"\f134"}.fa-rocket{--fa:"\f135"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-anchor{--fa:"\f13d"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-bullseye{--fa:"\f140"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-ticket{--fa:"\f145"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-file{--fa:"\f15b"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-thumbs-up{--fa:"\f164"}.fa-thumbs-down{--fa:"\f165"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-male,.fa-person{--fa:"\f183"}.fa-sun{--fa:"\f185"}.fa-moon{--fa:"\f186"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-bug{--fa:"\f188"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-wheelchair{--fa:"\f193"}.fa-lira-sign{--fa:"\f195"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-language{--fa:"\f1ab"}.fa-fax{--fa:"\f1ac"}.fa-building{--fa:"\f1ad"}.fa-child{--fa:"\f1ae"}.fa-paw{--fa:"\f1b0"}.fa-cube{--fa:"\f1b2"}.fa-cubes{--fa:"\f1b3"}.fa-recycle{--fa:"\f1b8"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-tree{--fa:"\f1bb"}.fa-database{--fa:"\f1c0"}.fa-file-pdf{--fa:"\f1c1"}.fa-file-word{--fa:"\f1c2"}.fa-file-excel{--fa:"\f1c3"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-file-image{--fa:"\f1c5"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-file-audio{--fa:"\f1c7"}.fa-file-video{--fa:"\f1c8"}.fa-file-code{--fa:"\f1c9"}.fa-life-ring{--fa:"\f1cd"}.fa-circle-notch{--fa:"\f1ce"}.fa-paper-plane{--fa:"\f1d8"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-paragraph{--fa:"\f1dd"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-bomb{--fa:"\f1e2"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-binoculars{--fa:"\f1e5"}.fa-plug{--fa:"\f1e6"}.fa-newspaper{--fa:"\f1ea"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-calculator{--fa:"\f1ec"}.fa-bell-slash{--fa:"\f1f6"}.fa-trash{--fa:"\f1f8"}.fa-copyright{--fa:"\f1f9"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-toggle-off{--fa:"\f204"}.fa-toggle-on{--fa:"\f205"}.fa-bicycle{--fa:"\f206"}.fa-bus{--fa:"\f207"}.fa-closed-captioning{--fa:"\f20a"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-cart-plus{--fa:"\f217"}.fa-cart-arrow-down{--fa:"\f218"}.fa-diamond{--fa:"\f219"}.fa-ship{--fa:"\f21a"}.fa-user-secret{--fa:"\f21b"}.fa-motorcycle{--fa:"\f21c"}.fa-street-view{--fa:"\f21d"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-venus{--fa:"\f221"}.fa-mars{--fa:"\f222"}.fa-mercury{--fa:"\f223"}.fa-mars-and-venus{--fa:"\f224"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-venus-double{--fa:"\f226"}.fa-mars-double{--fa:"\f227"}.fa-venus-mars{--fa:"\f228"}.fa-mars-stroke{--fa:"\f229"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-neuter{--fa:"\f22c"}.fa-genderless{--fa:"\f22d"}.fa-server{--fa:"\f233"}.fa-user-plus{--fa:"\f234"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-bed{--fa:"\f236"}.fa-train{--fa:"\f238"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-i-cursor{--fa:"\f246"}.fa-object-group{--fa:"\f247"}.fa-object-ungroup{--fa:"\f248"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-clone{--fa:"\f24d"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-hand-scissors{--fa:"\f257"}.fa-hand-lizard{--fa:"\f258"}.fa-hand-spock{--fa:"\f259"}.fa-hand-pointer{--fa:"\f25a"}.fa-hand-peace{--fa:"\f25b"}.fa-trademark{--fa:"\f25c"}.fa-registered{--fa:"\f25d"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-calendar-plus{--fa:"\f271"}.fa-calendar-minus{--fa:"\f272"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-calendar-check{--fa:"\f274"}.fa-industry{--fa:"\f275"}.fa-map-pin{--fa:"\f276"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-map{--fa:"\f279"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-universal-access{--fa:"\f29a"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-audio-description{--fa:"\f29e"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-braille{--fa:"\f2a1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-handshake,.fa-handshake-alt,.fa-handshake-simple{--fa:"\f2b5"}.fa-envelope-open{--fa:"\f2b6"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-id-badge{--fa:"\f2c1"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-shower{--fa:"\f2cc"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-podcast{--fa:"\f2ce"}.fa-window-maximize{--fa:"\f2d0"}.fa-window-minimize{--fa:"\f2d1"}.fa-window-restore{--fa:"\f2d2"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-microchip{--fa:"\f2db"}.fa-snowflake{--fa:"\f2dc"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-stopwatch{--fa:"\f2f2"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-poo{--fa:"\f2fe"}.fa-images{--fa:"\f302"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-pen{--fa:"\f304"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-octagon{--fa:"\f306"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-hexagon{--fa:"\f312"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-clipboard{--fa:"\f328"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-alarm-clock{--fa:"\f34e"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-repeat{--fa:"\f363"}.fa-code-commit{--fa:"\f386"}.fa-code-merge{--fa:"\f387"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-gem{--fa:"\f3a5"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}.fa-lock-open{--fa:"\f3c1"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-phone-slash{--fa:"\f3dd"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-bowling-ball{--fa:"\f436"}.fa-chess{--fa:"\f439"}.fa-chess-bishop{--fa:"\f43a"}.fa-chess-board{--fa:"\f43c"}.fa-chess-king{--fa:"\f43f"}.fa-chess-knight{--fa:"\f441"}.fa-chess-pawn{--fa:"\f443"}.fa-chess-queen{--fa:"\f445"}.fa-chess-rook{--fa:"\f447"}.fa-dumbbell{--fa:"\f44b"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-hockey-puck{--fa:"\f453"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-square-full{--fa:"\f45c"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-box{--fa:"\f466"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-briefcase-medical{--fa:"\f469"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-capsules{--fa:"\f46b"}.fa-clipboard-check{--fa:"\f46c"}.fa-clipboard-list{--fa:"\f46d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-dna{--fa:"\f471"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-file-medical{--fa:"\f477"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-notes-medical{--fa:"\f481"}.fa-pallet{--fa:"\f482"}.fa-pills{--fa:"\f484"}.fa-prescription-bottle{--fa:"\f485"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-smoking{--fa:"\f48d"}.fa-syringe{--fa:"\f48e"}.fa-tablets{--fa:"\f490"}.fa-thermometer{--fa:"\f491"}.fa-vial{--fa:"\f492"}.fa-vials{--fa:"\f493"}.fa-warehouse{--fa:"\f494"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-x-ray{--fa:"\f497"}.fa-box-open{--fa:"\f49e"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-comment-slash{--fa:"\f4b3"}.fa-couch{--fa:"\f4b8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-dove{--fa:"\f4ba"}.fa-hand-holding{--fa:"\f4bd"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-parachute-box{--fa:"\f4cd"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-piggy-bank{--fa:"\f4d3"}.fa-ribbon{--fa:"\f4d6"}.fa-route{--fa:"\f4d7"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-tape{--fa:"\f4db"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-truck-moving{--fa:"\f4df"}.fa-video-slash{--fa:"\f4e2"}.fa-wine-glass{--fa:"\f4e3"}.fa-user-astronaut{--fa:"\f4fb"}.fa-user-check{--fa:"\f4fc"}.fa-user-clock{--fa:"\f4fd"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-user-graduate{--fa:"\f501"}.fa-user-lock{--fa:"\f502"}.fa-user-minus{--fa:"\f503"}.fa-user-ninja{--fa:"\f504"}.fa-user-shield{--fa:"\f505"}.fa-user-alt-slash,.fa-user-large-slash,.fa-user-slash{--fa:"\f506"}.fa-user-tag{--fa:"\f507"}.fa-user-tie{--fa:"\f508"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-blender{--fa:"\f517"}.fa-book-open{--fa:"\f518"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-broom{--fa:"\f51a"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-church{--fa:"\f51d"}.fa-coins{--fa:"\f51e"}.fa-compact-disc{--fa:"\f51f"}.fa-crow{--fa:"\f520"}.fa-crown{--fa:"\f521"}.fa-dice{--fa:"\f522"}.fa-dice-five{--fa:"\f523"}.fa-dice-four{--fa:"\f524"}.fa-dice-one{--fa:"\f525"}.fa-dice-six{--fa:"\f526"}.fa-dice-three{--fa:"\f527"}.fa-dice-two{--fa:"\f528"}.fa-divide{--fa:"\f529"}.fa-door-closed{--fa:"\f52a"}.fa-door-open{--fa:"\f52b"}.fa-feather{--fa:"\f52d"}.fa-frog{--fa:"\f52e"}.fa-gas-pump{--fa:"\f52f"}.fa-glasses{--fa:"\f530"}.fa-greater-than-equal{--fa:"\f532"}.fa-helicopter{--fa:"\f533"}.fa-infinity{--fa:"\f534"}.fa-kiwi-bird{--fa:"\f535"}.fa-less-than-equal{--fa:"\f537"}.fa-memory{--fa:"\f538"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-money-bill-wave{--fa:"\f53a"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-money-check{--fa:"\f53c"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-not-equal{--fa:"\f53e"}.fa-palette{--fa:"\f53f"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-receipt{--fa:"\f543"}.fa-robot{--fa:"\f544"}.fa-ruler{--fa:"\f545"}.fa-ruler-combined{--fa:"\f546"}.fa-ruler-horizontal{--fa:"\f547"}.fa-ruler-vertical{--fa:"\f548"}.fa-school{--fa:"\f549"}.fa-screwdriver{--fa:"\f54a"}.fa-shoe-prints{--fa:"\f54b"}.fa-skull{--fa:"\f54c"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-store{--fa:"\f54e"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-stroopwafel{--fa:"\f551"}.fa-toolbox{--fa:"\f552"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-wallet{--fa:"\f555"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-archway{--fa:"\f557"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-award{--fa:"\f559"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-bezier-curve{--fa:"\f55b"}.fa-bong{--fa:"\f55c"}.fa-brush{--fa:"\f55d"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-cannabis{--fa:"\f55f"}.fa-check-double{--fa:"\f560"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-cookie{--fa:"\f563"}.fa-cookie-bite{--fa:"\f564"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-drum{--fa:"\f569"}.fa-drum-steelpan{--fa:"\f56a"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-file-contract{--fa:"\f56c"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-file-invoice{--fa:"\f570"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-file-prescription{--fa:"\f572"}.fa-file-signature{--fa:"\f573"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-fill{--fa:"\f575"}.fa-fill-drip{--fa:"\f576"}.fa-fingerprint{--fa:"\f577"}.fa-fish{--fa:"\f578"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-grid-horizontal,.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-grid-vertical,.fa-grip-vertical{--fa:"\f58e"}.fa-headset{--fa:"\f590"}.fa-highlighter{--fa:"\f591"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-hotel{--fa:"\f594"}.fa-joint{--fa:"\f595"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-marker{--fa:"\f5a1"}.fa-medal{--fa:"\f5a2"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-monument{--fa:"\f5a6"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-paint-roller{--fa:"\f5aa"}.fa-passport{--fa:"\f5ab"}.fa-pen-fancy{--fa:"\f5ac"}.fa-pen-nib{--fa:"\f5ad"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-plane-arrival{--fa:"\f5af"}.fa-plane-departure{--fa:"\f5b0"}.fa-prescription{--fa:"\f5b1"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-signature{--fa:"\f5b7"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-solar-panel{--fa:"\f5ba"}.fa-spa{--fa:"\f5bb"}.fa-splotch{--fa:"\f5bc"}.fa-spray-can{--fa:"\f5bd"}.fa-stamp{--fa:"\f5bf"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-swatchbook{--fa:"\f5c3"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-tooth{--fa:"\f5c9"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-weight-hanging{--fa:"\f5cd"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-atom{--fa:"\f5d2"}.fa-bone{--fa:"\f5d7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-brain{--fa:"\f5dc"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-car-side{--fa:"\f5e4"}.fa-charging-station{--fa:"\f5e7"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-draw-polygon,.fa-vector-polygon{--fa:"\f5ee"}.fa-laptop-code{--fa:"\f5fc"}.fa-layer-group{--fa:"\f5fd"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-lungs{--fa:"\f604"}.fa-microscope{--fa:"\f610"}.fa-oil-can{--fa:"\f613"}.fa-poop{--fa:"\f619"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-star-of-life{--fa:"\f621"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-teeth{--fa:"\f62e"}.fa-teeth-open{--fa:"\f62f"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-traffic-light{--fa:"\f637"}.fa-truck-monster{--fa:"\f63b"}.fa-truck-pickup{--fa:"\f63c"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-ankh{--fa:"\f644"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-city{--fa:"\f64f"}.fa-comment-dollar{--fa:"\f651"}.fa-comments-dollar{--fa:"\f653"}.fa-cross{--fa:"\f654"}.fa-dharmachakra{--fa:"\f655"}.fa-envelope-open-text{--fa:"\f658"}.fa-folder-minus{--fa:"\f65d"}.fa-folder-plus{--fa:"\f65e"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-gopuram{--fa:"\f664"}.fa-hamsa{--fa:"\f665"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-jedi{--fa:"\f669"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-kaaba{--fa:"\f66b"}.fa-khanda{--fa:"\f66d"}.fa-landmark{--fa:"\f66f"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-menorah{--fa:"\f676"}.fa-mosque{--fa:"\f678"}.fa-om{--fa:"\f679"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-peace{--fa:"\f67c"}.fa-place-of-worship{--fa:"\f67f"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-socks{--fa:"\f696"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-star-and-crescent{--fa:"\f699"}.fa-star-of-david{--fa:"\f69a"}.fa-synagogue{--fa:"\f69b"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-torii-gate{--fa:"\f6a1"}.fa-vihara{--fa:"\f6a7"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-yin-yang{--fa:"\f6ad"}.fa-blender-phone{--fa:"\f6b6"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-campground{--fa:"\f6bb"}.fa-cat{--fa:"\f6be"}.fa-chair{--fa:"\f6c0"}.fa-cloud-moon{--fa:"\f6c3"}.fa-cloud-sun{--fa:"\f6c4"}.fa-cow{--fa:"\f6c8"}.fa-dice-d20{--fa:"\f6cf"}.fa-dice-d6{--fa:"\f6d1"}.fa-dog{--fa:"\f6d3"}.fa-dragon{--fa:"\f6d5"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-dungeon{--fa:"\f6d9"}.fa-file-csv{--fa:"\f6dd"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-ghost{--fa:"\f6e2"}.fa-hammer{--fa:"\f6e3"}.fa-hanukiah{--fa:"\f6e6"}.fa-hat-wizard{--fa:"\f6e8"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-hippo{--fa:"\f6ed"}.fa-horse{--fa:"\f6f0"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-mask{--fa:"\f6fa"}.fa-mountain{--fa:"\f6fc"}.fa-network-wired{--fa:"\f6ff"}.fa-otter{--fa:"\f700"}.fa-ring{--fa:"\f70b"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-scroll{--fa:"\f70e"}.fa-skull-crossbones{--fa:"\f714"}.fa-slash{--fa:"\f715"}.fa-spider{--fa:"\f717"}.fa-toilet-paper,.fa-toilet-paper-alt,.fa-toilet-paper-blank{--fa:"\f71e"}.fa-tractor{--fa:"\f722"}.fa-user-injured{--fa:"\f728"}.fa-vr-cardboard{--fa:"\f729"}.fa-wand-sparkles{--fa:"\f72b"}.fa-wind{--fa:"\f72e"}.fa-wine-bottle{--fa:"\f72f"}.fa-cloud-meatball{--fa:"\f73b"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-cloud-rain{--fa:"\f73d"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-democrat{--fa:"\f747"}.fa-flag-usa{--fa:"\f74d"}.fa-hurricane{--fa:"\f751"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-meteor{--fa:"\f753"}.fa-person-booth{--fa:"\f756"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-rainbow{--fa:"\f75b"}.fa-republican{--fa:"\f75e"}.fa-smog{--fa:"\f75f"}.fa-temperature-high{--fa:"\f769"}.fa-temperature-low{--fa:"\f76b"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-tornado{--fa:"\f76f"}.fa-volcano{--fa:"\f770"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-water{--fa:"\f773"}.fa-baby{--fa:"\f77c"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-biohazard{--fa:"\f780"}.fa-blog{--fa:"\f781"}.fa-calendar-day{--fa:"\f783"}.fa-calendar-week{--fa:"\f784"}.fa-candy-cane{--fa:"\f786"}.fa-carrot{--fa:"\f787"}.fa-cash-register{--fa:"\f788"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-dumpster{--fa:"\f793"}.fa-dumpster-fire{--fa:"\f794"}.fa-ethernet{--fa:"\f796"}.fa-gifts{--fa:"\f79c"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-grip-lines{--fa:"\f7a4"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-guitar{--fa:"\f7a6"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-holly-berry{--fa:"\f7aa"}.fa-horse-head{--fa:"\f7ab"}.fa-icicles{--fa:"\f7ad"}.fa-igloo{--fa:"\f7ae"}.fa-mitten{--fa:"\f7b5"}.fa-mug-hot{--fa:"\f7b6"}.fa-radiation{--fa:"\f7b9"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-restroom{--fa:"\f7bd"}.fa-satellite{--fa:"\f7bf"}.fa-satellite-dish{--fa:"\f7c0"}.fa-sd-card{--fa:"\f7c2"}.fa-sim-card{--fa:"\f7c4"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-sleigh{--fa:"\f7cc"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-snowman{--fa:"\f7d0"}.fa-snowplow{--fa:"\f7d2"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-toilet{--fa:"\f7d8"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-bacon{--fa:"\f7e5"}.fa-book-medical{--fa:"\f7e6"}.fa-bread-slice{--fa:"\f7ec"}.fa-cheese{--fa:"\f7ef"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-clipboard-user{--fa:"\f7f3"}.fa-comment-medical{--fa:"\f7f5"}.fa-crutch{--fa:"\f7f7"}.fa-disease{--fa:"\f7fa"}.fa-egg{--fa:"\f7fb"}.fa-folder-tree{--fa:"\f802"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-hand-middle-finger{--fa:"\f806"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-hospital-user{--fa:"\f80d"}.fa-hotdog{--fa:"\f80f"}.fa-ice-cream{--fa:"\f810"}.fa-laptop-medical{--fa:"\f812"}.fa-pager{--fa:"\f815"}.fa-pepper-hot{--fa:"\f816"}.fa-pizza-slice{--fa:"\f818"}.fa-sack-dollar{--fa:"\f81d"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-user-nurse{--fa:"\f82f"}.fa-wave-square{--fa:"\f83e"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-border-all{--fa:"\f84c"}.fa-border-none{--fa:"\f850"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-fan{--fa:"\f863"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-spell-check{--fa:"\f891"}.fa-voicemail{--fa:"\f897"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-radio{--fa:"\f8d7"}.fa-record-vinyl{--fa:"\f8d9"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-caravan{--fa:"\f8ff"}
:host,:root{--fa-family-brands:"Font Awesome 7 Brands";--fa-font-brands:normal 400 1em/1 var(--fa-family-brands)}@font-face{font-family:"Font Awesome 7 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fa-brands-400-BfBXV7Mm.woff2)}.fa-brands,.fa-classic.fa-brands,.fab{--fa-family:var(--fa-family-brands);--fa-style:400}.fa-firefox-browser{--fa:"\e007"}.fa-ideal{--fa:"\e013"}.fa-microblog{--fa:"\e01a"}.fa-pied-piper-square,.fa-square-pied-piper{--fa:"\e01e"}.fa-unity{--fa:"\e049"}.fa-dailymotion{--fa:"\e052"}.fa-instagram-square,.fa-square-instagram{--fa:"\e055"}.fa-mixer{--fa:"\e056"}.fa-shopify{--fa:"\e057"}.fa-deezer{--fa:"\e077"}.fa-edge-legacy{--fa:"\e078"}.fa-google-pay{--fa:"\e079"}.fa-rust{--fa:"\e07a"}.fa-tiktok{--fa:"\e07b"}.fa-unsplash{--fa:"\e07c"}.fa-cloudflare{--fa:"\e07d"}.fa-guilded{--fa:"\e07e"}.fa-hive{--fa:"\e07f"}.fa-42-group,.fa-innosoft{--fa:"\e080"}.fa-instalod{--fa:"\e081"}.fa-octopus-deploy{--fa:"\e082"}.fa-perbyte{--fa:"\e083"}.fa-uncharted{--fa:"\e084"}.fa-watchman-monitoring{--fa:"\e087"}.fa-wodu{--fa:"\e088"}.fa-wirsindhandwerk,.fa-wsh{--fa:"\e2d0"}.fa-bots{--fa:"\e340"}.fa-cmplid{--fa:"\e360"}.fa-bilibili{--fa:"\e3d9"}.fa-golang{--fa:"\e40f"}.fa-pix{--fa:"\e43a"}.fa-sitrox{--fa:"\e44a"}.fa-hashnode{--fa:"\e499"}.fa-meta{--fa:"\e49b"}.fa-padlet{--fa:"\e4a0"}.fa-nfc-directional{--fa:"\e530"}.fa-nfc-symbol{--fa:"\e531"}.fa-screenpal{--fa:"\e570"}.fa-space-awesome{--fa:"\e5ac"}.fa-square-font-awesome{--fa:"\e5ad"}.fa-gitlab-square,.fa-square-gitlab{--fa:"\e5ae"}.fa-odysee{--fa:"\e5c6"}.fa-stubber{--fa:"\e5c7"}.fa-debian{--fa:"\e60b"}.fa-shoelace{--fa:"\e60c"}.fa-threads{--fa:"\e618"}.fa-square-threads{--fa:"\e619"}.fa-square-x-twitter{--fa:"\e61a"}.fa-x-twitter{--fa:"\e61b"}.fa-opensuse{--fa:"\e62b"}.fa-letterboxd{--fa:"\e62d"}.fa-square-letterboxd{--fa:"\e62e"}.fa-mintbit{--fa:"\e62f"}.fa-google-scholar{--fa:"\e63b"}.fa-brave{--fa:"\e63c"}.fa-brave-reverse{--fa:"\e63d"}.fa-pixiv{--fa:"\e640"}.fa-upwork{--fa:"\e641"}.fa-webflow{--fa:"\e65c"}.fa-signal-messenger{--fa:"\e663"}.fa-bluesky{--fa:"\e671"}.fa-jxl{--fa:"\e67b"}.fa-square-upwork{--fa:"\e67c"}.fa-web-awesome{--fa:"\e682"}.fa-square-web-awesome{--fa:"\e683"}.fa-square-web-awesome-stroke{--fa:"\e684"}.fa-dart-lang{--fa:"\e693"}.fa-flutter{--fa:"\e694"}.fa-files-pinwheel{--fa:"\e69f"}.fa-css{--fa:"\e6a2"}.fa-square-bluesky{--fa:"\e6a3"}.fa-openai{--fa:"\e7cf"}.fa-square-linkedin{--fa:"\e7d0"}.fa-cash-app{--fa:"\e7d4"}.fa-disqus{--fa:"\e7d5"}.fa-11ty,.fa-eleventy{--fa:"\e7d6"}.fa-kakao-talk{--fa:"\e7d7"}.fa-linktree{--fa:"\e7d8"}.fa-notion{--fa:"\e7d9"}.fa-pandora{--fa:"\e7da"}.fa-pixelfed{--fa:"\e7db"}.fa-tidal{--fa:"\e7dc"}.fa-vsco{--fa:"\e7dd"}.fa-w3c{--fa:"\e7de"}.fa-lumon{--fa:"\e7e2"}.fa-lumon-drop{--fa:"\e7e3"}.fa-square-figma{--fa:"\e7e4"}.fa-tex{--fa:"\e7ff"}.fa-duolingo{--fa:"\e812"}.fa-square-twitter,.fa-twitter-square{--fa:"\f081"}.fa-facebook-square,.fa-square-facebook{--fa:"\f082"}.fa-linkedin{--fa:"\f08c"}.fa-github-square,.fa-square-github{--fa:"\f092"}.fa-twitter{--fa:"\f099"}.fa-facebook{--fa:"\f09a"}.fa-github{--fa:"\f09b"}.fa-pinterest{--fa:"\f0d2"}.fa-pinterest-square,.fa-square-pinterest{--fa:"\f0d3"}.fa-google-plus-square,.fa-square-google-plus{--fa:"\f0d4"}.fa-google-plus-g{--fa:"\f0d5"}.fa-linkedin-in{--fa:"\f0e1"}.fa-github-alt{--fa:"\f113"}.fa-maxcdn{--fa:"\f136"}.fa-html5{--fa:"\f13b"}.fa-css3{--fa:"\f13c"}.fa-btc{--fa:"\f15a"}.fa-youtube{--fa:"\f167"}.fa-xing{--fa:"\f168"}.fa-square-xing,.fa-xing-square{--fa:"\f169"}.fa-dropbox{--fa:"\f16b"}.fa-stack-overflow{--fa:"\f16c"}.fa-instagram{--fa:"\f16d"}.fa-flickr{--fa:"\f16e"}.fa-adn{--fa:"\f170"}.fa-bitbucket{--fa:"\f171"}.fa-tumblr{--fa:"\f173"}.fa-square-tumblr,.fa-tumblr-square{--fa:"\f174"}.fa-apple{--fa:"\f179"}.fa-windows{--fa:"\f17a"}.fa-android{--fa:"\f17b"}.fa-linux{--fa:"\f17c"}.fa-dribbble{--fa:"\f17d"}.fa-skype{--fa:"\f17e"}.fa-foursquare{--fa:"\f180"}.fa-trello{--fa:"\f181"}.fa-gratipay{--fa:"\f184"}.fa-vk{--fa:"\f189"}.fa-weibo{--fa:"\f18a"}.fa-renren{--fa:"\f18b"}.fa-pagelines{--fa:"\f18c"}.fa-stack-exchange{--fa:"\f18d"}.fa-square-vimeo,.fa-vimeo-square{--fa:"\f194"}.fa-slack,.fa-slack-hash{--fa:"\f198"}.fa-wordpress{--fa:"\f19a"}.fa-openid{--fa:"\f19b"}.fa-yahoo{--fa:"\f19e"}.fa-google{--fa:"\f1a0"}.fa-reddit{--fa:"\f1a1"}.fa-reddit-square,.fa-square-reddit{--fa:"\f1a2"}.fa-stumbleupon-circle{--fa:"\f1a3"}.fa-stumbleupon{--fa:"\f1a4"}.fa-delicious{--fa:"\f1a5"}.fa-digg{--fa:"\f1a6"}.fa-pied-piper-pp{--fa:"\f1a7"}.fa-pied-piper-alt{--fa:"\f1a8"}.fa-drupal{--fa:"\f1a9"}.fa-joomla{--fa:"\f1aa"}.fa-behance{--fa:"\f1b4"}.fa-behance-square,.fa-square-behance{--fa:"\f1b5"}.fa-steam{--fa:"\f1b6"}.fa-square-steam,.fa-steam-square{--fa:"\f1b7"}.fa-spotify{--fa:"\f1bc"}.fa-deviantart{--fa:"\f1bd"}.fa-soundcloud{--fa:"\f1be"}.fa-vine{--fa:"\f1ca"}.fa-codepen{--fa:"\f1cb"}.fa-jsfiddle{--fa:"\f1cc"}.fa-rebel{--fa:"\f1d0"}.fa-empire{--fa:"\f1d1"}.fa-git-square,.fa-square-git{--fa:"\f1d2"}.fa-git{--fa:"\f1d3"}.fa-hacker-news{--fa:"\f1d4"}.fa-tencent-weibo{--fa:"\f1d5"}.fa-qq{--fa:"\f1d6"}.fa-weixin{--fa:"\f1d7"}.fa-slideshare{--fa:"\f1e7"}.fa-twitch{--fa:"\f1e8"}.fa-yelp{--fa:"\f1e9"}.fa-paypal{--fa:"\f1ed"}.fa-google-wallet{--fa:"\f1ee"}.fa-cc-visa{--fa:"\f1f0"}.fa-cc-mastercard{--fa:"\f1f1"}.fa-cc-discover{--fa:"\f1f2"}.fa-cc-amex{--fa:"\f1f3"}.fa-cc-paypal{--fa:"\f1f4"}.fa-cc-stripe{--fa:"\f1f5"}.fa-lastfm{--fa:"\f202"}.fa-lastfm-square,.fa-square-lastfm{--fa:"\f203"}.fa-ioxhost{--fa:"\f208"}.fa-angellist{--fa:"\f209"}.fa-buysellads{--fa:"\f20d"}.fa-connectdevelop{--fa:"\f20e"}.fa-dashcube{--fa:"\f210"}.fa-forumbee{--fa:"\f211"}.fa-leanpub{--fa:"\f212"}.fa-sellsy{--fa:"\f213"}.fa-shirtsinbulk{--fa:"\f214"}.fa-simplybuilt{--fa:"\f215"}.fa-skyatlas{--fa:"\f216"}.fa-pinterest-p{--fa:"\f231"}.fa-whatsapp{--fa:"\f232"}.fa-viacoin{--fa:"\f237"}.fa-medium,.fa-medium-m{--fa:"\f23a"}.fa-y-combinator{--fa:"\f23b"}.fa-optin-monster{--fa:"\f23c"}.fa-opencart{--fa:"\f23d"}.fa-expeditedssl{--fa:"\f23e"}.fa-cc-jcb{--fa:"\f24b"}.fa-cc-diners-club{--fa:"\f24c"}.fa-creative-commons{--fa:"\f25e"}.fa-gg{--fa:"\f260"}.fa-gg-circle{--fa:"\f261"}.fa-odnoklassniki{--fa:"\f263"}.fa-odnoklassniki-square,.fa-square-odnoklassniki{--fa:"\f264"}.fa-get-pocket{--fa:"\f265"}.fa-wikipedia-w{--fa:"\f266"}.fa-safari{--fa:"\f267"}.fa-chrome{--fa:"\f268"}.fa-firefox{--fa:"\f269"}.fa-opera{--fa:"\f26a"}.fa-internet-explorer{--fa:"\f26b"}.fa-contao{--fa:"\f26d"}.fa-500px{--fa:"\f26e"}.fa-amazon{--fa:"\f270"}.fa-houzz{--fa:"\f27c"}.fa-vimeo-v{--fa:"\f27d"}.fa-black-tie{--fa:"\f27e"}.fa-fonticons{--fa:"\f280"}.fa-reddit-alien{--fa:"\f281"}.fa-edge{--fa:"\f282"}.fa-codiepie{--fa:"\f284"}.fa-modx{--fa:"\f285"}.fa-fort-awesome{--fa:"\f286"}.fa-usb{--fa:"\f287"}.fa-product-hunt{--fa:"\f288"}.fa-mixcloud{--fa:"\f289"}.fa-scribd{--fa:"\f28a"}.fa-bluetooth{--fa:"\f293"}.fa-bluetooth-b{--fa:"\f294"}.fa-gitlab{--fa:"\f296"}.fa-wpbeginner{--fa:"\f297"}.fa-wpforms{--fa:"\f298"}.fa-envira{--fa:"\f299"}.fa-glide{--fa:"\f2a5"}.fa-glide-g{--fa:"\f2a6"}.fa-viadeo{--fa:"\f2a9"}.fa-square-viadeo,.fa-viadeo-square{--fa:"\f2aa"}.fa-snapchat,.fa-snapchat-ghost{--fa:"\f2ab"}.fa-snapchat-square,.fa-square-snapchat{--fa:"\f2ad"}.fa-pied-piper{--fa:"\f2ae"}.fa-first-order{--fa:"\f2b0"}.fa-yoast{--fa:"\f2b1"}.fa-themeisle{--fa:"\f2b2"}.fa-google-plus{--fa:"\f2b3"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-linode{--fa:"\f2b8"}.fa-quora{--fa:"\f2c4"}.fa-free-code-camp{--fa:"\f2c5"}.fa-telegram,.fa-telegram-plane{--fa:"\f2c6"}.fa-bandcamp{--fa:"\f2d5"}.fa-grav{--fa:"\f2d6"}.fa-etsy{--fa:"\f2d7"}.fa-imdb{--fa:"\f2d8"}.fa-ravelry{--fa:"\f2d9"}.fa-sellcast{--fa:"\f2da"}.fa-superpowers{--fa:"\f2dd"}.fa-wpexplorer{--fa:"\f2de"}.fa-meetup{--fa:"\f2e0"}.fa-font-awesome-alt,.fa-square-font-awesome-stroke{--fa:"\f35c"}.fa-accessible-icon{--fa:"\f368"}.fa-accusoft{--fa:"\f369"}.fa-adversal{--fa:"\f36a"}.fa-affiliatetheme{--fa:"\f36b"}.fa-algolia{--fa:"\f36c"}.fa-amilia{--fa:"\f36d"}.fa-angrycreative{--fa:"\f36e"}.fa-app-store{--fa:"\f36f"}.fa-app-store-ios{--fa:"\f370"}.fa-apper{--fa:"\f371"}.fa-asymmetrik{--fa:"\f372"}.fa-audible{--fa:"\f373"}.fa-avianex{--fa:"\f374"}.fa-aws{--fa:"\f375"}.fa-bimobject{--fa:"\f378"}.fa-bitcoin{--fa:"\f379"}.fa-bity{--fa:"\f37a"}.fa-blackberry{--fa:"\f37b"}.fa-blogger{--fa:"\f37c"}.fa-blogger-b{--fa:"\f37d"}.fa-buromobelexperte{--fa:"\f37f"}.fa-centercode{--fa:"\f380"}.fa-cloudscale{--fa:"\f383"}.fa-cloudsmith{--fa:"\f384"}.fa-cloudversify{--fa:"\f385"}.fa-cpanel{--fa:"\f388"}.fa-css3-alt{--fa:"\f38b"}.fa-cuttlefish{--fa:"\f38c"}.fa-d-and-d{--fa:"\f38d"}.fa-deploydog{--fa:"\f38e"}.fa-deskpro{--fa:"\f38f"}.fa-digital-ocean{--fa:"\f391"}.fa-discord{--fa:"\f392"}.fa-discourse{--fa:"\f393"}.fa-dochub{--fa:"\f394"}.fa-docker{--fa:"\f395"}.fa-draft2digital{--fa:"\f396"}.fa-dribbble-square,.fa-square-dribbble{--fa:"\f397"}.fa-dyalog{--fa:"\f399"}.fa-earlybirds{--fa:"\f39a"}.fa-erlang{--fa:"\f39d"}.fa-facebook-f{--fa:"\f39e"}.fa-facebook-messenger{--fa:"\f39f"}.fa-firstdraft{--fa:"\f3a1"}.fa-fonticons-fi{--fa:"\f3a2"}.fa-fort-awesome-alt{--fa:"\f3a3"}.fa-freebsd{--fa:"\f3a4"}.fa-gitkraken{--fa:"\f3a6"}.fa-gofore{--fa:"\f3a7"}.fa-goodreads{--fa:"\f3a8"}.fa-goodreads-g{--fa:"\f3a9"}.fa-google-drive{--fa:"\f3aa"}.fa-google-play{--fa:"\f3ab"}.fa-gripfire{--fa:"\f3ac"}.fa-grunt{--fa:"\f3ad"}.fa-gulp{--fa:"\f3ae"}.fa-hacker-news-square,.fa-square-hacker-news{--fa:"\f3af"}.fa-hire-a-helper{--fa:"\f3b0"}.fa-hotjar{--fa:"\f3b1"}.fa-hubspot{--fa:"\f3b2"}.fa-itunes{--fa:"\f3b4"}.fa-itunes-note{--fa:"\f3b5"}.fa-jenkins{--fa:"\f3b6"}.fa-joget{--fa:"\f3b7"}.fa-js{--fa:"\f3b8"}.fa-js-square,.fa-square-js{--fa:"\f3b9"}.fa-keycdn{--fa:"\f3ba"}.fa-kickstarter,.fa-square-kickstarter{--fa:"\f3bb"}.fa-kickstarter-k{--fa:"\f3bc"}.fa-laravel{--fa:"\f3bd"}.fa-line{--fa:"\f3c0"}.fa-lyft{--fa:"\f3c3"}.fa-magento{--fa:"\f3c4"}.fa-medapps{--fa:"\f3c6"}.fa-medrt{--fa:"\f3c8"}.fa-microsoft{--fa:"\f3ca"}.fa-mix{--fa:"\f3cb"}.fa-mizuni{--fa:"\f3cc"}.fa-monero{--fa:"\f3d0"}.fa-napster{--fa:"\f3d2"}.fa-node-js{--fa:"\f3d3"}.fa-npm{--fa:"\f3d4"}.fa-ns8{--fa:"\f3d5"}.fa-nutritionix{--fa:"\f3d6"}.fa-page4{--fa:"\f3d7"}.fa-palfed{--fa:"\f3d8"}.fa-patreon{--fa:"\f3d9"}.fa-periscope{--fa:"\f3da"}.fa-phabricator{--fa:"\f3db"}.fa-phoenix-framework{--fa:"\f3dc"}.fa-playstation{--fa:"\f3df"}.fa-pushed{--fa:"\f3e1"}.fa-python{--fa:"\f3e2"}.fa-red-river{--fa:"\f3e3"}.fa-rendact,.fa-wpressr{--fa:"\f3e4"}.fa-replyd{--fa:"\f3e6"}.fa-resolving{--fa:"\f3e7"}.fa-rocketchat{--fa:"\f3e8"}.fa-rockrms{--fa:"\f3e9"}.fa-schlix{--fa:"\f3ea"}.fa-searchengin{--fa:"\f3eb"}.fa-servicestack{--fa:"\f3ec"}.fa-sistrix{--fa:"\f3ee"}.fa-speakap{--fa:"\f3f3"}.fa-staylinked{--fa:"\f3f5"}.fa-steam-symbol{--fa:"\f3f6"}.fa-sticker-mule{--fa:"\f3f7"}.fa-studiovinari{--fa:"\f3f8"}.fa-supple{--fa:"\f3f9"}.fa-uber{--fa:"\f402"}.fa-uikit{--fa:"\f403"}.fa-uniregistry{--fa:"\f404"}.fa-untappd{--fa:"\f405"}.fa-ussunnah{--fa:"\f407"}.fa-vaadin{--fa:"\f408"}.fa-viber{--fa:"\f409"}.fa-vimeo{--fa:"\f40a"}.fa-vnv{--fa:"\f40b"}.fa-square-whatsapp,.fa-whatsapp-square{--fa:"\f40c"}.fa-whmcs{--fa:"\f40d"}.fa-wordpress-simple{--fa:"\f411"}.fa-xbox{--fa:"\f412"}.fa-yandex{--fa:"\f413"}.fa-yandex-international{--fa:"\f414"}.fa-apple-pay{--fa:"\f415"}.fa-cc-apple-pay{--fa:"\f416"}.fa-fly{--fa:"\f417"}.fa-node{--fa:"\f419"}.fa-osi{--fa:"\f41a"}.fa-react{--fa:"\f41b"}.fa-autoprefixer{--fa:"\f41c"}.fa-less{--fa:"\f41d"}.fa-sass{--fa:"\f41e"}.fa-vuejs{--fa:"\f41f"}.fa-angular{--fa:"\f420"}.fa-aviato{--fa:"\f421"}.fa-ember{--fa:"\f423"}.fa-gitter{--fa:"\f426"}.fa-hooli{--fa:"\f427"}.fa-strava{--fa:"\f428"}.fa-stripe{--fa:"\f429"}.fa-stripe-s{--fa:"\f42a"}.fa-typo3{--fa:"\f42b"}.fa-amazon-pay{--fa:"\f42c"}.fa-cc-amazon-pay{--fa:"\f42d"}.fa-ethereum{--fa:"\f42e"}.fa-korvue{--fa:"\f42f"}.fa-elementor{--fa:"\f430"}.fa-square-youtube,.fa-youtube-square{--fa:"\f431"}.fa-flipboard{--fa:"\f44d"}.fa-hips{--fa:"\f452"}.fa-php{--fa:"\f457"}.fa-quinscape{--fa:"\f459"}.fa-readme{--fa:"\f4d5"}.fa-java{--fa:"\f4e4"}.fa-pied-piper-hat{--fa:"\f4e5"}.fa-creative-commons-by{--fa:"\f4e7"}.fa-creative-commons-nc{--fa:"\f4e8"}.fa-creative-commons-nc-eu{--fa:"\f4e9"}.fa-creative-commons-nc-jp{--fa:"\f4ea"}.fa-creative-commons-nd{--fa:"\f4eb"}.fa-creative-commons-pd{--fa:"\f4ec"}.fa-creative-commons-pd-alt{--fa:"\f4ed"}.fa-creative-commons-remix{--fa:"\f4ee"}.fa-creative-commons-sa{--fa:"\f4ef"}.fa-creative-commons-sampling{--fa:"\f4f0"}.fa-creative-commons-sampling-plus{--fa:"\f4f1"}.fa-creative-commons-share{--fa:"\f4f2"}.fa-creative-commons-zero{--fa:"\f4f3"}.fa-ebay{--fa:"\f4f4"}.fa-keybase{--fa:"\f4f5"}.fa-mastodon{--fa:"\f4f6"}.fa-r-project{--fa:"\f4f7"}.fa-researchgate{--fa:"\f4f8"}.fa-teamspeak{--fa:"\f4f9"}.fa-first-order-alt{--fa:"\f50a"}.fa-fulcrum{--fa:"\f50b"}.fa-galactic-republic{--fa:"\f50c"}.fa-galactic-senate{--fa:"\f50d"}.fa-jedi-order{--fa:"\f50e"}.fa-mandalorian{--fa:"\f50f"}.fa-old-republic{--fa:"\f510"}.fa-phoenix-squadron{--fa:"\f511"}.fa-sith{--fa:"\f512"}.fa-trade-federation{--fa:"\f513"}.fa-wolf-pack-battalion{--fa:"\f514"}.fa-hornbill{--fa:"\f592"}.fa-mailchimp{--fa:"\f59e"}.fa-megaport{--fa:"\f5a3"}.fa-nimblr{--fa:"\f5a8"}.fa-rev{--fa:"\f5b2"}.fa-shopware{--fa:"\f5b5"}.fa-squarespace{--fa:"\f5be"}.fa-themeco{--fa:"\f5c6"}.fa-weebly{--fa:"\f5cc"}.fa-wix{--fa:"\f5cf"}.fa-ello{--fa:"\f5f1"}.fa-hackerrank{--fa:"\f5f7"}.fa-kaggle{--fa:"\f5fa"}.fa-markdown{--fa:"\f60f"}.fa-neos{--fa:"\f612"}.fa-zhihu{--fa:"\f63f"}.fa-alipay{--fa:"\f642"}.fa-the-red-yeti{--fa:"\f69d"}.fa-critical-role{--fa:"\f6c9"}.fa-d-and-d-beyond{--fa:"\f6ca"}.fa-dev{--fa:"\f6cc"}.fa-fantasy-flight-games{--fa:"\f6dc"}.fa-wizards-of-the-coast{--fa:"\f730"}.fa-think-peaks{--fa:"\f731"}.fa-reacteurope{--fa:"\f75d"}.fa-artstation{--fa:"\f77a"}.fa-atlassian{--fa:"\f77b"}.fa-canadian-maple-leaf{--fa:"\f785"}.fa-centos{--fa:"\f789"}.fa-confluence{--fa:"\f78d"}.fa-dhl{--fa:"\f790"}.fa-diaspora{--fa:"\f791"}.fa-fedex{--fa:"\f797"}.fa-fedora{--fa:"\f798"}.fa-figma{--fa:"\f799"}.fa-intercom{--fa:"\f7af"}.fa-invision{--fa:"\f7b0"}.fa-jira{--fa:"\f7b1"}.fa-mendeley{--fa:"\f7b3"}.fa-raspberry-pi{--fa:"\f7bb"}.fa-redhat{--fa:"\f7bc"}.fa-sketch{--fa:"\f7c6"}.fa-sourcetree{--fa:"\f7d3"}.fa-suse{--fa:"\f7d6"}.fa-ubuntu{--fa:"\f7df"}.fa-ups{--fa:"\f7e0"}.fa-usps{--fa:"\f7e1"}.fa-yarn{--fa:"\f7e3"}.fa-airbnb{--fa:"\f834"}.fa-battle-net{--fa:"\f835"}.fa-bootstrap{--fa:"\f836"}.fa-buffer{--fa:"\f837"}.fa-chromecast{--fa:"\f838"}.fa-evernote{--fa:"\f839"}.fa-itch-io{--fa:"\f83a"}.fa-salesforce{--fa:"\f83b"}.fa-speaker-deck{--fa:"\f83c"}.fa-symfony{--fa:"\f83d"}.fa-waze{--fa:"\f83f"}.fa-yammer{--fa:"\f840"}.fa-git-alt{--fa:"\f841"}.fa-stackpath{--fa:"\f842"}.fa-cotton-bureau{--fa:"\f89e"}.fa-buy-n-large{--fa:"\f8a6"}.fa-mdb{--fa:"\f8ca"}.fa-orcid{--fa:"\f8d2"}.fa-swift{--fa:"\f8e1"}.fa-umbraco{--fa:"\f8e8"}:host,:root{--fa-font-regular:normal 400 1em/1 var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fa-regular-400-BVHPE7da.woff2)}.far{--fa-family:var(--fa-family-classic)}.fa-regular,.far{--fa-style:400}:host,:root{--fa-family-classic:"Font Awesome 7 Free";--fa-font-solid:normal 900 1em/1 var(--fa-family-classic);--fa-style-family-classic:var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:900;font-display:block;src:url(/assets/fa-solid-900-8GirhLYJ.woff2)}.fas{--fa-style:900}.fa-classic,.fas{--fa-family:var(--fa-family-classic)}.fa-solid{--fa-style:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/assets/fa-brands-400-BfBXV7Mm.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/assets/fa-solid-900-8GirhLYJ.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/assets/fa-regular-400-BVHPE7da.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-solid-900-8GirhLYJ.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-brands-400-BfBXV7Mm.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-regular-400-BVHPE7da.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(data:font/woff2;base64,d09GMk9UVE8AAA/IAAkAAAAAIi4AAA9/A4EBAAAAAAAAAAAAAAAAAAAAAAAAAAAAATYCJAQGBmADgRwFiH0AghwHIA22GYUWESMRdnLSigfwXxK0JUN3PWgtIVtGtFABIUcjR8vMKvVNUhctBQIndOh7wFzNSdpf090C0MDGNSSuod3GJyMkmSUKlm72kk6vLpKqU4SDLlGqOoHx7wzNIRzzvZseTSBF/CoWaAkVRa5inol55lqxm5oz/9pr/qq+GXmakr21m0KxnJeWZ3dOoSo0//sTGj5e/r///znN1cDq77IugUrslFAFYg2CIfrG8Y3Q37GCqLAnZVKJvSuQC/x0zjP8v7/fp1rJjZ8tzGQcKS6iBFIAJMtql0EBKwIFJDuugO7Ztucm55fDg6nLQiMNIEFoAX1WesldzzU7W7qlB5C8/++0N/TOuYAMJkEJWxa0H6VUF8my5XljyWqW/HtHCdpC8/dzpf3Zo1xxtyzxz6xshdvbIjqxeb2f7J8c5YBze4Ccu5kUEBWBI0AH7IDAk6uwKytrZI3u+Oomu9N+Ch7edEI2hmbmj9mR4KGCCO1OI0Dr/VoFnpZiOoC03o/+9KGeq7f9lSyoBfSRrC9Amv8NNQXkv9dga9kX4SPg6q20ZH4KKkGH7ZxcnL4NSQJ3bNjDCltkZrMsvFjN7LHIvUfNiVvGzRR5g2liAY8ep1zeXndi8cn0bUAk+Rdo+H2aN3ibf00mnl6cTgSTzGQi2PwMLyybUdSOvMvrfRwevuNCicEtAc7iNqM5uMOiDXd5AXgoUDKe4wSrl3nYrJiJ5dgWy5eZNmGBqPqM7SiyHxMG13JMyioCC01sSbFISoxYYmjOYqngylWrJo0avhAvkN+mBQx+0Q/EuqY/MKvU/6QZOMFPn8YVKyFyLf/LwdGlvyBChm501AWTjv/yEZr7ZH17ZBCTYxHSc7VDmT9AFoyEi6CHBl359As9DQ82B5suxNn3j4gMt+UxWSNNYZZQvW8yZzIvpkfcsB9IM5scuJuxZ+gYJ1yo5FvehXBoyRMNnMS9UkW8OOc0MMSN2jR1ry3AabQk+JogpOfRBxzLQ6FlJ2OAKkDymQgcW9xTi3N58PQJMI1CpuCI5kjHZahelKvRmSv2ue23LAciStmv+qMxQMnoseN2TIh3nYzeu5gDMxPesxbeaVPhgpl1YJmQaT3p1uPa1l1QhEhsavLU+p3RJIxFqOwqyqks0qiMPn+ufnYItSTrkSg46sjY07FeCST6L1G6yVZZA2yuHrPmLfvQd7z6pC2GlriWzHIa3OjGNaElbS9udWlddmD03CQBYiOxu4x5MJj9aty8+8AtN195+WXnHXvMkeNHDepdrGj100fvPXPfPXedUS6QTH6OC8SLjm/RC7INBP1psFtAuh/jut1At7ug28Oumya6dSRdewT9u6fdi8KNPu45gM6I0glL5B4A5FS5OD6rJV07pr01Tbe7DNCfricygjae+C8jaQlwudWMKcHzYSyjgDACa+78r8uoVNCuVt7QVZyQLL8TeXFxjQoILPBnv12E3VdiCtFHfhcuFVlENkpnn2H/SXxVqpIlyc3yF4pgxXblcOUDlbeqTC1Xn9KUaxfCEQ5ZDvsdWhyTHXc4xTiPFe9zSekzvX2uzy5XoflexesHfIjl6zaU7k0eJ7GkJRisvss6IthIXzDKJNgOafeXL1zY+OrZ2RWDrpkmcPqRR0ALgU2f5sPNsN5mzE7tGsX/CsEmx07579/v/0rKfyU/B9xewNKUpWHBHGbSwWLhbS+nLAwOaSF2mpv37S0/A/N7tx/MR+H37AN49NY/GwSdrdlKnwmsNXUd0tTVHOFmclEYIQgaGkBICGSuZ2Zc1ZkgP6RM2kJWRDpVWXSeUXND5gKE1JyQkTqNKOsaR7iRmE+pgsyJlfylH6GUWXsT4uqgTL4XmmnNBvTSIeYa4auJkXz9tYBP6kI9QqqfU+wpBYuGK8AgbUZh6gA5zBkSrotIcz5B9ZUVMbvF5XkimQGmEkJDFtup83hwGaecgpTfOY8wQkjFBzHim294LkTOH5ONcFRwicEpLaxkTBrpwgUgBlRdiBbKSaPvsPwgNe+QUgccBUKDlOTvIscppyB76uemdhAoSqlahohzaq7UyX1ypuqk1WitUALYdpVCZjsbLNPWInJ/Wes1k6pryh+M6SRpjCbelogDZqvZoKqmSIjR31Kygf6f65K5G/LTlgDb0MVco6lFM67rlKt9moYigNgIdq9yZOjHuvIR2PQxkiarNVcVl9zfdHZiykproVioWsEItpndkPRp+9f1iEFZrhiBIGSl9F51vg6hluZQK1vrAmvXWTvJBc0mVVWMsuULNSugE0RQP9YSpt/9U5ZGBkV6UFpG3YtQk8V8RYcxEvldZR5I30VGzICwLSbvPXh/sd8AvSSvFjJZCB+d6PnyuEek88l8lBPR+BJaCYxfwwA0qhk0mcY4Z4w7NSIui2Spk3wgIpgJhpzfTmKALCrJLZCAScME5kqCYdqz+RVLJFffGEwnooYqpsl7EEYSN0SqBE30aFd04GY8/GVnAGNw86+H/zWjfEohq3YYxm0LulET5J7JoTAIGWn0CYlrS9e/DgdlMOlMMM2U/9dKwRHEda8hq2OZM8rY5I00yY9eXn4zGnIsmAASXcciw0TcLGE9Be859qlRjbeNBLjn/fu9kbEK/E0YQQ31G+2zQY3SuUUVjsBLePiL/6+46JcWPTyrzXIohckV6wVMt4jguZ/DT85pkL1XgabxDej/lYMB5gkvnpz879KLsg1b4DuSzocNzAOx8K39A+BeuhzA0bwHxKtUqlvryMsHHRjDoAqCdgrT6/MrNJIl8BAha+So2Z3q4y7bsHc2oWKDc3jqafI8EzgA8xbpBJ8JJKRRDnt7UXS0YwcEKRXGPKiGlDgD3ugGi52DrG2MM8+AO83Woq8P9JT6ox9mlDCwZhyDETO3JmvjwFnCPfnw45a5stJ9j1QK+bzOqv2jqUZBNibfaIdOl1eA1kQ7h2dQI8DTZTUXVFJmzyIlJVwFsTapQBQqjqdr4qXGfoma0Qnna96oFnEPDNrdtcWgvWAvEUqs4GC8mVtbJ8omjqeYiro6oT8pq3ip63X6up32Y4gP1PUX6APTS9osERNRRXR9i/+YulbmAd3XfI0eWF1ubK2AI4NK8ygBll5Oq4JoKJ127LhN21X7NfXV+7k0Rgtlu8hpjgyapeonI0xI1cn6T61Xpq5rpx3VT7g/pSGipIRrGWKB9tY56llBi0myy5NmDZRGrbd4OInkwyiXMhKjtl/T1iC5iId7UOocDRvAnozZYbGHekzqtCExsN/jToMDp2hoAT2/g7ySVayA/KCUxm07sANSKQ+JgVVb7bDjedw2hLw9aOsGPOucwfNDNPQ82R4kBooORoE6uEc368C/4EV6ptNehiCxci9VcrbhBugYGilx8skc9pfwz7f4lcUujBZqGRT7Yj9/GeF9uY9sli0x+jZku4B7V5CtDAsvQE+x4CGiGMrHlBnjZ0bH0PihMmF80fW1oCF2ZNt7v3jHuzgavrvcNTa8/Mf+lA28ePHHhdmlDs8Ijtsw41mQAzvwgOKGD1MfShiSoHyiyJrdYqp0/sF6cC6ZcQcwPs1nKZaFuzYcmZ63tyiDyriD0nlUmMlvEVDQLq09dX5+a/BCmp3giaHXbgvBDWB6GUeYkCJoe0RHFAuTiC7EWEtxIjYMlowP2ID2zjgBYs0FN4eE5IuVNZgWg21O/9fbq/bbBR+RDrc2rLVjxpO+anAx69iHLY8Rwbgn6BgDS4KZvlyRdNypPcT4G0RcEvfduSXZK9vbOhvOqxLHo0L53u3tM2fQ1171UqgFwaN7/iNt0KPwFbvwYwjhFlnWBIKVFEMvvpaVQNC18E19gVmLOadcxghyPsO0e9GzdZqJbAXKAazc/8ObOkWFE3IWDAnZDxLnMwOjzchyp7RASRrhFEiUFFsYUZZGhB5+IW2DBTHDEDOBSjHt/IyKa+I2YgshSBQUvjdFHVFSnRM7MLrKBcRwFxNCXuKIWxkkDZ3+GNSME7+HNFfwO/1sPObe41m+JMcl5i4nO+f7sAWpd3LiiRQKWk4dBljDES8g2BQw2ivsHIW4+jD/wt59GA//0G8vh/oQ5lvznmwzL8LRG9sCdLI+9lzbhO05llkvRHx2KbZmKzhzwqUGwYQo01QBjU9dhD4so8lPnjgxcUjV0SIEMK4oIhJD7FTYlJhAMCAvn9kKjWCzYoSFkOXbiZ9YkeBAyWHrMwq8OGUy2/ExrEh6VZNtBrZRyYayz4FnJlTvuR/zj9Jll0FK/h5zjG4lJQ84Rrz/PlWhF67tuOAAReg8QlviW7BqX0z6dNNNWjHPAf0783geYmU3uu+nMa96e7VTkIwddJvmc7uBmfrcbhKZC0RHpV/nFU6Q48pogAXcnadHcERQnjZYlsKgbAkz/PvinZmQWXZBy19p5MhAQE40OBPxz+fYZgK99OPNnJXHxomMWB7La/SnlBrolWVgu/xaRI7zL8ALVqePUC9iPvuUW3N3XZI6J6uRiMrebvG9YDIbfHGAXDedDHIpyu79Uq4D91aqY3+ABiG8rsVnRg1L5xpsOLVt51LUQTvrEAtUMqzOzqK2T2t2zP772rd/ZY6fUp1uF6ePhpWeIxiqoWyhNsRA69AZrcY5o5zVFHUIBwtfsdxjAkFKhVFxVByV78qjlajtlsg1clS7RI9XJ/f2gjjXdB/xy3u+B7Z1szrwPh1m8nMticlqfZJWvPGLmjcJBohzT5z1F63AWaocmFtuAY1ePeBY30R4kfL7aE9+GetD5Hvj8eGMZ3up6qQxKgieGx69dhLxDSY+nQ5FI3LRfrLhMDFvEwF2uOoME+/Gh0MqYxkm4s05u6D4DyLBRemu4kMtB6Nv/NOFUZPitzFD8qL8o0r+kYrPnnsY0vWZd5GEzsCREC+Wz3APkfzeqsAp0tZw0lLrhuy2DNy1E1VNM1LqdhIO45OPIwT3rftapv3Bq7mdNHFSgnKIkN8flMKWHNJF9U1BMQglWyx3EZ7e5f02oBD3RnnUPJn1p0wir+pGFraC2kyNDOKF8tvhNtQ4Hcy0KjTgZz2eIU55xre6wlnEltXkEBDbif0x/5SQnkBBsVWmb3r49ic42aAZm9yFY1aRg7n+S55ntbIbUFoODVCE879nRYAuMN+ACxenLXW8IjGFgtIdIwdl+hm8IjDZChcfQWQE4njeBgZtMFXgB6tKKFfpy23VFRCE125CitD/JeFiLDnXDHDSEnA6F9x0fPn4hNuPX1WQu8Z38LPLmCxI8nJVmHouX1lTh3BMEinPhg07NI3cNPSeEiWEBfG4rV6SAQMAAAA=) format("woff2");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.27"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-aria-container {
	position: absolute; /* try to hide from window but not from screen readers */
	left:-999em;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -------------------- IE10 remove auto clear button -------------------- */

::-ms-clear {
	display: none;
}

/* All widgets */
/* I am not a big fan of this rule */
.monaco-editor .editor-widget input {
	color: inherit;
}

/* -------------------- Editor -------------------- */

.monaco-editor {
	position: relative;
	overflow: visible;
	-webkit-text-size-adjust: 100%;
	color: var(--vscode-editor-foreground);
	background-color: var(--vscode-editor-background);
	overflow-wrap: initial;
}
.monaco-editor-background {
	background-color: var(--vscode-editor-background);
}
.monaco-editor .rangeHighlight {
	background-color: var(--vscode-editor-rangeHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-rangeHighlightBorder);
}
.monaco-editor.hc-black .rangeHighlight, .monaco-editor.hc-light .rangeHighlight {
	border-style: dotted;
}
.monaco-editor .symbolHighlight {
	background-color: var(--vscode-editor-symbolHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-symbolHighlightBorder);
}
.monaco-editor.hc-black .symbolHighlight, .monaco-editor.hc-light .symbolHighlight {
	border-style: dotted;
}

.monaco-editor .editorCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* -------------------- Misc -------------------- */

.monaco-editor .overflow-guard {
	position: relative;
	overflow: hidden;
}

.monaco-editor .view-overlays {
	position: absolute;
	top: 0;
}

.monaco-editor .view-overlays > div, .monaco-editor .margin-view-overlays > div {
	position: absolute;
	width: 100%;
}

/*
.monaco-editor .auto-closed-character {
	opacity: 0.3;
}
*/


.monaco-editor .squiggly-error {
	border-bottom: 4px double var(--vscode-editorError-border);
}
.monaco-editor .squiggly-error::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorError-background);
}
.monaco-editor .squiggly-warning {
	border-bottom: 4px double var(--vscode-editorWarning-border);
}
.monaco-editor .squiggly-warning::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorWarning-background);
}
.monaco-editor .squiggly-info {
	border-bottom: 4px double var(--vscode-editorInfo-border);
}
.monaco-editor .squiggly-info::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorInfo-background);
}
.monaco-editor .squiggly-hint {
	border-bottom: 2px dotted var(--vscode-editorHint-border);
}
.monaco-editor.showUnused .squiggly-unnecessary {
	border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border);
}
.monaco-editor.showDeprecated .squiggly-inline-deprecated {
	text-decoration: line-through;
	text-decoration-color: var(--vscode-editor-foreground, inherit);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Arrows */
.monaco-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.monaco-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.monaco-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.monaco-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.monaco-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.monaco-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
.monaco-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.monaco-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}

.monaco-scrollable-element > .scrollbar {
	background: var(--vscode-scrollbar-background);
}

.monaco-scrollable-element > .scrollbar > .slider {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-scrollable-element > .scrollbar > .slider:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-scrollable-element > .scrollbar > .slider.active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .blockDecorations-container {
	position: absolute;
	top: 0;
	pointer-events: none;
}

.monaco-editor .blockDecorations-block {
	position: absolute;
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor .margin-view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor
	.margin-view-overlays
	.current-line.current-line-margin.current-line-margin-both {
	border-right: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cdr = core decorations rendering (div)
*/
.monaco-editor .lines-content .cdr {
	position: absolute;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .glyph-margin {
	position: absolute;
	top: 0;
}

/*
	Keeping name short for faster parsing.
	cgmr = core glyph margin rendering (div)
*/
.monaco-editor .glyph-margin-widgets .cgmr {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
	Ensure spinning icons are pixel-perfectly centered and avoid wobble.
	This is only applied to icons that spin to avoid unnecessary
	GPU layers and blurry subpixel AA.
*/
.monaco-editor .glyph-margin-widgets .cgmr.codicon-modifier-spin::before  {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lines-content .core-guide {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin-view-overlays .line-numbers {
	bottom: 0;
	font-variant-numeric: tabular-nums;
	position: absolute;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: default;
}

.monaco-editor .relative-current-line-number {
	text-align: left;
	display: inline-block;
	width: 100%;
}

.monaco-editor .margin-view-overlays .line-numbers.lh-odd {
	margin-top: 1px;
}

.monaco-editor .line-numbers {
	color: var(--vscode-editorLineNumber-foreground);
}

.monaco-editor .line-numbers.active-line-number {
	color: var(--vscode-editorLineNumber-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-mouse-cursor-text {
	cursor: text;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Uncomment to see lines flashing when they're painted */
/*.monaco-editor .view-lines > .view-line {
	background-color: none;
	animation-name: flash-background;
	animation-duration: 800ms;
}
@keyframes flash-background {
	0%   { background-color: lightgreen; }
	100% { background-color: none }
}*/

.mtkcontrol {
	color: rgb(255, 255, 255) !important;
	background: rgb(150, 0, 0) !important;
}

.mtkoverflow {
	background-color: var(--vscode-button-background, var(--vscode-editor-background));
	color: var(--vscode-button-foreground, var(--vscode-editor-foreground));
	border-width: 1px;
	border-style: solid;
	border-color: var(--vscode-contrastBorder);
	border-radius: 2px;
	padding: 4px;
	cursor: pointer;
}
.mtkoverflow:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-editor.no-user-select .lines-content,
.monaco-editor.no-user-select .view-line,
.monaco-editor.no-user-select .view-lines {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}
/* Use user-select: text for lookup feature on macOS */
/* https://github.com/microsoft/vscode/issues/85632 */
.monaco-editor.mac .lines-content:hover,
.monaco-editor.mac .view-line:hover,
.monaco-editor.mac .view-lines:hover {
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}

.monaco-editor.enable-user-select {
	-moz-user-select: initial;
	     user-select: initial;
	-webkit-user-select: initial;
}

.monaco-editor .view-lines {
	white-space: nowrap;
}

.monaco-editor .view-line {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
}

/* There are view-lines in view-zones. We have to make sure this rule does not apply to them, as they don't set a line height */
.monaco-editor .lines-content > .view-lines > .view-line > span {
	top: 0;
	bottom: 0;
	position: absolute;
}

.monaco-editor .mtkw {
	color: var(--vscode-editorWhitespace-foreground) !important;
}

.monaco-editor .mtkz {
	display: inline-block;
	color: var(--vscode-editorWhitespace-foreground) !important;
}

/* TODO@tokenization bootstrap fix */
/*.monaco-editor .view-line > span > span {
	float: none;
	min-height: inherit;
	margin-left: inherit;
}*/
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .lines-decorations {
	position: absolute;
	top: 0;
	background: white;
}

/*
	Keeping name short for faster parsing.
	cldr = core lines decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cldr {
	position: absolute;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin {
	background-color: var(--vscode-editorGutter-background);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cmdr = core margin decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cmdr {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* START cover the case that slider is visible on mouseover */
.monaco-editor .minimap.slider-mouseover .minimap-slider {
	opacity: 0;
	transition: opacity 100ms linear;
}
.monaco-editor .minimap.slider-mouseover:hover .minimap-slider {
	opacity: 1;
}
.monaco-editor .minimap.slider-mouseover .minimap-slider.active {
	opacity: 1;
}
/* END cover the case that slider is visible on mouseover */
.monaco-editor .minimap-slider .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-background);
}
.monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-hoverBackground);
}
.monaco-editor .minimap-slider.active .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-activeBackground);
}
.monaco-editor .minimap-shadow-visible {
	box-shadow: var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset;
}
.monaco-editor .minimap-shadow-hidden {
	position: absolute;
	width: 0;
}
.monaco-editor .minimap-shadow-visible {
	position: absolute;
	left: -6px;
	width: 6px;
	pointer-events: none;
}
.monaco-editor.no-minimap-shadow .minimap-shadow-visible {
	position: absolute;
	left: -1px;
	width: 1px;
}

/* 0.5s fade in/out for the minimap */
.minimap.minimap-autohide-mouseover,
.minimap.minimap-autohide-scroll {
	opacity: 0;
	transition: opacity 0.5s;
}
.minimap.minimap-autohide-scroll{
	pointer-events: none;
}
.minimap.minimap-autohide-mouseover:hover,
.minimap.minimap-autohide-scroll.active {
	opacity: 1;
	pointer-events: auto;
}

.monaco-editor .minimap {
	z-index: 5;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .overlayWidgets {
	position: absolute;
	top: 0;
	left:0;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-ruler {
	position: absolute;
	top: 0;
	box-shadow: 1px 0 0 0 var(--vscode-editorRuler-foreground) inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .scroll-decoration {
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cslr = core selections layer rendering (div)
*/
.monaco-editor .lines-content .cslr {
	position: absolute;
}

.monaco-editor .focused .selected-text {
	background-color: var(--vscode-editor-selectionBackground);
}

.monaco-editor .selected-text {
	background-color: var(--vscode-editor-inactiveSelectionBackground);
}

.monaco-editor			.top-left-radius		{ border-top-left-radius: 3px; }
.monaco-editor			.bottom-left-radius		{ border-bottom-left-radius: 3px; }
.monaco-editor			.top-right-radius		{ border-top-right-radius: 3px; }
.monaco-editor			.bottom-right-radius	{ border-bottom-right-radius: 3px; }

.monaco-editor.hc-black .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-black .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-black .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-black .bottom-right-radius	{ border-bottom-right-radius: 0; }

.monaco-editor.hc-light .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-light .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-light .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-light .bottom-right-radius	{ border-bottom-right-radius: 0; }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .cursors-layer {
	position: absolute;
	top: 0;
}

.monaco-editor .cursors-layer > .cursor {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}

/* -- smooth-caret-animation -- */
.monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor {
	transition: all 80ms;
}

/* -- block-outline-style -- */
.monaco-editor .cursors-layer.cursor-block-outline-style > .cursor {
	background: transparent !important;
	border-style: solid;
	border-width: 1px;
}

/* -- underline-style -- */
.monaco-editor .cursors-layer.cursor-underline-style > .cursor {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	background: transparent !important;
}

/* -- underline-thin-style -- */
.monaco-editor .cursors-layer.cursor-underline-thin-style > .cursor {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	background: transparent !important;
}

@keyframes monaco-cursor-smooth {
	0%,
	20% {
		opacity: 1;
	}
	60%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-phase {
	0%,
	20% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-expand {
	0%,
	20% {
		transform: scaleY(1);
	}
	80%,
	100% {
		transform: scaleY(0);
	}
}

.cursor-smooth {
	animation: monaco-cursor-smooth 0.5s ease-in-out 0s 20 alternate;
}

.cursor-phase {
	animation: monaco-cursor-phase 0.5s ease-in-out 0s 20 alternate;
}

.cursor-expand > .cursor {
	animation: monaco-cursor-expand 0.5s ease-in-out 0s 20 alternate;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .mwh {
	position: absolute;
	color: var(--vscode-editorWhitespace-foreground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .monaco-decoration-css-rule-extractor {
	visibility: hidden;
	pointer-events: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inputarea {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}
/*.monaco-editor .inputarea {
	position: fixed !important;
	width: 800px !important;
	height: 500px !important;
	top: initial !important;
	left: initial !important;
	bottom: 0 !important;
	right: 0 !important;
	color: black !important;
	background: white !important;
	line-height: 15px !important;
	font-size: 14px !important;
	z-index: 10 !important;
}*/
.monaco-editor .inputarea.ime-input {
	z-index: 10;
	caret-color: var(--vscode-editorCursor-foreground);
	color: var(--vscode-editor-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .native-edit-context {
	margin: 0;
	padding: 0;
	position: absolute;
	overflow-y: scroll;
	scrollbar-width: none;
	z-index: -10;
	white-space: pre-wrap;
}

.monaco-editor .ime-text-area {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}

.monaco-editor .edit-context-composition-none {
	background-color: transparent;
	border-bottom: none;
}

.monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-secondary {
	border-bottom: 1px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-primary {
	border-bottom: 2px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-secondary {
	border: 1px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-primary {
	border: 2px solid var(--vscode-editor-compositionBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin-view-overlays .gpu-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	display: inline-block;
	border-left: solid 2px var(--vscode-editorWarning-foreground);
	opacity: 0.2;
	transition: background-color 0.1s linear;
}

.monaco-editor .margin-view-overlays .gpu-mark:hover {
	background-color: var(--vscode-editorWarning-foreground)
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-select-box {
	width: 100%;
	cursor: pointer;
	border-radius: 2px;
}

.monaco-select-box-dropdown-container {
	font-size: 13px;
	font-weight: normal;
	text-transform: none;
}

/** Actions */

.monaco-action-bar .action-item.select-container {
	cursor: default;
}

.monaco-action-bar .action-item .monaco-select-box {
	cursor: pointer;
	min-width: 100px;
	min-height: 18px;
	padding: 2px 23px 2px 8px;
}

.mac .monaco-action-bar .action-item .monaco-select-box {
	font-size: 11px;
	border-radius: 3px;
	min-height: 24px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-list {
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
}

.monaco-list.mouse-support {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

.monaco-list > .monaco-scrollable-element {
	height: 100%;
}

.monaco-list-rows {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-list.horizontal-scrolling .monaco-list-rows {
	width: auto;
	min-width: 100%;
}

.monaco-list-row {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.monaco-list.mouse-support .monaco-list-row {
	cursor: pointer;
	touch-action: none;
}

/* Make sure the scrollbar renders above overlays (sticky scroll) */
.monaco-list .monaco-scrollable-element > .scrollbar.vertical,
.monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
	z-index: 14;
}

/* for OS X ballistic scrolling */
.monaco-list-row.scrolling {
	display: none !important;
}

/* Focus */
.monaco-list.element-focused,
.monaco-list.selection-single,
.monaco-list.selection-multiple {
	outline: 0 !important;
}

/* Filter */

.monaco-list-type-filter-message {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 40px 1em 1em 1em;
	text-align: center;
	white-space: normal;
	opacity: 0.7;
	pointer-events: none;
}

.monaco-list-type-filter-message:empty {
	display: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-drag-image {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 12px;
	position: absolute;
	z-index: 1000;

	/* Default styles */
	background-color: var(--vscode-list-activeSelectionBackground);
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-list-focusOutline);
	outline-offset: -1px;

	/*
	 * Browsers apply an effect to the drag image when the div becomes too
	 * large which makes them unreadable. Use max width so it does not happen
	 */
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Use custom CSS vars to expose padding into parent select for padding calculation */
.monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 1px;
	--dropdown-padding-bottom: 1px;
}

.hc-black .monaco-select-box-dropdown-padding,
.hc-light .monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 3px;
	--dropdown-padding-bottom: 4px;
}

.monaco-select-box-dropdown-container {
	display: none;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown * {
	margin: 0;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
	line-height: 15px; /** For some reason, this is needed, otherwise <code> will take up 20px height */
	font-family: var(--monaco-monospace-font);
}


.monaco-select-box-dropdown-container.visible {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 1px;
	overflow: hidden;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	flex: 0 0 auto;
	align-self: flex-start;
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
	padding-left: 1px;
	padding-right: 1px;
	width: 100%;
	overflow: hidden;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane {
	padding: 5px;
}

.hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row {
	cursor: pointer;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-detail {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
	opacity: 0.7;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
	white-space: nowrap;
	float: right;
}


/* Accepted CSS hiding technique for accessibility reader text  */
/* https://webaim.org/techniques/css/invisiblecontent/ */

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
	flex: 1 1 auto;
	align-self: flex-start;
	opacity: 0;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
	overflow: hidden;
	max-height: 0px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
	padding-left: 4px;
	padding-right: 8px;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar {
	white-space: nowrap;
	height: 100%;
}

.monaco-action-bar .actions-container {
	display: flex;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	align-items: center;
}

.monaco-action-bar.vertical .actions-container {
	display: inline-block;
}

.monaco-action-bar .action-item {
	display: block;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
}

.monaco-action-bar .action-item.disabled {
	cursor: default;
}

.monaco-action-bar .action-item .icon,
.monaco-action-bar .action-item .codicon {
	display: block;
}

.monaco-action-bar .action-item .codicon {
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
}

.monaco-action-bar .action-label {
	display: flex;
	font-size: 11px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-action-bar .action-item.disabled .action-label:not(.icon) ,
.monaco-action-bar .action-item.disabled .action-label:not(.icon)::before,
.monaco-action-bar .action-item.disabled .action-label:not(.icon):hover {
	color: var(--vscode-disabledForeground);
}

/* Unable to change color of SVGs, hence opacity is used */
.monaco-action-bar .action-item.disabled .action-label.icon ,
.monaco-action-bar .action-item.disabled .action-label.icon::before,
.monaco-action-bar .action-item.disabled .action-label.icon:hover {
	opacity: 0.6;
}

/* Vertical actions */

.monaco-action-bar.vertical {
	text-align: left;
}

.monaco-action-bar.vertical .action-item {
	display: block;
}

.monaco-action-bar.vertical .action-label.separator {
	display: block;
	border-bottom: 1px solid var(--vscode-disabledForeground);
	padding-top: 1px;
	margin-left: .8em;
	margin-right: .8em;
}

.monaco-action-bar .action-item .action-label.separator {
	width: 1px;
	height: 16px;
	margin: 5px 4px !important;
	cursor: default;
	min-width: 1px;
	padding: 0;
	background-color: var(--vscode-disabledForeground);
}

.secondary-actions .monaco-action-bar .action-label {
	margin-left: 6px;
}

/* Action Items */
.monaco-action-bar .action-item.select-container {
	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
	flex: 1;
	max-width: 170px;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.monaco-action-bar .action-item.action-dropdown-item {
	display: flex;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
	display: flex;
	align-items: center;
	cursor: default;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
	width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-diff-editor .diff-review {
	position: absolute;

}

.monaco-component.diff-review {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	z-index: 99;


	.diff-review-line-number {
		text-align: right;
		display: inline-block;
		color: var(--vscode-editorLineNumber-foreground);
	}

	.diff-review-summary {
		padding-left: 10px;
	}

	.diff-review-shadow {
		position: absolute;
		box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;
	}

	.diff-review-row {
		white-space: pre;
	}

	.diff-review-table {
		display: table;
		min-width: 100%;
	}

	.diff-review-row {
		display: table-row;
		width: 100%;
	}

	.diff-review-spacer {
		display: inline-block;
		width: 10px;
		vertical-align: middle;
	}

	.diff-review-spacer > .codicon {
		font-size: 9px !important;
	}

	.diff-review-actions {
		display: inline-block;
		position: absolute;
		right: 10px;
		top: 2px;
		z-index: 100;
	}

	.diff-review-actions .action-label {
		width: 16px;
		height: 16px;
		margin: 2px 0;
	}

	.revertButton {
		cursor: pointer;
	}

	.action-label {
		background: var(--vscode-editorActionList-background);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

:root {
	--vscode-sash-size: 4px;
	--vscode-sash-hover-size: 4px;
}

.monaco-sash {
	position: absolute;
	z-index: 35;
	touch-action: none;
}

.monaco-sash.disabled {
	pointer-events: none;
}

.monaco-sash.mac.vertical {
	cursor: col-resize;
}

.monaco-sash.vertical.minimum {
	cursor: e-resize;
}

.monaco-sash.vertical.maximum {
	cursor: w-resize;
}

.monaco-sash.mac.horizontal {
	cursor: row-resize;
}

.monaco-sash.horizontal.minimum {
	cursor: s-resize;
}

.monaco-sash.horizontal.maximum {
	cursor: n-resize;
}

.monaco-sash.disabled {
	cursor: default !important;
	pointer-events: none !important;
}

.monaco-sash.vertical {
	cursor: ew-resize;
	top: 0;
	width: var(--vscode-sash-size);
	height: 100%;
}

.monaco-sash.horizontal {
	cursor: ns-resize;
	left: 0;
	width: 100%;
	height: var(--vscode-sash-size);
}

.monaco-sash:not(.disabled) > .orthogonal-drag-handle {
	content: " ";
	height: calc(var(--vscode-sash-size) * 2);
	width: calc(var(--vscode-sash-size) * 2);
	z-index: 100;
	display: block;
	cursor: all-scroll;
	position: absolute;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.start,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.end {
	cursor: nwse-resize;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.end,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.start {
	cursor: nesw-resize;
}

.monaco-sash.vertical > .orthogonal-drag-handle.start {
	left: calc(var(--vscode-sash-size) * -0.5);
	top: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.vertical > .orthogonal-drag-handle.end {
	left: calc(var(--vscode-sash-size) * -0.5);
	bottom: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.start {
	top: calc(var(--vscode-sash-size) * -0.5);
	left: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.end {
	top: calc(var(--vscode-sash-size) * -0.5);
	right: calc(var(--vscode-sash-size) * -1);
}

.monaco-sash:before {
	content: '';
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

.monaco-enable-motion .monaco-sash:before {
	transition: background-color 0.1s ease-out;
}

.monaco-sash.hover:before,
.monaco-sash.active:before {
	background: var(--vscode-sash-hoverBorder);
}

.monaco-sash.vertical:before {
	width: var(--vscode-sash-hover-size);
	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.monaco-sash.horizontal:before {
	height: var(--vscode-sash-hover-size);
	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.pointer-events-disabled {
	pointer-events: none !important;
}

/** Debug **/

.monaco-sash.debug {
	background: cyan;
}

.monaco-sash.debug.disabled {
	background: rgba(0, 255, 255, 0.2);
}

.monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
	background: red;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-dropdown {
	height: 100%;
	padding: 0;
}

.monaco-dropdown > .dropdown-label {
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-dropdown > .dropdown-label > .action-label.disabled {
	cursor: default;
}

.monaco-dropdown-with-primary {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-primary > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-toolbar {
	height: 100%;
}

.monaco-toolbar .toolbar-toggle-more {
	display: inline-block;
	padding: 0;
}

.monaco-toolbar.responsive {
	.monaco-action-bar > .actions-container > .action-item {
		flex-shrink: 1;
		min-width: 20px;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar .action-item.menu-entry .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-action-bar .action-item.menu-entry.text-only .action-label {
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	border-radius: 2px;
}

.monaco-action-bar .action-item.menu-entry.text-only.use-comma:not(:last-of-type) .action-label::after {
	content: ', ';
}

.monaco-action-bar .action-item.menu-entry.text-only + .action-item:not(.text-only) > .monaco-dropdown .action-label {
	color: var(--vscode-descriptionForeground);
}

.monaco-dropdown-with-default {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-default > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-default > .action-container.menu-entry > .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-dropdown-with-default:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .diff-hidden-lines-widget {
	width: 100%;
}

.monaco-editor .diff-hidden-lines {
	height: 0px; /* The children each have a fixed height, the transform confuses the browser */
	transform: translate(0px, -10px);
	font-size: 13px;
	line-height: 14px;
}

.monaco-editor .diff-hidden-lines:not(.dragging) .top:hover,
.monaco-editor .diff-hidden-lines:not(.dragging) .bottom:hover,
.monaco-editor .diff-hidden-lines .top.dragging,
.monaco-editor .diff-hidden-lines .bottom.dragging {
	background-color: var(--vscode-focusBorder);
}

.monaco-editor .diff-hidden-lines .top,
.monaco-editor .diff-hidden-lines .bottom {
	transition: background-color 0.1s ease-out;
	height: 4px;
	background-color: transparent;
	background-clip: padding-box;
	border-bottom: 2px solid transparent;
	border-top: 4px solid transparent;
	/*cursor: n-resize;*/
}

.monaco-editor.draggingUnchangedRegion.canMoveTop:not(.canMoveBottom) *,
.monaco-editor .diff-hidden-lines .top.canMoveTop:not(.canMoveBottom),
.monaco-editor .diff-hidden-lines .bottom.canMoveTop:not(.canMoveBottom) {
	cursor: n-resize !important;
}

.monaco-editor.draggingUnchangedRegion:not(.canMoveTop).canMoveBottom *,
.monaco-editor .diff-hidden-lines .top:not(.canMoveTop).canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom:not(.canMoveTop).canMoveBottom {
	cursor: s-resize !important;
}

.monaco-editor.draggingUnchangedRegion.canMoveTop.canMoveBottom *,
.monaco-editor .diff-hidden-lines .top.canMoveTop.canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom.canMoveTop.canMoveBottom {
	cursor: ns-resize !important;
}

.monaco-editor .diff-hidden-lines .top {
	transform: translate(0px, 4px);
}

.monaco-editor .diff-hidden-lines .bottom {
	transform: translate(0px, -6px);
}

.monaco-editor .diff-unchanged-lines {
	background: var(--vscode-diffEditor-unchangedCodeBackground);
}

.monaco-editor .noModificationsOverlay {
	z-index: 1;
	background: var(--vscode-editor-background);

	display: flex;
	justify-content: center;
	align-items: center;
}


.monaco-editor .diff-hidden-lines .center {
	background: var(--vscode-diffEditor-unchangedRegionBackground);
	color: var(--vscode-diffEditor-unchangedRegionForeground);
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;

	height: 24px;
	box-shadow: inset 0 -5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow), inset 0 5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow);
}

.monaco-editor .diff-hidden-lines .center span.codicon {
	vertical-align: middle;
}

.monaco-editor .diff-hidden-lines .center a:hover .codicon {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item {
	cursor: pointer;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item:hover {
	color: var(--vscode-editorLink-activeForeground);
}

.monaco-editor .movedOriginal {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedModified {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedOriginal.currentMove, .monaco-editor .movedModified.currentMove {
	border: 2px solid var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path.currentMove {
	stroke: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path {
	pointer-events: visiblestroke;
}

.monaco-diff-editor .moved-blocks-lines .arrow {
	fill: var(--vscode-diffEditor-move-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow.currentMove {
	fill: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow-rectangle {
	fill: var(--vscode-editor-background);
}

.monaco-diff-editor .moved-blocks-lines {
	position: absolute;
	pointer-events: none;
}

.monaco-diff-editor .moved-blocks-lines path {
	fill: none;
	stroke: var(--vscode-diffEditor-move-border);
	stroke-width: 2;
}

.monaco-editor .char-delete.diff-range-empty {
	margin-left: -1px;
	border-left: solid var(--vscode-diffEditor-removedTextBackground) 3px;
}

.monaco-editor .char-insert.diff-range-empty {
	border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px;
}

.monaco-editor .fold-unchanged {
	cursor: pointer;
}

.monaco-diff-editor .diff-moved-code-block {
	display: flex;
	justify-content: flex-end;
	margin-top: -4px;
}

.monaco-diff-editor .diff-moved-code-block .action-bar .action-label.codicon {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

/* ---------- DiffEditor ---------- */

.monaco-diff-editor .diffOverview {
	z-index: 9;
}

.monaco-diff-editor .diffOverview .diffViewport {
	z-index: 10;
}

/* colors not externalized: using transparancy on background */
.monaco-diff-editor.vs			.diffOverview { background: rgba(0, 0, 0, 0.03); }
.monaco-diff-editor.vs-dark		.diffOverview { background: rgba(255, 255, 255, 0.01); }

.monaco-scrollable-element.modified-in-monaco-diff-editor.vs		.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark	.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black	.scrollbar { background: none; }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light	.scrollbar { background: none; }

.monaco-scrollable-element.modified-in-monaco-diff-editor .slider {
	z-index: 10;
}
.modified-in-monaco-diff-editor				.slider.active { background: rgba(171, 171, 171, .4); }
.modified-in-monaco-diff-editor.hc-black	.slider.active { background: none; }
.modified-in-monaco-diff-editor.hc-light	.slider.active { background: none; }

/* ---------- Diff ---------- */

.monaco-editor .insert-sign,
.monaco-diff-editor .insert-sign,
.monaco-editor .delete-sign,
.monaco-diff-editor .delete-sign {
	font-size: 11px !important;
	opacity: 0.7 !important;
	display: flex !important;
	align-items: center;
}
.monaco-editor.hc-black .insert-sign,
.monaco-diff-editor.hc-black .insert-sign,
.monaco-editor.hc-black .delete-sign,
.monaco-diff-editor.hc-black .delete-sign,
.monaco-editor.hc-light .insert-sign,
.monaco-diff-editor.hc-light .insert-sign,
.monaco-editor.hc-light .delete-sign,
.monaco-diff-editor.hc-light .delete-sign {
	opacity: 1;
}

.monaco-editor .inline-deleted-margin-view-zone {
	text-align: right;
}
.monaco-editor .inline-added-margin-view-zone {
	text-align: right;
}

.monaco-editor .arrow-revert-change {
	z-index: 10;
	position: absolute;
}

.monaco-editor .arrow-revert-change:hover {
	cursor: pointer;
}

/* ---------- Inline Diff ---------- */

.monaco-editor .view-zones .view-lines .view-line span {
	display: inline-block;
}

.monaco-editor .margin-view-zones .lightbulb-glyph:hover {
	cursor: pointer;
}

.monaco-editor .char-insert, .monaco-diff-editor .char-insert {
	background-color: var(--vscode-diffEditor-insertedTextBackground);
}

.monaco-editor .line-insert, .monaco-diff-editor .line-insert {
	background-color: var(--vscode-diffEditor-insertedLineBackground, var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .line-insert,
.monaco-editor .char-insert {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-insertedTextBorder);
}
.monaco-editor.hc-black .line-insert, .monaco-editor.hc-light .line-insert,
.monaco-editor.hc-black .char-insert, .monaco-editor.hc-light .char-insert {
	border-style: dashed;
}

.monaco-editor .line-delete,
.monaco-editor .char-delete {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-removedTextBorder);
}
.monaco-editor.hc-black .line-delete, .monaco-editor.hc-light .line-delete,
.monaco-editor.hc-black .char-delete, .monaco-editor.hc-light .char-delete {
	border-style: dashed;
}

.monaco-editor .inline-added-margin-view-zone,
.monaco-editor .gutter-insert, .monaco-diff-editor .gutter-insert {
	background-color: var(--vscode-diffEditorGutter-insertedLineBackground, var(--vscode-diffEditor-insertedLineBackground), var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .char-delete, .monaco-diff-editor .char-delete, .monaco-editor .inline-deleted-text {
	background-color: var(--vscode-diffEditor-removedTextBackground);
}

.monaco-editor .inline-deleted-text {
	text-decoration: line-through;
}

.monaco-editor .line-delete, .monaco-diff-editor .line-delete {
	background-color: var(--vscode-diffEditor-removedLineBackground, var(--vscode-diffEditor-removedTextBackground));
}

.monaco-editor .inline-deleted-margin-view-zone,
.monaco-editor .gutter-delete, .monaco-diff-editor .gutter-delete {
	background-color: var(--vscode-diffEditorGutter-removedLineBackground, var(--vscode-diffEditor-removedLineBackground), var(--vscode-diffEditor-removedTextBackground));
}

.monaco-diff-editor.side-by-side .editor.modified {
	box-shadow: -6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-left: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor.side-by-side .editor.original {
	box-shadow: 6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-right: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor .diffViewport {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-diff-editor .diffViewport:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-diff-editor .diffViewport:active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}

.monaco-editor .diagonal-fill {
	background-image: linear-gradient(
		-45deg,
		var(--vscode-diffEditor-diagonalFill) 12.5%,
		#0000 12.5%, #0000 50%,
		var(--vscode-diffEditor-diagonalFill) 50%, var(--vscode-diffEditor-diagonalFill) 62.5%,
		#0000 62.5%, #0000 100%
	);
	background-size: 8px 8px;
}

.monaco-diff-editor .gutter {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;

	& > div {
		position: absolute;
	}

	.gutterItem {
		opacity: 0;
		transition: opacity 0.7s;

		&.showAlways {
			opacity: 1;
			transition: none;
		}

		&.noTransition {
			transition: none;
		}
	}

	&:hover .gutterItem {
		opacity: 1;
		transition: opacity 0.1s ease-in-out;
	}

	.gutterItem {
		.background {
			position: absolute;
			height: 100%;
			left: 50%;
			width: 1px;

			border-left: 2px var(--vscode-menu-separatorBackground) solid;
		}

		.buttons {
			position: absolute;
			/*height: 100%;*/
			width: 100%;

			display: flex;
			justify-content: center;
			align-items: center;

			.monaco-toolbar {
				height: -moz-fit-content;
				height: fit-content;
				.monaco-action-bar  {
					line-height: 1;

					.actions-container {
						width: -moz-fit-content;
						width: fit-content;
						border-radius: 4px;
						background: var(--vscode-editorGutter-itemBackground);

						.action-item {
							&:hover {
								background: var(--vscode-toolbar-hoverBackground);
							}

							.action-label {
								color: var(--vscode-editorGutter-itemGlyphForeground);
								padding: 1px 2px;
							}
						}
					}
				}
			}
		}
	}
}


.monaco-diff-editor .diff-hidden-lines-compact {
	display: flex;
	height: 11px;
	.line-left, .line-right {
		height: 1px;
		border-top: 1px solid;
		border-color: var(--vscode-editorCodeLens-foreground);
		opacity: 0.5;
		margin: auto;
		width: 100%;
	}

	.line-left {
		width: 20px;
	}

	.text {
		color: var(--vscode-editorCodeLens-foreground);
		text-wrap: nowrap;
		font-size: 11px;
		line-height: 11px;
		margin: 0 4px;
	}
}

.monaco-editor .line-delete-selectable {
	-moz-user-select: text !important;
	     user-select: text !important;
	-webkit-user-select: text !important;
	z-index: 1 !important;
}

.line-delete-selectable .view-line {
	-moz-user-select: text !important;
	     user-select: text !important;
	-webkit-user-select: text !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .selection-anchor {
	background-color: #007ACC;
	width: 2px !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .bracket-match {
	box-sizing: border-box;
	background-color: var(--vscode-editorBracketMatch-background);
	border: 1px solid var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.inline-editor-progress-decoration {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.inline-progress-widget  {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.inline-progress-widget .icon {
	font-size: 80% !important;
}

.inline-progress-widget:hover .icon {
	font-size: 90% !important;
	animation: none;
}

.inline-progress-widget:hover .icon::before {
	content: var(--vscode-icon-x-content);
	font-family: var(--vscode-icon-x-font-family);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .monaco-editor-overlaymessage {
	padding-bottom: 8px;
	z-index: 10000;
}

.monaco-editor .monaco-editor-overlaymessage.below {
	padding-bottom: 0;
	padding-top: 8px;
	z-index: 10000;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeIn {
	animation: fadeIn 150ms ease-out;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeOut {
	animation: fadeOut 100ms ease-out;
}

.monaco-editor .monaco-editor-overlaymessage .message {
	padding: 2px 4px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-inputValidation-infoBorder);
	border-radius: 3px;
}

.monaco-editor .monaco-editor-overlaymessage .message p {
	margin-block: 0px;
}

.monaco-editor .monaco-editor-overlaymessage .message a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-editor-overlaymessage .message a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor.hc-black .monaco-editor-overlaymessage .message,
.monaco-editor.hc-light .monaco-editor-overlaymessage .message {
	border-width: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor {
	width: 0 !important;
	height: 0 !important;
	border-color: transparent;
	border-style: solid;
	z-index: 1000;
	border-width: 8px;
	position: absolute;
	left: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor.top {
	border-bottom-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage .anchor.below {
	border-top-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top,
.monaco-editor .monaco-editor-overlaymessage.below .anchor.below {
	display: none;
}

.monaco-editor .monaco-editor-overlaymessage.below .anchor.top {
	display: inherit;
	top: -8px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-text-button {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	padding: 4px;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--vscode-button-border, transparent);
	line-height: 18px;
}

.monaco-text-button:focus {
	outline-offset: 2px !important;
}

.monaco-text-button:hover {
	text-decoration: none !important;
}

.monaco-button.disabled:focus,
.monaco-button.disabled {
	opacity: 0.4 !important;
	cursor: default;
}

.monaco-text-button .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

.monaco-text-button.monaco-text-button-with-short-label {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 4px;
	overflow: hidden;
	height: 28px;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
	flex-basis: 100%;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	flex-grow: 1;
	width: 0;
	overflow: hidden;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: normal;
	font-style: inherit;
	padding: 4px 0;
}

.monaco-button-dropdown {
	display: flex;
	cursor: pointer;
}

.monaco-button-dropdown.disabled {
	cursor: default;
}

.monaco-button-dropdown > .monaco-button:focus {
	outline-offset: -1px !important;
}

.monaco-button-dropdown.disabled > .monaco-button.disabled,
.monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
.monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
	opacity: 0.4 !important;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-right-width: 0 !important;
}

.monaco-button-dropdown .monaco-button-dropdown-separator {
	padding: 4px 0;
	cursor: default;
}

.monaco-button-dropdown .monaco-button-dropdown-separator > div {
	height: 100%;
	width: 1px;
}

.monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
	border: 1px solid var(--vscode-button-border, transparent);
	border-left-width: 0 !important;
	border-radius: 0 2px 2px 0;
	display: flex;
	align-items: center;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-radius: 2px 0 0 2px;
}

.monaco-description-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 5px; /* allows button focus outline to be visible */
}

.monaco-description-button .monaco-button-description {
	font-style: italic;
	font-size: 11px;
	padding: 4px 20px;
}

.monaco-description-button .monaco-button-label,
.monaco-description-button .monaco-button-description {
	display: flex;
	justify-content: center;
	align-items: center;
}

.monaco-description-button .monaco-button-label > .codicon,
.monaco-description-button .monaco-button-description > .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

/* default color styles - based on CSS variables */

.monaco-button.default-colors,
.monaco-button-dropdown.default-colors > .monaco-button{
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
}

.monaco-button.default-colors:hover,
.monaco-button-dropdown.default-colors > .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-button.default-colors.secondary,
.monaco-button-dropdown.default-colors > .monaco-button.secondary {
	color: var(--vscode-button-secondaryForeground);
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button.default-colors.secondary:hover,
.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
	background-color: var(--vscode-button-secondaryHoverBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-background);
	border-top: 1px solid var(--vscode-button-border);
	border-bottom: 1px solid var(--vscode-button-border);
}

.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
	background-color: var(--vscode-button-separator);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.action-widget {
	font-size: 13px;
	border-radius: 0;
	min-width: 100px;
	max-width: 80vw;
	z-index: 40;
	display: block;
	width: 100%;
	border: 1px solid var(--vscode-menu-border) !important;
	border-radius: 5px;
	background-color: var(--vscode-menu-background);
	color: var(--vscode-menu-foreground);
	padding: 4px;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.context-view-block {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.context-view-pointerBlock {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.action-widget .monaco-list {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	border: none !important;
	border-width: 0 !important;
}

.action-widget .monaco-list:focus:before {
	outline: 0 !important;
}

.action-widget .monaco-list .monaco-scrollable-element {
	overflow: visible;
}

/** Styles for each row in the list element **/
.action-widget .monaco-list .monaco-list-row {
	padding: 0 4px 0 4px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
	width: 100%;
	border-radius: 3px;
}

.action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) {
	background-color: var(--vscode-list-activeSelectionBackground) !important;
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
	outline-offset: -1px;
}

.action-widget .monaco-list-row.group-header {
	color: var(--vscode-descriptionForeground) !important;
	font-weight: 600;
	font-size: 13px;
}

.action-widget .monaco-list-row.group-header:not(:first-of-type) {
	margin-top: 2px;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
	padding: 0;
	margin: 4px 0 0 0;
	cursor: default;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	border-radius: 0;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator.focused {
	outline: 0 solid;
	background-color: transparent;
	border-radius: 0;
}

.action-widget .monaco-list-row.separator:first-of-type {
	border-top: none;
	margin-top: 0;
}

.action-widget .monaco-list .group-header,
.action-widget .monaco-list .option-disabled,
.action-widget .monaco-list .option-disabled:before,
.action-widget .monaco-list .option-disabled .focused,
.action-widget .monaco-list .option-disabled .focused:before {
	cursor: default !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
	background-color: transparent !important;
	outline: 0 solid !important;
}

.action-widget .monaco-list-row.action {
	display: flex;
	gap: 4px;
	align-items: center;
}

.action-widget .monaco-list-row.action.option-disabled,
.action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
.action-widget .monaco-list-row.action.option-disabled .codicon,
.action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled {
	color: var(--vscode-disabledForeground);
}


.action-widget .monaco-list-row.action:not(.option-disabled) .codicon {
	color: inherit;
}

.action-widget .monaco-list-row.action .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key {
		background-color: var(--vscode-keybindingLabel-background);
		color: var(--vscode-keybindingLabel-foreground);
		border-style: solid;
		border-width: 1px;
		border-radius: 3px;
		border-color: var(--vscode-keybindingLabel-border);
		border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
		box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
}

/* Action bar */

.action-widget .action-widget-action-bar {
	background-color: var(--vscode-menu-background);
	border-top: 1px solid var(--vscode-menu-border);
	margin-top: 2px;
}

.action-widget .action-widget-action-bar::before {
	display: block;
	content: "";
	width: 100%;
}

.action-widget .action-widget-action-bar .actions-container {
	padding: 4px 8px 2px 24px;
}

.action-widget-action-bar .action-label {
	color: var(--vscode-textLink-activeForeground);
	font-size: 13px;
	line-height: 22px;
	padding: 0;
	pointer-events: all;
}

.action-widget-action-bar .action-item {
	margin-right: 16px;
	pointer-events: none;
}

.action-widget-action-bar .action-label:hover {
	background-color: transparent !important;
}

.monaco-action-bar .actions-container.highlight-toggled .action-label.checked {
	/* The important gives this rule precedence over the hover rule. */
	background: var(--vscode-actionBar-toggledBackground) !important;
}

.action-widget .monaco-list .monaco-list-row .description {
	opacity: 0.7;
	margin-left: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-keybinding {
	display: flex;
	align-items: center;
	line-height: 10px;
}

.monaco-keybinding > .monaco-keybinding-key {
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 11px;
	padding: 3px 5px;
	margin: 0 2px;
}

.monaco-keybinding > .monaco-keybinding-key:first-child {
	margin-left: 0;
}

.monaco-keybinding > .monaco-keybinding-key:last-child {
	margin-right: 0;
}

.monaco-keybinding > .monaco-keybinding-key-separator {
	display: inline-block;
}

.monaco-keybinding > .monaco-keybinding-key-chord-separator {
	width: 6px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.post-edit-widget {
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 1px solid var(--vscode-widget-border, transparent);
	border-radius: 4px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	overflow: hidden;
}

.post-edit-widget .monaco-button {
	padding: 2px;
	border: none;
	border-radius: 0;
}

.post-edit-widget .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground) !important;
}

.post-edit-widget .monaco-button .codicon {
	margin: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
	font-family: "codicon";
	font-display: block;
	src: url(/assets/codicon-ngg6Pgfi.ttf) format("truetype");
}

.codicon[class*='codicon-'] {
	font: normal normal normal 16px/1 codicon;
	display: inline-block;
	text-decoration: none;
	text-rendering: auto;
	text-align: center;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.codicon-wrench-subaction {
	opacity: 0.5;
}

@keyframes codicon-spin {
	100% {
		transform:rotate(360deg);
	}
}

.codicon-sync.codicon-modifier-spin,
.codicon-loading.codicon-modifier-spin,
.codicon-gear.codicon-modifier-spin,
.codicon-notebook-state-executing.codicon-modifier-spin {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.5s steps(30) infinite;
}

.codicon-modifier-disabled {
	opacity: 0.4;
}

/* custom speed & easing for loading icon */
.codicon-loading,
.codicon-tree-item-loading::before {
	animation-duration: 1s !important;
	animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.monaco-editor .codicon.codicon-symbol-array,
.monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
.monaco-editor .codicon.codicon-symbol-boolean,
.monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); }
.monaco-editor .codicon.codicon-symbol-class,
.monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); }
.monaco-editor .codicon.codicon-symbol-method,
.monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); }
.monaco-editor .codicon.codicon-symbol-color,
.monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); }
.monaco-editor .codicon.codicon-symbol-constant,
.monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); }
.monaco-editor .codicon.codicon-symbol-constructor,
.monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); }
.monaco-editor .codicon.codicon-symbol-value,
.monaco-workbench .codicon.codicon-symbol-value,
.monaco-editor .codicon.codicon-symbol-enum,
.monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); }
.monaco-editor .codicon.codicon-symbol-enum-member,
.monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); }
.monaco-editor .codicon.codicon-symbol-event,
.monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); }
.monaco-editor .codicon.codicon-symbol-field,
.monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); }
.monaco-editor .codicon.codicon-symbol-file,
.monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); }
.monaco-editor .codicon.codicon-symbol-folder,
.monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); }
.monaco-editor .codicon.codicon-symbol-function,
.monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); }
.monaco-editor .codicon.codicon-symbol-interface,
.monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); }
.monaco-editor .codicon.codicon-symbol-key,
.monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); }
.monaco-editor .codicon.codicon-symbol-keyword,
.monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); }
.monaco-editor .codicon.codicon-symbol-module,
.monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); }
.monaco-editor .codicon.codicon-symbol-namespace,
.monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); }
.monaco-editor .codicon.codicon-symbol-null,
.monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); }
.monaco-editor .codicon.codicon-symbol-number,
.monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); }
.monaco-editor .codicon.codicon-symbol-object,
.monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); }
.monaco-editor .codicon.codicon-symbol-operator,
.monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); }
.monaco-editor .codicon.codicon-symbol-package,
.monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); }
.monaco-editor .codicon.codicon-symbol-property,
.monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); }
.monaco-editor .codicon.codicon-symbol-reference,
.monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); }
.monaco-editor .codicon.codicon-symbol-snippet,
.monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); }
.monaco-editor .codicon.codicon-symbol-string,
.monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); }
.monaco-editor .codicon.codicon-symbol-struct,
.monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); }
.monaco-editor .codicon.codicon-symbol-text,
.monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); }
.monaco-editor .codicon.codicon-symbol-type-parameter,
.monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-symbolIcon-typeParameterForeground); }
.monaco-editor .codicon.codicon-symbol-unit,
.monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
.monaco-editor .codicon.codicon-symbol-variable,
.monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lightBulbWidget {
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-editor .lightBulbWidget:hover{
	cursor: pointer;
}

.monaco-editor .lightBulbWidget.codicon-light-bulb,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.monaco-editor .lightBulbWidget.codicon-lightbulb-autofix,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle-autofix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.monaco-editor .lightBulbWidget.codicon-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}

.monaco-editor .lightBulbWidget:before {
	position: relative;
	z-index: 2;
}

.monaco-editor .lightBulbWidget:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 1;
}

/* gutter decoration */
.monaco-editor .glyph-margin-widgets .cgmr[class*="codicon-gutter-lightbulb"] {
	display: block;
	cursor: pointer;
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb,
.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-auto-fix,
.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-aifix-auto-fix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .codelens-decoration {
	overflow: hidden;
	display: inline-flex !important; /* !important to override inline display:block style */
	align-items: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
	padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5);
	font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings);
	font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault);
}

.monaco-editor .codelens-decoration > span,
.monaco-editor .codelens-decoration > a {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	vertical-align: sub;
	display: inline-flex;
	align-items: center;
}

.monaco-editor .codelens-decoration > a {
	text-decoration: none;
}

.monaco-editor .codelens-decoration > a:hover {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration > a:hover .codicon {
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration .codicon[class*='codicon-'] {
	vertical-align: middle;
	color: currentColor !important;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
}


.monaco-editor .codelens-decoration > a:hover .codicon::before {
	cursor: pointer;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.monaco-editor .codelens-decoration.fadein {
	animation: fadein 0.1s linear;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .inlineSuggestionsHints {
	padding: 4px;

	.warningMessage p {
		margin: 0;
	}
}

.monaco-editor .inlineSuggestionsHints.withBorder {
	z-index: 39;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .inlineSuggestionsHints a {
	color: var(--vscode-foreground) !important;
}

.monaco-editor .inlineSuggestionsHints a:hover {
	color: var(--vscode-foreground) !important;
}

.monaco-editor .inlineSuggestionsHints .keybinding {
	display: flex;
	margin-left: 4px;
	opacity: 0.6;
}

.monaco-editor .inlineSuggestionsHints .keybinding .monaco-keybinding-key {
	font-size: 8px;
	padding: 2px 3px;
}

.monaco-editor .inlineSuggestionsHints .availableSuggestionCount a {
	display: flex;
	min-width: 19px;
	justify-content: center;
}

.monaco-editor .inlineSuggestionStatusBarItemLabel {
	margin-right: 2px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-hover {
	cursor: default;
	position: absolute;
	overflow: hidden;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	box-sizing: border-box;
	line-height: 1.5em;
	white-space: var(--vscode-hover-whiteSpace, normal);
}

.monaco-hover.fade-in {
	animation: fadein 100ms linear;
}

.monaco-hover.hidden {
	display: none;
}

.monaco-hover a:hover:not(.disabled) {
	cursor: pointer;
}

.monaco-hover .hover-contents:not(.html-hover-contents) {
	padding: 4px 8px;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
	max-width: var(--vscode-hover-maxWidth, 500px);
	word-wrap: break-word;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr {
	min-width: 100%;
}

.monaco-hover p,
.monaco-hover .code,
.monaco-hover ul,
.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	margin: 8px 0;
}

.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	line-height: 1.1;
}

.monaco-hover code {
	font-family: var(--monaco-monospace-font);
}

.monaco-hover hr {
	box-sizing: border-box;
	border-left: 0px;
	border-right: 0px;
	margin-top: 4px;
	margin-bottom: -4px;
	margin-left: -8px;
	margin-right: -8px;
	height: 1px;
}

.monaco-hover p:first-child,
.monaco-hover .code:first-child,
.monaco-hover ul:first-child {
	margin-top: 0;
}

.monaco-hover p:last-child,
.monaco-hover .code:last-child,
.monaco-hover ul:last-child {
	margin-bottom: 0;
}

/* MarkupContent Layout */
.monaco-hover ul {
	padding-left: 20px;
}
.monaco-hover ol {
	padding-left: 20px;
}

.monaco-hover li > p {
	margin-bottom: 0;
}

.monaco-hover li > ul {
	margin-top: 0;
}

.monaco-hover code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-hover .monaco-tokenized-source {
	white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
}

.monaco-hover .hover-row.status-bar {
	font-size: 12px;
	line-height: 22px;
}

.monaco-hover .hover-row.status-bar .info {
	font-style: italic;
	padding: 0px 8px;
}

.monaco-hover .hover-row.status-bar .actions {
	display: flex;
	padding: 0px 8px;
	width: 100%;
}

.monaco-hover .hover-row.status-bar .actions .action-container {
	margin-right: 16px;
	cursor: pointer;
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
	padding-right: 4px;
	vertical-align: middle;
}

.monaco-hover .hover-row.status-bar .actions .action-container a {
	color: var(--vscode-textLink-foreground);
	-webkit-text-decoration: var(--text-link-decoration);
	        text-decoration: var(--text-link-decoration);
}

.monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
	color: var(--vscode-textLink-foreground);
}

.monaco-hover .markdown-hover .hover-contents .codicon {
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
}

.monaco-hover .hover-contents a.code-link:hover,
.monaco-hover .hover-contents a.code-link {
	color: inherit;
}

.monaco-hover .hover-contents a.code-link:before {
	content: '(';
}

.monaco-hover .hover-contents a.code-link:after {
	content: ')';
}

.monaco-hover .hover-contents a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-foreground);
}

.monaco-hover .hover-contents a.code-link > span:hover {
	color: var(--vscode-textLink-activeForeground);
}

/**
 * Spans in markdown hovers need a margin-bottom to avoid looking cramped:
 * https://github.com/microsoft/vscode/issues/101496

 * This was later refined to only apply when the last child of a rendered markdown block (before the
 * border or a `hr`) uses background color:
 * https://github.com/microsoft/vscode/issues/228136
 */
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) p:last-child [style*="background-color"] {
	margin-bottom: 4px;
	display: inline-block;
}

/**
 * Add a slight margin to try vertically align codicons with any text
 * https://github.com/microsoft/vscode/issues/221359
 */
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span.codicon {
	margin-bottom: 2px;
}

.monaco-hover-content .action-container a {
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
}

.monaco-hover-content .action-container.disabled {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

/* Prevent text selection in all button-like elements within hovers */
.monaco-hover .action-container,
.monaco-hover .action,
.monaco-hover button,
.monaco-hover .monaco-button,
.monaco-hover .monaco-text-button,
.monaco-hover [role="button"] {
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-custom-toggle {
	margin-left: 2px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 1px;
	box-sizing:	border-box;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

.monaco-custom-toggle:hover {
	background-color: var(--vscode-inputOption-hoverBackground);
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	border: 1px dashed var(--vscode-focusBorder);
}

.hc-black .monaco-custom-toggle,
.hc-light .monaco-custom-toggle {
	background: none;
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	background: none;
}

.monaco-custom-toggle.monaco-checkbox {
	height: 18px;
	width: 18px;
	border: 1px solid transparent;
	border-radius: 3px;
	margin-right: 9px;
	margin-left: 0px;
	padding: 0px;
	opacity: 1;
	background-size: 16px !important;
}

.monaco-action-bar .checkbox-action-item {
	display: flex;
	align-items: center;
	border-radius: 2px;
	padding-right: 2px;
}

.monaco-action-bar .checkbox-action-item:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox {
	margin-right: 4px;
}

.monaco-action-bar .checkbox-action-item > .checkbox-label {
	font-size: 12px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Find widget */
.monaco-editor .find-widget {
	position: absolute;
	z-index: 35;
	height: 33px;
	overflow: hidden;
	line-height: 19px;
	transition: transform 200ms linear;
	padding: 0 4px;
	box-sizing: border-box;
	transform: translateY(calc(-100% - 10px)); /* shadow (10px) */
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	color: var(--vscode-editorWidget-foreground);
	border-left: 1px solid var(--vscode-widget-border);
	border-right: 1px solid var(--vscode-widget-border);
	border-bottom: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: var(--vscode-editorWidget-background);
}

.monaco-reduce-motion .monaco-editor .find-widget {
	transition: transform 0ms linear;
}

.monaco-editor .find-widget textarea {
	margin: 0px;
}

.monaco-editor .find-widget.hiddenEditor {
	display: none;
}

/* Find widget when replace is toggled on */
.monaco-editor .find-widget.replaceToggled > .replace-part {
	display: flex;
}

.monaco-editor .find-widget.visible {
	transform: translateY(0);
}

/* This outline-color rule is used to override the outline color for synthetic-focus find input. */
.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
}

.monaco-editor .find-widget .monaco-inputbox .input {
	background-color: transparent;
	min-height: 0;
}

.monaco-editor .find-widget .monaco-findInput .input {
	font-size: 13px;
}

.monaco-editor .find-widget > .find-part,
.monaco-editor .find-widget > .replace-part {
	margin: 3px 25px 0 17px;
	font-size: 12px;
	display: flex;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox,
.monaco-editor .find-widget > .replace-part .monaco-inputbox {
	min-height: 25px;
}


.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-right: 22px;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-top: 2px;
	padding-bottom: 2px;
}

.monaco-editor .find-widget > .find-part .find-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget > .replace-part .replace-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget .monaco-findInput {
	vertical-align: middle;
	display: flex;
	flex: 1;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
	/* Make sure textarea inherits the width correctly */
	width: 100%;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical {
	/* Hide vertical scrollbar */
	opacity: 0;
}

.monaco-editor .find-widget .matchesCount {
	display: flex;
	flex: initial;
	margin: 0 0 0 3px;
	padding: 2px 0 0 2px;
	height: 25px;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
	line-height: 23px;
}

.monaco-editor .find-widget .button {
	width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 5px;
	display: flex;
	flex: initial;
	margin-left: 3px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* find in selection button */
.monaco-editor .find-widget .codicon-find-selection {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-editor .find-widget .button.left {
	margin-left: 0;
	margin-right: 3px;
}

.monaco-editor .find-widget .button.wide {
	width: auto;
	padding: 1px 6px;
	top: -1px;
}

.monaco-editor .find-widget .button.toggle {
	position: absolute;
	top: 0;
	left: 3px;
	width: 18px;
	height: 100%;
	border-radius: 0;
	box-sizing: border-box;
}

.monaco-editor .find-widget .button.toggle.disabled {
	display: none;
}

.monaco-editor .find-widget .disabled {
	color: var(--vscode-disabledForeground);
	cursor: default;
}

.monaco-editor .find-widget > .replace-part {
	display: none;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput {
	position: relative;
	display: flex;
	vertical-align: middle;
	flex: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

/* REDUCED */
.monaco-editor .find-widget.reduced-find-widget .matchesCount {
	display: none;
}

/* NARROW (SMALLER THAN REDUCED) */
.monaco-editor .find-widget.narrow-find-widget {
	max-width: 257px !important;
}

/* COLLAPSED (SMALLER THAN NARROW) */
.monaco-editor .find-widget.collapsed-find-widget {
	max-width: 170px !important;
}

.monaco-editor .find-widget.collapsed-find-widget .button.previous,
.monaco-editor .find-widget.collapsed-find-widget .button.next,
.monaco-editor .find-widget.collapsed-find-widget .button.replace,
.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,
.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
	display: none;
}

.monaco-editor .find-widget.no-results .matchesCount {
	color: var(--vscode-errorForeground);
}

.monaco-editor .findMatch {
	animation-duration: 0;
	animation-name: inherit !important;
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor .currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
	border: 2px solid var(--vscode-editor-findMatchBorder);
	padding: 1px;
	box-sizing: border-box;
}

.monaco-editor .findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor .find-widget .monaco-sash {
	left: 0 !important;
	background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border));
}

.monaco-editor.hc-black .find-widget .button:before {
	position: relative;
	top: 1px;
	left: 2px;
}

/* Action bars */
.monaco-editor .find-widget .button:not(.disabled):hover,
.monaco-editor .find-widget .codicon-find-selection:hover {
	background-color: var(--vscode-toolbar-hoverBackground) !important;
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor.currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
}

.monaco-editor.findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editorWidget-background);
}

/* Close button position. */
.monaco-editor .find-widget > .button.codicon-widget-close {
	position: absolute;
	top: 5px;
	right: 4px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-inputbox {
	position: relative;
	display: block;
	padding: 0;
	box-sizing:	border-box;
	border-radius: 2px;

	/* Customizable */
	font-size: inherit;
}

.monaco-inputbox > .ibwrapper > .input,
.monaco-inputbox > .ibwrapper > .mirror {

	/* Customizable */
	padding: 4px 6px;
}

.monaco-inputbox > .ibwrapper {
	position: relative;
	width: 100%;
}

.monaco-inputbox > .ibwrapper > .input {
	display: inline-block;
	box-sizing:	border-box;
	width: 100%;
	height: 100%;
	line-height: inherit;
	border: none;
	font-family: inherit;
	font-size: inherit;
	resize: none;
	color: inherit;
}

.monaco-inputbox > .ibwrapper > input {
	text-overflow: ellipsis;
}

.monaco-inputbox > .ibwrapper > textarea.input {
	display: block;
	scrollbar-width: none; /* Firefox: hide scrollbars */
	outline: none;
}

.monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
	display: none; /* Chrome + Safari: hide scrollbar */
}

.monaco-inputbox > .ibwrapper > textarea.input.empty {
	white-space: nowrap;
}

.monaco-inputbox > .ibwrapper > .mirror {
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	white-space: pre-wrap;
	visibility: hidden;
	word-wrap: break-word;
}

/* Context view */

.monaco-inputbox-container {
	text-align: right;
}

.monaco-inputbox-container .monaco-inputbox-message {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	width: 100%;
	box-sizing:	border-box;
	padding: 0.4em;
	font-size: 12px;
	line-height: 17px;
	margin-top: -1px;
	word-wrap: break-word;
}

/* Action bar support */
.monaco-inputbox .monaco-action-bar {
	position: absolute;
	right: 2px;
	top: 4px;
}

.monaco-inputbox .monaco-action-bar .action-item {
	margin-left: 2px;
}

.monaco-inputbox .monaco-action-bar .action-item .codicon {
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
/* ---------- Find input ---------- */

.monaco-findInput {
	position: relative;
}

.monaco-findInput .monaco-inputbox {
	font-size: 13px;
	width: 100%;
}

.monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

.vs .monaco-findInput.disabled {
	background-color: #E1E1E1;
}

/* Theming */
.vs-dark .monaco-findInput.disabled {
	background-color: #333;
}

/* Highlighting */
.monaco-findInput.highlight-0 .controls,
.hc-light .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-0 100ms linear 0s;
}

.monaco-findInput.highlight-1 .controls,
.hc-light .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-1 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-0 .controls,
.vs-dark  .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-1 .controls,
.vs-dark  .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
}

@keyframes monaco-findInput-highlight-0 {
	0% { background: rgba(253, 255, 0, 0.8); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-1 {
	0% { background: rgba(253, 255, 0, 0.8); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}

@keyframes monaco-findInput-highlight-dark-0 {
	0% { background: rgba(255, 255, 255, 0.44); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-dark-1 {
	0% { background: rgba(255, 255, 255, 0.44); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.colorpicker-widget {
	height: 190px;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/* Decoration */

.colorpicker-color-decoration,
.hc-light .colorpicker-color-decoration {
	border: solid 0.1em #000;
	box-sizing: border-box;
	margin: 0.1em 0.2em 0 0.2em;
	width: 0.8em;
	height: 0.8em;
	line-height: 0.8em;
	display: inline-block;
	cursor: pointer;
}

.hc-black .colorpicker-color-decoration,
.vs-dark .colorpicker-color-decoration {
	border: solid 0.1em #eee;
}

/* Header */

.colorpicker-header {
	display: flex;
	height: 24px;
	position: relative;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-header .picked-color {
	width: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24px;
	cursor: pointer;
	color: white;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
}

.colorpicker-header .picked-color .picked-color-presentation {
	white-space: nowrap;
	margin-left: 5px;
	margin-right: 5px;
}

.colorpicker-header .picked-color .codicon {
	color: inherit;
	font-size: 14px;
}

.colorpicker-header .picked-color.light {
	color: black;
}

.colorpicker-header .original-color {
	width: 74px;
	z-index: inherit;
	cursor: pointer;
}

.standalone-colorpicker {
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header.standalone-colorpicker {
	border-bottom: none;
}

.colorpicker-header .close-button {
	cursor: pointer;
	background-color: var(--vscode-editorHoverWidget-background);
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header .close-button-inner-div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.colorpicker-header .close-button-inner-div:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.colorpicker-header .close-icon {
	padding: 3px;
}

/* Body */

.colorpicker-body {
	display: flex;
	padding: 8px;
	position: relative;
}

.colorpicker-body .saturation-wrap {
	overflow: hidden;
	height: 150px;
	position: relative;
	min-width: 220px;
	flex: 1;
}

.colorpicker-body .saturation-box {
	height: 150px;
	position: absolute;
}

.colorpicker-body .saturation-selection {
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -5px;
	border: 1px solid rgb(255, 255, 255);
	border-radius: 100%;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
	position: absolute;
}

.colorpicker-body .strip {
	width: 25px;
	height: 150px;
}

.colorpicker-body .standalone-strip {
	width: 25px;
	height: 122px;
}

.colorpicker-body .hue-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.colorpicker-body .opacity-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-body .strip.grabbing {
	cursor: grabbing;
}

.colorpicker-body .slider {
	position: absolute;
	top: 0;
	left: -2px;
	width: calc(100% + 4px);
	height: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.71);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
}

.colorpicker-body .strip .overlay {
	height: 150px;
	pointer-events: none;
}

.colorpicker-body .standalone-strip .standalone-overlay {
	height: 122px;
	pointer-events: none;
}

.standalone-colorpicker-body {
	display: block;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
	overflow: hidden;
}

.colorpicker-body .insert-button {
	position: absolute;
	height: 20px;
	width: 58px;
	padding: 0px;
	right: 8px;
	bottom: 8px;
	background: var(--vscode-button-background);
	color: var(--vscode-button-foreground);
	border-radius: 2px;
	border: none;
	cursor: pointer;
}

.colorpicker-body .insert-button:hover{
	background: var(--vscode-button-hoverBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .peekview-widget .head {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title {
	display: flex;
	align-items: baseline;
	font-size: 13px;
	margin-left: 20px;
	min-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .peekview-widget .head .peekview-title.clickable {
	cursor: pointer;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
	font-size: 0.9em;
	margin-left: 0.5em;
}

.monaco-editor .peekview-widget .head .peekview-title .meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty)::before {
	content: '-';
	padding: 0 0.3em;
}

.monaco-editor .peekview-widget .head .peekview-actions {
	flex: 1;
	text-align: right;
	padding-right: 2px;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar {
	display: inline-block;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar,
.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar > .actions-container {
	height: 100%;
}

.monaco-editor .peekview-widget > .body {
	border-top: 1px solid;
	position: relative;
}

.monaco-editor .peekview-widget .head .peekview-title .codicon {
	margin-right: 4px;
	align-self: center;
}

.monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon {
	color: inherit !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .zone-widget {
	position: absolute;
	z-index: 10;
}


.monaco-editor .zone-widget .zone-widget-container {
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
	position: relative;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-split-view2 {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .sash-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.monaco-split-view2 > .sash-container > .monaco-sash {
	pointer-events: initial;
}

.monaco-split-view2 > .monaco-scrollable-element {
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
	width: 100%;
	height: 100%;
	white-space: nowrap;
	position: relative;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
	white-space: initial;
	position: absolute;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
	display: none;
}

.monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
	width: 100%;
}

.monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
	height: 100%;
}

.monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	pointer-events: none;
	background-color: var(--separator-border);
}

.monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 100%;
	width: 1px;
}

.monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 1px;
	width: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-table {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.monaco-table > .monaco-split-view2 {
	border-bottom: 1px solid transparent;
}

.monaco-table > .monaco-list {
	flex: 1;
}

.monaco-table-tr {
	display: flex;
	height: 100%;
}

.monaco-table-th {
	width: 100%;
	height: 100%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-table-th,
.monaco-table-td {
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	content: "";
	position: absolute;
	left: calc(var(--vscode-sash-size) / 2);
	width: 0;
	border-left: 1px solid transparent;
}

.monaco-enable-motion .monaco-table > .monaco-split-view2,
.monaco-enable-motion .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	transition: border-color 0.2s ease-out;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-tl-row {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

.monaco-tl-row.disabled {
	cursor: default;
}
.monaco-tl-indent {
	height: 100%;
	position: absolute;
	top: 0;
	left: 16px;
	pointer-events: none;
}

.hide-arrows .monaco-tl-indent {
	left: 12px;
}

.monaco-tl-indent > .indent-guide {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	border-left: 1px solid transparent;
	opacity: 0;
}

.monaco-enable-motion .monaco-tl-indent > .indent-guide {
	transition: opacity 0.1s linear;
}

.monaco-tl-twistie,
.monaco-tl-contents {
	height: 100%;
}

.monaco-tl-twistie {
	font-size: 10px;
	text-align: right;
	padding-right: 6px;
	flex-shrink: 0;
	width: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transform: translateX(3px);
}

.monaco-tl-contents {
	flex: 1;
	overflow: hidden;
}

.monaco-tl-twistie::before {
	border-radius: 20px;
}

.monaco-tl-twistie.collapsed::before {
	transform: rotate(-90deg);
}

.monaco-tl-twistie.codicon-tree-item-loading::before {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.25s steps(30) infinite;
}

.monaco-tree-type-filter {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	padding: 3px;
	max-width: 200px;
	z-index: 100;
	margin: 0 10px 0 6px;
	border: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.monaco-enable-motion .monaco-tree-type-filter {
	transition: top 0.3s;
}

.monaco-tree-type-filter.disabled {
	top: -40px !important;
}

.monaco-tree-type-filter-input {
	flex: 1;
}

.monaco-tree-type-filter-input .monaco-inputbox {
	height: 23px;
}

.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
	padding: 2px 4px;
}

.monaco-tree-type-filter-input .monaco-findInput > .controls {
	top: 2px;
}

.monaco-tree-type-filter-actionbar {
	margin-left: 4px;
}

.monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
	padding: 2px;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 13; /* Settings editor uses z-index: 12 */

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
	position: absolute;
	width: 100%;
	opacity: 1 !important; /* Settings editor uses opacity < 1 */
	overflow: hidden;

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
	background-color: var(--vscode-list-hoverBackground) !important;
	cursor: pointer;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
	display: none;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow {
	position: absolute;
	bottom: -3px;
	left: 0px;
	height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */
	width: 100%;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
	outline: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -- zone widget */
.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.monaco-editor .reference-zone-widget .inline {
	display: inline-block;
	vertical-align: top;
}

.monaco-editor .reference-zone-widget .messages {
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 3em 0;
}

.monaco-editor .reference-zone-widget .ref-tree {
	line-height: 23px;
	background-color: var(--vscode-peekViewResult-background);
	color: var(--vscode-peekViewResult-lineForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .reference {
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file {
	display: inline-flex;
	width: 100%;
	height: 100%;
	color: var(--vscode-peekViewResult-fileForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
	color: inherit !important;
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) {
	background-color: var(--vscode-peekViewResult-selectionBackground);
	color: var(--vscode-peekViewResult-selectionForeground) !important;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
	margin-right: 12px;
	margin-left: auto;
}

.monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
	color: var(--vscode-peekViewResult-fileForeground) !important;
	background-color: var(--vscode-peekViewResult-matchHighlightBackground) !important;
}

.monaco-editor .reference-zone-widget .preview .reference-decoration {
	background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
	border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
	box-sizing: border-box;
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,
.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
	background-color: var(--vscode-peekViewEditor-background);
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
	background-color: var(--vscode-peekViewEditorGutter-background);
}

/* High Contrast Theming */

.monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file {
	font-weight: bold;
}

.monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight {
	border: 1px dotted var(--vscode-contrastActiveBorder, transparent);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-count-badge {
	padding: 3px 5px;
	border-radius: 11px;
	font-size: 11px;
	min-width: 18px;
	min-height: 18px;
	line-height: 11px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
}

.monaco-count-badge.long {
	padding: 2px 3px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* ---------- Icon label ---------- */

.monaco-icon-label {
	display: flex; /* required for icons support :before rule */
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-icon-label::before {

	/* svg icons rendered as background image */
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	line-height: inherit !important;
	display: inline-block;

	/* fonts icons */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: top;

	flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
}

.monaco-icon-label-iconpath {
	width: 16px;
	height: 22px;
	margin-right: 6px;
	display: flex;
}

.monaco-icon-label-container.disabled {
	color: var(--vscode-disabledForeground);
}
.monaco-icon-label > .monaco-icon-label-container {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
	color: inherit;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
	margin: 0 2px;
	opacity: 0.5;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
	opacity: .7;
	white-space: pre;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .7;
	margin-left: 0.5em;
	font-size: 0.9em;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
	white-space: nowrap
}

.vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .95;
}

.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-weight: bold;
}

.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-style: italic;
}

.monaco-icon-label.deprecated {
	text-decoration: line-through;
	opacity: 0.66;
}

.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	text-decoration: line-through;
}

.monaco-icon-label::after {
	opacity: 0.75;
	font-size: 90%;
	font-weight: 600;
	margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
	text-align: center;
}

/* make sure selection color wins when a label is being selected */
.monaco-list:focus .selected .monaco-icon-label, /* list */
.monaco-list:focus .selected .monaco-icon-label::after
{
	color: inherit !important;
}

.monaco-list-row.focused.selected .label-description,
.monaco-list-row.selected .label-description {
	opacity: .8;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* marker zone */

.monaco-editor .peekview-widget .head .peekview-title .severity-icon {
	display: inline-block;
	vertical-align: text-top;
	margin-right: 4px;
}

.monaco-editor .marker-widget {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .marker-widget > .stale {
	opacity: 0.6;
	font-style: italic;
}

.monaco-editor .marker-widget .title {
	display: inline-block;
	padding-right: 5px;
}

.monaco-editor .marker-widget .descriptioncontainer {
	position: absolute;
	white-space: pre;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	padding: 8px 12px 0 20px;
}

.monaco-editor .marker-widget .descriptioncontainer .message {
	display: flex;
	flex-direction: column;
}

.monaco-editor .marker-widget .descriptioncontainer .message .details {
	padding-left: 6px;
}

.monaco-editor .marker-widget .descriptioncontainer .message .source,
.monaco-editor .marker-widget .descriptioncontainer .message span.code {
	opacity: 0.6;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link {
	opacity: 0.6;
	color: inherit;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before {
	content: '(';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after {
	content: ')';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .marker-widget .descriptioncontainer .filename {
	cursor: pointer;
	color: var(--vscode-textLink-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .zone-widget .codicon.codicon-error,
.markers-panel .marker-icon.error, .markers-panel .marker-icon .codicon.codicon-error,
.text-search-provider-messages .providerMessage .codicon.codicon-error,
.extensions-viewlet > .extensions .codicon.codicon-error,
.extension-editor .codicon.codicon-error,
.chat-attached-context-attachment .codicon.codicon-error {
	color: var(--vscode-problemsErrorIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-warning,
.markers-panel .marker-icon.warning, .markers-panel .marker-icon .codicon.codicon-warning,
.text-search-provider-messages .providerMessage .codicon.codicon-warning,
.extensions-viewlet > .extensions .codicon.codicon-warning,
.extension-editor .codicon.codicon-warning,
.preferences-editor .codicon.codicon-warning {
	color: var(--vscode-problemsWarningIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-info,
.markers-panel .marker-icon.info, .markers-panel .marker-icon .codicon.codicon-info,
.text-search-provider-messages .providerMessage .codicon.codicon-info,
.extensions-viewlet > .extensions .codicon.codicon-info,
.extension-editor .codicon.codicon-info {
	color: var(--vscode-problemsInfoIcon-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .hoverHighlight {
	background-color: var(--vscode-editor-hoverHighlightBackground);
}

.monaco-editor .monaco-resizable-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	box-sizing: content-box;
}

.monaco-editor .monaco-resizable-hover > .monaco-hover {
	border: none;
	border-radius: none;
}

.monaco-editor .monaco-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
}

.monaco-editor .monaco-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-hover a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .monaco-hover .hover-row {
	display: flex;
}

.monaco-editor .monaco-hover .hover-row.hover-row-with-copy {
	position: relative;
	padding-right: 20px;
}

.monaco-editor .monaco-hover .hover-row .hover-row-contents {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions {
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	width: 22px;
	overflow-y: clip;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner {
	display: flex;
	flex-direction: column;
	padding-left: 5px;
	padding-right: 5px;
	justify-content: flex-end;
	position: relative;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon {
	cursor: pointer;
	font-size: 11px;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.enabled {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.disabled {
	opacity: 0.6;
}

.monaco-editor .monaco-hover .hover-row .actions {
	background-color: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-editor .monaco-hover code {
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .monaco-hover .hover-copy-button {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 2px 4px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.monaco-editor .monaco-hover .hover-row-with-copy:hover .hover-copy-button,
.monaco-editor .monaco-hover .hover-row-with-copy:focus-within .hover-copy-button {
	opacity: 1;
}

.monaco-editor .monaco-hover .hover-copy-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
	cursor: pointer;
}

.monaco-editor .monaco-hover .hover-copy-button:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.monaco-editor .monaco-hover .hover-copy-button .codicon {
	font-size: 16px;
	color: var(--vscode-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor.vs .dnd-target,
.monaco-editor.hc-light .dnd-target {
	border-right: 2px dotted black;
	color: white; /* opposite of black */
}
.monaco-editor.vs-dark .dnd-target {
	border-right: 2px dotted #AEAFAD;
	color: #51504f; /* opposite of #AEAFAD */
}
.monaco-editor.hc-black .dnd-target {
	border-right: 2px dotted #fff;
	color: #000; /* opposite of #fff */
}

.monaco-editor.mouse-default .view-lines,
.monaco-editor.vs-dark.mac.mouse-default .view-lines,
.monaco-editor.hc-black.mac.mouse-default .view-lines,
.monaco-editor.hc-light.mac.mouse-default .view-lines {
	cursor: default;
}
.monaco-editor.mouse-copy .view-lines,
.monaco-editor.vs-dark.mac.mouse-copy .view-lines,
.monaco-editor.hc-black.mac.mouse-copy .view-lines,
.monaco-editor.hc-light.mac.mouse-copy .view-lines {
	cursor: copy;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .findOptionsWidget {
	background-color: var(--vscode-editorWidget-background);
	color: var(--vscode-editorWidget-foreground);
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 2px solid var(--vscode-contrastBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 140%;
	margin-left: 2px;
}

.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	transition: initial;
}

.monaco-editor .margin-view-overlays:hover .codicon,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
	opacity: 1;
}

.monaco-editor .inline-folded:after {
	color: var(--vscode-editor-foldPlaceholderForeground);
	margin: 0.1em 0.2em 0 0.2em;
	content: "\22EF"; /* ellipses unicode character */
	display: inline;
	line-height: 1em;
	cursor: pointer;
}

.monaco-editor .folded-background {
	background-color: var(--vscode-editor-foldBackground);
}

.monaco-editor .cldr.codicon.codicon-folding-expanded,
.monaco-editor .cldr.codicon.codicon-folding-collapsed,
.monaco-editor .cldr.codicon.codicon-folding-manual-expanded,
.monaco-editor .cldr.codicon.codicon-folding-manual-collapsed {
	color: var(--vscode-editorGutter-foldingControlForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .snippet-placeholder {
	min-width: 2px;
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent);
}

.monaco-editor .finish-snippet-placeholder {
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Suggest widget*/

.monaco-editor .suggest-widget {
	width: 430px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	border-radius: 3px;
}

.monaco-editor .suggest-widget.message {
	flex-direction: row;
	align-items: center;
}

.monaco-editor .suggest-widget,
.monaco-editor .suggest-details {
	flex: 0 1 auto;
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: var(--vscode-editorSuggestWidget-border);
	background-color: var(--vscode-editorSuggestWidget-background);
}

.monaco-editor.hc-black .suggest-widget,
.monaco-editor.hc-black .suggest-details,
.monaco-editor.hc-light .suggest-widget,
.monaco-editor.hc-light .suggest-details {
	border-width: 2px;
}

/* Styles for status bar part */


.monaco-editor .suggest-widget .suggest-status-bar {
	box-sizing: border-box;
	display: none;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	font-size: 80%;
	padding: 0 4px 0 4px;
	border-top: 1px solid var(--vscode-editorSuggestWidget-border);
	overflow: hidden;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
	display: flex;
}

.monaco-editor .suggest-widget .suggest-status-bar .left {
	padding-right: 8px;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
	color: var(--vscode-editorSuggestWidgetStatus-foreground);
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label {
	margin-right: 0;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label::after {
	content: ', ';
	margin-right: 0.3em;
}

.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: none;
}

.monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: 100%;
}

/* Styles for Message element for when widget is loading or is empty */

.monaco-editor .suggest-widget > .message {
	padding-left: 22px;
}

/** Styles for the list element **/

.monaco-editor .suggest-widget > .tree {
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-widget .monaco-list {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/** Styles for each row in the list element **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
	display: flex;
	-mox-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
	color: var(--vscode-editorSuggestWidget-selectedForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon {
	color: var(--vscode-editorSuggestWidget-selectedIconForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents {
	flex: 1;
	height: 100%;
	overflow: hidden;
	padding-left: 2px;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	justify-content: space-between;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	display: flex;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main .monaco-icon-label {
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
	font-weight: bold;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-highlightForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-focusHighlightForeground);
}

/** ReadMore Icon styles **/

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before {
	color: inherit;
	opacity: 1;
	font-size: 14px;
	cursor: pointer;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close {
	position: absolute;
	top: 6px;
	right: 2px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close:hover,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover {
	opacity: 1;
}

/** signature, qualifier, type/details opacity **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	opacity: 0.7;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.6;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .qualifier-label {
	margin-left: 12px;
	opacity: 0.4;
	font-size: 85%;
	line-height: initial;
	text-overflow: ellipsis;
	overflow: hidden;
	align-self: center;
}

/** Type Info and icon next to the label in the focused completion item **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	font-size: 85%;
	margin-left: 1.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source {
	display: inline;
}

/** Details: if using CompletionItem#details, show on focus **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	display: none;
}

.monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
	display: inline;
}

/** Details: if using CompletionItemLabel#details, always show **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .right > .details-label,
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label) > .contents > .main > .right > .details-label {
	display: inline;
}

/** Ellipsis on hover **/

.monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: calc(100% - 26px);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 0;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .left > .monaco-icon-label {
	max-width: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 1;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	overflow: hidden;
	flex-shrink: 4;
	max-width: 70%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: inline-block;
	position: absolute;
	right: 10px;
	width: 18px;
	height: 18px;
	visibility: hidden;
}

/** Do NOT display ReadMore when docs is side/below **/

.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: none !important;
}

/** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .right > .readMore {
	display: none;
}

/** Focused item can show ReadMore, but can't when docs is side/below **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: inline-block;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right > .readMore {
	visibility: visible;
}

/** Styles for each row in the list **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {
	opacity: 0.66;
	text-decoration: unset;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated > .monaco-icon-label-container > .monaco-icon-name-container {
	text-decoration: line-through;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label::before {
	height: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
	display: block;
	height: 16px;
	width: 16px;
	margin-left: 2px;
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
	display: flex;
	align-items: center;
	margin-right: 4px;
}

.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,
.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon::before {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan {
	margin: 0 0 0 0.3em;
	border: 0.1em solid #000;
	width: 0.7em;
	height: 0.7em;
	display: inline-block;
}

/** Styles for the docs of the completion item in focus **/

.monaco-editor .suggest-details-container {
	z-index: 41;
}

.monaco-editor .suggest-details {
	display: flex;
	flex-direction: column;
	cursor: default;
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-details:focus {
	border-color: var(--vscode-focusBorder);
}

.monaco-editor .suggest-details a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .suggest-details a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .suggest-details code {
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .suggest-details.no-docs {
	display: none;
}

.monaco-editor .suggest-details > .monaco-scrollable-element {
	flex: 1;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type {
	flex: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.7;
	white-space: pre;
	margin: 0 24px 0 0;
	padding: 4px 0 4px 5px;
}

.monaco-editor .suggest-details.detail-and-doc > .monaco-scrollable-element > .body > .header > .type {
	padding-bottom: 12px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type.auto-wrap {
	white-space: normal;
	word-break: break-all;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs {
	margin: 0;
	padding: 4px 5px;
	white-space: pre-wrap;
}

.monaco-editor .suggest-details.no-type > .monaco-scrollable-element > .body > .docs {
	margin-right: 24px;
	overflow: hidden;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs {
	padding: 0;
	white-space: initial;
	min-height: calc(1rem + 8px);
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div,
.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > span:not(:empty) {
	padding: 4px 5px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:first-child {
	margin-top: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:last-child {
	margin-bottom: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .monaco-tokenized-source {
	white-space: pre;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs .code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .codicon {
	vertical-align: sub;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > p:empty {
	display: none;
}

.monaco-editor .suggest-details code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-editor .suggest-details ul {
	padding-left: 20px;
}

.monaco-editor .suggest-details ol {
	padding-left: 20px;
}

.monaco-editor .suggest-details p code {
	font-family: var(--monaco-monospace-font);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-hidden {
	opacity: 0;
	font-size: 0;
}

.monaco-editor .ghost-text-decoration,
.monaco-editor .suggest-preview-text .ghost-text {
	font-style: italic;
}

.monaco-editor .suggest-preview-text.clickable .view-line {
	z-index: 1;
}

.monaco-editor .ghost-text-decoration.clickable,
.monaco-editor .ghost-text-decoration-preview.clickable,
.monaco-editor .suggest-preview-text.clickable .ghost-text {
	cursor: pointer;
}

.monaco-editor .inline-completion-text-to-replace {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-decoration,
.monaco-editor .ghost-text-decoration-preview,
.monaco-editor .suggest-preview-text .ghost-text {
	&.syntax-highlighted {
		opacity: 0.7;
	}
	&:not(.syntax-highlighted) {
		color: var(--vscode-editorGhostText-foreground);
	}
	background-color: var(--vscode-editorGhostText-background);
	border: 1px solid var(--vscode-editorGhostText-border);
}

.monaco-editor .ghost-text-decoration.warning,
.monaco-editor .ghost-text-decoration-preview.warning,
.monaco-editor .suggest-preview-text .ghost-text.warning {
	background: var(--monaco-editor-warning-decoration) repeat-x bottom left;
	border-bottom: 4px double var(--vscode-editorWarning-border);
}

.ghost-text-view-warning-widget-icon {
	.codicon {
		color: var(--vscode-editorWarning-foreground) !important;
	}
}

.monaco-editor {
	.edits-fadeout-decoration {
		opacity: var(--animation-opacity, 1);
		background-color: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .sticky-widget {
	overflow: hidden;
	border-bottom: 1px solid var(--vscode-editorStickyScroll-border);
	width: 100%;
	box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px;
	z-index: 4;
	right: initial !important;
	margin-left: '0px';
}

.monaco-editor .sticky-widget .sticky-widget-line-numbers {
	float: left;
	background-color: var(--vscode-editorStickyScrollGutter-background);
}

.monaco-editor .sticky-widget.peek .sticky-widget-line-numbers {
	background-color: var(--vscode-peekViewEditorStickyScrollGutter-background);
}

.monaco-editor .sticky-widget .sticky-widget-lines-scrollable {
	display: inline-block;
	position: absolute;
	overflow: hidden;
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: var(--vscode-editorStickyScroll-background);
}

.monaco-editor .sticky-widget.peek .sticky-widget-lines-scrollable {
	background-color: var(--vscode-peekViewEditorStickyScroll-background);
}

.monaco-editor .sticky-widget .sticky-widget-lines {
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-widget .sticky-line-number,
.monaco-editor .sticky-widget .sticky-line-content {
	color: var(--vscode-editorLineNumber-foreground);
	white-space: nowrap;
	display: inline-block;
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-widget .sticky-line-number .codicon-folding-expanded,
.monaco-editor .sticky-widget .sticky-line-number .codicon-folding-collapsed {
	float: right;
	transition: var(--vscode-editorStickyScroll-foldingOpacityTransition);
	position: absolute;
	margin-left: 2px;
}

.monaco-editor .sticky-widget .sticky-line-content {
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: inherit;
	white-space: nowrap;
}

.monaco-editor .sticky-widget .sticky-line-number-inner {
	display: inline-block;
	text-align: right;
}

.monaco-editor .sticky-widget .sticky-line-content:hover {
	background-color: var(--vscode-editorStickyScrollHover-background);
	cursor: pointer;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	@keyframes blink { 50% { border-color: orange; }  }
*/

.monaco-editor {
	.inline-edits-view-indicator {
		display: flex;

		z-index: 34; /* Below the find widget */
		height: 20px;

		color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
		background-color: var(--vscode-inlineEdit-gutterIndicator-background);
		border: 1px solid var(--vscode-inlineEdit-gutterIndicator-primaryBorder);
		border-radius: 3px;

		align-items: center;
		padding: 2px;
		padding-right: 10px;
		margin: 0 4px;

		/*
		animation: blink 1s;
		animation-iteration-count: 3;
		*/

		opacity: 0;

		&.contained {
			transition: opacity 0.2s ease-in-out;
			transition-delay: 0.4s;
		}

		&.visible {
			opacity: 1;
		}

		&.top {
			opacity: 1;

			.icon {
				transform: rotate(90deg);
			}
		}

		&.bottom {
			opacity: 1;

			.icon {
				transform: rotate(-90deg);
			}
		}

		.icon {
			display: flex;
			align-items: center;
			margin: 0 2px;
			transform: none;
			transition: transform 0.2s ease-in-out;
			.codicon {
				color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
			}
		}

		.label {
			margin: 0 2px;

			display: flex;
			justify-content: center;
			width: 100%;
		}
	}

	.inline-edits-view .editorContainer {
		.preview .monaco-editor {
			.view-overlays .current-line-exact {
				border: none;
			}

			.current-line-margin {
				border: none;
			}
		}

		.inline-edits-view-zone.diagonal-fill {
			opacity: 0.5;
		}
	}

	.strike-through {
		text-decoration: line-through;
	}

	.inlineCompletions-line-insert {
		background: var(--vscode-inlineEdit-modifiedChangedLineBackground);
	}

	.inlineCompletions-line-delete {
		background: var(--vscode-inlineEdit-originalChangedLineBackground);
	}

	.inlineCompletions-char-insert {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
		cursor: pointer;
	}

	.inlineCompletions-char-delete {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.inlineCompletions-char-delete.diff-range-empty {
		margin-left: -1px;
		border-left: solid var(--vscode-inlineEdit-originalChangedTextBackground) 3px;
	}

	.inlineCompletions-char-insert.diff-range-empty {
		border-left: solid var(--vscode-inlineEdit-modifiedChangedTextBackground) 3px;
	}

	.inlineCompletions-char-delete.single-line-inline { /* Editor Decoration */
		border: 1px solid var(--vscode-editorHoverWidget-border);
		margin: -2px 0 0 -2px;
	}

	.inlineCompletions-char-insert.single-line-inline { /* Inline Decoration */
		border-top: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
		border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.inlineCompletions-char-insert.single-line-inline.start {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.inlineCompletions-char-insert.single-line-inline.end {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}

	.inlineCompletions-char-delete.single-line-inline.empty,
	.inlineCompletions-char-insert.single-line-inline.empty {
		display: none;
	}

	.inlineCompletions.strike-through {
		text-decoration-thickness: 1px;
	}

	/* line replacement bubbles */

	.inlineCompletions-modified-bubble {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}

	.inlineCompletions-original-bubble {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.inlineCompletions-modified-bubble,
	.inlineCompletions-original-bubble {
		pointer-events: none;
		display: inline-block;
	}

	.inline-edit.ghost-text,
	.inline-edit.ghost-text-decoration,
	.inline-edit.ghost-text-decoration-preview,
	.inline-edit.suggest-preview-text .ghost-text {
		&.syntax-highlighted {
			opacity: 1 !important;
		}
		font-style: normal !important;
	}

	.inline-edit.modified-background.ghost-text,
	.inline-edit.modified-background.ghost-text-decoration,
	.inline-edit.modified-background.ghost-text-decoration-preview,
	.inline-edit.modified-background.suggest-preview-text .ghost-text {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground) !important;
		display: inline-block !important;
	}

	.inlineCompletions-original-lines {
		background: var(--vscode-editor-background);
	}
}

.monaco-menu-option {
	color: var(--vscode-editorActionList-foreground);
	font-size: 13px;
	padding: 0 4px;
	line-height: 28px;
	display: flex;
	gap: 4px;
	align-items: center;
	border-radius: 3px;
	cursor: pointer;

	.monaco-keybinding-key {
		font-size: 13px;
		opacity: 0.7;
	}

	&.active {
		background: var(--vscode-editorActionList-focusBackground);
		color: var(--vscode-editorActionList-focusForeground);
		outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
		outline-offset: -1px;

		.monaco-keybinding-key {
			color: var(--vscode-editorActionList-focusForeground);
		}
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .goto-definition-link {
	text-decoration: underline;
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


.monaco-editor.vs .valueSetReplacement {
	outline: solid 2px var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .linked-editing-decoration {
	background-color: var(--vscode-editor-linkedEditingBackground);

	/* Ensure decoration is visible even if range is empty */
	min-width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .detected-link,
.monaco-editor .detected-link-active {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .detected-link-active {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor {
	.scroll-editor-on-middle-click-dot {
		cursor: all-scroll;
		position: absolute;
		z-index: 1;
		background-color: var(--vscode-editor-foreground, white);
		border: 1px solid var(--vscode-editor-background, black);
		opacity: 0.5;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		transform: translate(-50%, -50%);

		&.hidden {
			display: none;
		}
	}

	&.scroll-editor-on-middle-click-editor * {
		cursor: all-scroll;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .focused .selectionHighlight {
	background-color: var(--vscode-editor-selectionHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-selectionHighlightBorder);
}
.monaco-editor.hc-black .focused .selectionHighlight, .monaco-editor.hc-light .focused .selectionHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlight {
	background-color: var(--vscode-editor-wordHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightBorder);
}
.monaco-editor.hc-black .wordHighlight, .monaco-editor.hc-light .wordHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlightStrong {
	background-color: var(--vscode-editor-wordHighlightStrongBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightStrongBorder);
}
.monaco-editor.hc-black .wordHighlightStrong, .monaco-editor.hc-light .wordHighlightStrong {
	border-style: dotted;
}

.monaco-editor .wordHighlightText {
	background-color: var(--vscode-editor-wordHighlightTextBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightTextBorder);
}
.monaco-editor.hc-black .wordHighlightText, .monaco-editor.hc-light .wordHighlightText {
	border-style: dotted;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .parameter-hints-widget {
	/* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */
	z-index: 39;
	display: flex;
	flex-direction: column;
	line-height: 1.5em;
	cursor: default;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.hc-black .monaco-editor .parameter-hints-widget,
.hc-light .monaco-editor .parameter-hints-widget {
	border-width: 2px;
}

.monaco-editor .parameter-hints-widget > .phwrapper {
	max-width: 440px;
	display: flex;
	flex-direction: row;
}

.monaco-editor .parameter-hints-widget.multiple {
	min-height: 3.3em;
	padding: 0;
}

.monaco-editor .parameter-hints-widget.multiple .body::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	opacity: 0.5;
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget p,
.monaco-editor .parameter-hints-widget ul {
	margin: 8px 0;
}

.monaco-editor .parameter-hints-widget .monaco-scrollable-element,
.monaco-editor .parameter-hints-widget .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 100%;
}

.monaco-editor .parameter-hints-widget .signature {
	padding: 4px 5px;
	position: relative;
}

.monaco-editor .parameter-hints-widget .signature.has-docs::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding-top: 4px;
	opacity: 0.5;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget .code {
	font-family: var(--vscode-parameterHintsWidget-editorFontFamily), var(--vscode-parameterHintsWidget-editorFontFamilyDefault);
}

.monaco-editor .parameter-hints-widget .docs {
	padding: 0 10px 0 5px;
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .docs.empty {
	display: none;
}

.monaco-editor .parameter-hints-widget .docs a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .parameter-hints-widget .docs a:hover {
	color: var(--vscode-textLink-activeForeground);
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs {
	white-space: initial;
}

.monaco-editor .parameter-hints-widget .docs code {
	font-family: var(--monaco-monospace-font);
	border-radius: 3px;
	padding: 0 0.4em;
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source,
.monaco-editor .parameter-hints-widget .docs .code {
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .controls {
	display: none;
	flex-direction: column;
	align-items: center;
	min-width: 22px;
	justify-content: flex-end;
}

.monaco-editor .parameter-hints-widget.multiple .controls {
	display: flex;
	padding: 0 2px;
}

.monaco-editor .parameter-hints-widget.multiple .button {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .button.previous {
	bottom: 24px;
}

.monaco-editor .parameter-hints-widget .overloads {
	text-align: center;
	height: 12px;
	line-height: 12px;
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .parameter-hints-widget .signature .parameter.active {
	color: var(--vscode-editorHoverWidget-highlightForeground);
	font-weight: bold;
}

.monaco-editor .parameter-hints-widget .documentation-parameter > .parameter {
	font-weight: bold;
	margin-right: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor {
	.editorPlaceholder {
		top: 0px;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
		pointer-events: none;

		color: var(--vscode-editor-placeholder-foreground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rename-box {
	z-index: 100;
	color: inherit;
	border-radius: 4px;
}

.monaco-editor .rename-box.preview {
	padding: 4px 4px 0 4px;
}

.monaco-editor .rename-box .rename-input-with-button {
	padding: 3px;
	border-radius: 2px;
	width: calc(100% - 8px); /* 4px padding on each side */
}

.monaco-editor .rename-box .rename-input {
	width: calc(100% - 8px); /* 4px padding on each side */
	padding: 0;
}

.monaco-editor .rename-box .rename-input:focus {
	outline: none;
}

.monaco-editor .rename-box .rename-suggestions-button {
	display: flex;
	align-items: center;
	padding: 3px;
	background-color: transparent;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.monaco-editor .rename-box .rename-suggestions-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground)
}

.monaco-editor .rename-box .rename-candidate-list-container .monaco-list-row {
	border-radius: 2px;
}

.monaco-editor .rename-box .rename-label {
	display: none;
	opacity: .8;
}

.monaco-editor .rename-box.preview .rename-label {
	display: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .unicode-highlight {
	border: 1px solid var(--vscode-editorUnicodeHighlight-border);
	background-color: var(--vscode-editorUnicodeHighlight-background);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.editor-banner {
	box-sizing: border-box;
	cursor: default;
	width: 100%;
	font-size: 12px;
	display: flex;
	overflow: visible;

	height: 26px;

	background: var(--vscode-banner-background);
}


.editor-banner .icon-container {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 6px 0 10px;
}

.editor-banner .icon-container.custom-icon {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
	width: 16px;
	padding: 0;
	margin: 0 6px 0 10px;
}

.editor-banner .message-container {
	display: flex;
	align-items: center;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.editor-banner .message-container p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.editor-banner .message-actions-container {
	flex-grow: 1;
	flex-shrink: 0;
	line-height: 26px;
	margin: 0 4px;
}

.editor-banner .message-actions-container a.monaco-button {
	width: inherit;
	margin: 2px 8px;
	padding: 0px 12px;
}

.editor-banner .message-actions-container a {
	padding: 3px;
	margin-left: 12px;
	text-decoration: underline;
}

.editor-banner .action-container {
	padding: 0 10px 0 6px;
}

.editor-banner {
	background-color: var(--vscode-banner-background);
}

.editor-banner,
.editor-banner .action-container .codicon,
.editor-banner .message-actions-container .monaco-link {
	color: var(--vscode-banner-foreground);
}

.editor-banner .icon-container .codicon {
	color: var(--vscode-banner-iconForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-link {
	color: var(--vscode-textLink-foreground);
}

.monaco-link:hover {
	color: var(--vscode-textLink-activeForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.floating-menu-overlay-widget {
	padding: 0px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	border-radius: 2px;
	border: 1px solid var(--vscode-contrastBorder);
	display: flex;
	align-items: center;
	z-index: 10;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
	overflow: hidden;

	.action-item > .action-label {
		padding: 5px;
		font-size: 12px;
		border-radius: 2px;
	}

	.action-item > .action-label.codicon {
		color: var(--vscode-button-foreground);
	}

	.action-item > .action-label.codicon:not(.separator) {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.action-item:first-child > .action-label {
		padding-left: 7px;
	}

	.action-item:last-child > .action-label {
		padding-right: 7px;
	}

	.action-item .action-label.separator {
		background-color: var(--vscode-menu-separatorBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .iPadShowKeyboard {
	width: 58px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	resize: none;
	overflow: hidden;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjNDI0MjQyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #F6F6F6;
	border-radius: 4px;
}

.monaco-editor.vs-dark .iPadShowKeyboard {
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjQzVDNUM1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #252526;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .tokens-inspect-widget {
	z-index: 50;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	padding: 10px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}
.monaco-editor.hc-black .tokens-inspect-widget, .monaco-editor.hc-light .tokens-inspect-widget {
	border-width: 2px;
}

.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
	height: 1px;
	border: 0;
	background-color: var(--vscode-editorHoverWidget-border);
}

.monaco-editor .tokens-inspect-widget .tm-token {
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .tokens-inspect-widget .tm-token-length {
	font-weight: normal;
	font-size: 60%;
	float: right;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-table {
	width: 100%;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-value {
	font-family: var(--monaco-monospace-font);
	text-align: right;
}

.monaco-editor .tokens-inspect-widget .tm-token-type {
	font-family: var(--monaco-monospace-font);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


/* Default standalone editor fonts */
.monaco-editor {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
	--monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}

.monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-hover p {
	margin: 0;
}

/* See https://github.com/microsoft/monaco-editor/issues/2168#issuecomment-780078600 */
.monaco-aria-container {
	position: absolute !important;
	top: 0; /* avoid being placed underneath a sibling element */
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.monaco-editor .synthetic-focus, .monaco-diff-editor .synthetic-focus,
.monaco-editor [tabindex="0"]:focus, .monaco-diff-editor [tabindex="0"]:focus,
.monaco-editor [tabindex="-1"]:focus, .monaco-diff-editor [tabindex="-1"]:focus,
.monaco-editor button:focus, .monaco-diff-editor button:focus,
.monaco-editor input[type=button]:focus, .monaco-diff-editor input[type=button]:focus,
.monaco-editor input[type=checkbox]:focus, .monaco-diff-editor input[type=checkbox]:focus,
.monaco-editor input[type=search]:focus, .monaco-diff-editor input[type=search]:focus,
.monaco-editor input[type=text]:focus, .monaco-diff-editor input[type=text]:focus,
.monaco-editor select:focus, .monaco-diff-editor select:focus,
.monaco-editor textarea:focus, .monaco-diff-editor textarea:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
	opacity: 1
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.monaco-hover.workbench-hover {
	position: relative;
	font-size: 13px;
	line-height: 19px;
	/* Must be higher than sash's z-index and terminal canvases */
	z-index: 40;
	overflow: hidden;
	max-width: 700px;
	background: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 5px;
	color: var(--vscode-editorHoverWidget-foreground);
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.monaco-hover.workbench-hover .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 13px;
	height: 13px;
}

.monaco-hover.workbench-hover hr {
	border-bottom: none;
}

.monaco-hover.workbench-hover.compact {
	font-size: 12px;
}

.monaco-hover.workbench-hover.compact .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 12px;
	height: 12px;
}

.monaco-hover.workbench-hover.compact .hover-contents {
	padding: 2px 8px;
}

.workbench-hover-container.locked .monaco-hover.workbench-hover {
	outline: 1px solid var(--vscode-editorHoverWidget-border);
}
.workbench-hover-container:focus-within.locked .monaco-hover.workbench-hover {
	outline-color: var(--vscode-focusBorder);
}

.workbench-hover-pointer {
	position: absolute;
	/* Must be higher than workbench hover z-index */
	z-index: 41;
	pointer-events: none;
}

.workbench-hover-pointer:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--vscode-editorHoverWidget-background);
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}
.workbench-hover-container:not(:focus-within).locked .workbench-hover-pointer:after {
	width: 4px;
	height: 4px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}
.workbench-hover-container:focus-within .workbench-hover-pointer:after {
	border-right: 1px solid var(--vscode-focusBorder);
	border-bottom: 1px solid var(--vscode-focusBorder);
}

.workbench-hover-pointer.left   { left: -3px; }
.workbench-hover-pointer.right  { right: 3px; }
.workbench-hover-pointer.top    { top: -3px; }
.workbench-hover-pointer.bottom { bottom: 3px; }

.workbench-hover-pointer.left:after {
	transform: rotate(135deg);
}

.workbench-hover-pointer.right:after {
	transform: rotate(315deg);
}

.workbench-hover-pointer.top:after {
	transform: rotate(225deg);
}

.workbench-hover-pointer.bottom:after {
	transform: rotate(45deg);
}

.monaco-hover.workbench-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-hover.workbench-hover a:focus {
	outline: 1px solid;
	outline-offset: -1px;
	text-decoration: underline;
	outline-color: var(--vscode-focusBorder);
}

.monaco-hover.workbench-hover a.codicon:focus,
.monaco-hover.workbench-hover a.monaco-button:focus {
	text-decoration: none;
}

.monaco-hover.workbench-hover a:hover,
.monaco-hover.workbench-hover a:active {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-hover.workbench-hover code {
	background: var(--vscode-textCodeBlock-background);
}

.monaco-hover.workbench-hover .hover-row .actions {
	background: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-hover.workbench-hover.right-aligned {
	/* The context view service wraps strangely when it's right up against the edge without this */
	left: 1px;
}

.monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions {
	flex-direction: row-reverse;
}

.monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions .action-container {
	margin-right: 0;
	margin-left: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.context-view {
	position: absolute;
}

.context-view.fixed {
	all: initial;
	font-family: inherit;
	font-size: 13px;
	position: fixed;
	color: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	font-size: 13px;
}

.quick-input-widget .monaco-highlighted-label .highlight,
.quick-input-widget .monaco-highlighted-label .highlight {
	color: #0066BF;
}

.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight,
.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: #9DDDFF;
}

.vs-dark .quick-input-widget .monaco-highlighted-label .highlight,
.vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0097fb;
}

.hc-black .quick-input-widget .monaco-highlighted-label .highlight,
.hc-black .quick-input-widget .monaco-highlighted-label .highlight {
	color: #F38518;
}

.hc-light .quick-input-widget .monaco-highlighted-label .highlight,
.hc-light .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0F4A85;
}

.monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(221, 221, 221, 0.4);
	border: solid 1px rgba(204, 204, 204, 0.4);
	border-bottom-color: rgba(187, 187, 187, 0.4);
	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
	color: #555;
}

.hc-black .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px rgb(111, 195, 223);
	box-shadow: none;
	color: #fff;
}

.hc-light .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px #0F4A85;
	box-shadow: none;
	color: #292929;
}

.vs-dark .monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(128, 128, 128, 0.17);
	border: solid 1px rgba(51, 51, 51, 0.6);
	border-bottom-color: rgba(68, 68, 68, 0.6);
	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
	color: #ccc;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	position: absolute;
	width: 600px;
	z-index: 2550;
	left: 50%;
	-webkit-app-region: no-drag;
	border-radius: 6px;
}

.quick-input-titlebar {
	cursor: grab;
	display: flex;
	align-items: center;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.quick-input-left-action-bar {
	display: flex;
	margin-left: 4px;
	flex: 1;
}

/* give some space between input and action bar */
.quick-input-inline-action-bar > .actions-container > .action-item:first-child {
	margin-left: 5px;
}

/* center horizontally */
.quick-input-inline-action-bar > .actions-container > .action-item {
	margin-top: 2px;
}

.quick-input-title {
	cursor: grab;
	padding: 3px 0px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
}

.quick-input-right-action-bar {
	display: flex;
	margin-right: 4px;
	flex: 1;
}

.quick-input-right-action-bar > .actions-container {
	justify-content: flex-end;
}

.quick-input-right-action-bar > .actions-container > .action-item {
	margin-left: 4px;
}

.quick-input-titlebar .monaco-action-bar .action-label.codicon {
	background-position: center;
	background-repeat: no-repeat;
	padding: 2px;
}

.quick-input-description {
	margin: 6px 6px 6px 11px;
}

.quick-input-header .quick-input-description {
	margin: 4px 2px;
	flex: 1;
}

.quick-input-header {
	cursor: grab;
	display: flex;
	padding: 6px 6px 2px 6px;
}

.quick-input-widget.hidden-input .quick-input-header {
	/* reduce margins and paddings when input box hidden */
	padding: 0;
	margin-bottom: 0;
}

.quick-input-and-message {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	position: relative;
}

.quick-input-check-all {
	align-self: center;
	margin: 0;
}

.quick-input-widget .quick-input-header .monaco-checkbox {
	margin-top: 6px;
}

.quick-input-filter {
	flex-grow: 1;
	display: flex;
	position: relative;
}

.quick-input-box {
	flex-grow: 1;
}

.quick-input-widget.show-checkboxes .quick-input-box,
.quick-input-widget.show-checkboxes .quick-input-message {
	margin-left: 5px;
}

.quick-input-visible-count {
	position: absolute;
	left: -10000px;
}

.quick-input-count {
	align-self: center;
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
}

.quick-input-count .monaco-count-badge {
	vertical-align: middle;
	padding: 2px 4px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}

.quick-input-action {
	margin-left: 6px;
}

.quick-input-action .monaco-text-button {
	font-size: 11px;
	padding: 0 6px;
	display: flex;
	height: 25px;
	align-items: center;
}

.quick-input-message {
	margin-top: -1px;
	padding: 5px;
	overflow-wrap: break-word;
}

.quick-input-message > .codicon {
	margin: 0 0.2em;
	vertical-align: text-bottom;
}

/* Links in descriptions & validations */
.quick-input-message a {
	color: inherit;
}

.quick-input-progress.monaco-progress-container {
	position: relative;
}

.quick-input-list {
	line-height: 22px;
}

.quick-input-widget.hidden-input .quick-input-list {
	margin-top: 4px;
	/* reduce margins when input box hidden */
	padding-bottom: 4px;
}

.quick-input-list .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.quick-input-list .monaco-scrollable-element {
	padding: 0px 6px;
}

.quick-input-list .quick-input-list-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
	border-top-width: 1px;
	border-top-style: solid;
}

.quick-input-list .monaco-list-row {
	border-radius: 3px;
}

.quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border {
	border-top-style: none;
}

.quick-input-list .quick-input-list-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.quick-input-widget .monaco-checkbox {
	margin-right: 0;
}

.quick-input-widget .quick-input-list .monaco-checkbox,
.quick-input-widget .quick-input-tree .monaco-checkbox {
	margin-top: 4px;
}

.quick-input-list .quick-input-list-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-input-list .quick-input-list-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row {
	display: flex;
	align-items: center;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label,
.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.quick-input-list .quick-input-list-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
	margin-right: 8px;
	/* separate from the separator label or scrollbar if any */
}

.quick-input-list .quick-input-list-label-meta {
	opacity: 0.7;
	line-height: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
	font-weight: bold;
	background-color: unset;
	color: var(--vscode-list-highlightForeground) !important;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: var(--vscode-list-focusHighlightForeground) !important;
}

.quick-input-list .quick-input-list-entry .quick-input-list-separator {
	margin-right: 4px;
	/* separate from keybindings or actions */
}

.quick-input-list .quick-input-list-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-top: 1px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-right: 4px;
	/* separate from scrollbar */
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,
.quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label,
.quick-input-list .quick-input-list-entry.focus-inside .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.passive-focused .quick-input-list-entry-action-bar .action-label {
	display: flex;
}

.quick-input-list > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}

.quick-input-list > .monaco-list:focus .monaco-list-row.focused .quick-input-list-entry.quick-input-list-separator-border {
	border-color: transparent;
}

/* focused items in quick pick */
.quick-input-list .monaco-list-row.focused .monaco-keybinding-key,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
	color: inherit
}

.quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
	background: none;
}

.quick-input-list .quick-input-list-separator-as-item {
	padding: 4px 6px;
	font-size: 12px;
}

/* Quick input separators as full-row item */
.quick-input-list .quick-input-list-separator-as-item .label-name {
	font-weight: 600;
}

.quick-input-list .quick-input-list-separator-as-item .label-description {
	/* Override default description opacity so we don't have a contrast ratio issue. */
	opacity: 1 !important;
}

/* Hide border when the item becomes the sticky one */
.quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border {
	border-top-style: none;
}

/* Give sticky row the same padding as the scrollable list */
.quick-input-list .monaco-tree-sticky-row {
	padding: 0 5px;
}

/* Hide the twistie containers so that there isn't blank indent */
.quick-input-list .monaco-tl-twistie {
	display: none !important;
}

/* Tree */

.quick-input-tree .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.quick-input-tree .quick-input-tree-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.quick-input-tree .quick-input-tree-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.quick-input-tree .quick-input-tree-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-input-tree .quick-input-tree-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row {
	display: flex;
	align-items: center;
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label,
.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.quick-input-tree .quick-input-tree-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.quick-input-tree .quick-input-tree-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.quick-input-tree .quick-input-tree-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	margin-top: 1px;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	margin-right: 4px;
	/* separate from scrollbar */
}

.quick-input-tree .quick-input-tree-entry .quick-input-tree-entry-action-bar .action-label.always-visible,
.quick-input-tree .quick-input-tree-entry:hover .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .quick-input-tree-entry.focus-inside .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .monaco-list-row.focused .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .monaco-list-row.passive-focused .quick-input-tree-entry-action-bar .action-label {
	display: flex;
}

.quick-input-tree > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-progress-container {
	width: 100%;
	height: 2px;
	overflow: hidden; /* keep progress bit in bounds */
}

.monaco-progress-container .progress-bit {
	width: 2%;
	height: 2px;
	position: absolute;
	left: 0;
	display: none;
}

.monaco-progress-container.active .progress-bit {
	display: inherit;
}

.monaco-progress-container.discrete .progress-bit {
	left: 0;
	transition: width 100ms linear;
}

.monaco-progress-container.discrete.done .progress-bit {
	width: 100%;
}

.monaco-progress-container.infinite .progress-bit {
	animation-name: progress;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
}

.monaco-progress-container.infinite.infinite-long-running .progress-bit {
	/*
		The more smooth `linear` timing function can cause
		higher GPU consumption as indicated in
		https://github.com/microsoft/vscode/issues/97900 &
		https://github.com/microsoft/vscode/issues/138396
	*/
	animation-timing-function: steps(100);
}

/**
 * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
 * that container. Since translateX is relative to the progress bit size, we have to multiple it with
 * its relative size to the parent container:
 * parent width: 5000%
 *    bit width: 100%
 * translateX should be as follow:
 *  50%: 5000% * 50% - 50% (set to center) = 2450%
 * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
 */
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rendered-markdown kbd {
	background-color: var(--vscode-keybindingLabel-background);
	color: var(--vscode-keybindingLabel-foreground);
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: var(--vscode-keybindingLabel-border);
	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
	vertical-align: middle;
	padding: 1px 3px;
}

.rendered-markdown li:has(input[type=checkbox]) {
	list-style-type: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-component.multiDiffEditor {
	background: var(--vscode-multiDiffEditor-background);

	position: relative;

	height: 100%;
	width: 100%;

	overflow-y: hidden;

	> div {
		position: absolute;
		top: 0px;
		left: 0px;

		height: 100%;
		width: 100%;

		&.placeholder {
			visibility: hidden;

			&.visible {
				visibility: visible;
			}

			display: grid;
			place-items: center;
			place-content: center;
		}
	}

	.active {
		--vscode-multiDiffEditor-border: var(--vscode-focusBorder);
	}

	.multiDiffEntry {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;


		.collapse-button {
			margin: 0 5px;
			cursor: pointer;

			a {
				display: block;
			}
		}

		.header {
			z-index: 1000;
			background: var(--vscode-editor-background);

			&:not(.collapsed) .header-content {
				border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
			}

			.header-content {
				margin: 8px 0px 0px 0px;
				padding: 4px 5px;

				border-top: 1px solid var(--vscode-multiDiffEditor-border);

				display: flex;
				align-items: center;

				color: var(--vscode-foreground);
				background: var(--vscode-multiDiffEditor-headerBackground);

				&.shadow {
					box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
				}

				.file-path {
					display: flex;
					flex: 1;
					min-width: 0;

					.title {
						font-size: 14px;
						line-height: 22px;

						&.original {
							flex: 1;
							min-width: 0;
							text-overflow: ellipsis;
						}
					}

					.status {
						font-weight: 600;
						opacity: 0.75;
						margin: 0px 10px;
						line-height: 22px;

						/*
							TODO@hediet: move colors from git extension to core!
						&.renamed {
							color: v ar(--vscode-gitDecoration-renamedResourceForeground);
						}

						&.deleted {
							color: v ar(--vscode-gitDecoration-deletedResourceForeground);
						}

						&.added {
							color: v ar(--vscode-gitDecoration-addedResourceForeground);
						}
						*/
					}
				}

				.actions {
					padding: 0 8px;
				}
			}


		}

		.editorParent {
			flex: 1;
			display: flex;
			flex-direction: column;

			border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
			overflow: hidden;
		}

		.editorContainer {
			flex: 1;
		}
	}
}
/**
 * 디자인 시스템 토큰
 *
 * 변경 시 docs/design-system/tokens.md 도 함께 수정.
 * 색상 raw hex/rgb 사용 금지 (이 파일과 style.css 제외) — npm run lint:tokens 로 검사.
 *
 * 기존 style.css 의 토큰(--primary-color, --text-*, --surface-*, --border-color 등)은
 * 그대로 유지하고, 이 파일은 빠져 있던 토큰만 추가한다.
 */

:root {
  /* ══════════════════════════════════════════════════════════════════════
     @tier seed — 씨앗 (디자인 시스템 2기)
     테마가 바꾸는 유일한 값. 아래 사다리·역할 토큰은 전부 여기서 계산된다.
     ⛔ 화면은 씨앗을 직접 쓰지 않는다 (lint:role 이 막는다).
     상세: docs/design-system/v2-architecture.md
     ══════════════════════════════════════════════════════════════════════ */
  --seed-space-unit: 4px;      /* 간격의 기본 눈금 */
  --seed-density: 1;           /* 화면 밀도 — 0.85 빽빽 · 1.15 넉넉 */
  --seed-radius: 6px;          /* 모서리 기준 (실측: 버튼 79%·입력 54% 가 6px) */
  --seed-font-family: 'Pretendard Variable';   /* 본문 글꼴 — 테마가 서체를 바꾸는 자리 */
  --seed-font-mono: ui-monospace;              /* 등폭 글꼴 */
  --seed-font-size: 14px;      /* 본문 기준 (실측: 판·머리·칸·툴바 100% 가 14px) */
  --seed-font-scale: 1;        /* 글자 크기 배율 */
  --seed-title-weight: 600;    /* 제목 굵기 (실측 48%) */
  --seed-motion: 1;            /* 전환 시간 배율 — 0 이면 애니메이션 없음 */
  --seed-elevation: 1;         /* 그림자 세기 배율 */
  --seed-ambient: 1;           /* 바탕 무늬(글로우) 세기 — 0 이면 무늬 없음 */
  --seed-border-width: 1px;    /* 선 두께 */
  --seed-row-height: 44px;     /* 목록 행 높이 (실측 40%) */

  /* 씨앗에서 곧바로 나오는 단위 — 아래 역할 토큰이 이것으로 계산한다 */
  --u: calc(var(--seed-space-unit) * var(--seed-density));
  /* @tier end */

  /* === Spacing (4px 베이스, rem 단위) === */
  /* ⛔ 씨앗에서 파생한다 — 하드코딩하면 공통 컴포넌트(버튼·목록·모달)가 밀도 씨앗을 안 따라,
     화면 픽셀의 대부분이 테마에서 빠진다(2026-08-29 발견). */

  /* === 페이지/탭 콘텐츠 여백 (상단·좌·우 공통) ===
     설정 탭 등 콘텐츠의 상단·좌·우 여백을 이 토큰 하나로 통일.
     데스크탑 1rem, 좁은 화면(≤768px) 0.5rem 으로 축소. */
  --page-pad-x: calc(1rem * var(--seed-density));

  /* === Border radius === */

  /* === Font family (글꼴 스택 — 단일 진실 원천) ===
     ⛔ 화면 어디서도 글꼴 스택을 다시 적지 않는다. 스택을 그 자리에서 손으로 적으면
        순서 하나만 달라도 그 화면만 다른 글꼴로 그려진다(실사고 2026-08-21:
        MarkdownViewer 가 -apple-system 을 Pretendard 앞에 두어 그 화면만 애플 기본
        글꼴로 렌더). 본문은 상속으로 충분하고, 되돌릴 일이 있으면 var(--font-sans).
     ⛔ 코드·ID·해시·수치 같은 등폭 글자는 반드시 var(--font-mono) — 손으로 적으면
        같은 사이트 안에서 SF Mono / Courier New / Fira Code 가 뒤섞인다
        (실측 2026-08-21: 모노 스택 10종, 총 96곳). */
  /* ⛔ 맨 앞은 **씨앗**이다 — 테마가 서체를 갈아 끼우는 지점(디자인 시스템 2기).
     뒤는 그 글꼴이 없을 때의 사다리이므로 순서를 바꾸지 않는다. */
  --font-sans:
    var(--seed-font-family), 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-mono:
    var(--seed-font-mono), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'D2Coding', 'Nanum Gothic Coding', monospace;

  /* === Font sizes (12px 기본) ===
     ⛔ 이 사다리 밖의 크기를 쓰지 않는다. 밖의 값이 필요해 보이면 사다리에 없는 단이
        정말 필요한 것인지 먼저 따지고, 필요하면 **여기에 단을 추가**한다 — 그 자리에서
        raw 값 + css-ignore 로 빠져나가면 사다리가 이름 없는 값으로 계속 늘어난다. */
  /* 디스플레이 단 — 통계 수치·소개 화면 표제처럼 '읽는 글'이 아닌 큰 글자 전용.
     목록·폼·카드 본문에는 쓰지 않는다. */

  /* === Icon sizes (아이콘·장식 글리프 전용 사다리) ===
     아이콘은 '읽는 글자'가 아니라 **그림**이라 본문 사다리(--font-*)와 축이 다르다.
     FontAwesome 은 font-size 로 크기를 받으므로 여기 단을 쓴다.
     ⛔ 아이콘 크기를 raw px/rem/em 으로 적지 않는다 — em 으로 적으면 부모에 따라
        9.6px·11.52px 처럼 이름 없는 크기가 화면마다 생긴다(실측 2026-08-21). */

  /* === 상대 글자 크기 (부모를 따라가야 하는 조각) ===
     건수 `(12)`·아이디 `#572375`·단위 `14.6MB`·시각처럼 **앞 글자에 곁들이는 조각**은
     절대 크기로 못 박으면 안 된다 — 14px 제목 옆과 11px 라벨 옆이 같은 크기가 돼 어긋난다.
     그렇다고 그때그때 0.8em·0.85em·0.9em·0.95em 을 손으로 적으면(실측 2026-08-21: 비율 6종)
     화면마다 다른 비율이 된다. **비율도 사다리로 못 박는다.** */
  --font-rel-sm: 0.85em;   /* 곁들이는 조각 — 건수·아이디·단위·시각 */
  --font-rel-xs: 0.7em;    /* 아주 작은 표식 — 겹친 화살표 등 */
  --font-rel-code: 0.9em;  /* 본문 속 인라인 코드(code/pre) — 산돌 대비 등폭이 커 보여 한 톤 낮춘다 */

  /* === Font weights === */

  /* === 제목의 자리별 단 (사용자 확정 2026-08-22) ===
     제목은 **자리**에 따라 크기가 다른 게 맞다(표지 44 · 화면 20 · 절 18 · 카드 16 · 행 14).
     ⛔ 어긋나면 안 되는 것은 **굵기와 색**이다 — 실측(2026-08-22) 결과 같은 20px 인데
        600/700 이 섞이고, 같은 14px 행 제목이 600 흰색·600 회색·400 흰색으로 갈려 있었다.
     아래 굵기를 자리마다 못 박고, 제목 색은 **--text-primary 하나**로 한다.
     (회색 제목이 필요하면 그건 제목이 아니라 '곁들이는 글'이다 — --text-secondary 로.) */

  /* === Line heights === */
  --line-none: 1;            /* 버튼/뱃지/단일 줄 컨트롤 */
  --line-snug: 1.2;          /* 밀집 카드/메타 텍스트 */
  --line-tight: 1.25;        /* 기본 빽빽 */
  --line-comfortable: 1.4;   /* 목록/폼 본문 */
  --line-normal: 1.5;        /* 본문 기본 */
  --line-relaxed: 1.7;       /* 긴 본문/안내 */

  /* === 의미 색상 (테마 무관 — 상태 표현) === */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  /* --primary-color, --primary-hover 는 style.css 에 정의됨.
     (구 --success-color 는 --primary 와 값이 겹치는 중복이라 제거 → 성공 의미는 --color-success 로 통합) */

  /* === 분류 강조색 (status 외 카테고리 구분 — 뱃지·라벨·차트) === */
  /* purple·indigo 는 **글자색으로도** 쓰인다(뱃지 soft, 링크). 원래 값은 연한 면
     (--surface-muted #1a1a1a) 위에서 4.40 / 3.90 으로 본문 AA(4.5) 미달이라
     한 단 밝게 올렸다(5.96 / 5.83). 실측 2026-08-21 lint:contrast. */
  --color-purple: #b47cf9;
  --color-indigo: #818cf8;
  --color-orange: #f97316;
  --color-cyan: #06b6d4;
  --color-pink: #ec4899;
  --color-lime: #84cc16;

  /* === 고정 브랜드색 (외부 규정 — 리테마 대상 아님) === */
  --brand-kakao: #fee500;

  /* === 장식색 (일러스트 — 책 메타포) === */
  --deco-book-page: #f5efdc;
  --deco-book-page-line: #d8cfb2;

  /* === 상태 표면 (테마 의존 — 다크 기본) === */
  /* === 화면 바탕 층 ===
     다크는 앱 껍데기(셸·상단바·사이드바·탭바·페이지 판)를 **비워** 바탕의 은은한
     글로우가 그대로 비치게 한다. 라이트는 글로우가 없으므로 지금까지의 면색 그대로.
     ⛔ 카드·드롭다운·모달은 이 토큰을 쓰지 않는다 — 그것들은 바탕 위에 **떠 있어야**
        하므로 불투명(--card-bg / --surface-color)이라야 한다. */
  --chrome-bg: transparent;   /* 껍데기 판 */

  /* 바탕 글로우 — style.css 의 body::before 가 그린다. 알파는 0.10 을 넘기지 않는다.
     ⛔ 색을 박아 두지 않는다 — **주제색(씨앗)에서 파생**한다. 예전엔 초록이 박혀 있어
     테마를 바꿔도 바탕만 초록으로 남았다(사용자 지적 2026-08-29). */
  --app-ambient:
    radial-gradient(circle at 18% 22%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.10), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(var(--seed-brand-rgb, 16, 185, 129), 0.07), transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(99, 102, 241, 0.05), transparent 34%);

  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(255, 255, 255, 0.08);
  /* 목록 테이블 교대 행(zebra) 배경 — 검은 배경 위에서 또렷이 보이는 수준 */
  --surface-stripe: rgba(255, 255, 255, 0.05);

  /* === 의미색 연한 배경 (뱃지·알림 박스 틴트·선택 칩) === */
  --surface-primary-soft: rgba(var(--seed-brand-rgb, 16, 185, 129), 0.12);
  /* 손잡이 자리처럼 **한 점으로 눈을 모으는** 자리에 쓰는 한 단 진한 브랜드 면.
     ⛔ 면 전체를 이 값으로 채우지 않는다 — 옅은 값에서 이 값으로 번지게 해서 쓴다. */
  --surface-primary-mid: rgba(var(--seed-brand-rgb, 16, 185, 129), 0.3);
  --surface-warning-soft: rgba(245, 158, 11, 0.15);
  --surface-danger-soft: rgba(239, 68, 68, 0.10);
  /* 브랜드의 mid 와 같은 단 — 옅은 틴트로는 수면·손잡이가 안 읽히는 작은 자리에 쓴다.
     ⛔ 판·카드 같은 넓은 면을 이 값으로 채우지 않는다(brand 의 mid 와 같은 제약). */
  --surface-warning-mid: rgba(245, 158, 11, 0.3);
  --surface-danger-mid: rgba(239, 68, 68, 0.3);
  --surface-info-soft: rgba(59, 130, 246, 0.12);
  --surface-success-soft: rgba(34, 197, 94, 0.12);
  --surface-purple-soft: rgba(168, 85, 247, 0.12);
  --surface-indigo-soft: rgba(99, 102, 241, 0.12);
  --surface-orange-soft: rgba(249, 115, 22, 0.12);
  --surface-cyan-soft: rgba(6, 182, 212, 0.12);
  --surface-pink-soft: rgba(236, 72, 153, 0.12);
  --surface-lime-soft: rgba(132, 204, 22, 0.12);

  /* === 키워드 검색 형광 표시 (사이트 전역 단일 진실) ===
     문서/상품/회사 카드, 목록(HighlightText), 메타편집기, 비교, 터미널 등
     모든 키워드 형광처리가 이 토큰 하나만 참조한다 → 여기서만 고치면 전역 반영.
     솔리드는 과하므로 워닝색 반투명 틴트. 다크 기본값(밝은 워닝색이라 조금 옅게). */
  --highlight-mark-bg: color-mix(in srgb, var(--color-warning) 32%, transparent);

  /* === 중립 경계선 (slate 반투명 — 테마 무관, 미세 구분선) === */
  --border-subtle: rgba(148, 163, 184, 0.15);

  /* === 스크롤바 (테마 의존 — 다크 기본) === */
  --scrollbar-thumb: #4a5568;
  --scrollbar-thumb-hover: #718096;
  --scrollbar-track: rgba(255, 255, 255, 0.05);

  /* === 고정색 — 컬러/accent 배경 위 텍스트·아이콘 (테마 무관) === */
  /* === 면 위의 잉크 (on-color) ===
     채워진 색 면(primary 버튼·의미색 뱃지) 위에 얹는 글자·아이콘 색.
     ⛔ 면 위 잉크로 `--background-color` 나 `--color-white` 를 빌려 쓰지 않는다 —
        이름이 뜻을 못 담고, 배경 토큰을 손대면 엉뚱하게 글자색이 따라 바뀐다.
        잉크는 이 토큰 하나로만 바꾼다(전 화면 버튼·뱃지·아바타가 한 번에 따라온다).

     ✅ **잉크는 흰색 하나로 끝났다 — 고칠 곳은 언제나 면이다.**
        다크의 원색(브랜드 #10b981 2.54 · 주황 2.15 · 연초록 2.28 · 빨강 3.76 · 파랑 3.68)
        위에 흰 글씨를 얹으면 본문 AA(4.5)에 못 미친다. 어두운 잉크로 바꿔 보았으나
        **사용자가 밝은 쪽을 택했다**(2026-08-21). 그래서 처방은 잉크가 아니라 면이다 —
        브랜드는 2026-08-29 에, 나머지 의미색·보조색은 2026-09-03 에 **한 단 깊게**
        갔다(`--bg-<의미>`, 씨앗에서 color-mix 56% + 검정 44%). 실측 6.07~9.06.
        ⛔ 그래서 `lint:contrast` 의 알려진 예외 목록은 **비어 있다.** 채워진 면 위 흰
           글씨가 다시 걸리면 그것은 예외가 아니라 **면을 잘못 고른 것**이다 —
           `--ink-<의미>`(잉크)를 면으로 쓰지 않았는지부터 본다.
     라이트는 의미색이 원래 깊어(5.02~6.47) 원색 그대로 면이 된다. */
  --on-solid: #ffffff;    /* 채워진 의미색(danger/warning/info/success) 면 위 */

  --color-white: #ffffff;
  --color-black: #000000;

  /* === RGB 트리플 — 투명도 변종용 (rgba(var(--xxx-rgb), α)) ===
     의미색의 반투명 테두리·오버레이·glow 를 토큰 기반으로 표현. 색상값은
     위 hex 토큰과 동기 유지할 것. */
  --primary-rgb: var(--seed-brand-rgb, 16, 185, 129);
  /* 채워진 브랜드 면의 기본값 — 테마 블록이 각자 덮어쓴다(style.css). 여기 값이 없으면
     data-theme 이 붙기 전 한 순간 면이 통째로 사라진다. */
  --surface-brand: color-mix(in srgb, rgb(var(--seed-brand-rgb, 16, 185, 129)) 56%, #000 44%);
  /* 의미색 면도 같은 폴백을 갖는다 — 테마 블록이 각자 덮어쓴다(style.css). */
  --surface-danger: color-mix(in srgb, var(--color-danger) 56%, #000 44%);
  --surface-warning: color-mix(in srgb, var(--color-warning) 56%, #000 44%);
  --surface-success: color-mix(in srgb, var(--color-success) 56%, #000 44%);
  --surface-info: color-mix(in srgb, var(--color-info) 56%, #000 44%);
  --surface-purple: color-mix(in srgb, var(--color-purple) 56%, #000 44%);
  --surface-indigo: color-mix(in srgb, var(--color-indigo) 56%, #000 44%);
  --surface-orange: color-mix(in srgb, var(--color-orange) 56%, #000 44%);

  /* === 포커스 링 === */
  --ring-focus: 0 0 0 3px rgba(var(--seed-brand-rgb, 16, 185, 129), 0.18);

  /* 초점 테두리 — 키보드로 옮겨 다닐 때 「지금 어디인지」를 보이게 한다(WCAG 2.4.7).
     ⛔ 이 값을 화면마다 손으로 적지 않는다. 대부분의 컨트롤은 이미 자기 방식(테두리 색·그림자)으로
        초점을 알리고 있고(2026-08-22 실측 615개 중 610개), 이 토큰은 **아무 표시도 없는 것**에만
        걸리는 안전망(style.css 의 :where(...) 규칙)에서 쓰인다. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.18);

  /* === Shadows === */
  --shadow-sm: 0 calc(1px * var(--seed-elevation)) calc(2px * var(--seed-elevation)) rgba(0, 0, 0, 0.08);
  --shadow-md: 0 calc(4px * var(--seed-elevation)) calc(12px * var(--seed-elevation)) rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 calc(8px * var(--seed-elevation)) calc(20px * var(--seed-elevation)) rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 calc(18px * var(--seed-elevation)) calc(45px * var(--seed-elevation)) rgba(15, 23, 42, 0.45);

  /* === Z-index 단계 ===
     ⛔ **손으로 숫자를 쓰지 않는다.** 2026-09-03 실측: raw z-index 94건 중 16건이 전역 층인데
        사다리에 그 단이 없어서 1100·1500·2000·2500·9999 같은 값을 손으로 적고 있었다.
        같은 뜻(모달 뒷판)이 다섯 값으로 갈려 있었고, `--z-modal-backdrop` 은 **쓰는 곳이 0곳**이었다.
        단이 없으면 숫자를 쓰지 말고 **여기에 단을 만든다.** */
  /* 판 안에서 떠 있는 조작부(분리대 손잡이 무리·격자 고르개).
     본문 위·앱 껍데기(1000~) 아래 — 판을 벗어나지 않는 것들이다. */
  --z-pane-control: 100;
  /* 판 안에서 쓰는 뒷판 — **앱 껍데기(상단바·사이드바)를 덮지 않는다.**
     ⛔ 모달 뒷판(--z-modal-backdrop 9000)과 다른 것이다: 그쪽은 화면 전체를 덮어 껍데기까지
        함께 흐리고, 이쪽은 본문만 덮어 껍데기가 선명하게 남는다(실측 2026-09-03에 두 모습을
        나란히 찍어 확인). 어느 쪽인지는 **그 판이 정한다** — 값으로 정하지 말 것. */
  --z-pane-backdrop: 1000;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  /* 좌/우 분할 분리대(드래그 핸들 + < = > 토글 버튼).
     - sticky 헤더(1020) 의 negative margin 이 분리대를 덮지 않도록 그보다 위
     - 단 앱 크롬(--z-fixed=1030)보다는 아래 — 안 그러면 탑바 드롭다운이 분리대 뒤로 깔림 */
  --z-splitter: 1021;
  --z-fixed: 1030;
  /* 모바일 내비게이션 드로어(사이드바) + 백드롭.
     반드시 앱 크롬(--z-fixed=1030)보다 위 — 그렇지 않으면 드로어가 탑바에 가려진다.
     백드롭은 탑바 위·드로어 아래에 와서 탑바까지 함께 어둡게 덮는다. */
  --z-drawer-backdrop: 1035;
  --z-drawer: 1040;
  /* 껍데기(상단바) 위로 여는 메뉴 — 드로어(1040)보다도 위라야 모바일에서 안 깔린다.
     떠 있는 것(9000~)보다는 아래 — 모달이 열리면 메뉴는 그 밑으로 들어가야 한다. */
  --z-chrome-menu: 1100;
  --z-chrome-submenu: 1101;   /* 그 메뉴가 여는 하위 메뉴 — 부모 바로 위 한 단 */
  /* 분할 드래그 중 iframe/PDF 가 마우스 이벤트 가로채지 못하게 깔리는 overlay.
     반드시 --z-splitter 보다 낮아야 한다 — 그렇지 않으면 mousedown 직후 Vue 리렌더로
     overlay 가 < = > 버튼 위를 덮어, mouseup 이 overlay 에서 발생 → click 이 공통 조상에서
     fire 되어 버튼 @click 이 호출되지 않는 회귀가 발생한다 (#2026-05-21 발견). */
  --z-resize-overlay: 5;
  /* 모달의 뒷판 — `inset: 0` 로 화면을 덮고 --bg-backdrop 를 칠하는 그 층이다.
     ⛔ 도메인 모달이 제 오버레이를 손으로 만들며 1000·1500·2000·2500·10000 을 적어 두어
        이 단이 오래 비어 있었다(2026-09-03에 6곳을 여기로 모았다). 새 오버레이도 여기다. */
  --z-modal-backdrop: 9000;
  --z-modal: 10000;
  /* 트리거에 붙는 팝오버(AppPopover). body 로 텔레포트되므로 페이지의 다른 레이어와 직접 겨룬다 —
     분할 화면 분리대(1021)·앱 크롬(1030)보다 위여야 메타 내용보기 3단에서 안 깔린다
     (2026-08-02 화면 검수에서 팝오버가 --z-dropdown(1000) 이라 뒤로 깔리는 것을 확인). */
  --z-popover: 11000;
  --z-toast: 12000;
  --z-tooltip: 13000;
  /* 본문 바로가기 — 초점을 받는 순간 무엇에도 가리면 안 되므로 가장 위. */
  --z-skip-link: 14000;

  /* === 전환 === */

  /* === 백드롭 === */
  --backdrop-bg: rgba(15, 23, 42, 0.55);
  --backdrop-blur: blur(4px);

  /* === 컴포넌트 크기 (버튼/입력 통일) === */
  --control-height-xs: calc(22px * var(--seed-density));
  --control-height-sm: calc(26px * var(--seed-density));
  --control-height-md: calc(32px * var(--seed-density));
  --control-height-lg: calc(40px * var(--seed-density));

  /* === 토글 스위치 (자체 위젯 — 트랙·엄지 산술이 맞물려 있으므로 한 묶음으로 토큰화) ===
     트랙 안에 엄지가 (track-h - thumb)/2 = 2px 패딩을 두고 들어가는 비율 유지.
     md: 텍스트/스타일 토글(추출 상태바). sm: on/off 토글(규칙 탭 등). */

  /* 앱 셸 상단 바 높이 — 탑바(Topbar)와 사이드바 헤더(Sidebar header)가
     공유해 두 영역의 아래 구분선이 같은 높이에서 만나도록 한다. */
  --app-header-height: 57px;

  /* === 차트 높이 ===
     모니터링 패널 안에 끼워 넣는 추이 차트. 값 자체보다 '패널마다 제각각이 아닐 것'이 중요하다
     (파싱 모니터링의 시간대별 차트가 쓰던 150px 을 기준으로 삼았다). */
  --chart-height-sm: 150px;
  --chart-height-md: 260px;
  /* 차트가 그 판의 «주인공»인 자리(통계 화면·상세의 큰 차트).
     ⛔ 실측 2026-09-04: 옮기기 전 화면들이 160·180·280·300·320·350·360px 로 **일곱 갈래**를
        손으로 적고 있었다. 세 단(sm·md·lg)으로 모은다 — 가장 크게 움직이는 자리도 40px 이다. */
  --chart-height-lg: 320px;
  /* 스파크라인 — 값 옆에 곁들이는 초소형 추이. 글자 한 줄보다 낮아야 줄을 밀지 않는다. */
  --chart-height-spark: 12px;
  /* 카드 안에서 추이 자체가 주인공인 자리(사용량 모니터링의 최근 60분). 축은 여전히 없다. */
  --chart-height-spark-lg: 2.5rem;

  /* === 달력 ===
     월간 달력이 화면 높이를 채우되, 화면이 낮아도 한 달이 뭉개지지 않을 최소 높이.
     6주 × 한 칸 최소 70px 기준(칸 안에 날짜 + 파비콘 한 줄이 들어가는 크기). */

  /* === 목록 화면 (list-screen) === */
  /* 테이블 행은 고정 높이. (카드는 내용에 따른 가변 높이 — 측정형 가상 스크롤) */

  /* === 장해 도해 부위색 (참조자료 > 장해) ===
     장해분류표 13개 신체부위를 서로 구분하는 분류색. 상태색(danger/warning/…)이 아니라
     **분류색**이라 의미가 없다 — 이웃한 부위끼리 헷갈리지 않는 것만이 목적이다.
     ⚠️ 색상환을 고르게 돌리되 채도를 낮췄다. 원색 13개를 몸 위에 얹으면 도해가 아니라
        색표가 되고, 값 배지(강조색)가 부위색에 묻힌다.
     ⚠️ 실제 칠은 이 색을 몸통색과 섞어 쓴다(선택 전 옅게 → 선택 시 진하게).
        --disability-zone-* 가 그 섞는 비율이다. */
  --disability-part-1: #a9737a;
  --disability-part-2: #be9469;
  --disability-part-3: #6e97a0;
  --disability-part-4: #93a074;
  --disability-part-5: #7fa08c;
  --disability-part-6: #7c8fbc;
  --disability-part-7: #9c88b8;
  --disability-part-8: #6e9ab4;
  --disability-part-9: #be9b77;
  --disability-part-10: #b683a6;
  --disability-part-11: #79ab92;
  --disability-part-12: #bc857c;
  --disability-part-13: #8b949e;
  /* 몸통 바탕 — 어두운 배경 기준. 라이트에서 재보정한다. */
  --disability-figure: #2e343a;
  --disability-figure-line: #8b939c;
  /* 섞는 비율 — 어두운 배경에서는 같은 비율이 더 옅게 보여 한 단계씩 올린다. */
  --disability-zone-rest: 36%;
  --disability-zone-hover: 50%;
  --disability-zone-on: 62%;
  --disability-zone-active: 78%;

  /* ══════════════════════════════════════════════════════════════════════
     @tier role — 역할 토큰 (디자인 시스템 2기)
     ⭐ **화면이 쓸 수 있는 유일한 어휘.** 값은 2026-08-29 실측(28화면·6,369요소)에서 왔다.
     ⛔ 여기 없는 것이 필요하면 화면에서 우회하지 말고 이 표에 추가한다.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── 여백 — 자리가 정한다 ── */
  --pad-row: calc(var(--u) * 2) calc(var(--u) * 4);      /* 8 16  — 목록 행·항목 (실측 66%) */
  --pad-row-dense: calc(var(--u) * 2) calc(var(--u) * 3); /* 8 12  — 판 안쪽 줄 (실측 최다) */
  --pad-card: calc(var(--u) * 4);                         /* 16    — 카드 본문 */
  --pad-tile: calc(var(--u) * 3);                         /* 12    — 통계 타일·작은 카드 (실측 최다) */
  --pad-card-dense: calc(var(--u) * 2) calc(var(--u) * 3); /* 8 12  — 빽빽 모드 카드(목록 카드 compact·도움말 카드) */
  --pad-hero: calc(var(--u) * 6);                         /* 24    — 표지·안내처럼 한 장으로 서는 큰 카드 */
  --pad-panel: calc(var(--u) * 3) calc(var(--u) * 4);     /* 12 16 — 판·패널 (실측 100%) */
  --pad-tab: calc(var(--u) * 3) calc(var(--u) * 4);       /* 12 16 — 탭 (실측 41%) */
  --pad-control: 0 calc(var(--u) * 3);                    /* 0 12  — 입력·버튼 (높이는 --h-control-*) */
  --pad-badge: calc(var(--u) * 0.5) calc(var(--u) * 2);   /* 2 8   — 뱃지 (실측 61%) */
  --pad-cell: calc(var(--u) * 1) calc(var(--u) * 2);      /* 4 8   — 표 칸 */
  --pad-modal: calc(var(--u) * 4) calc(var(--u) * 5);     /* 16 20 — 모달 본문 */
  --pad-menu: calc(var(--u) * 1);                         /* 4     — 메뉴 껍데기(항목 둘레 여백) */
  --pad-menu-item: calc(var(--u) * 1.5) calc(var(--u) * 2.5); /* 6 10 — 메뉴 한 항목 */
  /* 화면 좌우 바깥 여백 — 좁은 화면에서 함께 줄어든다.
     ⛔ 예전엔 `--pad-page: var(--page-pad-y) var(--page-pad-x)` 라는 두 값짜리가 있었는데
        **`--page-pad-y` 는 정의된 적이 없었다.** 그래서 `padding: var(--pad-page)` 는
        값이 통째로 비어 실제로는 **0px** 이었다(2026-08-29 뜬 화면 실측). 조용히 무너지는
        토큰은 없느니만 못하므로 지웠다 — 세로 여백이 필요하면 --space-* 사다리에서 고른다. */
  --pad-page-x: var(--page-pad-x);

  /* ── 사이(gap·margin) — **무엇과 무엇 사이인가**로 부른다 ──
     ⛔ 숫자로 된 단(`--sp-2` 따위)은 없다. 숫자를 고를 수 있으면 화면마다 갈리고,
        테마도 "행 간격만 넓히기"를 못 한다(2026-08-29 사용자 지적). */
  --gap-glyph: calc(var(--u) * 1);    /* 4  — 붙어 다니는 것 사이(아이콘과 글자, 작업 아이콘) */
  --gap-overlap: calc(var(--u) * -2); /* -8 — **겹쳐 세우는 것**의 겹침(아바타 무더기).
                                            ⛔ 화면마다 -8·-6 으로 갈려 있던 것을 모았다(2026-09-03). */
  --gap-inline: calc(var(--u) * 2);   /* 8  — 한 줄 안 이웃(라벨과 값, 탭, 뱃지) */
  --gap-stack: calc(var(--u) * 3);    /* 12 — 세로로 쌓인 덩어리 사이 */
  --gap-group: calc(var(--u) * 4);    /* 16 — 묶음(구획) 사이 */
  --gap-pane: calc(var(--u) * 2);     /* 8  — **탭 판 안의 블록 사이**. 관리자 설정의 모든 탭이 이 값이다
                                             (실측 2026-08-29: 다른 탭 전부 8px 인데 새 탭만 16px 이었다) */
  --gap-band: calc(var(--u) * 6);     /* 24 — 화면 띠 사이 */
  --gap-page: calc(var(--u) * 8);     /* 32 — 가장 넓은 자리 */

  /* ── 안쪽(padding) — **어떤 그릇인가**로 부른다 ──
     자리가 정해진 그릇은 아래 자리 토큰 하나로 끝낸다(--pad-row·--pad-card …).
     자리를 특정할 수 없는 그릇만 아래 네 단을 쓴다. */
  --space-tight: calc(var(--u) * 1);    /* 4  — 아주 작은 칸 */
  --space-snug: calc(var(--u) * 2);     /* 8  — 작은 상자 */
  --space-cozy: calc(var(--u) * 3);     /* 12 — 보통 상자 */
  --space-roomy: calc(var(--u) * 4);    /* 16 — 큰 상자 */
  --space-band: calc(var(--u) * 6);     /* 24 — 빈 상태·표지처럼 넓은 자리 */
  --space-wide: calc(var(--u) * 8);     /* 32 — 가장 넓은 자리 */

  /* ── 모서리 ── */
  --radius-control: var(--seed-radius);                   /* 6   — 버튼·입력·탭 */
  --radius-card: calc(var(--seed-radius) + 2px);          /* 8   — 카드·판 (실측 지배값) */
  --radius-float: calc(var(--seed-radius) * 2);           /* 12  — 모달·드롭다운·팝오버 */
  --radius-badge: calc(var(--seed-radius) - 2px);         /* 4   — 뱃지 (실측 63%) */
  --radius-pill: 999px;                                   /* 칩·원형 */

  /* ── 글자 — 10단. ⛔ 이 밖의 크기는 없다 ──
     1기의 11단에서 11px 를 12px 로 접었다(205곳 — 11·12 는 같은 자리에서 갈려 쓰였다).
     13·14 는 쓰임이 뚜렷이 갈려 둘 다 남긴다(실측: 버튼 13px 66% · 표 칸 14px 100%).
     제목은 크기 토큰 + --weight-title 로 만든다 — 행 제목 = body, 카드 제목 = lead, 화면 제목 = title. */
  --size-meta: calc(12px * var(--seed-font-scale));         /* 곁들이는 글·건수·시각·뱃지 */
  --size-label: calc(13px * var(--seed-font-scale));        /* 버튼·라벨·힌트·설명 (실측 66~100%) */
  --size-body: calc(var(--seed-font-size) * var(--seed-font-scale)); /* 14 — 본문·표 칸 (실측 100%) */
  --size-lead: calc(16px * var(--seed-font-scale));         /* 카드 제목·머리글 */
  --size-title-sm: calc(18px * var(--seed-font-scale));     /* 소절 제목 */
  --size-title: calc(20px * var(--seed-font-scale));        /* 화면 제목 */
  --size-title-lg: calc(24px * var(--seed-font-scale));     /* 큰 표제 */
  --size-display-sm: calc(28px * var(--seed-font-scale));   /* 통계 수치 (실측 100%) */
  --size-display: calc(32px * var(--seed-font-scale));      /* 절 표제 */
  --size-display-lg: calc(44px * var(--seed-font-scale));   /* 표지 */
  --weight-title: var(--seed-title-weight);   /* 600 (실측 48%) */
  --weight-label: 500;                        /* 버튼·라벨 (실측 84%) */
  --weight-body: 400;
  --weight-strong: 700;                       /* 통계 수치 (실측 100%) */

  /* ── 잉크 (글자·아이콘) ── */
  --ink-primary: var(--text-primary);
  --ink-secondary: var(--text-secondary);
  --ink-muted: var(--text-tertiary);
  --ink-brand: var(--primary-color);
  --ink-on-solid: var(--on-solid);

  /* ── 면 ── */
  --bg-page: var(--surface-color);
  --bg-card: var(--card-bg);
  --bg-float: var(--surface-solid);
  --bg-field: var(--surface-muted);
  --bg-subtle: var(--surface-stripe);
  --bg-brand: var(--surface-brand);   /* 채워진 브랜드 면 — 그 위 글자는 --ink-on-solid */
  /* 채워진 의미색 면 — 그 위 글자는 --ink-on-solid.
     ⛔ --ink-danger 같은 **잉크를 면으로 쓰지 않는다**(다크에서 흰 글자가 무너진다). */
  --bg-danger: var(--surface-danger);
  --bg-warning: var(--surface-warning);
  --bg-success: var(--surface-success);
  --bg-info: var(--surface-info);
  --bg-purple: var(--surface-purple);
  --bg-indigo: var(--surface-indigo);
  --bg-orange: var(--surface-orange);
  --bg-chrome: var(--chrome-bg);      /* 껍데기 판 — 셸·상단바·사이드바·탭바(다크에서 비운다) */

  /* ── 의미 잉크 — 상태를 말하는 글자·아이콘 ──
     ⛔ 이 이름 하나로 글자·테두리·채움을 다 쓴다(값이 하나이므로). 연한 면은 --bg-*-soft 다. */
  --ink-danger: var(--color-danger);

  /* ── 사용자가 고른 임의 색을 «잉크»로 쓸 때 (ToDo 태그 등) ──
     의미색 12종은 라이트에서 한 단 어둡게 재보정되지만(아래 라이트 블록), **DB 에 저장된
     태그 hex 는 그 보정을 못 받는다.** 그래서 그 색을 잉크로 쓰는 자리는 이 토큰을 거친다.
     ⛔ 여기서 색을 **완성해 주지는 못한다** — 커스텀 속성의 `var()` 는 «적은 자리»에서
     풀리므로 `:root` 에 `var(--_tag-color)` 를 적으면 그 자리에 그 색이 없어 빈 값이 된다.
     그래서 «재료»만 둔다: 쓰는 쪽이 제 색과 함께 color-mix 로 조합한다.
       color-mix(in srgb, var(--_tag-color) var(--tag-ink-amt), var(--tag-ink-shade))
     ⛔ 다크는 그대로다(100% + transparent) — 검은 바탕 위에서는 원색이 오히려 잘 읽힌다
     (실측 2026-09-05: 태그 면이 그 색 14% 를 #050505 위에 얹은 것이라 원색이 선명.
     지금 쓰는 세 태그는 에러 4.85 · 정보 4.88 · 경고 7.91 로 모두 AA 를 넘는다).
     ⚠️ 다만 **아주 어두운 태그색을 새로 만들면 다크에서 걸린다**(계산: 남색 #334155 는 1.88).
     그때는 잉크를 흰색 쪽으로 섞어야 한다 — 여덟 색이 모두 넘으려면 65% 가 필요하지만
     그러면 지금 색들이 바래므로, 실제로 그런 태그가 생겼을 때 그 색만 놓고 다시 정한다.
     이 자리는 뜬 화면에서 재는 검사(lint:contrast·lint:screens)가 지킨다 — 오늘부터 CI 가 돈다. */
  --tag-ink-amt: 100%;
  --tag-ink-shade: transparent;
  --ink-danger-hover: var(--color-danger-hover);
  --ink-warning: var(--color-warning);
  --ink-warning-hover: var(--color-warning-hover);
  --ink-success: var(--color-success);
  --ink-success-hover: var(--color-success-hover);
  --ink-info: var(--color-info);
  --ink-info-hover: var(--color-info-hover);
  --ink-brand-hover: var(--primary-hover);

  /* ── 분류 잉크 — 상태가 아니라 '갈래'를 나눌 때 (차트 계열·태그 종류) ── */
  --ink-accent-indigo: var(--color-indigo);
  --ink-accent-purple: var(--color-purple);
  --ink-accent-orange: var(--color-orange);
  --ink-accent-cyan: var(--color-cyan);
  --ink-accent-lime: var(--color-lime);
  --ink-accent-pink: var(--color-pink);

  /* ── 면 — 상태·틴트 ── */
  --bg-hover: var(--surface-hover);
  --bg-active: var(--surface-active);
  --bg-brand-vivid: var(--primary-color);   /* 글자를 얹지 않는 브랜드 채움(띠·점·진행) — 원색 그대로 */
  /* 그라데이션의 두 번째 색 — 한 단 밝은 브랜드. ⛔ 예전엔 틸(#2dd4bf)이 박혀 있어
     테마를 바꿔도 그 자리만 청록으로 남았다(2026-08-29). 씨앗에서 뽑는다. */
  --bg-brand-lift: color-mix(in srgb, rgb(var(--seed-brand-rgb, 16, 185, 129)) 55%, #ffffff 45%);
  --bg-brand-soft: var(--surface-primary-soft);
  --bg-brand-mid: var(--surface-primary-mid);
  --bg-danger-soft: var(--surface-danger-soft);
  --bg-danger-mid: var(--surface-danger-mid);
  --bg-warning-soft: var(--surface-warning-soft);
  --bg-warning-mid: var(--surface-warning-mid);
  --bg-success-soft: var(--surface-success-soft);
  --bg-info-soft: var(--surface-info-soft);
  --bg-accent-indigo-soft: var(--surface-indigo-soft);
  --bg-accent-purple-soft: var(--surface-purple-soft);
  --bg-accent-orange-soft: var(--surface-orange-soft);
  --bg-accent-cyan-soft: var(--surface-cyan-soft);
  --bg-accent-lime-soft: var(--surface-lime-soft);
  --bg-accent-pink-soft: var(--surface-pink-soft);

  /* ── 선 색 — 테두리를 '다른 색'으로 그릴 때 (모양은 --line-strong/soft 가 갖는다) ── */
  --line-color: var(--border-color);
  --line-color-subtle: var(--border-subtle);

  /* ── 껍데기·떠 있는 것의 면과 흐림 ── */
  --bg-page-alt: var(--surface-color-secondary);   /* 판 안의 한 단 다른 바탕 */
  --bg-sticky: var(--sticky-bg);                   /* 스크롤해도 붙어 있는 줄 */
  /* 반투명 면 — 스크롤 통 안에서 내용 **위에 떠 있으면서도** 아래가 비쳐야 하는 자리
     (탭 바의 좌우 스크롤 화살표). 불투명하면 그 밑을 지나는 내용이 뚝 끊겨 보이고,
     완전 투명하면 글자와 겹쳐 읽히지 않는다. 면색은 판을 따라가므로 테마가 알아서 바뀐다. */
  --bg-veil: color-mix(in srgb, var(--bg-page) 78%, transparent);
  --blur-sticky: var(--sticky-blur);
  --bg-backdrop: var(--backdrop-bg);               /* 모달 뒤를 덮는 막 */
  --blur-backdrop: var(--backdrop-blur);
  --bg-scroll-thumb: var(--scrollbar-thumb);
  --bg-scroll-thumb-hover: var(--scrollbar-thumb-hover);
  --bg-scroll-track: var(--scrollbar-track);
  --bg-mark: var(--highlight-mark-bg);             /* 찾은 낱말에 치는 형광 */
  --bg-paper: var(--color-white);                  /* 문서 종이 — 테마와 무관하게 흰 바탕 */

  /* ── 잉크 (계속) ── */
  --ink-inverse: var(--color-white);               /* 짙은 면 위 글자 */
  --ink-brand-rgb: var(--seed-brand-rgb);          /* rgba(var(--ink-brand-rgb), α) 용 */
  --ink-kakao: var(--brand-kakao);                 /* 외부 브랜드색 — 그쪽이 정한 값이다 */
  --ink-black: var(--color-black);                 /* 검정 그 자체가 필요한 자리(카메라 화면 등) */

  /* ── 상태 카드의 옅은 면·선 — 테마마다 값이 갈리므로 여기 남는다(화면에 raw 색을 적지 않기 위해) ── */
  --bg-status-ok: var(--company-card-success-bg);
  --line-status-ok: var(--company-card-success-border);
  --bg-status-fail: var(--company-card-failed-bg);
  --line-status-fail: var(--company-card-failed-border);

  /* ── 그 밖 — 테마마다 값이 갈려 여기 남는다 ── */
  --blur-topbar: var(--topbar-blur);
  --shadow-card-hover: var(--card-shadow-hover);
  --bg-thumb: var(--thumb-bg);          /* 카탈로그 표지 자리 */
  --bg-bubble: var(--chat-bubble-bg);   /* 채팅 말풍선 */

  /* ── 높이 (계속) ── */
  --h-control-xs: var(--control-height-xs);
  --h-app-header: var(--app-header-height);
  --h-chart-sm: var(--chart-height-sm);
  --h-chart-md: var(--chart-height-md);
  --h-chart-lg: var(--chart-height-lg);
  --h-chart-spark: var(--chart-height-spark);
  --h-chart-spark-lg: var(--chart-height-spark-lg);

  /* ── 선 ── */
  --line-soft: var(--seed-border-width) solid var(--border-subtle);
  --line-strong: var(--seed-border-width) solid var(--border-color);
  --line-w: var(--seed-border-width);                    /* 1px — 색이 다른 테두리를 그릴 때의 두께 */
  --line-w-thick: calc(var(--seed-border-width) * 2);    /* 2px — 선택·활성 강조 */
  --line-accent: calc(var(--seed-border-width) * 3);     /* 3px — 왼쪽 강조 띠 */

  /* ── 동작·고도 ── */
  --motion-fast: calc(0.12s * var(--seed-motion));
  --motion-base: calc(0.2s * var(--seed-motion));
  --motion-slow: calc(0.3s * var(--seed-motion));   /* 펼침·접힘처럼 큰 움직임 */
  --shadow-card: var(--card-shadow);
  --shadow-float: var(--shadow-lg);


  /* ── 아이콘 — 8단. 1기 11단에서 접었다(8→10 · 12→14 · 40·64→48, 총 39곳) ──
     ⛔ 곁들이는 아이콘은 옆 글자보다 커지지 않는다 → 되도록 --icon-inline 을 쓴다. */
  --icon-inline: 1em;      /* 글자를 따라간다 — 라벨·버튼 안 (가장 권장) */
  --icon-marker: 0.625rem; /* 10px — 뱃지 위 점·미세 표식 (실측 최다) */
  --icon-label: 0.875rem;   /* 14px — 버튼·라벨 옆 */
  --icon-toolbar: 1rem;     /* 16px — 툴바·탭 */
  --icon-header: 1.25rem;   /* 20px — 머리·카드 */
  --icon-lead: 1.5rem;      /* 24px — 강조 */
  --icon-empty: 2rem;      /* 32px — 빈 목록 안내 */
  --icon-hero: 3rem;       /* 48px — 표지·큰 빈 상태 */

  /* ── 상태·분류 색 (화면이 직접 쓴다) ──
     정의는 위 의미 블록에 있고, 여기서는 '역할 어휘에 속한다'는 것만 선언한다.

     ⛔ 이 주석 안에서 주석 여는 표시를 **또 쓰지 않는다** — CSS 주석은 중첩되지 않는다.
        한때 아래 「장해 도해 팔레트」 설명이 주석을 다시 열고 그 끝의 닫는 표시가 **바깥 주석을
        닫아버려**, 뒤따르던 @tier role-also 줄들이 살아 있는 CSS 가 되었다. 파서는 `@tier` 를
        at-rule 로 보고 **다음 `;` 까지 통째로 삼켰고**, 그 `;` 이 하필 `--h-row: …;` 의 끝이라
        **`--h-row` 가 런타임에 아예 없었다**(2026-09-04 뜬 화면에서 발견 — `getPropertyValue('--h-row')` 가 빈 문자열).
        화면도 콘솔도 조용했다: `var(--h-row)` 를 쓴 자리는 그 속성만 사라져 기본값으로 흘렀다.

     @tier role-also: --z-dropdown --z-sticky --z-splitter --z-fixed --z-drawer --z-drawer-backdrop
     @tier role-also: --z-modal --z-modal-backdrop --z-popover --z-toast --z-tooltip --z-skip-link --z-resize-overlay
     @tier role-also: --font-mono --font-sans --line-none --line-snug --line-tight

     장해 도해 팔레트 — 잔재가 아니라 **도메인 어휘**다. `partColor(no)` 가 이름을 코드로
     조합해 부르고(`--disability-part-${no}`), DisabilityBodyFigure 와 ReferenceDisabilityPanel
     **두 컴포넌트**가 같은 색을 써야 하므로 전역에 있어야 한다(2026-08-30 확인).
     @tier role-also: --disability-figure --disability-figure-line
     @tier role-also: --disability-zone-rest --disability-zone-hover --disability-zone-on --disability-zone-active
     @tier role-also: --line-comfortable --line-normal --line-relaxed
     @tier role-also: --ring-focus --ring-danger
     @tier role-also: --font-rel-sm --font-rel-xs --font-rel-code
     @tier role-also: --shadow-sm --shadow-md --shadow-modal
     @tier role-also: --topbar-h --deco-book-spine --deco-book-page
     @tier role-also: --focus-ring-width --focus-ring-offset
     @tier role-also: --company-favicon-size
     @tier role-also:
     @tier role-also: --app-ambient --app-ambient-dark */

  /* ── 크기 ── */
  --h-row: calc(var(--seed-row-height) * var(--seed-density));
  --h-control-sm: var(--control-height-sm);
  --h-control-md: var(--control-height-md);
  --h-control-lg: var(--control-height-lg);
  /* @tier end */

}

/* 페이지 여백 — 아주 좁은 화면에서만 축소.
   ⛔ 768px 에서 줄이지 않는다(사용자 지적 2026-08-29). 그 폭에서 사이드바가 드로어로
      빠져 본문이 220px 를 되받는데, 하필 같은 지점에서 여백까지 반으로 줄여
      글자가 화면 가장자리에 붙었다(실측 700px: 본문 8px, 탭 바 0px). 자리가 늘어난
      순간에 숨을 뺏는 셈이라 답답해진다. 손에 쥐는 폭(≤480)에서만 줄인다. */
@media (max-width: 480px) {
  :root {
    --page-pad-x: calc(0.5rem * var(--seed-density));
  }
}

/* 라이트 테마 오버라이드 */
html[data-theme='light'],
body[data-theme='light'] {
  /* 바탕 글로우 — 라이트에도 깐다(사용자 확정 2026-08-22).
     ⛔ 알파는 다크의 **절반쯤**이라야 한다: 흰 바탕 위에서는 같은 알파가 훨씬 진하게 보인다.
     껍데기·본문 바탕을 비워야 글로우가 닿는다 — 비우기 전에는 판이 흰색으로 다 덮어
     알파를 아무리 올려도 화면이 한 픽셀도 바뀌지 않았다(2026-08-22 실측: 바탕 노출 0%).
     비우면 바탕(#f8fafc)이 드러나 흰 카드(#ffffff)와 층이 생겨 구조도 또렷해진다. */
  --chrome-bg: transparent;
  /* ⛔ **흰 바탕에 색을 얹지 않는다.** 다크 값을 그대로 옮기면 글로우 자리가 오히려
     **어두워져** 빛이 아니라 얼룩처럼 읽힌다(2026-08-22 실측: 좌상 242 vs 중앙 248).
     라이트는 바탕을 한 단 내리고(#f2f5f9) **흰빛을 얹어 밝힌다** — 그래야 다크와
     같은 원리(글로우 자리가 밝아진다)가 된다(실측: 좌상 253 vs 중앙 246).
     브랜드색은 아주 옅게 한 겹만 곁들인다. */
  --app-ambient:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9), transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(var(--seed-brand-rgb, 4, 120, 87), 0.05), transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(255, 255, 255, 0.7), transparent 36%);

  /* 면 위 잉크 — 라이트는 primary·의미색이 모두 어두워 흰 잉크가 맞다 */
  --on-solid: #ffffff;

  --surface-hover: rgba(15, 23, 42, 0.04);
  --surface-active: rgba(15, 23, 42, 0.08);
  --surface-stripe: rgba(15, 23, 42, 0.04);

  --shadow-sm: 0 calc(1px * var(--seed-elevation)) calc(2px * var(--seed-elevation)) rgba(15, 23, 42, 0.06);
  --shadow-md: 0 calc(4px * var(--seed-elevation)) calc(12px * var(--seed-elevation)) rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 calc(8px * var(--seed-elevation)) calc(20px * var(--seed-elevation)) rgba(15, 23, 42, 0.15);
  --shadow-modal: 0 calc(18px * var(--seed-elevation)) calc(45px * var(--seed-elevation)) rgba(15, 23, 42, 0.18);

  --backdrop-bg: rgba(15, 23, 42, 0.35);

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --scrollbar-track: rgba(15, 23, 42, 0.04);

  /* 키워드 형광 — 흰 배경에선 조금 더 진하게(워닝색도 어두운 계열로 재보정됨) */
  --highlight-mark-bg: color-mix(in srgb, var(--color-warning) 38%, transparent);

  /* 상태색·분류색 라이트 재보정 —
     :root 값은 검정 배경 기준(밝은 채도)이라 흰/카드 배경에서 전경 텍스트·아이콘·soft 배지가
     대비 1.8~3.5:1 로 바래 보인다(특히 카드 안 배지). 한 단계 어둡게(-700 계열) 내려
     흰 배경 텍스트 ≥4.9, soft 배지(원 틴트 위) ≥4.5:1 로 확보. 다크는 그대로(검정 위 선명). */
  /* 임의 태그색 잉크도 같은 이유로 한 단 깊게 — 원색 그대로면 제 색 14% 틴트 위에서
     대비가 2.8~3.4:1 로 바랜다(실사고 2026-09-04: ToDo 태그 「에러」 3.38:1).
     45%를 검정으로 섞으면 빨강 7.04 · 파랑 6.94 · 보라 7.24 · 초록 5.27 · 노랑 5.05 로
     시험한 다섯 색 모두 4.5:1 을 넘는다(실측). */
  --tag-ink-amt: 55%;
  --tag-ink-shade: #000;

  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;
  --color-warning: #b45309;
  --color-warning-hover: #92400e;
  --color-info: #2563eb;
  --color-info-hover: #1d4ed8;
  --color-success: #15803d;
  --color-success-hover: #166534;
  --color-purple: #9333ea;
  --color-indigo: #4f46e5;
  --color-orange: #c2410c;
  --color-cyan: #0e7490;
  --color-pink: #be185d;
  --color-lime: #4d7c0f;

  /* 장해 도해 — 밝은 배경에서는 몸통이 밝아야 부위색이 읽힌다. 섞는 비율은 한 단계 낮춘다
     (같은 비율이면 흰 배경 위에서 색이 과하게 진해 도해가 시끄러워진다). */
  --disability-figure: #e4e2dd;
  --disability-figure-line: #6b7178;
  --disability-zone-rest: 26%;
  --disability-zone-hover: 44%;
  --disability-zone-on: 58%;
  --disability-zone-active: 74%;
}

.rich-text-editor[data-v-3fe723f7] {
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-card);
  overflow: hidden;
}
.rich-text-editor--disabled[data-v-3fe723f7] {
  opacity: 0.6;
  pointer-events: none;
}
.rich-text-editor__toolbar[data-v-3fe723f7] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-snug);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.rich-text-editor__toolbar button[data-v-3fe723f7] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-label);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.rich-text-editor__toolbar button[data-v-3fe723f7]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}
.rich-text-editor__toolbar button.is-active[data-v-3fe723f7] {
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
}
.rich-text-editor__toolbar button[data-v-3fe723f7]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rich-text-editor__divider[data-v-3fe723f7] {
  width: 1px;
  height: 18px;
  background: var(--line-color);
  margin: 0 var(--gap-glyph);
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap {
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-cozy) var(--space-cozy);
  color: var(--ink-primary);
  font: inherit;
  font-size: var(--size-body);
  line-height: var(--line-normal);
  outline: none;
}

/* iOS Safari 는 포커스된 편집 영역의 computed font-size 가 16px 미만이면
   자동으로 화면을 확대한다. 터치 디바이스에선 본문을 16px 로 키워 회피. */
@media (pointer: coarse) {
.rich-text-editor__content[data-v-3fe723f7] .tiptap {
    font-size: var(--size-lead);
}
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ink-muted);
  float: left;
  height: 0;
  pointer-events: none;
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap p {
  margin: 0 0 0.5em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap ul,
.rich-text-editor__content[data-v-3fe723f7] .tiptap ol {
  padding-left: var(--space-band);
  margin: 0.25em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap blockquote {
  border-left: var(--line-accent) solid var(--line-color);
  padding-left: var(--space-cozy);
  margin: 0.5em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
  color: var(--ink-secondary);
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap pre {
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-cozy);
  margin: 0.5em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap code {
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  padding: 0.15em 0.3em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
  font-size: var(--font-rel-code);
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap a {
  color: var(--ink-brand);
  text-decoration: underline;
}
.rich-text-editor__content[data-v-3fe723f7] .tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-badge);
  margin: 0.5em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
}

.app-btn[data-v-78824fee] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  height: var(--h-control-md);
  padding: 0 var(--space-cozy);
  border: var(--line-w) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  line-height: var(--line-none);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base), filter var(--motion-base), box-shadow var(--motion-base);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.app-btn[data-v-78824fee]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.app-btn[data-v-78824fee]:disabled,
.app-btn--loading[data-v-78824fee] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === Sizes === */
/* xs — 툴바·카드 모서리 등 고밀도 영역의 소형 버튼 (주로 icon-only) */
.app-btn--xs[data-v-78824fee] {
  height: var(--h-control-xs);
  padding: 0 var(--space-tight);
  font-size: var(--size-meta);
  gap: var(--gap-glyph);
}
.app-btn--sm[data-v-78824fee] {
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  font-size: var(--size-label);
  gap: var(--gap-glyph);
}
.app-btn--lg[data-v-78824fee] {
  height: var(--h-control-lg);
  padding: 0 var(--space-roomy);
  font-size: var(--size-lead);
}
.app-btn--block[data-v-78824fee] {
  display: flex;
  width: 100%;
}

/* 폼 필드형 트리거 — 라벨 왼쪽(말줄임) + 아이콘 오른쪽 끝. block 과 함께 쓴다. */
.app-btn--align-between[data-v-78824fee] { justify-content: space-between;
}
/* 단추 글자 뒤에 붙는 건수 배지(「배정 관리 3」) — 글자와 같은 칸이라 띄어쓰기 한 칸만 남아 붙어 보였다
   (사용자 지적 2026-09-11). 화면마다 여백을 따로 주지 않게 여기서 한 번 띄운다. */
.app-btn__label[data-v-78824fee] >  .app-badge {
  margin-inline-start: var(--gap-glyph);
}
.app-btn--align-between .app-btn__label[data-v-78824fee] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* 아이콘과 글자를 함께 담은 단추 — 옆 여백을 한 단 넓힌다.
   ⛔ 글자만 있는 단추와 같은 여백(12px)을 쓰면 안쪽이 아이콘·간격·글자로 꽉 차 **답답해 보인다**
      (2026-08-29 사용자 지적: 같은 모달의 「취소·저장」과 나란한데 그 셋만 빽빽했다. 재 보면
      바깥 여백은 같고, 안에 든 것이 하나 더 많은 것이 원인이었다).
   같은 이유로 아이콘만 있는 단추는 정사각(아래)이라 이 규칙이 필요 없다. */
.app-btn--with-icon[data-v-78824fee] { padding: 0 var(--space-roomy);
}
.app-btn--with-icon.app-btn--xs[data-v-78824fee] { padding: 0 var(--space-snug);
}
.app-btn--with-icon.app-btn--sm[data-v-78824fee] { padding: var(--pad-control);
}
.app-btn--with-icon.app-btn--lg[data-v-78824fee] { padding: 0 var(--space-band);
}
.app-btn--icon-only[data-v-78824fee] {
  padding: 0;
  width: var(--h-control-md);
  aspect-ratio: 1;
}
.app-btn--icon-only.app-btn--xs[data-v-78824fee] { width: var(--h-control-xs);
}
.app-btn--icon-only.app-btn--sm[data-v-78824fee] { width: var(--h-control-sm);
}
.app-btn--icon-only.app-btn--lg[data-v-78824fee] { width: var(--h-control-lg);
}

/* === Variants === */
.app-btn--primary[data-v-78824fee] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
/* hover: 밝기 + 그림자 — brightness(1.05) 만으론 다크 테마에서 거의 안 보였음 */
.app-btn--primary[data-v-78824fee]:not(:disabled):hover {
  filter: brightness(1.12);
  box-shadow: 0 var(--line-w-thick) 8px rgba(var(--ink-brand-rgb), 0.35);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
.app-btn--primary[data-v-78824fee]:not(:disabled):active {
  filter: brightness(0.95);
  box-shadow: none;
}
.app-btn--secondary[data-v-78824fee] {
  background: var(--bg-page);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
/* hover: 테두리를 primary 색으로 강조 + 약간 밝게. surface-hover(rgba 0.04) 만으론 변화 미미 */
.app-btn--secondary[data-v-78824fee]:not(:disabled):hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.app-btn--secondary[data-v-78824fee]:not(:disabled):active {
  background: var(--bg-active);
}
.app-btn--ghost[data-v-78824fee] {
  background: transparent;
  color: var(--ink-secondary);
}
.app-btn--ghost[data-v-78824fee]:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.app-btn--danger[data-v-78824fee] {
  background: var(--bg-danger);
  color: var(--ink-on-solid);
}
.app-btn--danger[data-v-78824fee]:not(:disabled):hover {
  /* ⛔ 면이 깊어진 뒤로는 **hover 를 다른 색으로 주지 않는다** — primary 와 같은 방식으로
     밝기만 올린다. 옛 코드는 `--ink-danger-hover`(잉크)를 면으로 빌려 썼는데, 그 값은
     다크에서 흰 글자가 4.22:1 이라 누르는 순간 글자가 흐려졌다(2026-09-03). */
  filter: brightness(1.12);
}
.app-btn--danger[data-v-78824fee]:focus-visible {
  box-shadow: var(--ring-danger);
}

/* ghost-danger — 평소엔 ghost 처럼 잔잔하고, 위험 색은 hover 에서만 드러나는 파괴적 액션용 (행 모서리 삭제 아이콘 등) */
.app-btn--ghost-danger[data-v-78824fee] {
  background: transparent;
  color: var(--ink-secondary);
}
.app-btn--ghost-danger[data-v-78824fee]:not(:disabled):hover {
  background: var(--bg-danger-soft);
  color: var(--ink-danger-hover);
}
.app-btn--ghost-danger[data-v-78824fee]:focus-visible {
  box-shadow: var(--ring-danger);
}

/* dashed — 비어 있는 자리(미등록 슬롯 등) 를 점선으로 드러내는 placeholder/추가 버튼.
   평소엔 잔잔한 muted, hover 에서 primary 로 채워질 여지를 암시. */
.app-btn--dashed[data-v-78824fee] {
  background: transparent;
  color: var(--ink-muted);
  border: var(--line-w) dashed var(--line-color);
}
.app-btn--dashed[data-v-78824fee]:not(:disabled):hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: var(--bg-hover);
}
.app-btn--dashed[data-v-78824fee]:not(:disabled):active {
  background: var(--bg-active);
}

/* === Active (토글 켜짐 상태) === */
.app-btn--secondary.app-btn--active[data-v-78824fee] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.app-btn--ghost.app-btn--active[data-v-78824fee] {
  background: var(--bg-active);
  color: var(--ink-brand);
}

/* === Spinner === */
.app-btn__spinner[data-v-78824fee] {
  width: 0.875em;
  height: 0.875em;
  border: var(--line-w-thick) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: app-btn-spin-78824fee 0.7s linear infinite;
}
@keyframes app-btn-spin-78824fee {
to { transform: rotate(360deg);
}
}
.app-btn__label[data-v-78824fee] {
  display: inline-flex;
  align-items: center;
  /* 행 전체를 채우는 버튼에서 라벨이 줄어들 수 있어야 truncate/줄바꿈이 동작한다 */
  min-width: 0;
}

/* 아이콘 슬롯 안의 일반 아이콘 폰트 사이즈 정렬 */
.app-btn i[data-v-78824fee-s] {
  font-size: 1.1em; /* css-ignore: decorative em */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
  line-height: var(--line-none);
}

.app-modal-overlay[data-v-9eaa79f0] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--pad-card);
}
.app-modal[data-v-9eaa79f0] {
  width: 100%;
  max-height: calc(100dvh - var(--space-wide));
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-modal);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  outline: none;
  overflow: hidden;
}
.app-modal--sm[data-v-9eaa79f0] { max-width: 360px;
}
.app-modal--md[data-v-9eaa79f0] { max-width: 480px;
}
.app-modal--lg[data-v-9eaa79f0] { max-width: 720px;
}
.app-modal--xl[data-v-9eaa79f0] { max-width: 960px;
}
/* 화면이 넓으면 그만큼 쓰되 양옆 여백은 넉넉히 남긴다 — 끝까지 채우면 오히려 읽기 어렵다 */
.app-modal--wide[data-v-9eaa79f0] { max-width: min(1280px, 88vw);
}
.app-modal__header[data-v-9eaa79f0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.app-modal__title[data-v-9eaa79f0] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  flex: 1;
  min-width: 0;
}
.app-modal__close[data-v-9eaa79f0] {
  flex-shrink: 0;
}
.app-modal__body[data-v-9eaa79f0] {
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.app-modal__body--no-padding[data-v-9eaa79f0] {
  padding: 0;
}
.app-modal__footer[data-v-9eaa79f0] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  border-top: var(--line-strong);
  flex-shrink: 0;
}

/* body slot 이 비어있어 header 의 border-bottom 과 footer 의 border-top 이 인접해서 2px 처럼 보이는 케이스 — footer 의 border 제거 */
.app-modal__footer--no-border[data-v-9eaa79f0] {
  border-top: none;
}

/* === Transition === */
.app-modal-enter-active[data-v-9eaa79f0],
.app-modal-leave-active[data-v-9eaa79f0] {
  transition: opacity var(--motion-base);
}
.app-modal-enter-active .app-modal[data-v-9eaa79f0],
.app-modal-leave-active .app-modal[data-v-9eaa79f0] {
  transition: transform var(--motion-base), opacity var(--motion-base);
}
.app-modal-enter-from[data-v-9eaa79f0],
.app-modal-leave-to[data-v-9eaa79f0] {
  opacity: 0;
}
.app-modal-enter-from .app-modal[data-v-9eaa79f0],
.app-modal-leave-to .app-modal[data-v-9eaa79f0] {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
@media (max-width: 480px) {
.app-modal-overlay[data-v-9eaa79f0] {
    padding: var(--space-cozy);
}
}

.capture-crop[data-v-c9b1272a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/*
  그림 자리는 높이를 못 박는다 — 그림마다 높이가 달라지면 창 크기가 바뀐다(디자인 시스템 규칙).
  그림은 이 안에서 비율을 지켜 줄어든다.
*/
.capture-crop__stage[data-v-c9b1272a] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30rem;
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  cursor: crosshair;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.capture-crop__img[data-v-c9b1272a] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

/* 고른 자리만 밝게 — 바깥은 box-shadow 로 한 번에 덮는다. */
.capture-crop__selection[data-v-c9b1272a] {
  position: absolute;
  border: var(--line-w-thick) solid var(--ink-brand);
  box-shadow: 0 0 0 9999px var(--bg-backdrop);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
  pointer-events: none;
}
.capture-crop__hint[data-v-c9b1272a] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.capture-crop__reset[data-v-c9b1272a] {
  margin-right: auto;
}

/* 클래스를 두 번 겹쳐 쓴 이유(⚠️ 지우지 말 것) —
   이 컴포넌트의 루트는 <label> 이다. 그런데 여러 화면이 폼 규약으로
   `.form-group label { display: block }` 을 두고 있고, **부모의 scoped 규칙이 자식 컴포넌트
   루트에 더 높은 우선순위로 적용**된다(`.form-group label[data-v-부모]` > `.app-checkbox[data-v-자식]`).
   그러면 display 가 block 으로 덮여 flex 가 죽고, gap 이 무시돼 체크박스에 글자가 딱 붙는다.
   실측(2026-08-02): 외부 자원 등록 모달·회사 등록 모달 모두 display=block, 박스↔글자 간격 0px.
   클래스를 겹쳐 특이도를 올려 화면 쪽 규칙이 이 레이아웃을 못 건드리게 한다. */
.app-checkbox.app-checkbox[data-v-d9b2fd3c] {
  /* 숨긴 native input(absolute)의 기준 — 없으면 문서 전체가 기준이 되어,
     클릭으로 포커스가 갈 때 브라우저의 scroll-into-view 가 페이지를 통째로 스크롤시킨다
     (앱이 위로 밀려 화면이 잘려 보이는 증상). */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.app-checkbox--disabled[data-v-d9b2fd3c] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 네이티브 입력은 숨기되 접근성·포커스는 유지 */
.app-checkbox__input[data-v-d9b2fd3c] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.app-checkbox__box[data-v-d9b2fd3c] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: var(--line-w) solid var(--ink-muted);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  transition: background var(--motion-base), border-color var(--motion-base);
}

/* 체크/부분선택 시 primary 채움 */
.app-checkbox__input:checked + .app-checkbox__box[data-v-d9b2fd3c],
.app-checkbox__input:indeterminate + .app-checkbox__box[data-v-d9b2fd3c] {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
}
.app-checkbox__input:focus-visible + .app-checkbox__box[data-v-d9b2fd3c] {
  box-shadow: var(--ring-focus);
}
.app-checkbox__label[data-v-d9b2fd3c] {
  font-size: var(--size-body);
  color: var(--ink-primary);
}

.multi-select-wrapper[data-v-b782e1fe] {
  position: relative;
  width: 200px;
  max-width: 100%;
  flex-shrink: 0;
}
.multi-select-control[data-v-b782e1fe] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-wide) var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  /* ⛔ 배경을 깔지 않는다 — 회사 화면의 키워드 검색과 같은 방식이다(사용자 확정 2026-08-22).
     흰 베일을 깔면 그 자리만 바탕 글로우가 눌려 컨트롤마다 밝기가 달라 보인다.
     경계는 **테두리**가 만들고, 포커스는 테두리 색이 알린다. */
  background: var(--bg-page);
  height: var(--h-control-md);
  cursor: pointer;
  position: relative;
  transition: all var(--motion-base);
  overflow: hidden;
}
.multi-select-control[data-v-b782e1fe]:hover {
  border-color: var(--ink-brand);
}
.multi-select-control.open[data-v-b782e1fe] {
  border-color: var(--ink-brand);
}
.multi-select-control[data-v-b782e1fe]:focus-within {
  border-color: var(--ink-brand);
  outline: none;
}
.multi-select-arrow[data-v-b782e1fe] {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--icon-marker);
  color: var(--ink-secondary);
  transition: transform var(--motion-base);
  pointer-events: none;
}
.multi-select-control.open .multi-select-arrow[data-v-b782e1fe] {
  transform: translateY(-50%) rotate(180deg);
}
.multi-select-tags[data-v-b782e1fe] {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-glyph);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  align-items: center;
}

/* 선택 태그 — primary 틴트 칩 (선택/활성 신호) */
.multi-select-tag[data-v-b782e1fe] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100px;
  min-height: 20px;
  height: 20px;
  line-height: var(--line-none);
}
.multi-select-tag-text[data-v-b782e1fe] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-select-tag.more[data-v-b782e1fe] {
  cursor: default;
}
.multi-select-count[data-v-b782e1fe] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 20px;
  height: 20px;
  line-height: var(--line-none);
}
.multi-select-count-remove[data-v-b782e1fe] {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--motion-base);
}
.multi-select-count-remove[data-v-b782e1fe]:hover {
  background: var(--bg-active);
}
.multi-select-count-remove i[data-v-b782e1fe] {
  font-size: var(--icon-marker);
}
.multi-select-tag-remove[data-v-b782e1fe] {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: var(--gap-glyph);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--motion-base);
  color: var(--ink-brand);
  border: none;
  padding: 0;
}
.multi-select-tag-remove[data-v-b782e1fe]:hover {
  background: var(--bg-active);
}
.multi-select-tag-remove i[data-v-b782e1fe] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
}
.multi-select-placeholder[data-v-b782e1fe] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: left;
  width: 100%;
}
.multi-select-control.has-selection .multi-select-placeholder[data-v-b782e1fe] {
  display: none;
}
.multi-select-tags:not(:empty) + .multi-select-placeholder[data-v-b782e1fe] {
  display: none;
}

/* 단일 선택 모드: 일반 텍스트 표시 */
.multi-select-single-text[data-v-b782e1fe] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-label);
  color: var(--ink-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.multi-select-dropdown[data-v-b782e1fe] {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  /* ⛔ 안쪽 채우기가 둥근 모서리를 뚫고 나오지 않게 잘라 낸다 —
     첫 줄·끝 줄을 고르면 강조 배경이 네모로 삐져나왔다(사용자 지적 2026-08-29,
     모서리를 키운 테마에서 특히 크게 보인다). */
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-height: 250px;
  display: none;
  flex-direction: column;
  z-index: var(--z-dropdown);
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
}
.multi-select-dropdown.open[data-v-b782e1fe] {
  display: flex;
}

/* 화면 오른쪽 끝에서 왼쪽 정렬 시 잘리면 오른쪽 모서리 기준으로 정렬 */
.multi-select-dropdown.align-right[data-v-b782e1fe] {
  left: auto;
  right: 0;
}
.multi-select-dropdown.drop-up[data-v-b782e1fe] {
  top: auto;
  bottom: calc(100% + 6px);
}
.multi-select-search[data-v-b782e1fe] {
  padding: var(--space-snug);
  border-bottom: var(--line-strong);
}
.multi-select-search-input[data-v-b782e1fe] {
  width: 100%;
  padding: var(--space-snug) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.multi-select-search-input[data-v-b782e1fe]:focus {
  outline: none;
  border-color: var(--ink-brand);
}
.multi-select-all[data-v-b782e1fe] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}

/* 전체 선택 — 상자와 글자 사이는 AppCheckbox 가 갖는다. 자리(폭)만 준다. */
.multi-select-all-label[data-v-b782e1fe] {
  flex: 1;
  min-width: 0;
}
.multi-select-all-label[data-v-b782e1fe] .app-checkbox__label {
  font-size: var(--size-meta);
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.multi-select-selected-count[data-v-b782e1fe] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: normal;
  margin-left: var(--gap-glyph);
}
.multi-select-options[data-v-b782e1fe] {
  overflow-y: auto;
  max-height: 200px;
  /* 옵션 라벨이 flex+overflow:hidden 으로 인해 max-content 계산에서 0으로 collapse 되어
     드롭다운이 트리거 너비에 갇히는 문제를 방지 — 가장 긴 라벨에 맞춰 가로폭 확보 */
  min-width: -moz-max-content;
  min-width: max-content;
  /* Firefox용 스크롤바 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
  outline: none;
}
.multi-select-options[data-v-b782e1fe]:focus {
  outline: none;
}

/* Webkit 브라우저용 스크롤바 스타일 - 얇고 둥근 핸들 */
.multi-select-options[data-v-b782e1fe]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  display: block;
}
.multi-select-options[data-v-b782e1fe]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-badge);
  -webkit-box-shadow: none;
}
.multi-select-options[data-v-b782e1fe]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  -webkit-box-shadow: none;
}
.multi-select-options[data-v-b782e1fe]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.multi-select-options[data-v-b782e1fe]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}
.multi-select-option[data-v-b782e1fe] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-cozy);
  cursor: pointer;
  font-size: var(--size-meta);
  color: var(--ink-primary);
  transition: background var(--motion-base);
}
.multi-select-option[data-v-b782e1fe]:hover {
  background: var(--bg-field);
}

/* ⛔ outline 으로 강조하지 않는다 — outline 은 **잘라내기(overflow)에 걸리지 않고 각진 사각형**으로
   그려져, 둥근 드롭다운의 첫 줄·끝 줄에서 모서리를 뚫고 나온다(사용자 지적 2026-08-29).
   안쪽 그림자는 요소의 라운드를 그대로 따라간다. */
.multi-select-option--highlighted[data-v-b782e1fe] {
  background: var(--bg-brand-soft) !important;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--ink-brand);
}
.multi-select-option-marker[data-v-b782e1fe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ⛔ 자리를 비워 두지 않는다 — 단일선택은 «고른 줄에만» ✓ 가 선다.
     크기를 안 잡으면 빈 표식이 0px 로 접혀 고른 줄만 글자가 밀린다
     (실측 2026-09-08: 고른 줄 라벨 x=35 · 안 고른 줄 x=20). */
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}
.multi-select-option-check[data-v-b782e1fe] {
  font-size: var(--size-meta);
  color: var(--ink-brand);
}
.multi-select-option-icon[data-v-b782e1fe] {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-badge);
}
.multi-select-tag-icon[data-v-b782e1fe] {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-badge);
}
.multi-select-option-label[data-v-b782e1fe] {
  flex: 1;
  font-size: var(--size-meta);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  white-space: nowrap;
  /* overflow:hidden + ellipsis 를 빼서 dropdown 의 max-content 계산이 라벨의 자연 폭을 반영하게 함 —
     트리거가 fit-content 라도 옵션 텍스트가 잘리지 않음. max-width: calc(100vw - 24px) 로 화면 폭 한계는 보장. */
}
.multi-select-option-suffix[data-v-b782e1fe] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-left: var(--gap-inline);
  white-space: nowrap;
}
.multi-select-empty[data-v-b782e1fe] {
  padding: var(--space-cozy);
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}

/* 테마별 색은 모두 테마 인식 토큰(--surface-*, --border-color, --shadow-md 등)으로
   처리되므로 별도 [data-theme] 오버라이드가 필요 없다. */

/* === Size variants === */
/* md = 기본값 — 현행 32px 그대로. 별도 규칙 불필요 */
.multi-select--sm .multi-select-control[data-v-b782e1fe] {
  height: var(--h-control-sm);
}
.multi-select--sm .multi-select-placeholder[data-v-b782e1fe],
.multi-select--sm .multi-select-single-text[data-v-b782e1fe] {
  font-size: var(--size-label);
}
.multi-select--sm .multi-select-tag[data-v-b782e1fe],
.multi-select--sm .multi-select-count[data-v-b782e1fe] {
  font-size: var(--size-meta); /* 12px — sm 컨트롤 내부 태그 */
}

/* === Embedded variant === */
/* 필터 그룹 안에서 seamless 하게 녹아드는 모드.
   외부에서 :deep + !important 오버라이딩 대신 이 prop 을 쓴다. */
.multi-select--embedded .multi-select-control[data-v-b782e1fe] {
  border: none;
  border-radius: 0;
  background: transparent;
}
.multi-select--embedded .multi-select-control[data-v-b782e1fe]:hover {
  border-color: transparent;
}
.multi-select--embedded .multi-select-control.open[data-v-b782e1fe],
.multi-select--embedded .multi-select-control[data-v-b782e1fe]:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.app-input[data-v-3685a6f9] {
  box-sizing: border-box;
  width: 100%;
  height: var(--h-control-md);
  padding: 0 var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-body);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.app-input[data-v-3685a6f9]::-moz-placeholder {
  color: var(--ink-muted);
}
.app-input[data-v-3685a6f9]::placeholder {
  color: var(--ink-muted);
}
.app-input[data-v-3685a6f9]:focus-visible {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.app-input[data-v-3685a6f9]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-field);
}
.app-input[readonly][data-v-3685a6f9] {
  background: var(--bg-field);
}

/* 유효성 오류 */
.app-input--invalid[data-v-3685a6f9] {
  border-color: var(--ink-danger);
}
.app-input--invalid[data-v-3685a6f9]:focus-visible {
  box-shadow: var(--ring-danger);
}

/* === Sizes === */
/* sm — 콤팩트 영역 (필터 행, 인라인 폼 등) */
.app-input--sm[data-v-3685a6f9] {
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
}

.app-badge[data-v-aa7b82dc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border: var(--line-w) solid var(--_badge-bd, transparent);
  border-radius: var(--radius-badge);
  background: var(--_badge-bg);
  color: var(--_badge-fg);
  /* 기본 sm = 13px. 목록 셀 평문이 14px 이므로 **사다리로 한 단만** 낮춘다.
     12px(--font-xs)이던 시절에는 두 단 차이라 같은 줄 안에서 평문이 커 보이고
     줄마다 크기가 들쭉날쭉해 보였다(사용자 지적 2026-08-21). */
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  line-height: var(--line-comfortable);
  white-space: nowrap;
  vertical-align: middle;
}
.app-badge--md[data-v-aa7b82dc] { font-size: var(--size-body);
}
/* xs = 콤팩트 카운트 버블 — sm 보다 한 단 작은 글자에 좁은 패딩으로 조밀하게.
   폴더 하위 개수 등 '읽는 글'이 아니라 곁들이는 수. */
.app-badge--xs[data-v-aa7b82dc] {
  padding: 0 var(--space-tight);
  font-size: var(--size-meta);
  line-height: var(--line-none);
}
.app-badge--pill[data-v-aa7b82dc] { border-radius: var(--radius-pill);
}
.app-badge--mono[data-v-aa7b82dc] { font-family: var(--font-mono);
}
.app-badge__icon[data-v-aa7b82dc] { font-size: var(--font-rel-sm); /* css-ignore: 상대 em — 부모 폰트에 비례 */ line-height: var(--line-none);
}

/* === soft (기본): 연한 틴트 배경 + 의미색 글자 === */
.app-badge--neutral[data-v-aa7b82dc] { --_badge-bg: var(--bg-active); --_badge-fg: var(--ink-secondary); --_badge-bd: var(--line-color-subtle);
}
.app-badge--primary[data-v-aa7b82dc] { --_badge-bg: var(--bg-brand-soft); --_badge-fg: var(--ink-brand);
}
.app-badge--success[data-v-aa7b82dc] { --_badge-bg: var(--bg-success-soft); --_badge-fg: var(--ink-success);
}
.app-badge--warning[data-v-aa7b82dc] { --_badge-bg: var(--bg-warning-soft); --_badge-fg: var(--ink-warning);
}
.app-badge--danger[data-v-aa7b82dc]  { --_badge-bg: var(--bg-danger-soft);  --_badge-fg: var(--ink-danger);
}
.app-badge--info[data-v-aa7b82dc]    { --_badge-bg: var(--bg-info-soft);    --_badge-fg: var(--ink-info);
}
.app-badge--purple[data-v-aa7b82dc]  { --_badge-bg: var(--bg-accent-purple-soft);  --_badge-fg: var(--ink-accent-purple);
}
.app-badge--indigo[data-v-aa7b82dc]  { --_badge-bg: var(--bg-accent-indigo-soft);  --_badge-fg: var(--ink-accent-indigo);
}
.app-badge--orange[data-v-aa7b82dc]  { --_badge-bg: var(--bg-accent-orange-soft);  --_badge-fg: var(--ink-accent-orange);
}
.app-badge--cyan[data-v-aa7b82dc]    { --_badge-bg: var(--bg-accent-cyan-soft);    --_badge-fg: var(--ink-accent-cyan);
}
.app-badge--pink[data-v-aa7b82dc]    { --_badge-bg: var(--bg-accent-pink-soft);    --_badge-fg: var(--ink-accent-pink);
}
.app-badge--lime[data-v-aa7b82dc]    { --_badge-bg: var(--bg-accent-lime-soft);    --_badge-fg: var(--ink-accent-lime);
}

/* === solid: 의미색 배경 + 면 위 잉크(--on-*) ===
   ⛔ 흰 글자로 못 박지 않는다 — 다크에서 브랜드 그린(#10b981) 위 흰 글씨는 2.54:1 로
      본문 AA(4.5) 미달이었다(실측 2026-08-21). 잉크는 테마가 정한다. */
.app-badge--solid.app-badge--neutral[data-v-aa7b82dc] { --_badge-bg: var(--bg-page-alt); --_badge-fg: var(--ink-primary); --_badge-bd: var(--line-color);
}
.app-badge--solid.app-badge--primary[data-v-aa7b82dc] { --_badge-bg: var(--bg-brand);       --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--success[data-v-aa7b82dc] { --_badge-bg: var(--ink-success);  --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--warning[data-v-aa7b82dc] { --_badge-bg: var(--ink-warning);  --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--danger[data-v-aa7b82dc]  { --_badge-bg: var(--ink-danger);   --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--info[data-v-aa7b82dc]    { --_badge-bg: var(--ink-info);     --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--purple[data-v-aa7b82dc]  { --_badge-bg: var(--ink-accent-purple);   --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--indigo[data-v-aa7b82dc]  { --_badge-bg: var(--ink-accent-indigo);   --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--orange[data-v-aa7b82dc]  { --_badge-bg: var(--ink-accent-orange);   --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--cyan[data-v-aa7b82dc]    { --_badge-bg: var(--ink-accent-cyan);     --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--pink[data-v-aa7b82dc]    { --_badge-bg: var(--ink-accent-pink);     --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}
.app-badge--solid.app-badge--lime[data-v-aa7b82dc]    { --_badge-bg: var(--ink-accent-lime);     --_badge-fg: var(--ink-on-solid); --_badge-bd: transparent;
}

.tab-nav[data-v-bc497c2b] {
  display: flex;
  flex-wrap: wrap;
  /* 행 간격 0 — 여러 줄로 wrap 돼도 줄끼리 붙어 한 묶음으로 보이게.
     열 간격만 유지 */
  gap: 0 var(--gap-inline);
  border-bottom: var(--line-strong);
  /* 껍데기 — 다크에서 비워 바탕 글로우가 이어지게 (라이트는 면색 유지) */
  background: var(--bg-page);
  flex-shrink: 0; /* flex 컨테이너 안에서 탭 바가 줄어들지 않도록 */
  /* ⛔ **여기에 `container-type: inline-size` 를 넣지 않는다.** 폭을 제 내용에서 받는 자리
     (flex 줄 안의 탭 바 등)에서는 그 순간 폭이 0 으로 접혀 탭이 세로로 쌓인다.
     '제 칸 폭이 좁으면 줄인다'는 규칙은 스크립트의 ResizeObserver 가 재서
     `.tab-nav--narrow` / `.tab-nav--xnarrow` 로 붙인다(아래 규칙 참조). */
}

/* 머리줄이 이미 선을 그은 자리 — 우리 선은 접는다(위 isFlush 주석 참조). */
.tab-nav--flush[data-v-bc497c2b] {
  border-bottom: none;
}
.tab-nav__tab[data-v-bc497c2b] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-tab);
  background: transparent;
  border: none;
  border-bottom: var(--line-w-thick) solid transparent;
  margin-bottom: var(--gap-glyph); /* nav 의 1px border 위에 탭의 border 가 겹치도록 */
  color: var(--ink-secondary);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  line-height: var(--line-tight);
  cursor: pointer;
  transition: color var(--motion-fast),
    background var(--motion-fast);
}
.tab-nav__tab[data-v-bc497c2b]:hover:not(:disabled) {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.tab-nav__tab[data-v-bc497c2b]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-badge);
}
.tab-nav__tab--active[data-v-bc497c2b] {
  color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.tab-nav__tab[data-v-bc497c2b]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tab-nav__icon[data-v-bc497c2b] {
  font-size: var(--icon-toolbar);
}

/* 그림 아이콘 — 글자 크기로는 안 커지므로 같은 단의 한 변을 준다(글리프와 같은 자리·같은 크기) */
.tab-nav__icon--img[data-v-bc497c2b] {
  width: var(--icon-toolbar);
  height: var(--icon-toolbar);
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 auto;
}
.tab-nav__icon--pulse[data-v-bc497c2b] {
  /* ⛔ 상시 표시는 steps() 로 (2026-08-29 실측). 매끄러운 타이밍은 초당 60번
     다시 그리게 만들어, 7px 점 하나로도 CPU 20%를 태운다. steps 로 드문 갱신. */
  animation: tabIconPulse-bc497c2b 1.2s steps(4) infinite;
  color: var(--ink-brand);
  filter: drop-shadow(0 0 4px var(--ink-brand));
}
@keyframes tabIconPulse-bc497c2b {
0%,
  100% {
    opacity: 1;
}
50% {
    opacity: 0.4;
}
}
.tab-nav__count[data-v-bc497c2b] {
  /* transform 애니메이션을 위해 inline-block (inline 은 transform 무시) */
  display: inline-block;
  color: var(--ink-muted);
  font-weight: var(--weight-body);
  font-size: var(--size-label);
  /* 좁은 폭에서 '처리 2 대기 0' 이 글자 단위로 세로로 쪼개지지 않도록 —
     줄바꿈은 라벨과 건수 '사이'에서만 (덩어리째) 일어나게 한다 */
  white-space: nowrap;
}

/* 닫기 ✕ — 사람이 쌓은 탭(연 파일)에만 선다. 평소엔 흐리게 두고 마우스를 올리면 또렷해진다.
   ⛔ 글자보다 크게 두지 않는다(typography.md — 곁들이는 아이콘은 옆 글자와 같은 단). */
.tab-nav__close[data-v-bc497c2b] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--gap-glyph);
  width: var(--icon-header);
  height: var(--icon-header);
  border-radius: var(--radius-badge);
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0.7;
  transition: background-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
}
/* 크기는 «글리프»에 준다 — 이 상자는 누르는 자리(--icon-header)이고 그 안의 ✕ 가 아이콘이다.
   껍데기에 걸면 아이콘 사다리를 글자 자리에 쓴 것으로 잡힌다(lint:fonts 사다리 교차). */
.tab-nav__close > i[data-v-bc497c2b] {
  font-size: var(--icon-inline);
}
.tab-nav__close[data-v-bc497c2b]:hover {
  background: var(--bg-hover);
  color: var(--ink-danger);
  opacity: 1;
}

/* 건수 변경 순간 강조 — 살짝 커졌다 돌아오며 primary 색으로 번쩍 */
.tab-nav__count--bump[data-v-bc497c2b] {
  animation: tabCountBump-bc497c2b 0.6s ease;
}
@keyframes tabCountBump-bc497c2b {
0% {
    transform: scale(1);
}
35% {
    transform: scale(1.3);
    color: var(--ink-brand);
}
100% {
    transform: scale(1);
}
}

/* 의미 강조 톤 — count 색 */
.tab-nav__tab[data-tone='warning'] .tab-nav__count[data-v-bc497c2b] {
  color: var(--ink-warning);
}
.tab-nav__tab[data-tone='danger'] .tab-nav__count[data-v-bc497c2b] {
  color: var(--ink-danger);
}

/* 탭 건수는 모든 variant 에서 (n) 표기 — 단일 분류 제목 옆 건수 표기와 통일 */
.tab-nav__count[data-v-bc497c2b]::before {
  content: '(';
}
.tab-nav__count[data-v-bc497c2b]::after {
  content: ')';
}

/* === fill — 라벨 탭은 폭을 균등 분할해 채우고, 아이콘 전용 탭은 자연 너비 유지 ===
   (메타편집기 좌측 탭처럼 라벨 탭은 넓게, 도움말 같은 아이콘 전용은 좁게 두는 패턴) */
.tab-nav--fill .tab-nav__tab[data-v-bc497c2b]:not(.tab-nav__tab--icon-only) {
  flex: 1 1 0;
  justify-content: center;
}

/* === page variant — 화면 맨 위 주 탭 ===
   ⛔ **서브 탭과 같이 너비를 나눠 꽉 채운다**(사용자 지시 2026-08-29). 예전에는 탭이 제 내용만큼만
      차지해 오른쪽이 비었다 — 실측(창 1440) 쓸 수 있는 폭 1,186px 중 1,085px 만 쓰고 102px 이,
      창 1680 에서는 342px 이 비었다.
   ⛔ `flex: 1 1 0` + `min-width: 0` 은 쓰지 않는다 — 탭이 **제 내용보다 작아져** 라벨이 아이콘
      아래로 접힌다(탭 높이 45→61px, 17개가 접혔다). 기준은 **제 내용 폭**, 남는 자리만 나눈다.
   ⛔ **여러 줄로 접힌 상태에서는 늘리지 않는다** — 마지막 줄에 홀로 남은 탭이 그 줄을 통째로
      차지해 405px 짜리 탭이 된다(실측 창 1024). */
.tab-nav--page:not(.tab-nav--wrapped):not(.tab-nav--no-fill) > .tab-nav__tab[data-v-bc497c2b] {
  flex: 1 1 auto;
  justify-content: center;
}

/* === sub variant — 페이지 탭 내부의 서브 탭 ===
   탭 수가 적으므로 너비를 균등 분할해 바를 꽉 채운다(늘리기 유지).
   ⛔ **다만 서브가 메인보다 커지면 안 된다**(사용자 지적 2026-08-29). 옛 규칙은
      안여백이 메인과 같은 --pad-tab 이었는데, 메인(page)은 탭이 많으면 스스로
      줄어들므로(--narrow) 실측 1440px 에서 **메인 36px · 서브 42px** — 자식이
      부모보다 큰 상태였다. 레벨은 **크기로만** 가른다(폭은 그대로 나눠 쓴다). */
.tab-nav--sub:not(.tab-nav--no-fill) .tab-nav__tab[data-v-bc497c2b] {
  flex: 1 1 0;
  justify-content: center;
  padding: var(--pad-row-dense);
  font-size: var(--size-label);
}

/* === 아이콘 전용 탭(도움말 등)은 **제 아이콘만큼만** 차지한다 ===
   라벨이 없는 탭은 「무엇을 보는가」가 아니라 곁들이는 자리다. 남는 폭을 나눠 가지면
   글자가 든 탭보다 넓어져 화면이 뒤집힌다.
   ⛔ page·sub 규칙의 `flex: 1 1 auto|0` 이 아이콘 탭까지 함께 늘리고 있었다 —
      fill 규칙은 아이콘 탭을 빼 두었지만(위) 특이도가 같은 page 규칙이 뒤에 와서 이겼다.
      실사고(접수 MSHOP-202608-0009, 2026-08-31): ToDo 편집 > 메타 작업 화면을 393px 로
      보면 「메타 · 문서」는 글자 폭에 멈추고 **도움말 탭이 남은 폭을 통째로** 가져가
      가장 넓은 탭이 되어 있었다. */
.tab-nav--page:not(.tab-nav--wrapped) > .tab-nav__tab--icon-only[data-v-bc497c2b],
.tab-nav--sub > .tab-nav__tab--icon-only[data-v-bc497c2b],
.tab-nav--fill > .tab-nav__tab--icon-only[data-v-bc497c2b] {
  flex: 0 0 auto;
}

/* 메인 탭과의 위·아래 간격을 sub 변종이 직접 소유한다.
   화면별 래퍼가 padding/margin 으로 간격을 만들지 않게 해 — 모든 서브 탭이
   동일한 간격을 갖도록 디자인 시스템 차원에서 강제한다 (간격 = --step-2 고정). */
.tab-nav--sub[data-v-bc497c2b] {
  margin: var(--gap-inline) 0;
}

/* === 모바일 ① — 라벨은 그대로 두고, 건수 (n) 를 제목 아래로 접어 내린다 ===
   탭 폭이 모자라면 아이콘+라벨은 한 줄에 두고 건수만 덩어리째 다음 줄로 내려간다.
   (각 조각은 nowrap 이라 글자 단위로 세로로 쪼개지지 않음)
   ⛔ 라벨을 숨기지 않는다 — 위 헤더 주석 참조. */
@media (max-width: 768px) {
.tab-nav[data-v-bc497c2b] {
    gap: 0;
}
.tab-nav__tab[data-v-bc497c2b] {
    /* ⛔ 줄이는 것은 **가로뿐**이다 — 모자란 자리는 가로이지 세로가 아니다.
       세로까지 깎으면 폭은 한 톨도 못 벌면서 탭 바만 납작해진다(2026-08-29 지적). */
    padding: var(--space-cozy) var(--space-snug);
    font-size: var(--size-label);
    justify-content: center;
    /* ⛔ **탭 안에서 줄바꿈하지 않는다.** 건수를 제목 아래로 접던 기능을 없앤 뒤로 이 `wrap` 은
       라벨을 아이콘 밑으로 떨어뜨리는 일만 한다(사용자 지적 2026-09-03).
       자리가 모자라면 **탭 바**가 접히거나 옆으로 밀어야지, 탭 안이 무너지면 안 된다. */
    flex-wrap: nowrap;
}
}

/* === ① 칸이 좁아지면 **건수를 제목 아래로** 접어 폭을 번다 ===
   뷰포트가 아니라 **탭 바가 실제로 잡은 폭**을 본다 — 스크립트의 ResizeObserver 가
   ≤640px 에서 `.tab-nav--narrow` 를 붙인다(넓은 화면의 좁은 판에서도 걸리게).
   ⚠️ 두 줄로 넘기는 것은 그다음 수단이다 — 여기서 폭을 벌어 두면 대개 한 줄로 버틴다. */
.tab-nav--narrow[data-v-bc497c2b] {
  gap: 0;
}
.tab-nav--narrow .tab-nav__tab[data-v-bc497c2b] {
  /* 가로만 줄인다 — 위 ≤768 규칙과 같은 이유 */
  padding: var(--space-cozy) var(--space-snug);
  flex-wrap: nowrap;
  justify-content: center;
}
/* ⛔ **flex-wrap 만으로는 안 내려간다.** 탭은 제 글자만큼만 넓어서 넘칠 일이 없고,
   넘치는 것은 **탭 바** 쪽이라 그대로 두면 건수는 그대로인 채 바가 두 줄이 된다
   (실측 2026-08-17: 탭바 367px 에서 두 줄, 건수는 옆에 그대로). 건수를 **제 줄로**
   못 박아야 탭 하나의 가로 폭이 실제로 줄어든다. */
/* ⛔ **건수를 제목 아래로 내리지 않는다**(사용자 확정 2026-09-02 — 폐지).
   폭을 벌려고 건수를 제 줄로 내렸었는데, 그만큼 **탭이 두 줄이 되어 바가 높아진다.**
   건수가 없는 탭은 한 줄뿐이라 옆 탭과 글자 높이까지 어긋났다(메타편집기의 「확인」).
   이제 폭이 모자라면 모바일은 옆으로 밀고 일반 화면은 두 줄로 접으므로, 건수를 내려
   폭을 벌 이유가 없다. 건수는 언제나 제목 옆에 붙는다. */
.tab-nav--narrow .tab-nav__count[data-v-bc497c2b] {
  font-size: var(--size-meta);
  line-height: var(--line-none);
}

/* === ③ 끝내 두 줄로 넘어가면 — **줄끼리 붙지 않게 숨을 틔운다(좁은 화면에서만)** ===
   한 줄일 때는 바 자체가 얇아야 하므로 여백이 0 인 것이 맞다. 두 줄부터는 다르다:
   ① 줄 간격이 0 이면 앞줄 활성 탭의 밑줄이 **뒷줄 탭을 가로지르는 칼금**이 되고
   ② 바 위·아래 여백이 0 이면 마지막 줄이 본문에 맞닿아 탭인지 머리글인지 분간이 안 된다.
   ③ 겹치라고 넣은 `margin-bottom: -1px`(바의 1px 선 위에 밑줄을 얹는 장치)도 이때는
      **앞줄을 1px 밀어 올려** 겹침을 만든다 — 넘어간 동안만 푼다.
   ⛔ **넓은 화면은 건드리지 않는다**(사용자 지시 2026-08-23) — 데스크톱에서도 탭이 두 줄이
      되는 자리가 있는데(1024px 관리자 설정 14개), 거기까지 높이가 26px 자라면 모바일 고치려다
      쓰던 화면을 바꾸는 것이 된다. 그래서 이 숨틔움은 **≤768px 에서만** 적용한다. */
@media (max-width: 768px) {
.tab-nav--wrapped[data-v-bc497c2b] {
    row-gap: var(--gap-inline);
    padding: var(--space-snug) 0;
}
.tab-nav--wrapped .tab-nav__tab[data-v-bc497c2b] {
    margin-bottom: 0;
}
}

/* === ② 그래도 모자라면 글자를 줄이고, 마지막에 탭 바가 두 줄로 넘어간다 === */
.tab-nav--xnarrow .tab-nav__tab[data-v-bc497c2b] {
  /* 가로만 한 단 더 줄인다(세로는 그대로) */
  padding: var(--space-cozy) var(--space-tight);
  font-size: var(--size-label);
}

/* === ③ 그래도 모자라면 **아이콘을 글자 위로 올린다** (사용자 지시 2026-08-29) ===
   한 줄로 나란히 두면 탭 폭은 `아이콘 + 사이 + 글자` 지만, 세로로 세우면 `둘 중 넓은 쪽` 이다.
   가장 긴 라벨이 폭을 정하므로 탭 하나가 눈에 띄게 좁아지고, 그만큼 **두 줄로 접히는 것을 늦춘다**.
   ⛔ 줄이는 것은 여전히 가로다 — 세로로 한 단 높아지는 대신 라벨을 지우거나 줄이지 않는다.
   ⛔ 이 단계는 탭 종류를 가리지 않는다(page·sub·filter 공통) — 좁아지는 사정은 어디나 같다. */
/* ⛔ **아이콘을 글자 위로 올리지 않는다**(사용자 확정 2026-09-02 — 폐지).
   한때 좁을 때 세로로 세워 탭 폭을 줄였지만, 그만큼 **탭 높이가 커져** 탭 바가 본문 자리를
   먹었다(실측 393px 관리자 설정: 한 줄인데도 바 67px). 모바일은 어차피 옆으로 밀고,
   일반 화면은 두 줄로 접으므로 세로로 세울 이유가 없다.
   축소 차례는 이제 **건수 접기 → 축약 라벨 → (모바일)스크롤 / (일반)두 줄** 뿐이다. */

/* 라벨은 항상 한 덩어리 — 좁은 폭에서 '모니터링' 이 글자 단위로 세로로
   쪼개지지 않게 한다 (줄바꿈은 라벨/건수 사이에서만) */
.tab-nav__label[data-v-bc497c2b] {
  white-space: nowrap;
}

/* === 문서 탭(docTabs) — 열어 둔 파일이 쌓이는 바 ===
   이름만큼만 서되 **한 탭이 바를 독차지하지 않게** 상한을 둔다(파일 이름은 길다).
   넘치는 이름은 한 줄 말줄임이고, 닫기 ✕ 는 늘 보인다(잘려도 누를 자리가 남아야 한다). */
.tab-nav--doc .tab-nav__tab[data-v-bc497c2b] {
  flex: 0 1 auto;
  min-width: 0;
  /* 상한 — 파일 이름은 길다. 실측 2026-09-13(창 1600·오른쪽 칸 900): 16rem 이면 세 탭이 763px 을
     넘겨 두 줄이 됐다. 12rem 이면 셋이 한 줄에 선다(넘치면 설정(화면 › 탭)이 정한 대로 접거나 민다). */
  max-width: 12rem;
  justify-content: flex-start;
}
.tab-nav--doc .tab-nav__label[data-v-bc497c2b] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 축약 라벨은 데스크톱에서 숨김 — 모바일에서만 노출 */
.tab-nav__label--short[data-v-bc497c2b] {
  display: none;
}

/* === 좁은 화면 — filter 변종 건수는 폰트만 줄이고 라벨 옆 위치 유지 ===
   (이전엔 무조건 column stack 으로 강제했는데 카운트(2) 정도는 가로 폭이 충분하므로
   라벨 옆 row 유지가 자연스럽다. 정말 좁으면 nav 의 flex-wrap 으로 탭 단위 행 wrap.) */
@media (max-width: 480px) {
.tab-nav--filter .tab-nav__count[data-v-bc497c2b] {
    font-size: var(--size-meta);
    line-height: var(--line-none);
}

  /* === 모바일 ② — 더 좁으면 축약 라벨(shortLabel)로 교체 ===
     shortLabel 을 준 탭에만 적용된다(--full/--short 는 shortLabel 이 있을 때만 렌더).
     위 '데스크톱에서 숨김'(.tab-nav__label--short) 과 특이도가 같으므로 반드시
     그 뒤에 와야 한다 — 순서가 바뀌면 축약 라벨이 영영 안 뜬다. */
.tab-nav__label--full[data-v-bc497c2b] {
    display: none;
}
.tab-nav__label--short[data-v-bc497c2b] {
    display: inline;
}

  /* 균등 분할(sub·fill)도 이 폭에서는 해제한다 — 탭 칸이 글자보다 좁아지면
     nowrap 인 라벨이 칸 밖으로 삐져나와 옆 탭 글자와 겹친다(실측: 서브탭 7개 @360px
     에서 '모니터링회사 목록준 데이터' 로 뭉개짐). 여기서는 글자 폭만큼만 차지하고,
     한 줄에 다 못 들어가면 탭 바가 줄바꿈(nav 의 flex-wrap)해 아래 줄로 넘긴다.
     (fill 은 **두 줄로 넘어간 뒤에만** 여기에 해당한다 — 한 줄일 때는 아래 규칙이 이긴다) */
  /* ⛔ 특이도를 기본 규칙과 맞춰 둔다 — 기본 쪽에 `:not(.tab-nav--no-fill)` 가 붙어 있어
     그냥 두면 **이 해제 규칙이 져서** 좁은 화면에서도 균등분할이 남는다
     (실측 2026-09-03: 서브탭이 94px 로 갈려 라벨이 아이콘 밑으로 떨어졌다). */
.tab-nav--sub:not(.tab-nav--no-fill) .tab-nav__tab[data-v-bc497c2b],
  .tab-nav--sub .tab-nav__tab[data-v-bc497c2b],
  .tab-nav--wrapped.tab-nav--fill .tab-nav__tab[data-v-bc497c2b]:not(.tab-nav__tab--icon-only) {
    flex: 0 1 auto;
}

  /* ⛔ **다만 늘리기까지 끄면 안 된다**(접수 MSHOP-202608-0009). 라벨 탭이 제 글자 폭에
     멈추면 남는 자리를 갈 곳이 없어 오른쪽이 비고, 그 자리를 늘어나는 탭 하나가 있으면
     그쪽이 통째로 가져간다. 한 줄로 들어가는 동안은 **남는 자리를 라벨 탭끼리** 나눠 갖는다 —
     `1 1 auto` 는 기준이 글자 폭이라 제 내용보다 작아지지 않으므로 위의 겹침도 생기지 않는다. */
.tab-nav--fill:not(.tab-nav--wrapped):not(.tab-nav--no-fill) .tab-nav__tab[data-v-bc497c2b]:not(.tab-nav__tab--icon-only) {
    flex: 1 1 auto;
}

  /* 서브탭도 **한 줄에 들어가는 동안은** 남는 자리를 나눠 갖는다(사용자 지적 2026-09-02 —
     모바일에서 서브탭이 왼쪽으로 몰려 오른쪽이 비어 있었다: 5개가 393px 중 183px 만 씀).
     ⛔ 균등분할(`1 1 0`)로 되돌리는 것이 아니다 — 그건 칸을 글자보다 좁게 만들어 위 주석의
        겹침을 도로 부른다. `1 1 auto` 는 기준이 제 글자 폭이라 그보다 작아지지 않는다.
     ⛔ 옆으로 미는 중(`--scroll`)에는 늘리지 않는다 — 스크롤 통 안에서 늘리면 겹친다. */
  /* ⛔ **한 줄에 들어가면 남는 자리를 탭끼리 나눠 갖는다**(사용자 지적 2026-09-02 —
     회사정보·상품정보 등에서 탭이 왼쪽으로 몰리고 오른쪽이 비어 있었다).
     `1 1 auto` 는 기준이 제 글자 폭이라 그보다 작아지지 않아 겹침을 부르지 않는다.
     ⛔ 옆으로 미는 중(`--scroll`)에는 늘리지 않는다 — 스크롤 통 안에서 늘리면 겹친다. */
.tab-nav:not(.tab-nav--wrapped):not(.tab-nav--scroll):not(.tab-nav--no-fill) > .tab-nav__tab[data-v-bc497c2b]:not(.tab-nav__tab--icon-only) {
    flex: 1 1 auto;
}
}

/* === ④ 모바일에서는 두 줄로 넘기지 않고 **옆으로 민다** ===
   (접수 MSHOP-202609-0001, 사용자 확정 2026-09-01)
   실측: 관리자 설정 탭 14개가 393px 에서 두 줄(바 높이 166px), 360px 에서 세 줄(236px)이었다.
   탭은 「무엇을 보는가」를 고르는 자리일 뿐인데 본문 자리를 그만큼 먹는다(한 줄이면 83px).
   ①②③(건수 접기 · 축약 라벨 · 아이콘을 글자 위로)으로 줄일 만큼 줄인 뒤에도 안 들어가면
   **한 줄을 지키고 가로로 스크롤**한다. 켜고 끄는 판단은 스크립트가 한다(`--scroll`).

   ⛔ **탭을 늘리지 않는다**(`flex: 0 0 auto`). 스크롤 통 안에서 `1 1 auto` 로 두면 넘치는
      만큼 탭들이 서로 밀려 라벨(nowrap)이 옆 탭 글자와 겹친다. 여기서는 제 글자 폭만 차지하고
      남는 것은 오른쪽으로 흘려보낸다 — 잘려 보이는 탭이 「더 있다」는 표시가 된다.
   ⛔ **탭 바가 줄어들 수 있어야 한다.** 기본값 `flex-shrink: 0` 인 채로 nowrap 을 주면
      flex 줄 안에 놓인 탭 바(예: 목록 헤더의 왼쪽 탭)는 제 내용만큼 부풀어 **칸 밖으로 넘치고**
      정작 안에서는 스크롤되지 않는다.
   ⛔ **막대는 감춘다.** 가로 막대가 서면 탭 밑줄 바로 아래에 또 하나의 선이 생겨 두 줄처럼 보이고,
      모바일에서는 어차피 손가락으로 민다(iOS 는 미는 동안만 겹쳐 뜬다). */
/* === ④ 한 줄을 지키고 **옆으로 민다** ===
   ⛔ 미디어쿼리로 가두지 않는다 — **언제 이 모양이 되는지는 스크립트가 정한다**
      (모바일이면 언제나, 일반 화면이면 관리자 설정 › 화면의 「탭이 넘칠 때」가 `scroll` 일 때).
      한때 `@media (max-width: 768px) and (hover:none) and (pointer:coarse)` 안에 있어서
      일반 화면에서는 클래스만 붙고 규칙이 안 걸렸다. */
/* ⛔ 부모가 누구든 이겨야 한다. 탭 바를 품는 판마다 제 안여백을 주는데
   (`.page__card > .tab-nav` 8px · `.companies-config` 8px …), 그게 남아 있으면
   sticky 화살표가 그만큼 벽에서 떠 보인다. 부모를 일일이 적는 대신 **클래스를 겹쳐**
   외부 규칙(대개 클래스 두세 개)보다 높은 자리를 잡는다. */
/* 가로 flex 줄 안에서만 줄어든다(스크립트가 `--row-parent` 를 붙인다).
   세로 판에서는 이 값이 높이에 걸려 바가 눌리므로 주지 않는다. */
.tab-nav.tab-nav--row-parent[data-v-bc497c2b] {
  flex-shrink: 1;
  min-width: 0;
}
.tab-nav.tab-nav--scroll.tab-nav--scroll[data-v-bc497c2b] {
  /* 옆으로 미는 자리에서는 탭 사이를 한 단 넓힌다 — 어차피 미는 것이라 폭을 아낄 이유가 없고,
     좁으면 어디까지가 한 탭인지 손가락으로 가늠하기 어렵다(사용자 지시 2026-09-02). */
  -moz-column-gap: var(--gap-group);
       column-gap: var(--gap-group);
  /* 좌우 안여백을 거둔다 — 이게 남아 있으면 sticky 화살표가 벽에서 그만큼 떠 보인다
     (실측 2026-09-02: 안여백 8px 때문에 오른쪽 벽에서 8px 떨어져 있었다).
     ⛔ 바깥 `views/shared.css` 의 `.page__card > .tab-nav { padding-inline: … }` 가 같은
        자리를 잡고 있어, 논리 속성(padding-inline)으로 같이 눌러야 이긴다. */
  /* ⛔ **안여백을 주지 않는다.** sticky 의 left/right 는 **안여백 안쪽**을 기준으로 잡히므로,
     여기에 안여백을 주면 화살표가 그만큼 벽에서 떨어지고 탭 바 앞머리에 빈 칸이 생긴다
     (실측 2026-09-02: 26px 안여백 → 화살표가 26px 안쪽에 뜨고 첫 탭 앞이 비었다).
     부모 판이 주는 안여백도 함께 눌러야 하므로 0 으로 못 박는다.
     ⛔ 탭이 화살표 밑을 지나가는 것은 이 방식의 성질이다 — 안여백으로 막으려 하지 말 것. */
  padding-inline: 0;
  scroll-padding-inline: var(--h-control-sm);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* ⛔ **`flex-shrink: 1` 을 주지 않는다.** 가로로 줄어들라고 준 값인데, 탭 바를 세로 flex 판
     (`.page__card` — flex-direction: column)이 품으면 그 값이 **높이에도** 걸린다.
     게다가 flex 아이템의 자동 최소크기는 overflow 가 `visible` 이 아니게 되는 순간
     0 으로 풀려(CSS Flexbox §4.5) 막을 것이 없다 — 판이 바를 납작하게 누른다.
     ⛔ 그 자리를 `min-height: min-content` 로 되돌리려 했다가 **엔진마다 값이 갈렸다**
        (실측 2026-09-02, 393px 관리자 설정: Chromium 67px / WebKit·Firefox 26px).
        눌린 쪽에서는 세로로 세운 아이콘·글자가 가로로 넘쳐 **탭 이름이 옆 탭을 덮었다.**
     가로만 제한하는 `max-width` 로 바꾼다 — 높이는 내용이 정하고, 어느 엔진에서도 같다. */
  max-width: 100%;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 끝까지 민 뒤 더 밀어도 뒤로가기 제스처(iOS)·페이지 스크롤로 새지 않게 */
  overscroll-behavior-x: contain;
}
.tab-nav.tab-nav--scroll[data-v-bc497c2b]::-webkit-scrollbar {
  display: none;
}
.tab-nav.tab-nav--scroll > .tab-nav__tab[data-v-bc497c2b],
.tab-nav.tab-nav--scroll > .tab-nav__tab[data-v-bc497c2b]:not(.tab-nav__tab--icon-only) {
  flex: 0 0 auto;
}

/* === 옆으로 밀 수 있다는 표시 ===
   원본: components/todo/MetaContentTree.vue 의 `.edit-toolbar__scroll-hint`(캐럿·면·그림자).
   다른 점: 그쪽은 바깥 판에 absolute 로 얹지만, 탭 바는 감쌀 수 없어(`.page__card > .tab-nav`
   같은 직계 선택자가 끊긴다) **통 안에 sticky** 로 세운다. sticky 라 밀어도 끝에 붙어 있는다.
   ⛔ 밀 수 있는 쪽에만 켠다 — 끝에 닿았는데 화살표가 남아 있으면 눌러도 안 움직여 고장으로 보인다. */
.tab-nav.tab-nav--scroll > .tab-nav__scroll-hint[data-v-bc497c2b] {
  position: sticky;
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--h-control-sm);
  /* ⛔ **자리를 먹지도, 나타났다 사라지지도 않는다.**
     sticky 요소는 스크롤 통 안에 있으면 `scrollWidth` 에 들어가므로, `display` 로 껐다 켜면
     **미는 도중 스크롤 범위가 바뀌어** 내용이 튄다(실측 2026-09-02: 범위가 755 ↔ 771 로
     오갔다 — 사용자가 「끝에서 덜컥한다」고 한 것이 이것이다).
     그래서 **언제나 자리에 두고**(음수 여백으로 순 폭 0) 보이기만 끈다. */
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  /* 벽에 붙이되 **눈에 띄어야 한다**(사용자 지시 2026-09-02).
     ⛔ 그림자로 띄우지 않는다 — 떠 있는 상자로 보인다. 대신 ① 안쪽에 구분선을 두어
        탭과 갈라 보이게 하고 ② 잉크를 본문 색으로 올리고 ③ 글리프를 한 단 키운다.
     면은 불투명이라야 한다 — 미는 동안 탭이 이 밑으로 지나간다. */
  /* 휠이 말려 들어가는 느낌 — 안쪽은 비치고 바깥(벽)으로 갈수록 짙어진다.
     딱딱한 상자로 끊지 않으므로 탭이 그 아래로 말려 사라지는 것처럼 보인다.
     ⛔ 면색을 그대로 쓰지 않는다 — 다크에서 `투명 → 면색` 은 검게 빠진다.
        두 끝을 모두 판 색에서 뽑아(veil ↔ page) 테마가 알아서 따라오게 한다. */
  backdrop-filter: blur(1px);
  border: none;
  color: var(--ink-primary);
  font-size: var(--size-body);
  line-height: var(--line-none);
  cursor: pointer;
  z-index: 3;
}
.tab-nav.tab-nav--scroll > .tab-nav__scroll-hint--left[data-v-bc497c2b] {
  left: 0;
  /* 제 폭 + 탭 사이 간격까지 함께 먹어야 앞머리에 빈 칸이 안 남는다
     (실측 2026-09-02: 폭만 먹였더니 간격 16px 이 그대로 남아 첫 탭이 밀려 있었다). */
  margin-right: calc(-1 * (var(--h-control-sm) + var(--gap-group)));
  /* surface-ignore: 그라데이션의 두 끝이 **같은 판 색**이다(0% 알파 ↔ 불투명). 다른 색이
     섞여 들 자리가 없어 다크에서 검게 빠지는 그 사고와 다르다. 알파만 0→100 으로 오른다. */
  background: linear-gradient(to left,
    color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
    var(--bg-veil) 35%, var(--bg-page) 100%);
}
.tab-nav.tab-nav--scroll > .tab-nav__scroll-hint--right[data-v-bc497c2b] {
  right: 0;
  /* 위와 같은 이유 — 폭 + 간격 */
  margin-left: calc(-1 * (var(--h-control-sm) + var(--gap-group)));
  /* surface-ignore: 위와 같은 이유 — 두 끝이 같은 판 색이고 알파만 오른다. */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
    var(--bg-veil) 35%, var(--bg-page) 100%);
}
.tab-nav.tab-nav--scroll.has-left-hint > .tab-nav__scroll-hint--left[data-v-bc497c2b],
.tab-nav.tab-nav--scroll.has-right-hint > .tab-nav__scroll-hint--right[data-v-bc497c2b] {
  opacity: 1;
  pointer-events: auto;
}


.auto-context[data-v-09c4aafd] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.auto-context__title[data-v-09c4aafd] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.auto-context__icon[data-v-09c4aafd] {
  color: var(--ink-brand);
}

/* 라벨 폭을 맞춰 값이 한 줄로 정렬되게 — 두 화면 모두 같은 모양이 된다. */
.auto-context__list[data-v-09c4aafd] {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--gap-glyph) var(--gap-stack);
  margin: 0;
  padding: var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
}
.auto-context__label[data-v-09c4aafd] {
  color: var(--ink-muted);
}
.auto-context__value[data-v-09c4aafd] {
  margin: 0;
  color: var(--ink-primary);
  word-break: break-all;
}
.auto-context__value--mono[data-v-09c4aafd] {
  font-family: var(--font-mono);
}

/* 원본: components/admin/newsletter/NewsletterDetailModal.vue 의 .nl-link-url (링크 한 줄) */
.auto-context__link[data-v-09c4aafd] {
  color: var(--ink-brand);
  text-decoration: none;
  word-break: break-all;
}
.auto-context__link[data-v-09c4aafd]:hover {
  text-decoration: underline;
}
.auto-context__empty[data-v-09c4aafd] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}

/*
  모달이 열려 있는 동안 높이가 변하지 않는다 — 접수 경로는 설정이 정해 두므로 열린 뒤에
  구성이 바뀌지 않는다('자동으로 함께 보내는 정보'는 사용자가 스스로 여는 동작이라 예외).
*/
.service-desk-dialog__channel[data-v-baa4983b] {
  margin-bottom: var(--gap-stack);
}
.service-desk-dialog__field[data-v-baa4983b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}

/* 라벨과 [화면 캡처] 를 한 줄에 둔다 — 세로로 쌓으면 본문 높이가 늘어 창 크기가 바뀐다. */
.service-desk-dialog__label-row[data-v-baa4983b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}

/* 접어두기는 왼쪽 끝 — [취소][확인] 과 성격이 다른 동작이라 붙여 두지 않는다. */
.service-desk-dialog__collapse[data-v-baa4983b] {
  margin-right: auto;
}
.service-desk-dialog__label[data-v-baa4983b] {
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}


/* ⛔ 모달은 열려 있는 동안 크기가 변하지 않아야 한다(디자인 시스템 규칙).
   ① 글을 쓸수록 편집기가 자라면 [확인] 버튼이 아래로 밀린다 → 편집기 높이를 못 박는다.
   ② '자동으로 함께 보내는 정보'를 펼쳐도 마찬가지다 → 본문 전체 높이를 못 박고
      펼친 내용은 본문 안에서 스크롤한다(실측: 펼치면 620 → 822 로 커지고 확인이 101px 내려갔다). */
/*
  본문 자체는 굴러가지 않는다(overflow: hidden) — 굴러가는 곳은 탭 안의 한 곳뿐이다.
  높이를 못 박는 이유는 종전과 같다: 안에서 무엇을 하든 창 크기가 변하면 안 된다.
*/
.service-desk-dialog__body[data-v-baa4983b] {
  /* 굴러갈 자리를 편집기 한 곳으로 몰았으므로 그만큼 쓸 만한 높이를 준다.
     창이 화면보다 커지는 경우는 AppModal 의 max-height 가 잡고, 그때는 이 칸이 줄면서 편집기가 줄어든다. */
  height: 30rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.service-desk-dialog__pane[data-v-baa4983b] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-cozy);
}

/* 정보 탭은 목록이 길어질 수 있어 이 칸이 굴러간다(이 탭에서 굴러가는 유일한 곳). */
.service-desk-dialog__pane--auto[data-v-baa4983b] {
  overflow-y: auto;
}

/* 설명 칸이 남는 높이를 다 차지한다 → 편집기 안쪽만 굴러간다. */
.service-desk-dialog__field--grow[data-v-baa4983b] {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
.service-desk-dialog__field--grow[data-v-baa4983b] .rich-text-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.service-desk-dialog__field--grow[data-v-baa4983b] .rich-text-editor__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* EditorContent 가 감싸는 div 가 있든 없든 높이를 끝까지 내린다. */
.service-desk-dialog__field--grow[data-v-baa4983b] .rich-text-editor__content > div {
  height: 100%;
}
.service-desk-dialog__field--grow[data-v-baa4983b] .tiptap {
  height: 100%;
  min-height: 0;
  max-height: none;
}
.service-desk-dialog__hint[data-v-baa4983b] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.service-desk-dialog__auto-list[data-v-baa4983b] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-glyph) var(--gap-inline);
  margin: 0;
  font-size: var(--size-body);
}
.service-desk-dialog__auto-list dt[data-v-baa4983b] {
  color: var(--ink-muted);
  white-space: nowrap;
}
.service-desk-dialog__auto-list dd[data-v-baa4983b] {
  margin: 0;
  color: var(--ink-secondary);
  word-break: break-all;
}

/*
  접어둔 접수 자리표 — 화면 오른쪽 아래에 떠 있다.
  z-index: 앱 크롬(--z-fixed)보다 위여야 탑바·사이드바에 가리지 않고,
  모달(--z-modal)보다 아래여야 다른 모달을 열었을 때 그 위를 덮지 않는다.
*/
.service-desk-draft[data-v-baa4983b] {
  position: fixed;
  right: var(--space-band);
  bottom: var(--space-band);
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-float);
}
.service-desk-draft__icon[data-v-baa4983b] {
  color: var(--ink-brand);
}
.service-desk-draft__label[data-v-baa4983b] {
  font-size: var(--size-body);
  color: var(--ink-primary);
  white-space: nowrap;
}

/* 헤더 — 브랜드(좌) + 버전 뱃지(우). AppModal 헤더 슬롯 안에서 폭 채움. */
.about__head[data-v-02d532fe] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-stack);
}
.about__title[data-v-02d532fe] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.about__version[data-v-02d532fe] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
  padding: var(--space-tight) var(--space-cozy);
  border-radius: var(--radius-control);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.about__build[data-v-02d532fe] {
  /* 빌드 자리는 판에 곁들이는 값 — 판보다 작고 옅게. 쓰이는 선례가 있는 이름만 쓴다
     (--size-meta 794곳 · --ink-secondary 929곳). */
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.about__env[data-v-02d532fe] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-warning);
  background: var(--bg-warning-soft);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
}
.about__copyright[data-v-02d532fe] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.about__legal[data-v-02d532fe] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-stack);
  font-size: var(--size-meta);
}
.about__legal-link[data-v-02d532fe] {
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--motion-base);
}
.about__legal-link[data-v-02d532fe]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.about__legal-sep[data-v-02d532fe] {
  color: var(--ink-muted);
}

.user-avatar[data-v-00cffccc] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  vertical-align: middle;
  line-height: var(--line-none);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--bg-field);
  background-size: cover;
  background-position: center;
}
.user-avatar--initials[data-v-00cffccc] {
  color: var(--ink-secondary);
  font-weight: var(--weight-title);
}
.user-avatar--icon[data-v-00cffccc] {
  color: var(--ink-muted);
}

.confirm-dialog__message[data-v-cdb31ce3] {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
  white-space: pre-line;
}
.confirm-dialog__description[data-v-cdb31ce3] {
  margin-top: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
  white-space: pre-line;
}
.confirm-dialog__input-area[data-v-cdb31ce3] {
  margin-top: var(--gap-stack);
}
.confirm-dialog__input-label[data-v-cdb31ce3] {
  display: block;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.confirm-dialog__input[data-v-cdb31ce3] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-float);
  color: var(--ink-primary);
  font-size: var(--size-body);
  outline: none;
  box-sizing: border-box;
}
.confirm-dialog__input[data-v-cdb31ce3]:focus {
  border-color: var(--ink-brand);
}
.confirm-dialog__checkbox-label[data-v-cdb31ce3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-top: var(--gap-stack);
  font-size: var(--size-body);
  color: var(--ink-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.confirm-dialog__checkbox-label input[type="checkbox"][data-v-cdb31ce3] {
  margin: 0;
  cursor: pointer;
}

/* confirmHref <a> 링크 버튼 — native <a> 이므로 AppButton 으로 대체 불가 */
.confirm-dialog__btn--confirm[data-v-cdb31ce3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: var(--space-snug) var(--space-roomy);
  border-radius: var(--radius-control);
  border: var(--line-w) solid transparent;
  font-size: var(--size-body);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.confirm-dialog__btn--confirm[data-v-cdb31ce3]:hover {
  filter: brightness(1.05);
}

/* ── 팝오버 (단순 확인/취소) — 박스 크기·패딩은 sm 모달과 동일 ── */
.confirm-pop[data-v-cdb31ce3] {
  position: fixed;
  width: min(360px, calc(100vw - var(--space-roomy)));
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-modal);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-popover);
}
.confirm-pop__header[data-v-cdb31ce3] {
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.confirm-pop__title[data-v-cdb31ce3] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.confirm-pop__body[data-v-cdb31ce3] {
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
}
.confirm-pop__footer[data-v-cdb31ce3] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  border-top: var(--line-strong);
  flex-shrink: 0;
}
.confirm-pop-enter-active[data-v-cdb31ce3],
.confirm-pop-leave-active[data-v-cdb31ce3] {
  transition: opacity var(--motion-base), transform var(--motion-base);
}
.confirm-pop-enter-from[data-v-cdb31ce3],
.confirm-pop-leave-to[data-v-cdb31ce3] {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
}

/* 읽어 주기 전용 껍데기 — 배치에 끼어들지 않는다(자식이 그대로 body 의 자식처럼 놓인다). */
.toast-live[data-v-aa0fc7a8] { display: contents;
}
.toast-container[data-v-aa0fc7a8] {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  /* 모달(10010+) 위에 떠야 함 — 토큰 --z-toast=12000 사용 */
  z-index: var(--z-toast);
  min-width: 300px;
  max-width: 90vw;
  backdrop-filter: blur(8px);
}
.toast-container.success[data-v-aa0fc7a8] { border-color: var(--ink-success);
}
.toast-container.error[data-v-aa0fc7a8] { border-color: var(--ink-danger);
}
.toast-container.warning[data-v-aa0fc7a8] { border-color: var(--ink-warning);
}
.icon[data-v-aa0fc7a8] {
  /* 곁들이는 글리프는 옆 글자(--font-md)와 같은 단 — 알림 아이콘이라고 키우지 않는다.
     키우려면 제 칸(면·테두리)을 줘야 한다. 검사: npm run lint:icon-scale */
  font-size: var(--icon-label);
}
.success .icon[data-v-aa0fc7a8] { color: var(--ink-success);
}
.error .icon[data-v-aa0fc7a8] { color: var(--ink-danger);
}
.warning .icon[data-v-aa0fc7a8] { color: var(--ink-warning);
}
.info .icon[data-v-aa0fc7a8] { color: var(--ink-brand);
}
.message[data-v-aa0fc7a8] {
  flex: 1;
  font-size: var(--size-body);
  color: var(--ink-primary);
  white-space: pre-wrap;
}
.toast-enter-active[data-v-aa0fc7a8],
.toast-leave-active[data-v-aa0fc7a8] {
  transition: all var(--motion-base) cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-enter-from[data-v-aa0fc7a8],
.toast-leave-to[data-v-aa0fc7a8] {
  opacity: 0;
  transform: translate(-50%, 1rem);
}

.email-required[data-v-241ba1d9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) 0;
}
.email-required__icon[data-v-241ba1d9] {
  font-size: var(--icon-lead);
  color: var(--ink-warning);
}
.email-required__message[data-v-241ba1d9] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  line-height: var(--line-relaxed);
}
.email-required__hint[data-v-241ba1d9] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}

.sidebar[data-v-3a9e55f7] {
  width: 220px !important;
  flex: 0 0 220px !important;
  /* 껍데기 — 다크에서 비워 바탕 글로우가 이어지게 (라이트는 면색 유지) */
  background: var(--bg-page);
  border-right: var(--line-strong);
  display: flex;
  flex-direction: column;
  transition: width var(--motion-base) ease;
}
.sidebar--collapsed[data-v-3a9e55f7] {
  width: 64px !important;
  flex: 0 0 64px !important;
}
.sidebar__header[data-v-3a9e55f7] {
  /* ⛔ 위(브랜드)와 아래(메뉴)가 **같은 두 세로선**에 서야 한다 — 아이콘 가운데선과 글자 시작선.
     본문 padding 0.5rem + 항목 padding-left 0.85rem = 메뉴 아이콘이 서는 자리(1.35rem),
     그 아이콘 칸 너비는 --icon-lg(20px), 글자는 그 뒤 0.75rem 지점에서 시작한다.
     브랜드 로고는 32px 로 **더 크므로**, 같은 가운데선에 세우려면 그 차이의 절반만큼
     왼쪽으로 내밀고 글자와의 사이는 그만큼 좁혀야 한다. 안 그러면 로고가 오른쪽으로
     치우쳐 보이고 글자도 밀린다(2026-08-22 실측: 로고 가운데 +4.4px · 글자 +10.4px).
     ⛔ 로고를 줄여서 맞추지 않는다 — 브랜드는 브랜드 크기가 있다(사용자 지시). */
  --sidebar-brand-size: 2rem;
  --sidebar-inset: calc(0.5rem + 0.85rem);
  --sidebar-brand-overhang: calc((var(--sidebar-brand-size) - var(--icon-header)) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 탑바와 같은 높이 — 아래 구분선이 한 줄로 맞는다 */
  min-height: var(--h-app-header);
  padding: 0.75rem var(--sidebar-inset) 0.75rem calc(var(--sidebar-inset) - var(--sidebar-brand-overhang));
  border-bottom: var(--line-strong);
}
.sidebar__brand[data-v-3a9e55f7] {
  display: flex;
  align-items: center;
  /* 로고가 내민 만큼 사이를 좁힌다 — 그래야 글자가 메뉴 글자와 같은 선에서 시작한다. */
  gap: calc(0.75rem - var(--sidebar-brand-overhang));
  font-weight: var(--weight-title);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--motion-base) ease;
}
.sidebar__brand[data-v-3a9e55f7]:hover {
  opacity: 0.8;
}
.sidebar__brand-name[data-v-3a9e55f7] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__brand-logo[data-v-3a9e55f7] {
  width: var(--sidebar-brand-size);
  height: var(--sidebar-brand-size);
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.sidebar__brand-icon[data-v-3a9e55f7] {
  width: var(--sidebar-brand-size);
  height: var(--sidebar-brand-size);
}
.sidebar__brand-icon--bounce[data-v-3a9e55f7] {
  animation: logoBounce-3a9e55f7 2s;
}
.sidebar__brand-icon--pulse[data-v-3a9e55f7] {
  animation: logoPulse-3a9e55f7 0.3s ease;
}
@keyframes logoBounce-3a9e55f7 {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-10px);
}
60% {
    transform: translateY(-5px);
}
}
@keyframes logoPulse-3a9e55f7 {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.15);
}
100% {
    transform: scale(1);
}
}
.sidebar__toggle-icon[data-v-3a9e55f7] {
  display: inline-block;
  transition: transform var(--motion-base);
}
.sidebar__toggle-icon--flipped[data-v-3a9e55f7] {
  transform: scaleX(-1);
}
.sidebar__body[data-v-3a9e55f7] {
  flex: 1;
  padding: var(--space-snug);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  overflow-y: auto;
  overflow-x: hidden; /* Revert to hidden since we use Teleport */
}
.sidebar__item[data-v-3a9e55f7] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-roomy);
  border-radius: var(--radius-float);
  color: var(--ink-secondary);
  /* cursor: pointer added in hover styles */
}
.sidebar__item[data-v-3a9e55f7]:hover {
  background: var(--bg-field);
  color: var(--ink-primary);
}
.sidebar__item--active[data-v-3a9e55f7] {
  background: var(--bg-field);
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  position: relative;
}
.sidebar__item--active[data-v-3a9e55f7]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bg-brand-vivid);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.sidebar__icon[data-v-3a9e55f7] {
  /* ⛔ 아이콘은 본문 사다리(--font-*)가 아니라 아이콘 사다리(--icon-*)를 쓴다.
     여기 20px(--font-xl)는 옛 Material Symbols 기준이었다 — 그건 24px 격자에 얇은
     외곽선이라 20px 에서도 가벼웠지만, 속이 찬 FontAwesome 은 같은 20px 에서 훨씬
     크고 무겁게 보인다. 사이트의 다른 아이콘은 14~15px 인데 사이드바만 20px 였다
     (2026-08-22 실측: 글자 14px 대비 1.43배). */
  font-size: var(--icon-toolbar);
  /* 상자를 고정해 글자와 가운데를 맞춘다. 옛 .material-symbols-rounded 가 하던 일인데
     그 클래스를 지우면서 함께 사라져 display:block · 25×20 으로 정렬이 풀려 있었다. */
  width: var(--icon-header);
  height: var(--icon-header);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-base) ease;
}
.sidebar__icon--animate[data-v-3a9e55f7] {
  animation: iconPulse-3a9e55f7 0.3s ease;
}
.sidebar__icon--streaming[data-v-3a9e55f7] {
  animation: iconStreaming-3a9e55f7 1.2s ease-in-out infinite;
  color: var(--ink-brand);
  filter: drop-shadow(0 0 4px var(--ink-brand));
}
@keyframes iconStreaming-3a9e55f7 {
0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--ink-brand));
}
50% {
    opacity: 0.3;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--ink-brand));
}
}
@keyframes iconPulse-3a9e55f7 {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.15);
}
100% {
    transform: scale(1);
}
}
.sidebar__category[data-v-3a9e55f7] {
  padding: 0 var(--space-roomy) var(--space-tight);
  margin-top: 0;
  padding-top: var(--space-snug);
}
.sidebar__category[data-v-3a9e55f7]:first-child {
  margin-top: 0;
  padding-top: 0;
}
.sidebar__category-label[data-v-3a9e55f7] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  opacity: 0.7;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sidebar__divider[data-v-3a9e55f7] {
  height: 1px;
  background: var(--line-color);
  margin: var(--gap-inline) var(--gap-stack);
}
.sidebar__skeleton[data-v-3a9e55f7] {
  height: 38px;
  border-radius: var(--radius-float);
  background: var(--bg-field);
  animation: pulse-3a9e55f7 1.5s infinite ease-in-out;
}
@keyframes pulse-3a9e55f7 {
0% {
    opacity: 0.6;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0.6;
}
}
@media (max-width: 768px) {
  /* 좁은 화면에서는 드로어다 — 평소에는 화면 밖에 서 있고 탑바 ☰ 로 밀려 나온다.
     ⛔ **닫힌 채로 시작해야 한다.** 열린 채 시작하면 첫 화면부터 본문을 통째로 덮어
     아무것도 못 누른다(390px 실측). 여는 상태는 AppShell 의 mobileDrawerOpen 이
     쥐고 있고 기본값이 닫힘이다 — 데스크톱의 접기 상태(localStorage)와 섞지 않는다.
     ⛔ 폭을 좁혀 아이콘만 남기지 말 것 — 안쪽 여백(item 좌우 0.85rem)이 그대로라
     아이콘이 25px→7.81px 로 눌린 뒤 overflow:hidden 에 잘려 알아볼 수 없게 된다
     (2026-08-18 운영 실사고). 좁히려면 이 미디어쿼리에서 여백부터 걷어야 한다. */
.sidebar[data-v-3a9e55f7] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* 드로어는 탑바(--z-fixed) 위로 올라와야 한다 */
    z-index: var(--z-drawer);
    /* ⛔ 드로어는 **불투명**이라야 한다 — 껍데기(--chrome-bg)는 두 테마 모두 transparent 라
       흐름 안(데스크톱)에서는 맞지만, 여기서는 본문 위에 **떠서** 덮는 자리다.
       비워 두면 뒤 목록 글자가 메뉴 글자에 겹쳐 읽힌다(모바일 가독성 저하 신고 2026-08-23). */
    background: var(--bg-float);
    width: 260px !important;
    flex: 0 0 260px !important;
    transform: translateX(-100%);
    transition: transform var(--motion-base) ease;
    border-right: var(--line-strong);
    box-shadow: var(--shadow-md);
}
.sidebar[data-v-3a9e55f7]:not(.sidebar--collapsed) {
    transform: translateX(0);
}
.sidebar--collapsed[data-v-3a9e55f7] {
    transform: translateX(-100%);
    width: 260px !important;
    flex: 0 0 260px !important;
}
}

/* Tooltip global styles */

/* Global style for teleported tooltip */
.sidebar-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  transform: translateY(-50%);
  background: var(--bg-float);
  color: var(--ink-primary);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-card);
  border: var(--line-strong);
  font-size: var(--size-body);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  font-weight: var(--weight-label);
}

/* Dark mode support if variables are not enough */
:root[class~="dark"] .sidebar-tooltip {
  background: var(--bg-float);
  color: var(--ink-primary);
  border-color: var(--line-color);
}

.dm-notify-overlay[data-v-7922ec0c] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
}
.dm-notify[data-v-7922ec0c] {
  /* ⛔ 떠 있는 것은 **불투명**이라야 한다(style.css 면 주석) — 카드 면(--bg-card)은
     다크에서 흰 베일 한 겹이라 뒤 글자가 그대로 비쳐 겹쳐 읽혔다(2026-09-15 실사고).
     모달·드롭다운과 같은 --bg-float 를 쓴다. */
  background: var(--bg-float);
  border-radius: var(--radius-float);
  padding: var(--space-band);
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-float);
}
.dm-notify__icon[data-v-7922ec0c] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
  margin-bottom: var(--gap-stack);
}
.dm-notify__body h4[data-v-7922ec0c] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.dm-notify__body p[data-v-7922ec0c] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.dm-notify__actions[data-v-7922ec0c] {
  display: flex;
  justify-content: center;
  gap: var(--gap-inline);
  margin-top: var(--gap-band);
}
.dm-notify--urgent[data-v-7922ec0c] {
  border: var(--line-w-thick) solid var(--ink-warning);
  animation: urgent-pulse-7922ec0c 1.5s ease-in-out 3;
}
@keyframes urgent-pulse-7922ec0c {
0%, 100% { box-shadow: 0 0 0 0 transparent;
}
  /* role-ignore: 퍼지는 맥박 링 — 반경이 0에서 커지는 애니메이션이라 고정 그림자로 못 바꾼다 */
50% { box-shadow: 0 0 0 8px var(--bg-warning-soft);
}
}

.topbar[data-v-3ce78390] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 사이드바 헤더와 같은 높이 — 아래 구분선이 한 줄로 맞는다 */
  min-height: var(--h-app-header);
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  /* ⛔ 상단바는 비우지 않는다 — 내용이 그 아래로 지나가 글자가 겹쳐 읽힌다
     (2026-08-22 실사고). 불투명 판으로 칠하지도 않는다(띠가 된다).
     유리처럼: 아주 옅게 깔고 뒤를 흐려 지나가는 글자를 뭉갠다. 글로우는 통과한다. */
  background: var(--bg-page);  /* surface-ignore: 위 주석 참조 — 상단바는 투명(--bg-sticky)이 아니라 아주 옅은 판 + 흐림이라야 지나가는 글자가 뭉개진다(2026-08-22 실사고) */
  backdrop-filter: var(--blur-topbar);
  -webkit-backdrop-filter: var(--blur-topbar);
  position: sticky;
  top: 0;
  /* 페이지 컨텐츠의 sticky 헤더(--z-sticky: 1020)보다 위에 와야 함 */
  z-index: var(--z-fixed);
}
.topbar__left[data-v-3ce78390] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
  flex: 1 1 auto;
  min-width: 0; /* 오른쪽 컨트롤을 밀지 않고, 왼쪽 영역이 먼저 줄어들도록 허용 */
}
.topbar__title[data-v-3ce78390] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0; /* flex 컨테이너 안에서 ellipsis가 동작하도록 최소 너비 제한 */
}
.topbar__title h1[data-v-3ce78390] {
  margin: 0;
  font-size: var(--size-title-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 제목이 길어질 때 줄바꿈 대신 ... 으로 표시 */
}
.topbar__breadcrumb[data-v-3ce78390] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--gap-glyph);
  min-width: 0;
  overflow: hidden;
}

/* 모바일 전용 페이지 타이틀(경로 대신) — 데스크톱에서는 숨김 */
.topbar__title-fallback[data-v-3ce78390] {
  display: none;
}
@media (max-width: 768px) {
.topbar__breadcrumb[data-v-3ce78390] {
    display: none;
}
.topbar__title-fallback[data-v-3ce78390] {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
}

/* 지나온 자리 — 지금 있는 곳보다 흐리다. 클릭 여부와 무관하게 **자리**가 색을 정한다. */
.topbar__breadcrumb-crumb[data-v-3ce78390] {
  color: var(--ink-secondary);
  /* h1 안이라 굵기를 명시하지 않으면 브라우저 기본 bold(700)를 상속한다 — 조각마다 굵기가 갈린다. */
  font-weight: var(--weight-label);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 지금 있는 자리 — 끝 칸. 길면 여기서 줄인다. */
.topbar__breadcrumb-crumb--current[data-v-3ce78390] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* 클릭 가능한 칸(router-link · onClick 칸)만 손 모양과 hover 를 갖는다. */
a.topbar__breadcrumb-crumb[data-v-3ce78390] {
  transition: color var(--motion-base);
  /* onClick 칸은 href 없는 <a> 라 기본 커서가 텍스트다 — 링크와 같게 맞춘다. */
  cursor: pointer;
}
a.topbar__breadcrumb-crumb[data-v-3ce78390]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.topbar__breadcrumb-separator[data-v-3ce78390] {
  color: var(--ink-muted);
  margin: 0 var(--gap-glyph);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar__title-link[data-v-3ce78390] {
  color: var(--ink-primary);
  text-decoration: none;
  transition: color var(--motion-base);
}
.topbar__title-link[data-v-3ce78390]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.topbar__title p[data-v-3ce78390] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.topbar__right[data-v-3ce78390] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.topbar__controls[data-v-3ce78390] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.topbar__menu-wrapper[data-v-3ce78390] {
  position: relative;
}
.topbar__language-btn[data-v-3ce78390] {
  /* ⛔ 탑바 우측 버튼은 전부 AppButton variant="secondary" size="sm" 이다.
     이 버튼만 국기+글자+꺾쇠가 들어 폭이 넓어 자체 <button> 으로 남았지만,
     **면·테두리·라운드는 표준과 같아야** 한다 — 안 그러면 한 줄에서 혼자 다른 상자가 된다
     (2026-08-22 실측: 배경 3갈래 · 라운드 2갈래였다). */
  /* 경계는 테두리가 만든다 — 다크에서 면이 투명해도 안 사라진다. */
  background: var(--bg-page); /* surface-ignore: 표준 .app-btn--secondary 와 같은 면이라야 한 줄이 맞는다 */
  border: var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-primary);
  /* ⛔ 표준 아이콘 버튼(.app-btn--sm.app-btn--icon-only)과 **가로·세로 모두** 같아야 한다.
     여기만 32×28 이었다(2026-08-22 사용자 지적).
     넓은 화면에서는 글자(.topbar__language-text)와 꺾쇠가 **둘 다 display:none** 이라
     실제로 보이는 것은 깃발/아이콘 하나뿐이다 — 즉 다른 버튼과 똑같은 아이콘 버튼이다.
     글자가 보이는 화면 폭에서만 가로가 내용만큼 늘어난다(아래 미디어쿼리). */
  padding: 0;
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-base);
  /* 표준 .app-btn--sm 과 같은 뿌리 — 아이콘이 1.1em 이라 뿌리가 다르면 크기가 갈린다. */
  font-size: var(--size-label);
  line-height: var(--line-none);
  box-sizing: border-box;
}
.topbar__language-btn[data-v-3ce78390]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}

/* 깃발이 없는 항목(시스템 설정)의 아이콘 — 깃발과 같은 자리·같은 크기, 색은 테마를 따른다. */
.topbar__language-icon[data-v-3ce78390] {
  /* 표준 .app-btn :slotted(i) 와 같은 값 — 뿌리(--font-sm)에 대한 배수라 버튼 크기를 따라간다. */
  font-size: 1.1em; /* css-ignore: 표준 AppButton 의 아이콘 배수(1.1em)와 같게 — 절대값을 박으면 그 자리만 어긋난다 */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  line-height: var(--line-none);
  flex-shrink: 0;
}
.topbar__language-flag[data-v-3ce78390] {
  font-size: 1.1em; /* css-ignore: 위 아이콘과 같은 배수 — 깃발도 같은 자리다 */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  line-height: var(--line-none);
  flex-shrink: 0;
  /* Windows에서 국기 이모지가 제대로 표시되도록 폰트 설정 */
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
  /* 이모지가 제대로 렌더링되도록 강제 */
  font-feature-settings: 'liga' off;
  -webkit-font-feature-settings: 'liga' off;
}
.topbar__language-text[data-v-3ce78390] {
  display: none;
  font-size: var(--size-label);
  white-space: nowrap;
}
.topbar__language-chevron[data-v-3ce78390] {
  display: none;
  font-size: var(--icon-marker);
  margin-left: var(--gap-glyph);
  opacity: 0.6;
  transition: transform var(--motion-base);
}
.topbar__language-btn:hover .topbar__language-chevron[data-v-3ce78390] {
  opacity: 1;
}
.topbar__user[data-v-3ce78390] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  position: relative;
}

/* AppButton variant="secondary" size="sm" icon-only 와 외형을 일치시킨다 —
   안읽음 뱃지 내장으로 네이티브 <button> 으로 남긴 예외 (template 의 eslint-disable 참조). */
.topbar__dm-btn[data-v-3ce78390] {
  position: relative;
  /* 표준(secondary)과 같은 면 — 안읽음 뱃지 때문에 자체 <button> 으로 남았을 뿐이다. */
  background: var(--bg-page); /* surface-ignore: 위 언어 버튼과 같은 사유 — 표준 .app-btn--secondary 와 같은 면 */
  border: var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-primary);
  padding: 0;
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-base);
  /* 표준 .app-btn--sm 과 같은 뿌리 — 아이콘이 1.1em 이라 뿌리가 다르면 크기가 갈린다. */
  font-size: var(--size-label);
  line-height: var(--line-none);
  box-sizing: border-box;
}
.topbar__dm-btn[data-v-3ce78390]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.topbar__dm-btn--active[data-v-3ce78390] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.topbar__dm-btn[data-v-3ce78390]:active {
  background: var(--bg-active);
}
.topbar__dm-btn[data-v-3ce78390] {
  font-size: var(--size-label); /* 표준 .app-btn--sm 과 같은 뿌리 */
}
.topbar__dm-btn i[data-v-3ce78390] {
  font-size: 1.1em; /* css-ignore: 표준 AppButton 의 아이콘 배수(1.1em)와 같게 */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.topbar__dm-icon--unread[data-v-3ce78390] {
  /* ⛔ infinite 로 되돌리지 말 것 (2026-08-29 실측). 안 읽은 쪽지가 있는 동안
     전 화면 상단바에서 계속 돌아 60fps 렌더 루프를 잡아 둔다. 흔들림은 steps 로
     만들면 부서져 보이므로 유한 반복으로 두어 몇 차례 알린 뒤 멈춘다. */
  animation: dm-bell-shake-3ce78390 2s ease-in-out 5;
}
@keyframes dm-bell-shake-3ce78390 {
0%, 80%, 100% { transform: rotate(0);
}
85% { transform: rotate(12deg);
}
90% { transform: rotate(-12deg);
}
95% { transform: rotate(6deg);
}
}
.topbar__dm-count[data-v-3ce78390] {
  position: absolute;
  top: -4px;
  right: -4px;
}
.topbar__menu-count[data-v-3ce78390] {
  margin-left: auto;
}
.topbar__user-anchor[data-v-3ce78390] {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.topbar__user-anchor[data-v-3ce78390]:hover .user-avatar {
  transform: scale(1.05);
  transition: transform var(--motion-base);
}

/* 어드민 표시 — 아바타 원 우측 상단 밖으로 살짝 튀어나오게 */
.topbar__admin-mark[data-v-3ce78390] {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-warning);
  color: var(--ink-on-solid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px var(--bg-page);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
  pointer-events: none;
}
.topbar__admin-mark i[data-v-3ce78390] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
}
.topbar__menu[data-v-3ce78390] {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  list-style: none;
  margin: 0;
  padding: var(--space-tight);
  z-index: var(--z-chrome-menu);
}
.topbar__menu-item[data-v-3ce78390] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-roomy);
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: background-color var(--motion-base);
  color: var(--ink-primary);
}
.topbar__menu-item[data-v-3ce78390]:hover {
  background-color: var(--bg-float);
}
.topbar__menu-item--active[data-v-3ce78390] {
  color: var(--ink-brand);
}
.topbar__menu-item--header[data-v-3ce78390] {
  font-weight: var(--weight-strong);
  cursor: default;
}
.topbar__menu-item--header[data-v-3ce78390]:hover {
  background-color: transparent;
}
.topbar__menu-item--clickable[data-v-3ce78390] {
  cursor: pointer;
  font-weight: var(--weight-title);
}
.topbar__menu-item--clickable[data-v-3ce78390]:hover {
  background-color: var(--bg-float);
}
.topbar__menu-separator[data-v-3ce78390] {
  height: 1px;
  background: var(--line-color);
  margin: var(--gap-glyph) 0;
  padding: 0;
}
.menu-item__flag[data-v-3ce78390] {
  font-size: var(--icon-toolbar);
  line-height: var(--line-none);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Windows에서 국기 이모지가 제대로 표시되도록 폰트 설정 */
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
  /* 이모지가 제대로 렌더링되도록 강제 */
  font-feature-settings: 'liga' off;
  -webkit-font-feature-settings: 'liga' off;
}
.menu-item__icon[data-v-3ce78390] {
  font-size: var(--icon-label);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}
.menu-item__label[data-v-3ce78390] {
  flex: 1;
  font-size: var(--size-body);
}
.menu-item__check[data-v-3ce78390] {
  margin-left: auto;
  color: var(--ink-brand);
  font-size: var(--size-body);
}
.menu-item__chevron[data-v-3ce78390] {
  margin-left: auto;
  font-size: var(--icon-marker);
  opacity: 0.6;
  transition: transform var(--motion-base);
}
.topbar__menu-item--submenu[data-v-3ce78390] {
  position: relative;
}
.topbar__menu-item--submenu:hover .menu-item__chevron[data-v-3ce78390] {
  opacity: 1;
  transform: translateX(2px);
}
.topbar__submenu[data-v-3ce78390] {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: var(--gap-inline);
  min-width: 180px;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  list-style: none;
  margin: 0;
  padding: var(--space-tight);
  z-index: var(--z-chrome-submenu);
}
.topbar__back-btn[data-v-3ce78390] {
  margin-right: 0;
}
@media (max-width: 768px) {
.topbar[data-v-3ce78390] {
    padding: var(--pad-row);
}
.topbar__left[data-v-3ce78390] {
    gap: var(--gap-inline);
}
.topbar__title h1[data-v-3ce78390] {
    font-size: var(--size-lead);
}
.topbar__title p[data-v-3ce78390] {
    font-size: var(--size-meta);
}
.topbar__controls[data-v-3ce78390] {
    gap: var(--gap-inline);
}
}
@media (max-width: 480px) {
.topbar__left[data-v-3ce78390] {
    gap: var(--gap-inline);
}
}

/*
  본문 바로가기 — 평소엔 화면 위쪽 밖에 있다가 초점을 받으면 내려온다.
  ⛔ display:none / visibility:hidden 으로 숨기면 **초점 자체가 안 간다**(그러면 있으나 마나다).
     자리를 옮겨 숨기는 것이 정석이다.
*/
.app-shell__skip[data-v-cfff4234] {
  position: fixed;
  top: calc(var(--space-snug) * -8);
  left: var(--space-cozy);
  z-index: var(--z-skip-link);
  padding: var(--pad-row);
  border-radius: var(--radius-control);
  /* 다른 채워진 초록 버튼과 같은 면·잉크를 쓴다 — 다크에서 2.54:1 인 것은
     2026-08-21 에 「대비보다 브랜드 인상」으로 정해진 사이트 전체 결정이고,
     여기만 진하게 하면 그 자리만 다른 초록이 된다(tokens.css --on-primary 주석 참조). */
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--motion-base) ease;
}
.app-shell__skip[data-v-cfff4234]:focus {
  top: var(--space-cozy);
  outline: var(--space-tight) solid var(--ink-on-solid);
  outline-offset: calc(var(--space-tight) / 2);
}

/* 본문은 바로가기의 착지점일 뿐 — 초점 테두리를 그리지 않는다(내용이 옮겨 온 것처럼 보이게). */
.app-shell__content[data-v-cfff4234]:focus {
  outline: none;
}
.app-shell[data-v-cfff4234] {
  display: flex;
  height: 100vh;
  /* iOS Safari 주소 표시줄 문제 해결: CSS 변수 사용 */
  height: var(--vh, 100vh);
  /* 최신 브라우저에서는 dvh 사용 (fallback) */
  height: 100dvh;
  /* 껍데기는 비운다 — 다크에서 바탕 글로우가 그대로 비치도록. 라이트는 면색 유지. */
  background: var(--bg-page);
  color: var(--ink-primary);
  overflow: hidden;
}
.app-shell__main[data-v-cfff4234] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-page);
}
.app-shell__content[data-v-cfff4234] {
  flex: 1 1 auto;
  /* 패딩 제거 (여백 없이 꽉 차게) */
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 가로 스크롤 방지, 세로 스크롤은 컨텐츠 내부에서 처리 */
}
@media (max-width: 768px) {
  /* 사이드바는 드로어다 — position: fixed 라 흐름 밖에 있고, 본문은 늘 전체 폭을 쓴다.
     ⛔ .app-shell 에 flex-direction: column 을 주지 않는다(옛 코드에 있었다). 드로어가
     흐름 밖인데 방향만 바꾸면 얻는 것 없이 본문 레이아웃만 흔들린다. */
.app-shell__overlay[data-v-cfff4234] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-backdrop);
    backdrop-filter: blur(4px);
    /* 탑바 위·드로어 아래 — 탑바까지 함께 덮어 어둡게 한다 */
    z-index: var(--z-drawer-backdrop);
    animation: fadeIn-cfff4234 0.3s ease;
}
.app-shell__content[data-v-cfff4234] {
    /* 모바일에서는 바디 영역 패딩을 제거하여 화면을 최대한 넓게 사용 */
    padding: 0;
}

  /* 모바일에서는 메인 영역이 뷰포트 높이를 기준으로 잡히도록 명시 */
  /* iOS Safari 주소 표시줄 문제 해결: CSS 변수 사용 */
.app-shell__main[data-v-cfff4234] {
    height: 100vh;
    height: var(--vh, 100vh);
}
}
@keyframes fadeIn-cfff4234 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.app-root {
  min-height: 100vh;
  /* iOS Safari 주소 표시줄 문제 해결: CSS 변수 사용 */
  min-height: var(--vh, 100vh);
  min-height: 100dvh;
  background: var(--bg-page);
  overflow-y: auto;
}
.route-blocker {
  min-height: 100vh;
  /* iOS Safari 주소 표시줄 문제 해결: CSS 변수 사용 */
  min-height: var(--vh, 100vh);
  min-height: 100dvh;
}
/**
 * 테마 세트 — 디자인 시스템 2기
 *
 * ⭐ 여기 있는 것은 **씨앗뿐**이다. 화면 코드는 한 줄도 건드리지 않는다.
 *    `document.documentElement.dataset.brand = 'maple'` 한 줄로 사이트 전체가 바뀐다.
 *
 * ⛔ 여기에 색·크기를 **직접** 적지 않는다 — 씨앗(--seed-*)만 적는다.
 *    씨앗이 아닌 값을 적으면 그 테마만 다른 규칙으로 굴러가 2기 구조가 무너진다.
 *
 * ⛔ 잉크·면(중립색)은 라이트/다크가 이미 정한다. 브랜드 세트는 **브랜드색·모양·밀도·속도**만 바꾼다 —
 *    중립색까지 세트가 덮으면 두 테마의 대비 보장이 깨진다(theme.md 의 AA 하한).
 *    바탕색을 바꿔야 하는 세트는 라이트/다크 각각에 값을 준다.
 *
 * ⛔ 셀렉터에 ` body` 를 함께 적는 이유: 라이트/다크 블록이 `html[…]` 과 `body[…]` **양쪽**에
 *    씨앗을 선언한다. html 에만 세트를 걸면 body 가 자기 선언으로 되돌려, 색은 바뀌는데
 *    **틴트(rgba(var(--primary-rgb), α))만 옛 브랜드로 남는다**(2026-08-29 실측으로 잡음).
 *
 * 상세: docs/design-system/v2-architecture.md §2·§5
 */

/* ⛔ 브랜드색은 **트리플(--seed-brand-rgb) 한 곳**에만 적는다 —
      색과 틴트(rgba(var(--primary-rgb), α))가 같은 값에서 나와야 갈라지지 않는다.
      hover 는 별개의 색이므로 따로 적는다. */

/* ── 세트 넷 — 이름은 그 색을 가리키는 우리말이다 ────────────────────
      진달래(pink-700) · 쪽빛(sky-700) · 단풍(orange-700) · 서리(slate-700) */
html[data-brand='azalea'],
html[data-brand='azalea'] body {
  --seed-brand-rgb: 190, 24, 93;    /* pink-700 — 라이트 바탕 대비 4.5 이상 (실측으로 한 단 내렸다) */
  --seed-brand-hover: #db2777;
  --seed-radius: 12px;
  --seed-density: 1.05;
}
html[data-brand='indigo'],
html[data-brand='indigo'] body {
  --seed-brand-rgb: 3, 105, 161;    /* sky-700 — 라이트 바탕 대비 4.5 이상 (실측으로 한 단 내렸다) */
  --seed-brand-hover: #0284c7;
  --seed-radius: 8px;
}
html[data-brand='maple'],
html[data-brand='maple'] body {
  --seed-brand-rgb: 194, 65, 12;
  --seed-brand-hover: #ea580c;
  --seed-radius: 6px;
  --seed-density: 1.02;
}
html[data-brand='frost'],
html[data-brand='frost'] body {
  --seed-brand-rgb: 51, 65, 85;
  --seed-brand-hover: #475569;
  --seed-radius: 2px;
  --seed-density: 0.96;
  --seed-motion: 0.8;
}

html[data-brand='violet'],
html[data-brand='violet'] body {
  --seed-brand-rgb: 109, 40, 217;
  --seed-brand-hover: #8b5cf6;
}
html[data-brand='moss'],
html[data-brand='moss'] body {
  --seed-brand-rgb: 21, 128, 61;
  --seed-brand-hover: #16a34a;
}
html[data-brand='citron'],
html[data-brand='citron'] body {
  --seed-brand-rgb: 180, 83, 9;
  --seed-brand-hover: #d97706;
}
html[data-brand='cyan'],
html[data-brand='cyan'] body {
  --seed-brand-rgb: 14, 116, 144;
  --seed-brand-hover: #0891b2;
}
html[data-brand='navy'],
html[data-brand='navy'] body {
  --seed-brand-rgb: 67, 56, 202;
  --seed-brand-hover: #4f46e5;
}

/* ── 다크에서의 브랜드 — **한 단 밝게** ──
   ⛔ 세트를 라이트 기준으로만 만들면 다크에서 글자가 안 보인다.
      실측 2026-08-29: 은행 남색(#1e40af)을 다크 바탕(#050505)에 글자로 쓰면 **대비 2.34**
      (본문 AA 4.5 미달). 브랜드는 테마마다 밝기가 달라야 한다.
   검사: npm run lint:theme-sets (뜬 화면에서 세트 × 테마를 전부 잰다) */

html[data-brand='azalea'][data-theme='dark'],
html[data-brand='azalea'][data-theme='dark'] body {
  --seed-brand-rgb: 244, 114, 182;
  --seed-brand-hover: #f9a8d4;
}
html[data-brand='indigo'][data-theme='dark'],
html[data-brand='indigo'][data-theme='dark'] body {
  --seed-brand-rgb: 56, 189, 248;
  --seed-brand-hover: #7dd3fc;
}
html[data-brand='maple'][data-theme='dark'],
html[data-brand='maple'][data-theme='dark'] body {
  --seed-brand-rgb: 251, 146, 60;
  --seed-brand-hover: #fdba74;
}
html[data-brand='frost'][data-theme='dark'],
html[data-brand='frost'][data-theme='dark'] body {
  --seed-brand-rgb: 148, 163, 184;
  --seed-brand-hover: #cbd5e1;
}
html[data-brand='violet'][data-theme='dark'],
html[data-brand='violet'][data-theme='dark'] body {
  --seed-brand-rgb: 167, 139, 250;
  --seed-brand-hover: #c4b5fd;
}
html[data-brand='moss'][data-theme='dark'],
html[data-brand='moss'][data-theme='dark'] body {
  --seed-brand-rgb: 74, 222, 128;
  --seed-brand-hover: #86efac;
}
html[data-brand='citron'][data-theme='dark'],
html[data-brand='citron'][data-theme='dark'] body {
  --seed-brand-rgb: 251, 191, 36;
  --seed-brand-hover: #fcd34d;
}
html[data-brand='cyan'][data-theme='dark'],
html[data-brand='cyan'][data-theme='dark'] body {
  --seed-brand-rgb: 34, 211, 238;
  --seed-brand-hover: #67e8f9;
}
html[data-brand='navy'][data-theme='dark'],
html[data-brand='navy'][data-theme='dark'] body {
  --seed-brand-rgb: 129, 140, 248;
  --seed-brand-hover: #a5b4fc;
}
/**
 * 키워드 검색 하이라이트 공통 스타일 (v-html 로 삽입되는 <span class="search-highlight">)
 *
 * 색상은 전역 단일 토큰 --highlight-mark-bg 하나만 참조한다.
 * 형광 세기/색을 바꾸려면 styles/tokens.css 의 --highlight-mark-bg 만 고치면
 * 목록(HighlightText)·메타편집기·비교·터미널까지 전 사이트가 동일하게 반영된다.
 */

.search-highlight {
  background-color: var(--bg-mark) !important;
  padding: 0 1px !important;  /* role-ignore: 글자 줄 안에 놓이는 표시라 세로 여백이 1px 이어야 한다 — 사다리(4px)로 올리면 줄 간격이 벌어진다 */
  border-radius: var(--radius-badge);
  display: inline;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* 폰트 굵기·색상은 부모를 그대로 사용 (강조는 배경 틴트로만) */
  font-weight: unset !important;
  color: inherit !important;
}
/**
 * 파일 종류 아이콘 색 — 한 곳에서만 칠한다.
 *
 * 모양·종류 판정은 [`constants/fileTypeIcons.ts`](../constants/fileTypeIcons.ts) 가 하고,
 * 여기는 그 종류에 색만 입힌다. 전역 스타일시트인 이유는 이 아이콘이 목록·카드·탭·트리 등
 * 여러 화면의 **깊은 자리**에 서기 때문이다 — scoped CSS 로 두면 화면마다 `:deep(.ext-*)` 를
 * 다시 적게 되고, 실제로 그렇게 흩어진 끝에 자산관리 목록이 **전부 한 회색**이었다
 * (사용자 지적 2026-09-13: 「자세히 봐야 뭐가 약간 다른지 알 수 있다」).
 *
 * 색은 그 프로그램의 실제 아이콘 색을 역할 토큰으로 옮긴 것이다.
 * ⛔ 여기에 크기(font-size)를 적지 않는다 — 아이콘 크기는 «옆 글자»가 정한다(typography.md).
 */

.ftype {
  /* 종류를 모르는 파일의 기본값. 아래 종류별 규칙이 덮는다. */
  color: var(--ink-secondary);
}

.ftype--pdf { color: var(--ink-danger); }          /* 빨강 — Acrobat */
.ftype--word { color: var(--ink-info); }           /* 파랑 — Word */
.ftype--excel { color: var(--ink-success); }       /* 초록 — Excel */
.ftype--ppt { color: var(--ink-accent-orange); }   /* 주황 — PowerPoint */
.ftype--hwp { color: var(--ink-accent-cyan); }     /* 청록 — 한글 */
.ftype--image { color: var(--ink-accent-purple); }
.ftype--zip { color: var(--ink-warning); }
.ftype--code { color: var(--ink-accent-indigo); }
.ftype--sql { color: var(--ink-accent-indigo); }
.ftype--db { color: var(--ink-accent-lime); }
.ftype--remote { color: var(--ink-accent-pink); }
.ftype--text { color: var(--ink-secondary); }
.ftype--other { color: var(--ink-secondary); }
.ftype--folder { color: var(--ink-brand); }
*, ::before, ::after {--_histoire-color-primary-50: 236 253 245;--_histoire-color-primary-100: 209 250 229;--_histoire-color-primary-200: 167 243 208;--_histoire-color-primary-300: 110 231 183;--_histoire-color-primary-400: 52 211 153;--_histoire-color-primary-500: 16 185 129;--_histoire-color-primary-600: 5 150 105;--_histoire-color-primary-700: 4 120 87;--_histoire-color-primary-800: 6 95 70;--_histoire-color-primary-900: 6 78 59;--_histoire-color-gray-50: 250 250 250;--_histoire-color-gray-100: 244 244 245;--_histoire-color-gray-200: 228 228 231;--_histoire-color-gray-300: 212 212 216;--_histoire-color-gray-400: 161 161 170;--_histoire-color-gray-500: 113 113 122;--_histoire-color-gray-600: 82 82 91;--_histoire-color-gray-700: 63 63 70;--_histoire-color-gray-750: 50 50 56;--_histoire-color-gray-800: 39 39 42;--_histoire-color-gray-850: 31 31 33;--_histoire-color-gray-900: 24 24 27;--_histoire-color-gray-950: 16 16 18;}

@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)){

.resize-observer[data-v-b329ee4c]{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border:none;
  background-color:transparent;
  pointer-events:none;
  display:block;
  overflow:hidden;
  opacity:0
}

.resize-observer[data-v-b329ee4c] object{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}

.v-popper__popper{
  z-index:10000;
  top:0;
  left:0;
  outline:none
}

.v-popper__popper.v-popper__popper--hidden{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s,visibility .15s;
  pointer-events:none
}

.v-popper__popper.v-popper__popper--shown{
  visibility:visible;
  opacity:1;
  transition:opacity .15s
}

.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
  transition:none!important
}

.v-popper__backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none
}

.v-popper__inner{
  position:relative;
  box-sizing:border-box;
  overflow-y:auto
}

.v-popper__inner>div{
  position:relative;
  z-index:1;
  max-width:inherit;
  max-height:inherit
}

.v-popper__arrow-container{
  position:absolute;
  width:10px;
  height:10px
}

.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
  display:none
}

.v-popper__arrow-inner,.v-popper__arrow-outer{
  border-style:solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.v-popper__arrow-inner{
  visibility:hidden;
  border-width:7px
}

.v-popper__arrow-outer{
  border-width:6px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  left:-2px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  left:-1px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
  border-bottom-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
  top:0
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  border-top-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  top:-4px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  top:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  top:-1px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  border-left-width:0;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  left:-4px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  left:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
  right:-10px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
  border-right-width:0;
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
  left:-2px
}

.v-popper--theme-tooltip .v-popper__inner{
  background:rgba(0,0,0,.8);
  color:#fff;
  border-radius:6px;
  padding:7px 12px 6px
}

.v-popper--theme-tooltip .v-popper__arrow-outer{
  border-color:#000c
}

.v-popper--theme-dropdown .v-popper__inner{
  background:#fff;
  color:#000;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 6px 30px #0000001a
}

.v-popper--theme-dropdown .v-popper__arrow-inner{
  visibility:visible;
  border-color:#fff
}

.v-popper--theme-dropdown .v-popper__arrow-outer{
  border-color:#ddd
}

.htw-bind-col-size{
  grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))
}

.__histoire-json-code[data-v-d4369e5a] .cm-editor{
  height:100%;
  min-width:280px
}

.v-popper{
  line-height:0
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity: 1;
  border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{
  transform:scale(.75)
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{
  transform:none;
  transition:transform .15s cubic-bezier(0,1,.5,1)
}

.v-popper__popper:focus-visible{
  outline:none
}

.htw-range-input::-webkit-slider-thumb{
  height:.75rem;
  width:.75rem;
  -webkit-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-webkit-slider-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

.htw-range-input::-moz-range-thumb{
  height:.75rem;
  width:.75rem;
  -moz-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-moz-range-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-moz-range-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

/* @TODO custom themes */

.v-popper {
  line-height: 0;
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-700) / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.75);
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s cubic-bezier(0, 1, .5, 1);
}

.v-popper__popper:focus-visible {
  outline: none;
}

.__histoire-scale-x-enter-active,
  .__histoire-scale-x-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-x-enter-from,
  .__histoire-scale-x-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

.__histoire-scale-y-enter-active,
  .__histoire-scale-y-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-y-enter-from,
  .__histoire-scale-y-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

.__histoire-fade-enter-active,
  .__histoire-fade-leave-active {
  transition: opacity .15s;
}

.__histoire-fade-enter-from,
  .__histoire-fade-leave-to {
  opacity: 0;
}

.__histoire-fade-bottom-enter-active,
  .__histoire-fade-bottom-leave-active {
  transition: transform .15s, opacity .15s;
  transform: translateY(0px);
}

.__histoire-fade-bottom-enter-from,
  .__histoire-fade-bottom-leave-to {
  transform: translateY(32px);
  opacity: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

body,
  pre {
  margin: 0;
}

:scope,
  body,
  #app {
  height: 100%;
}

:scope {
  font-family: 'Noto Sans Display', system-ui, sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose h1:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h2:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h3:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h4:not(:hover) .header-anchor[aria-hidden="true"] {
  visibility: hidden;
}

.htw-prose hr {
  margin: 1rem 0;
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.htw-dark .__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.htw-prose{
  color:var(--tw-prose-body);
  max-width:65ch;
}

.htw-prose :where(p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where([class~="lead"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-lead);
  font-size:1.25em;
  line-height:1.6;
  margin-top:1.2em;
  margin-bottom:1.2em
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:rgb(var(--_histoire-color-primary-500));
  text-decoration:none;
  font-weight:500;
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):hover{
  text-decoration:underline
}

.htw-prose :where(strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-bold);
  font-weight:600
}

.htw-prose :where(a strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol[type="A"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="A" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="I"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="I" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="1"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal
}

.htw-prose :where(ul):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:disc;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  font-weight:400;
  color:var(--tw-prose-counters)
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  color:var(--tw-prose-bullets)
}

.htw-prose :where(dt):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.25em
}

.htw-prose :where(hr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:3em;
  margin-bottom:3em
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-style:italic;
  color:var(--tw-prose-quotes);
  border-inline-start-width:0.25rem;
  border-inline-start-color:var(--tw-prose-quote-borders);
  quotes:"\201C""\201D""\2018""\2019";
  margin-top:1.6em;
  margin-bottom:1.6em;
  padding-inline-start:1em;
  margin-left:0;
  margin-right:0;
  background-color:rgb(var(--_histoire-color-gray-100));
  padding:.25rem .375rem;
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:first-child{
  margin-top:0
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:last-child{
  margin-bottom:0
}

.htw-dark .htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:rgb(var(--_histoire-color-gray-750))
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:open-quote
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:close-quote
}

.htw-prose :where(h1):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:800;
  font-size:2.25em;
  margin-top:0;
  margin-bottom:0.8888889em;
  line-height:1.1111111
}

.htw-prose :where(h1 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:900;
  color:inherit
}

.htw-prose :where(h2):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:2em;
  margin-bottom:1em;
  line-height:1.3333333
}

.htw-prose :where(h2 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:800;
  color:inherit
}

.htw-prose :where(h3):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.6
}

.htw-prose :where(h3 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(h4):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.5em;
  margin-bottom:0.5em;
  line-height:1.5
}

.htw-prose :where(h4 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(picture):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  display:block;
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(video):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(kbd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-family:inherit;
  color:var(--tw-prose-kbd);
  box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size:0.875em;
  border-radius:0.3125rem;
  padding-top:0.1875em;
  padding-inline-end:0.375em;
  padding-bottom:0.1875em;
  padding-inline-start:0.375em
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-code);
  font-weight:normal;
  font-size:0.8rem;
  background-color:rgb(var(--_histoire-color-gray-500) / 20%);
  padding:0.05rem 0.5rem;
  border-radius:0.25rem;
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before,.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  display:none
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:"`"
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:"`"
}

.htw-prose :where(a code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h1 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h2 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.875em
}

.htw-prose :where(h3 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.9em
}

.htw-prose :where(h4 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(pre):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-pre-code);
  background-color:var(--tw-prose-pre-bg);
  overflow-x:auto;
  font-weight:400;
  font-size:0.875em;
  line-height:1.7142857;
  margin-top:1.7142857em;
  margin-bottom:1.7142857em;
  border-radius:0.375rem;
  padding-top:0.8571429em;
  padding-inline-end:1.1428571em;
  padding-bottom:0.8571429em;
  padding-inline-start:1.1428571em
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:transparent;
  border-width:0;
  border-radius:0;
  padding:0;
  font-weight:inherit;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  line-height:inherit
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:none
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:none
}

.htw-prose :where(table):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  width:100%;
  table-layout:auto;
  margin-top:2em;
  margin-bottom:2em;
  font-size:0.875em;
  line-height:1.7142857
}

.htw-prose :where(thead):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-th-borders)
}

.htw-prose :where(thead th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  vertical-align:bottom;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody tr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-td-borders)
}

.htw-prose :where(tbody tr:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:0
}

.htw-prose :where(tbody td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:baseline
}

.htw-prose :where(tfoot):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-top-width:1px;
  border-top-color:var(--tw-prose-th-borders)
}

.htw-prose :where(tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:top
}

.htw-prose :where(th, td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  text-align:start
}

.htw-prose :where(figure > *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(figcaption):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

.htw-prose{
  --tw-prose-body:#374151;
  --tw-prose-headings:#111827;
  --tw-prose-lead:#4b5563;
  --tw-prose-links:#111827;
  --tw-prose-bold:#111827;
  --tw-prose-counters:#6b7280;
  --tw-prose-bullets:#d1d5db;
  --tw-prose-hr:#e5e7eb;
  --tw-prose-quotes:#111827;
  --tw-prose-quote-borders:#e5e7eb;
  --tw-prose-captions:#6b7280;
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:rgb(17 24 39 / 10%);
  --tw-prose-code:#111827;
  --tw-prose-pre-code:#e5e7eb;
  --tw-prose-pre-bg:#1f2937;
  --tw-prose-th-borders:#d1d5db;
  --tw-prose-td-borders:#e5e7eb;
  --tw-prose-invert-body:#d1d5db;
  --tw-prose-invert-headings:#fff;
  --tw-prose-invert-lead:#9ca3af;
  --tw-prose-invert-links:#fff;
  --tw-prose-invert-bold:#fff;
  --tw-prose-invert-counters:#9ca3af;
  --tw-prose-invert-bullets:rgb(var(--_histoire-color-gray-500));
  --tw-prose-invert-hr:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-quotes:#f3f4f6;
  --tw-prose-invert-quote-borders:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-captions:#9ca3af;
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:rgb(255 255 255 / 10%);
  --tw-prose-invert-code:#fff;
  --tw-prose-invert-pre-code:#d1d5db;
  --tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:#4b5563;
  --tw-prose-invert-td-borders:#374151;
  font-size:1rem;
  line-height:1.75
}

.htw-prose :where(picture > img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.1rem;
  margin-bottom:0.1rem
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(.htw-prose > ul > li p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(.htw-prose > ul > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ul > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(dl):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where(dd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.5em;
  padding-inline-start:1.625em
}

.htw-prose :where(hr + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h2 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h3 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h4 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(thead th:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(thead th:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(tbody td, tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-top:0.5714286em;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(figure):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(.htw-prose > :first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(.htw-prose > :last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0.75rem;
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):not(:first-child){
  margin-top:1.25rem
}

.htw-pointer-events-none{
  pointer-events:none
}

.htw-invisible{
  visibility:hidden
}

.htw-fixed{
  position:fixed
}

.htw-absolute{
  position:absolute
}

.htw-relative{
  position:relative
}

.htw-inset-0{
  inset:0px
}

.htw-bottom-0{
  bottom:0px
}

.htw-bottom-4{
  bottom:1rem
}

.htw-bottom-5{
  bottom:1.25rem
}

.htw-bottom-8{
  bottom:2rem
}

.htw-left-0{
  left:0px
}

.htw-left-5{
  left:1.25rem
}

.htw-left-8{
  left:2rem
}

.htw-right-0{
  right:0px
}

.htw-right-4{
  right:1rem
}

.htw-right-5{
  right:1.25rem
}

.htw-right-8{
  right:2rem
}

.htw-top-0{
  top:0px
}

.htw-top-5{
  top:1.25rem
}

.htw-top-8{
  top:2rem
}

.htw-isolate{
  isolation:isolate
}

.htw-z-10{
  z-index:10
}

.htw-z-20{
  z-index:20
}

.htw-m-0{
  margin:0px
}

.htw-m-1{
  margin:0.25rem
}

.htw-m-4{
  margin:1rem
}

.htw-m-auto{
  margin:auto
}

.-htw-my-1{
  margin-top:-0.25rem;
  margin-bottom:-0.25rem
}

.htw-mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.htw-mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.htw-mx-4{
  margin-left:1rem;
  margin-right:1rem
}

.htw-mx-6{
  margin-left:1.5rem;
  margin-right:1.5rem
}

.htw-my-0{
  margin-top:0px;
  margin-bottom:0px
}

.htw-my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.htw-my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.htw-my-8{
  margin-top:2rem;
  margin-bottom:2rem
}

.-htw-mt-1{
  margin-top:-0.25rem
}

.htw-mb-2{
  margin-bottom:0.5rem
}

.htw-mb-6{
  margin-bottom:1.5rem
}

.htw-mb-8{
  margin-bottom:2rem
}

.htw-ml-4{
  margin-left:1rem
}

.htw-ml-auto{
  margin-left:auto
}

.htw-mr-2{
  margin-right:0.5rem
}

.htw-mr-auto{
  margin-right:auto
}

.htw-mt-0\.5{
  margin-top:0.125rem
}

.htw-mt-1{
  margin-top:0.25rem
}

.htw-mt-2{
  margin-top:0.5rem
}

.htw-box-border{
  box-sizing:border-box
}

.htw-block{
  display:block
}

.htw-flex{
  display:flex
}

.htw-inline-flex{
  display:inline-flex
}

.htw-grid{
  display:grid
}

.\!htw-hidden{
  display:none !important
}

.htw-hidden{
  display:none
}

.htw-h-1{
  height:0.25rem
}

.htw-h-10{
  height:2.5rem
}

.htw-h-12{
  height:3rem
}

.htw-h-16{
  height:4rem
}

.htw-h-2{
  height:0.5rem
}

.htw-h-20{
  height:5rem
}

.htw-h-3{
  height:0.75rem
}

.htw-h-32{
  height:8rem
}

.htw-h-4{
  height:1rem
}

.htw-h-48{
  height:12rem
}

.htw-h-5{
  height:1.25rem
}

.htw-h-6{
  height:1.5rem
}

.htw-h-64{
  height:16rem
}

.htw-h-8{
  height:2rem
}

.htw-h-9{
  height:2.25rem
}

.htw-h-\[100px\]{
  height:100px
}

.htw-h-\[16px\]{
  height:16px
}

.htw-h-\[1px\]{
  height:1px
}

.htw-h-\[22px\]{
  height:22px
}

.htw-h-\[27px\]{
  height:27px
}

.htw-h-\[2px\]{
  height:2px
}

.htw-h-\[51px\]{
  height:51px
}

.htw-h-fit{
  height:-moz-fit-content;
  height:fit-content
}

.htw-h-full{
  height:100%
}

.htw-h-px{
  height:1px
}

.htw-h-screen{
  height:100vh
}

.htw-max-h-\[400px\]{
  max-height:400px
}

.htw-max-h-\[80vh\]{
  max-height:80vh
}

.htw-max-h-full{
  max-height:100%
}

.htw-min-h-32{
  min-height:8rem
}

.htw-min-h-\[26px\]{
  min-height:26px
}

.htw-w-0{
  width:0px
}

.htw-w-16{
  width:4rem
}

.htw-w-2{
  width:0.5rem
}

.htw-w-20{
  width:5rem
}

.htw-w-28{
  width:7rem
}

.htw-w-3{
  width:0.75rem
}

.htw-w-32{
  width:8rem
}

.htw-w-4{
  width:1rem
}

.htw-w-5{
  width:1.25rem
}

.htw-w-6{
  width:1.5rem
}

.htw-w-64{
  width:16rem
}

.htw-w-8{
  width:2rem
}

.htw-w-\[16px\]{
  width:16px
}

.htw-w-\[2px\]{
  width:2px
}

.htw-w-fit{
  width:-moz-fit-content;
  width:fit-content
}

.htw-w-full{
  width:100%
}

.htw-w-max{
  width:-moz-max-content;
  width:max-content
}

.htw-w-px{
  width:1px
}

.htw-w-screen{
  width:100vw
}

.htw-min-w-0{
  min-width:0px
}

.htw-min-w-16{
  min-width:4rem
}

.htw-min-w-4{
  min-width:1rem
}

.htw-min-w-\[150px\]{
  min-width:150px
}

.htw-min-w-\[80px\]{
  min-width:80px
}

.htw-max-w-6{
  max-width:1.5rem
}

.htw-max-w-\[400px\]{
  max-width:400px
}

.htw-max-w-\[512px\]{
  max-width:512px
}

.htw-max-w-\[63px\]{
  max-width:63px
}

.htw-max-w-\[82px\]{
  max-width:82px
}

.htw-max-w-full{
  max-width:100%
}

.htw-max-w-none{
  max-width:none
}

.htw-flex-1{
  flex:1 1 0%
}

.htw-flex-none{
  flex:none
}

.htw-flex-shrink{
  flex-shrink:1
}

.htw-shrink{
  flex-shrink:1
}

.htw-shrink-0{
  flex-shrink:0
}

.htw-grow{
  flex-grow:1
}

.htw-rotate-90{
  --tw-rotate:90deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-scale-0{
  --tw-scale-x:0;
  --tw-scale-y:0;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-cursor-default{
  cursor:default
}

.htw-cursor-ew-resize{
  cursor:ew-resize
}

.htw-cursor-ns-resize{
  cursor:ns-resize
}

.htw-cursor-nwse-resize{
  cursor:nwse-resize
}

.htw-cursor-pointer{
  cursor:pointer
}

.htw-cursor-text{
  cursor:text
}

.htw-select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.htw-resize-none{
  resize:none
}

.htw-resize-y{
  resize:vertical
}

.htw-appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}

.htw-flex-row{
  flex-direction:row
}

.htw-flex-col{
  flex-direction:column
}

.htw-flex-wrap{
  flex-wrap:wrap
}

.htw-flex-nowrap{
  flex-wrap:nowrap
}

.htw-place-content-between{
  place-content:space-between
}

.htw-items-start{
  align-items:flex-start
}

.htw-items-end{
  align-items:flex-end
}

.htw-items-center{
  align-items:center
}

.htw-items-baseline{
  align-items:baseline
}

.htw-items-stretch{
  align-items:stretch
}

.htw-justify-end{
  justify-content:flex-end
}

.htw-justify-center{
  justify-content:center
}

.htw-justify-evenly{
  justify-content:space-evenly
}

.htw-gap-0\.5{
  gap:0.125rem
}

.htw-gap-1{
  gap:0.25rem
}

.htw-gap-12{
  gap:3rem
}

.htw-gap-2{
  gap:0.5rem
}

.htw-gap-4{
  gap:1rem
}

.htw-gap-6{
  gap:1.5rem
}

.htw-gap-px{
  gap:1px
}

.htw-gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.htw-gap-y-1{
  row-gap:0.25rem
}

.htw-space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.htw-divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.htw-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-divide-opacity, 1))
}

.htw-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-divide-opacity, 1))
}

.htw-overflow-auto{
  overflow:auto
}

.htw-overflow-hidden{
  overflow:hidden
}

.htw-overflow-y-auto{
  overflow-y:auto
}

.htw-overflow-y-scroll{
  overflow-y:scroll
}

.htw-scroll-smooth{
  scroll-behavior:smooth
}

.htw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.htw-text-ellipsis{
  text-overflow:ellipsis
}

.htw-whitespace-nowrap{
  white-space:nowrap
}

.\!htw-rounded-\[3px\]{
  border-radius:3px !important
}

.htw-rounded{
  border-radius:0.375rem
}

.htw-rounded-full{
  border-radius:9999px
}

.htw-rounded-lg{
  border-radius:0.75rem
}

.htw-rounded-sm{
  border-radius:0.25rem
}

.htw-rounded-b-lg{
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem
}

.htw-rounded-l{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.htw-rounded-r{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.htw-rounded-r-lg{
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem
}

.htw-border{
  border-width:1px
}

.htw-border-0{
  border-width:0px
}

.htw-border-2{
  border-width:2px
}

.htw-border-8{
  border-width:8px
}

.htw-border-b{
  border-bottom-width:1px
}

.htw-border-l-2{
  border-left-width:2px
}

.htw-border-r{
  border-right-width:1px
}

.htw-border-t{
  border-top-width:1px
}

.htw-border-solid{
  border-style:solid
}

.htw-border-none{
  border-style:none
}

.htw-border-black\/20{
  border-color:rgb(0 0 0 / 0.2)
}

.htw-border-black\/25{
  border-color:rgb(0 0 0 / 0.25)
}

.htw-border-black\/50{
  border-color:rgb(0 0 0 / 0.5)
}

.htw-border-current{
  border-color:currentColor
}

.htw-border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-border-opacity, 1))
}

.htw-border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-border-opacity, 1))
}

.htw-border-gray-300\/30{
  border-color:rgb(var(--_histoire-color-gray-300) / 0.3)
}

.htw-border-gray-500\/10{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-border-gray-500\/30{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.htw-border-gray-500\/40{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.4)
}

.htw-border-gray-500\/5{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.htw-border-gray-500\/50{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-border-gray-600{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-600) / var(--tw-border-opacity, 1))
}

.htw-border-gray-800{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.htw-border-gray-850{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.htw-border-primary-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-200) / var(--tw-border-opacity, 1))
}

.htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-border-primary-900{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.htw-border-transparent{
  border-color:transparent
}

.\!htw-bg-primary-500{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1)) !important
}

.htw-bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-100) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-400\/25{
  background-color:rgb(var(--_histoire-color-gray-400) / 0.25)
}

.htw-bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-500\/10{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-bg-gray-500\/50{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-bg-gray-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500\/10{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.htw-bg-primary-500\/20{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.2)
}

.htw-bg-primary-500\/25{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.25)
}

.htw-bg-primary-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-transparent{
  background-color:transparent
}

.htw-bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-bg-white\/80{
  background-color:rgb(255 255 255 / 0.8)
}

.htw-fill-primary-500{
  fill:rgb(var(--_histoire-color-primary-500))
}

.htw-fill-transparent{
  fill:transparent
}

.htw-stroke-white{
  stroke:#fff
}

.htw-stroke-2{
  stroke-width:2
}

.htw-p-1{
  padding:0.25rem
}

.htw-p-2{
  padding:0.5rem
}

.htw-p-4{
  padding:1rem
}

.htw-p-8{
  padding:2rem
}

.htw-p-px{
  padding:1px
}

.htw-px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.htw-px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.htw-px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.htw-px-4{
  padding-left:1rem;
  padding-right:1rem
}

.htw-px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.htw-py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.htw-py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.htw-py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.htw-py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.htw-py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.htw-py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.htw-pl-0{
  padding-left:0px
}

.htw-pl-0\.5{
  padding-left:0.125rem
}

.htw-pl-2{
  padding-left:0.5rem
}

.htw-pl-4{
  padding-left:1rem
}

.htw-pl-6{
  padding-left:1.5rem
}

.htw-pr-2{
  padding-right:0.5rem
}

.htw-pr-6{
  padding-right:1.5rem
}

.htw-pt-4{
  padding-top:1rem
}

.htw-text-left{
  text-align:left
}

.htw-text-center{
  text-align:center
}

.htw-font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.htw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.htw-text-5xl{
  font-size:3rem;
  line-height:1
}

.htw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.htw-text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.htw-text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.htw-font-bold{
  font-weight:700
}

.htw-uppercase{
  text-transform:uppercase
}

.htw-leading-none{
  line-height:1
}

.htw-leading-normal{
  line-height:1.5
}

.htw-text-black\/\[1\%\]{
  color:rgb(0 0 0 / 1%)
}

.htw-text-gray-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-400) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-500) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500\/20{
  color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.htw-text-gray-700{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-700) / var(--tw-text-opacity, 1))
}

.htw-text-gray-900{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-900) / var(--tw-text-opacity, 1))
}

.htw-text-inherit{
  color:inherit
}

.htw-text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.htw-text-primary-200{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.htw-text-primary-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.htw-text-primary-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.htw-text-primary-600{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-600) / var(--tw-text-opacity, 1))
}

.htw-text-primary-800{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-800) / var(--tw-text-opacity, 1))
}

.htw-text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.htw-text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.htw-opacity-0{
  opacity:0
}

.htw-opacity-20{
  opacity:0.2
}

.htw-opacity-25{
  opacity:0.25
}

.htw-opacity-30{
  opacity:0.3
}

.htw-opacity-40{
  opacity:0.4
}

.htw-opacity-50{
  opacity:0.5
}

.htw-opacity-60{
  opacity:0.6
}

.htw-opacity-70{
  opacity:0.7
}

.htw-shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.htw-outline-none{
  outline:2px solid transparent;
  outline-offset:2px
}

.htw-transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-border{
  transition-property:border;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-none{
  transition-property:none
}

.htw-transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-delay-150{
  transition-delay:150ms
}

.htw-duration-150{
  transition-duration:150ms
}

.htw-duration-200{
  transition-duration:200ms
}

.htw-duration-300{
  transition-duration:300ms
}

.htw-ease-\[cubic-bezier\(0\,1\,\.6\,1\)\]{
  transition-timing-function:cubic-bezier(0,1,.6,1)
}

.htw-ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.htw-ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.htw-will-change-transform{
  will-change:transform
}

.dark\:htw-prose-invert:is(.htw-dark *){
  --tw-prose-body:var(--tw-prose-invert-body);
  --tw-prose-headings:var(--tw-prose-invert-headings);
  --tw-prose-lead:var(--tw-prose-invert-lead);
  --tw-prose-links:var(--tw-prose-invert-links);
  --tw-prose-bold:var(--tw-prose-invert-bold);
  --tw-prose-counters:var(--tw-prose-invert-counters);
  --tw-prose-bullets:var(--tw-prose-invert-bullets);
  --tw-prose-hr:var(--tw-prose-invert-hr);
  --tw-prose-quotes:var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
  --tw-prose-captions:var(--tw-prose-invert-captions);
  --tw-prose-kbd:var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code:var(--tw-prose-invert-code);
  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
}

.first\:htw-mt-0:first-child{
  margin-top:0px
}

.last\:htw-mb-0:last-child{
  margin-bottom:0px
}

.focus-within\:htw-border-primary-500:focus-within{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus-within\:htw-bg-gray-500\/5:focus-within{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.hover\:htw-border-primary-500:hover{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.hover\:htw-bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-gray-500\/10:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.hover\:htw-bg-gray-500\/20:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.hover\:htw-bg-gray-500\/30:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.hover\:htw-bg-primary-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-300:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-300) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-500\/10:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.hover\:htw-bg-primary-500\/30:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.3)
}

.hover\:htw-bg-primary-500\/50:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.hover\:htw-bg-primary-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.hover\:htw-text-primary-500:hover{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.hover\:htw-opacity-100:hover{
  opacity:1
}

.focus\:htw-border-primary-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus\:htw-border-primary-500\/50:focus{
  border-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.focus\:htw-opacity-100:focus{
  opacity:1
}

.focus-visible\:htw-border-primary-500:focus-visible{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.active\:htw-bg-gray-600\/50:active{
  background-color:rgb(var(--_histoire-color-gray-600) / 0.5)
}

.htw-group:first-child .group-first\:htw-hidden{
  display:none
}

.htw-group:nth-child(odd) .group-odd\:htw-bg-gray-100\/50{
  background-color:rgb(var(--_histoire-color-gray-100) / 0.5)
}

.htw-group:focus-within .group-focus-within\:htw-visible{
  visibility:visible
}

.htw-group:hover .group-hover\:htw-flex{
  display:flex
}

.htw-group:hover .group-hover\:htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .group-hover\:htw-bg-primary-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.htw-group:hover .group-hover\:htw-opacity-100{
  opacity:1
}

.htw-group:hover .group-hover\:htw-opacity-90{
  opacity:0.9
}

.htw-group:active .group-active\:htw-bg-gray-500\/20{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.dark\:htw-divide-gray-750:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-800:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-850:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-divide-opacity, 1))
}

.dark\:htw-border-gray-700\/30:is(.htw-dark *){
  border-color:rgb(var(--_histoire-color-gray-700) / 0.3)
}

.dark\:htw-border-gray-750:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-800:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-850:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-primary-900:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-white\/20:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.2)
}

.dark\:htw-border-white\/25:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.25)
}

.dark\:htw-border-white\/50:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.5)
}

.dark\:htw-bg-black:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-750:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-750) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-900) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900\/80:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-900) / 0.8)
}

.dark\:htw-bg-primary-400:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-400) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-800:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:htw-text-black:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-100:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-300:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-300) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-200:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-400:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-white\/\[1\%\]:is(.htw-dark *){
  color:rgb(255 255 255 / 1%)
}

.dark\:focus-within\:htw-border-primary-500:focus-within:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-border-primary-500:hover:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-bg-gray-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-700:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-900:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-900) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-text-primary-400:hover:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:focus\:htw-border-primary-500:focus:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:nth-child(odd) .dark\:group-odd\:htw-bg-gray-750\/40:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-750) / 0.4)
}

.htw-group:hover .group-hover\:dark\:htw-border-primary-500:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .dark\:group-hover\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

@media (min-width: 640px){
  .sm\:htw-h-4{
    height:1rem
  }

  .sm\:htw-w-4{
    width:1rem
  }

  .sm\:htw-p-1{
    padding:0.25rem
  }

  .sm\:htw-py-4{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

@media (min-width: 768px){
  .md\:htw-mx-auto{
    margin-left:auto;
    margin-right:auto
  }

  .md\:htw-mt-16{
    margin-top:4rem
  }

  .md\:htw-block{
    display:block
  }

  .md\:htw-max-w-\[600px\]{
    max-width:600px
  }

  .md\:htw-flex-col{
    flex-direction:column
  }

  .md\:htw-p-12{
    padding:3rem
  }

  .md\:htw-py-1\.5{
    padding-top:0.375rem;
    padding-bottom:0.375rem
  }
}

@media (min-width: 1024px){
  .lg\:htw-max-w-\[800px\]{
    max-width:800px
  }
}

@media (min-width: 1280px){
  .xl\:htw-max-w-\[900px\]{
    max-width:900px
  }
}

@media (max-width: 767px){
  .\!md\:htw-flex-col{
    flex-direction:column
  }
}

.histoire-story-list-folder-button:hover .\[\.histoire-story-list-folder-button\:hover_\&\]\:htw-opacity-100{
  opacity:1
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-margin[data-v-64c2458f] {
  margin-left: var(--v2562213a);
}
.bind-icon-color[data-v-64c2458f] {
  color: var(--v1eff521f);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-padding[data-v-ee932a0c] {
  padding-left: var(--v5352bb71);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-d15ecb89] {
  color: var(--a3f02f4e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.landscape > div > .dragger[data-v-4f40a1bb] {
  width: .625rem;
}
.portrait > div > .dragger[data-v-4f40a1bb] {
  height: .625rem;
}
.landscape > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  right: 0;
}
.portrait > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  bottom: 0;
}
.landscape > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  right: -.3125rem;
}
.portrait > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  bottom: -.3125rem;
}
.landscape > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  right: -.625rem;
}
.portrait > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  bottom: -.625rem;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.htw-base-empty[data-v-c5ecfead]:not(.no-animation) {
  animation: htw-base-empty-c5ecfead .15s .2s both;
}
@keyframes htw-base-empty-c5ecfead {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-code-placeholder[data-v-96af7f40] {
  color: inherit;
  font-size: inherit;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-c48fb2b2] {
  background-color: var(--v627bec82);
  color: var(--v35068428);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-feff9239] {
  color: var(--v60afaf4d);
}
.bind-preview-bg[data-v-feff9239] {
  background-color: var(--v3bd99e7e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-1b279b85] {
  color: var(--ab2181a2);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-hatched-pattern[data-v-91561117] {
  background: repeating-linear-gradient(135deg,
  transparent 0px,
  transparent 32px,
  currentColor 32px,
  currentColor 64px);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-18122333] {
  background-color: var(--v5f6f4ee9);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-c2a43485] {
  color: var(--v41c4d268);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-096f6d6e] {
  color: var(--v0f021d3c);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
img.colorize-black[data-v-2114f510] {
  filter: grayscale(100) brightness(0);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-9f94ad2b] {
  color: var(--v1f9aa6ca);
}
}
.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-d4369e5a] .cm-editor{height:100%;min-width:280px}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}html,
body {
  background: transparent !important;
}body {
  margin: 0;
}html {
  font-size: 1rem;
  font-family: 'Noto Sans Display', system-ui, sans-serif;
}.htw-sandbox-hidden {
  display: none;
}.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

/* component-ignore: 회사 파비콘의 단일 정의 지점(자체 .company-favicon 재정의를 막기 위한 원본) */
.company-favicon[data-v-2cc36dd3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  /* ⛔ 테두리를 두르지 말 것 — 다른 화면과 통일성이 깨진다(사용자 지적 2026-08-01). */
}
/* 조밀한 목록 — 로고 색이 옆 컬럼 숫자·상태와 경쟁하지 않게 평소 채도를 낮추고, 올리면 원색.
   ⚠️ 그룹(CompanyFaviconGroup)은 셀 전체 hover 로 복원하므로 여기서는 자기 자신 hover 만 본다. */
.company-favicon--muted[data-v-2cc36dd3] {
  filter: saturate(0.55);
  opacity: 0.9;
  transition: filter var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.company-favicon--muted[data-v-2cc36dd3]:hover {
  filter: none;
  opacity: 1;
}
.company-favicon--initial[data-v-2cc36dd3] {
  background: var(--bg-field);
  color: var(--ink-secondary);
  font-weight: var(--weight-title);
  line-height: var(--line-none);
}
.company-favicon--icon[data-v-2cc36dd3] {
  background: var(--bg-field);
  color: var(--ink-muted);
}

.date-range-wrapper[data-v-52b13b36] {
  position: relative;
  width: 100%;
}
.date-range-control[data-v-52b13b36] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  border-radius: var(--radius-float);
  border: var(--line-strong);
  background: var(--bg-page);
  padding: var(--space-cozy) var(--space-cozy);
  cursor: pointer;
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.date-range-control[data-v-52b13b36]:hover {
  border-color: var(--ink-brand);
}
.date-range-control.open[data-v-52b13b36] {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.date-range-display[data-v-52b13b36] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 20px;
  font-size: var(--size-body);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
}
.date-range-placeholder[data-v-52b13b36] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  flex: 1 1 auto;
  text-align: left;
  margin-left: 0;
  display: block;
}
.date-range-value[data-v-52b13b36] {
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  white-space: nowrap;
  text-align: left;
  display: block;
}
.date-range-icon[data-v-52b13b36] {
  font-size: var(--icon-toolbar);
  color: var(--ink-muted);
  transition: transform var(--motion-base) ease;
}
.date-range-control.open .date-range-icon[data-v-52b13b36] {
  transform: rotate(180deg);
}
.date-range-popup[data-v-52b13b36] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown);
  width: 360px;
  border-radius: var(--radius-card);
  border: var(--line-strong);
  background: var(--bg-float);
  box-shadow: var(--shadow-md);
  padding: var(--pad-card);
  display: block;
  visibility: visible;
  opacity: 1;
}
.date-range-popup.right-aligned[data-v-52b13b36] {
  left: auto;
  right: 0;
}
.date-range-header[data-v-52b13b36] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-cozy);
  margin-bottom: var(--gap-stack);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.date-range-title[data-v-52b13b36] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.date-range-content[data-v-52b13b36] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.date-range-presets[data-v-52b13b36] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-inline);
}
.date-range-calendars[data-v-52b13b36] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-stack);
}
.date-calendar[data-v-52b13b36] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph) !important;
}
.date-calendar-label[data-v-52b13b36] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}

/* 날짜 입력은 공통 AppInput 기본 높이(32px)를 그대로 사용 — 폭만 채운다 */
.date-input[data-v-52b13b36] {
  width: 100%;
}
.date-range-footer[data-v-52b13b36] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
  background: var(--bg-page);
}

/* Compact variant */
/* min-width 는 전체 날짜 범위("2026.05.01 ~ 2026.05.31") + 이전·다음 기간(< >) + clear/달력 아이콘이
   잘리지 않고 들어갈 최소치. 더 좁으면 .date-range-display(overflow:hidden)에서 값이 잘림.
   실측(2026-09-12): 값 글자 폭 139px. < > 두 개(22px + 사이)가 60px 를 먹어 260px 에서는 값칸이 126px 로 잘렸다
   → 280px(값칸 146px). 더 넓히면 폰(판 344~374px)에서 필드가 판 밖으로 넘친다. */
.date-range-wrapper.date-range-variant--compact[data-v-52b13b36],
.date-range-wrapper.compact[data-v-52b13b36] {
  flex: 0 1 280px;
  width: auto;
  min-width: 280px;
  max-width: 100%;
}
.date-range-wrapper.date-range-variant--compact .date-range-control[data-v-52b13b36],
.date-range-wrapper.compact .date-range-control[data-v-52b13b36] {
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
  height: var(--h-control-md);
  border: var(--line-strong);
  background: var(--bg-page);
  overflow: hidden;
  box-shadow: none;
}
.date-range-wrapper.date-range-variant--compact .date-range-control[data-v-52b13b36]:hover {
  border-color: var(--ink-brand);
}
.date-range-wrapper.date-range-variant--compact .date-range-control.open[data-v-52b13b36] {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
  background: var(--bg-field);
}
.date-range-wrapper.date-range-variant--compact .date-range-display[data-v-52b13b36] {
  justify-content: flex-start;
  text-align: left;
  font-size: var(--size-meta);
  min-height: auto;
}
.date-range-wrapper.date-range-variant--compact .date-range-placeholder[data-v-52b13b36] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.date-range-wrapper.date-range-variant--compact .date-range-value[data-v-52b13b36] {
  color: var(--ink-primary);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  text-overflow: clip;
}

/* 컨트롤 안 일반 flex 항목 — 값 텍스트와 캘린더 아이콘 사이. 외형은 AppButton(ghost xs)이 담당.
   절대배치 시 긴 값 텍스트와 겹쳐 flex 항목으로 둔다. */
.date-range-clear-btn[data-v-52b13b36],
.date-range-step-btn[data-v-52b13b36] {
  flex-shrink: 0;
}
.date-range-wrapper.date-range-variant--compact .date-range-icon[data-v-52b13b36] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.date-range-wrapper.date-range-variant--compact .date-range-popup[data-v-52b13b36],
.date-range-wrapper.compact .date-range-popup[data-v-52b13b36] {
  border-radius: var(--radius-card);
  border: var(--line-strong);
  background: var(--bg-float);
  min-width: 300px;
  max-width: 90vw;
  width: -moz-max-content;
  width: max-content;
  box-shadow: var(--shadow-md);
  padding: 0;
}
.date-range-wrapper.date-range-variant--compact .date-range-header[data-v-52b13b36],
.date-range-wrapper.compact .date-range-header[data-v-52b13b36] {
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  margin-bottom: 0;
}
.date-range-wrapper.date-range-variant--compact .date-range-title[data-v-52b13b36] {
  font-size: var(--size-body);
}
.date-range-wrapper.date-range-variant--compact .date-range-content[data-v-52b13b36],
.date-range-wrapper.compact .date-range-content[data-v-52b13b36] {
  padding: var(--pad-row);
  gap: var(--gap-group);
}
.date-range-wrapper.date-range-variant--compact .date-range-presets[data-v-52b13b36],
.date-range-wrapper.compact .date-range-presets[data-v-52b13b36] {
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--gap-group);
}
.date-range-wrapper.date-range-variant--compact .date-range-calendars[data-v-52b13b36],
.date-range-wrapper.compact .date-range-calendars[data-v-52b13b36] {
  display: flex;
  gap: var(--gap-group) !important;
  align-items: flex-start;
}
.date-range-wrapper.date-range-variant--compact .date-calendar[data-v-52b13b36] {
  margin-right: 0;
}
.date-range-wrapper.date-range-variant--compact .date-calendar[data-v-52b13b36]:not(:last-child) {
  margin-right: var(--gap-group);
}
.date-range-wrapper.date-range-variant--compact .date-calendar-label[data-v-52b13b36] {
  color: var(--ink-secondary);
}
.date-range-wrapper.date-range-variant--compact .date-range-footer[data-v-52b13b36],
.date-range-wrapper.compact .date-range-footer[data-v-52b13b36] {
  padding: var(--pad-panel);
  border-top: var(--line-strong);
  background: var(--bg-page);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  justify-content: space-between;
}
@media (max-width: 768px) {
.date-range-popup[data-v-52b13b36] {
    width: min(92vw, 360px);
}
.date-range-calendars[data-v-52b13b36] {
    grid-template-columns: 1fr;
    gap: var(--gap-group) !important;
}
.date-range-wrapper.date-range-variant--compact .date-range-calendars[data-v-52b13b36] {
    gap: var(--gap-group) !important;
}
.date-range-wrapper.date-range-variant--compact .date-calendar[data-v-52b13b36]:not(:last-child) {
    margin-bottom: var(--gap-group) !important;
}
.date-range-presets[data-v-52b13b36] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.date-range-wrapper.date-range-variant--compact[data-v-52b13b36] {
    width: 100%;
    min-width: 0;
    max-width: none;
}
.date-range-wrapper.date-range-variant--compact .date-range-presets[data-v-52b13b36] {
    grid-template-columns: repeat(2, 1fr);
}
.date-range-wrapper.date-range-variant--compact .date-range-calendars[data-v-52b13b36],
  .date-range-wrapper.compact .date-range-calendars[data-v-52b13b36] {
    flex-direction: column;
    gap: var(--gap-group) !important;
}
.date-range-wrapper.date-range-variant--compact .date-calendar[data-v-52b13b36]:not(:last-child) {
    margin-right: 0;
    margin-bottom: var(--gap-group) !important;
}
}
@media (max-width: 480px) {
.date-range-wrapper.date-range-variant--compact[data-v-52b13b36] {
    width: 100%;
    min-width: 0;
    max-width: none;
}

  /* 폰에서는 값 글자(139px)와 < > ✕ 가 줄지 않는 최소 폭이라, 상세 필터 칸(라벨+✕ 포함)이
     판(360px 폰 344px)을 넘친다 — 실측 2026-09-12: 칸 376px. 장식인 달력 아이콘을 빼고
     사이를 한 단 좁혀 37px 를 번다(컨트롤 전체가 누르는 자리라 아이콘이 없어도 열린다). */
.date-range-wrapper.date-range-variant--compact .date-range-control[data-v-52b13b36] {
    gap: var(--gap-glyph);
}
.date-range-wrapper.date-range-variant--compact .date-range-icon[data-v-52b13b36] {
    display: none;
}
.date-range-wrapper.date-range-variant--compact .date-range-popup[data-v-52b13b36] {
    min-width: 240px;
    max-width: 95vw;
}
.date-range-wrapper.date-range-variant--compact .date-range-presets[data-v-52b13b36] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-glyph);
    margin-top: var(--gap-stack);
}
.date-range-wrapper.date-range-variant--compact .date-range-content[data-v-52b13b36] {
    padding: var(--space-cozy);
}
.date-range-wrapper.date-range-variant--compact .date-range-header[data-v-52b13b36],
  .date-range-wrapper.date-range-variant--compact .date-range-footer[data-v-52b13b36] {
    padding: var(--space-snug) var(--space-cozy);
}
.date-range-wrapper.date-range-variant--compact .date-range-title[data-v-52b13b36] {
    font-size: var(--size-meta);
}
.date-input[data-v-52b13b36] {
    font-size: var(--size-lead) !important;
}
}

/* === Size variants === */
/* md = 기본값 — compact variant 에서 이미 height:32px 로 설정됨. 별도 규칙 불필요 */
.date-range--sm .date-range-control[data-v-52b13b36] {
  height: var(--h-control-sm);
  padding: var(--space-tight) var(--space-cozy);
}
.date-range--sm .date-range-display[data-v-52b13b36],
.date-range--sm .date-range-placeholder[data-v-52b13b36],
.date-range--sm .date-range-value[data-v-52b13b36] {
  font-size: var(--size-label);
}
.date-range--sm .date-range-icon[data-v-52b13b36] {
  font-size: var(--icon-marker);
}

/* === Embedded variant === */
/* 필터 그룹 안에서 seamless 하게 녹아드는 모드.
   외부에서 :deep + !important 오버라이딩 대신 이 prop 을 쓴다. */
.date-range--embedded .date-range-control[data-v-52b13b36] {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.date-range--embedded .date-range-control[data-v-52b13b36]:hover {
  border-color: transparent;
}
.date-range--embedded .date-range-control.open[data-v-52b13b36] {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.highlight-text[data-v-d0611c04] {
  /* 원문 흐름을 그대로 — 부모 폰트/색 상속 */
  display: inline;
}

/* 형광펜 느낌 — 색은 전역 단일 토큰(styles/tokens.css --highlight-mark-bg)만 참조.
   라이트/다크 세기 차이는 토큰 쪽에서 테마별로 정의된다. */
.highlight-text__mark[data-v-d0611c04] {
  background: var(--bg-mark);
  color: inherit;
  padding: 0 var(--space-tight);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
}

.app-search[data-v-9a87ac40] {
  position: relative;
  width: 100%;
}
.app-search__box[data-v-9a87ac40] {
  display: flex;
  align-items: center;
  position: relative;
}
.app-search__icon[data-v-9a87ac40] {
  position: absolute;
  left: var(--space-cozy);
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  pointer-events: none;
}
.app-search__input[data-v-9a87ac40] {
  width: 100%;
  height: var(--h-control-md);
  /* padding-right: 우측 액션(이전/다음/지우기·카운터) 공간 확보. find-mode 가 아닌 기본은 단일 액션. */
  padding: 0 calc(var(--h-control-sm) + var(--space-band)) 0 var(--space-wide);
  box-sizing: border-box;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  /* 입력은 '면'이다 — 바탕색(--background-color)을 그대로 칠하면 다크에서 그 자리만
     글로우가 잘려 파여 보인다(2026-08-21 lint:surfaces 적발). */
  /* ⛔ 배경을 깔지 않는다 — 회사 화면의 키워드 검색과 같은 방식이다(사용자 확정 2026-08-22).
     흰 베일을 깔면 그 자리만 바탕 글로우가 눌려 컨트롤마다 밝기가 달라 보인다.
     경계는 **테두리**가 만들고, 포커스는 테두리 색이 알린다. */
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-label);
  outline: none;
  transition: border-color var(--motion-fast);
}
.app-search__input[data-v-9a87ac40]:focus { border-color: var(--ink-brand);
}
.app-search__input[data-v-9a87ac40]::-moz-placeholder { color: var(--ink-muted);
}
.app-search__input[data-v-9a87ac40]::placeholder { color: var(--ink-muted);
}

/* sm 변형 — 컨트롤 높이 한 단계 낮춤. 내부 액션 버튼도 xs 로 자동 매칭됨. */
.app-search--sm .app-search__input[data-v-9a87ac40] {
  height: var(--h-control-sm);
  padding: 0 calc(var(--h-control-xs) + var(--space-roomy)) 0 var(--space-band);
}
.app-search--sm .app-search__icon[data-v-9a87ac40] { left: var(--space-snug);
}

/* 터치 기기: 입력 폰트가 16px 미만이면 iOS Safari 가 포커스 시 페이지를 강제 줌인한다.
   입력 텍스트만 16px 로 키우고, 플레이스홀더는 작게 유지해 시각 차이를 줄인다.
   데스크톱(fine pointer)은 줌 이슈가 없으므로 13px 그대로 — 다른 컨트롤과 정렬. */
@media (pointer: coarse) {
.app-search__input[data-v-9a87ac40] { font-size: var(--size-lead);
}
.app-search__input[data-v-9a87ac40]::-moz-placeholder { font-size: var(--size-label);
}
.app-search__input[data-v-9a87ac40]::placeholder { font-size: var(--size-label);
}
  /* 드롭다운 항목도 입력창과 같은 크기로 — 입력 텍스트(16px)와 리스트가 어긋나지 않게. */
.app-search__row[data-v-9a87ac40] { font-size: var(--size-lead);
}
}
.app-search__count[data-v-9a87ac40] {
  position: absolute;
  right: var(--space-wide);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  pointer-events: none;
}

/* 입력창 안의 지우기(X) — AppButton(ghost, icon-only) 을 절대배치로 우측에 정렬 */
.app-search__clear[data-v-9a87ac40] {
  position: absolute;
  right: var(--space-snug);
  top: 50%;
  transform: translateY(-50%);
}

/* find-in-page 모드 — 우측 도구 묶음(카운터·이전/다음·지우기) 공간 확보.
   카운터(--step-8 폭) + 액션 3개(sm = --control-height-sm) + gap. */
.app-search__input--find[data-v-9a87ac40] {
  padding-right: calc(var(--h-control-sm) * 3 + var(--space-wide));
}
.app-search--sm .app-search__input--find[data-v-9a87ac40] {
  padding-right: calc(var(--h-control-xs) * 3 + var(--space-wide));
}
.app-search__find-tools[data-v-9a87ac40] {
  position: absolute;
  right: var(--space-tight);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.app-search__find-count[data-v-9a87ac40] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  padding: 0 var(--space-tight);
  white-space: nowrap;
}
.app-search__find-spinner[data-v-9a87ac40] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  padding: var(--pad-control);
}

/* 드롭다운 (자동완성 / 최근 검색어 공용) */
.app-search__drop[data-v-9a87ac40] {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow-y: auto;
}
.app-search__head[data-v-9a87ac40] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-tight) var(--space-snug) var(--space-tight) var(--space-cozy);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  border-bottom: var(--line-strong);
}

/* 항목 행 (자동완성·히스토리 공용) — role="option" 의 <div>, 버튼 아님 */
.app-search__row[data-v-9a87ac40] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  padding: var(--pad-row-dense);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  cursor: pointer;
}

/* 강조 항목은 하나뿐 — 마우스 호버(@mousemove)와 키보드(↑↓)가 같은 activeIndex 를
   가리킨다. 별도 hover 색을 두지 않아 "호버색 vs 선택색" 충돌이 없다.
   강조 행에선 자동완성 형광표시(노랑)를 흰 굵게로 바꿔 초록 배경과 겹치지 않게. */
.app-search__row--active[data-v-9a87ac40] { background: var(--bg-brand); color: var(--ink-on-solid);
}
.app-search__row--active .app-search__row-icon[data-v-9a87ac40] { color: var(--ink-on-solid);
}
.app-search__row--active[data-v-9a87ac40] .highlight-text__mark {
  background: transparent;
  color: var(--ink-on-solid);
}
.app-search__row-icon[data-v-9a87ac40] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.app-search__row-text[data-v-9a87ac40] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 히스토리 행 삭제(X) — AppButton(ghost, icon-only) */
.app-search__row-remove[data-v-9a87ac40] {
  flex-shrink: 0;
}

.detail-filter-field[data-v-fc401212] {
  display: flex;
  align-items: stretch;
  /* 같은 줄 컨트롤(검색창·정렬)과 높이 일치 — 디자인 시스템 표준 32px */
  min-height: var(--h-control-md);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  transition: border-color var(--motion-fast);
}

/* 같은 줄 컨트롤이 sm(검색창·버튼)인 화면에서 높이를 맞추기 위한 변형.
   기본은 표준 32px(md) 유지 — 필요한 화면만 size="sm" 을 준다.
   ⚠️ 기본 규칙과 특이도가 같으므로 반드시 **뒤에** 와야 이긴다. */
.detail-filter-field--sm[data-v-fc401212] {
  min-height: var(--h-control-sm);
}
/* 안쪽 MultiSelect 는 세로 패딩(4+4) + 내용 20px = 28px 라 26px 셸을 밀어낸다.
   sm 에서는 패딩을 걷어 셸 높이에 맞춘다. */
.detail-filter-field--sm .detail-filter-field__control[data-v-fc401212] .multi-select-control {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}
.detail-filter-field--sm .detail-filter-field__label[data-v-fc401212],
.detail-filter-field--sm .detail-filter-field__remove[data-v-fc401212] {
  line-height: var(--line-none);
}

/* ⛔ **한 칸에 ✕ 는 하나다.** 이 껍데기가 이미 오른쪽 끝에 ✕ 를 세운다 — 슬롯에 든 컨트롤이
   제 「비우기」 ✕ 를 또 내면 같은 자리에 ✕ 가 둘로 붙어 선다. 어느 쪽이 무엇을 지우는지
   구분이 안 되고, 실제로 사용자가 눈으로 찾아냈다(실사고 2026-09-12: 수동추출 「유입일」·
   수동파싱 「판매개시일」 칸 — 그 두 칸만 ✕ 가 2개, 나머지 여섯 칸은 1개였다).
   ⚠️ 감추는 것은 **껍데기의 ✕ 가 실제로 설 때뿐**이다(`--removable`) — 안 그러면 비울 길이 없어진다.
   값을 비우는 길은 껍데기의 ✕ 와 날짜 팝업 아래의 [비우기] 둘이 남는다. */
.detail-filter-field--removable .detail-filter-field__control[data-v-fc401212] .date-range-clear-btn {
  display: none;
}

/* 호버/포커스 강조는 그룹 바깥 테두리에만 준다 (내부 구분선은 그대로) */
.detail-filter-field[data-v-fc401212]:hover,
.detail-filter-field[data-v-fc401212]:focus-within {
  border-color: var(--ink-brand);
}
.detail-filter-field__label[data-v-fc401212] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--space-snug);
  border-right: var(--line-strong);
}
.detail-filter-field__label label[data-v-fc401212] {
  margin: 0;
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
}
.detail-filter-field__control[data-v-fc401212] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* 슬롯의 MultiSelect(AppSelect)는 자체 테두리를 벗고 그룹에 녹는다 */
.detail-filter-field__control[data-v-fc401212] .multi-select-wrapper {
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
}
.detail-filter-field__control[data-v-fc401212] .multi-select-control {
  border: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100%;
  background: transparent;
}
/* 펼침 시 컨트롤 자체 그림자는 제거 — 그룹 테두리로 충분 */
.detail-filter-field__control[data-v-fc401212] .multi-select-control.open {
  box-shadow: none !important;
}

/* 슬롯에 DateRangePicker 를 넣는 경우(상품 목록 등)도 동일하게 그룹에 녹인다 */
.detail-filter-field__control[data-v-fc401212] .date-range-wrapper {
  width: 100%;
}
.detail-filter-field__control[data-v-fc401212] .date-range-control {
  border: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100%;
  background: transparent;
  /* 값 입력 시 나타나는 clear(✕) 버튼(22px)이 세로 padding(6px*2)과 합쳐 34px 가
     되어 셸 높이를 32px→34px 로 밀어내던 문제 차단. 셸이 height:100%+align-items:center
     로 세로 정렬을 책임지므로 컨트롤 자체 세로 padding 은 불필요. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.detail-filter-field__remove[data-v-fc401212] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--space-tight);
  border-left: var(--line-strong);
}

.pkg-cover[data-v-440685c6] {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  box-sizing: border-box;
  /* 배경은 카드 썸네일(.thumb)의 패키지 틴트를 그대로 비춤 — 자체 배경 없음 */
  background: transparent;
  overflow: hidden;
  text-align: center;
}

/* 폭에 맞춰 여러 줄로 감싸 표시 (내용 높이 — 빈 줄 없이 텍스트 바로 위) */
.pkg-cover__favicons[data-v-440685c6] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
  width: 100%;
}
.pkg-cover__favicon[data-v-440685c6] {
  width: 24px; height: 24px; /* dimensions-ignore: 파비콘 고정 크기 */
  /* 라운딩·테두리·프레임 없이 평평하게 */
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  box-sizing: border-box;
}
/* 원본보다 키우지 않음(업스케일 엘리어싱 방지) — 작은 파비콘은 원본 크기 그대로, 큰 것만 축소 */
.pkg-cover__favicon img[data-v-440685c6] { max-width: 100%; max-height: 100%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; image-rendering: auto;
}
.pkg-cover__favicon-initial[data-v-440685c6] { font-size: var(--icon-label); font-weight: var(--weight-strong); color: var(--ink-secondary);
}
.pkg-cover__favicon-more[data-v-440685c6] {
  font-size: var(--icon-marker);
  font-weight: var(--weight-strong);
  color: var(--ink-brand);
  flex: none;
}
.pkg-cover__count[data-v-440685c6] { display: flex; align-items: baseline; gap: var(--gap-glyph); color: var(--ink-primary);
}
.pkg-cover__count strong[data-v-440685c6] { font-size: var(--size-title-lg); font-weight: var(--weight-strong); line-height: var(--line-none);
}
.pkg-cover__count-unit[data-v-440685c6] { font-size: var(--size-label); color: var(--ink-secondary);
}
.pkg-cover__label[data-v-440685c6] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hero(상세 표지)는 자체 배경을 가짐 — 목록 카드와 달리 뒤에 .thumb 틴트가 없으므로 */
.pkg-cover--hero[data-v-440685c6] {
  border-radius: var(--radius-control);
  /* ⛔ 면색(다크에서 투명)으로 그라데이션을 만들지 않는다 — 표지가 통째로 사라진다.
     옅은 흰 베일 두 단으로 층을 만든다. */
  background: linear-gradient(150deg, var(--bg-field), var(--bg-card));
}

/* 작은 카드(목록)에서는 텍스트·파비콘 축소 */
.pkg-cover--card .pkg-cover__count strong[data-v-440685c6] { font-size: var(--size-title);
}
.pkg-cover--card .pkg-cover__favicon[data-v-440685c6] { width: 20px; height: 20px;
} /* dimensions-ignore: 파비콘 고정 크기 */
.pkg-cover--card .pkg-cover__label[data-v-440685c6] { font-size: var(--size-meta);
}

.catalog-page[data-v-e2844fbc] {
  /* 최대폭 제한 없음 — 넓은 화면에서도 좌우 여백은 padding 만(상단과 동일 정책) */
  width: 100%;
  flex: 1 1 auto;        /* 부모 .app-shell__content 의 flex column 안에서 남는 공간 차지 */
  min-height: 0;
  display: flex;
  flex-direction: column;  /* 헤더 + body */
  overflow: hidden;        /* page 자체는 스크롤 X — 자식 catalog-body 가 스크롤 */
  box-sizing: border-box;
  padding: var(--space-band) var(--space-band) 0;
}
.catalog-body[data-v-e2844fbc] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* page 의 좌우 padding 을 음수마진으로 흡수해 본문이 좌우 가득 차게 */
  margin: 0 calc(var(--gap-band) * -1);
  /* 좌우 여백만 — 상하 여백은 가상화 paddingStart/End(PAGE_PAD_Y)가 담당한다.
     (스크롤 컨테이너에 padding-top 을 두면 가상화 좌표와 어긋난다) */
  padding: 0 var(--space-band);
}

/* 검색/정렬/건수 헤더 — 우측 padding 으로 본문 스크롤바 너비를 보정해
   돋보기 버튼 우측 끝과 카드 우측 끝이 정확히 정렬되게 함 */
.catalog-header[data-v-e2844fbc] {
  margin-bottom: 0;
  padding-right: var(--sb-w, 0);
}

/* 모바일 자동 숨김 — 스크롤을 따라가는 동안은 transition 없이 1:1 이동(멈추면 그
   자리). 수동 토글 같은 이산 이동일 때만 transition 으로 마무리. .catalog-page 의
   overflow:hidden 이 위로 밀려 나간 헤더를 클립한다. */
.catalog-header--animate[data-v-e2844fbc] {
  transition: margin-top var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.catalog-header--animate[data-v-e2844fbc] {
    transition: none;
}
}

/* 모바일: page 의 상단 여백을 헤더 안으로 옮겨 헤더 높이(offsetHeight)에 포함시킨다.
   그래야 완전 숨김 시 padding 영역으로 헤더 꼬리가 비치지 않는다. */
@media (max-width: 768px) {
.catalog-page[data-v-e2844fbc] {
    padding-top: 0;
}
.catalog-header[data-v-e2844fbc] {
    padding-top: var(--space-band);
}
}
.header-bar[data-v-e2844fbc] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  /* 너비가 모자라면 정렬이 다음 줄로 — 그래도 우측 정렬 유지 */
  flex-wrap: wrap;
  row-gap: var(--gap-stack);
}
.header-bar > .detail-search-toggle[data-v-e2844fbc] {
  margin-left: auto;
}
.search-result-msg[data-v-e2844fbc] {
  margin-top: var(--gap-stack);
  font-size: var(--size-body);
  color: var(--ink-secondary);
}

/* 상세검색 토글 버튼 — 정렬 컨트롤 옆에 배치 */
.detail-search-toggle[data-v-e2844fbc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  /* 검색 입력(AppSearchInput) · 정렬 버튼(AppButton md) 과 동일 높이 토큰 사용 — 상단 컨트롤 정렬 */
  height: var(--h-control-md);
  padding: 0 var(--space-roomy);
  box-sizing: border-box;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
  white-space: nowrap;
}
.detail-search-toggle[data-v-e2844fbc]:hover { color: var(--ink-primary); background: var(--bg-hover);
}
.detail-search-toggle.active[data-v-e2844fbc] { color: var(--ink-primary); border-color: var(--ink-brand);
}
.detail-search-toggle.has-filters[data-v-e2844fbc] { color: var(--ink-primary);
}
.detail-search-toggle .filter-clear-x[data-v-e2844fbc] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: var(--gap-glyph);
  border-radius: var(--radius-pill);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.detail-search-toggle .filter-clear-x[data-v-e2844fbc]:hover {
  background: var(--bg-active);
  color: var(--ink-primary);
}
.detail-search-toggle .filter-clear-x i[data-v-e2844fbc] { font-size: var(--icon-label);
}

/* 상세검색 패널 — flex wrap, 각 셀 240px 고정. 줄 높이 stretch 방지 */
.detail-filter-panel[data-v-e2844fbc] {
  margin-top: var(--gap-stack);
  padding: var(--pad-panel);
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-stack);
  align-content: flex-start;
  align-items: flex-start;
}
/* DetailFilterField 셸의 폭 — 고정 240px, 늘어남 X (라벨+컨트롤+✕ 포함) */
.detail-filter-item[data-v-e2844fbc] {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  min-width: 0;
}
/* 판매 시작/종료일 묶음 — 둘이 한 줄에 붙어 다님(공간 없으면 묶음 통째로 다음 줄) */
.detail-filter-dategroup[data-v-e2844fbc] {
  display: flex;
  gap: var(--gap-stack);
  flex: 0 0 auto;
}
/* 날짜 셸은 DateRangePicker(시작~종료 2입력) 폭이 240px 를 넘으므로 내용대로 늘어난다 */
.detail-filter-dategroup .detail-filter-item[data-v-e2844fbc] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.detail-filter-actions[data-v-e2844fbc] {
  flex: 1 0 100%;            /* 다음 줄 + 우측 정렬 */
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-stack);
  margin-top: var(--gap-inline);
}
@media (max-width: 480px) {
  /* 폰: 날짜 묶음도 세로로 풀어 각 행이 한 줄씩 차지 */
.detail-filter-dategroup[data-v-e2844fbc] {
    flex: 1 1 100%;
    flex-direction: column;
    gap: var(--gap-inline);
}
  /* 폰: 셸이 한 줄씩 전체 폭 차지 */
.detail-filter-item[data-v-e2844fbc] {
    flex: 1 1 100%;
    max-width: none;
    width: auto;
}
.detail-search-toggle .dst-label[data-v-e2844fbc] { display: none;
}

  /* DateRangePicker popup 이 360px 고정이라 폰에서 화면 벗어남 — viewport 안에 맞춤 */
.detail-filter-item[data-v-e2844fbc] .date-range-popup {
    width: calc(100vw - 24px);
    max-width: 360px;
    left: auto;
    right: 0;
}
  /* MultiSelect dropdown — 기본 width:max-content + min-width:100% 라 폰에서 control 보다 넓게 펼쳐짐.
     control 너비에 맞추고 max-width 로 viewport 보호 */
.detail-filter-item[data-v-e2844fbc] .multi-select-dropdown {
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 24px);
}
}

/* 폰: search 가 row1 전체, 상세검색 + 정렬이 row2 한 줄에 같이 */
@media (max-width: 480px) {
.header-bar > .search-wrap[data-v-e2844fbc] { flex: 1 1 100%;
}
.header-bar > .detail-search-toggle[data-v-e2844fbc] {
    margin-left: 0;
    flex: 0 0 auto;
}
.header-bar > .sort-toggle[data-v-e2844fbc] {
    flex: 1 1 0;
    min-width: 0;
}
.sort-toggle[data-v-e2844fbc] .app-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--space-snug);
}
}

/* 검색창 wrapper — 내부는 공통 AppSearchInput(돋보기·입력·지우기·드롭다운 내장).
   wrapper 는 외부 레이아웃(flex 분배, 너비)만 담당한다. */
.search-wrap[data-v-e2844fbc] {
  flex: 1 1 240px;   /* 검색창은 남는 공간 차지, 정렬은 우측에 자기 너비 */
  min-width: 0;
}

/* 정렬 — 세그먼트형 토글 버튼 그룹 (단일 선택).
   AppButton(ghost) 위에 세그먼트 컨트롤 외형만 덮어쓴다 (SortControl 과 동일 패턴):
   muted 박스 컨테이너 안에서 활성 항목만 raised chip 으로 부각. */
.sort-toggle[data-v-e2844fbc] {
  display: inline-flex;
  /* 세그먼트 내부 칩이 컨테이너 높이를 채우도록 stretch — 칩 높이는 토큰에서 자동 도출 */
  align-items: stretch;
  /* 검색 입력(AppSearchInput) · 상세검색 토글과 동일 높이 토큰 사용 — 상단 컨트롤 정렬 */
  height: var(--h-control-md);
  box-sizing: border-box;
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-tight);
  gap: var(--gap-glyph);
}
.sort-toggle[data-v-e2844fbc] .app-btn {
  /* 컨테이너 높이(토큰) - 상하 padding/border 를 flex stretch 로 자동 채움 */
  height: auto;
  padding: 0 var(--space-roomy);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
}
.sort-toggle[data-v-e2844fbc] .app-btn.app-btn--active {
  background: var(--bg-field);
  box-shadow: var(--shadow-sm);
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.sort-toggle[data-v-e2844fbc] .app-btn.app-btn--active:hover {
  background: var(--bg-field);
}


/* 결과 수 — sticky 헤더 안 (margin 0 으로 상하 통합) */
.result-summary[data-v-e2844fbc] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 빈/로딩 상태 */
.state-msg[data-v-e2844fbc] { padding: var(--space-wide); text-align: center; color: var(--ink-secondary);
}
.empty[data-v-e2844fbc] { padding: var(--space-wide) var(--space-roomy); text-align: center; color: var(--ink-muted);
}
.empty-icon[data-v-e2844fbc] { font-size: var(--icon-hero); margin-bottom: var(--gap-stack); opacity: 0.6;
}

/* 가상 스크롤 컨테이너 — 총 높이만큼 자리만 잡고, 안에 보이는 행만 그림 */
.virtual-viewport[data-v-e2844fbc] {
  position: relative;
  width: 100%;
}
/* 카드 격자 — 행 하나가 곧 가상 항목. 측정형 가상화가 translateY 로 위치를 잡는다.
   행 간 세로 간격은 가상화 gap(GRID_GAP)이, 열 간 가로 간격은 이 grid 의 gap 이 담당. */
.card-grid[data-v-e2844fbc] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  /* grid-template-columns 는 :style 로 동적 주입 (auto-fill 대신 고정 cols 수) */
  gap: var(--gap-band);
  will-change: transform;
}

/* 무한 스크롤 인디케이터 */
.more-state[data-v-e2844fbc] {
  text-align: center;
  padding: var(--space-snug) var(--space-band);
  margin-bottom: var(--gap-group);
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.more-state.end[data-v-e2844fbc] { opacity: 0.5;
}
.dot-pulse[data-v-e2844fbc] {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
  margin-right: var(--gap-inline);
  animation: dot-pulse-e2844fbc 1.2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes dot-pulse-e2844fbc {
0%, 100% { opacity: 0.3; transform: scale(0.85);
}
50%      { opacity: 1;   transform: scale(1.15);
}
}

/* 맨 위/맨 아래 점프 버튼 */
.scroll-jump[data-v-e2844fbc] {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.jump-btn[data-v-e2844fbc] {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: var(--line-strong);
  background: var(--bg-field);
  color: var(--ink-primary);
  cursor: pointer;
  font-size: var(--size-lead);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.jump-btn[data-v-e2844fbc]:hover:not(.disabled) {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
  transform: translateY(-2px);
}
.jump-btn.disabled[data-v-e2844fbc],
.jump-btn[disabled][data-v-e2844fbc] {
  opacity: 0.35;
  cursor: not-allowed;
}
.catalog-card[data-v-e2844fbc] {
  display: flex;
  flex-direction: column;
  /* 테마별 토큰 — 다크: var(--bg-card) (배경 위에서 한 단계 떠올림),
     라이트: 흰색 (페이지보다 밝게). 카드가 항상 페이지보다 도드라지게. */
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  overflow: hidden;
  cursor: pointer;
  /* 정지 상태에서도 약간 떠 있는 느낌 — depth 가 격자를 살림. 테마별로 그림자 톤 다름. */
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}
.catalog-card[data-v-e2844fbc]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--ink-brand);
}

/* 패키지 카드 — 카드 모양/구조는 일반 상품과 동일. 본문 배경 톤만 info 계열로 살짝.
   썸네일(.thumb)은 일반과 똑같이 --thumb-bg 유지해 분리감을 보존한다. */
.catalog-card--package[data-v-e2844fbc] {
  background: color-mix(in srgb, var(--ink-info) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--ink-info) 22%, var(--line-color));
}
.thumb[data-v-e2844fbc] {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 테마별 썸네일 배경 (style.css 의 --thumb-bg).
     다크: 짙은 검정 + 형광 그린 radial. 라이트: 슬레이트 종이 + 옅은 듀얼 톤 highlight.
     surface-ignore: **표지가 놓이는 자리**다 — 화면 판이 아니라 그림틀이라 일부러 어둡다.
     여기서 바탕 글로우가 끊기는 것은 결함이 아니라 표지를 돋보이게 하는 의도다. */
  background: var(--bg-thumb);
  overflow: hidden;
}
.thumb > img[data-v-e2844fbc] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
}

/* 책 메타포: 표지(이미지) + 좌측 책등 + 우측 페이지 단면(두께 = total_pages) */
.book[data-v-e2844fbc] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 78%;
  aspect-ratio: 3 / 4;
  --book-thickness: 8px;
  background: var(--bg-field);
  border-radius: var(--radius-badge) var(--radius-badge) var(--radius-badge) var(--radius-badge);
  box-shadow: var(--shadow-float);
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, filter var(--motion-base) ease;
  /* overflow: visible 유지 — .book-pages 가 우측으로 확장 */
}
.book-single[data-v-e2844fbc] { height: 82%;
}
.book-cover[data-v-e2844fbc] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
  background: var(--bg-field);
}
/* 가로 썸네일을 90° 반시계방향 회전해서 세로 책 표지에 안 짤리고 들어가게.
   부모(.book)는 aspect-ratio 3/4. 회전 후 박스 안을 가득 채우려면
   회전 전 박스 크기는 width = parent_height (= 100% × 4/3),
                    height = parent_width  (= 100% × 3/4) 이어야 한다. */
.book-cover.is-landscape[data-v-e2844fbc] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(100% * 4 / 3);
  height: calc(100% * 3 / 4);
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}
/* tokens-ignore-start: 책 메타포 입체감 — 의미색이 아닌 장식 아트 그라데이션/그림자 */
/* 좌측 책등 — 어두운 띠로 묶인 부분 표현 */
.book-spine[data-v-e2844fbc] {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 8px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent
  );
  border-radius: var(--radius-badge) 0 0 var(--radius-badge);
  pointer-events: none;
  z-index: 2;
}
/* 우측 페이지 단면 — 두께가 곧 페이지 수.
   repeating-linear-gradient 로 종이 결을 표현. 색은 라이트/다크 공통의 종이톤. */
.book-pages[data-v-e2844fbc] {
  position: absolute;
  top: 1.5%;
  bottom: 1.5%;
  right: calc(var(--book-thickness) * -1);
  width: var(--book-thickness);
  background:
    repeating-linear-gradient(
      to right,
      var(--deco-book-page) 0,
      var(--deco-book-page) 1px,
      var(--deco-book-page-line) 1px,
      var(--deco-book-page-line) 2px
    );
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.25),
    inset 1px 0 0 rgba(0, 0, 0, 0.18),
    1px 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
}
/* 책꽂이 — 다중 문서 */
.book-stack[data-v-e2844fbc] {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 책꽂이 표시 — 모든 책이 baseline 에 발을 맞춰 기댐 */
.book-stacked[data-v-e2844fbc] {
  top: auto;
  bottom: 8%;
  height: 78%;
  transform-origin: 50% 100%;     /* 바닥을 축으로 기댐 */
}
/* 책꽂이 baseline — 옅은 그림자 라인으로 책 발 부분이 닿아 있음을 암시 */
.book-stack[data-v-e2844fbc]::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.25) 80%,
    transparent 100%
  );
  border-radius: var(--radius-badge);
  pointer-events: none;
}
/* tokens-ignore-end */
.catalog-card:hover .book[data-v-e2844fbc] {
  filter: brightness(1.05);
}
.thumb-placeholder[data-v-e2844fbc] {
  padding: var(--space-cozy);
  text-align: center;
}
.thumb-doc-type[data-v-e2844fbc] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: var(--line-tight);
}
.thumb-new-marker[data-v-e2844fbc] {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;          /* 페이지 이미지/부채꼴 위에 항상 노출 */
}
.thumb-published-at[data-v-e2844fbc] {
  position: absolute;
  top: 10px; right: 10px;
  /* surface-ignore: 표지 그림 **위에 얹는 어두운 스크림**이다 — 어떤 표지가 와도 글자가
     읽히려면 불투명에 가까워야 한다. 화면 판이 아니라 그림 위 라벨이다. */
  color: var(--ink-on-solid); /* 어두운 스크림 위 글자 */
  font-size: var(--size-meta);
  font-weight: var(--weight-body);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  z-index: 5;
  pointer-events: none;
  /* 책 표지 위에서도 항상 읽히도록 어두운 반투명 펠릿 (책 그림자와 동일 스크림 패턴) */
  padding: var(--pad-badge); /* dimensions-ignore — 펠릿 세로 미세 패딩 */
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.5); /* tokens-ignore — 이미지 위 스크림(의미색 아님) */  /* role-ignore: 이미지 위 스크림 — 테마색이 아니라 고정 검정 반투명 */
  backdrop-filter: blur(2px);
}

/* 카드 본문 */
.card-body[data-v-e2844fbc] {
  padding: var(--space-cozy) var(--space-roomy) var(--space-roomy);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1;                /* 남는 세로 공간 차지 → meta 가 바닥으로 밀림 */
}
.card-brand[data-v-e2844fbc] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
/* 회사 파비콘이 아니라 '패키지' 표식(대표 파비콘이 없을 때의 자리표시).
   회사 파비콘 자체는 공통 CompanyFavicon 이 그린다 — docs/design-system/company-favicon.md */
.card-favicon[data-v-e2844fbc] { /* component-ignore: 패키지 표식 자리표시(회사 파비콘 아님) */
  width: 14px;
  height: 14px;
  border-radius: var(--radius-badge);
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}
.card-favicon--initial[data-v-e2844fbc] { /* component-ignore: 위와 동일 — 패키지 표식 자리표시 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--icon-marker);
  font-weight: var(--weight-strong);
  border-radius: var(--radius-pill);
}
.card-title[data-v-e2844fbc] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  line-height: var(--line-comfortable);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 판매시기 — 제목 아래 한 줄, 살짝 흐리게 */
.card-sales[data-v-e2844fbc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  opacity: 0.85;
}
.card-sales i[data-v-e2844fbc] { font-size: var(--icon-marker); opacity: 0.7;
}
.card-meta[data-v-e2844fbc] {
  display: flex;
  align-items: center;
  justify-content: center;     /* 메타 뱃지 가운데 정렬 */
  gap: var(--gap-stack);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  flex-wrap: wrap;
}
.card-meta > span[data-v-e2844fbc] {
  white-space: nowrap;     /* 각 항목(아이콘+숫자+단위) 한 덩어리로 유지 */
}
.card-meta i[data-v-e2844fbc] { margin-right: var(--gap-glyph);
}
.card-meta-right[data-v-e2844fbc] { margin-left: auto;
}
/* 좋아요/싫어요 버튼 — meta 줄에 같이 배치, 카드 클릭(상세 이동) 과 분리 */
.reaction-btn[data-v-e2844fbc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: var(--size-meta);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
  white-space: nowrap;
}
.reaction-btn[data-v-e2844fbc]:hover:not(:disabled) {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.reaction-btn.active[data-v-e2844fbc] {
  color: var(--ink-brand);
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
  animation: reaction-flash-e2844fbc 0.45s ease-out;
}
.reaction-btn[data-v-e2844fbc]:disabled { opacity: 0.55; cursor: progress;
}
.reaction-btn i[data-v-e2844fbc] { margin-right: 0; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reaction-btn[data-v-e2844fbc]:active:not(:disabled) { transform: scale(0.94);
}
.reaction-btn.active i[data-v-e2844fbc] { animation: reaction-pop-e2844fbc 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reaction-pop-e2844fbc {
0%   { transform: scale(0.7) rotate(-12deg);
}
55%  { transform: scale(1.45) rotate(8deg);
}
100% { transform: scale(1) rotate(0);
}
}
@keyframes reaction-flash-e2844fbc {
0%   { box-shadow: 0 0 0 0 rgba(var(--ink-brand-rgb), 0.45);
}
  /* role-ignore: 퍼지는 맥박 링 — 반경이 0에서 커지는 애니메이션이라 고정 그림자로 못 바꾼다 */
100% { box-shadow: 0 0 0 10px transparent;
}
}
/* 카드 바닥 줄 — 좋아요/싫어요(왼쪽) + 가격(오른쪽). margin-top:auto 로 카드 하단에 고정. */
.card-bottom-row[data-v-e2844fbc] {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.card-reactions[data-v-e2844fbc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
/* 가격 — 강조색(primary). 상세 페이지의 purchase-price__value 와 동일 색. */
.card-price[data-v-e2844fbc] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-brand);
  white-space: nowrap;
  letter-spacing: -0.01em;
  margin-left: auto;
}
.card-price--strike[data-v-e2844fbc] {
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  opacity: 0.7;
}
.card-type-tag[data-v-e2844fbc] {
  margin-left: auto;
  flex-shrink: 0;
}


.app-chip[data-v-67df1138] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-family: inherit;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.app-chip--sm[data-v-67df1138] {
  font-size: var(--size-meta);
  padding: var(--pad-badge);
}
.app-chip[data-v-67df1138]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.app-chip[data-v-67df1138]:not(:disabled):hover {
  border-color: var(--ink-brand);
  color: var(--ink-primary);
}
.app-chip[data-v-67df1138]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.app-chip__icon[data-v-67df1138] { font-size: var(--font-rel-sm); line-height: var(--line-none);
} /* css-ignore: decorative em */

/* === Active (soft, 기본): 의미색 연한 틴트 === */
.app-chip--active.app-chip--neutral[data-v-67df1138] { background: var(--bg-active); color: var(--ink-primary); border-color: var(--bg-active);
}
.app-chip--active.app-chip--primary[data-v-67df1138] { background: var(--bg-brand-soft); color: var(--ink-brand); border-color: var(--bg-brand-soft);
}
.app-chip--active.app-chip--success[data-v-67df1138] { background: var(--bg-success-soft); color: var(--ink-success); border-color: var(--bg-success-soft);
}
.app-chip--active.app-chip--warning[data-v-67df1138] { background: var(--bg-warning-soft); color: var(--ink-warning); border-color: var(--bg-warning-soft);
}
.app-chip--active.app-chip--danger[data-v-67df1138]  { background: var(--bg-danger-soft);  color: var(--ink-danger);  border-color: var(--bg-danger-soft);
}
.app-chip--active.app-chip--info[data-v-67df1138]    { background: var(--bg-info-soft);    color: var(--ink-info);    border-color: var(--bg-info-soft);
}
.app-chip--active.app-chip--purple[data-v-67df1138]  { background: var(--bg-accent-purple-soft);  color: var(--ink-accent-purple);  border-color: var(--bg-accent-purple-soft);
}
.app-chip--active.app-chip--indigo[data-v-67df1138]  { background: var(--bg-accent-indigo-soft);  color: var(--ink-accent-indigo);  border-color: var(--bg-accent-indigo-soft);
}
.app-chip--active.app-chip--orange[data-v-67df1138]  { background: var(--bg-accent-orange-soft);  color: var(--ink-accent-orange);  border-color: var(--bg-accent-orange-soft);
}
.app-chip--active.app-chip--cyan[data-v-67df1138]    { background: var(--bg-accent-cyan-soft);    color: var(--ink-accent-cyan);    border-color: var(--bg-accent-cyan-soft);
}
.app-chip--active.app-chip--pink[data-v-67df1138]    { background: var(--bg-accent-pink-soft);    color: var(--ink-accent-pink);    border-color: var(--bg-accent-pink-soft);
}
.app-chip--active.app-chip--lime[data-v-67df1138]    { background: var(--bg-accent-lime-soft);    color: var(--ink-accent-lime);    border-color: var(--bg-accent-lime-soft);
}

/* === Active (solid): 의미색 채움 === */
.app-chip--active.app-chip--solid.app-chip--neutral[data-v-67df1138] { background: var(--ink-secondary); color: var(--ink-inverse); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--primary[data-v-67df1138] { background: var(--bg-brand); color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--success[data-v-67df1138] { background: var(--bg-success); color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--warning[data-v-67df1138] { background: var(--bg-warning); color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--danger[data-v-67df1138]  { background: var(--bg-danger);  color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--info[data-v-67df1138]    { background: var(--bg-info);    color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--purple[data-v-67df1138]  { background: var(--bg-purple);  color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--indigo[data-v-67df1138]  { background: var(--bg-indigo);  color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--orange[data-v-67df1138]  { background: var(--bg-orange);  color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--cyan[data-v-67df1138]    { background: var(--ink-accent-cyan);    color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--pink[data-v-67df1138]    { background: var(--ink-accent-pink);    color: var(--ink-on-solid); border-color: transparent;
}
.app-chip--active.app-chip--solid.app-chip--lime[data-v-67df1138]    { background: var(--ink-accent-lime);    color: var(--ink-on-solid); border-color: transparent;
}

.user-label[data-v-f2da0631] {
  display: inline-flex;
  align-items: center;
  /* ⛔ 이 한 줄이 이 부품의 존재 이유다 — 화면마다 고쳐 잡지 않는다. */
  gap: var(--gap-glyph);
  min-width: 0;
  vertical-align: middle;
  line-height: inherit;
}
.user-label__face[data-v-f2da0631] {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.user-label__text[data-v-f2da0631] {
  display: inline-flex;
  align-items: baseline;
  /* 이메일은 이름에 딸린 곁말이라 이름에 붙는다 */
  gap: var(--gap-glyph);
  min-width: 0;
}
.user-label__name[data-v-f2da0631] {
  /* 줄바꿈·말줄임은 그릇(컬럼)의 overflow 설정을 상속한다 — 자체 nowrap 강제 금지 */
  min-width: 0;
}
.user-label--emphasis .user-label__name[data-v-f2da0631] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.user-label__email[data-v-f2da0631] {
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
  white-space: nowrap;
}

.app-popover__trigger[data-v-b128db28] {
  display: inline-flex;
}
.app-popover__panel[data-v-b128db28] {
  position: fixed;
  /* 분할 화면(분리대 1021)·앱 크롬(1030) 위에 떠야 한다 — tokens.css 의 --z-popover 주석 참조. */
  z-index: var(--z-popover);
  /* ⛔ **폭을 자리가 정하게 두지 않는다.** `left` 만 준 fixed 요소는 폭을 「그 좌표에서
     화면 오른쪽 끝까지」로 잡는다 — 오른쪽 끝에 붙은 단추의 말풍선은 그 좁은 틈만큼
     눌려, 한 줄이면 될 문구가 낱말 가운데서 꺾인다(실측 2026-08-29: 재추출 확인 문구가
     「팩터값을 다시 추출 / 할까요?」로 갈렸다). 폭은 **내용**이 정하고 상한만 건다. */
  width: -moz-max-content;
  width: max-content;
  padding: var(--pad-card);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-float);
  color: var(--ink-primary);
}
/* 안의 것이 제 여백을 갖는 경우(메뉴 등) — 껍데기는 테두리·그림자만 맡는다. */
.app-popover__panel--flush[data-v-b128db28] {
  padding: 0;
  /* 안의 첫/끝 항목이 모서리를 넘어가지 않게. flush 일 때만 — 다른 팝오버의 내용은
     안에서 떠야 하는 것(고르개 등)이 있어 자르면 안 된다. */
  overflow: hidden;
}
.app-popover__arrow[data-v-b128db28] {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--bg-float);
  border-left: var(--line-strong);
  border-top: var(--line-strong);
  transform: rotate(45deg);
}
/* 위쪽 배치일 때 화살표는 아래를 향한다 */
.app-popover__panel--top-start .app-popover__arrow[data-v-b128db28],
.app-popover__panel--top-end 
.app-popover__panel--flush[data-v-b128db28] {
  padding: 0;
  /* 안의 첫/끝 항목이 모서리를 넘어가지 않게. flush 일 때만 — 다른 팝오버의 내용은
     안에서 떠야 하는 것(고르개 등)이 있어 자르면 안 된다. */
  overflow: hidden;
}
.app-popover__arrow[data-v-b128db28] {
  transform: rotate(225deg);
}
.app-popover-enter-active[data-v-b128db28],
.app-popover-leave-active[data-v-b128db28] {
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.app-popover-enter-from[data-v-b128db28],
.app-popover-leave-to[data-v-b128db28] {
  opacity: 0;
}

/* 폭·높이 고정 → 상태가 바뀌어도 헤더 레이아웃이 흔들리지 않음 */
.sort-ind[data-v-c89050dc] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 0.8em;
  height: 1.1em;
  flex-shrink: 0;
  line-height: 0; /* css-ignore: out of token scale */
}
.sort-ind__pair-up[data-v-c89050dc],
.sort-ind__pair-down[data-v-c89050dc] {
  font-size: var(--font-rel-xs);
  line-height: 0.62; /* css-ignore: out of token scale */
  color: var(--ink-muted);
  opacity: 0.45;
}
.sort-ind__active[data-v-c89050dc] {
  font-size: var(--font-rel-sm);
  color: var(--ink-brand);
}

/* 형제 프리미티브 AppInput(.app-input)과 동일한 토큰 기반 기본 외형을 갖는다.
   호출처가 별도 class 로 width/height/padding 등을 덮어쓰면 그 값이 우선한다
   (컴팩트 입력 등). 아무 스타일도 안 주면 이 기본값으로 테마에 맞게 렌더된다. */
.app-number-input[data-v-72a84d16] {
  box-sizing: border-box;
  width: 100%;
  height: var(--h-control-md);
  padding: 0 var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-body);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.app-number-input[data-v-72a84d16]::-moz-placeholder {
  color: var(--ink-muted);
}
.app-number-input[data-v-72a84d16]::placeholder {
  color: var(--ink-muted);
}
.app-number-input[data-v-72a84d16]:focus-visible {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}

/* === Sizes === */
.app-number-input--sm[data-v-72a84d16] {
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
}

.app-radio[data-v-1bd63b80] {
  /* 숨긴 native input(absolute)의 기준 — AppCheckbox 와 동일 이유.
     없으면 포커스 시 scroll-into-view 가 페이지를 통째로 스크롤시킨다. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.app-radio--disabled[data-v-1bd63b80] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 네이티브 입력은 숨기되 접근성·포커스는 유지 */
.app-radio__input[data-v-1bd63b80] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.app-radio__dot[data-v-1bd63b80] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  transition: border-color var(--motion-base);
}

/* 선택 시 가운데 primary 점 */
.app-radio__input:checked + .app-radio__dot[data-v-1bd63b80] {
  border-color: var(--ink-brand);
}
.app-radio__input:checked + .app-radio__dot[data-v-1bd63b80]::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
}
.app-radio__input:focus-visible + .app-radio__dot[data-v-1bd63b80] {
  box-shadow: var(--ring-focus);
}
.app-radio__label[data-v-1bd63b80] {
  font-size: var(--size-body);
  color: var(--ink-primary);
}

/* 삭제 작업: 평소 테마 기본색(상속) / 호버 시 위험색.
   <i> 색을 직접 지정하므로 상속(=AppButton hover 색)을 명시도 다툼 없이 이긴다. */
.app-action--danger:hover i[data-v-58233261] {
  color: var(--ink-danger);
}

.app-menu[data-v-40197341] {
  list-style: none;
  margin: 0;
  padding: var(--pad-menu);
}
.app-menu__item[data-v-40197341] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
  padding: var(--pad-menu-item);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-label);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.app-menu__item[data-v-40197341]:hover:not(:disabled) {
  background: var(--bg-hover);
}
.app-menu__item[data-v-40197341]:focus-visible {
  outline: var(--ring-focus);
  outline-offset: calc(var(--line-w) * -2);
}
.app-menu__item[data-v-40197341]:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}
.app-menu__item.is-danger[data-v-40197341] {
  color: var(--ink-danger);
}
.app-menu__item.is-danger[data-v-40197341]:hover:not(:disabled) {
  background: var(--bg-danger-soft);
}
.app-menu__icon[data-v-40197341] {
  width: var(--icon-label);
  flex: none;
  text-align: center;
  font-size: var(--icon-label);
  color: var(--ink-muted);
}
.app-menu__item.is-danger .app-menu__icon[data-v-40197341] {
  color: var(--ink-danger);
}
.app-menu__label[data-v-40197341] {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-menu__sep[data-v-40197341] {
  height: var(--line-w);
  margin: var(--gap-glyph) var(--gap-inline);
  background: var(--line-color);
}

.row-actions[data-v-6640a3ae] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex: 0 0 auto;
}

.lsc-when[data-v-71ccf785] {
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-secondary);
  white-space: nowrap;
}
/* ⛔ 작업 칸은 **오른쪽 끝선**에 선다 — 머리 글자와 같은 선이다(사용자 지시 2026-08-31).
   가운데로 두면 머리는 오른쪽, 단추는 가운데인 화면이 생긴다(실측: 화면마다 갈려 있었다). */
.lsc-actions[data-v-71ccf785] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: flex-end;
}

/**
 * ⛔ **목록 위에 떠 있다** — 목록의 세로 자리를 먹지 않고, 스크롤해도 같은 자리에 남는다.
 * ⛔ 면은 **떠 있는 것의 면**(`--bg-float`)이다 — 메뉴·모달과 같은 층으로 읽히고,
 *    두 테마가 각자 알아서 성립한다(짙은 면을 직접 칠하면 다크에서 검은 섬이 된다).
 */
.lsd[data-v-f427a327] {
  position: absolute;
  left: 50%;
  bottom: var(--space-roomy);
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  max-width: calc(100% - var(--space-roomy) * 2);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--pad-badge);
  padding-left: var(--space-roomy);
  background: var(--bg-float);
  color: var(--ink-primary);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  animation: lsd-in-f427a327 var(--motion-fast) ease-out;
}
@keyframes lsd-in-f427a327 {
from { opacity: 0; transform: translate(-50%, var(--space-tight));
}
to { opacity: 1; transform: translate(-50%, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.lsd[data-v-f427a327] { animation: none;
}
}
.lsd__count[data-v-f427a327] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  white-space: nowrap;
}
.lsd__sep[data-v-f427a327] {
  width: var(--line-w);
  align-self: stretch;
  background: var(--line-color);
}
.lsd[data-v-f427a327] .app-btn {
  white-space: nowrap;
}

/* 값 고르개 자리 — 화면이 넣은 고르개가 여기 선다. */
.lsd__controls[data-v-f427a327] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}

/* 진행 표시 — 화면이 넣은 글자·스피너가 여기 선다. */
.lsd__status[data-v-f427a327] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* 고른 범위를 넓힌 상태 — 켜져 있음이 한눈에 보이게. */
.lsd__scope.is-on[data-v-f427a327] i {
  color: var(--ink-brand);
}
.lsd__act.is-danger[data-v-f427a327] i {
  color: var(--ink-danger);
}

.tsm[data-v-4ebb99d4] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.tsm-section__title[data-v-4ebb99d4] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.tsm-hint[data-v-4ebb99d4] {
  margin: 0 0 var(--gap-stack);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.tsm-radio-row[data-v-4ebb99d4] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
}
.tsm-radio[data-v-4ebb99d4] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tsm-cols__head[data-v-4ebb99d4],
.tsm-col[data-v-4ebb99d4] {
  display: grid;
  grid-template-columns: 24px 28px 1fr 92px 110px 110px 96px;
  align-items: center;
  gap: var(--gap-inline);
}

/* hasCardSlot=true: 카드 표시 컬럼 자체가 사라지므로 6컬럼 grid */
.tsm-cols__head--no-card[data-v-4ebb99d4],
.tsm-col--no-card[data-v-4ebb99d4] {
  grid-template-columns: 24px 28px 1fr 92px 110px 96px;
}
.tsm-col__align[data-v-4ebb99d4],
.tsm-col__overflow[data-v-4ebb99d4],
.tsm-col__cardrole[data-v-4ebb99d4] {
  min-width: 0;
}
.tsm-cols__head[data-v-4ebb99d4] {
  padding: 0 var(--space-snug) var(--space-tight);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.tsm-cols[data-v-4ebb99d4] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.tsm-col[data-v-4ebb99d4] {
  padding: var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}
.tsm-col--drag-over[data-v-4ebb99d4] {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.tsm-col--hidden[data-v-4ebb99d4] {
  opacity: 0.55;
}
.tsm-col__handle[data-v-4ebb99d4] {
  display: flex;
  justify-content: center;
  color: var(--ink-muted);
  cursor: grab;
}
.tsm-col__vis[data-v-4ebb99d4] {
  display: flex;
  justify-content: center;
}

/* 외형/높이는 AppInput(size="sm")이 소유 — 여기선 폭만 지정 */
.tsm-col__label[data-v-4ebb99d4] {
  width: 100%;
}

/* 외형은 AppNumberInput(size="sm")이 소유 — 여기선 폭만 지정 */
.tsm-col__width[data-v-4ebb99d4] {
  width: 96px;
}

.lvs[data-v-60648e31] {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* 목록 끝에 닿은 뒤 더 끌어도 그 스크롤을 바깥(문서)으로 넘기지 않는다.
     넘기면 모바일에서 화면 전체가 위로 밀렸다 돌아온다(§ style.css 의 overscroll-behavior 주석). */
  overscroll-behavior: contain;
}

/* 바깥 상자에 맡긴 모드 — 스크롤 상자가 아니다. 높이는 내용(가상화 총높이)이 정하고,
   넘치는 것은 바깥 상자가 굴린다. ⛔ 여기에 overflow 를 주면 스크롤바가 다시 둘이 된다. */
.lvs--external[data-v-60648e31] {
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
}
.lvs__inner[data-v-60648e31] {
  position: relative;
  width: 100%;
}
.lvs__item[data-v-60648e31] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}

.list-body[data-v-09ffc966] {
  /* 세로 스크롤바 폭 — 스크립트가 실측해 덮어쓴다(기본은 없음). */
  --list-sbw: 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* 상태 표시 (초기 로딩 / 빈 결과 / 에러) */
.list-body__state[data-v-09ffc966] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding: var(--space-wide);
  color: var(--ink-muted);
}
.list-body__state-icon[data-v-09ffc966] {
  font-size: var(--icon-lead);
  opacity: 0.5;
}

/* 왜 비었는지 — 「찾는 말 · 조건 N개」. 본문보다 한 단 작고 옅게. */
.list-body__state-sub[data-v-09ffc966] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

/* 테이블 헤더 — 가로 스크롤은 바디와 동기(translateX), clip 으로 넘침 숨김.
   배경 띠 없이 하단 보더 + semibold + 옅은 글자색으로 헤더를 구분(모던 스타일). */
.list-body__head-clip[data-v-09ffc966] {
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: var(--line-strong);
  position: relative;
  /* 본문의 세로 스크롤바가 먹는 폭을 머리줄도 똑같이 비운다(위 scrollbarW 주석). */
  padding-right: var(--list-sbw);
}

/* 설정 버튼 — 헤더 행 우측 트레일링 트랙 위에 겹쳐 배치(별도 행 차지 안 함) */
.list-body__settings-btn[data-v-09ffc966] {
  position: absolute;
  top: 50%;
  /* 절대배치는 안여백 상자 기준이라 padding-right 를 안 탄다 — 스크롤바 폭만큼 직접 비운다. */
  right: calc(var(--space-tight) + var(--list-sbw));
  transform: translateY(-50%);
  z-index: 3;
}

/* 설명 줄 접기/펴기 — 설정 톱니가 있으면 그 왼쪽에 선다. */
.list-body__desc-btn[data-v-09ffc966] {
  position: absolute;
  top: 50%;
  right: var(--space-tight);
  transform: translateY(-50%);
  z-index: 3;
}
.list-body__desc-btn.is-with-settings[data-v-09ffc966] {
  right: var(--space-wide);
}

/* 설명 줄 — 행 아래 전체 폭. 행 내용에 곁들이는 글이라 한 단 낮은 색·크기로 둔다. */
.list-body__row-desc[data-v-09ffc966] {
  color: var(--ink-secondary);
  font-size: var(--font-rel-sm);
}

/* 팝오버 트리거 감싸개는 셀 폭을 그대로 물려준다 — 안 그러면 안쪽 말줄임이 풀린다.
   ⚠️ 그 span 은 AppPopover 것이라 :deep 없이는 규칙이 닿지 않는다(스코프 CSS). */
.list-body__cell[data-v-09ffc966] >  .app-popover__trigger {
  display: block;
  min-width: 0;
  overflow: hidden;
}

/* 설명 셀 — 한 줄만. 넘치면 말줄임하고 전체는 말풍선으로 본다. */
.list-body__desc[data-v-09ffc966] {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
}
/* 잘린 칸만 누를 수 있는 자리로 보인다 — 다 보이는 글에는 손 모양도 밑줄도 없다. */
.list-body__desc[data-truncated='true'][data-v-09ffc966] {
  cursor: pointer;
}
.list-body__desc[data-truncated='true'][data-v-09ffc966]:hover {
  color: var(--ink-primary);
  text-decoration: underline;
}
/* 전문 — 줄바꿈을 그대로 살린다(설명은 여러 줄로 적히는 글이다). */
.list-body__desc-full[data-v-09ffc966] {
  margin: 0;
  white-space: pre-wrap;
  line-height: var(--line-relaxed);
  color: var(--ink-primary);
}
/* 넘치는 열의 칸 — 넘침(nowrap·말줄임)은 셀의 ov-* 규칙이 건다. 여기서는 그 규칙이
   닿도록 블록으로만 세운다(인라인이면 text-overflow 가 적용되지 않는다). */
.list-body__cut[data-v-09ffc966] {
  display: block;
  min-width: 0;
}
/* 잘린 칸만 누를 수 있는 자리로 보인다 — 다 보이는 글에는 손 모양도 밑줄도 없다. */
.list-body__cut[data-truncated='true'][data-v-09ffc966] {
  cursor: pointer;
}
.list-body__cut[data-truncated='true'][data-v-09ffc966]:hover {
  text-decoration: underline;
}
/* 전문 — 줄바꿈을 그대로 살리고, 아주 긴 값은 말풍선 안에서 스크롤한다. */
.list-body__cut-full[data-v-09ffc966] {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow-y: auto;
  line-height: var(--line-relaxed);
  color: var(--ink-primary);
}

/* 설명이 없는 행도 자리를 지킨다 — 빈칸으로 두면 열이 비뚤어 보인다. */
.list-body__desc-empty[data-v-09ffc966] {
  color: var(--ink-muted);
}
.list-body__head[data-v-09ffc966] {
  display: grid;
  align-items: center;
}
.list-body__scroller[data-v-09ffc966] {
  flex: 1;
  min-height: 0;
}

/* auto-height 모드 — 부모를 채우지 않고 데이터 양에 맞춰 높이 결정(maxHeight 상한) */
.list-body.is-auto-height[data-v-09ffc966] {
  flex: 0 0 auto;
}
.list-body.is-auto-height .list-body__scroller[data-v-09ffc966] {
  flex: 0 0 auto;
}

/* ── 판 스크롤 모드 (ListScreen scroll='page') ──
   ⛔ **목록은 제 스크롤을 갖지 않는다.** 판이 이미 굴러가는데 목록까지 굴러가면
   세로 스크롤바가 둘로 서고, 판을 굴려 목록에 닿은 뒤 다시 목록 안에서 굴려야 한다
   (접수 MSHOP-202609-0005, 2026-09-04). 목록은 데이터 양만큼 자라고 넘치는 것은 판이 맡는다.
   가상 스크롤은 그대로 돌되 자가 판(ListScreen 루트)으로 바뀐다 — ListVirtualScroller 참조. */
.list-body.is-page-scroll[data-v-09ffc966] {
  flex: 0 0 auto;
}
.list-body.is-page-scroll .list-body__scroller[data-v-09ffc966] {
  flex: 0 0 auto;
}

/* 머리줄은 판을 굴리는 동안에도 붙어 있어야 한다 — 위에 붙박인 덩어리(헤더+필터) 아래에 선다.
   ⛔ 그 덩어리 높이는 화면마다 다르므로 ListScreen 이 실측해 --ls-pinned-h 로 내려 준다. */
.list-body.is-page-scroll .list-body__head-clip[data-v-09ffc966] {
  /* 가로로 넘치는 표는 판이 함께 굴린다 — 여기서 자르면 머리줄만 잘려 본문과 어긋난다. */
  overflow: visible;
  position: sticky;
  top: var(--ls-pinned-h, 0px);
  /* 줄(.lvs__item 은 절대배치라 늦게 그려진다)보다는 위, 위에 붙박인 덩어리(z 2)보다는 아래. */
  z-index: 1;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}

/* 셀 공통 — 기본은 줄바꿈(값이 잘려 사라지지 않음). 측정형 가상 스크롤이 행 높이를 잰다. */
/* min-width: 0 — 그리드 아이템 기본값(auto)이면 셀이 트랙보다 못 줄어 내용이 오른쪽으로
   넘쳐 잘린다. 0 으로 둬야 트랙 폭에 맞춰 줄어들고 줄바꿈 / 말줄임이 동작한다. */
/* 작업 열은 아이콘만 담는다 — 글줄과 같은 좌우 여백(16px)을 주면 아이콘 셋을 담으려고
   열이 118px 까지 벌어진다. 아이콘 사이 여백과 같은 잣대로 좁혀, 열 폭이 아이콘 수를 따라가게 한다. */
/**
 * 작업 열 — ⛔ **정렬도 표준이 정한다**(사용자 지시 2026-08-31). 화면이 `align` 을 center 로
 * 적든 right 로 적든 **오른쪽**으로 선다. 실측 2026-08-31: 24곳 center · 4곳 right ·
 * 1곳 무선언으로 갈려, 머리글자와 ⋯ 가 화면마다 다른 자리에 있었다.
 * 안여백은 좌우 같게 두어(8px) 머리 글자의 오른쪽 끝선과 ⋯ 의 오른쪽 끝선이 맞는다.
 */
.list-body__cell.is-actions[data-v-09ffc966] {
  padding-left: var(--space-snug);
  padding-right: var(--space-snug);
  justify-content: flex-end;
  text-align: right;
}
.list-body__cell[data-v-09ffc966] {
  padding: var(--pad-row);
  font-size: var(--size-body);
  color: var(--ink-primary);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── 트리그리드 (#855) — treeColumn 셀 안 들여쓰기 + 토글 ── */
.list-body__tree-cell[data-v-09ffc966] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.list-body__tree-indent[data-v-09ffc966] {
  flex: none;
}
.list-body__tree-toggle[data-v-09ffc966] {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-secondary);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
}
.list-body__tree-toggle[data-v-09ffc966]:hover:not(.is-leaf) {
  background: var(--bg-field);
  color: var(--ink-primary);
}
.list-body__tree-toggle.is-leaf[data-v-09ffc966] {
  cursor: default;
}
.list-body__tree-toggle[data-v-09ffc966]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 1px;
}
.list-body__tree-label[data-v-09ffc966] {
  /* 남는 트랙 폭을 차지 — 내용이 없는 셀(예: 구분선)도 폭이 0으로 접히지 않게. */
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 넘침 처리 — 설정 모달에서 컬럼별 지정.
   ⛔ **ov-wrap 에도 규칙이 있어야 한다**(2026-08-29 실측으로 잡은 결함). 「기본값이라 규칙 없음」으로
      두었더니, 셀 안이 `AppButton`(`white-space: nowrap`)인 열에서 그 nowrap 이 이겨 **글자가 옆 열을
      파고들었다** — 팩터 화면의 「지급조건명」·「의료기관 종별」이 코드 열 위에 겹쳐 찍혔다
      (칸 223px 에 내용 242px, 8개 열). 이름 열을 쓰는 화면 29개가 모두 같은 자리다.
   ⚠️ 말줄임이 아니라 **줄바꿈**이다 — 제목류는 잘라내지 않고 줄을 바꿔 다 보인다(admin-crud.md §1).
   ⚠️ ov-ellipsis·ov-clip 과 똑같이 `:deep(*)` 까지 간다 — 셀에만 걸면 자식이 넘칠 때 발동하지 않는다.
   ⛔ **뱃지·칩은 건드리지 않는다** — `:deep(*)` 를 통째로 열었더니 「역할」 열의 뱃지가
      「묶 음 키」로 세로로 쪼개졌다. 그것들은 제 뜻으로 한 줄인 것이라 아래에서 되돌린다.
   ⚠️ 이 규칙을 뒤집어 「덮을 것만 이름을 적는」 쪽으로 가 봤으나 되돌렸다(2026-08-30 실측) —
      그러면 nowrap 을 적어 둔 시각(`.lsc-when`)이 좁은 칸에서 **옆 열로 24.7px 넘친다**
      (팩터 화면 최종수정 120px). 겹치는 것보다 접히는 것이 낫다. 대신 **접히면 안 되는 조각**만
      아래 목록으로 되돌린다. */
/* ⛔ **셀 안에서 떠 있는 판**(고르기 상자의 목록)에는 닿지 않는다 — 닿으면 그 판의
   `min-width: 100%` 와 목록의 `min-width: max-content` 가 0 으로 덮여 판이 칸만큼 좁아지고,
   `overflow-wrap: anywhere` 까지 물려 글자가 아무 데서나 쪼개진다(「자동차/사고」·「원인불/문」,
   사용자 지적 2026-08-30). 떠 있는 판은 칸 밖에 그려지므로 제 폭을 스스로 정한다. */
.list-body__cell.ov-wrap[data-v-09ffc966],
.list-body__cell.ov-wrap[data-v-09ffc966] *:not(.multi-select-dropdown, .multi-select-dropdown *) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* 뱃지·칩·파비콘 묶음은 **제 뜻으로 한 줄인 것**이다 — 위 규칙이 삼키지 않게 되돌린다.
   ⛔ 이 목록은 「예외」가 아니라 **띄어쓸 자리가 없어 쪼개지면 딴 값이 되는 것들의 목록**이다.
      빠뜨리면 좁은 칸에서 글자 하나씩 세로로 눌린다(사용자 지적 2026-08-30:
      회사 칸의 「+28」이 「+ / 2 / 8」. CompanyFaviconGroup 은 제 쪽에 nowrap 을 적어 두었는데
      여기 `:deep(*)` 가 이겼다).
   ⚠️ 빠진 것을 사람이 눈으로 찾지 않는다 — `npm run lint:audit-live` ③ 이 **뜬 화면에서**
      「띄어쓸 자리가 없는 값이 두 줄 이상으로 쪼개졌는지」를 재서 알려 준다. */
.list-body__cell.ov-wrap[data-v-09ffc966] .app-badge,
.list-body__cell.ov-wrap[data-v-09ffc966] .app-chip,
.list-body__cell.ov-wrap[data-v-09ffc966] .cf-group,
.list-body__cell.ov-wrap[data-v-09ffc966] .cf-group__more,



.list-body__cell.ov-wrap[data-v-09ffc966] .ls-atomic,
.list-body__cell.ov-wrap[data-v-09ffc966] .ls-atomic *,
.list-body__cell.ov-wrap[data-v-09ffc966] .app-btn__label {
  white-space: nowrap;
  overflow-wrap: normal;
}
/* ⛔ **덩어리는 눌리지도 않는다** — 줄바꿈만 막아서는 모자란다.
   셀의 `min-width: 0`(위 `:deep(*)`)은 flex 아이템이 **제 내용보다 작아지는 것**까지 허용한다.
   그래서 칸이 조금만 좁아도 덩어리가 통째로 눌리고, 안의 글자는 제 상자 밖으로 흘러
   옆의 ✕ 밑으로 들어간다 — 아무것도 잘리지 않아 **보고도 원인을 못 찾는다**.
   실사고 2026-09-12: 수동추출 「등록」 칸이 5px 모자라 아이콘 15→12.5 · 번호 53.6→44.7 ·
   ✕ 22→18.7 로 눌렸고, 번호 글자가 7px 흘러 ✕ 와 **4px**(옆 TODO 칩은 15px)이었다.
   ⚠️ 칸이 정말 좁으면 이제 덩어리가 칸을 넘는다 — 그것이 옳다. 넘침은 컬럼이 정하고,
      줄어들면 안 되는 칸은 `minWidth` 로 바닥을 준다(폭을 숨기지 않는다).
   ⛔ **되돌릴 목록은 위 nowrap 목록과 같은 것이라야 한다** — 2026-09-12 에 이 규칙을 만들 때
      `.ls-atomic` 에만 걸어, 같은 목록의 뱃지·칩·파비콘 묶음·단추 글자는 **여전히 눌리고 있었다.**
      실사고 2026-09-13: 부품정보 팩터값의 「고침」 뱃지가 104px 칸에서 25→15.6px 로 눌려
      면이 글자 중간에서 끝났다(글자는 nowrap 이라 면 밖으로 흘렀다 — 오른쪽이 잘려 보인다).
      줄바꿈만 막고 눌림을 안 막으면 **같은 증상이 목록의 나머지 항목에서 그대로 난다.** */
.list-body__cell.ov-wrap[data-v-09ffc966] .app-badge,
.list-body__cell.ov-wrap[data-v-09ffc966] .app-chip,
.list-body__cell.ov-wrap[data-v-09ffc966] .cf-group,
.list-body__cell.ov-wrap[data-v-09ffc966] .cf-group__more,
.list-body__cell.ov-wrap[data-v-09ffc966] .ls-atomic,
.list-body__cell.ov-wrap[data-v-09ffc966] .app-btn__label {
  flex-shrink: 0;
}
/* 형광 처리된 값은 **낱말 안에서만** 안 끊는다 — 한 줄로 통째로 묶으면 안 된다.
   ⛔ 여기 한때 `white-space: nowrap` 이 걸려 있었다. `ON`·`8665`·`하나손해보험` 이 세로로
      눌리는 것을 막으려던 것인데, HighlightText 는 짧은 값만 감싸는 것이 아니라 **제목도
      감싼다**(키워드 형광은 목록 표준이라 제목 칸에도 붙는다). 그래서 긴 제목이 한 줄로 굳어
      칸을 뚫고 나가 옆 열의 종류·쪽·분량 위에 겹쳐 찍혔다(실측 2026-09-03: 부품정보
      약관 목록에서 6칸이 최대 183px 넘침). 셀에 overflow:hidden 이 없으니 잘리지도 않는다.
   ⛔ 그렇다고 `overflow-wrap: normal` 만으로는 안 된다 — **한글은 낱말 안에서도 글자마다
      끊긴다**(overflow-wrap 과 무관한 기본 줄바꿈 규칙). 그것만 걸었더니 수동파싱의
      「하나손해보험」이 다시 세로로 쪼개졌다(lint:audit-live ③ 이 4곳을 잡았다).
   ✅ 답은 `word-break: keep-all` 이다 — 한글 낱말 안에서는 끊지 않고 **띄어쓴 자리에서만**
      줄을 바꾼다. 그래서 붙어 있는 값(회사명·ON·8665)은 한 덩어리로 남고, 띄어쓰기가 있는
      긴 제목은 여러 줄로 접힌다. 부모 셀의 `overflow-wrap: anywhere` 가 이것을 이기므로
      함께 되돌린다. */
.list-body__cell.ov-wrap[data-v-09ffc966] .highlight-text {
  word-break: keep-all;
  overflow-wrap: normal;
}
/* 말줄임 — 한 줄 유지 + 넘치면 … */
.list-body__cell.ov-ellipsis[data-v-09ffc966] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 가림 — 한 줄 유지 + 넘치면 그냥 잘림(… 없음) */
.list-body__cell.ov-clip[data-v-09ffc966] {
  white-space: nowrap;
  overflow: hidden;
}

/* ⛔ **슬롯이 감싼 것까지 함께 줄인다.**
   셀에 건 말줄임은 **자식이 넘칠 때는 발동하지 않는다** — 화면이 `<span>`·`<div>`(특히 flex)로
   한 겹 감싸면 글이 「…」 없이 뚝 끊긴다. 그래서 화면마다 셀 안에 nowrap+말줄임을 **손으로 박았고**,
   그 순간 컬럼 설정(「줄바꿈」)이 통째로 무시됐다 — 2026-08-17 에 12곳을 걷어냈는데
   2026-08-23 팩터값에서 또 났다(사용자 지적). 원인은 화면의 부주의가 아니라 **여기가 안 닿는 것**이라
   여기서 닿게 한다. 슬롯 내용은 부모 화면의 스코프라 `:deep()` 없이는 규칙이 가지 않는다. */
.list-body__cell.ov-ellipsis[data-v-09ffc966] * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-body__cell.ov-clip[data-v-09ffc966] * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.list-body__cell.is-center[data-v-09ffc966] { text-align: center;
}
.list-body__cell.is-right[data-v-09ffc966] { text-align: right;
}

/* 체크 칸 — ⛔ 가운데 정렬이 아니라 **왼쪽 16px** 에 세운다(사용자 지적 2026-08-15).
   표(가운데 12px) · 카드(왼쪽 16px) · 일괄 바(12px)가 저마다 달라, 표↔카드가 바뀌거나
   일괄 바를 켤 때마다 체크박스가 한 줄로 안 섰다. 셋을 같은 선(16px)에 맞춘다.
   (칸 폭 40px = 여백 16 + 체크박스 16 + 뒤 8) */
.list-body__cell--check[data-v-09ffc966] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 var(--space-roomy);
}

/**
 * ⛔ **체크상자는 처음부터 보인다** (사용자 확정 2026-08-31 — 앞 결정을 뒤집은 것이다).
 *
 * 한때 「평상시엔 감추고 마우스를 올린 줄에만」으로 두었다. 그러나 **자리는 어차피 늘 잡고 있고**
 * (감춰도 글자가 밀리지 않게 비워 둔다), 다른 서비스도 처음부터 내놓는다. 감춰 두면
 *  ① 고를 수 있는 목록인지 **눌러 보기 전엔 알 수 없고**
 *  ② 마우스가 없는 자리(키보드·터치)에서는 **고를 방법이 안 보였다**(실사고 2026-08-31).
 * 그래서 그냥 보여 준다 — 자리도 안 늘고 규칙도 하나 준다.
 */

/**
 * ⛔ **손가락에는 16px 네모가 너무 작다** (실측 2026-08-31, Pixel 5: 체크상자 터치 목표가
 *    16×16 이었다). 손가락으로 쓰는 기기에서는 **누르는 자리를 40px 로 넓힌다** — 보이는
 *    네모는 그대로 16px 이고, 그 둘레의 빈 자리까지 눌린다.
 * ⚠️ 화면 폭이 아니라 **가리키는 도구**로 가른다(`pointer: coarse`) — 좁은 창의 마우스는
 *    지금 크기가 맞고, 넓은 태블릿의 손가락은 넓혀야 한다.
 */
@media (pointer: coarse) {
.list-body__cell--check[data-v-09ffc966],
  .list-body__card-check[data-v-09ffc966] {
    min-width: var(--h-control-lg);
    min-height: var(--h-control-lg);
    justify-content: center;
    padding-left: 0;
}
}

/* ⛔ 막대에 가려 **마지막 줄이 안 보이는 일**이 없게 — 고르는 동안만 아래를 비운다.
   (막대 높이 + 바닥 여백 ≒ 56px = --space-wide 32 + --space-band 24) */
.list-body.has-selection .list-body__scroller[data-v-09ffc966] > * {
  padding-bottom: calc(var(--space-wide) + var(--space-band));
}

/* ⛔ **네이티브 체크박스의 기본 여백을 지운다.** `#check` 슬롯으로 raw `<input>` 을 넣는
   화면(후처리 규칙·수동파싱)이 있는데, 브라우저가 그 입력에 3~4px 여백을 붙여 놓아
   같은 16px 선에 세워도 그 화면만 옆으로 밀린다(실측 2026-08-15: 바 269 · 행 272). */
/* ⚠️ `:deep()` 이어야 한다 — 슬롯 내용은 **쓰는 쪽 스코프**로 컴파일돼 이 컴포넌트의
   scoped 속성이 안 붙는다. 그냥 쓰면 규칙이 조용히 안 먹는다(실측: 여백 4px 그대로). */
.list-body__cell--check[data-v-09ffc966] input[type='checkbox'],
.list-body__card-check[data-v-09ffc966] input[type='checkbox'] {
  margin: 0;
}

/* 헤더 셀 — semibold + 옅은 글자색 + 하단 보더로 헤더임을 구분(배경 띠 없음).
   헤더는 본문과 달리 항상 한 줄(줄바꿈 기본값을 덮어씀). */
.list-body__hcell[data-v-09ffc966] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-row);
  /* 좁은 열에서 숨김 버튼을 감추기 위한 기준자 — 아래 @container 참조 */
  container-type: inline-size;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  white-space: nowrap;
}

/* 머리줄의 이름은 **제 칸 안에서만** 산다 — 넘치면 말줄임한다(사용자 지적 2026-09-13).
   ⛔ 말줄임을 셀(.list-body__hcell)에 걸지 않는다 — 셀은 flex 라 그 안의 글자가 익명 아이템이 되어
      `text-overflow` 가 아예 듣지 않고, 걸린다 해도 정렬 아이콘·숨김 단추까지 함께 잘린다.
      **이름만 감싸** 그 자리에 건다.
   왜: 칸 값은 컬럼의 `overflow: 'ellipsis'` 로 잘리는데 **머리줄만 그대로**라, 이름이 트랙보다 길면
      옆 열 이름 위로 겹쳐 둘 다 못 읽었다(DB 탐색기 데이터 탭 — 열 이름이 대상 DB 가 정한
      `LAST_UPDATE_DTIME` 같은 긴 이름이다). */
.list-body__hlabel[data-v-09ffc966] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 작업 열 머리 — 본문 칸과 **같은 안여백**이라야 오른쪽 끝선이 맞는다(머리는 기본 16px).
   ⛔ **왼쪽도 같이 좁힌다.** 이 열은 폭이 표준으로 못 박혀 있어(44px) 왼쪽에 글줄 여백 16px 을
      남겨 두면 이름이 설 자리가 20px 뿐이라 **표준이 정한 이름 「작업」(24px)이 제 칸에서 잘린다**
      — 머리줄 말줄임을 들인 순간(2026-09-13) 모든 목록에서 `작..` 이 되었다(실측: 자산관리·
      사용자·회사 …). 본문 칸과 같은 8px 로 맞추면 28px 이 남아 들어간다. */
.list-body__hcell.is-actions-head[data-v-09ffc966] {
  padding-left: var(--space-snug);
  padding-right: var(--space-snug);
}
.list-body__hcell.is-center[data-v-09ffc966] { justify-content: center;
}
.list-body__hcell.is-right[data-v-09ffc966] { justify-content: flex-end;
}
/* 우측정렬 헤더: 정렬 캐럿을 0.8em 박스의 오른쪽 끝에 붙여, 가운데정렬로 남던
   오른쪽 여백을 없앤다 → 본문 우측정렬 값과 캐럿이 같은 오른쪽 끝선에 정렬. */
.list-body__hcell.is-right[data-v-09ffc966] .sort-ind { align-items: flex-end;
}
.list-body__hcell.is-sortable[data-v-09ffc966] {
  cursor: pointer;
  transition: color var(--motion-fast);
}

/* 정렬 가능 컬럼 — 호버 시 / 정렬 중일 때 라벨이 primary 색으로 (클릭 힌트·정렬 표시) */
.list-body__hcell.is-sortable[data-v-09ffc966]:hover { color: var(--ink-brand);
}
.list-body__hcell.is-sorted[data-v-09ffc966] { color: var(--ink-brand);
}

/* 컬럼 순서변경 드래그 오버 표식 */
.list-body__hcell.is-drag-over[data-v-09ffc966] {
  box-shadow: inset 3px 0 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}

/* 컬럼 경계 | — 헤더 셀 우측 가장자리의 hover 존. 리사이즈 핸들 + 위쪽 + 뱃지를 묶는다. */
.list-body__boundary[data-v-09ffc966] {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  z-index: 4;
}
/* 경계 hover 시 primary 세로선(=|). 순수 장식 — pointer-events:none 으로
   커서가 이 선을 통과해 리사이즈 핸들(col-resize)을 그대로 받게 한다.
   (없으면 정렬 헤더의 cursor:pointer 를 상속해 선 위에서 손 모양이 됨) */
.list-body__boundary[data-v-09ffc966]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 2px;
  background: var(--bg-brand-vivid);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast);
}
.list-body__boundary[data-v-09ffc966]:hover::after {
  opacity: 1;
}
/* 리사이즈 드래그 핸들 — 경계 전체를 덮는 투명 히트영역 */
.list-body__resize[data-v-09ffc966] {
  position: absolute;
  inset: 0;
  cursor: col-resize;
}

/* 컬럼 숨김 버튼 — 정렬 아이콘 다음 자리에 인라인 배치, hover 시에만 표시.
   숨김 상태는 display:none — flex 항목에서 완전히 빠져 자리(폭)도 형제 gap 도 만들지 않는다.
   (width:0 만으론 형제 gap 이 남아 우측정렬 헤더 라벨을 본문 값보다 왼쪽으로 밀어낸다.)
   경계(|) hover 중에는 감춘다 — 숨김 조작과 경계 조작은 상호배타. */
.list-body__col-hide[data-v-09ffc966] {
  /* ⛔ 라벨 바로 뒤(인라인)에 두지 않는다 — 열 이름이 길면 그 버튼이 **셀 한가운데**에 떠서,
     정렬하려고 머리 가운데를 누른 사람이 「열 숨김」을 누르게 된다. 정렬은 아무 일도 안 일어난 것처럼
     보이고(확인 팝오버는 취소되기 일쑤) 사용자는 "정렬이 안 된다"고 느낀다.
     실측 2026-08-29: 「마지막 추출」(207px) 열의 정확한 가운데(x=1147)가 버튼 자리(1143~1161)였다.
     그래서 자리를 셀 오른쪽 끝(경계 | 왼쪽)에 못 박는다 — hover 때 라벨이 밀리는 흔들림도 함께 사라진다. */
  position: absolute;
  right: var(--space-roomy);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-badge);
  background: none;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: color var(--motion-fast);
}
.list-body__hcell:hover .list-body__col-hide[data-v-09ffc966] {
  display: inline-flex;
}
/* ⛔ 좁은 열에서는 숨김 버튼을 아예 그리지 않는다 — 오른쪽 끝에 붙여도 열이 좁으면 그 자리가
   곧 셀 한가운데라, 정렬하려는 클릭을 계속 가로챈다(실측: 「활성」·「접속」 같은 좁은 열).
   그런 열은 톱니(열 설정)에서 숨긴다. */
@container (max-width: 150px) {
.list-body__hcell:hover .list-body__col-hide[data-v-09ffc966] { display: none;
}
}
/* 경계 hover 중엔 숨김 버튼을 감춘다 */
.list-body__hcell:has(.list-body__boundary:hover) .list-body__col-hide[data-v-09ffc966] {
  display: none;
}
.list-body__col-hide[data-v-09ffc966]:hover {
  color: var(--ink-brand);
}

/* 숨긴 컬럼 추가 — 경계 | 위쪽의 + 뱃지. 경계 hover(또는 메뉴 열림) 시에만 노출.
   head-clip overflow 에 잘리지 않게 셀 안쪽(top 양수)에 둔다. */
.list-body__col-add[data-v-09ffc966] {
  position: absolute;
  top: 0;
  /* 16px 뱃지의 중심을 경계선(::after, right:4px)에 맞춤 → right: 4 - 8 */
  right: -4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-float);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.list-body__boundary:hover .list-body__col-add[data-v-09ffc966],
.list-body__col-add.is-open[data-v-09ffc966] {
  opacity: 1;
  pointer-events: auto;
}
.list-body__col-add[data-v-09ffc966]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}

/* 숨긴 컬럼 선택 드롭다운 */
.list-body__add-menu[data-v-09ffc966] {
  position: fixed;
  z-index: 20;
  min-width: 160px;
  max-height: 280px;
  overflow-y: auto;
  margin: var(--gap-glyph) 0 0;
  padding: var(--space-tight);
  list-style: none;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
}
.list-body__add-item[data-v-09ffc966] {
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  font-weight: var(--weight-body);
  color: var(--ink-primary);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-badge);
}
.list-body__add-item[data-v-09ffc966]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}

/* 테이블 행 */
/* 행 래퍼 — 셀 행 + (선택적) 상세 행을 하나의 가상 항목으로 묶음 */
.list-body__rowwrap[data-v-09ffc966] {
  border-bottom: var(--line-strong);
}

/* zebra 줄무늬 — 교대 행에 옅은 배경 (가독성). 선택 행이 우선하도록 위에 둔다. */
.list-body__rowwrap.is-stripe[data-v-09ffc966] { background: var(--bg-subtle);
}

/* 고른 줄 — 틴트 + **좌측 액센트 4px**(열린 줄과 같은 굵기 어휘).
   ⛔ 틴트만으로는 안 보인다: 다크에서 고른 줄(주제색 12%)이 바로 옆 얼룩말 줄무늬(흰색 5%)와
      같은 세기로 읽혀, 어느 줄을 골랐는지 화면에서 분간이 안 됐다(사용자 지적 2026-09-12).
      자산관리는 그래서 제 화면에 3px 막대를 따로 그리고 있었다 — 그것을 표준으로 올린다. */
.list-body__rowwrap.is-selected[data-v-09ffc966] {
  position: relative;
  background: var(--bg-active);
  box-shadow: inset 4px 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}

/* 행 드래그 재정렬 — 끌고 있는 행은 흐리게, 놓일 자리는 선으로(앞/뒤) 또는 테두리로(하위) 표시 */
.list-body__rowwrap.is-dragging[data-v-09ffc966] { opacity: 0.45;
}
.list-body__rowwrap.is-drop-before[data-v-09ffc966],
.list-body__rowwrap.is-drop-after[data-v-09ffc966] {
  position: relative;
  z-index: 1; /* css-ignore: 삽입선을 인접 행 위로 겹치는 로컬 stacking(전역 레이어 아님) */
}
.list-body__rowwrap.is-drop-before[data-v-09ffc966]::before,
.list-body__rowwrap.is-drop-after[data-v-09ffc966]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bg-brand-vivid);
  pointer-events: none;
}
.list-body__rowwrap.is-drop-before[data-v-09ffc966]::before { top: -1px;
}
.list-body__rowwrap.is-drop-after[data-v-09ffc966]::after { bottom: -1px;
}
.list-body__rowwrap.is-drop-inside[data-v-09ffc966] {
  box-shadow: inset 0 0 0 2px var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}

/* 키보드 탐색 활성 행(aria-activedescendant) — 프라이머리 링. 스크롤러 포커스 아웃라인은 숨김. */
.list-body__scroller[data-v-09ffc966]:focus,
.list-body__scroller[data-v-09ffc966]:focus-visible { outline: none;
}
/* 활성 링은 목록이 실제로 키보드 포커스를 가진 동안에만 표시한다.
   ⛔ 한때 주제색 **12%**(`--bg-brand-soft`)로 그려 사실상 보이지 않았다 — 1px 짜리가 옆 줄의
      얼룩말 줄무늬보다 옅어서, 줄을 눌러도 어느 줄에 서 있는지 알 수 없었다
      (사용자 지적 2026-09-12). 링은 «지금 서 있는 줄»을 말하는 유일한 표시다. */
.list-body__scroller:focus-within .list-body__rowwrap.is-active[data-v-09ffc966],
.list-body__scroller:focus-within .list-body__card.is-active[data-v-09ffc966] {
  box-shadow: inset 0 0 0 1px var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
  position: relative;
  z-index: 1; /* css-ignore: 활성 링을 인접 행 위로 겹치는 로컬 stacking(전역 레이어 아님) */
}
/* ⛔ 활성 링이 **열림 표시를 덮지 않는다** — 위 규칙이 더 구체적이라 두 상태가 겹치면 왼쪽
   막대가 통째로 사라졌다(실측 2026-08-22: 첫 행은 늘 키보드 활성이라 그 줄만 표시가 없었다). */
.list-body__scroller:focus-within .list-body__rowwrap.is-active.is-open[data-v-09ffc966],
.list-body__scroller:focus-within .list-body__card.is-active.is-open[data-v-09ffc966],
.list-body__scroller:focus-within .list-body__rowwrap.is-active.is-selected[data-v-09ffc966],
.list-body__scroller:focus-within .list-body__card.is-active.is-selected[data-v-09ffc966] {
  box-shadow: inset 4px 0 0 var(--ink-brand), inset 0 0 0 1px var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
.list-body__row[data-v-09ffc966] {
  display: grid;
  align-items: center;
  min-height: var(--h-row);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.list-body__row[data-v-09ffc966]:hover { background: var(--bg-hover);
}

/* 행 클릭 비활성 — 커서·hover 강조 억제 */
.list-body__row.is-non-interactive[data-v-09ffc966] { cursor: default;
}
.list-body__row.is-non-interactive[data-v-09ffc966]:hover { background: transparent;
}

/* 행 상세 — 셀 행 아래 추가 정보 */
.list-body__row-detail[data-v-09ffc966] {
  padding: var(--space-snug) var(--space-roomy) var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* ⛔ 아무것도 안 그린 상세는 자리를 차지하지 않는다.
   #row-detail 슬롯을 준 화면은 **모든 행**에 이 칸이 렌더된다(슬롯 존재 여부로만 판단).
   화면들은 대개 안에서 `v-if="펼친 행인가"` 로 내용을 가리는데, 그러면 내용은 없고
   padding(위 8 + 아래 12 = 20px)만 남아 행마다 유령 여백이 깔린다.
   증상은 "목록 아래에 이유 없는 공간"으로 나타나 몇 번이나 지적받았다(2026-08-09 실측:
   수집 이력 2/2행, 배치 작업 11/11행이 빈 채로 20px 씩 차지).
   접힌 상태는 주석·빈 텍스트만 남아 :empty 로 잡힌다(실측 확인). */
.list-body__row-detail[data-v-09ffc966]:empty,
.list-body__card-detail[data-v-09ffc966]:empty {
  display: none;
}

/* 카드 안의 행 상세 — 카드가 **가로 flex** 라 그냥 넣으면 본문 옆에 끼어
   본문이 한 글자 폭으로 눌린다. 상세가 있는 카드만 줄바꿈을 켜서 아래로 떨어뜨린다
   (모든 카드에 wrap 을 켜면 기존 화면들의 배치가 바뀐다). */
.list-body__card.has-detail[data-v-09ffc966] {
  flex-wrap: wrap;
}
.list-body__card-detail[data-v-09ffc966] {
  flex: 1 0 100%;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 좁아진 카드 — **고르기 위한 목록**이 된다(cardCompactBelow).
   제목 한 줄만 남기고 나머지는 템플릿에서 접었으므로, 여기서는 한 줄로 눕히고 말줄임만 건다.
   ⚠️ 체크상자는 남긴다 — 좁다고 일괄 고르기가 사라지면 안 된다. */
.list-body__card.is-compact[data-v-09ffc966] {
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-card-dense);
}

/* ⛔ **카드 제목을 무조건 줄이지 않는다**(사용자 지적 2026-08-17 「테이블 속성이 … 줄임이
   아닌데 썡뚱맞게 줄임을 해」). 좁아지면 표가 카드로 바뀌는데, 그때 제목만 몰래 다른 규칙을
   따르면 **컬럼 설정이 통째로 무시된다** — 뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 됐다
   (실측: 「상해및질병통합치료비(연간1천만원한도)(태아보장용)…」 여섯 줄이 같아 보임).
   넘침 처리는 표든 카드든 **그 컬럼이 정한다**(위 `ov-*` 클래스). 기본값 wrap = 접어서 다 보임. */
.list-body__card.is-compact .list-body__card-title[data-v-09ffc966] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}

/* 한 줄 카드의 액션 — **오른쪽 위**에 세운다(사용자 지시 2026-08-17).
   ⚠️ 이름이 길면 이제 접혀서 카드가 높아진다(말줄임을 걷어냈으므로). 그때 액션이 세로
      가운데에 있으면 제목 중간에 떠 있는 꼴이 된다 — 위에 붙여 두면 카드가 몇 줄이 되든
      누르는 자리가 **늘 같은 곳**이다. */
.list-body__card.is-compact .list-body__card-actions[data-v-09ffc966] {
  margin-left: auto;
  align-self: flex-start;
  padding-left: var(--space-tight);
  flex-shrink: 0;
}

/* 팝오버 감싸개는 카드 제목 폭을 그대로 물려준다 — 안 그러면 안쪽 말줄임이 풀린다.
   (표 셀의 같은 규칙과 짝이다. 그 span 은 AppPopover 것이라 :deep 가 필요하다.) */
.list-body__card-title[data-v-09ffc966] >  .app-popover__trigger {
  display: block;
  min-width: 0;
  overflow: hidden;
}
.list-body__card-title.ov-ellipsis[data-v-09ffc966] * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-body__card-title.ov-clip[data-v-09ffc966] * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* 카드 제목의 넘침 처리 — 표 셀과 **같은 규칙**을 쓴다(한 곳에서 정한다). */
.list-body__card-title.ov-ellipsis[data-v-09ffc966] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-body__card-title.ov-clip[data-v-09ffc966] {
  white-space: nowrap;
  overflow: hidden;
}

/* 카드 — 내용에 따른 가변 높이 (측정형 가상 스크롤) */
.list-body__card[data-v-09ffc966] {
  display: flex;
  align-items: flex-start;
  /* ⛔ **접히게 둔다.** 아래 .list-body__card-detail(설명·행 상세)은 `flex: 1 0 100%` 로
        「제 줄을 통째로 쓴다」고 선언돼 있는데, 접히지 않으면 그것이 한 줄에 같이 서서
        본문(.list-body__card-body)을 **폭 0 으로 눌러 버린다**(실측 2026-08-28: 카드 420px 중
        본문 0 · 상세 388 — 제목·메타가 한 글자씩 세로로 흘렀다). 설명 열이나 행 상세를 가진
        목록을 좁은 폭(카드형)으로 보면 그렇게 됐다. */
  flex-wrap: wrap;
  gap: var(--gap-stack);
  padding: var(--pad-panel);
  box-sizing: border-box;
  border-bottom: var(--line-strong);
  cursor: pointer;
  transition: background var(--motion-fast);
}

/* 한 줄 카드 — 체크상자·아바타·글이 한 줄에 서므로 가운데로 맞춘다(cardAlign="center").
   기본(flex-start)은 여러 줄 카드의 제목 줄에 맞추기 위한 것이다. */
.list-body__card.is-align-center[data-v-09ffc966] {
  align-items: center;
}
.list-body__card[data-v-09ffc966]:hover { background: var(--bg-hover);
}
.list-body__card.is-selected[data-v-09ffc966] {
  position: relative;
  background: var(--bg-active);
  box-shadow: inset 4px 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
/* "현재 열림/보는 중" 행 — 포커스 무관 항상 또렷이(좌측 굵은 액센트 + 틴트).
   우측 패널에 지금 열린 내용을 목록에서 잃지 않게.
   ⛔ 오른쪽 › 캐럿을 덧붙이지 않는다 — 좌측 주제색 바가 이미 같은 말을 하고 있어
      한 행에 같은 표시가 둘이 된다(사용자 지시 2026-08-23). */
.list-body__rowwrap.is-open[data-v-09ffc966],
.list-body__card.is-open[data-v-09ffc966] {
  position: relative;
  background: var(--bg-active);
  box-shadow: inset 4px 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
.list-body__card.is-non-interactive[data-v-09ffc966] { cursor: default;
}
.list-body__card.is-non-interactive[data-v-09ffc966]:hover { background: transparent;
}
.list-body__card-check[data-v-09ffc966] {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 카드 트리 영역 — 표의 트리 셀과 같은 부품(들여쓰기 자 + 토글)을 카드 왼쪽에 세운다.
   ⚠️ 위쪽에 붙인다(align-self) — 제목이 여러 줄로 접혀도 누르는 자리가 늘 같은 곳이다. */
.list-body__card-tree[data-v-09ffc966] {
  display: flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
}

/* 카드 미디어 영역 — cardRole: 'media' 컬럼(썸네일 등)이 좌측에 고정 */
.list-body__card-media[data-v-09ffc966] {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

/* 카드 작업 버튼 영역 — cardRole: 'actions' 컬럼이 우측 상단에 고정 */
.list-body__card-actions[data-v-09ffc966] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}

/* 카드 본문 — #card 슬롯(또는 기본 cardRole 렌더)이 들어가는 영역 */
.list-body__card-body[data-v-09ffc966] {
  flex: 1;
  min-width: 0;
}
.list-body__card-main[data-v-09ffc966] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.list-body__card-title[data-v-09ffc966] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  /* 줄바꿈 허용 (이슈 #548 대응) */
  overflow-wrap: anywhere;
}
.list-body__card-subtitle[data-v-09ffc966] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  /* 줄바꿈 허용 (이슈 #548 대응) */
  overflow-wrap: anywhere;
}
.list-body__card-meta[data-v-09ffc966] {
  display: flex;
  flex-wrap: wrap;
  /* 한 줄에 뱃지 항목(패딩 있는 inline-flex, 22.8px)과 순수 텍스트 항목(18px)이 섞이면
     기본 stretch/flex-start 로는 텍스트가 뱃지보다 위로 떠 줄이 들쭉날쭉해진다(#1102).
     첫 줄 베이스라인을 맞춰 뱃지·텍스트·아이콘이 같은 선에 놓이게 한다. */
  align-items: baseline;
  gap: var(--gap-glyph) var(--gap-stack);
  margin-top: auto;
}

/* 메타 항목 — `레이블 : 값` 을 하나의 인라인 흐름으로. flex 로 분리하면 metavalue
   의 overflow:hidden 이 inline-formatting-context 로 blockify 되어 베이스라인이
   어긋나 값이 살짝 위로 떠 보이는 문제가 생긴다. metaitem 자체를 블록 박스로
   두고 안의 label/value 는 평범한 inline 텍스트로 두면 두 텍스트가 같은
   베이스라인에 자연 정렬. ellipsis 는 metaitem 단위에서 잡는다. */
.list-body__card-metaitem[data-v-09ffc966] {
  min-width: 0;
  max-width: 100%;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  /* 줄바꿈 허용 (이슈 #548 대응) */
  overflow-wrap: anywhere;
}

/* 레이블·값 모두 평범한 인라인 — 같은 인라인 흐름이므로 베이스라인 자동 동일. */
.list-body__card-metalabel[data-v-09ffc966],
.list-body__card-metavalue[data-v-09ffc966] {
  display: inline;
}

/* ⛔ **라벨과 값이 갈라져 다른 줄에 놓이면 안 된다** — 「주의 :」만 남고 뱃지가 다음 줄로
   내려가 무엇의 값인지 알 수 없게 된다(사용자 지적 2026-08-15).
   ⛔ 그렇다고 **줄을 통째로 안 끊으면 오른쪽이 잘린다** — 코드가 넷만 돼도 뱃지가 칸 밖으로
      나가 잘렸다(사용자 지적 2026-08-15, 실측 1100px: 「코드 : LA232 LA234 LA340 LA341」이
      27~31px 잘림). 말줄임(…)도 뱃지에는 안 보여 **그냥 사라진 것처럼** 보였다.
   그래서 항목을 flex 한 줄로 둔다 — 라벨과 값은 **같은 줄에서 시작**하고(갈라지지 않는다),
   값이 길면 **값 안에서** 접힌다(잘리지 않는다). 베이스라인은 align-items 로 맞춘다. */
.list-body__card-metaitem[data-v-09ffc966] {
  display: flex;
  align-items: baseline;
  white-space: normal;
}
.list-body__card-metalabel[data-v-09ffc966] {
  flex: 0 0 auto;
  white-space: nowrap;
}
.list-body__card-metavalue[data-v-09ffc966] {
  min-width: 0;
  /* 뱃지 여럿은 값 안에서 접힌다 — 슬롯이 자체 flex 를 쓰면 그쪽 wrap 이 그대로 산다. */
  display: inline;
}

/* 콜론과 값 사이 간격 — Vue 컴파일러가 sibling span 사이 공백을 condense 로
   제거할 수 있어 padding 으로 명시. (이전 flex gap 이 잡아주던 간격 복원) */
.list-body__card-metalabel[data-v-09ffc966] {
  padding-right: 0.35em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
}

/* 값에 들어오는 인라인 미디어(파비콘 등)는 텍스트 비율에 맞춰 캡 + 텍스트 중앙 정렬.
   사용처 scoped CSS 가 specificity 로 이기므로 !important. */
.list-body__card-metavalue[data-v-09ffc966] :is(img, svg) {
  width: 1.2em !important;
  height: 1.2em !important;
  vertical-align: middle;
}

/* 추가 적재 스피너 */
.list-body__more[data-v-09ffc966] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-muted);
  flex-shrink: 0;
}

.usage-help[data-v-67abb0b6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  font-size: var(--size-body);
  line-height: var(--line-normal);
  color: var(--ink-primary);
}
.usage-help__section h3[data-v-67abb0b6] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-lead);
  color: var(--ink-primary);
  border-bottom: var(--line-strong);
  padding-bottom: var(--space-snug);
}
.usage-help__section h4[data-v-67abb0b6] {
  margin: var(--gap-group) 0 var(--gap-inline);
  font-size: var(--size-lead);
  color: var(--ink-primary);
}
.usage-help p[data-v-67abb0b6] {
  margin: 0 0 var(--gap-inline);
  color: var(--ink-secondary);
}
.usage-help code[data-v-67abb0b6] {
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  background: var(--bg-card);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
}
.usage-help a[data-v-67abb0b6] {
  color: var(--ink-brand);
  text-decoration: none;
}
.usage-help a[data-v-67abb0b6]:hover {
  text-decoration: underline;
}
.bullet-list[data-v-67abb0b6] {
  margin: var(--gap-inline) 0;
  padding-left: var(--space-band);
  color: var(--ink-primary);
}
.bullet-list li[data-v-67abb0b6] {
  margin-bottom: var(--gap-glyph);
}

/* ER 다이어그램 — SVG 컨테이너 */
.er-diagram[data-v-67abb0b6] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
  margin: 0 0 var(--gap-stack);
  overflow-x: auto;
}
.er-diagram svg[data-v-67abb0b6] {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}

/* 테이블 상세 — collapsible */
.table-block[data-v-67abb0b6] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  margin-bottom: var(--gap-stack);
  background: var(--bg-card);
  overflow: hidden;
}
.table-block summary[data-v-67abb0b6] {
  padding: var(--space-snug) var(--space-cozy);
  cursor: pointer;
  font-weight: var(--weight-title);
  background: var(--bg-page);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.table-block summary code[data-v-67abb0b6] {
  background: transparent;
  padding: 0;
  font-size: var(--font-rel-code);
  color: var(--ink-brand);
}
.table-block summary[data-v-67abb0b6]::marker {
  color: var(--ink-secondary);
}
.table-block[open] summary[data-v-67abb0b6] {
  border-bottom: var(--line-strong);
}
.schema-table[data-v-67abb0b6] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body);
}
.schema-table th[data-v-67abb0b6],
.schema-table td[data-v-67abb0b6] {
  padding: var(--space-snug) var(--space-cozy);
  text-align: left;
  border-bottom: var(--line-strong);
  vertical-align: top;
}
.schema-table th[data-v-67abb0b6] {
  background: var(--bg-page);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.schema-table tr:last-child td[data-v-67abb0b6] {
  border-bottom: none;
}
.schema-table td[data-v-67abb0b6]:first-child {
  font-family: var(--font-mono);
  white-space: nowrap;
  color: var(--ink-primary);
}
.schema-table td[data-v-67abb0b6]:nth-child(2) {
  color: var(--ink-secondary);
  white-space: nowrap;
}
.tool-list[data-v-67abb0b6] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.tool-list > li[data-v-67abb0b6] {
  padding: var(--space-cozy);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.tool-list > li p[data-v-67abb0b6] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-body);
}

/* 코드 블록 */
.code-block[data-v-67abb0b6] {
  position: relative;
  margin-top: var(--gap-inline);
}
.code-block pre[data-v-67abb0b6] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
  margin: 0;
  overflow-x: auto;
  font-size: var(--size-label);
  line-height: var(--line-comfortable);
  color: var(--ink-primary);
}
.code-block pre code[data-v-67abb0b6] {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.code-block__copy[data-v-67abb0b6] {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
  padding: var(--pad-badge);
  font-size: var(--size-meta);
  cursor: pointer;
  opacity: 0.7;
}
.code-block__copy[data-v-67abb0b6]:hover {
  opacity: 1;
  color: var(--ink-brand);
  border-color: var(--ink-brand);
}
.hint[data-v-67abb0b6] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.rating-stars[data-v-4ffe5364] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.rating-stars__star[data-v-4ffe5364] {
  background: none;
  border: none;
  padding: var(--space-tight);
  cursor: pointer;
  color: var(--ink-muted);
  font-size: var(--size-lead);
  line-height: var(--line-none);
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.rating-stars__star[data-v-4ffe5364]:hover:not(:disabled) {
  transform: scale(1.1);
}
.rating-stars__star--filled[data-v-4ffe5364] {
  color: var(--ink-warning);
}
.rating-stars__star[data-v-4ffe5364]:disabled {
  cursor: default;
}
.rating-stars__clear[data-v-4ffe5364] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-secondary);
  margin-left: var(--gap-glyph);
  font-size: var(--size-body);
  padding: var(--space-tight) var(--space-tight);
}
.rating-stars__clear[data-v-4ffe5364]:hover {
  color: var(--ink-danger);
}
.rating-stars--readonly .rating-stars__star[data-v-4ffe5364] {
  cursor: default;
}

.opinion-card[data-v-b3b2898a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--pad-card);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.opinion-card--reply[data-v-b3b2898a] {
  background: var(--bg-page);
}
.opinion-card__header[data-v-b3b2898a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.opinion-card__author[data-v-b3b2898a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.opinion-card__meta[data-v-b3b2898a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.opinion-card__time[data-v-b3b2898a] {
  white-space: nowrap;
}
.opinion-card__edited[data-v-b3b2898a] {
  font-style: italic;
  font-size: var(--size-meta);
}
.opinion-card__body[data-v-b3b2898a] {
  color: var(--ink-primary);
  line-height: var(--line-normal);
  word-break: break-word;
}
.opinion-card__body[data-v-b3b2898a] p {
  margin: 0 0 0.5em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.opinion-card__body[data-v-b3b2898a] p:last-child {
  margin-bottom: 0;
}
.opinion-card__body[data-v-b3b2898a] ul,
.opinion-card__body[data-v-b3b2898a] ol {
  padding-left: var(--space-band);
  margin: 0.25em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.opinion-card__body[data-v-b3b2898a] blockquote {
  border-left: var(--line-accent) solid var(--line-color);
  padding-left: var(--space-cozy);
  margin: 0.5em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  color: var(--ink-secondary);
}
.opinion-card__body[data-v-b3b2898a] pre {
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-cozy);
  margin: 0.5em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  white-space: pre-wrap;
}
.opinion-card__body[data-v-b3b2898a] code {
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  padding: 0.15em 0.3em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  font-size: var(--font-rel-code);
}
.opinion-card__body[data-v-b3b2898a] a {
  color: var(--ink-brand);
  text-decoration: underline;
}
.opinion-card__body[data-v-b3b2898a] img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-badge);
  margin: 0.4em 0;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.opinion-card__footer[data-v-b3b2898a] {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
}
.opinion-card__action[data-v-b3b2898a] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-secondary);
  font: inherit;
  font-size: var(--size-body);
  padding: var(--space-tight) var(--space-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.opinion-card__action[data-v-b3b2898a]:hover {
  color: var(--ink-brand);
}
.opinion-card__action--danger[data-v-b3b2898a]:hover {
  color: var(--ink-danger);
}

.opinions[data-v-b9155379] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.section-title[data-v-b9155379] {
  font-size: var(--size-lead);
  margin: 0;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.section-title--toggle[data-v-b9155379] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.section-title--toggle[data-v-b9155379]:hover {
  color: var(--ink-brand);
}
.section-title--toggle[data-v-b9155379]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}
.toggle-chevron[data-v-b9155379] {
  font-size: 0.85em; /* css-ignore: decorative em */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  color: var(--ink-secondary);
  width: 1em;
  transition: transform var(--motion-fast) ease;
}
.opinions__avg[data-v-b9155379] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin-left: var(--gap-stack);
  font-size: var(--size-lead);
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.opinions__avg i[data-v-b9155379] {
  color: var(--ink-warning);
}
.opinions__avg-count[data-v-b9155379] {
  font-weight: var(--weight-body);
  color: var(--ink-secondary);
  font-size: var(--font-rel-sm);
}
.opinions__body[data-v-b9155379] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}

/* 작성 폼 */
.opinions__composer[data-v-b9155379] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--pad-card);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-float);
}
.composer__row[data-v-b9155379] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  align-items: center;
}
.composer__rating[data-v-b9155379] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-left: auto;
}
.composer__rating-label[data-v-b9155379] {
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.composer__body[data-v-b9155379] {
  width: 100%;
  resize: vertical;
  padding: var(--space-cozy);
  background: var(--bg-page);
  color: var(--ink-primary);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font: inherit;
  line-height: var(--line-normal);
  box-sizing: border-box;
}
.composer__body[data-v-b9155379]:focus {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: -1px;
}
.composer__actions[data-v-b9155379] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-stack);
}
.composer__hint[data-v-b9155379] {
  margin-right: auto;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}

/* 분류 칩 (작성 + 필터 공통 톤) */
/* 필터 칩 행 — AppChip 들의 가로 나열 (gap·wrap 만 담당) */
.opinions__filter[data-v-b9155379] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}

/* 목록 */
.opinions__list[data-v-b9155379],
.opinions__replies[data-v-b9155379] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.opinions__replies[data-v-b9155379] {
  margin-top: var(--gap-inline);
  margin-left: var(--gap-band);
  border-left: var(--line-w-thick) solid var(--line-color);
  padding-left: var(--space-cozy);
}
.reply-composer[data-v-b9155379] {
  margin-top: var(--gap-inline);
  margin-left: var(--gap-band);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.state-msg[data-v-b9155379] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-secondary);
  background: var(--bg-card);
  border-radius: var(--radius-control);
}

/* 받을 형식 고르기 — 참조 걸기 창(add-ref)과 같은 골격. 고른 것이 체크로 보인다. */
.dl-pick[data-v-985cd422] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.dl-pick__lead[data-v-985cd422] { font-size: var(--size-meta); color: var(--ink-secondary); margin: 0 0 var(--gap-glyph);
}
.dl-pick__item[data-v-985cd422] { text-align: left;
}
.dl-pick__item--on[data-v-985cd422] { background: var(--bg-field);
}
.dl-pick__main[data-v-985cd422] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.dl-pick__name[data-v-985cd422] { font-size: var(--size-label); font-weight: var(--weight-title);
}
.dl-pick__desc[data-v-985cd422] { font-size: var(--size-meta); color: var(--ink-muted);
}
.dl-pick__check[data-v-985cd422] { color: var(--ink-brand); flex: 0 0 auto;
}
.dl-pick__check--off[data-v-985cd422] { visibility: hidden;
}
/* ──────────────────────────────────────────────────────────────────
   레이아웃 — app-shell__content 가 overflow:hidden 이라 자체 스크롤
   영역(.scroll-area)을 둠. CatalogView 와 동일 패턴.
   ────────────────────────────────────────────────────────────────── */
.catalog-detail-page[data-v-985cd422] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
}
.back-bar[data-v-985cd422] {
  flex: 0 0 auto;
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-card);
}
.breadcrumb[data-v-985cd422] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-lead);
  color: var(--ink-secondary);
}
.breadcrumb__link[data-v-985cd422] {
  color: var(--ink-secondary);
  text-decoration: none;
}
.breadcrumb__link[data-v-985cd422]:hover {
  color: var(--ink-brand);
}
.breadcrumb__sep[data-v-985cd422] {
  color: var(--ink-muted);
}
.breadcrumb__current[data-v-985cd422] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.scroll-area[data-v-985cd422] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.content[data-v-985cd422] {
  padding: var(--space-band);
  display: flex;
  flex-direction: column;
  gap: var(--gap-page);
}
.state-msg[data-v-985cd422] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}

/* ──────────────────────────────────────────────────────────────────
   hero: 좌측 thumb 320×320 고정 + 우측 info column 같은 높이.
   grid-template-rows: 320px 으로 row 높이를 고정 → thumb·info 모두 320px.
   info 는 flex column + spacer 로 가격 박스를 하단에 정렬. → thumb 하단 == 가격 박스 하단.
   ────────────────────────────────────────────────────────────────── */
.hero[data-v-985cd422] {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* 행 높이는 thumb 의 240px + info 컨텐츠 중 큰 쪽으로 자연스럽게 결정.
     긴 제목으로 info 가 길어져도 purchase 박스가 잘리지 않게 고정 높이를 두지 않는다. */
  gap: var(--gap-band);
  align-items: stretch;
}
.hero-thumb[data-v-985cd422] {
  position: relative;
  width: 100%;
  /* min-height 로 기준 240px 확보. info 가 더 길면 grid align-items:stretch 로 thumb 도
     같이 늘어나서 두 박스 하단 끝선이 항상 일치한다. height 를 박으면 stretch 가 무력화됨. */
  min-height: 240px;
}
.hero-thumb--clickable[data-v-985cd422] {
  cursor: pointer;
}
.hero-thumb--clickable:hover .book[data-v-985cd422] {
  filter: brightness(1.06);
  transform: translate(-50%, -52%);
}
.hero-thumb--clickable[data-v-985cd422]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 4px;
  border-radius: var(--radius-control);
}
/* 책 메타포 — CatalogView 카드와 동일한 룩.
   세부 규격은 CatalogView.vue 참고. hero 영역에서는 비율을 조금 키워서 (88~92%) 가독성을 올린다. */
.book[data-v-985cd422] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 88%;
  aspect-ratio: 3 / 4;
  --book-thickness: 8px;
  background: var(--bg-field);
  border-radius: var(--radius-badge) var(--radius-badge) var(--radius-badge) var(--radius-badge);
  box-shadow: var(--shadow-float);
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, filter var(--motion-base) ease;
}
.book-single[data-v-985cd422] { height: 92%;
}
.book-cover[data-v-985cd422] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
  background: var(--bg-field);
}
/* 가로 썸네일은 90° 반시계 회전해서 세로 표지 안에 가득 — CatalogView 와 동일 */
.book-cover.is-landscape[data-v-985cd422] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(100% * 4 / 3);
  height: calc(100% * 3 / 4);
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}
/* tokens-ignore-start: 책 메타포 입체감 — 의미색이 아닌 장식 아트 그라데이션/그림자 */
.book-spine[data-v-985cd422] {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 8px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent
  );
  border-radius: var(--radius-badge) 0 0 var(--radius-badge);
  pointer-events: none;
  z-index: 2;
}
.book-pages[data-v-985cd422] {
  position: absolute;
  top: 1.5%;
  bottom: 1.5%;
  right: calc(var(--book-thickness) * -1);
  width: var(--book-thickness);
  background:
    repeating-linear-gradient(
      to right,
      var(--deco-book-page) 0,
      var(--deco-book-page) 1px,
      var(--deco-book-page-line) 1px,
      var(--deco-book-page-line) 2px
    );
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.25),
    inset 1px 0 0 rgba(0, 0, 0, 0.18),
    1px 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
}
/* 책꽂이 — 다중 문서 */
.book-stack[data-v-985cd422] {
  position: relative;
  width: 100%;
  height: 100%;
}
.book-stacked[data-v-985cd422] {
  top: auto;
  bottom: 8%;
  height: 84%;
  transform-origin: 50% 100%;
}
.book-stack[data-v-985cd422]::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.25) 80%,
    transparent 100%
  );
  border-radius: var(--radius-badge);
  pointer-events: none;
}
/* tokens-ignore-end */
.thumb-placeholder[data-v-985cd422] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-cozy);
  color: var(--ink-muted);
  font-weight: var(--weight-title);
}
.hero-info[data-v-985cd422] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-width: 0;          /* 긴 제목 줄바꿈 위해 */
  /* 컨텐츠에 맞춰 자연스럽게 늘어남. align-items:stretch 로 thumb 와 같은 높이까지 늘어나
     spacer 가 동작 → 짧은 컨텐츠에서는 가격 박스가 thumb 하단에 정렬됨. */
}
.hero-spacer[data-v-985cd422] {
  flex: 1 1 auto;        /* purchase 블록을 하단으로 밀어줌 */
  min-height: var(--space-snug);
}

/* 1) 브랜드 */
.brand[data-v-985cd422] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.brand-name[data-v-985cd422] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
/* ProductCard.vue 의 .type-badge 와 동일 스타일 (상품정보 페이지 일관성) */
.brand-type[data-v-985cd422] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-info);
  background: var(--bg-info-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2) 제목 */
.title[data-v-985cd422] {
  margin: 0;
  font-size: var(--size-title-lg);
  line-height: var(--line-comfortable);
  color: var(--ink-primary);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 3) 개정 컨텍스트 — 좌: 판매시기, 우: 개정 뱃지들 (ProductCard 와 동일 스타일) */
.meta-row[data-v-985cd422] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-stack);
  align-items: center;
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.meta-row__sales[data-v-985cd422] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.etc-tag[data-v-985cd422] {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 개정 형제 ID 표시 — 라벨(AppBadge)과 이동 칩(AppChip) 둘 다 tabular-nums 만 보강 */
.revision-sibling-label[data-v-985cd422],
.revision-sibling-link[data-v-985cd422] {
  font-variant-numeric: tabular-nums;
}

/* 4) 통계 strip */
.stats-row[data-v-985cd422] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  color: var(--ink-primary);
  font-size: var(--size-body);
}
.stats-row li[data-v-985cd422] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.stats-row i[data-v-985cd422] {
  color: var(--ink-secondary);
}
/* 가격 박스 + 좋아요/싫어요 한 줄 묶음 (purchase-row).
   좌측: reactions(왼쪽 정렬), 우측: purchase 박스(오른쪽 정렬). hero-info 폭 전체 사용. */
.purchase-row[data-v-985cd422] {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  justify-content: space-between;
}
.purchase-reactions[data-v-985cd422] { margin-right: auto;
}
/* 좋아요/싫어요 — 가격 박스 바깥 왼쪽 */
.purchase-reactions[data-v-985cd422] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.purchase-reactions .reaction-btn[data-v-985cd422] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: var(--size-body);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.purchase-reactions .reaction-btn[data-v-985cd422]:hover:not(:disabled) {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.purchase-reactions .reaction-btn.active[data-v-985cd422] {
  color: var(--ink-brand);
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
  animation: reaction-flash-985cd422 0.45s ease-out;
}
.purchase-reactions .reaction-btn[data-v-985cd422]:disabled { opacity: 0.55; cursor: progress;
}
.purchase-reactions .reaction-btn i[data-v-985cd422] {
  color: inherit;
  transition: transform var(--motion-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.purchase-reactions .reaction-btn[data-v-985cd422]:active:not(:disabled) { transform: scale(0.94);
}
.purchase-reactions .reaction-btn.active i[data-v-985cd422] {
  animation: reaction-pop-985cd422 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reaction-pop-985cd422 {
0%   { transform: scale(0.7) rotate(-12deg);
}
55%  { transform: scale(1.45) rotate(8deg);
}
100% { transform: scale(1) rotate(0);
}
}
@keyframes reaction-flash-985cd422 {
0%   { box-shadow: 0 0 0 0 rgba(var(--ink-brand-rgb), 0.45);
}
  /* role-ignore: 퍼지는 맥박 링 — 반경이 0에서 커지는 애니메이션이라 고정 그림자로 못 바꾼다 */
100% { box-shadow: 0 0 0 10px transparent;
}
}

/* 5) 신뢰 */
.trust-row[data-v-985cd422] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.trust-label[data-v-985cd422] {
  color: var(--ink-secondary);
}
/* 6) 가격 + CTA — 한 줄 유지. 폭이 부족하면 라인 wrap 대신
   미디어 쿼리로 hero 자체를 1열로 떨어뜨린다(아래 반응형).
   align-self: flex-end 는 purchase-row 로 옮겼음 (purchase-row 가 hero-info 의 flex 자식). */
.purchase[data-v-985cd422] {
  max-width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gap-group);
  white-space: nowrap;
}
.purchase-price[data-v-985cd422] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  line-height: var(--line-none);
}
.purchase-price__value[data-v-985cd422] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  color: var(--ink-brand);
}
.purchase-price__value--strike[data-v-985cd422] {
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  opacity: 0.7;
}
.purchase-price__reason[data-v-985cd422] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.purchase-size[data-v-985cd422] {
  margin-left: var(--gap-glyph);
  opacity: 0.8;
  font-size: var(--font-rel-sm);
  font-weight: var(--weight-body);
}
.hint.warn[data-v-985cd422] {
  margin: 0;
  color: var(--ink-warning);
  font-size: var(--size-body);
}

/* ──────────────────────────────────────────────────────────────────
   하단 docs — flex-wrap 카드 그리드. 카드 폭 200px 고정.
   ────────────────────────────────────────────────────────────────── */
.section-title[data-v-985cd422] {
  font-size: var(--size-lead);
  margin: 0 0 var(--gap-group);
  color: var(--ink-primary);
}
.section-title--toggle[data-v-985cd422] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.section-title--toggle[data-v-985cd422]:hover {
  color: var(--ink-brand);
}
.section-title--toggle[data-v-985cd422]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}
.toggle-chevron[data-v-985cd422] {
  font-size: 0.85em; /* css-ignore — em 값 (부모 컨텍스트 의존) */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  color: var(--ink-secondary);
  width: 1em;
  transition: transform var(--motion-fast) ease;
}
/* .catalog-subtable 의 높이는 ListBody 의 max-height prop 으로 제어 (데이터 양에 맞춤) */

/* 구성 문서 — DataTable 셀 스타일.
   미니북 표시를 위해 살짝 키우고 page-edges 가 보이도록 overflow: visible. */
.cell-thumb[data-v-985cd422] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 50px;
  cursor: pointer;
  transition: transform var(--motion-fast) ease;
}
.cell-thumb:hover .book[data-v-985cd422] {
  filter: brightness(1.06);
  transform: translate(-50%, -52%);
}
/* 작은 책 — 미니 사이즈에 맞춘 spine/page-edge */
.book-mini[data-v-985cd422] {
  height: 92%;
  border-radius: var(--radius-badge) var(--radius-badge) var(--radius-badge) var(--radius-badge);
  box-shadow: var(--shadow-md);
}
.book-mini .book-spine[data-v-985cd422] { width: 4px;
}
.book-mini .book-pages[data-v-985cd422] { border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.doc-link[data-v-985cd422],
.doc-type-link[data-v-985cd422] {
  color: var(--ink-primary);
  text-decoration: none;
  cursor: pointer;
}
.doc-link[data-v-985cd422]:hover,
.doc-type-link[data-v-985cd422]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.doc-price-cell[data-v-985cd422] {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-glyph);
  line-height: var(--line-snug);
}
.doc-price-cell .value[data-v-985cd422] {
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.doc-price-cell .reason[data-v-985cd422] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  white-space: nowrap;       /* "(962p + 658p[2단]) × 10원" 같은 산식은 한 줄 유지 */
}
.muted[data-v-985cd422] {
  color: var(--ink-secondary);
}
.reviewer-when[data-v-985cd422] {
  color: var(--ink-secondary);
  font-size: var(--font-rel-sm);
  margin-left: var(--gap-glyph);
}

/* ──────────────────────────────────────────────────────────────────
   다른 개정
   ────────────────────────────────────────────────────────────────── */
.sibling-title[data-v-985cd422] {
  color: var(--ink-primary);
  text-decoration: none;
}
.sibling-title[data-v-985cd422]:hover {
  color: var(--ink-brand);
}
/* 다른 버전 테이블도 docs 와 동일 셀 padding */
.siblings[data-v-985cd422] .data-table td {
  padding: var(--space-snug) var(--space-cozy);
}
.siblings[data-v-985cd422] .data-table th {
  padding: var(--space-snug) var(--space-cozy);
}

/* ──────────────────────────────────────────────────────────────────
   반응형 — purchase 가 한 줄에 들어가지 못할 폭(~470px) 이하가 되면
   hero 를 통째로 1열로 떨어뜨려 thumb 아래에 info 가 오게 한다.
   thumb 320 + gap 24 + content padding 48 + purchase 최소 ~470 = ~860px → 900px 기준.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.content[data-v-985cd422] {
    padding: var(--pad-card);
}
.hero[data-v-985cd422] {
    grid-template-columns: 1fr;
}
.hero-thumb[data-v-985cd422] {
    max-width: 320px;
    /* iOS Safari 호환: min-height 만 두면 자식 .book 의 height 백분율(88%/84%)이
       해석되지 않아 책이 0×0 으로 collapse 되고, 다운로드된 썸네일 이미지가
       자리를 못 잡아 화면에 안 보임. 명시적 height 로 확정. */
    height: 240px;
    margin: 0 auto;
}
  /* 1열 전환 시 info 영역도 thumb 와 시각 축을 맞춰 가운데 정렬 */
.hero-info[data-v-985cd422] {
    align-items: center;
    text-align: center;
}
.brand[data-v-985cd422],
  .meta-row[data-v-985cd422],
  .stats-row[data-v-985cd422] {
    justify-content: center;
}
.title[data-v-985cd422] {
    font-size: var(--size-title);
}
.purchase-row[data-v-985cd422] {
    align-self: center;
    justify-content: center;
}
  /* 컬럼은 우선 자연스럽게 압축. 더 줄일 수 없는 한계(컬럼 합 ~560px) 이하로
     컨테이너가 좁아지면 DataTable 내부 .table-scroll-area 가 가로 스크롤 표시.
     thumb 60 + 종류 100 + 페이지 70 + 항목 70 + 검수자 120 + 가격 140 ≈ 560 */
.docs[data-v-985cd422] .data-table {
    min-width: 560px;
}
}

/* 모바일 폭: 1행=가격, 2행=두 버튼 나란히 — flex-basis 로 가격을 한 줄 차지하게 함 */
@media (max-width: 480px) {
.purchase[data-v-985cd422] {
    width: 100%;
    align-self: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-stack);
}
.purchase-price[data-v-985cd422] {
    flex: 0 0 100%;           /* 1행 단독 — 다음 요소(버튼)가 강제로 2행으로 떨어짐 */
    align-items: center;
    text-align: center;
}
  /* 좁은 폭 — 짧은 라벨로 전환 (보기 / 다운로드 / 이용).
     full 라벨 + 다운로드 용량(1.6MB) 은 숨기고 short 라벨만 노출.
     padding 도 줄여 컴팩트하게. */
.purchase[data-v-985cd422] .app-btn {
    flex: 0 0 auto;
    padding: var(--pad-control);
    min-width: 0;
}
.btn-label-full[data-v-985cd422],
  .purchase-size[data-v-985cd422] {
    display: none;
}
.btn-label-short[data-v-985cd422] {
    display: inline;
}
.purchase-reactions[data-v-985cd422] {
    flex: 0 0 100%;
    justify-content: center;
    margin-right: 0;
}
}

/* 데스크톱 기본: full 라벨만 노출 */
.btn-label-short[data-v-985cd422] {
  display: none;
}

.pkg-detail-page[data-v-9c88e912] { display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.scroll-area[data-v-9c88e912] { flex: 1; overflow-y: auto;
}
.state-msg[data-v-9c88e912] { padding: var(--space-wide); text-align: center; color: var(--ink-muted);
}
.content[data-v-9c88e912] { max-width: 1100px; margin: 0 auto; padding: var(--space-band); display: flex; flex-direction: column; gap: var(--gap-band);
}
.hero[data-v-9c88e912] { display: flex; gap: var(--gap-band); align-items: stretch;
}
.hero-thumb[data-v-9c88e912] { flex: 0 0 200px; min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.hero-thumb--clickable[data-v-9c88e912] { cursor: pointer;
}
.pkg-shelf[data-v-9c88e912] { position: relative; width: 100%; height: 100%;
}
.pkg-book[data-v-9c88e912] {
  position: absolute; left: 50%; bottom: 0;
  width: 120px; height: 160px;
  border-radius: var(--radius-badge);
  overflow: hidden; box-shadow: var(--shadow-md);
  transform-origin: bottom center;
}
.pkg-book__cover[data-v-9c88e912] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: var(--bg-float);
}
.pkg-book__cover.is-landscape[data-v-9c88e912] { transform: rotate(-90deg) scale(1.4);
}
.pkg-book__spine[data-v-9c88e912] { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to right, var(--line-color), transparent);
}
.thumb-placeholder[data-v-9c88e912] { width: 120px; height: 160px; display: flex; align-items: center; justify-content: center; background: var(--bg-float); border-radius: var(--radius-control); color: var(--ink-muted); font-size: var(--size-title-lg);
}
.hero-info[data-v-9c88e912] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.brand[data-v-9c88e912] { display: flex; align-items: center; gap: var(--gap-inline);
}
.member-count[data-v-9c88e912] { color: var(--ink-secondary); font-size: var(--size-label);
}
.title[data-v-9c88e912] { font-size: var(--size-title); font-weight: var(--weight-strong); margin: 0; color: var(--ink-primary); word-break: keep-all; overflow-wrap: anywhere;
}
.description[data-v-9c88e912] { margin: 0; color: var(--ink-secondary); font-size: var(--size-label); line-height: var(--line-normal);
}

/* 통계 strip (제품 상세와 동일) */
.stats-row[data-v-9c88e912] {
  list-style: none; padding: 0; margin: var(--gap-glyph) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--gap-group);
  color: var(--ink-primary); font-size: var(--size-body);
}
.stats-row li[data-v-9c88e912] { display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.stats-row i[data-v-9c88e912] { color: var(--ink-secondary);
}

/* 가격 + CTA 를 thumb 하단에 정렬 (제품 상세와 동일 레이아웃) */
.hero-spacer[data-v-9c88e912] { flex: 1 1 auto; min-height: var(--space-snug);
}
.purchase-row[data-v-9c88e912] {
  align-self: stretch; display: flex; align-items: center;
  gap: var(--gap-stack); flex-wrap: wrap; justify-content: space-between;
}
.purchase-reactions[data-v-9c88e912] { margin-right: auto; display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.purchase-reactions .reaction-btn[data-v-9c88e912] {
  display: inline-flex; align-items: center; gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy); border: 1px solid var(--line-color);
  border-radius: var(--radius-control); background: transparent;
  color: var(--ink-secondary); font: inherit; font-size: var(--size-body);
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.purchase-reactions .reaction-btn[data-v-9c88e912]:hover:not(:disabled) { color: var(--ink-primary); background: var(--bg-hover);
}
.purchase-reactions .reaction-btn.active[data-v-9c88e912] {
  color: var(--ink-brand); border-color: var(--ink-brand); background: var(--bg-brand-soft);
}
.purchase-reactions .reaction-btn[data-v-9c88e912]:disabled { opacity: 0.55; cursor: progress;
}
.purchase-reactions .reaction-btn i[data-v-9c88e912] { color: inherit;
}
.purchase[data-v-9c88e912] {
  max-width: 100%; display: inline-flex; flex-wrap: nowrap;
  align-items: center; gap: var(--gap-group); white-space: nowrap;
}
.purchase-price[data-v-9c88e912] { display: flex; flex-direction: column; gap: var(--gap-glyph); line-height: var(--line-none);
}
.purchase-price__value[data-v-9c88e912] { font-size: var(--size-title-lg); font-weight: var(--weight-strong); color: var(--ink-brand);
}
.purchase-price__value--strike[data-v-9c88e912] {
  text-decoration: line-through; text-decoration-color: currentColor;
  text-decoration-thickness: 2px; opacity: 0.7;
}
.purchase-price__reason[data-v-9c88e912] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.purchase-size[data-v-9c88e912] { margin-left: var(--gap-glyph); opacity: 0.8; font-size: var(--font-rel-sm); font-weight: var(--weight-body);
}
.btn-label-short[data-v-9c88e912] { display: none;
}
.hint.warn[data-v-9c88e912] { margin: 0; color: var(--ink-warning); font-size: var(--size-body);
}
.members[data-v-9c88e912] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.section-title[data-v-9c88e912] { font-size: var(--size-body); font-weight: var(--weight-title); margin: 0; color: var(--ink-primary);
}
.section-title--toggle[data-v-9c88e912] { display: flex; align-items: center; gap: var(--gap-inline); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.section-title--toggle[data-v-9c88e912]:hover { color: var(--ink-brand);
}
.section-title--toggle[data-v-9c88e912]:focus-visible { outline: var(--focus-ring-width) solid var(--ink-brand); outline-offset: 2px; border-radius: var(--radius-badge);
}
.toggle-chevron[data-v-9c88e912] { font-size: var(--font-rel-sm); /* css-ignore — em 값 (부모 컨텍스트 의존) */ color: var(--ink-secondary); width: 1em; transition: transform 0.15s ease;
}
.cell-thumb[data-v-9c88e912] { display: flex; align-items: center; justify-content: center;
}
.mini-cover[data-v-9c88e912] { width: 36px; height: 48px; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-badge); background: var(--bg-card);
}
.mini-cover--empty[data-v-9c88e912] { display: flex; align-items: center; justify-content: center; color: var(--ink-muted);
}
.company-cell[data-v-9c88e912] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}

/* ──────────────────────────────────────────────────────────────────
   반응형 — 제품 상세(CatalogDetailView)와 동일 규칙.
   900px 이하: hero 를 1열로 떨어뜨려 thumb 아래 info 정렬(가로 스크롤 방지).
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.content[data-v-9c88e912] { padding: var(--pad-card);
}
.hero[data-v-9c88e912] { flex-direction: column; align-items: center; text-align: center;
}
  /* 1열 전환 시 thumb 박스를 명시적으로 확정 — PackageCover 가 width/height 100% 라
     박스가 collapse 되면 표지가 안 보임. (제품 상세의 height:240px 처리와 동일 취지) */
.hero-thumb[data-v-9c88e912] { flex: 0 0 auto; width: 200px; max-width: 100%; height: 240px; min-height: 0; margin: 0 auto;
}
  /* info 영역도 thumb 와 시각 축을 맞춰 가운데 정렬 */
.hero-info[data-v-9c88e912] { align-items: center; text-align: center;
}
.brand[data-v-9c88e912],
  .stats-row[data-v-9c88e912] { justify-content: center;
}
.purchase-row[data-v-9c88e912] { align-self: center; justify-content: center;
}
}

/* 모바일 폭: 가격은 1행 단독, 버튼은 다음 행에 나란히 — 가로 스크롤 방지.
   제품 상세와 동일하게 짧은 라벨(메타/다운로드)로 전환하고 ZIP 표기는 숨긴다. */
@media (max-width: 480px) {
.purchase[data-v-9c88e912] {
    width: 100%;
    align-self: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-stack);
}
.purchase-price[data-v-9c88e912] {
    flex: 0 0 100%;           /* 1행 단독 — 다음 요소(버튼)가 강제로 2행으로 떨어짐 */
    align-items: center;
    text-align: center;
}
.purchase[data-v-9c88e912] .app-btn {
    flex: 0 0 auto;
    padding: var(--pad-control);
    min-width: 0;
}
.btn-label-full[data-v-9c88e912],
  .purchase-size[data-v-9c88e912] {
    display: none;
}
.btn-label-short[data-v-9c88e912] {
    display: inline;
}
.purchase-reactions[data-v-9c88e912] {
    flex: 0 0 100%;
    justify-content: center;
    margin-right: 0;
}
}

.vertical-split-container {
  /* 어떤 조합에서도 칸이 밖으로 나가지 못한다 — 최후의 안전망. */
  overflow: hidden;
}
/* 칸은 축소를 거부하지 않는다. flex 기본값(min-width:auto)이 넘침의 근원이다. */
.vertical-split-container > * {
  min-width: 0;
}
/* 분리대 자신은 줄어들면 안 된다 — 손잡이가 사라진다. */
.vertical-split-container > .vertical-split-resizer {
  flex: 0 0 auto;
}

/* ⛔ 드래그 동안 iframe 은 마우스를 받지 않는다.
   iframe(약관 원문 PDF) 위로 커서가 들어가면 그 안이 이벤트를 먹어 바깥 document 가
   mousemove·mouseup 을 못 받는다. 그러면 **손을 뗐는데도 칸이 계속 따라다닌다**
   (사용자 지적 2026-08-08). 몇 겹으로 중첩되든 body 클래스 하나로 한 번에 막는다. */
body.is-splitter-resizing iframe {
  pointer-events: none;
}

/* TodoWorkTypeMeta 의 .vertical-split-resizer 와 동일 스타일 — 일관성 보장 */
.vertical-split-resizer[data-v-1500b908] {
  flex-shrink: 0;
  flex: 0 0 8px;
  width: 8px;
  /* 다크모드에서 PDF 뷰어/페이지 배경과 구분되도록 muted 톤 사용
     - dark: #1a1a1a (페이지 #000 과 PDF 영역 #2a2a2a 사이의 중간톤)
     - light: #eff3fb (밝은 회색) */
  background: var(--bg-field);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-base), opacity var(--motion-base), width var(--motion-base);
  /* 분리대 z-index — tokens.css 의 --z-splitter (sticky+1, fixed 미만) 사용.
     반드시 --z-resize-overlay 보다 높아야 < = > 버튼이 클릭됨 (회귀 사례 주석 참고). */
  z-index: var(--z-splitter);
  overflow: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.vertical-split-resizer.compact[data-v-1500b908] {
  opacity: 1;
  cursor: pointer;
  flex: 0 0 32px;
  width: 32px;
  /* ⛔ 접힌 레일에는 면을 깔지 않는다 — 32px 폭이라 흰 베일이 **띠**로 보인다
     (2026-08-22 실측 rgba(255,255,255,.055) 32x788). 경계는 좌우 테두리가 만든다. */
  background: var(--bg-page);
  border-left: var(--line-strong);
  border-right: var(--line-strong);
}
/* ⛔ **얹힘과 끄는 중을 같게 하지 않는다.**
   둘 다 꽉 찬 브랜드색이던 탓에 마우스만 스쳐도 화면 높이만 한 초록 기둥이 섰다
   (2026-08-22 실측: 다크 대비 1.10 → 7.89:1, 본문 글자만큼 진하다 · 라이트 1.04 → 5.15:1).
   얹힘은 「잡을 수 있다」는 귀띔이니 옅은 브랜드 면으로 하고, 손잡이를 또렷하게 해서
   어디를 잡는지 알린다. 꽉 찬 브랜드색은 **실제로 끄는 동안**만 쓴다. */
/* 얹힘 — **가운데는 진하고 끝으로 갈수록 흐려진다.**
   화면 높이만 한 띠를 고르게 칠하면 그 자체가 기둥이 되어 버린다. 손잡이가 있는 가운데로
   눈을 모으고 위아래는 바탕으로 풀어, '여기를 잡는다'만 말하게 한다. */
.vertical-split-resizer[data-v-1500b908]:hover:not(.compact):not(.vertical-split-resizer--mobile-tabs) {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-brand-soft) 30%,
    var(--bg-brand-mid) 50%,
    var(--bg-brand-soft) 70%,
    transparent 100%
  );
}
.vertical-split-resizer:hover:not(.compact):not(.vertical-split-resizer--mobile-tabs) .vertical-split-resizer-handle[data-v-1500b908] {
  background: var(--bg-brand-vivid);
  opacity: 1;
}
/* 끄는 중 — **얹힘과 같은 모양을 더 진하게.**
   강조 자체는 맞다(직접 잡고 있는 순간이니 확인 신호가 필요하고 손을 떼면 사라진다).
   다만 얹힘이 가운데로 모이는 빛인데 누르는 순간 꽉 찬 사각 기둥이 되면 모양이 튄다 —
   같은 모양을 진하게 해서 이어 준다.
   ⛔ `:not(.compact)` 를 빼면 안 된다. 위 얹힘 규칙(0,3,1)이 더 구체적이라 이 규칙이 지고,
      끄는 내내 마우스가 분리대 위에 있으므로 **강조가 영영 안 나온다**
      (2026-08-22 실측: 끄는 중에도 얹힘 값 그대로였다). */
.vertical-split-resizer.resizing[data-v-1500b908]:not(.compact):not(.vertical-split-resizer--mobile-tabs) {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-brand-mid) 24%,
    var(--bg-brand-vivid) 50%,
    var(--bg-brand-mid) 76%,
    transparent 100%
  );
}
.vertical-split-resizer.compact[data-v-1500b908]:hover {
  background: var(--bg-hover);
  border-left-color: var(--ink-brand);
  border-right-color: var(--ink-brand);
}
.vertical-split-resizer-handle[data-v-1500b908] {
  width: 3px;
  height: 40px;  /* dimensions-ignore: 판을 미는 손잡이 그림의 길이다(폭 3px) — 컨트롤 높이가 아니다 */
  background: var(--ink-secondary);
  border-radius: var(--radius-badge);
  opacity: 0.6;
  transition: opacity var(--motion-base), background-color var(--motion-base);
  pointer-events: none;
}
/* compact 모드 세로 라벨 — 접힌 패널 이름 표시 */
.vertical-split-resizer-label[data-v-1500b908] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.15em;
  z-index: 5;
  margin-top: var(--gap-band); /* 상단의 버튼 영역 피하기 */
}
.vertical-split-resizer:hover .vertical-split-resizer-handle[data-v-1500b908],
.vertical-split-resizer.resizing .vertical-split-resizer-handle[data-v-1500b908] {
  opacity: 1;
}
.vertical-split-resizer-controls[data-v-1500b908] {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  /* 부모(.vertical-split-resizer) 가 이미 z-fixed 라 부모 stacking context 안에서만 정렬 */
  z-index: 1;
  pointer-events: auto;
  overflow: visible;
}
.resizer-toggle-btn[data-v-1500b908] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-float);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--motion-fast);
  font-size: var(--size-meta);
  line-height: var(--line-none);
  box-sizing: border-box;
}
.resizer-toggle-btn[data-v-1500b908]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.resizer-toggle-btn i[data-v-1500b908] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
}
/* 가로 minus 아이콘을 세로 막대(|) 로 표시 — '복원' 버튼용 */
.resizer-icon-vertical[data-v-1500b908] {
  transform: rotate(90deg);
}

/* 모바일 탭 모드 — 분리대 자리 자체가 탭 헤더가 된다.
   부모 컨테이너는 글로벌 styles 의 .vertical-split-container 미디어 쿼리가 column 으로 전환.
   ⛔ 이 자리는 **잡아 끄는 손잡이가 아니라 탭 바**다. 위의 얹힘·끄는 중 강조에서 제외하지 않으면
      탭 뒤로 초록 띠가 깔려(손가락이 스치기만 해도) 탭이 눌린 것처럼 보인다
      (2026-08-23 실측: 참조법령 상세의 목록/정보 탭 뒤 가로 초록 그라데이션). */
.vertical-split-resizer--mobile-tabs[data-v-1500b908] {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  cursor: default;
  background: var(--bg-float);
  border-bottom: var(--line-strong);
  display: block;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}

.meta-style-toggle[data-v-4c04461d] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  cursor: pointer;
}
.meta-style-toggle__input[data-v-4c04461d] { display: none;
}
.meta-style-toggle__track[data-v-4c04461d] {
  position: relative;
  width: 56px; height: 20px;
  border-radius: var(--radius-card);
  background: var(--bg-field);
  transition: background var(--motion-base);
  flex-shrink: 0;
  overflow: hidden;
}
.meta-style-toggle__label[data-v-4c04461d] {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center;
  font-size: var(--size-meta); font-weight: var(--weight-title);
  pointer-events: none;
  transition: opacity var(--motion-base);
}
.meta-style-toggle__label--off[data-v-4c04461d] { left: 22px; color: var(--ink-secondary); opacity: 1;
}
.meta-style-toggle__label--on[data-v-4c04461d]  { left: 5px; color: var(--ink-on-solid); opacity: 0;
}
.meta-style-toggle__thumb[data-v-4c04461d] {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: var(--radius-pill); background: var(--bg-paper);
  box-shadow: var(--shadow-sm);
  transition: left var(--motion-base);
}
.meta-style-toggle__input:checked + .meta-style-toggle__track[data-v-4c04461d] {
  /* ⛔ 이 면 **위에 글자가 얹힌다**(켜짐 라벨 「스타일」). --bg-brand-vivid 는 「글자를 얹지 않는
     채움」이라 다크에서 흰 글자가 2.54:1 로 무너진다 — 한 단 깊은 --bg-brand 를 쓴다(6.84:1).
     이관 전 4개 사본 중 3개가 이미 --bg-brand 였는데 공통 부품만 vivid 로 남아 있었다(2026-09-07). */
  background: var(--bg-brand);
}
.meta-style-toggle__input:checked + .meta-style-toggle__track .meta-style-toggle__thumb[data-v-4c04461d] { left: 38px;
}
.meta-style-toggle__input:checked + .meta-style-toggle__track .meta-style-toggle__label--off[data-v-4c04461d] { opacity: 0;
}
.meta-style-toggle__input:checked + .meta-style-toggle__track .meta-style-toggle__label--on[data-v-4c04461d]  { opacity: 1;
}

.app-textarea[data-v-a92a388b] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-body);
  line-height: var(--line-normal);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.app-textarea--resize-vertical[data-v-a92a388b] {
  resize: vertical;
}
.app-textarea--resize-none[data-v-a92a388b] {
  resize: none;
}
.app-textarea[data-v-a92a388b]::-moz-placeholder {
  color: var(--ink-muted);
}
.app-textarea[data-v-a92a388b]::placeholder {
  color: var(--ink-muted);
}
.app-textarea[data-v-a92a388b]:focus-visible {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.app-textarea[data-v-a92a388b]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-field);
}
.app-textarea[readonly][data-v-a92a388b] {
  background: var(--bg-field);
}
.app-textarea--invalid[data-v-a92a388b] {
  border-color: var(--ink-danger);
}
.app-textarea--invalid[data-v-a92a388b]:focus-visible {
  box-shadow: var(--ring-danger);
}

/* === Sizes === */
/* sm — 높이/rows 는 그대로, padding-x/font-size/radius 만 조정 */
.app-textarea--sm[data-v-a92a388b] {
  padding: var(--space-snug) var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
}

.form-group[data-v-dc431f57] {
  margin-bottom: var(--gap-stack);
}
.form-group label[data-v-dc431f57] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-group--checkbox[data-v-dc431f57] {
  display: flex;
  align-items: center;
  padding-top: var(--space-band);
}
.form-group--checkbox label[data-v-dc431f57] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
}
.form-row[data-v-dc431f57] {
  display: flex;
  gap: var(--gap-group);
}
.form-row .form-group[data-v-dc431f57] {
  flex: 1;
}
.form-error[data-v-dc431f57] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  margin-bottom: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-danger-soft);
  border-radius: var(--radius-control);
}
.form-hint[data-v-dc431f57] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}
.form-hint--error[data-v-dc431f57] {
  color: var(--ink-danger);
}
.doc-type-checkboxes[data-v-dc431f57] {
  display: flex;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  padding: var(--space-snug) 0;
}
.scope-search-wrap[data-v-dc431f57] {
  position: relative;
}
.scope-dropdown[data-v-dc431f57] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--gap-glyph);
}
.scope-dropdown__item[data-v-dc431f57] {
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.scope-dropdown__item[data-v-dc431f57]:hover {
  background: var(--bg-float);
}
.scope-dropdown__id[data-v-dc431f57] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
  min-width: 40px;
}

/* 좁은 화면: 2~3열 form-row 를 세로로 쌓음(형제 모달들과 동일 패턴).
   나란한 입력이 130px 로 눌려 못 쓰게 되는 것을 방지. */
@media (max-width: 768px) {
.form-row[data-v-dc431f57] {
    flex-direction: column;
    gap: 0;
}
.form-group--checkbox[data-v-dc431f57] {
    padding-top: 0;
}
}


/* 트랙·엄지 치수 — 이 컴포넌트 안에서만 사는 지역 변수.
   ⛔ `:root` 에 적지 않는다(scoped 에서는 `:root[data-v-…]` 가 되어 아무 데도 안 걸린다).
   트랙 너비 = 엄지 폭 * 2 + 좌우 여유. 여유 = (트랙 높이 − 엄지) */
.app-toggle[data-v-ca7921c0] {
  --toggle-track-h: calc(var(--space-roomy) + var(--space-tight));
  --toggle-thumb: var(--space-roomy);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  /* 이관 전 6곳이 모두 갖고 있던 것 — flex 줄 안에서 눌려 찌그러지지 않게. */
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.app-toggle--disabled[data-v-ca7921c0] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 네이티브 입력은 숨기되 접근성·포커스는 유지 — AppCheckbox 와 같은 이유
   (absolute 기준이 없으면 포커스 시 scroll-into-view 가 페이지를 통째로 스크롤시킨다). */
.app-toggle__input[data-v-ca7921c0] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.app-toggle__track[data-v-ca7921c0] {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--toggle-thumb) * 2 + (var(--toggle-track-h) - var(--toggle-thumb)));
  height: var(--toggle-track-h);
  border-radius: var(--radius-pill);
  background: var(--ink-muted); /* role-ignore: 꺼진 트랙의 회색 면 — 글자가 얹히지 않는 자리라 잉크 회색을 그대로 쓴다(6개 화면 기존 값 유지) */
  transition: background var(--motion-base);
}
.app-toggle__thumb[data-v-ca7921c0] {
  position: absolute;
  left: calc((var(--toggle-track-h) - var(--toggle-thumb)) / 2);
  bottom: calc((var(--toggle-track-h) - var(--toggle-thumb)) / 2);
  width: var(--toggle-thumb);
  height: var(--toggle-thumb);
  border-radius: var(--radius-pill);
  background: var(--bg-paper);
  transition: transform var(--motion-base);
}
.app-toggle__input:checked + .app-toggle__track[data-v-ca7921c0] {
  background: var(--bg-brand-vivid);
}
.app-toggle__input:checked + .app-toggle__track .app-toggle__thumb[data-v-ca7921c0] {
  transform: translateX(var(--toggle-thumb));
}

/* 일부만 켜짐 — 엄지가 가운데 */
.app-toggle--mixed .app-toggle__track[data-v-ca7921c0] {
  background: var(--ink-warning); /* role-ignore: 일부만 켜짐 표시 — 글자가 얹히지 않는 트랙 면 */
}
.app-toggle--mixed .app-toggle__thumb[data-v-ca7921c0] {
  transform: translateX(calc(var(--toggle-thumb) / 2));
}
.app-toggle__input:focus-visible + .app-toggle__track[data-v-ca7921c0] {
  box-shadow: var(--ring-focus);
}
.app-toggle__label[data-v-ca7921c0] {
  font-size: var(--size-body);
  color: var(--ink-primary);
}

.tag-list-item[data-v-173396fa] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--size-label);
  color: var(--ink-primary);
  cursor: pointer;
}
.tag-list-item[data-v-173396fa]:hover:not(:disabled) {
  background: var(--bg-hover);
}
.tag-list-item--checked[data-v-173396fa],
.tag-list-item--partial[data-v-173396fa] {
  background: var(--bg-field);
}
.tag-list-item__check[data-v-173396fa] {
  flex-shrink: 0;
  width: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tag-list-item__color[data-v-173396fa] {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  border: var(--line-strong);
}
.tag-list-item__name[data-v-173396fa] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-list-item__abbr[data-v-173396fa] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.tag-list-item__count[data-v-173396fa] {
  flex-shrink: 0;
}

.tag-filter-overlay[data-v-d5ea96f6] {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.tag-filter-header[data-v-d5ea96f6] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.tag-filter-title[data-v-d5ea96f6] {
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}
.tag-filter-actions[data-v-d5ea96f6] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tag-filter-action[data-v-d5ea96f6] {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--size-meta);
  color: var(--ink-brand);
  cursor: pointer;
}
.tag-filter-action[data-v-d5ea96f6]:hover {
  text-decoration: underline;
}
.tag-filter-body[data-v-d5ea96f6] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-tight) 0;
}
.tag-filter-empty[data-v-d5ea96f6] {
  padding: var(--space-cozy);
  color: var(--ink-muted);
  font-size: var(--size-label);
  text-align: center;
}

/* 행 레이아웃/색점/이름/약어/카운트는 공통 TagListItem 으로 이전. 체크 아이콘 색만 여기 유지 */
.tag-filter-check[data-v-d5ea96f6] {
  color: var(--ink-muted);
}
.tag-filter-check--on[data-v-d5ea96f6] {
  color: var(--ink-brand);
}

.list-bulk-bar[data-v-2a62112e] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  /* ⛔ 좌우 여백은 **목록 행·카드와 같은 16px** 이어야 한다(사용자 지적 2026-08-15:
     「체크막스의 줄이 맞지 않는다」). 12px 이면 [전체] 체크박스가 아래 행들의 체크박스보다
     3px 왼쪽에 서서 한 줄로 안 읽힌다. 테두리 1px 은 눈에 안 띄는 차이라 그대로 둔다. */
  padding: var(--pad-row);
  background: var(--bg-page);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-control);
}

/* 선택 컨트롤 묶음 */
.list-bulk-bar__select[data-v-2a62112e] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-shrink: 0;
}
.list-bulk-bar__all[data-v-2a62112e],
.list-bulk-bar__allresults[data-v-2a62112e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.list-bulk-bar__count[data-v-2a62112e] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  white-space: nowrap;
}
.list-bulk-bar__allresults[data-v-2a62112e] { color: var(--ink-brand);
}

/* 액션 버튼 — 넓은 화면에선 우측 정렬 */
.list-bulk-bar__actions[data-v-2a62112e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

/* 좁은 화면: 선택 컨트롤 윗줄 / 액션 버튼 아랫줄 */
@media (max-width: 768px) {
.list-bulk-bar[data-v-2a62112e] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.list-bulk-bar__actions[data-v-2a62112e] {
    justify-content: flex-start;
}
}

/* ⚠️ 줄 상자를 키우지 않는 것이 조건 — 본문 줄 간격을 물려받으면 링크가 있는 줄만 높아진다.
   line-height 를 본문보다 낮게 못박고 세로 패딩은 0 으로 둔다. */
.ref-pick[data-v-d0a3c306] {
  display: inline;
  white-space: nowrap;
}
.ref-pick__label[data-v-d0a3c306] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  line-height: 1.45;   /* css-ignore: 본문 줄에 얹히는 인라인 칩 — 토큰 줄높이를 쓰면 줄이 밀린다 */
  text-decoration: none;
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--ink-brand) 40%, transparent);
  cursor: pointer;
}
.ref-pick__label[data-v-d0a3c306]:hover {
  background: color-mix(in srgb, var(--bg-brand-vivid) 12%, transparent);
  border-radius: var(--radius-badge);
}
.ref-pick__label[data-v-d0a3c306]:focus-visible,
.ref-pick__ledger[data-v-d0a3c306]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}

/* 원장으로 가는 단추 — 본문 줄에 얹히는 인라인 칩이라 세로로 자라지 않는다. */
.ref-pick__ledger[data-v-d0a3c306] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin-left: var(--gap-glyph);
  padding: 0 var(--space-tight);
  line-height: 1.45;   /* css-ignore: 본문 줄에 얹히는 인라인 칩 — 토큰 줄높이를 쓰면 줄이 밀린다 */
  color: var(--ink-muted);
  font-size: var(--size-meta);
  text-decoration: none;
  cursor: pointer;
  vertical-align: baseline;
}
.ref-pick__ledger[data-v-d0a3c306]:hover {
  color: var(--ink-brand);
}
.ref-pick__ledger-label[data-v-d0a3c306] {
  font-weight: var(--weight-title);
}

.content-node[data-v-939d2e40] {
  /* 행 오른쪽 끝 「쪽번호 칸」 — 쪽번호와 그 왼쪽 도구(태그·+N·추가) 자리가 **이 두 값에서**
     함께 계산된다. 따로 적으면 어긋나 뱃지가 쪽번호를 덮는다(아래 두 규칙의 주석 참조). */
  --page-col-right: 0.375rem;   /* dimension-ignore: 행 오른쪽 끝 여백 — 사다리 4·8px 사이 자리 */
  --page-col-width: 2.75rem;    /* dimension-ignore: 네 자리 쪽번호(p.1038, 실측 39.4px)가 들어갈 칸 */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  /* 우측에 부산물(태그/페이지) 자리 reserve. R/원복 버튼 제거 만큼 축소(8rem → 5.5rem) */
  padding: var(--space-tight) var(--space-wide) var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  border-left: var(--line-accent) solid transparent;
  position: relative;
}
/* 약관 내용 모드: 우측에 태그/페이지가 없으므로 예약 공간(5.5rem) 제거. */
.content-node--clause[data-v-939d2e40] {
  padding-right: var(--space-cozy);
}

/* 테이블 왼쪽 테두리 클릭 → 전체 셀 선택 */
/* left: -4px 로 border(-3px) 영역을 포함, width: 10px 으로 충분한 클릭 영역 확보 */
.content-node__left-border-btn[data-v-939d2e40] {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: pointer;
  z-index: 10;
}

/* 트리 세로 가이드라인 */
.content-node__guide-line[data-v-939d2e40] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* 마지막 자식: 세로선을 아이콘 높이에서 자름 (└── 형태) */
.content-node__guide-line--clipped[data-v-939d2e40] {
  bottom: auto;
  height: 13px;
}

/* 부모 토글(V)에서 자식으로 내려가는 세로선 */
.content-node__stem[data-v-939d2e40] {
  position: absolute;
  /* ⛔ 이 자리 값은 **CSS 에 둔다.** 템플릿의 `:style` 로 꽂으면 어느 검사도 못 본다
     (lint:role 은 \3c style> 블록만 읽는다 — 실측 2026-09-03). 깊이만 변수로 받는다.
     dimensions-ignore: 트리 들여쓰기에 물린 기하 값(자리)이라 간격 사다리로 접히지 않는다. */
  left: calc(var(--stem-depth, 0) * 1.25rem + 9px);
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* 트리 커넥터: 수평선 (아이콘 높이에 고정) */
.content-node__connector[data-v-939d2e40] {
  position: absolute;
  top: 0;
  height: 13px;
  pointer-events: none;
  z-index: 0;
}
.content-node__connector[data-v-939d2e40]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-color);
  opacity: 0.5;
}
.content-node--clickable[data-v-939d2e40] {
  cursor: pointer;
}

/* 호버: 선택/포커스가 아닌 행에만 적용 */
.content-node--clickable[data-v-939d2e40]:hover:not(.content-node--selected):not(.content-node--focused) {
  background: var(--bg-hover);
  border-left-color: var(--line-color);
}

/* 포커스 (키보드 탐색) */
.content-node--focused[data-v-939d2e40] {
  background: var(--bg-info-soft);
  border-left-color: var(--ink-brand);
}

/* 선택 */
.content-node--selected[data-v-939d2e40] {
  background: var(--bg-brand-soft);
  border-left-color: var(--ink-brand);
}

/* 선택 + 호버: 약간 더 진하게 */
.content-node--selected[data-v-939d2e40]:hover {
  background: var(--bg-active);
}
.content-node--new[data-v-939d2e40] {
  animation: extract-slide-in-939d2e40 0.3s ease-out,extract-pulse-939d2e40 1s ease-in-out;
}
.content-node--heading[data-v-939d2e40] {
  margin-top: var(--gap-glyph);
}

/* 접기/펼치기 버튼 */
/* .content-node__toggle → AppButton icon-only variant="ghost" size="xs" */
.content-node__toggle[data-v-939d2e40] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: var(--gap-glyph);
}
.content-node__toggle-spacer[data-v-939d2e40] {
  flex-shrink: 0;
  width: 18px;
}

/* 선택 모드 체크박스 */
.content-node__checkbox[data-v-939d2e40] {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: var(--size-body);
  margin-top: var(--gap-glyph);
  color: var(--ink-muted);
}
.content-node--selected .content-node__checkbox[data-v-939d2e40] {
  color: var(--ink-brand);
}

/* 타입 아이콘 */
.content-node__type-icon[data-v-939d2e40] {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  margin-top: var(--gap-glyph);
}
.content-node__type-icon--clickable[data-v-939d2e40] {
  cursor: pointer;
}
.content-node__type-icon--clickable[data-v-939d2e40]:hover {
  color: var(--ink-brand);
}

/* outline 번호 */
.content-node__outline[data-v-939d2e40] {
  flex-shrink: 0;
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  font-size: var(--size-meta);
  margin-top: var(--gap-glyph);
}

/* 사용자 수동 추가 표시 — 원래 타입 아이콘 좌측 상단에 사용자 배지를 겹침.
   info색 원형 + 흰 글리프라 어느 타입 아이콘/테마 위에서도 대비됨 (내용 들여쓰기 없음). */
.content-node__manual-overlay[data-v-939d2e40] {
  position: absolute;
  top: -0.55em;
  left: -0.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: var(--radius-pill);
  background: var(--bg-info);
  color: var(--ink-on-solid);
  /* css-ignore: em 상대값 — 이 배지는 얹히는 글자 크기를 따라 커져야 한다(고정 토큰이면 어긋난다) */
  font-size: var(--font-rel-sm);
  line-height: var(--line-none);
  box-shadow: 0 0 0 1.5px var(--bg-page);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
}

/* 텍스트 본문 */
.content-node__text[data-v-939d2e40] {
  flex: 1;
  min-width: 0;
  padding-right: var(--space-snug);       /* 우측 부산물과 최소 간격 (특히 정렬 모드에서) */
  color: var(--ink-primary);
  word-break: break-word;
  white-space: pre-line;
}
.content-node__text--heading[data-v-939d2e40] {
  font-weight: var(--weight-title);
  font-size: var(--size-body);
}

/* 가로 정렬 — flex 영역 안에서 block 으로 펼친 뒤 text-align 적용 */
.content-node__text--align-center[data-v-939d2e40],
.content-node__text--align-right[data-v-939d2e40] {
  display: block;
}
.content-node__text--align-center[data-v-939d2e40] { text-align: center;
}
.content-node__text--align-right[data-v-939d2e40] { text-align: right;
}

/* 읽어 낸 값 배지 — **본문 그 자리**에 선다(덧붙이는 표가 아니다).
   ⛔ 골랐다고 모양이 바뀌지 않는다(사용자 지적 2026-08-22) — 무엇을 골랐는지는 원문 형광과
      추출 탭의 행 막대가 이미 말한다. 같은 것이 자리마다 다른 모양으로 보이면 안 된다.
   글줄 안에 끼므로 줄높이를 밀지 않게 세로 여백을 두지 않는다. */
.content-node__factor[data-v-939d2e40] {
  vertical-align: baseline;
  white-space: nowrap;
}

/* 우측 부속물 wrapper — page 영역 좌측에 absolute 고정 (page 자릿수 변화 영향 차단).
   ⛔ 쪽번호 칸과 이 자리를 **따로 적지 않는다** — 두 값이 어긋나면 뱃지가 쪽번호를 덮는다.
      실사고 2026-09-03: 여기 주석은 "page 영역(2.5rem) + offset(0.25rem)" 이라 적어 놓고
      2.75rem 을 썼는데, 쪽번호 칸의 왼쪽 끝은 0.375rem + 2.5rem = 2.875rem 이라
      도구가 쪽번호 칸 **안쪽 2px 까지** 밀고 들어와 있었다. 세 자리(p.781, 글자 32.1px)
      까지는 칸에 여유가 있어 5.9px 벌어져 보였지만, 네 자리(p.1000, 글자 39.4px)는
      칸을 가득 채워 **글자 사이가 −1.5px — 실제로 겹쳤다**(실측). */
.content-node__right-tools[data-v-939d2e40] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
  position: absolute;
  right: calc(var(--page-col-right) + var(--page-col-width) + var(--gap-inline));
  top: 0.25rem;
  bottom: 0.25rem;
  pointer-events: none;
}
/* 쪽번호를 안 그리는 약관 내용 모드 — 배지를 **띄우지 않고 글 옆에 세운다**.
   ⛔ 절대배치로 두면 쪽번호 자리를 비워 둔 만큼 안쪽에 떠서 어정쩡할 뿐 아니라,
      본문이 그 아래로 지나가 **글자를 가린다**(실측 2026-08-22: '보험/입' 이 덮였다).
      행이 이미 flex 라 자리만 되돌리면 글(flex:1) 옆 제 칸에 선다. 여러 줄 문단에서는 첫 줄에 맞춘다. */
.content-node__right-tools--no-page[data-v-939d2e40] {
  position: static;
  right: auto;
  top: auto;
  bottom: auto;
  flex: none;
  align-items: flex-start;
}
.content-node__right-tools--no-page[data-v-939d2e40] > * {
  align-self: flex-start;
}
.content-node__right-tools[data-v-939d2e40] > * {
  pointer-events: auto;
  align-self: center;          /* 세로 중앙 통일 */
  margin-left: 0;              /* gap 으로 통일 (자식별 margin-left 무효화) */
}
/* 우측 영역 안에서는 태그 폭 cap (long label 도 영역 침범 안 하도록) */
.content-node__right-tools .content-node__tag[data-v-939d2e40] {
  max-width: 4rem;
}
/* 추가 태그 표시 +N */
.content-node__tag-more[data-v-939d2e40] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1rem;
  padding: 0 var(--space-tight);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  background: var(--bg-active);
  color: var(--ink-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.content-node__tag-more[data-v-939d2e40]:hover {
  background: var(--bg-active);
  color: var(--ink-primary);
}

/* 페이지 표시 — row 우측 끝에 absolute 고정. tabular-nums 로 자릿수 차이 영향 최소화.
   칸 폭은 **가장 긴 쪽번호**(네 자리 p.1038 = 39.4px 실측)가 들어갈 만큼이라야 한다 —
   모자라면 오른쪽정렬이라 글자가 칸 왼쪽으로 삐져나와 뱃지 밑으로 들어간다. */
.content-node__page[data-v-939d2e40] {
  position: absolute;
  right: var(--page-col-right);
  top: 50%;
  transform: translateY(-50%);
  width: var(--page-col-width);
  text-align: right;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* 콘텐츠 태그 */
.content-node__tag[data-v-939d2e40] {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  padding: var(--pad-cell);
  margin-left: var(--gap-glyph);
  border-radius: var(--radius-pill);
  background: var(--bg-field);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
  white-space: nowrap;
  max-width: 8rem;
  border: var(--line-soft);
  cursor: pointer;
  transition: filter var(--motion-fast), box-shadow var(--motion-fast);
}

/* 칸 안의 태그 — 행 오른쪽 도구 자리가 아니라 칸 글자 뒤에 바로 붙는다.
   칸은 눌러서 편집·선택하는 자리라 태그가 손잡이처럼 보이면 안 된다(커서를 되돌린다). */
/* 칸에 붙은 태그는 **칸의 오른쪽 위**에 작게 얹는다(사용자 확정 2026-08-23).
   글 뒤에 이어 붙이면 줄이 밀려 표가 흔들리고, 칸이 길면 태그가 어디 있는지 못 찾는다.
   ⛔ 글자는 --font-2xs(11px)가 하한이라 더 줄이지 않는다 — 여백만 좁혀 작게 보이게 한다. */
.content-node__tag--cell[data-v-939d2e40] {
  position: absolute;
  top: var(--space-tight);
  right: var(--space-tight);
  margin-left: 0;
  padding: 0 var(--space-tight);
  max-width: 60%;
  cursor: default;
  opacity: 0.85;
}

/* 태그가 얹힌 칸은 글을 그만큼 내려 겹치지 않게 한다. */
.content-node__table-cell[data-v-939d2e40]:has(.content-node__tag--cell) {
  padding-top: var(--space-band);
}

/* 되돌리기 단추도 오른쪽 위다 — 태그가 있으면 아래로 비켜 준다. */
.content-node__table-cell:has(.content-node__tag--cell) .content-node__cell-rollback-btn[data-v-939d2e40] {
  top: auto;
  bottom: var(--space-tight);
}

/* 고칠 수 있는 자리에서만 손잡이로 보인다. */
.content-node__tag--cell-editable[data-v-939d2e40] {
  cursor: pointer;
}

/* 빈 칸의 태그 달기 — 평소엔 숨고 칸에 손이 갔을 때만 뜬다(표가 아이콘으로 뒤덮이지 않게). */
.content-node__cell-tag-add[data-v-939d2e40] {
  margin-left: var(--gap-glyph);
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--motion-fast);
}
.content-node__table-cell:hover .content-node__cell-tag-add[data-v-939d2e40],
.content-node__cell-tag-add[data-v-939d2e40]:focus-visible {
  opacity: 1;
}
.content-node__tag[data-v-939d2e40]:hover {
  filter: brightness(1.05);
  box-shadow: var(--ring-focus);
}
.content-node__tag-label[data-v-939d2e40] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 6rem;
}
.content-node__tag-remove[data-v-939d2e40] {
  display: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--size-body);
  line-height: var(--line-none);
  padding: 0 var(--space-tight);
  cursor: pointer;
  opacity: 0.7;
}
.content-node__tag-remove[data-v-939d2e40]:hover {
  opacity: 1;
}

/* 태그에 마우스가 올라간 경우에만 X 버튼 노출 (행 전체 hover 아님) */
.content-node__tag:hover .content-node__tag-remove[data-v-939d2e40] {
  display: inline-flex;
}

/* 모바일: 항상 표시 */
@media (hover: none) {
.content-node__tag-remove[data-v-939d2e40] {
    display: inline-flex;
}
}

/* 태그 추가 버튼 */
.content-node__tag-add-btn[data-v-939d2e40] {
  flex-shrink: 0;
  align-self: center;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--gap-glyph);
  padding: 0;
  border-radius: var(--radius-pill);
  border: var(--line-w) dashed var(--line-color);
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: all var(--motion-fast);
}
.content-node__tag-add-btn[data-v-939d2e40]:hover {
  background: var(--bg-page);
  color: var(--ink-primary);
  border-color: var(--ink-secondary);
  border-style: solid;
}
.content-node:hover .content-node__tag-add-btn[data-v-939d2e40],
.content-node--selected .content-node__tag-add-btn[data-v-939d2e40],
.content-node--focused .content-node__tag-add-btn[data-v-939d2e40] {
  display: inline-flex;
}
@media (hover: none) {
.content-node__tag-add-btn[data-v-939d2e40] {
    display: inline-flex;
}
}
.content-node__removed-info[data-v-939d2e40] {
  flex-shrink: 0;
  align-self: center;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  margin-left: var(--gap-inline);
  padding-left: var(--space-snug);
  white-space: nowrap;
  opacity: 0.7;
  border-left: var(--line-strong);
}

/* 테이블 */
.content-node__table-wrap[data-v-939d2e40] {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

/* 테이블 행/열 삽입 인디케이터 */
.table-insert-indicator[data-v-939d2e40] {
  z-index: 5;
  pointer-events: none;
}
.table-insert-indicator--row[data-v-939d2e40] {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  transform: translateY(-50%);
}
.table-insert-indicator--col[data-v-939d2e40] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
}
.table-insert-indicator--row .table-insert-indicator__line[data-v-939d2e40] {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-brand-vivid);
  opacity: 0.5;
}
.table-insert-indicator--col .table-insert-indicator__line[data-v-939d2e40] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-brand-vivid);
  opacity: 0.5;
}
.table-insert-indicator__btn[data-v-939d2e40] {
  pointer-events: auto;
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.table-insert-indicator--row .table-insert-indicator__btn[data-v-939d2e40] {
  top: 50%;
  transform: translate(-50%, -50%);
}
.table-insert-indicator--col .table-insert-indicator__btn[data-v-939d2e40] {
  left: 50%;
  transform: translate(-50%, -50%);
}
.table-insert-indicator__btn[data-v-939d2e40]:hover {
  opacity: 1;
}
.table-insert-indicator--row .table-insert-indicator__btn[data-v-939d2e40]:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.table-insert-indicator--col .table-insert-indicator__btn[data-v-939d2e40]:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.content-node__table[data-v-939d2e40] {
  border-collapse: collapse;
  border: var(--line-strong);
  font-size: var(--size-meta);
  width: 100%;
  table-layout: fixed;
}
.content-node__table-cell[data-v-939d2e40] {
  border: var(--line-strong);
  padding: var(--pad-cell);
  min-height: 2rem;
  color: var(--ink-primary);
  word-break: break-word;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  white-space: pre-line;
  cursor: pointer;
  outline: none;
  position: relative;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.content-node__table-cell[data-v-939d2e40]:hover {
  background: var(--bg-brand-soft);
}
.content-node__table-cell--selected[data-v-939d2e40] {
  background: var(--bg-success-soft);
  outline: var(--focus-ring-width) solid var(--ink-success);
  outline-offset: -2px;
  z-index: 1;
}
.content-node__table-cell--range-selected[data-v-939d2e40] {
  background: var(--bg-brand-soft);
  outline: 1.5px solid var(--ink-info);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
  outline-offset: -1px;
}
.content-node__table-cell--editing[data-v-939d2e40] {
  padding: 0;
  z-index: 1;
  background: var(--bg-page);
  border-color: var(--ink-brand);
}
.content-node__cell-rollback-btn[data-v-939d2e40] {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-brand);
  cursor: pointer;
  font-size: var(--size-meta);
  padding: var(--space-tight) var(--space-tight);
  opacity: 0.35;
  transition: opacity var(--motion-fast);
}
.content-node__cell-rollback-btn[data-v-939d2e40]:hover {
  opacity: 1;
}

/* 중첩 테이블 */
.content-node__nested-label[data-v-939d2e40] {
  display: block;
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.content-node__nested-table[data-v-939d2e40] {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--size-meta);
}
.content-node__nested-cell[data-v-939d2e40] {
  border: var(--line-strong);
  padding: var(--pad-cell);
  word-break: break-word;
  cursor: pointer;
}
.content-node__nested-cell[data-v-939d2e40]:hover {
  background: var(--bg-brand-soft);
}
.content-node__nested-cell--selected[data-v-939d2e40] {
  background: var(--bg-success-soft);
  outline: var(--focus-ring-width) solid var(--ink-success);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* DB-backed 중첩 테이블 (편집 가능) */
.content-node__nested-table--editable[data-v-939d2e40] {
  width: auto;
  margin-top: var(--gap-glyph);
}
.content-node__nested-label--below[data-v-939d2e40] {
  margin-top: var(--gap-glyph);
  margin-bottom: 0;
}
.content-node__cell-edit-below[data-v-939d2e40] {
  display: block;
  margin-top: var(--gap-glyph);
  min-height: 1.25rem;
}
.content-node__nested-add-below[data-v-939d2e40] {
  display: block;
  min-height: 0.5rem;
  cursor: text;
}
.content-node__nested-db-cell[data-v-939d2e40] {
  font-size: var(--size-meta);
}

/* 수식 */
.content-node__formula[data-v-939d2e40] {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  background: var(--bg-page);
  padding: var(--pad-cell);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
}

/* 이미지 플레이스홀더 */
.content-node__image-placeholder[data-v-939d2e40] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-style: italic;
}
.content-node__image-placeholder i[data-v-939d2e40] {
  color: var(--ink-muted);
}

/* 검색 키워드 인라인 하이라이트 */
.content-node__highlight[data-v-939d2e40] {
  background: var(--bg-mark);
  color: inherit;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}

/* 사용자가 고친 행 — 글자를 가리지 않게 작은 아이콘으로 뒤에 붙인다. */
.content-node__edited[data-v-939d2e40] {
  margin-left: var(--gap-glyph);
  color: var(--ink-warning);
  font-size: var(--size-meta);
  vertical-align: baseline;
  cursor: help;
}

/* 참조 링크 (별표·붙임 → 대상 요소). 가독성이 목적이라 밑줄을 남발하지 않고
   옅은 밑줄 + 색으로만 구분한다. (IVE #1040) */
.content-node__ref-link[data-v-939d2e40] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  text-decoration: none;
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--ink-brand) 40%, transparent);
  cursor: pointer;
}
.content-node__ref-link[data-v-939d2e40]:hover {
  background: color-mix(in srgb, var(--bg-brand-vivid) 12%, transparent);
  border-radius: var(--radius-badge);
}
.content-node__ref-link[data-v-939d2e40]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}
/* 스코프 폴백 등 근거가 약한 링크 — 검수 대상임을 옅게 표시 */
.content-node__ref-link--weak[data-v-939d2e40] {
  border-bottom-style: dashed;
}
/* 법령 링크 — 이 문서 밖으로 나간다는 것을 색으로 구분한다(내부 이동과 착각하지 않도록) */
.content-node__ref-link--law[data-v-939d2e40] {
  color: var(--ink-info);
  border-bottom-color: color-mix(in srgb, var(--ink-info) 40%, transparent);
}
.content-node__ref-link--law[data-v-939d2e40]:hover {
  background: color-mix(in srgb, var(--ink-info) 12%, transparent);
}

/* 검색 매칭 노드 배경 */
.content-node--search-match[data-v-939d2e40] {
  background: var(--bg-warning-soft);
}
.content-node--search-match[data-v-939d2e40]:hover {
  background: var(--bg-warning-soft);
  filter: brightness(1.15);
}
.content-node--search-match.content-node--selected[data-v-939d2e40],
.content-node--search-match.content-node--focused[data-v-939d2e40] {
  background: var(--bg-warning-soft);
}

/* 현재 검색 매칭 노드 (이전/다음으로 이동 중인 항목) — 주황색 강조 */
.content-node--search-current[data-v-939d2e40] {
  background: var(--bg-accent-orange-soft);
  border-left-color: var(--ink-accent-orange);
}
.content-node--search-current[data-v-939d2e40]:hover {
  background: var(--bg-accent-orange-soft);
  filter: brightness(1.15);
}
.content-node--search-current.content-node--selected[data-v-939d2e40],
.content-node--search-current.content-node--focused[data-v-939d2e40] {
  background: var(--bg-accent-orange-soft);
  border-left-color: var(--ink-accent-orange);
}

/* 인라인 편집 */
.content-node--editing[data-v-939d2e40] {
  background: var(--bg-info-soft);
  border-left-color: var(--ink-brand);
}
.content-node__text--editing[data-v-939d2e40] {
  outline: none;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  min-height: 1.2em;
  border-bottom: var(--line-w) solid var(--ink-brand);
  white-space: pre-wrap;
  word-break: break-word;
}
.content-node__cell-edit-input[data-v-939d2e40] {
  display: block;
  width: 100%;
  min-height: 2rem;
  box-sizing: border-box;
  padding: var(--space-snug) var(--space-snug);
  border: none;
  background: transparent;
  color: var(--ink-primary);
  font-size: var(--size-meta);
  line-height: var(--line-normal);
  outline: none;
  font-family: inherit;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 잠금 표시 */
.content-node--locked[data-v-939d2e40] {
  opacity: 0.7;
}
.content-node__lock-mark[data-v-939d2e40] {
  flex-shrink: 0;
  color: var(--ink-warning);
  font-size: var(--icon-marker);
  margin-left: var(--gap-glyph);
  cursor: help;
}

/* 원격 사용자 표시 — UserAvatar 래퍼 (여백만) */
.content-node__remote-user[data-v-939d2e40] {
  margin-left: var(--gap-glyph);
  cursor: default;
}

/* 변경 하이라이트 애니메이션 */
.content-node--highlight-add[data-v-939d2e40] {
  animation: highlight-fade-939d2e40 2s ease-out;
  --highlight-color: var(--bg-success-soft);
}
.content-node--highlight-edit[data-v-939d2e40] {
  animation: highlight-fade-939d2e40 2s ease-out;
  --highlight-color: var(--bg-info-soft);
}
.content-node--highlight-delete[data-v-939d2e40] {
  animation: highlight-fade-939d2e40 2s ease-out;
  --highlight-color: var(--bg-danger-soft);
}
.content-node--highlight-move[data-v-939d2e40] {
  animation: highlight-fade-939d2e40 2s ease-out;
  --highlight-color: var(--bg-accent-orange-soft);
}
@keyframes highlight-fade-939d2e40 {
0%   { background-color: var(--highlight-color);
}
70%  { background-color: var(--highlight-color);
}
100% { background-color: transparent;
}
}

/* 애니메이션 */
@keyframes extract-slide-in-939d2e40 {
from { opacity: 0; transform: translateY(8px);
}
to   { opacity: 1; transform: translateY(0);
}
}
@keyframes extract-pulse-939d2e40 {
0%   { background-color: transparent;
}
50%  { background-color: var(--bg-brand-soft);
}
100% { background-color: transparent;
}
}

.split-modal[data-v-9c46c096] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.split-modal__hint[data-v-9c46c096] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-relaxed);
}
.split-modal__hint--preview[data-v-9c46c096] {
  margin-top: var(--gap-stack);
}
.split-modal__editor[data-v-9c46c096] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph) 0;
  padding: var(--space-cozy);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
  line-height: var(--line-relaxed);
}
.split-modal__word[data-v-9c46c096] {
  white-space: pre-wrap;
}

/* 분할 안 된 단어 사이 — 클릭하면 분할점 추가. hover 시 ✂ 노출 */
.split-modal__gap[data-v-9c46c096] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-roomy);
  min-height: var(--space-band);
  cursor: pointer;
  color: transparent;
  border-radius: var(--radius-badge);
}
.split-modal__gap[data-v-9c46c096]::before {
  content: '✂';
  font-size: var(--size-meta);
}
.split-modal__gap[data-v-9c46c096]:hover,
.split-modal__gap[data-v-9c46c096]:focus-visible {
  color: var(--ink-brand);
  background: var(--bg-hover);
  outline: none;
}

/* 분할점 — 줄을 강제로 끊는 점선. 클릭하면 취소 */
.split-modal__cut[data-v-9c46c096] {
  flex-basis: 100%;
  height: 0;
  border-top: var(--line-w-thick) dashed var(--ink-brand);
  margin: var(--gap-inline) 0;
  cursor: pointer;
  position: relative;
}
.split-modal__cut[data-v-9c46c096]::after {
  content: '✂';
  position: absolute;
  right: 0;
  top: calc(-1 * var(--space-cozy));
  font-size: var(--size-meta);
  color: var(--ink-brand);
  background: var(--bg-float);
  padding: 0 var(--space-snug);
}
.split-modal__preview[data-v-9c46c096] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.split-modal__seg[data-v-9c46c096] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.split-modal__seg-no[data-v-9c46c096] {
  flex: none;
  min-width: var(--space-band);
  height: var(--space-band);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
}
.split-modal__seg-text[data-v-9c46c096] {
  flex: 1;
  font-size: var(--size-label);
  line-height: var(--line-normal);
  word-break: break-all;
}
.split-modal__rule[data-v-9c46c096] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.meta-parsing-tab[data-v-16caa04e] {
  display: flex;
  flex-direction: column;
  /* 확인·참조 탭과 동일 사이징 — height:100% 는 탭 바 높이를 못 빼서 하단이 잘린다. */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  gap: var(--gap-inline);
  /* 탭 **단추**가 아니라 탭이 여는 **내용 판**이다 — 이름만 탭에서 왔다. */
  padding: var(--space-cozy);  /* role-ignore: 위와 같음 — 단추 여백(--pad-tab)을 주면 판이 통째로 밀린다 */
  /* ⛔ 기준 글자크기를 **루트에서** 못 박는다. 자식마다 지정하면 빠뜨린 곳이 전역 기본값(16px)을
     물려받아 그 줄만 크게 튄다(2026-08-06 실제 발생). 예외가 필요한 곳만 아래에서 덮어쓴다. */
  font-size: var(--size-meta);
}
.meta-parsing-tab__header[data-v-16caa04e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.meta-parsing-tab__summary[data-v-16caa04e] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.meta-parsing-tab__summary-label[data-v-16caa04e],
.meta-parsing-tab__action-label[data-v-16caa04e] {
  font-size: var(--size-meta);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.meta-parsing-tab__state[data-v-16caa04e] {
  padding: var(--pad-card);
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}
.meta-parsing-tab__state-icon[data-v-16caa04e] {
  display: block;
  margin-bottom: var(--gap-inline);
  color: var(--ink-muted);
}
.meta-parsing-tab__state-hint[data-v-16caa04e] { font-size: var(--size-label); color: var(--ink-secondary);
}
.meta-parsing-tab__list[data-v-16caa04e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.meta-parsing-tab__run[data-v-16caa04e] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-snug);
}
.meta-parsing-tab__run-head[data-v-16caa04e] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
}
.meta-parsing-tab__chevron[data-v-16caa04e] { color: var(--ink-muted);
}
.meta-parsing-tab__when[data-v-16caa04e] { font-size: var(--size-label); color: var(--ink-secondary);
}
.meta-parsing-tab__duration[data-v-16caa04e] { color: var(--ink-primary);
}
.meta-parsing-tab__who[data-v-16caa04e] { font-size: var(--size-meta); color: var(--ink-muted);
}
.meta-parsing-tab__axes[data-v-16caa04e] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-top: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.meta-parsing-tab__axis[data-v-16caa04e] { white-space: nowrap;
}
.meta-parsing-tab__axis strong[data-v-16caa04e] { color: var(--ink-primary);
}
.meta-parsing-tab__axis-split[data-v-16caa04e] { font-size: var(--size-meta); color: var(--ink-muted);
}
.meta-parsing-tab__detail[data-v-16caa04e] {
  margin-top: var(--gap-inline);
  padding-top: var(--space-snug);
  border-top: var(--line-strong);
}
.meta-parsing-tab__bar[data-v-16caa04e] {
  display: flex;
  width: 100%;
  height: var(--space-snug);
  border-radius: var(--radius-badge);
  overflow: hidden;
  margin-bottom: var(--gap-inline);
}
.meta-parsing-tab__bar-seg[data-v-16caa04e] { height: 100%;
}
/* 6색 — 서로 **확실히 다른** 색만. 종전엔 0번(--primary-color #10b981)과 3번(--color-success #22c55e)이
   둘 다 초록이라 얇은 조각에서 같은 색으로 보였다(사용자 지적 2026-08-06). */
.meta-parsing-tab__bar-seg--0[data-v-16caa04e] { background: var(--ink-info);
}
.meta-parsing-tab__bar-seg--1[data-v-16caa04e] { background: var(--ink-warning);
}
.meta-parsing-tab__bar-seg--2[data-v-16caa04e] { background: var(--ink-success);
}
.meta-parsing-tab__bar-seg--3[data-v-16caa04e] { background: var(--ink-danger);
}
.meta-parsing-tab__bar-seg--4[data-v-16caa04e] { background: var(--ink-accent-purple);
}
.meta-parsing-tab__bar-seg--5[data-v-16caa04e] { background: var(--ink-accent-cyan);
}
/* 계측 안 된 나머지 — 색을 주지 않는다(구간이 아니라 '모르는 시간'이므로) */
.meta-parsing-tab__bar-seg--rest[data-v-16caa04e] { background: var(--bg-page);
}
.meta-parsing-tab__stages[data-v-16caa04e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.meta-parsing-tab__stage-group[data-v-16caa04e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.meta-parsing-tab__rules[data-v-16caa04e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding-left: var(--space-roomy);   /* 부모 구간 아래로 들여쓰기 */
}
.meta-parsing-tab__rule[data-v-16caa04e] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem auto;
  align-items: center;
  gap: var(--gap-inline);
}
.meta-parsing-tab__rule-name[data-v-16caa04e] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-parsing-tab__rule-bar[data-v-16caa04e] {
  height: var(--space-tight);
  background: var(--bg-field);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meta-parsing-tab__rule-fill[data-v-16caa04e] {
  display: block;
  height: 100%;
  background: var(--ink-muted);
}
.meta-parsing-tab__rule-ms[data-v-16caa04e] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.meta-parsing-tab__rule-more[data-v-16caa04e] {
  align-self: flex-start;
  font-size: var(--size-meta);
}
.meta-parsing-tab__stage[data-v-16caa04e] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.meta-parsing-tab__stage-dot[data-v-16caa04e] {
  width: var(--space-snug);
  height: var(--space-snug);
  border-radius: var(--radius-pill);
}
.meta-parsing-tab__stage-name[data-v-16caa04e] { color: var(--ink-primary);
}
.meta-parsing-tab__stage-ms[data-v-16caa04e] { font-variant-numeric: tabular-nums;
}
.meta-parsing-tab__rule[data-v-16caa04e] { font-size: var(--size-meta); color: var(--ink-muted);
}
.meta-parsing-tab__env[data-v-16caa04e] {
  font-size: var(--size-meta);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-stack);
  margin-top: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.meta-parsing-tab__message[data-v-16caa04e] {
  margin-top: var(--gap-inline);
  color: var(--ink-danger);
  font-size: var(--size-meta);
}

.mclt[data-v-c100618a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  overflow-y: auto;
}
.mclt__header[data-v-c100618a] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.mclt__header-label[data-v-c100618a] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.mclt__state[data-v-c100618a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-wide) var(--space-cozy);
  color: var(--ink-muted);
}
.mclt__state-icon[data-v-c100618a] {
  font-size: var(--icon-lead);
}
.mclt__list[data-v-c100618a] {
  display: flex;
  flex-direction: column;
}
.mclt__row[data-v-c100618a] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  padding: var(--space-snug) 0;
  border-bottom: var(--line-soft);
  font-size: var(--size-label);
}
.mclt__link[data-v-c100618a] {
  flex: none;
}

/* 법령 줄 — 본문의 법령 링크와 같은 잣대(정보색). 원본: MetaContentNode `.content-node__ref-link--law` */
.mclt__link--law[data-v-c100618a] {
  color: var(--ink-info);
  font-weight: var(--weight-title);
  text-decoration: none;
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--ink-info) 40%, transparent);
  cursor: pointer;
}
.mclt__link--law[data-v-c100618a]:hover {
  background: color-mix(in srgb, var(--ink-info) 12%, transparent);
  border-radius: var(--radius-badge);
}
.mclt__link--law[data-v-c100618a]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-info);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}
.mclt__source[data-v-c100618a] {
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-create-form[data-v-21239cfa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.tag-create-field[data-v-21239cfa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.tag-create-field label[data-v-21239cfa] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.tag-create-field input[type="color"][data-v-21239cfa] {
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-snug);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  outline: none;
}
.tag-create-field small[data-v-21239cfa] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.tag-create-color-row[data-v-21239cfa] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tag-create-color-picker[data-v-21239cfa] {
  width: 2.5rem !important;
  height: 2rem !important;
  padding: var(--space-tight) !important;
  cursor: pointer;
}
.tag-create-color-hex[data-v-21239cfa] {
  flex: 1;
  font-family: var(--font-mono);
}
.tag-create-preview[data-v-21239cfa] {
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  border: var(--line-soft);
}
.tag-create-scope-radio[data-v-21239cfa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.tag-create-scope-radio label[data-v-21239cfa] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tag-create-scope-value[data-v-21239cfa] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-left: var(--gap-glyph);
  font-style: italic;
}
.tag-create-error[data-v-21239cfa] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-danger-soft);
  border: var(--line-w) solid var(--ink-danger);
  border-radius: var(--radius-badge);
  color: var(--ink-danger);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

.tag-picker-overlay[data-v-4200ee36] {
  position: fixed;
  z-index: var(--z-modal-backdrop);
  display: flex;
  flex-direction: column;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.tag-picker-header[data-v-4200ee36] {
  flex-shrink: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.tag-picker-title[data-v-4200ee36] {
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tag-picker-target[data-v-4200ee36] {
  color: var(--ink-muted);
  font-weight: normal;
  font-size: var(--size-meta);
}
.tag-picker-search[data-v-4200ee36] {
  flex-shrink: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.tag-picker-body[data-v-4200ee36] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-tight) 0;
}
.tag-picker-loading[data-v-4200ee36],
.tag-picker-empty[data-v-4200ee36] {
  padding: var(--pad-card);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.tag-picker-section[data-v-4200ee36] {
  margin-bottom: var(--gap-glyph);
}
.tag-picker-section-title[data-v-4200ee36] {
  padding: var(--space-snug) var(--space-cozy) var(--space-tight);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.tag-picker-section-toggle[data-v-4200ee36] {
  padding: var(--space-snug) var(--space-cozy) !important;
  height: auto !important;
  font-size: var(--size-meta) !important;
  font-weight: var(--weight-title);
}

/* 행 레이아웃/색점/이름/약어/카운트는 공통 TagListItem 으로 이전. 체크 아이콘 색만 여기 유지 */
.tag-picker-check--all[data-v-4200ee36] {
  color: var(--ink-info);
}
.tag-picker-check--some[data-v-4200ee36] {
  color: var(--ink-warning-hover);
}
.tag-picker-check--none[data-v-4200ee36] {
  color: var(--ink-muted);
}
.tag-picker-create[data-v-4200ee36] {
  margin-top: var(--gap-glyph) !important;
  border-top: var(--line-w) dashed var(--line-color) !important;
  padding: var(--space-snug) var(--space-cozy) !important;
  height: auto !important;
  color: var(--ink-info) !important;
  font-size: var(--size-label) !important;
  border-radius: 0 !important;
}
.tag-picker-footer[data-v-4200ee36] {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-snug) var(--space-cozy);
  border-top: var(--line-strong);
  background: var(--bg-page);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.tag-picker-dirty-hint[data-v-4200ee36] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.tag-picker-dirty-hint--clean[data-v-4200ee36] {
  color: transparent;
}
.tag-picker-footer-buttons[data-v-4200ee36] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}


.manual-issue-modal__body[data-v-df5363d3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.manual-issue-modal__field[data-v-df5363d3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.manual-issue-modal__label[data-v-df5363d3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.manual-issue-modal__required[data-v-df5363d3] {
  color: var(--ink-danger);
}
.manual-issue-modal__anchor[data-v-df5363d3] {
  max-height: 120px;
  overflow-y: auto;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-float);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.manual-issue-modal__severity[data-v-df5363d3] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
}
.manual-issue-modal__icon--error[data-v-df5363d3] { color: var(--ink-danger);
}
.manual-issue-modal__icon--warning[data-v-df5363d3] { color: var(--ink-warning);
}
.manual-issue-modal__icon--info[data-v-df5363d3] { color: var(--ink-info);
}

.tag-info-form[data-v-634bcbf0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}

/* ⛔ 고를 때마다 높이가 변하지 않게 — 가장 높은 조합만큼 자리를 미리 잡는다.
   흔들리던 갈래 둘: ① 상태를 끄면 「비활성화하면 …」 안내 두 줄이 더 선다
   ② 색상을 규칙에 안 맞게 적으면 오류 줄이 선다. 둘이 겹칠 수 있어 **합친 높이**가 기준이다.
   실측 2026-09-12(창 1700×1000 과 430×900 이 같은 값): 367 → 414(안내) → 419(오류) → **466(둘 다)**.
   ⛔ 읽기 갈래(`canEdit` 아님)에는 걸지 않는다 — 거기엔 토글도 저장도 없어 흔들릴 것이 없는데
      자리를 잡으면 맨 아래가 통째로 빈다.
   ⛔ 여기에 무엇을 더하거나 안내 문구를 늘리면 **다시 재서 이 값을 고친다** — 안 그러면 조용히 또 흔들린다. */
.tag-info-form--edit[data-v-634bcbf0] {
  min-height: 29.125rem;  /* css-ignore: 가장 높은 조합의 실측값(466px) — 사다리로 접히지 않는다 */
}
.tag-info-field[data-v-634bcbf0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.tag-info-field label[data-v-634bcbf0] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.tag-info-field input[type="color"][data-v-634bcbf0] {
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-snug);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  outline: none;
}
.tag-info-field-row[data-v-634bcbf0] {
  display: flex;
  gap: var(--gap-inline);
}
.tag-info-field-row > .tag-info-field[data-v-634bcbf0] {
  flex: 1;
  min-width: 0;
}
.tag-info-field select[data-v-634bcbf0] {
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-snug) var(--space-snug);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  outline: none;
  cursor: pointer;
}
.tag-info-field select[data-v-634bcbf0]:disabled {
  background: var(--bg-page);
  color: var(--ink-secondary);
  cursor: not-allowed;
}
.tag-info-field select[data-v-634bcbf0]:focus:not(:disabled) {
  border-color: var(--ink-info);
}
.tag-info-color-row[data-v-634bcbf0] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.tag-info-color-picker[data-v-634bcbf0] {
  width: 2.5rem !important;
  height: 2rem !important;
  padding: var(--space-tight) !important;
  cursor: pointer;
}
.tag-info-color-hex[data-v-634bcbf0] {
  flex: 1;
  font-family: var(--font-mono);
}
.tag-info-preview[data-v-634bcbf0] {
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  border: var(--line-soft);
}
.tag-info-status-row[data-v-634bcbf0] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.tag-info-status-toggle[data-v-634bcbf0] {
  margin-left: auto;
}
.tag-info-hint[data-v-634bcbf0] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}
.tag-info-error[data-v-634bcbf0] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-danger-soft);
  border: var(--line-w) solid var(--ink-danger);
  border-radius: var(--radius-badge);
  color: var(--ink-danger);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* 화면 안에 끼울 때(inline) — 팝업 본문과 같은 여백을 스스로 갖는다.
   AppModal 이 주던 padding 이 없어 글이 화면 끝에 붙어 버린다(실측 2026-08-06).
   ⛔ 카드 껍데기(테두리+둥근모서리)는 두르지 않는다(사용자 지시 2026-08-15) — 이 자리는 이미
      상세 판 **안**이라 테두리가 한 겹 더 생기고, 그 겹이 위 「나온 문장」 카드(margin 8)와
      왼쪽 끝이 어긋나 보였다. 좌우는 **머리줄 제목과 같은 16px** 한 값으로 세운다.
   ⛔ `background: var(--bg-color)` 는 **없는 토큰**이라 아무 일도 하지 않고 있었다
      (실제 이름은 `--background-color`). 배경은 판이 이미 갖고 있어 여기서 다시 칠하지 않는다. */
.law-detail-inline[data-v-4fc7b9e0] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-cozy) var(--space-roomy) var(--space-snug);
}
.law-detail[data-v-4fc7b9e0] {
  /* ⛔ 여기에 테두리를 두지 않는다. 이 상세는 모달 안에 들어가고, 모달이 이미
     경계(1px + radius 12px)를 준다 — 안쪽에 각진 선을 더 그으면 둥근 모달 안에
     네모가 겹쳐 보인다(2026-08-22, 상품 카드와 같은 증상).
     '판을 비운 뒤 안 갈린다'는 문제는 **테두리 없는 평평한 목록 행**의 이야기였다. */
  display: flex;
  flex-direction: column;
  /* ⛔ 머리(종류·소관·시행일)와 그 아래 작업대를 띄우지 않는다(사용자 지시 2026-08-15).
     12px 이 뜨면 **중앙분리대 위끝이 머리 아래선에서 떨어져** 두 칸이 그 줄에 매달려 있지
     않아 보인다(표기 상세 `.lsd` 와 같은 이유). 여백은 안의 칸이 제 것으로 갖는다. */
  gap: 0;
  min-height: 0;
}

/* 인라인일 때는 **남는 높이를 다 쓴다** — 팝업처럼 높이를 못 박으면 아래가 텅 빈다. */
.law-detail-inline .law-detail[data-v-4fc7b9e0] {
  flex: 1 1 auto;
}
.law-detail-inline .law-detail__body[data-v-4fc7b9e0] {
  height: auto;
  flex: 1 1 auto;
}
.law-detail__state[data-v-4fc7b9e0] {
  padding: var(--space-wide) var(--space-roomy);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}
.law-detail__state--sm[data-v-4fc7b9e0] {
  padding: var(--space-band) var(--space-cozy);
}

/* ── 머리 ── */
.law-detail__head[data-v-4fc7b9e0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding-bottom: var(--space-cozy);
  border-bottom: var(--line-strong);
}
.law-detail__meta[data-v-4fc7b9e0] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-band);
  margin: 0;
}
.law-detail__row[data-v-4fc7b9e0] {
  display: flex;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  min-width: 0;
}
.law-detail__row dt[data-v-4fc7b9e0] {
  color: var(--ink-muted);
}
.law-detail__row dd[data-v-4fc7b9e0] {
  margin: 0;
  color: var(--ink-primary);
  min-width: 0;
}
.law-detail__num[data-v-4fc7b9e0] {
  font-variant-numeric: tabular-nums;
}
.law-detail__aliases[data-v-4fc7b9e0] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph);
}
.law-detail__aliases-label[data-v-4fc7b9e0] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-right: var(--gap-glyph);
}

/* ── 본체: 좌 목록 | 우 내용 ── */
.law-detail__notice[data-v-4fc7b9e0] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  /* 판을 붙여 놓은 만큼(gap 0) 이 알림줄이 제 여백을 갖는다 */
  margin: var(--gap-inline) 0;
  background: color-mix(in srgb, var(--ink-info) 10%, transparent);
  border: var(--line-w) solid color-mix(in srgb, var(--ink-info) 35%, transparent);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.law-detail__notice-icon[data-v-4fc7b9e0] { color: var(--ink-info);
}
.law-detail__notice-text[data-v-4fc7b9e0] { flex: 1; min-width: 0;
}
.law-detail__notice-hint[data-v-4fc7b9e0] { color: var(--ink-secondary); font-size: var(--size-label);
}

/* ⚠️ 칸 사이 간격을 두지 않는다 — 8px 분리대가 두 칸을 맞물리게 붙여 놓는다
   (표기 상세 `.lsd__split`·질병재해와 같은 값). 글이 분리대에 붙지 않게 안쪽 여백만 칸이 갖는다. */
.law-detail__body[data-v-4fc7b9e0] {
  display: flex;
  gap: 0;
  min-height: 0;
  height: clamp(20rem, 58vh, 34rem);
}
.law-detail__pane[data-v-4fc7b9e0] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.law-detail__pane--list[data-v-4fc7b9e0] {
  /* 우측 폭을 분리대가 정하고, 목록은 남는 공간을 가진다 */
  flex: 1 1 0;
  /* 최소폭·넘침은 분리대 부품이 전역으로 보장한다(VerticalSplitter 규약). */
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-snug) 0 0;
}
.law-detail__pane--content[data-v-4fc7b9e0] {
  flex: 0 0 auto;
  gap: var(--gap-inline);
  /* 칸보다 커지지 않는다 — 저장된 폭이 칸보다 커도 삐져나가지 않게. */
  max-width: 100%;
  padding: var(--space-snug) 0 0 var(--space-snug);
}
.law-detail__body.vertical-split-container[data-v-4fc7b9e0] {
  position: relative;
}

/* ── 조각 목록 ── */
.piece-list[data-v-4fc7b9e0] {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
}

/* 행 본문이 곧 버튼 — 참조 탭(.meta-links-tab__row-main)과 같은 방식으로
   AppButton 의 고정 높이·가운데 정렬을 푼다(제목이 두 줄이 되면 넘치기 때문). */
.piece[data-v-4fc7b9e0] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--space-snug) !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  border: var(--line-w) solid transparent !important;
  border-radius: var(--radius-control);
  /* ⚠️ AppButton 의 글자 크기를 이길 만큼 명시적으로 준다. 예전에 `font: inherit !important` 로 풀었더니
     그 축약이 뒤에 온 font-size 를 눌러 좌측 목록만 14px 로 커졌다(우측 본문 12px 과 어긋남). */
  font-size: var(--size-meta) !important;
  font-weight: var(--weight-body) !important;
  line-height: var(--line-comfortable) !important;
  color: var(--ink-secondary);
}
.piece[data-v-4fc7b9e0] .app-btn__label {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  width: 100%;
  min-width: 0;
  white-space: normal;
}
.piece--on[data-v-4fc7b9e0] {
  background: var(--bg-brand-soft) !important;
  border-color: color-mix(in srgb, var(--ink-brand) 40%, transparent) !important;
  color: var(--ink-primary);
}
.piece__no[data-v-4fc7b9e0] {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-title);
  color: var(--ink-brand);
}
.piece__title[data-v-4fc7b9e0] {
  flex: 1 1 auto;
  min-width: 0;
}
/* 쪽수는 오른쪽 끝에 — 제목 길이와 무관하게 세로로 맞는다 */
.piece__pages[data-v-4fc7b9e0] {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── 내용 ── */
/* ⛔ **선은 줄이 긋는다**(사용자 지적 2026-09-13) — 탭 바가 제 밑줄을 그으면 줄의 오른쪽 끝
   56px 에만 선이 남아 허공에 뜬 토막처럼 보였다(실측: 선 1249~1305px, 줄은 673px 부터).
   부모가 그으면 TabNav 가 그것을 보고 제 밑줄을 스스로 접는다(TabNav 의 isFlush). */
.content-head[data-v-4fc7b9e0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  min-height: var(--h-control-md);
  border-bottom: var(--line-strong);
}
.content-title[data-v-4fc7b9e0] {
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  min-width: 0;
}
.content-para[data-v-4fc7b9e0] {
  /* 제목 바로 옆에 붙는다 — space-between 가운데로 밀리지 않게 남는 자리를 여기서 먹는다 */
  flex: 0 0 auto;
  margin-right: auto;
}
.content-actions[data-v-4fc7b9e0] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 0 0 auto;
}

/* 메타 편집기 내용 탭이 들어가는 자리 — 자체 스크롤을 가지므로 높이만 내어 준다 */
/* ⚠️ 메타 편집기는 요소 오른쪽에 편집 액션 자리를 88px 비워 둔다(.content-node padding-right).
   읽기 전용인 여기서는 그 자리가 쓰이지 않아 본문이 왼쪽으로 쏠려 보인다 —
   우리 화면에서만 걷어낸다(메타 편집기 소스는 건드리지 않는다). */
.content-meta[data-v-4fc7b9e0] .content-node {
  padding-right: var(--space-snug);
}
.content-meta[data-v-4fc7b9e0] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.content-pdf-wrap[data-v-4fc7b9e0] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.content-pdf[data-v-4fc7b9e0] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
}

/* 좁은 화면 — 위아래로 쌓는다 */
@media (max-width: 768px) {
.law-detail__body[data-v-4fc7b9e0] {
    flex-direction: column;
    height: auto;
}
.law-detail__pane--list[data-v-4fc7b9e0] {
    flex: 0 0 auto;
    width: 100%;
    border-bottom: var(--line-strong);
    padding-bottom: var(--space-snug);
}
.piece-list[data-v-4fc7b9e0] {
    max-height: 14rem;
}
.law-detail__pane--content[data-v-4fc7b9e0] {
    width: 100% !important;
}
.content-meta[data-v-4fc7b9e0],
  .content-pdf-wrap[data-v-4fc7b9e0] {
    min-height: 18rem;
}
}

.meta-links-tab[data-v-25b703de] {
  display: flex;
  flex-direction: column;
  /* 확인 탭과 동일 사이징 — height:100% 는 탭 바 높이를 못 빼서 하단이 잘린다. */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.meta-links-tab__header[data-v-25b703de] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.meta-links-tab__summary[data-v-25b703de] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
}
.meta-links-tab__summary-label[data-v-25b703de] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-right: var(--gap-inline);
}
.meta-links-tab__filters[data-v-25b703de] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.meta-links-tab__filter-item[data-v-25b703de] { min-width: 0;
}
.meta-links-tab__search[data-v-25b703de] { flex: 1 1 200px; min-width: 0;
}
.meta-links-tab__body[data-v-25b703de] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.meta-links-tab__state[data-v-25b703de] {
  padding: var(--space-wide) var(--space-roomy);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}
.meta-links-tab__row[data-v-25b703de] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--pad-row-dense);
  border-bottom: var(--line-strong);
}
.meta-links-tab__row[data-v-25b703de]:hover {
  background: var(--bg-hover);
}
.meta-links-tab__row--error[data-v-25b703de] {
  background: color-mix(in srgb, var(--ink-danger) 5%, transparent);
}

/* 확인 탭과 동일 — 행 본문은 ghost AppButton (자체 role="button" 금지).
   AppButton 은 높이가 --control-height-md 로 고정이라 2줄 내용이 밖으로 넘친다.
   확인 탭(.meta-issues-tab__item-main)과 같은 방식으로 기본값을 푼다. */
.meta-links-tab__row-main[data-v-25b703de] {
  flex: 1 !important;
  min-width: min(100%, 8rem) !important;
  padding: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  font: inherit !important;
  text-align: left !important;
  width: auto !important;
  white-space: normal !important;
}
.meta-links-tab__row-main[data-v-25b703de] .app-btn__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-glyph);
  min-width: 0;
  width: 100%;
  white-space: normal;
}
.meta-links-tab__row--selected[data-v-25b703de] { background: var(--bg-brand-soft);
}
.meta-links-tab__context[data-v-25b703de],
.meta-links-tab__target[data-v-25b703de] {
  margin: 0;
  font-size: var(--size-meta);
  line-height: var(--line-comfortable);
  word-break: break-all;
}
.meta-links-tab__ctx-dim[data-v-25b703de] {
  color: var(--ink-muted);
}
.meta-links-tab__ctx-mark[data-v-25b703de] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.meta-links-tab__target[data-v-25b703de] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  width: 100%;
}
.meta-links-tab__target-icon[data-v-25b703de] {
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  transform: rotate(-90deg);
}
.meta-links-tab__target-text[data-v-25b703de] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-links-tab__target-none[data-v-25b703de] {
  color: var(--ink-danger);
}
.meta-links-tab__target-law--link[data-v-25b703de] {
  color: var(--ink-info);
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--ink-info) 40%, transparent);
  cursor: pointer;
}
.meta-links-tab__target-law--link[data-v-25b703de]:hover {
  background: color-mix(in srgb, var(--ink-info) 12%, transparent);
  border-radius: var(--radius-badge);
}
.meta-links-tab__target-law[data-v-25b703de] {
  color: var(--ink-info);
}
/* 페이지 배지는 오른쪽 끝으로 — 자릿수가 달라도 세로로 맞는다 */
.meta-links-tab__page[data-v-25b703de] {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.meta-links-tab__row-side[data-v-25b703de] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex: 0 0 auto;
}
.meta-links-tab__row-actions[data-v-25b703de] {
  display: flex;
  gap: var(--gap-glyph);
}
.meta-links-tab__row-check[data-v-25b703de] { flex: 0 0 auto; margin-top: var(--space-tight);
}
/* 공통 ListBulkBar 래퍼 — 좌우 패딩을 주면 안 된다.
   ListBulkBar 자체가 좌우 var(--space-cozy) 를 가지므로, 래퍼가 또 주면 전체 체크박스가
   행 체크박스보다 12px 밀린다. 변경 탭(.history-tab__bulk-wrap)과 동일하게 세로만 준다. */
.meta-links-tab__bulk-wrap[data-v-25b703de] { padding: var(--space-snug) 0;
}
.meta-links-tab__header-actions[data-v-25b703de] { display: flex; gap: var(--gap-glyph);
}
.meta-links-tab__action-label[data-v-25b703de] { white-space: nowrap;
}

.add-ref[data-v-bea5ae90] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  /* ⛔ 「이 문서 안 ↔ 밖」을 오가도 상자가 안 움직이게 **가장 높은 갈래만큼 자리를 잡는다.**
     안은 찾기 칸과 대상 목록이 서고, 밖은 한 줄 안내뿐이다.
     실측 2026-09-04(창 1600×1000): 안 471px · 밖 191px → 471px = 29.4375rem.
     안 잡으면 판이 613↔333 으로 **280px** 들썩여 탭을 옮길 때마다 상자가 반으로 접힌다. */
  min-height: 29.4375rem;  /* css-ignore: 가장 높은 갈래의 실측값 — 사다리로 접히지 않는다 */
}
.add-ref__picked[data-v-bea5ae90] {
  display: flex; align-items: baseline; gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field); border-radius: var(--radius-control);
}
.add-ref__picked-label[data-v-bea5ae90] { font-size: var(--size-meta); color: var(--ink-muted); flex: 0 0 auto;
}
.add-ref__picked-text[data-v-bea5ae90] {
  font-size: var(--size-meta); color: var(--ink-brand);
  font-weight: var(--weight-title); word-break: break-all;
}
.add-ref__list[data-v-bea5ae90] {
  border: var(--line-strong); border-radius: var(--radius-control);
  max-height: 320px; overflow-y: auto;
}
.add-ref__state[data-v-bea5ae90] {
  padding: var(--space-band); text-align: center;
  color: var(--ink-muted); font-size: var(--size-meta);
}
/* 목록 행은 ghost AppButton — 자체 role="button" 마크업 금지 (확인 탭과 동일).
   좌우 배치는 AppButton 의 block + align="between" prop 이 처리한다. */
.add-ref__item[data-v-bea5ae90] {
  height: auto;
  border-bottom: var(--line-strong);
  border-radius: 0;
  padding: var(--space-snug) var(--space-cozy);
}
.add-ref__item[data-v-bea5ae90]:last-child { border-bottom: 0;
}
/* 선택된 대상 — 배경만으로는 안 보인다. 왼쪽 강조바 + 체크 + 글자색까지 준다. */
.add-ref__item--on[data-v-bea5ae90] {
  background: var(--bg-brand-soft);
  box-shadow: inset 3px 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
}
.add-ref__item--on .add-ref__item-title[data-v-bea5ae90] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.add-ref__item-right[data-v-bea5ae90] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 0 0 auto;
}
.add-ref__item-check[data-v-bea5ae90] {
  color: var(--ink-brand);
  font-size: var(--size-meta);
  flex: 0 0 auto;
}
.add-ref__item-check--off[data-v-bea5ae90] { visibility: hidden;
}
/* 페이지 배지는 오른쪽 정렬 — 자릿수가 달라도(p.81 / p.309) 오른쪽 끝이 맞는다 */
.add-ref__item-page[data-v-bea5ae90] {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.add-ref__item[data-v-bea5ae90] .app-btn__content {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-inline); width: 100%; min-width: 0;
}
.add-ref__item-main[data-v-bea5ae90] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-glyph); min-width: 0; flex: 1 1 auto;
}
.add-ref__item-title[data-v-bea5ae90] {
  font-size: var(--size-meta); color: var(--ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.add-ref__item-scope[data-v-bea5ae90] { font-size: var(--size-meta); color: var(--ink-muted);
}

.merge-dialog__content[data-v-caec1729] {
  display: flex;
  flex-direction: column;
}
.merge-dialog__content--center[data-v-caec1729] {
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* 미리보기 */
.merge-dialog__preview[data-v-caec1729] {
  margin-bottom: var(--gap-stack);
}
.merge-dialog__preview-label[data-v-caec1729] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.merge-dialog__preview-box[data-v-caec1729] {
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  line-height: var(--line-normal);
}
.merge-dialog__preview-before[data-v-caec1729] {
  color: var(--ink-secondary);
}
.merge-dialog__preview-item[data-v-caec1729] {
  word-break: break-all;
}
.merge-dialog__preview-sep[data-v-caec1729] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  margin: 0 var(--gap-glyph);
}
.merge-dialog__preview-arrow[data-v-caec1729] {
  color: var(--ink-brand);
  font-size: var(--icon-label);
  margin: var(--gap-glyph) 0;
}
.merge-dialog__preview-after[data-v-caec1729] {
  color: var(--ink-primary);
  word-break: break-all;
}

/* 합치기 순서 */
.merge-dialog__order-section[data-v-caec1729] {
  margin-bottom: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
}
.merge-dialog__order-label[data-v-caec1729] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: block;
  margin-bottom: var(--gap-inline);
}
.merge-dialog__order-radios[data-v-caec1729] {
  display: flex;
  gap: var(--gap-group);
}

/* 옵션 */
.merge-dialog__options[data-v-caec1729] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.merge-dialog__option[data-v-caec1729] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
}
.merge-dialog__match-count[data-v-caec1729] {
  color: var(--ink-brand);
  font-size: var(--size-label);
}

/* 규칙 등록 옵션 */
.merge-dialog__rule-options[data-v-caec1729] {
  margin-top: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.merge-dialog__rule-section[data-v-caec1729] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.merge-dialog__rule-label[data-v-caec1729] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.merge-dialog__rule-radios[data-v-caec1729] {
  display: flex;
  gap: var(--gap-stack);
}
.merge-dialog__rule-radios label[data-v-caec1729] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}

/* 프로그래스 */
.merge-dialog__progress[data-v-caec1729] {
  width: 100%;
  text-align: center;
}
.merge-dialog__progress-bar[data-v-caec1729] {
  width: 100%;
  height: 4px;
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
  margin-bottom: var(--gap-stack);
}
.merge-dialog__progress-fill[data-v-caec1729] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  animation: progress-indeterminate-caec1729 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate-caec1729 {
0% { width: 0; margin-left: 0;
}
50% { width: 60%; margin-left: 20%;
}
100% { width: 0; margin-left: 100%;
}
}
.merge-dialog__progress-text[data-v-caec1729] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
}

/* 결과 */
.merge-dialog__result[data-v-caec1729] {
  text-align: center;
  margin-bottom: var(--gap-stack);
}
.merge-dialog__result-icon[data-v-caec1729] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
  margin-bottom: var(--gap-glyph);
}
.merge-dialog__result-text[data-v-caec1729] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
}
.merge-dialog__result-details[data-v-caec1729] {
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.merge-dialog__result-row[data-v-caec1729] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.merge-dialog__result-row span[data-v-caec1729]:last-child {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}

/* 전환 효과 */
.expand-enter-active[data-v-caec1729],
.expand-leave-active[data-v-caec1729] {
  transition: all var(--motion-base) ease;
  overflow: hidden;
}
.expand-enter-from[data-v-caec1729],
.expand-leave-to[data-v-caec1729] {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding: var(--pad-control);
}
.expand-enter-to[data-v-caec1729],
.expand-leave-from[data-v-caec1729] {
  opacity: 1;
  max-height: 200px;
}

.remove-dialog__content[data-v-19c7e443] {
  display: flex;
  flex-direction: column;
}
.remove-dialog__content--center[data-v-19c7e443] {
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* 선택 항목 미리보기 */
.remove-dialog__preview[data-v-19c7e443] {
  margin-bottom: var(--gap-stack);
}
.remove-dialog__preview-label[data-v-19c7e443] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.remove-dialog__preview-box[data-v-19c7e443] {
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.remove-dialog__preview-item[data-v-19c7e443] {
  color: var(--ink-secondary);
  word-break: break-all;
  text-decoration: line-through;
  opacity: 0.8;
}
.remove-dialog__preview-more[data-v-19c7e443] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  opacity: 0.6;
}

/* 섹션 */
.remove-dialog__section[data-v-19c7e443] {
  margin-bottom: var(--gap-stack);
}
.remove-dialog__section-label[data-v-19c7e443] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
  padding-bottom: var(--space-tight);
  border-bottom: var(--line-soft);
}

/* 라디오 */
.remove-dialog__radios[data-v-19c7e443] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.remove-dialog__radio[data-v-19c7e443] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
}


/* 패턴 편집 */
.remove-dialog__patterns[data-v-19c7e443] {
  margin-bottom: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
}
.remove-dialog__patterns-label[data-v-19c7e443] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.remove-dialog__pattern-row[data-v-19c7e443] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.remove-dialog__pattern-input[data-v-19c7e443] {
  flex: 1;
}
.remove-dialog__pattern-remove[data-v-19c7e443] {
  flex-shrink: 0;
}
.remove-dialog__pattern-error[data-v-19c7e443] {
  font-size: var(--size-meta);
  color: var(--ink-danger);
  margin-bottom: var(--gap-glyph);
}
.remove-dialog__pattern-add[data-v-19c7e443] {
  border: var(--line-w) dashed var(--line-color-subtle) !important;
  border-radius: var(--radius-badge) !important;
  height: auto !important;
  padding: var(--space-tight) var(--space-snug) !important;
  font-size: var(--size-label) !important;
}
.remove-dialog__pattern-add[data-v-19c7e443]:hover {
  border-color: var(--ink-brand) !important;
}

/* 옵션 */
.remove-dialog__options[data-v-19c7e443] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.remove-dialog__option[data-v-19c7e443] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
}
.remove-dialog__match-count[data-v-19c7e443] {
  color: var(--ink-brand);
  font-size: var(--size-label);
}

/* 매칭 미리보기 */
.remove-dialog__match-preview[data-v-19c7e443] {
  margin-bottom: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  max-height: 160px;
  overflow-y: auto;
}
.remove-dialog__match-row[data-v-19c7e443] {
  display: flex;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  line-height: var(--line-relaxed);
}
.remove-dialog__match-page[data-v-19c7e443] {
  color: var(--ink-brand);
  white-space: nowrap;
  min-width: 2.5rem;
}
.remove-dialog__match-text[data-v-19c7e443] {
  color: var(--ink-secondary);
  word-break: break-all;
}
.remove-dialog__match-more[data-v-19c7e443] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  opacity: 0.6;
  margin-top: var(--gap-glyph);
}

/* 규칙 등록 옵션 */
.remove-dialog__rule-options[data-v-19c7e443] {
  margin-top: var(--gap-glyph);
  margin-bottom: var(--gap-inline);
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.remove-dialog__rule-section[data-v-19c7e443] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.remove-dialog__rule-label[data-v-19c7e443] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.remove-dialog__rule-radios[data-v-19c7e443] {
  display: flex;
  gap: var(--gap-stack);
}
.remove-dialog__rule-radios label[data-v-19c7e443] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}

/* 프로그래스 */
.remove-dialog__progress[data-v-19c7e443] {
  width: 100%;
  text-align: center;
}
.remove-dialog__progress-bar[data-v-19c7e443] {
  width: 100%;
  height: 4px;
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
  margin-bottom: var(--gap-stack);
}
.remove-dialog__progress-fill[data-v-19c7e443] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  animation: remove-progress-indeterminate-19c7e443 1.5s ease-in-out infinite;
}
@keyframes remove-progress-indeterminate-19c7e443 {
0% { width: 0; margin-left: 0;
}
50% { width: 60%; margin-left: 20%;
}
100% { width: 0; margin-left: 100%;
}
}
.remove-dialog__progress-text[data-v-19c7e443] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
}

/* 결과 */
.remove-dialog__result[data-v-19c7e443] {
  text-align: center;
  margin-bottom: var(--gap-stack);
}
.remove-dialog__result-icon[data-v-19c7e443] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
  margin-bottom: var(--gap-glyph);
}
.remove-dialog__result-text[data-v-19c7e443] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
}
.remove-dialog__result-details[data-v-19c7e443] {
  padding: var(--space-cozy) var(--space-cozy);
  background: var(--bg-float);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.remove-dialog__result-row[data-v-19c7e443] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.remove-dialog__result-row span[data-v-19c7e443]:last-child {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}

/* 전환 효과 */
.expand-enter-active[data-v-19c7e443],
.expand-leave-active[data-v-19c7e443] {
  transition: all var(--motion-base) ease;
  overflow: hidden;
}
.expand-enter-from[data-v-19c7e443],
.expand-leave-to[data-v-19c7e443] {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.expand-enter-to[data-v-19c7e443],
.expand-leave-from[data-v-19c7e443] {
  opacity: 1;
  max-height: 400px;
}

.page-col-dialog__body[data-v-d59c3cfa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  /* ⛔ 열려 있는 동안 상자가 안 움직이게 **가장 높은 조합만큼 본문 자리를 잡는다.**
     「다음 문서에도 적용」을 켜면 규칙 범위 고르개와 미리보기가 나타난다.
     실측 2026-09-04(창 1600×1000): 끔 168px · 켬 384px → 384px = 24rem.
     ⛔ **창을 좁히면 그 값이 모자란다** — 검사가 쓰는 창(1500×950)에서는 글이 한 줄 더 접혀
        403px 이 필요했고, 24rem 이라 판이 526↔545 로 **19px** 남아 흔들렸다
        (lint:modal-size 실측 2026-09-04·09-07 동일). 그래서 좁은 쪽 값으로 잡는다.
     안 잡으면 판이 310↔526 으로 216px 들썩여 확인 단추가 달아나고,
     짧은 상태에서 범위 고르개를 열면 목록이 본문에 잘린다. */
  min-height: 25.1875rem;  /* css-ignore: 좁은 창(1500×950)에서 잰 최대값 403px */
}
.page-col-field[data-v-d59c3cfa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.page-col-field__label[data-v-d59c3cfa] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.page-col-field__input[data-v-d59c3cfa],
.page-col-field__select[data-v-d59c3cfa] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-body);
  outline: none;
  box-sizing: border-box;
}
.page-col-field__readonly[data-v-d59c3cfa] {
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
}
.page-col-field__input[data-v-d59c3cfa]:focus,
.page-col-field__select[data-v-d59c3cfa]:focus {
  border-color: var(--ink-brand);
}
.page-col-radio-group[data-v-d59c3cfa] {
  display: flex;
  gap: var(--gap-band);
  flex-wrap: wrap;
}
.page-col-radio[data-v-d59c3cfa],
.page-col-checkbox[data-v-d59c3cfa] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.page-col-radio small[data-v-d59c3cfa] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}
.page-col-hint[data-v-d59c3cfa] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}
.page-col-preview[data-v-d59c3cfa] {
  background: var(--bg-field);
  border: var(--line-soft);
  border-radius: var(--radius-control);
  padding: var(--space-cozy) var(--space-cozy);
}
.page-col-preview__title[data-v-d59c3cfa] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  margin-bottom: var(--gap-inline);
  color: var(--ink-primary);
}
.page-col-preview__list[data-v-d59c3cfa] {
  margin: 0;
  padding-left: var(--space-roomy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.page-col-preview__warn[data-v-d59c3cfa] {
  color: var(--ink-danger);
}
.page-col-error[data-v-d59c3cfa] {
  color: var(--ink-danger);
  font-size: var(--size-label);
}

.change-rules-panel[data-v-1a95b44a] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.change-rules-panel__header[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}
.change-rules-panel__title[data-v-1a95b44a] {
  flex: 1;
}
.change-rules-panel__intro[data-v-1a95b44a] {
  padding: var(--space-band);
  text-align: center;
}
.change-rules-panel__intro p[data-v-1a95b44a] {
  color: var(--ink-secondary);
  font-size: var(--size-label);
  margin-bottom: var(--gap-stack);
}
.change-rules-panel__loading[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-wide);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.change-rules-panel__results[data-v-1a95b44a] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-snug);
}
.change-rules-panel__summary[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-snug);
  background: var(--bg-card);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
  flex-wrap: wrap;
}

/* summary 행에서 우측 정렬 — AppButton 으로 마이그됐고 레이아웃만 유지 */
.change-rules-panel__save-all-btn[data-v-1a95b44a] {
  margin-left: auto;
}
.change-rules-panel__empty[data-v-1a95b44a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-wide) var(--space-band);
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.change-rules-panel__empty i[data-v-1a95b44a] {
  font-size: var(--icon-lead);
  color: var(--ink-success);
}
.change-rules-panel__empty p[data-v-1a95b44a] {
  margin: 0;
  text-align: center;
}
.change-rules-panel__pattern[data-v-1a95b44a] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-snug);
  margin-bottom: var(--gap-inline);
}
.change-rules-panel__pattern-header[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
}
.change-rules-panel__pattern-source[data-v-1a95b44a] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  padding: var(--space-tight) var(--space-tight);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
}
.change-rules-panel__pattern-desc[data-v-1a95b44a] {
  font-size: var(--size-label);
  flex: 1;
}
.change-rules-panel__pattern-meta[data-v-1a95b44a] {
  display: flex;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
}
.change-rules-panel__confidence[data-v-1a95b44a] {
  font-weight: var(--weight-title);
}
.change-rules-panel__confidence--high[data-v-1a95b44a] { color: var(--ink-success);
}
.change-rules-panel__confidence--medium[data-v-1a95b44a] { color: var(--ink-warning);
}
.change-rules-panel__confidence--low[data-v-1a95b44a] { color: var(--ink-danger);
}
.change-rules-panel__occurrence[data-v-1a95b44a] {
  color: var(--ink-secondary);
}
.change-rules-panel__pattern-info[data-v-1a95b44a] {
  margin: var(--gap-glyph) 0;
}
.change-rules-panel__pattern-info code[data-v-1a95b44a] {
  display: inline-block;
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-card);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  word-break: break-all;
}
.change-rules-panel__samples[data-v-1a95b44a] {
  margin: var(--gap-glyph) 0 var(--gap-glyph) var(--gap-stack);
}
.change-rules-panel__sample[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  padding: var(--space-tight) 0;
  color: var(--ink-secondary);
}
.change-rules-panel__sample-page[data-v-1a95b44a] {
  font-weight: var(--weight-title);
  color: var(--ink-muted);
  min-width: 24px;
}
.change-rules-panel__sample-old[data-v-1a95b44a] {
  text-decoration: line-through;
  color: var(--ink-danger);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.change-rules-panel__sample-arrow[data-v-1a95b44a] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.change-rules-panel__sample-new[data-v-1a95b44a] {
  color: var(--ink-success);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.change-rules-panel__sample-text[data-v-1a95b44a] {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.change-rules-panel__pattern-actions[data-v-1a95b44a] {
  display: flex;
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
}
.change-rules-panel__status[data-v-1a95b44a] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
}
.change-rules-panel__status--approved[data-v-1a95b44a] {
  color: var(--ink-success);
  background: var(--bg-success-soft);
}
.change-rules-panel__status--rejected[data-v-1a95b44a] {
  color: var(--ink-muted);
  background: var(--bg-page);
}

/* 승인 다이얼로그 */
.change-rules-panel__overlay[data-v-1a95b44a] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 이 판의 뒷판은 **본문만** 덮는다 — 상단바·사이드바는 선명하게 남는 것이 지금 모습이다.
     (2026-09-03: --z-modal-backdrop 로 올렸다가 껍데기까지 흐려져 되돌렸다.) */
  z-index: var(--z-pane-backdrop);
}
.change-rules-panel__dialog[data-v-1a95b44a] {
  background: var(--bg-float);
  border-radius: var(--radius-card);
  width: 360px;
  max-width: 90vw;
  box-shadow: var(--shadow-float);
}
.change-rules-panel__dialog-header[data-v-1a95b44a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  font-weight: var(--weight-title);
  font-size: var(--size-body);
}
.change-rules-panel__dialog-body[data-v-1a95b44a] {
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.change-rules-panel__dialog-body label[data-v-1a95b44a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.change-rules-panel__dialog-footer[data-v-1a95b44a] {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
  padding: var(--pad-panel);
  border-top: var(--line-strong);
}


.history-tab[data-v-c4af8a15] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.history-tab__filters[data-v-c4af8a15] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}

/* 필터 셸 폭 — 좁은 사이드 패널이라 컴팩트하게 고정 */
.history-tab__filter-item[data-v-c4af8a15] {
  flex: 0 0 auto;
  width: 156px;
}
/* 좁은 셸에서 placeholder("전체")가 두 줄로 꺾이지 않게 */
.history-tab__filter-item[data-v-c4af8a15] .multi-select-placeholder {
  white-space: nowrap;
}

/* 액션 버튼 묶음 — 우측 정렬, 좁아지면 그룹째 아랫줄로 */
.history-tab__actions[data-v-c4af8a15] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin-left: auto;
}
.history-tab__filter-select[data-v-c4af8a15] {
  padding: var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  outline: none;
}

/* .history-tab__action-btn → AppButton variant="secondary/danger" size="md" + :active */
.history-tab__action-label[data-v-c4af8a15] {
  display: none;
}
@media (min-width: 480px) {
.history-tab__action-label[data-v-c4af8a15] { display: inline;
}
}

/* 벌크 액션 바 — 공통 ListBulkBar 를 감싸는 패딩 래퍼.
   바의 체크박스 X 가 행의 체크박스 X 와 시각적으로 일치하도록 좌우 패딩 제거.
   (바의 border 1px + 내부 padding 12px = 13px → 행 padding-left 12px 와 1px 차이로 정렬) */
.history-tab__bulk-wrap[data-v-c4af8a15] {
  padding: var(--space-snug) 0;
  flex-shrink: 0;
}
.history-tab__bulk-checkbox[data-v-c4af8a15] {
  cursor: pointer;
  flex-shrink: 0;
}

/* 참조 이력 표시 — 걸린 글자 → 대상 */
.history-tab__ref-mark[data-v-c4af8a15] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  max-width: 46%;
  font-size: var(--icon-marker);
}
.history-tab__ref-surface[data-v-c4af8a15] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  white-space: nowrap;
}
/* css-ignore: 9px — 참조 화살표(→) 장식. 토큰 최소치(11px)면 글자 사이에서 튄다 */
.history-tab__ref-arrow[data-v-c4af8a15] { color: var(--ink-muted); font-size: var(--icon-marker);
}
.history-tab__ref-target[data-v-c4af8a15] {
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 통계 바 */
.history-tab__stats-bar[data-v-c4af8a15] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  font-size: var(--size-meta);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.history-tab__stats-label[data-v-c4af8a15] {
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.history-tab__stat-item[data-v-c4af8a15] {
  color: var(--ink-secondary);
}
.history-tab__stat-item strong[data-v-c4af8a15] {
  color: var(--ink-brand);
}

/* 스냅샷 */
.history-tab__snapshot[data-v-c4af8a15] {
  background: var(--bg-accent-cyan-soft);
  border-bottom: var(--line-strong);
}
.history-tab__snapshot-row[data-v-c4af8a15] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row-dense);
  font-size: var(--size-meta);
}
.history-tab__snapshot-row[data-v-c4af8a15]:hover {
  background: var(--bg-info-soft);
}
.history-tab__snapshot-icon[data-v-c4af8a15] {
  font-size: var(--icon-marker);
  color: var(--ink-accent-cyan);
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}
.history-tab__snapshot-name[data-v-c4af8a15] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.history-tab__empty-msg[data-v-c4af8a15] {
  padding: var(--space-snug) var(--space-band);
  font-size: var(--size-label);
  color: var(--ink-muted);
}

/* 배치 그룹 */
.history-tab__batch[data-v-c4af8a15] {
  border-bottom: var(--line-strong);
}
.history-tab__batch-header[data-v-c4af8a15] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  cursor: pointer;
}
.history-tab__batch-header[data-v-c4af8a15]:hover {
  background: var(--bg-hover);
}
.history-tab__batch-chevron[data-v-c4af8a15] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  width: 10px;
}
.history-tab__batch-chevron--clickable[data-v-c4af8a15] {
  cursor: pointer;
  padding: var(--space-tight);
  margin: var(--gap-glyph);
  width: auto;
  font-size: var(--icon-marker);
}
.history-tab__batch-chevron--clickable[data-v-c4af8a15]:hover {
  color: var(--ink-primary);
}
.history-tab__batch-desc[data-v-c4af8a15] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
.history-tab__batch-count[data-v-c4af8a15] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-title);
}
.history-tab__batch-children[data-v-c4af8a15] {
  border-top: var(--line-strong);
  background: var(--bg-page);
}

/* 자식 행들 사이는 1px 구분선, 마지막 행은 외부 그룹의 border-bottom과 겹치지 않도록 제거 */
.history-tab__batch-children > .history-tab__item--nested[data-v-c4af8a15]:last-child {
  border-bottom: none;
}

/* 최초 추출(extract) 이력은 그룹 헤더 없이 자식만 top-level처럼 표시 */
.history-tab__batch--extract .history-tab__batch-children[data-v-c4af8a15] {
  border-top: none;
  background: transparent;
}

/* 선택/포커스 표시 - 내용탭과 동일한 스타일 */
.history-tab__batch-header[data-v-c4af8a15],
.history-tab__snapshot-row[data-v-c4af8a15],
.history-tab__item--nested[data-v-c4af8a15] {
  border-left: var(--line-accent) solid transparent;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.history-tab__batch-header.history-tab__item--focused[data-v-c4af8a15],
.history-tab__snapshot.history-tab__item--focused .history-tab__snapshot-row[data-v-c4af8a15],
.history-tab__item--nested.history-tab__item--focused[data-v-c4af8a15] {
  background: var(--bg-info-soft);
  border-left-color: var(--ink-brand);
}

/* 이력 목록 */
.history-tab__list[data-v-c4af8a15] {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  outline: none;
}
.history-tab__loading[data-v-c4af8a15] {
  display: flex;
  justify-content: center;
  padding: var(--space-wide);
  color: var(--ink-muted);
}
.history-tab__empty[data-v-c4af8a15] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
  gap: var(--gap-inline);
}
.history-tab__empty-icon[data-v-c4af8a15] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.history-tab__empty p[data-v-c4af8a15] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.history-tab__item[data-v-c4af8a15] {
  padding: 0;
  border-bottom: var(--line-strong);
}
.history-tab__item[data-v-c4af8a15]:hover {
  background: var(--bg-hover);
}
.history-tab__item-header[data-v-c4af8a15] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug) 0 var(--space-snug);
}
.history-tab__node-row[data-v-c4af8a15] {
  display: flex;
  align-items: flex-start;
}

/* 태그 행: 내용 노드 내부 페이지 라벨 숨기고 외부에 별도 표시 (순서: 칩 → 페이지 → 버튼) */
.history-tab__node-row--has-tag[data-v-c4af8a15] {
  align-items: center;
}
.history-tab__node-row--has-tag[data-v-c4af8a15] .content-node__page {
  display: none;
}
.history-tab__node-page[data-v-c4af8a15] {
  flex-shrink: 0;
  align-self: center;
  min-width: 2rem;
  text-align: right;
  color: var(--ink-muted);
  font-size: var(--size-meta);
  white-space: nowrap;
  margin-left: var(--gap-glyph);
}
.history-tab__node-row--clickable[data-v-c4af8a15] {
  cursor: pointer;
}
.history-tab__node-row--clickable[data-v-c4af8a15]:hover {
  background: var(--bg-hover);
}
.history-tab__node-row[data-v-c4af8a15] .content-node,
.history-tab__item[data-v-c4af8a15] >  .content-node {
  flex: 1;
  min-width: 0;
}

/* 그룹 헤더에 사용하는 태그 색상 토큰 (부여/회수 그룹 모두 동일 스타일) */
.history-tab__color-token[data-v-c4af8a15] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-label);
  white-space: nowrap;
  border: var(--line-soft);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 요소별 토큰 — 페이지/버튼 옆 메타 영역에 작게 표시 */
.history-tab__color-token--mini[data-v-c4af8a15] {
  font-size: var(--size-meta);
  padding: 0 var(--space-snug);
  max-width: 5rem;
  margin-left: var(--gap-glyph);
  align-self: center;
}
.history-tab__btn-area[data-v-c4af8a15] {
  flex-shrink: 0;
  margin-right: var(--gap-inline);
  margin-left: var(--gap-glyph);
  display: flex;
  gap: var(--gap-glyph);
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}
.history-tab__item.history-tab__item--nested[data-v-c4af8a15] {
  padding-left: var(--space-tight);
}
.history-tab__action-mark[data-v-c4af8a15] {
  min-width: 2.75rem;
  justify-content: center;
}
.history-tab__user-inline[data-v-c4af8a15] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.history-tab__item-user[data-v-c4af8a15] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
  margin-left: auto;
}
.history-tab__item-time[data-v-c4af8a15] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 수정 이력 diff 뷰 */
.history-tab__diff[data-v-c4af8a15] {
  font-size: var(--size-label);
  font-family: inherit;
}
.history-tab__diff-row[data-v-c4af8a15] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy) var(--space-tight) 0;
  line-height: var(--line-normal);
  word-break: break-all;
}
.history-tab__diff-label[data-v-c4af8a15] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  width: 46px;
  text-align: right;
}
.history-tab__diff-row--old .history-tab__diff-label[data-v-c4af8a15] {
  color: var(--ink-danger);
}
.history-tab__diff-row--new .history-tab__diff-label[data-v-c4af8a15] {
  color: var(--ink-success-hover);
}
.history-tab__diff-text[data-v-c4af8a15] {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
}
/* 접힌 자리 표시 — 바뀐 곳에서 먼 부분은 이 표시로 갈음한다 */
.history-tab__diff-gap[data-v-c4af8a15] {
  color: var(--ink-muted);
}
.history-tab__diff-more[data-v-c4af8a15] {
  display: flex;
  justify-content: flex-end;
}
/* 정렬 변경 표시 */
.history-tab__align-value[data-v-c4af8a15] {
  margin: 0 var(--gap-glyph);
  color: var(--ink-secondary);
}
.history-tab__align-arrow[data-v-c4af8a15] {
  margin: 0 var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--icon-marker);
}
.history-tab__diff-page[data-v-c4af8a15] {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

/* .history-tab__diff-goto → AppButton icon-only variant="ghost" size="xs" */
.history-tab__diff-goto[data-v-c4af8a15] {
  flex-shrink: 0;
  margin-left: var(--gap-glyph);
}
.history-tab__diff-del[data-v-c4af8a15] {
  background: var(--bg-danger-soft);
  text-decoration: line-through;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.history-tab__diff-ins[data-v-c4af8a15] {
  background: var(--bg-success-soft);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.history-tab__pagination[data-v-c4af8a15] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding: var(--space-snug);
  font-size: var(--size-meta);
}
.history-tab__pagination button[data-v-c4af8a15] {
  padding: var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
  line-height: var(--line-none);
}
.history-tab__pagination button[data-v-c4af8a15]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.history-tab__pagination button[data-v-c4af8a15]:hover:not(:disabled) {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.history-tab__pagination span[data-v-c4af8a15] {
  color: var(--ink-secondary);
  line-height: var(--line-none);
}

/* 검색 바 */
.history-tab__search-bar[data-v-c4af8a15] {
  flex-shrink: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.history-tab__search-mark[data-v-c4af8a15] {
  background: var(--bg-mark);
  color: inherit;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}


.collab-bar[data-v-9dc6575b] {
  display: inline-flex;
  align-items: center;
}
.collab-bar__list[data-v-9dc6575b] {
  display: flex;
  align-items: center;
}
.collab-bar__user[data-v-9dc6575b] {
  /* ⛔ 지름을 여기에 다시 적지 않는다 — 안에 선 얼굴(UserAvatar)이 크기를 정하고 이 고리는 따라간다.
     한때 22px 를 박아 두어 얼굴 단을 고치면 이 테두리만 어긋났다(2026-09-12). */
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid var(--bg-page);
  overflow: hidden;
  position: relative;
  transition: transform var(--motion-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.collab-bar__user[data-v-9dc6575b]:hover {
  transform: scale(1.1);
}
.collab-bar__user--current[data-v-9dc6575b] {
  border: var(--line-w-thick) solid var(--ink-brand);
  box-shadow: 0 0 0 var(--line-w) var(--ink-brand);
}

/* 창 크기는 안에서 무엇을 하든 변하지 않는다 — 굴러가는 곳도 탭 안 한 곳뿐이다. */
.rule-request[data-v-a590f50d] {
  display: flex;
  flex-direction: column;
  height: 26rem;
  overflow: hidden;
}
.rule-request__pane[data-v-a590f50d] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  padding-top: var(--space-cozy);
}
.rule-request__pane--evidence[data-v-a590f50d] {
  overflow-y: auto;
  gap: var(--gap-stack);
}
.rule-request__capture[data-v-a590f50d] {
  align-self: flex-start;
}
.rule-request__field[data-v-a590f50d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* 접수 대상 줄 — 라벨과 고르개가 한 줄에 선다(창 높이를 더 먹지 않게). */
.rule-request__target[data-v-a590f50d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.rule-request__target[data-v-a590f50d] .multi-select-wrapper {
  flex: 1;
  min-width: 0;
}
.rule-request__hint--target[data-v-a590f50d] {
  margin-top: var(--gap-glyph);
}

/*
  정답지 칸이 남는 높이를 다 쓴다 — 줄 수를 고정해 두면 아래가 빈 채로 남는다.
  (창 높이는 못 박혀 있으므로 이 칸이 늘어나는 것이 곧 '빈자리 없음'이다.)
*/
.rule-request__field--grow[data-v-a590f50d] {
  flex: 1;
  min-height: 0;
}
.rule-request__field--grow[data-v-a590f50d] textarea {
  flex: 1;
  min-height: 0;
}
.rule-request__label[data-v-a590f50d] {
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.rule-request__hint[data-v-a590f50d] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.rule-request__evidence-list[data-v-a590f50d] {
  margin: 0;
  padding-left: var(--space-band);
  font-size: var(--size-body);
  color: var(--ink-secondary);
  line-height: var(--line-relaxed);
}

.meta-issues-tab[data-v-40f0b536] {
  display: flex;
  flex-direction: column;
  /* 부모(.meta-content-tree) flex column 의 남는 공간을 채우되 그 이상 커지지 않게 —
     height:100% 는 탭 바 높이를 빼지 못해 넘쳐서 리스트 하단이 잘리고 스크롤이 막힘.
     정상 스크롤되는 활성 탭 바디(.content-tree__body)와 동일한 사이징. */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.meta-issues-tab__header[data-v-40f0b536] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 좁은 폭에서 카운트 요약과 액션 버튼이 가로로 넘치지 않고 줄바꿈되도록 허용 */
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.meta-issues-tab__counts[data-v-40f0b536] {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
  font-size: var(--size-label);
}
.meta-issues-tab__count[data-v-40f0b536] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.meta-issues-tab__count--error[data-v-40f0b536] { color: var(--ink-danger);
}
.meta-issues-tab__count--warning[data-v-40f0b536] { color: var(--ink-warning);
}
.meta-issues-tab__count--info[data-v-40f0b536] { color: var(--ink-info);
}
.meta-issues-tab__count-label[data-v-40f0b536] {
  font-size: var(--size-meta);
  opacity: 0.85;
}

/* 공통 ListBulkBar 를 감싸는 패딩 래퍼.
   바의 체크박스 X 가 행의 체크박스 X 와 시각적으로 일치하도록 좌우 패딩 제거. */
.meta-issues-tab__bulk-wrap[data-v-40f0b536] {
  padding: var(--space-snug) 0;
  flex-shrink: 0;
}
.meta-issues-tab__item-checkbox[data-v-40f0b536] {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--gap-inline) 0 var(--gap-glyph);
}
.meta-issues-tab__item--selected[data-v-40f0b536] {
  background: var(--bg-brand-soft);
}
/* 내용 탭(.content-node--selected) / 변경 탭(.history-tab__item--focused) 와 동일한 선택 표시 */
.meta-issues-tab__item--active[data-v-40f0b536] {
  background: var(--bg-info-soft);
}
.meta-issues-tab__empty-count[data-v-40f0b536] {
  color: var(--ink-muted);
  font-size: var(--size-label);
}

/* 작업 중 — 클릭 시 취소되도록 disabled 는 아니지만 작업 중임을 색으로 표시 */
.meta-issues-tab__action-btn--busy[data-v-40f0b536] {
  border-color: var(--ink-warning) !important;
  color: var(--ink-warning) !important;
}
.meta-issues-tab__action-btn--busy[data-v-40f0b536]:hover {
  border-color: var(--ink-warning) !important;
  color: var(--ink-warning) !important;
  background: var(--bg-field) !important;
}
.meta-issues-tab__action-label[data-v-40f0b536] {
  display: none;
}
@media (min-width: 480px) {
.meta-issues-tab__action-label[data-v-40f0b536] { display: inline;
}
}
.meta-issues-tab__state[data-v-40f0b536] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-body);
}
.meta-issues-tab__state--error[data-v-40f0b536] { color: var(--ink-danger);
}
.meta-issues-tab__list[data-v-40f0b536] {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.meta-issues-tab__item[data-v-40f0b536] {
  border-bottom: var(--line-strong);
  /* 내용 탭(.content-node) / 변경 탭(.history-tab__item) 행 높이·폰트와 동일 */
  padding: var(--space-tight) var(--space-cozy) var(--space-tight) var(--space-snug);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  display: flex;
  align-items: center;
  /* 좁은 폭(모바일 세로 분할·좁은 분할 패널)에서 액션 묶음이 아랫줄로 내려가도록 허용.
     제목(item-main)의 min-width 바닥과 짝을 이뤄, 공간이 부족하면 제목이 한 줄 전폭을
     확보하고 액션이 다음 줄로 내려간다 — 제목이 글자당 한 줄로 세로로 붕괴하는 현상 방지. */
  flex-wrap: wrap;
  gap: var(--gap-inline);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.meta-issues-tab__item--error[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-danger);
}
.meta-issues-tab__item--warning[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-warning);
}
.meta-issues-tab__item--info[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-info);
}
.meta-issues-tab__item-main[data-v-40f0b536] {
  /* override AppButton defaults: 이 버튼은 행 전체를 채우는 인라인 네비게이션 트리거 */
  flex: 1 !important;
  /* 제목 폭 바닥: 좁아지면 0으로 붕괴(→ 글자 세로 쌓임)하지 않고 최소 8rem 을 유지해
     액션 묶음을 아랫줄로 밀어낸다. 컨테이너가 8rem 보다 좁으면 100% 로 전폭 사용. */
  min-width: min(100%, 8rem) !important;
  padding: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  font: inherit !important;
  text-align: left !important;
  width: auto !important;
  /* 메시지가 길면 줄바꿈 — AppButton 기본 nowrap 해제 */
  white-space: normal !important;
}
/* p.NN 페이지 라벨과 제목 사이 간격 */
.meta-issues-tab__item-main[data-v-40f0b536] .app-btn__label {
  gap: var(--gap-inline);
}
/* 행 hover — 변경 탭(.history-tab__item:hover) 와 동일 */
.meta-issues-tab__item[data-v-40f0b536]:hover:not(.meta-issues-tab__item--active) {
  background: var(--bg-hover);
}
.meta-issues-tab__icon--error[data-v-40f0b536] { color: var(--ink-danger);
}
.meta-issues-tab__icon--warning[data-v-40f0b536] { color: var(--ink-warning);
}
.meta-issues-tab__icon--info[data-v-40f0b536] { color: var(--ink-info);
}
.meta-issues-tab__page[data-v-40f0b536] {
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.meta-issues-tab__manual-origin[data-v-40f0b536] {
  flex-shrink: 0;
}
.meta-issues-tab__message[data-v-40f0b536] {
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  /* 화면을 벗어나면 가로 스크롤 대신 다음 줄로 넘어가게 한다 */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.meta-issues-tab__actions[data-v-40f0b536] {
  display: flex;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  /* 제목과 한 줄일 땐 우측 정렬(제목이 grow 로 이미 밀지만 명시), 아랫줄로 내려가면
     오른쪽에 붙는다. 초협소 폭에선 아이콘 묶음이 내부에서 줄바꿈. */
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 심각도 콤보: 3개뿐이라 체크마크(선택 마커) 불필요 → 마커 영역 숨겨 아이콘+라벨만 남긴다. */
.meta-issues-tab__severity-select[data-v-40f0b536] .multi-select-option-marker {
  display: none;
}

/* 일괄 심각도 지정: MultiSelect 는 disabled prop 이 없어 wrapper 로 비활성 표시
   (선택 0건/처리 중일 때 — 해결/제거 버튼의 disabled 와 시각 일관). */
.meta-issues-tab__bulk-severity[data-v-40f0b536] {
  display: inline-flex;
}
.meta-issues-tab__bulk-severity--disabled[data-v-40f0b536] {
  opacity: 0.5;
  pointer-events: none;
}

/* 헤더 액션 영역 */
.meta-issues-tab__header-actions[data-v-40f0b536] {
  display: flex;
  gap: var(--gap-glyph);
}

/* 필터 바 */
.meta-issues-tab__filter-bar[data-v-40f0b536] {
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}

/* 그룹 헤더 */
.meta-issues-tab__group-header[data-v-40f0b536] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-bottom: var(--line-strong);
  cursor: pointer;
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.meta-issues-tab__group-header[data-v-40f0b536]:hover { background: var(--bg-hover);
}
.meta-issues-tab__group-header--error[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-danger);
}
.meta-issues-tab__group-header--warning[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-warning);
}
.meta-issues-tab__group-header--info[data-v-40f0b536] { border-left: var(--line-accent) solid var(--ink-info);
}
.meta-issues-tab__group-toggle[data-v-40f0b536] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  width: 12px;
}
.meta-issues-tab__group-title[data-v-40f0b536] {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-issues-tab__group-count[data-v-40f0b536] {
  color: var(--ink-muted);
  font-weight: normal;
  font-size: var(--size-meta);
  flex-shrink: 0;
}
.meta-issues-tab__group-spacer[data-v-40f0b536] {
  flex: 1;
}
.meta-issues-tab__item--indented[data-v-40f0b536] {
  padding-left: var(--space-wide);
}

/* 참조 걸기 모드 — 이때만 본문 글자를 끌어 선택할 수 있다.
   평소엔 .content-node 가 user-select:none 이라(행 범위 드래그 UI) 글자를 못 고른다. (IVE #1040) */
.meta-content-tree--ref-pick[data-v-3603a346] .content-node,
.meta-content-tree--ref-pick[data-v-3603a346] .content-node__text {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* 모드 안내 바 — 무엇을 해야 하는지 알려준다 */
.content-tree__ref-pick-bar[data-v-3603a346] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-brand-soft);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.content-tree__ref-pick-icon[data-v-3603a346] { color: var(--ink-brand);
}
.content-tree__ref-pick-text[data-v-3603a346] {
  flex: 1 1 auto;
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.mobile-proxy-input[data-v-3603a346] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}
.meta-content-tree[data-v-3603a346] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  outline: none;
}

/* 검색 + 필터 바 */
.content-tree__toolbar[data-v-3603a346] {
  flex-shrink: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  position: relative;
}
.content-tree__toolbar-row[data-v-3603a346] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.content-tree__toolbar-row > .content-tree__search[data-v-3603a346] {
  flex: 1;
  min-width: 0;
}
.content-tree__selection-nav[data-v-3603a346] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}


/* 활성/제거됨 탭 */
.content-tree__tabs[data-v-3603a346] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: var(--line-strong);
  padding: var(--pad-control);
  margin-top: var(--gap-glyph);
  /* ⛔ 자식이 넘쳐도 잘리지 않게 — 아래 :deep 규칙과 한 쌍이다. */
  min-width: 0;
}

/* ⛔ **폭이 좁아지면 오른쪽 탭부터 사라지던 것**(사용자 지적 2026-08-11).
   TabNav 는 스스로 `flex-wrap: wrap` 이라 좁아지면 줄바꿈하게 만들어져 있는데,
   자기 몸에 `flex-shrink: 0` 이 박혀 있어 **이 가로 flex 안에서는 줄지 않는다** —
   그래서 wrap 이 한 번도 안 걸리고 그냥 넘쳐 잘렸다. 여기서 줄어들 수 있게 풀어 주면
   설계대로 두 줄로 접힌다(탭 바가 한 줄 높아질 뿐 아무 탭도 안 숨는다). */
.content-tree__tabs[data-v-3603a346] .tab-nav {
  flex: 1 1 auto;
  min-width: 0;
  /* ⛔ 선은 **감싼 칸이 하나만** 긋는다 — TabNav 도 제 밑줄을 그어 1px 이 두 줄로 겹쳐
     굵은 선처럼 보였다(실측 2026-08-22: 349·350 두 줄). */
  border-bottom: none;
}
.content-tree__tab-action[data-v-3603a346] {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  border: none;
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.content-tree__tab-action--remove[data-v-3603a346] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
}
.content-tree__tab-action--remove[data-v-3603a346]:hover {
  background: var(--bg-danger-soft);
}
.content-tree__tab-action--restore[data-v-3603a346] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
}
.content-tree__tab-action--restore[data-v-3603a346]:hover {
  background: var(--bg-success-soft);
  filter: brightness(1.2);
}

/* 트리 스크롤 영역 */
.content-tree__body[data-v-3603a346] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-tight) var(--space-snug);
  outline: none;
  position: relative;
}

/* 다중 선택 플로팅 액션 버튼 */
.floating-actions[data-v-3603a346] {
  position: absolute;
  left: 60%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-glyph);
  padding: var(--space-tight);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.floating-actions__btn[data-v-3603a346] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control-md);
  height: var(--h-control-md);
  border: none;
  background: none;
  color: var(--ink-secondary);
  border-radius: var(--radius-badge);
  cursor: pointer;
  font-size: var(--size-meta);
  transition: background var(--motion-base), color var(--motion-base);
}
.floating-actions__btn[data-v-3603a346]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.floating-actions__btn--danger[data-v-3603a346]:hover {
  background: var(--bg-danger);
  color: var(--ink-on-solid);
}

/* 행 사이 삽입 인디케이터 */
.insert-indicator[data-v-3603a346] {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
  transform: translateY(-50%);
}
.insert-indicator__line[data-v-3603a346] {
  flex: 1;
  /* dimensions-ignore — 1px hairline 구분선, 토큰 무관 고정 */
  height: 1px;
  background: var(--bg-brand-vivid);
  opacity: 0.3;
}
.insert-indicator__btn[data-v-3603a346] {
  pointer-events: auto;
  flex-shrink: 0;
  /* dimensions-ignore — 행 사이 삽입 인디케이터 점, 시각적 "마우스로 가리키는 표시점" 크기 — 토큰 스케일 밖 */
  width: 13px;
  /* dimensions-ignore — 위와 동일 */
  height: 13px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.insert-indicator__btn[data-v-3603a346]:hover {
  opacity: 0.8;
  transform: scale(1.15);
}
.insert-indicator__btn--table[data-v-3603a346] {
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
}


/* 테이블 그리드 피커 (툴바 + 인디케이터 공용) */
.edit-toolbar__table-wrap[data-v-3603a346] {
  position: relative;
  display: flex;
}
.grid-picker[data-v-3603a346] {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--gap-glyph);
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-snug);
  box-shadow: var(--shadow-md);
  z-index: var(--z-pane-control);
  pointer-events: auto;
  white-space: nowrap;
}
.grid-picker--above[data-v-3603a346] {
  bottom: 100%;
  top: auto;
  margin-top: 0;
  margin-bottom: var(--gap-glyph);
}
.grid-picker__label[data-v-3603a346] {
  text-align: center;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
  line-height: var(--line-none);
}
.grid-picker__grid[data-v-3603a346] {
  display: grid;
  grid-template-columns: repeat(6, 14px);
  grid-template-rows: repeat(6, 14px);
  gap: var(--gap-glyph);
}
.grid-picker__cell[data-v-3603a346] {
  /* dimensions-ignore — 테이블 그리드 피커 셀(6×6 격자), 트리거 박스 안에 들어가는 미세 정사각 */
  width: 14px;
  /* dimensions-ignore — 위와 동일 */
  height: 14px;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-page);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.grid-picker__cell--active[data-v-3603a346] {
  background: var(--bg-brand-vivid);
  border-color: var(--ink-brand);
  opacity: 0.7;
}
.grid-picker__cell[data-v-3603a346]:hover {
  border-color: var(--ink-brand);
}
.fab-fade-enter-active[data-v-3603a346],
.fab-fade-leave-active[data-v-3603a346] {
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.fab-fade-enter-from[data-v-3603a346],
.fab-fade-leave-to[data-v-3603a346] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* 빈 상태 */
.content-tree__empty[data-v-3603a346] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide) var(--space-roomy);
  gap: var(--gap-inline);
  color: var(--ink-muted);
}
.content-tree__empty-icon[data-v-3603a346] {
  font-size: var(--icon-lead);
}
.content-tree__empty p[data-v-3603a346] {
  margin: 0;
  font-size: var(--size-label);
}

/* 로딩 */
.content-tree__loading[data-v-3603a346] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-wide);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.content-tree__loading-more[data-v-3603a346] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  color: var(--ink-muted);
  font-size: var(--size-meta);
}

/* 하단 페이지 정보 */
.content-tree__footer[data-v-3603a346] {
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-cozy);
  border-top: var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.content-tree__selection-info[data-v-3603a346] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-tree__footer-sep[data-v-3603a346] {
  flex-shrink: 0;
  margin: 0 var(--gap-inline);
  /* 구분점은 '연한 글자'다 — 테두리색을 쓰면 검정 배경에서 1.5:1 로 안 보인다 */
  color: var(--ink-muted);
}
.content-tree__page-info[data-v-3603a346] {
  flex-shrink: 0;
  white-space: nowrap;
}
.content-tree__body--dragging[data-v-3603a346] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 규칙 탭 */
.content-tree__rules-panel[data-v-3603a346] {
  padding: 0 var(--space-snug);
  overflow: hidden;
}

/* ListBody 가 패널 높이를 꽉 채우도록 — 패널 자체가 높이 제약을 가짐 */
.content-tree__rules-panel .rules-list[data-v-3603a346] {
  height: 100%;
}
.rules-filter-bar[data-v-3603a346] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  position: relative;
}
.rules-filter-select[data-v-3603a346] {
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.rules-desc[data-v-3603a346] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.rules-search-mark[data-v-3603a346] {
  background: var(--bg-mark);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight); /* css-ignore — 텍스트 하이라이트 미세 패딩 */
}
.rules-delete-btn[data-v-3603a346] {
  background: none;
  border: none;
  padding: var(--space-tight);
  cursor: pointer;
  color: var(--ink-muted);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  transition: color var(--motion-fast);
}
.rules-delete-btn[data-v-3603a346]:hover {
  color: var(--ink-danger-hover);
}
.rules-actions[data-v-3603a346] {
  display: flex;
  gap: var(--gap-glyph);
  align-items: center;
}
.scope-target[data-v-3603a346] {
  margin-left: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 모바일 선택 모드 하단 바 */
.content-tree__selection-bar[data-v-3603a346] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  border-top: var(--line-strong);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  touch-action: manipulation;
}
.selection-bar__count[data-v-3603a346] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  flex: 1;
}
.selection-bar__count i[data-v-3603a346] { font-size: var(--icon-label);
}
.selection-bar__btn[data-v-3603a346] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  border: none;
  background: var(--bg-active);
  color: var(--ink-on-solid);
  border-radius: var(--radius-badge);
  padding: var(--space-tight) var(--space-snug);
  font-size: var(--size-meta);
  cursor: pointer;
}
.selection-bar__btn[data-v-3603a346]:active { background: var(--bg-subtle);
}
.selection-bar__cancel[data-v-3603a346] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  border: none;
  background: var(--bg-active);
  color: var(--ink-on-solid);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--size-label);
}
.selection-bar__cancel[data-v-3603a346]:active { background: var(--bg-subtle);
}

/* 편집 툴바 — 기본 (데스크톱) */
.content-tree__edit-toolbar[data-v-3603a346] {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  touch-action: manipulation;
}

/* 툴바 아이콘 글리프 — 표준화 전 크기(0.75rem)로 복원. AppButton sm 기본(≈0.89rem)은 고밀도 툴바에선 과대 */
.content-tree__edit-toolbar[data-v-3603a346] .app-btn--icon-only i {
  font-size: var(--size-meta);
}

/* 편집 툴바 외부 래퍼 — 스크롤 화살표 컨테이너 */
/* ⛔ **문맥에 안 맞는 단추는 감춘다**(사용자 지시 2026-08-17 「현재 커서가 위치한 곳에 연관된
   것만 보이고 나머지는 숨김」). 흐리게만 두면 자리는 그대로 먹어, 좁은 판에서 툴바가 두 줄이
   되고 정작 볼 내용이 밀린다.
   ⚠️ 단추가 사라지면 **구분선만 남는다** — 조건을 구분선마다 손으로 다는 대신 CSS 로 접는다.
      ① 줄 맨 앞/맨 뒤의 구분선 ② 구분선끼리 붙은 것. 이러면 어느 조합에서도 군더더기가 없다. */
.edit-toolbar__sep[data-v-3603a346]:first-child,
.edit-toolbar__sep[data-v-3603a346]:last-child,
.edit-toolbar__sep + .edit-toolbar__sep[data-v-3603a346] {
  display: none;
}
.content-tree__edit-toolbar-outer[data-v-3603a346] {
  position: relative;
  flex-shrink: 0;
}

/* 좌우 스크롤 화살표 — 기본은 숨김, JS가 has-left-hint/has-right-hint 클래스 부착 시 표시 */
.edit-toolbar__scroll-hint[data-v-3603a346] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: var(--line-strong);
  padding: 0;
  margin: 0;
  background: var(--bg-float);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-none);
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow-md);
}
.edit-toolbar__scroll-hint--left[data-v-3603a346] { left: 0;
}
.edit-toolbar__scroll-hint--right[data-v-3603a346] { right: 0;
}
.content-tree__edit-toolbar-outer.has-left-hint .edit-toolbar__scroll-hint--left[data-v-3603a346] { display: flex;
}
.content-tree__edit-toolbar-outer.has-right-hint .edit-toolbar__scroll-hint--right[data-v-3603a346] { display: flex;
}

/* 모바일: 한 줄 스크롤 */
@media (max-width: 768px) {
.content-tree__edit-toolbar[data-v-3603a346] {
    flex-wrap: nowrap;
    border-bottom: none;
    padding: var(--space-tight) var(--space-cozy);
    min-width: -moz-max-content;
    min-width: max-content;
}
.content-tree__edit-toolbar-wrapper[data-v-3603a346] {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: var(--line-strong);
    background: var(--bg-page);
    touch-action: pan-x;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.content-tree__edit-toolbar-wrapper[data-v-3603a346]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
}
.edit-toolbar__sep--table[data-v-3603a346] {
  width: 1px;
  height: var(--space-band);
  margin: 0 var(--gap-glyph);
  background: var(--line-color);
}
.edit-toolbar__table-group[data-v-3603a346] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.edit-toolbar__btn--table[data-v-3603a346] {
  width: auto;
  padding: 0 var(--space-tight);
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
}
.edit-toolbar__btn--table small[data-v-3603a346] {
  font-size: var(--size-meta);
  opacity: 0.8;
}

/* 테이블 편집 버튼 베이스 — 아이콘+단위 라벨 컴팩트 버튼 (AppButton 미적용 잔여 버튼) */
.edit-toolbar__btn[data-v-3603a346] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  border: none;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-meta);
  border-radius: var(--radius-badge);
  padding: 0;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.edit-toolbar__btn[data-v-3603a346]:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.edit-toolbar__btn[data-v-3603a346]:disabled {
  opacity: 0.3;
  cursor: default;
}
.edit-toolbar__btn--with-label[data-v-3603a346] {
  width: auto;
  gap: var(--gap-glyph); /* css-ignore — 아이콘과 단위 라벨 미세 간격 */
  padding: 0 var(--space-tight);
}
.edit-toolbar__label[data-v-3603a346] {
  font-size: var(--size-meta);
  line-height: var(--line-none);
}
.edit-toolbar__sep[data-v-3603a346] {
  width: 1px;
  height: var(--space-roomy);
  background: var(--line-color);
  margin: 0 var(--gap-glyph);
}

/* 협업 바 */
.content-tree__collab-bar[data-v-3603a346] {
  margin-left: auto;
}

/* 태그 필터 split-button — 토글(메인) + 드롭다운(픽커) */
.tag-filter-group[data-v-3603a346] {
  display: inline-flex;
  align-items: stretch;
  gap: var(--gap-glyph); /* dimensions-ignore: 분리선 두께 */
}
.tag-filter-group[data-v-3603a346] .tag-filter-group__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tag-filter-group[data-v-3603a346] .tag-filter-group__dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: var(--space-tight);
  padding-right: var(--space-tight);
}


/* 카운트 뱃지(컴팩트) */
/* 글자와의 간격은 AppButton 이 준다 */
[data-v-3603a346] .tag-filter-button-count {
  padding: 0 var(--space-tight);
  min-width: var(--space-roomy);
  font-size: var(--size-meta);
  line-height: var(--line-none);
}



.catalog-view-page[data-v-67443723] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
}

/* back bar */
.back-bar[data-v-67443723] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-group);
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.back-link[data-v-67443723] {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--size-lead);
}
.back-link[data-v-67443723]:hover { color: var(--ink-brand);
}
.state-msg[data-v-67443723] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}

/* meta editor 헤더 모방 */
.meta-header[data-v-67443723] {
  flex: 0 0 auto;
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.meta-header__product-row[data-v-67443723] {
  display: flex;
  align-items: center;
  justify-content: center;        /* 메타편집기 헤더와 동일한 가운데 정렬 */
  gap: var(--gap-inline) var(--gap-inline);
  flex-wrap: wrap;
}
.meta-header__product[data-v-67443723] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.meta-header__doctype[data-v-67443723] {
  display: inline-flex; align-items: center;
  font-size: var(--size-meta); color: var(--ink-info);
  background: var(--bg-info-soft);
  padding: var(--space-tight) var(--space-cozy); border-radius: 3px;
  font-weight: var(--weight-title);
}
.meta-header__details[data-v-67443723] {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-stack); font-size: var(--size-body); color: var(--ink-secondary);
  flex-wrap: wrap;
}
.meta-header__left[data-v-67443723] { display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.meta-header__company[data-v-67443723] { font-weight: var(--weight-title); color: var(--ink-primary);
}
.meta-header__file-info[data-v-67443723] {
  font-family: var(--font-mono);
  font-size: var(--size-label); color: var(--ink-secondary);
}

/* 추출 상태바 (TodoWorkTypeMeta 의 .extraction-status* 비주얼 그대로 — 향후 SSOT 추출 시 컴포넌트화 예정) */
.extraction-status[data-v-67443723] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  padding: var(--space-cozy) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.extraction-status__icon[data-v-67443723] {
  font-size: var(--icon-label);
  color: var(--ink-success);
  flex-shrink: 0;
}
.extraction-status__text[data-v-67443723] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex: 1;
  min-width: 0;
}
.extraction-status__text strong[data-v-67443723] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
/* 스타일 토글 자리 — 모양은 공통 부품(MetaStyleToggle)이 갖는다. */
.extraction-status__style-toggle[data-v-67443723] {
  margin-left: auto;
}

/* split pane */
.vertical-split-container[data-v-67443723] {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  width: 100%;
}
/* 드래그 중 PDF iframe 이벤트 가로채기 방지 — z-index 규칙은 tokens.css 의 --z-resize-overlay 주석 참고. */
.resize-overlay[data-v-67443723] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.left-pane[data-v-67443723] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-iframe[data-v-67443723] {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg-page);
}
.empty[data-v-67443723] {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--ink-muted);
  gap: var(--gap-inline);
}
.meta-left-tabs__content[data-v-67443723] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-pane[data-v-67443723] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-pane > .meta-content-tree[data-v-67443723] {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* swapped: 좌측이 우측이 되고 우측이 좌측이 됨 (CSS order 반전) */
.vertical-split-container.swapped .left-pane[data-v-67443723] { order: 3;
}
/* 스왑 시 분리대 순서 — VerticalSplitter 가 child 라 :deep() 으로 child 요소 지정 */
.vertical-split-container.swapped[data-v-67443723] .vertical-split-resizer { order: 2;
}
.vertical-split-container.swapped .right-pane[data-v-67443723] { order: 1;
}

/* 분리대 자체 스타일은 VerticalSplitter (scoped) 가 보유 */

/* ──────────────────────────────────────────────────────────────────
   모바일 레이아웃 — TodoWorkTypeMeta 의 .meta-mobile-* 패턴과 동일.
   헤더/추출상태바는 탭 위에 항상 노출, 본문은 탭으로 전환.
   ────────────────────────────────────────────────────────────────── */
.catalog-mobile-layout[data-v-67443723] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.catalog-mobile-content[data-v-67443723] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.catalog-mobile-content > .pdf-iframe[data-v-67443723],
.catalog-mobile-content > .empty[data-v-67443723] {
  flex: 1 1 auto;
  min-height: 0;
}
/* 모바일에서 헤더 컴팩트 */
.catalog-mobile-layout .meta-header[data-v-67443723] {
  padding: var(--space-snug) var(--space-cozy);
}
.catalog-mobile-layout .meta-header__product[data-v-67443723] {
  font-size: var(--size-body);
}
.catalog-mobile-layout .meta-header__file-info[data-v-67443723] {
  display: none;
}

.sort-control[data-v-d254a71a] {
  display: inline-flex;
  align-items: center;
}

/* 필드 선택 — 세그먼트 왼쪽: AppSelect 컨트롤 박스에 세그먼트 모양만 덮어쓴다. */
.sort-control__field[data-v-d254a71a] .multi-select-control {
  border-radius: var(--radius-badge) 0 0 var(--radius-badge);
  border-right: none;
}

/* 방향 토글 — 세그먼트 오른쪽: AppButton(secondary, icon-only) 위에 모양만 덮어쓴다. */
.sort-control .sort-control__order[data-v-d254a71a] {
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}

/* 세그먼트 분리선은 오른쪽 버튼의 왼쪽 border 하나뿐(왼쪽 컨트롤은 border-right: none).
   왼쪽 필드에 호버하면 그 분리선도 함께 주제색으로 바뀌어야 세그먼트가 한 덩어리로 보인다. */
.sort-control__field:hover + .sort-control__order[data-v-d254a71a] {
  border-left-color: var(--ink-brand);
}

.list-view[data-v-90efa41a] {
  /* 본문이 스크롤바에 내주는 폭 — 스크립트가 실측해 인라인으로 덮어쓴다(기본 0). */
  --list-view-gutter: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.list-view__toolbar[data-v-90efa41a] {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* 본문이 스크롤바에 내준 폭만큼 이 줄들도 오른쪽을 비운다 — 그래야 검색줄·건수줄의
   오른쪽 끝과 목록(카드) 오른쪽 끝이 한 선에 선다. 폭은 스크립트가 실측해 넣는다. */
.list-view__controls-wrapper[data-v-90efa41a],
.list-view__pagination[data-v-90efa41a] {
  padding-right: var(--list-view-gutter);
}
.list-view__controls-wrapper[data-v-90efa41a] {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

/* 스크롤을 따라가는 동안은 transition 없이 1:1 이동(멈추면 그 자리). 수동 토글 같은
   이산 이동일 때만 transition 으로 마무리 (useScrollLinkedHide 의 animating 상태). */
.list-view__controls-wrapper--animate[data-v-90efa41a] {
  transition: margin-top var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.list-view__controls-wrapper--animate[data-v-90efa41a] {
    transition: none;
}
}

/* 조회 영역 — 테두리·배경으로 감싸지 않는다.
   공통 목록 화면(ListScreen/ListFilterPanel)은 조회 컨트롤을 배경 위에 그대로 얹어 두는데,
   여기만 라운딩 박스로 감싸고 있어 화면끼리 이질감이 있었다(사용자 지시 2026-08-16).
   좌우 여백도 없앤다 — 있으면 검색창이 아래 목록 상자보다 안쪽으로 들여써져 어긋나 보인다. */
.list-view__toolbar-main[data-v-90efa41a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  padding: var(--space-snug) 0;
}
.list-view__toolbar-left[data-v-90efa41a] {
  flex: 1 1 auto;
  min-width: 0;
}
.list-view__toolbar-right[data-v-90efa41a] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.list-view__query-bar[data-v-90efa41a] {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
}
.list-view__query-main[data-v-90efa41a] {
  flex: 1 1 auto;
}

/* ⛔ 검색창 생김새는 **AppSearchInput 과 같아야 한다.** 이 화면(회사·상품·문서·ToDo)만
   자체 입력창을 쓰는데(useAutocomplete 훅이 네이티브 input ref 를 직접 잡아야 해서),
   값이 갈라져 화면을 옮길 때마다 검색창 모양이 달랐다
   (실측 2026-08-22: 12px·라운드 0·테두리 없음 vs 표준 13px·라운드 6px·테두리 1px).
   값을 손으로 맞춘 상태이므로 AppSearchInput 을 고치면 여기도 함께 고칠 것. */
.list-view__autocomplete-wrapper[data-v-90efa41a] {
  display: flex;
  align-items: stretch;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  transition: border-color var(--motion-fast);
}
.list-view__autocomplete-wrapper[data-v-90efa41a]:hover,
.list-view__autocomplete-wrapper[data-v-90efa41a]:focus-within {
  border-color: var(--ink-brand);
}
.list-view__autocomplete-input[data-v-90efa41a] {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  padding: var(--pad-control);
  border: none;
  background: transparent;
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-label);
  height: var(--h-control-md);
  outline: none;
}
.list-view__autocomplete-input[data-v-90efa41a]::-moz-placeholder {
  color: var(--ink-muted);
}
.list-view__autocomplete-input[data-v-90efa41a]::placeholder {
  color: var(--ink-muted);
}
.list-view__autocomplete-clear[data-v-90efa41a] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--space-snug);
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-meta);
  height: var(--h-control-md);
  box-sizing: border-box;
  border-left: var(--line-strong);
}
.list-view__autocomplete-clear[data-v-90efa41a]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}
.list-view__autocomplete-search[data-v-90efa41a] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--pad-control);
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-meta);
   /* 입력창 높이에 맞추어 버튼 크기를 고정 */
  height: var(--h-control-md);
  box-sizing: border-box;
  border-left: var(--line-strong);
}
.list-view__autocomplete-search[data-v-90efa41a]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}

/* 돋보기 / 클리어 아이콘 크기를 약간 줄여서 높이에 맞게 정렬 */
.list-view__autocomplete-clear i[data-v-90efa41a],
.list-view__autocomplete-search i[data-v-90efa41a] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
}
.list-view__body[data-v-90efa41a] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 목록 끝에서 더 끌어도 문서로 넘기지 않는다 — 넘기면 모바일에서 화면 전체가 밀린다. */
  overscroll-behavior: contain;
  /* 목록 상자도 테두리로 감싸지 않는다 — 조회 영역과 같은 이유(사용자 지시 2026-08-16).
     ① 표준 목록 화면(ListScreen/ListBody)의 본문에는 테두리·배경이 없다
     ② 여기 행은 각자 테두리를 가진 카드라 바깥 테두리는 테두리 안의 테두리가 된다
     ③ 배경(var(--bg-page))은 뒤에 깔린 색과 이미 같아(라이트 #fff / 다크 #000) 지워도 대비가 안 변한다 */
  /* Firefox용 스크롤바 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
  position: relative;
  /* 스크롤바가 border-radius 내부에 위치하도록 */
  scrollbar-gutter: stable;
  /* 사파리에서 스크롤바가 border-radius를 덮지 않도록 */
  -webkit-overflow-scrolling: touch;
}
.list-view__body-inner[data-v-90efa41a] {
  min-height: 100%;
  padding-bottom: var(--space-tight);
}

/* Webkit 브라우저용 스크롤바 스타일 - 얇고 둥근 핸들 */
.list-view__body[data-v-90efa41a]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  -webkit-appearance: none;
  display: block;
}
.list-view__body[data-v-90efa41a]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  -webkit-box-shadow: none;
  /* 스크롤바 트랙이 border-radius 내부에 위치하도록 margin 추가 */
  margin: var(--gap-glyph) 0;
}
.list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w) solid transparent;
  -webkit-box-shadow: none;
  /* 스크롤바 thumb가 border-radius 내부에 위치하도록 */
  background-clip: padding-box;
  /* 스크롤바 thumb가 border-radius 내부에 위치하도록 margin 추가 */
  margin-right: var(--gap-glyph);
}
.list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}

/* 사파리에서 스크롤바 corner 숨기기 (border-radius를 덮지 않도록) */
.list-view__body[data-v-90efa41a]::-webkit-scrollbar-corner {
  background: transparent;
  border-radius: 0 var(--radius-control) 0 0;
}

/* 다크 테마에서 스크롤바 더 밝게 */
html[data-theme='dark'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb,
body[data-theme='dark'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='dark'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='dark'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-track {
  background: transparent;
  -webkit-box-shadow: none;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  margin: var(--gap-glyph) 0;
}

/* 라이트 테마에서 스크롤바 더 어둡게 (명확하게 보이도록) */
html[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb,
body[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:hover,
body[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:active,
body[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-thumb:active {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='light'] .list-view__body[data-v-90efa41a]::-webkit-scrollbar-track {
  background: transparent;
  -webkit-box-shadow: none;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  margin: var(--gap-glyph) 0;
}
.list-view__content[data-v-90efa41a] {
  /* 위아래 여백만 둔다 — 좌우로 밀면 카드가 검색창·헤더보다 안쪽으로 들여써져 세로선이 어긋난다.
     (감싸던 상자가 없어졌으므로 좌우 여백을 만들어 줄 테두리도 없다) */
  padding: var(--space-roomy) 0;
}
.list-view__state[data-v-90efa41a] {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-band) var(--space-roomy);
  color: var(--ink-secondary);
  text-align: center;
}
.list-view__spinner[data-v-90efa41a] {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  border-top-color: var(--ink-brand);
  border-right-color: var(--ink-brand);
  animation: list-view-spin-90efa41a 0.8s linear infinite;
}
.list-view__state-text[data-v-90efa41a] {
  font-size: var(--size-body);
}

/* 무한 스크롤 시, 기존 데이터는 그대로 유지하면서
   하단에만 잠깐 표시되는 로딩 인디케이터 영역 */
.list-view__infinite-loading[data-v-90efa41a] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-snug) 0;
}
.list-view__infinite-loading--top[data-v-90efa41a] {
  margin-bottom: var(--gap-inline);
}
.list-view__infinite-loading--bottom[data-v-90efa41a] {
  margin-top: var(--gap-inline);
}
.list-view__pagination[data-v-90efa41a] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.list-view__pagination[data-v-90efa41a]:has(.list-view__pagination-single) {
  justify-content: center;
}
.list-view__pagination--compact[data-v-90efa41a] {
  gap: 0;
}
.list-view__pagination-left[data-v-90efa41a],
.list-view__pagination-right[data-v-90efa41a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.list-view__pagination-single[data-v-90efa41a] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-view__icon-btn[data-v-90efa41a] {
  border: none;
  background: transparent;
  padding: 0 var(--space-snug);
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: var(--icon-marker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
}
.list-view__icon-btn[data-v-90efa41a]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}
.list-view__detail-filter-control[data-v-90efa41a] {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.list-view__detail-filter-menu[data-v-90efa41a] {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin-top: var(--gap-glyph);
  min-width: 150px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  z-index: 30;
  box-shadow: var(--shadow-float);
  list-style: none;
  padding: var(--space-tight) 0;
}
.list-view__detail-filter-menu--align-right[data-v-90efa41a] {
  left: auto;
  right: 0;
}
.list-view__detail-filter-menu[data-v-90efa41a] {
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
}
.list-view__detail-filter-menu[data-v-90efa41a]::-webkit-scrollbar {
  width: 6px;
}
.list-view__detail-filter-menu[data-v-90efa41a]::-webkit-scrollbar-track {
  background: transparent;
}
.list-view__detail-filter-menu[data-v-90efa41a]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
}
.list-view__detail-filter-menu-item[data-v-90efa41a] {
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-meta);
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-primary);
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.list-view__detail-filter-menu-item[data-v-90efa41a]:hover:not(.list-view__detail-filter-menu-item--disabled):not(.list-view__detail-filter-menu-item--separator) {
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
}
.list-view__detail-filter-menu-item--disabled[data-v-90efa41a] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--ink-secondary);
}
.list-view__detail-filter-menu-item--separator[data-v-90efa41a] {
  padding: var(--space-tight) 0;
  cursor: default;
}
.list-view__detail-filter-menu-item--separator hr[data-v-90efa41a] {
  margin: 0;
  border: none;
  border-top: var(--line-strong);
}
.list-view__detail-filter-menu-item--clear[data-v-90efa41a] {
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}
.list-view__detail-filters[data-v-90efa41a] {
  /* 항상 키워드/상세/정렬 아래 새로운 라인에서 시작하도록 전체 너비 차지 */
  flex: 0 0 100%;
  margin-top: 0;
  /* 감싸던 상자를 없앴으므로 구분선(border-top)도 함께 뺀다 — 상자 없이 선만 남으면
     허공에 줄 하나가 그어진 것으로 보인다. 간격만으로 줄을 나눈다(ListFilterPanel 과 동일). */
  padding-top: var(--space-snug);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  align-items: flex-start;
}
.list-view__sort-control[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  position: relative;
}
@media (max-width: 768px) {
.list-view[data-v-90efa41a] {
    gap: var(--gap-glyph);
}

  /* iOS 자동 확대 방지는 JS(viewport 동적 변경)로 처리하므로 font-size 오버라이드 제거 */
.list-view__toolbar-main[data-v-90efa41a] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.list-view__query-bar[data-v-90efa41a] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.list-view__toolbar-right[data-v-90efa41a] {
    justify-content: center;
    gap: var(--gap-inline);
}
.list-view__sort-control[data-v-90efa41a] {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    row-gap: 0;
    flex: 0 0 auto;
}
}
.list-view__page-info[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.list-view__page-current[data-v-90efa41a] {
  font-weight: var(--weight-title);
}
.list-view__page-total[data-v-90efa41a] {
  opacity: 0.8;
}
.list-view__page-jump[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.list-view__page-input[data-v-90efa41a] {
  width: 3rem;
  padding: var(--space-tight) var(--space-snug);
  font-size: var(--size-label);
  text-align: center;
  height: var(--h-control-sm);
  box-sizing: border-box;
}
.list-view__page-separator[data-v-90efa41a] {
  opacity: 0.8;
}
.list-view__page-size-label[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.list-view__page-size-select[data-v-90efa41a] {
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  background: var(--bg-field);
  color: var(--ink-primary);
  font-size: var(--size-label);
}
.list-view__total[data-v-90efa41a] {
  white-space: nowrap;
}
.list-view__total-toggle[data-v-90efa41a] {
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-body);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.list-view__total-main[data-v-90efa41a] {
  white-space: nowrap;
}
.list-view__total-summary[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.list-view__total-summary-item[data-v-90efa41a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
}
@keyframes list-view-spin-90efa41a {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.list-view__toolbar-main[data-v-90efa41a] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.list-view__query-bar[data-v-90efa41a] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.list-view__toolbar-right[data-v-90efa41a] {
    justify-content: center;
    gap: var(--gap-inline);
}
.list-view__sort-control[data-v-90efa41a] {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    row-gap: 0;
    flex: 0 0 auto;
}
.list-view__total-toggle[data-v-90efa41a] {
    cursor: pointer;
    padding: var(--space-tight) var(--space-cozy);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: var(--line-strong);
    justify-content: center;
    width: 100%;
}
.list-view__pagination-left[data-v-90efa41a] {
    transition: max-height var(--motion-base) ease, opacity var(--motion-base) ease, transform var(--motion-base) ease;
    transform-origin: top;
}
.list-view__pagination-left--collapsed[data-v-90efa41a] {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
}
.list-view__pagination[data-v-90efa41a] {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.list-view__pagination-left[data-v-90efa41a],
  .list-view__pagination-right[data-v-90efa41a] {
    justify-content: center;
    width: 100%;
}
.list-view__pagination-single[data-v-90efa41a] {
    justify-content: center;
    width: 100%;
}

  /* 모바일에서는 페이지 네비게이션이 먼저, 총건수 메시지가 그 아래에 오도록 순서 조정 */
.list-view__pagination-left[data-v-90efa41a] {
    order: 1;
}
.list-view__pagination-right[data-v-90efa41a] {
    order: 2;
}
.list-view__content[data-v-90efa41a] {
    padding: var(--space-snug) 0;
}
.list-view__state[data-v-90efa41a] {
    padding: var(--space-roomy) var(--space-snug);
}
}
@media (max-width: 480px) {
.list-view__content[data-v-90efa41a] {
    padding: var(--space-tight) 0;
}
.list-view__state[data-v-90efa41a] {
    padding: var(--space-cozy) var(--space-tight);
}
}

.cron-fields[data-v-7c5837ec] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.cron-fields__field[data-v-7c5837ec] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.cron-fields__field label[data-v-7c5837ec] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.cron-fields__time[data-v-7c5837ec] { display: flex; align-items: center; gap: var(--gap-inline);
}
.cron-fields__time-input[data-v-7c5837ec] { flex: 1; text-align: center;
}
.cron-fields__sep[data-v-7c5837ec] { font-size: var(--size-label); color: var(--ink-secondary);
}
.cron-fields__help[data-v-7c5837ec] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.cron-fields__preview[data-v-7c5837ec] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.scraper-request-form-group[data-v-1944c368] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.scraper-request-form-group label[data-v-1944c368] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.scraper-request-textarea[data-v-1944c368] {
  width: 100%;
  min-height: 100px;
}

/* 본문 높이를 못 박는다 — 이름이 길든 짧든, 아이콘이 있든 없든 같은 크기. */
.bulk-progress[data-v-44017251] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-height: 4.5rem;
}
.bulk-progress__head[data-v-44017251] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.bulk-progress__count[data-v-44017251] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.bulk-progress__pct[data-v-44017251] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.bulk-progress__track[data-v-44017251] {
  height: 8px;
  background: var(--bg-field);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: var(--line-strong);
}
.bulk-progress__fill[data-v-44017251] {
  height: 100%;
  background: var(--bg-brand-vivid);
  width: 0%;
  transition: width var(--motion-slow);
  border-radius: var(--radius-pill);
}
.bulk-progress__now[data-v-44017251] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;          /* 자식 말줄임이 먹으려면 필요 */
  height: 1.25rem;   /* 한 줄 고정 — 이름이 없거나 길어도 같은 높이 */
}
.bulk-progress__icon[data-v-44017251] {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

/* ⛔ 한 줄 고정 + 말줄임 — 이름 길이로 모달이 흔들리지 않게 하는 핵심 */
.bulk-progress__name[data-v-44017251] {
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-body[data-v-2d14c0bd] {
  /* 가장 높은 조합(매월 = 방식+일자+시각+안내) 기준. 실제로 띄워 재서 정한 값이다 —
     '없음' 상태 444px, '매월' 상태 489px 였으므로 그 차이(45px)를 흡수하도록 잡았다. */
  min-height: 22rem;
}
.schedule-field[data-v-2d14c0bd] {
  margin-bottom: var(--gap-stack);
}
.schedule-field[data-v-2d14c0bd]:last-child {
  margin-bottom: 0;
}
.schedule-field label[data-v-2d14c0bd] {
  display: block;
  margin-bottom: var(--gap-inline);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.schedule-select-wrapper[data-v-2d14c0bd] {
  display: block;
}
.schedule-help[data-v-2d14c0bd] {
  margin-top: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.schedule-separator[data-v-2d14c0bd] {
  height: 1px;
  margin: var(--gap-inline) 0 var(--gap-stack);
  background: var(--line-color);
}

.company-card[data-v-90932538] {
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  background: var(--bg-card);
  min-width: 0;
  width: 100%;
  position: relative;
  cursor: default;
  /* 카드 전체 기본 줄간격을 약간 촘촘하게 조정 */
  line-height: var(--line-comfortable);
}
.company-card .company-body[data-v-90932538] {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--gap-group) !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
}
.company-card .company-body-left[data-v-90932538] {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  flex-grow: 1 !important;
  max-width: none !important;
  width: auto !important;
  /* flex-basis를 고정값으로 설정하여 두 영역 합이 컨테이너보다 크면 wrap */
}
.company-card .company-body-right[data-v-90932538] {
  flex: 0 0 160px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  max-width: none !important;
  width: auto !important;
  min-width: 160px !important;
  /* 밑으로 떨어졌을 때 오른쪽 끝에 붙도록 */
  margin-left: auto !important;
}
.company-card.company-card--status-completed[data-v-90932538] {
  background: var(--bg-status-ok);
  border-color: var(--line-status-ok);
}
.company-card.company-card--status-failed[data-v-90932538] {
  background: var(--bg-status-fail);
  border-color: var(--line-status-fail);
}

/* 비활성 회사는 상태 배경색/테두리 적용 안 함 (기존 HTML 버전과 동일 룰) */
.company-card.company-card--status-completed[data-v-90932538]:has(.tag-inactive),
.company-card.company-card--status-failed[data-v-90932538]:has(.tag-inactive) {
  background: var(--bg-page);
  border-color: var(--line-color);
}
.company-card[data-v-90932538]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--ink-brand);
}

/* 실패 카드(활성/비활성 모두)에 대해서도 호버 시 테두리 색이 확실히 보이도록 보강 */
.company-card.company-card--status-failed[data-v-90932538]:hover,
.company-card.company-card--status-failed[data-v-90932538]:has(.tag-inactive):hover {
  border-color: var(--ink-brand);
}
.company-header[data-v-90932538] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 상단 헤더(이름/버튼 줄)와 아래 내용 줄 사이 간격을 조금 줄임 */
  margin-bottom: var(--gap-inline);
}
.company-header-left[data-v-90932538] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  min-width: 0;
}
.company-checkbox[data-v-90932538] {
  flex-shrink: 0;
}
.company-header-right[data-v-90932538] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.company-toolbar[data-v-90932538] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin-left: var(--gap-glyph);
}
.history-btn[data-v-90932538],
.immediate-run-btn[data-v-90932538],
.schedule-edit-btn[data-v-90932538],
.scraper-request-btn[data-v-90932538] {
  font-size: var(--size-body);
}
.tag[data-v-90932538] {
  display: inline-block;
  padding: var(--pad-badge);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  background: var(--bg-field);
  color: var(--ink-secondary);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tag--readonly[data-v-90932538] {
  cursor: text;
}
.tag-active[data-v-90932538] {
  background: var(--bg-success-soft);
  color: var(--ink-success-hover);
  border: var(--line-w) solid rgba(var(--ink-brand-rgb), 0.35);
  animation: pulse-active-90932538 0.6s ease-in-out;
}
.tag-inactive[data-v-90932538] {
  opacity: 0.8;
  animation: pulse-inactive-90932538 0.6s ease-in-out;
}
@keyframes pulse-active-90932538 {
0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--bg-success-soft);
}
50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 var(--space-tight) transparent;
}
100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
}
}
@keyframes pulse-inactive-90932538 {
0% {
    transform: scale(1);
    opacity: 0.8;
}
50% {
    transform: scale(0.95);
    opacity: 0.6;
}
100% {
    transform: scale(1);
    opacity: 0.8;
}
}

/* 다크 테마에서 활성/비활성 태그 스타일 (기존 HTML 버전과 유사하게) */
/* ⚠️ :global(html[data-theme]) + 자손 셀렉터 + 콤마 조합은 Vue scoped 컴파일러가
   자손 부분을 떨궈 html/body 자체를 칠해버림(주소바 회색 버그). :global() 없이 작성. */
html[data-theme="dark"] .company-card .tag[data-v-90932538],
body[data-theme="dark"] .company-card .tag[data-v-90932538] {
  background: var(--bg-field);
  color: var(--ink-secondary);
}
html[data-theme="dark"] .company-card .tag-active[data-v-90932538],
body[data-theme="dark"] .company-card .tag-active[data-v-90932538] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
  border-color: rgba(var(--company-active-rgb), 0.45);
}

/* 다크 테마에서 비활성 태그 배경색 (더 잘 보이도록) */
html[data-theme="dark"] .company-card .tag-inactive[data-v-90932538],
body[data-theme="dark"] .company-card .tag-inactive[data-v-90932538] {
  background: var(--bg-active);
  color: var(--ink-secondary);
}
.company-body-right-item[data-v-90932538] {
  white-space: nowrap;
  line-height: var(--line-comfortable);
  margin-bottom: var(--gap-glyph);
}
.company-body-right-item[data-v-90932538]:last-child {
  margin-bottom: 0;
}
.company-body-right-header[data-v-90932538] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
  line-height: var(--line-normal);
}
.company-header-row[data-v-90932538] {
  margin-bottom: var(--gap-stack);
  font-size: inherit;
  align-items: center;
}
.company-header-row .left[data-v-90932538] {
  font-size: inherit;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.company-header-row strong[data-v-90932538] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  line-height: var(--line-normal);
}
.company-row[data-v-90932538] {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-inline);
  /* 각 정보 행 사이 간격을 살짝 줄여 카드 높이를 압축 */
  margin-bottom: var(--gap-inline);
  font-size: var(--size-meta);
}
.company-row[data-v-90932538]:last-child {
  margin-bottom: 0;
}
.company-row .left[data-v-90932538] {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-row .right[data-v-90932538] {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.muted[data-v-90932538] {
  color: var(--ink-secondary);
}
.schedule-text-content[data-v-90932538] {
  font-size: var(--size-meta);
}
.schedule-text-clickable[data-v-90932538] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.schedule-text-clickable[data-v-90932538]:hover {
  opacity: 0.8;
}
.schedule-edit-icon[data-v-90932538] {
  cursor: pointer;
  font-size: var(--icon-label);
}
.last-result-label[data-v-90932538] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-info);
}
.last-result-clickable[data-v-90932538] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.last-result-clickable[data-v-90932538]:hover {
  opacity: 0.8;
}
.last-result-failed[data-v-90932538] {
  color: var(--ink-danger);
}

/* 일부 실패 — 완료도 실패도 아니라 경고색으로 (이력 모달 뱃지와 같은 색) */
.last-result-partial[data-v-90932538] {
  color: var(--ink-warning-hover);
}

/* 다크 테마 (:global() 없이 — 위 태그 룰과 동일한 이유) */
html[data-theme="dark"] .last-result-label[data-v-90932538],
body[data-theme="dark"] .last-result-label[data-v-90932538] {
  color: var(--ink-info);
}
html[data-theme="dark"] .last-result-label.last-result-failed[data-v-90932538],
body[data-theme="dark"] .last-result-label.last-result-failed[data-v-90932538] {
  color: var(--ink-danger);
}
html[data-theme="dark"] .last-result-label.last-result-partial[data-v-90932538],
body[data-theme="dark"] .last-result-label.last-result-partial[data-v-90932538] {
  color: var(--ink-warning-hover);
}
.last-session-time[data-v-90932538] {
  color: var(--ink-secondary);
  /* 카드 안 보조정보는 12px 한 단 — 같은 카드의 '다음 실행'과 크기가 갈려 있었다
     (2026-08-22 lint:sameness 적발: 13px vs 12px) */
  font-size: var(--size-meta);
}
.product-count-text[data-v-90932538] {
  font-size: var(--size-meta);
  white-space: nowrap;
}
.product-count-text.empty[data-v-90932538] {
  color: var(--ink-muted);
  font-style: italic;
}
.product-count-link[data-v-90932538],
.document-count-link[data-v-90932538] {
  color: var(--ink-brand);
  text-decoration: none;
}
.product-count-link[data-v-90932538]:hover,
.document-count-link[data-v-90932538]:hover {
  text-decoration: underline;
}
.next-run-label[data-v-90932538] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}
.next-run-text[data-v-90932538] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}

/* 크롤링 진행 상태 (기존 HTML companies.css와 동일한 톤) */
.crawling-progress-row[data-v-90932538] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.crawling-progress-wrapper[data-v-90932538] {
  width: 100%;
}
.crawling-progress-label[data-v-90932538] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.crawling-task-message[data-v-90932538] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--gap-inline);
}
.crawling-progress-percent[data-v-90932538] {
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  flex-shrink: 0;
}
.crawling-progress-controls[data-v-90932538] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.crawling-progress-bar[data-v-90932538] {
  flex: 1;
  height: 6px;
  background: var(--bg-card);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.crawling-progress-fill[data-v-90932538] {
  height: 100%;
  background: var(--bg-brand-vivid);
}
.crawling-cancel-btn[data-v-90932538] {
  flex-shrink: 0;
}


/* 두 영역이 겹치면 자동으로 밑으로 떨어지도록 처리 (flex-wrap: wrap이 기본이므로 별도 미디어 쿼리 불필요) */
@media (max-width: 480px) {
.company-header[data-v-90932538] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-inline);
}
.company-header-right[data-v-90932538] {
    width: 100%;
    justify-content: flex-start;
    gap: var(--gap-inline);
}
.product-count-text[data-v-90932538] {
    white-space: normal;
}
}
/* 하일라이팅 스타일은 전역 스타일(search-highlight.css)에서 관리 */


/* 이 화면만 쓰는 값 — 전역 어휘를 차지하지 않게 여기서 정의한다(2026-08-29 이관).
   ⛔ `:root` 에 적지 않는다 — scoped 스타일에서는 `:root[data-v-…]` 가 되어 **아무 데도 안 걸린다**.
   이 컴포넌트의 뿌리에 붙여 그 안에서만 상속되게 한다.
   ⛔ 다른 화면이 쓰기 시작하면 그때 역할 토큰으로 올린다. */
.company-card[data-v-90932538] {
  --company-active-rgb: 34, 197, 94;
}

.company-list-view-wrapper[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: 0;
}
.company-list-view-content[data-v-0041ba5e] {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: var(--gap-stack);
  align-items: stretch;
}
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] {
  flex: 1 1 auto;
  min-width: 0;
}
.company-list-view-main[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* 일괄편집 모드일 때 ListView의 pagination은 유지 */
.company-list-view-wrapper[data-v-0041ba5e] .list-view {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

/* 일괄편집 모드일 때 ListView의 pagination은 표시 유지 */

/* 일괄편집 모드일 때 ListView의 전체 구조 유지 */
.company-list-view-wrapper--bulk-mode[data-v-0041ba5e] .list-view {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  height: 100%;
}
.company-list-view-wrapper--bulk-mode[data-v-0041ba5e] .list-view__toolbar {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.company-list-view-wrapper--bulk-mode[data-v-0041ba5e] .list-view__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 일괄편집 모드일 때 ListView의 toolbar + body 영역 높이 계산 */
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] .list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] .list-view__toolbar,
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] .list-view__body {
  flex-shrink: 0;
}
.company-list-view-wrapper--bulk-mode .company-list-view-main[data-v-0041ba5e] .list-view__body {
  flex: 1 1 auto;
  min-height: 0;
}
.company-list-view-wrapper--bulk-mode[data-v-0041ba5e] .list-view__pagination {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  position: relative;
  z-index: 10;
}

/* 추가 상세 필터 그룹은 공통 컴포넌트 DetailFilterField 로 이관 */
.company-grid[data-v-0041ba5e] {
  display: grid;
  /* ⛔ `minmax(400px, 1fr)` 은 판이 400px 보다 좁아도 칸을 400px 로 잡는다 — 판(목록 본문)은
     `overflow-x: hidden` 이라 넘친 만큼이 **잘려 안 보인다**(접수 MSHOP-202609-0003:
     393px 폰에서 카드 오른쪽 열이 통째로 사라졌다). 하한을 판 폭으로 눌러 좁으면 한 열이 되게 한다. */
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: var(--gap-group);
}
.company-page__placeholder[data-v-0041ba5e] {
  margin: 0;
  padding: var(--space-band) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--line-normal);
}

/* 스케줄 편집 모달 (기존 HTML companies.css 스케줄 모달 스타일과 톤을 맞춤) */
.schedule-modal-overlay[data-v-0041ba5e] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
}
.schedule-modal[data-v-0041ba5e] {
  width: 100%;
  max-width: 340px;
  margin: 0 var(--gap-group);
  background: var(--bg-float);
  border-radius: var(--radius-float);
  border: var(--line-strong);
  box-shadow: var(--shadow-modal);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.schedule-modal__header[data-v-0041ba5e] {
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-soft);
}
.schedule-modal__title[data-v-0041ba5e] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.schedule-modal__body[data-v-0041ba5e] {
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
}
.schedule-field[data-v-0041ba5e] {
  margin-bottom: var(--gap-stack);
}
.schedule-field[data-v-0041ba5e]:last-child {
  margin-bottom: 0;
}
.schedule-field label[data-v-0041ba5e] {
  display: block;
  margin-bottom: var(--gap-inline);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.schedule-input[data-v-0041ba5e] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  background: var(--bg-page);
  color: var(--ink-primary);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.schedule-select-wrapper[data-v-0041ba5e] {
  position: relative;
  display: block;
}
.schedule-input--select[data-v-0041ba5e] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-wide);
  background-image: none;
}
.schedule-select-wrapper[data-v-0041ba5e]::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: var(--line-accent) solid transparent;
  border-right: var(--line-accent) solid transparent;
  border-top: var(--line-accent) solid var(--ink-secondary);
  pointer-events: none;
}
.schedule-input[data-v-0041ba5e]:focus {
  outline: none;
  border-color: var(--ink-brand) !important;
  box-shadow: none;
}
.schedule-time-wrapper[data-v-0041ba5e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.schedule-time-input[data-v-0041ba5e] {
  flex: 1;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  background: var(--bg-page);
  color: var(--ink-primary);
  text-align: center;
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.schedule-time-input[data-v-0041ba5e]::-webkit-outer-spin-button,
.schedule-time-input[data-v-0041ba5e]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.schedule-time-input[data-v-0041ba5e]:focus {
  outline: none;
  border-color: var(--ink-brand) !important;
  box-shadow: none;
}
.schedule-time-separator[data-v-0041ba5e] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.schedule-help[data-v-0041ba5e] {
  margin-top: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.schedule-separator[data-v-0041ba5e] {
  height: 1px;
  margin: var(--gap-inline) 0 var(--gap-stack);
  background: var(--line-color);
}
.schedule-modal__footer[data-v-0041ba5e] {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  border-top: var(--line-soft);
}
.schedule-modal__footer .btn[data-v-0041ba5e] {
  min-width: 80px;
  padding: var(--space-snug) var(--space-roomy);
  border-radius: var(--radius-control);
  border: var(--line-w) solid transparent;
  font-size: var(--size-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--motion-base) ease;
  background: var(--bg-float);
  color: var(--ink-secondary);
  border-color: var(--line-color);
}
.schedule-modal__footer .btn[data-v-0041ba5e]:hover {
  background: var(--bg-float);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
.schedule-modal__footer .btn.btn-primary[data-v-0041ba5e] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: transparent;
}
.schedule-modal__footer .btn.btn-primary[data-v-0041ba5e]:hover {
  filter: brightness(1.05);
}

/* 다크 테마 보정은 ConfirmDialog와 톤이 같도록 기본 색상만 사용하므로 별도 분기 불필요 */

/* 이력 보기 모달 */
.history-modal-overlay[data-v-0041ba5e] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
}
.history-modal[data-v-0041ba5e] {
  width: 100%;
  max-width: 340px;
  margin: 0 var(--gap-group);
  max-height: 80vh;
  background: var(--bg-float);
  border-radius: var(--radius-float);
  border: var(--line-strong);
  box-shadow: var(--shadow-modal);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.history-modal__header[data-v-0041ba5e] {
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-soft);
}
.history-modal__title[data-v-0041ba5e] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.history-modal__body[data-v-0041ba5e] {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: var(--gap-stack);
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  overflow-y: auto;
  /* 기본 스크롤바가 너무 두껍게 보이지 않도록 다듬기 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--bg-scroll-thumb) transparent;
}

/* WebKit 기반 브라우저용 커스텀 스크롤바 */
.history-modal__body[data-v-0041ba5e]::-webkit-scrollbar {
  width: 6px;
}
.history-modal__body[data-v-0041ba5e]::-webkit-scrollbar-track {
  background: transparent;
}
.history-modal__body[data-v-0041ba5e]::-webkit-scrollbar-thumb {
  background-color: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
}
.history-modal__body[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover {
  background-color: var(--bg-scroll-thumb-hover);
}
.history-loading[data-v-0041ba5e],
.history-empty[data-v-0041ba5e] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-roomy) var(--space-tight);
}
.history-list[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.history-item[data-v-0041ba5e] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-card);
}
.history-item-header[data-v-0041ba5e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-inline);
}
.history-status[data-v-0041ba5e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-badge);
  font-size: var(--size-meta);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-label);
}
.history-status-completed[data-v-0041ba5e] {
  background: var(--bg-success-soft);
  color: var(--ink-success-hover);
}
.history-status-failed[data-v-0041ba5e] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
}

/* 일부 실패 — 완료도 실패도 아니라, 수집 이력 화면과 같은 경고색으로 */
.history-status-partial[data-v-0041ba5e] {
  background: var(--bg-warning-soft);
  color: var(--ink-warning-hover);
}
.history-status-running[data-v-0041ba5e] {
  background: var(--bg-info-soft);
  color: var(--ink-info);
}
.history-status-pending[data-v-0041ba5e] {
  background: var(--line-color-subtle);
  color: var(--ink-muted);
}
.history-status-cancelled[data-v-0041ba5e] {
  background: var(--line-color-subtle);
  color: var(--ink-muted);
}
.history-time[data-v-0041ba5e] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.history-item-body[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.history-stat[data-v-0041ba5e] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-meta);
}
.history-stat-label[data-v-0041ba5e] {
  color: var(--ink-secondary);
}
.history-stat-value[data-v-0041ba5e] {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.history-delta[data-v-0041ba5e] {
  color: var(--ink-success-hover);
  font-size: var(--size-meta);
  margin-right: var(--gap-glyph);
}
.history-error[data-v-0041ba5e] {
  margin-top: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-danger);
}
.history-error-label[data-v-0041ba5e] {
  font-weight: var(--weight-title);
  margin-right: var(--gap-glyph);
}
.history-modal__footer[data-v-0041ba5e] {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  border-top: var(--line-soft);
}
html[data-theme='dark'] .history-modal[data-v-0041ba5e],
body[data-theme='dark'] .history-modal[data-v-0041ba5e] {
  background: var(--bg-float);
}
html[data-theme='dark'] .schedule-select-wrapper[data-v-0041ba5e]::after,
body[data-theme='dark'] .schedule-select-wrapper[data-v-0041ba5e]::after {
  border-top-color: var(--ink-secondary);
}

/* 일괄편집 패널 */
.company-bulk-panel[data-v-0041ba5e] {
  flex: 0 0 auto;
  /* TODO 일괄설정 패널과 동일한 너비 계산(최소/최대 범위) */
  min-width: 220px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
  transition: all var(--motion-base) ease;
  color: var(--ink-primary);
  /* 헤더, 바디, 푸터 구조를 위한 flex 설정 */
  min-height: 0;
}
.company-bulk-panel__header[data-v-0041ba5e] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-soft);
  background: var(--bg-page);
  flex-shrink: 0;
}
.company-bulk-panel__title[data-v-0041ba5e] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.company-bulk-panel__section[data-v-0041ba5e] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 일괄편집 패널 스크롤바는 검색 결과(ListView)와 동일한 스타일을 사용한다 */
.company-bulk-panel__section[data-v-0041ba5e] {
  /* Firefox용 스크롤바 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
}

/* Webkit 브라우저용 스크롤바 스타일 - 얇고 둥근 핸들 */
.company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  display: block;
}
.company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-badge);
  -webkit-box-shadow: none;
}
.company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  -webkit-box-shadow: none;
}
.company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}

/* 다크 테마에서 스크롤바 더 밝게 (ListView와 동일한 톤 유지) */
html[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb,
body[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-track,
body[data-theme='dark'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: inset 0 0 2px var(--bg-subtle);
}

/* 라이트 테마에서 스크롤바 더 어둡게 (ListView와 동일한 톤 유지) */
html[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb,
body[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover,
body[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-track,
body[data-theme='light'] .company-bulk-panel__section[data-v-0041ba5e]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: inset 0 0 2px var(--bg-subtle);
}
.company-bulk-panel__group[data-v-0041ba5e] {
  margin-bottom: 0;
}
.company-bulk-panel__group-title[data-v-0041ba5e] {
  margin: 0 0 var(--gap-inline) 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.company-bulk-panel__selection-controls[data-v-0041ba5e] {
  display: flex;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.company-bulk-panel__btn--with-icon[data-v-0041ba5e] {
  /* layout kept — icon left of label via AppButton's default gap */
}
.company-bulk-panel__selection-count[data-v-0041ba5e] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-inline);
}
.company-bulk-panel__divider[data-v-0041ba5e] {
  height: 1px;
  background: var(--line-color);
  /* 첫 액션(스케줄 설정) 버튼이 바로 아래에 와서 답답해 보이지 않도록 하단 여백만 조금 더 준다 */
  margin: var(--gap-stack) 0 var(--gap-group);
  width: 100%;
}
.company-bulk-panel__spacer[data-v-0041ba5e] {
  height: 0;
  margin: var(--gap-stack) 0;
  width: 100%;
}
.company-bulk-panel__select-all-results[data-v-0041ba5e] {
  margin-top: var(--gap-inline);
}
.company-bulk-panel__checkbox-label[data-v-0041ba5e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.company-bulk-panel__count-value[data-v-0041ba5e] {
  font-weight: var(--weight-title);
  color: var(--ink-brand);
}
.company-bulk-panel__separator[data-v-0041ba5e] {
  height: 1px;
  margin: var(--gap-stack) 0;
  background: var(--line-color);
}
.company-bulk-panel__action-buttons[data-v-0041ba5e] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.company-bulk-panel__toggle-btn[data-v-0041ba5e] {
  /* 크기는 기존 유지, 모양만 회사정보 카드 태그와 동일 (타원형) */
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-pill);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all var(--motion-base) ease;
  border: none;
  background: var(--bg-field);
  color: var(--ink-secondary);
}
.company-bulk-panel__toggle-btn[data-v-0041ba5e]:hover {
  opacity: 0.8;
}
.company-bulk-panel__toggle-btn.tag-active[data-v-0041ba5e] {
  background: var(--bg-success-soft);
  color: var(--ink-success-hover);
  border: var(--line-w) solid rgba(var(--ink-brand-rgb), 0.35);
  animation: pulse-active-0041ba5e 0.6s ease-in-out;
}
.company-bulk-panel__toggle-btn.tag-active[data-v-0041ba5e]:hover {
  opacity: 0.8;
}
.company-bulk-panel__toggle-btn.tag-inactive[data-v-0041ba5e] {
  opacity: 0.8;
  animation: pulse-inactive-0041ba5e 0.6s ease-in-out;
}
.company-bulk-panel__toggle-btn.tag-inactive[data-v-0041ba5e]:hover {
  opacity: 1;
}
.company-bulk-panel__apply-btn[data-v-0041ba5e] {
  /* 상단 선택/해제 버튼과 동일한 스타일 */
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: var(--size-label);
  cursor: pointer;
  transition: all var(--motion-base);
  white-space: nowrap;
}
.company-bulk-panel__apply-btn[data-v-0041ba5e]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
@keyframes pulse-active-0041ba5e {
0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--bg-success-soft);
}
50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 var(--space-tight) transparent;
}
100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
}
}
@keyframes pulse-inactive-0041ba5e {
0% {
    transform: scale(1);
    opacity: 0.8;
}
50% {
    transform: scale(1.05);
    opacity: 0.9;
}
100% {
    transform: scale(1);
    opacity: 0.8;
}
}
.company-bulk-panel__schedule-form[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.company-bulk-panel__schedule-field[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.company-bulk-panel__schedule-field label[data-v-0041ba5e] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.company-bulk-panel__schedule-input[data-v-0041ba5e] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
  color: var(--ink-primary);
  font-size: var(--size-label);
}
.company-bulk-panel__schedule-input[data-v-0041ba5e]:focus {
  outline: none;
  border-color: var(--ink-brand);
}
.company-bulk-panel__schedule-select-wrapper[data-v-0041ba5e] {
  position: relative;
  display: block;
}
.company-bulk-panel__schedule-input--select[data-v-0041ba5e] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-wide);
  background-image: none;
}
.company-bulk-panel__schedule-select-wrapper[data-v-0041ba5e]::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: var(--line-accent) solid transparent;
  border-right: var(--line-accent) solid transparent;
  border-top: var(--line-accent) solid var(--ink-secondary);
  pointer-events: none;
}
html[data-theme='dark'] .company-bulk-panel__schedule-select-wrapper[data-v-0041ba5e]::after,
body[data-theme='dark'] .company-bulk-panel__schedule-select-wrapper[data-v-0041ba5e]::after {
  border-top-color: var(--ink-secondary);
}
.company-bulk-panel__schedule-group[data-v-0041ba5e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.company-bulk-panel__schedule-time-wrapper[data-v-0041ba5e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.company-bulk-panel__schedule-time-input[data-v-0041ba5e] {
  flex: 1;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
  color: var(--ink-primary);
  font-size: var(--size-label);
  text-align: center;
  /* 스케줄 편집 팝업의 시간 입력 컨트롤과 동일하게 스핀 제거 및 텍스트 필드 형태로 표시 */
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}
.company-bulk-panel__schedule-time-input[data-v-0041ba5e]::-webkit-outer-spin-button,
.company-bulk-panel__schedule-time-input[data-v-0041ba5e]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.company-bulk-panel__schedule-time-input[data-v-0041ba5e]:focus {
  outline: none;
  border-color: var(--ink-brand);
}
.company-bulk-panel__schedule-time-separator[data-v-0041ba5e] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.company-bulk-panel__schedule-help[data-v-0041ba5e] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}
.company-bulk-panel__footer[data-v-0041ba5e] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band) var(--space-roomy);
  margin: 0;
  border-top: var(--line-soft);
  background: var(--bg-page);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.company-bulk-panel__footer-btn[data-v-0041ba5e] {
  min-width: 80px;
  padding: var(--space-snug) var(--space-roomy);
  border-radius: var(--radius-control);
  border: var(--line-w) solid transparent;
  font-size: var(--size-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--motion-base) ease;
  background: var(--bg-field);
  color: var(--ink-secondary);
  border-color: var(--line-color);
}
.company-bulk-panel__footer-btn[data-v-0041ba5e]:hover {
  background: var(--bg-page);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
.company-bulk-panel__footer-btn--cancel[data-v-0041ba5e] {
  background: var(--bg-field);
  color: var(--ink-secondary);
  border-color: var(--line-color);
}
.company-bulk-panel__footer-btn--cancel[data-v-0041ba5e]:hover {
  background: var(--bg-page);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
.company-bulk-panel__footer-btn--confirm[data-v-0041ba5e] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: transparent;
}
.company-bulk-panel__footer-btn--confirm[data-v-0041ba5e]:hover {
  filter: brightness(1.05);
}
.company-bulk-panel__schedule-apply[data-v-0041ba5e] {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
}

/* (일괄편집 정보수집 작업요청 입력은 공통 ScraperRequestModal로 이동) */
.company-grid--bulk-mode[data-v-0041ba5e] {
  /* 위와 같은 이유 — 하한을 판 폭으로 누른다 */
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
}
@media (max-width: 768px) {
.company-list-view-wrapper[data-v-0041ba5e] {
    flex-direction: column;
}
.company-list-view-wrapper--bulk-mode .company-bulk-panel[data-v-0041ba5e] {
    flex: 0 0 auto;
    min-width: 100%;
    max-width: 100%;
    max-height: 50vh;
}
}

.page[data-v-251e7fda] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-251e7fda] {
  margin: 0;
}
.page__desc[data-v-251e7fda] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-251e7fda] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-251e7fda],
.page__card > .tab-nav[data-v-251e7fda] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-251e7fda] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-251e7fda] {
    padding: var(--space-snug);
}
}
.company-page-root[data-v-251e7fda] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important; /* .page 클래스의 gap: 1.5rem 오버라이드 */
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게. iOS Safari 하단 주소표시줄
     회색은 html 이 칠하는 --background-color 가 막아 준다(여기서 칠할 필요 없음). */
  background: var(--bg-page);
}
.company-page-root > .page__header[data-v-251e7fda] {
  margin-top: 0;
}
.company-page-root .page__desc[data-v-251e7fda] {
  margin-top: 0;
}
.company-page[data-v-251e7fda] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.company-page-root .page__card[data-v-251e7fda] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.company-page__tabs[data-v-251e7fda] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.company-page__tab-header[data-v-251e7fda] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--line-strong);
  /* 탭 머리줄은 **판**이다 — 비워서 바탕이 이어지게 한다. 구분은 아래 실선이 한다.
     ⛔ --card-bg 를 쓰지 않는다(2026-08-22 실사고: 이 화면들만 흰 베일이 깔려 튀었다). */
  background: var(--bg-page);
}

/* 레이아웃 속성만 유지 — 시각 스타일은 AppButton이 담당 */
.company-page__bulk-toggle-btn[data-v-251e7fda] {
  margin-right: var(--gap-stack);
}
.company-page__tab-panels[data-v-251e7fda] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  padding: var(--space-cozy);
  touch-action: pan-y pinch-zoom; /* 수직 스크롤은 허용, 수평 스와이프는 제어 */
}
.company-page__tab-panel[data-v-251e7fda] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.company-page__toolbar[data-v-251e7fda] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-tight) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  border: var(--line-strong);
}
.company-page__toolbar-left[data-v-251e7fda] {
  flex: 1 1 auto;
}
.company-page__toolbar-right[data-v-251e7fda] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.company-page__sort-control[data-v-251e7fda] {
  display: inline-flex;
  align-items: center;
}
.company-page__sort-select[data-v-251e7fda] {
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge) 0 0 var(--radius-badge);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  border-right: none;
  height: var(--h-control-md);
  box-sizing: border-box;
}
.company-page__sort-select[data-v-251e7fda]:hover {
  border-color: var(--ink-brand);
  background: var(--bg-hover);
}
.company-page__search-input[data-v-251e7fda] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-body);
}
.company-page__query-bar[data-v-251e7fda] {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
}
.company-page__history-btn[data-v-251e7fda] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: 0 var(--space-snug);
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  cursor: pointer;
}
.company-page__history-btn[data-v-251e7fda]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.company-page__history-caret[data-v-251e7fda] {
  font-size: var(--icon-marker);
}
.company-page__query-main[data-v-251e7fda] {
  flex: 1 1 auto;
}
.company-page__toolbar-left[data-v-251e7fda] .p-inputgroup {
  width: 100%;
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.company-page__toolbar-left[data-v-251e7fda] .p-autocomplete-input {
  border-radius: 0;
  border: var(--line-strong);
  border-right: none;
  background: transparent;
  font-size: var(--size-body);
  padding: 0 var(--space-cozy);
}
.company-page__toolbar-left[data-v-251e7fda] .p-inputgroup-addon {
  border-radius: 0;
  border: var(--line-strong);
  border-left: none;
  background: var(--bg-page);
  display: inline-flex;
  align-items: center;
}

/* 키워드 입력 전체 호버 시 인풋·버튼 영역 모두 동일 배경/테두리 느낌으로 */
.company-page__toolbar-left[data-v-251e7fda] .p-inputgroup:hover .p-inputgroup-addon {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
}
.company-page__toolbar-left[data-v-251e7fda] .p-inputgroup:hover .p-autocomplete-input {
  border-color: var(--ink-brand);
}
.company-page__icon-btn[data-v-251e7fda] {
  border: none;
  background: transparent;
  padding: 0 var(--space-snug);
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: var(--icon-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
}
.company-page__icon-btn[data-v-251e7fda]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}
.company-page__primary-btn[data-v-251e7fda] {
  padding: 0 var(--space-roomy);
  border-radius: var(--radius-badge);
  border: none;
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.company-page__primary-btn[data-v-251e7fda]:hover {
  filter: brightness(1.05);
}
.company-page__sort-order-btn[data-v-251e7fda] {
  padding: var(--space-snug) var(--space-roomy);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  cursor: pointer;
  border-left: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-control-md);
  height: var(--h-control-md);
  box-sizing: border-box;
}
.company-page__sort-order-btn[data-v-251e7fda]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.company-page__placeholder[data-v-251e7fda] {
  margin: 0;
  padding: var(--space-band) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--line-normal);
}

/* 모바일에서 일괄편집 버튼 숨김 */
@media (max-width: 480px) {
.company-page__bulk-toggle-btn[data-v-251e7fda] {
    display: none;
}
}
@media (max-width: 768px) {
.company-page__toolbar[data-v-251e7fda] {
    flex-direction: column;
    align-items: stretch;
}
.company-page__toolbar-right[data-v-251e7fda] {
    justify-content: flex-end;
}
}
@media (max-width: 480px) {
.company-page__tab-header[data-v-251e7fda] {
    flex-direction: column;
    align-items: stretch;
}
.company-page__bulk-toggle-btn[data-v-251e7fda] {
    align-self: flex-start;
    margin-top: var(--gap-inline);
    margin-right: 0;
}
.company-page__tab-panels[data-v-251e7fda] {
    padding: var(--space-snug);
}
}
@media (max-width: 480px) {
.company-page__tab-panels[data-v-251e7fda] {
    padding: var(--space-tight);
}
}

.app-chart[data-v-e7e990a2] {
  width: 100%;
  min-width: 0;
}
/* 스파크라인은 값 아래 곁들이는 것 — 옆 글자를 밀지 않게 폭도 절반만 쓴다. */
.app-chart--spark[data-v-e7e990a2] {
  width: 50%;
  opacity: 0.7;
  transition: opacity var(--motion-fast) ease;
}
.app-chart--spark[data-v-e7e990a2]:hover {
  opacity: 1;
}

.db-vendor-logo[data-v-4aba9b5a] {
  display: inline-block;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -0.125em; /* css-ignore: 글자 baseline 에 맞추는 장식용 em */
}

.file-type-icon[data-v-ad68c591] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: var(--line-none);
}
.file-type-icon__img[data-v-ad68c591] {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.apl[data-v-2eb243e9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.apl__list[data-v-2eb243e9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  max-height: 340px; /* css-ignore: 모달 내 선택목록 스크롤 상한(치수 토큰 없음) */
  overflow-y: auto;
}
.apl__state[data-v-2eb243e9] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.apl__item[data-v-2eb243e9] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--motion-base);
}
.apl__item[data-v-2eb243e9]:hover,
.apl__item[data-v-2eb243e9]:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
/* 선택 행 — 자산관리 목록의 행 선택과 같은 어법(soft 틴트) */
.apl__item--selected[data-v-2eb243e9],
.apl__item--selected[data-v-2eb243e9]:hover {
  background: var(--bg-brand-soft);
}
.apl__icon[data-v-2eb243e9] {
  /* ⛔ 색은 종류가 정한다 — 전역 `styles/file-type-icons.css`(.ftype--*). 여기서 덮으면 다시 한 색이 된다. */
  flex: none;
}
.apl__body[data-v-2eb243e9] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.apl__title[data-v-2eb243e9] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apl__meta[data-v-2eb243e9] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apl__busy[data-v-2eb243e9] { color: var(--ink-brand);
}
.apl__more[data-v-2eb243e9] {
  display: flex;
  justify-content: center;
  padding: var(--space-snug);
}

.dol[data-v-0c74623b] { display: flex; flex-direction: column; gap: var(--gap-group);
}
.dol__panel[data-v-0c74623b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 420px; /* css-ignore: 탭(선택/업로드) 전환 시 모달 높이 고정 */
}
.dol__drop[data-v-0c74623b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-band);
  border: var(--line-w) dashed var(--line-color);
  border-radius: var(--radius-control);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color var(--motion-base), color var(--motion-base);
}
.dol__drop[data-v-0c74623b]:hover,
.dol__drop--over[data-v-0c74623b] { border-color: var(--ink-brand); color: var(--ink-brand);
}
.dol__drop i[data-v-0c74623b] { font-size: var(--icon-lead);
}
.dol__file-hidden[data-v-0c74623b] { display: none;
}

.dop[data-v-f2338637] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.dop__head[data-v-f2338637] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dop__title[data-v-f2338637] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.dop__state[data-v-f2338637] {
  padding: var(--space-cozy);
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.dop__list[data-v-f2338637] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dop__item[data-v-f2338637] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}
.dop__icon[data-v-f2338637] {
  color: var(--ink-muted);
}
.dop__info[data-v-f2338637] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dop__name[data-v-f2338637] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dop__meta[data-v-f2338637] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 드롭다운 층위(1000) — 그 위 확인 다이얼로그/원본 연결 모달(z-modal 10000)이 팝오버를 덮도록 낮게 둔다 */
.sdp-backdrop[data-v-5d395ac3] {
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown);
}
.sdp[data-v-5d395ac3] {
  position: fixed;
  z-index: var(--z-dropdown); /* backdrop 과 동일 — DOM 순서상 패널이 뒤라 위에 그려짐 */
  width: 320px; /* css-ignore: 팝오버 고정 폭(치수 토큰 없음) */
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-float);
  padding: var(--space-snug);
}
.sdp__head[data-v-5d395ac3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug) var(--space-snug);
  border-bottom: var(--line-strong);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.sdp__title[data-v-5d395ac3] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdp__count[data-v-5d395ac3] {
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-tight);
  border-radius: var(--radius-pill);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  display: grid;
  place-items: center;
}
.sdp__doc[data-v-5d395ac3] {
  padding: var(--space-snug) var(--space-tight);
  border-bottom: var(--line-strong);
}
.sdp__doc[data-v-5d395ac3]:last-child { border-bottom: none;
}
.sdp__doc-top[data-v-5d395ac3] { display: flex; align-items: center; gap: var(--gap-inline);
}
.sdp__doc-name[data-v-5d395ac3] {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdp__kind[data-v-5d395ac3] { flex: none;
}
.sdp__orig[data-v-5d395ac3] {
  margin-top: var(--gap-inline);
  padding-left: var(--space-roomy);
}

/* HTML 버전과 동일한 스타일 */
.detail-item[data-v-82e2a5ea] {
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-cozy) var(--space-roomy);
  margin-bottom: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  position: relative;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.detail-item[data-v-82e2a5ea]:last-child {
  margin-bottom: 0;
}
.detail-item[data-v-82e2a5ea]:hover {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  border-color: var(--ink-brand);
}
.detail-item.last-clicked[data-v-82e2a5ea] {
  border-color: var(--ink-brand);
  box-shadow: var(--shadow-md);
}
.detail-main[data-v-82e2a5ea] {
  /* ⛔ 여기에 테두리를 두지 않는다. 바깥 .detail-item 이 이미 카드 경계(1px + radius 8px)를
     가지고 있어, 안쪽에 선을 하나 더 그으면 **각진 테두리가 둥근 카드 안에 겹쳐** 보인다
     (2026-08-22 사용자 지적). '판을 비운 뒤 행이 안 갈린다'는 문제는 **테두리 없는
     평평한 목록 행**의 이야기였는데, 상품은 행이 아니라 카드라 해당되지 않았다. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: var(--gap-stack) 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.product-section[data-v-82e2a5ea] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
  width: 100%;
  overflow: hidden;
  grid-row: 1;
  grid-column: 1;
}
.sales-period[data-v-82e2a5ea] {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  white-space: nowrap;
  flex-shrink: 0;
  height: -moz-fit-content;
  height: fit-content;
}
.sales-period.sales-active[data-v-82e2a5ea] {
  color: var(--ink-brand);
}
.sales-period.sales-active i[data-v-82e2a5ea] {
  color: var(--ink-brand);
}
.sales-period.sales-ended[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
.sales-period.sales-ended i[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
.documents-inline[data-v-82e2a5ea] {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  /* 문서 버튼 위/아래 여백은 documents-container에서 관리 */
  padding: 0 var(--space-tight) 0 var(--space-tight);
  max-width: 100%;
  overflow: visible;
}
.documents-container[data-v-82e2a5ea] {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: var(--space-snug) var(--space-tight) 0 var(--space-tight);
  border-top: var(--line-strong);
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.product-meta[data-v-82e2a5ea] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
}
.product-name[data-v-82e2a5ea] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: var(--line-comfortable);
  min-width: 0;
  width: 100%;
  /* 상품명이 판매일 아래까지 확장되도록, 첫 줄만 우측 여백 */
  padding-right: 0;
  position: relative;
}
.company-meta[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  max-width: 100%;
  overflow: hidden;
}
.company-meta i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
  flex-shrink: 0;
}
.type-meta[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-info);
  background: var(--bg-info-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-meta[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  font-family: var(--font-mono);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.update-count-btn[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-accent-orange);
  background: var(--bg-accent-orange-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--motion-base);
}
.update-count-btn[data-v-82e2a5ea]:hover {
  background: var(--bg-accent-orange-soft);
  transform: scale(1.05);
}
.update-count-btn i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
}
.revision-order-btn[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-accent-indigo);
  background: var(--bg-accent-indigo-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--motion-base);
}
.revision-order-btn[data-v-82e2a5ea]:hover {
  background: var(--bg-accent-indigo-soft);
  transform: scale(1.05);
}
.etc-meta[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  background: var(--bg-field);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-id-meta[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  background: var(--bg-field);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  font-family: var(--font-mono);
  white-space: nowrap;
  line-height: var(--line-snug);
}
.detail-toggle-icon[data-v-82e2a5ea] {
  position: absolute;
  right: 12px;
  bottom: 12px;
  /* 개정 이력 영역 위로 떠 있도록 z-index 부여 */
  z-index: 3;
}
.detail-toggle-icon[data-v-82e2a5ea]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.detail-toggle-icon[data-v-82e2a5ea]:active {
  transform: scale(0.95);
}
.document-link[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
  text-decoration: none;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  transition: all var(--motion-base);
  white-space: nowrap;
}
.document-link[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  /* 모바일에서 호버 시 위로 살짝 올라가면서 카드 상단이 잘려 보이는 현상이 있어
     Y축 이동 효과는 제거하고, 그림자만 유지한다. */
  box-shadow: var(--shadow-sm);
}
.document-link.active[data-v-82e2a5ea] {
  background: var(--bg-card);
  color: var(--ink-primary);
  border: var(--line-w-thick) solid var(--ink-brand);
}
.document-link.active[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.document-link i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
}

/* 미등록 슬롯 — 점선으로 "빠진 문서"를 드러낸다 (#853 ④) */
.document-link--empty[data-v-82e2a5ea] {
  border-style: dashed;
  color: var(--ink-muted);
  background: transparent;
}
.document-link--empty[data-v-82e2a5ea]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
/* 비권한자 — 정보 표시만(클릭 불가) */
.document-link--muted[data-v-82e2a5ea] {
  cursor: default;
}
.document-link--muted[data-v-82e2a5ea]:hover {
  border-color: var(--line-color);
  color: var(--ink-muted);
  background: transparent;
  box-shadow: none;
}

/* 등록 문서(업로드 자산) — 추출 문서와 시각 구분(보조색 + 링크 아이콘) */
.document-link--manual[data-v-82e2a5ea] {
  border-color: var(--ink-info);
  color: var(--ink-info);
  background: var(--bg-page);
}
.document-link--manual[data-v-82e2a5ea]:hover {
  border-color: var(--ink-info);
  background: var(--bg-brand-soft);
}
.doc-kind-mark[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
  opacity: 0.8;
}

/* 슬롯 + 원본 관리 캐럿 (라벨=열기 / ▾=원본 팝오버) */
.doc-slot-unit[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: stretch;
}
.doc-slot-unit__main[data-v-82e2a5ea] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.doc-slot-caret[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-left: none;
  border-top-right-radius: var(--radius-badge);
  border-bottom-right-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  cursor: pointer;
  transition: all var(--motion-base);
}
.doc-slot-caret[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
/* 팝업 문서 행 — 열기 링크 + 원본 관리 패널 */
.doc-popup__doc[data-v-82e2a5ea] {
  padding: var(--space-snug) 0;
  border-bottom: var(--line-strong);
}
.doc-popup__doc[data-v-82e2a5ea]:last-child {
  border-bottom: none;
}
.doc-popup__orig[data-v-82e2a5ea] {
  margin-top: var(--gap-glyph);
  padding-left: var(--space-band);
}

/* 문서 그룹 트리거 버튼 */
.doc-group-trigger[data-v-82e2a5ea] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.doc-group-trigger[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  box-shadow: var(--shadow-sm);
}
.doc-count-bubble[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-snug);
  border-radius: var(--radius-card);
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  line-height: var(--line-none);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}

/* 문서 그룹 팝업 */
.doc-popup__title[data-v-82e2a5ea] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.doc-popup__title i[data-v-82e2a5ea] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}
.doc-popup__count[data-v-82e2a5ea] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-snug);
  border-radius: var(--radius-card);
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.doc-popup__body[data-v-82e2a5ea] {
  padding: var(--space-snug);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.doc-popup__item[data-v-82e2a5ea] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--ink-primary);
  font-size: var(--size-label);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
  border: var(--line-w) solid transparent;
}
.doc-popup__item[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.doc-popup__item i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
  opacity: 0.7;
  flex-shrink: 0;
}
.doc-popup__item-name[data-v-82e2a5ea] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-popup__item-size[data-v-82e2a5ea] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-size-hint[data-v-82e2a5ea] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-left: auto;
  white-space: nowrap;
}
.error-marker[data-v-82e2a5ea] {
  display: inline-block;
  margin-left: var(--gap-glyph);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  font-size: var(--icon-marker);
  font-weight: var(--weight-title);
  line-height: var(--line-none);
  background: var(--bg-warning);
  color: var(--ink-on-solid);
  border: var(--line-w) solid var(--ink-warning-hover);
  vertical-align: middle;
}
.no-documents[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-style: italic;
}

/* 하일라이팅 스타일은 전역 스타일(search-highlight.css)에서 관리 */
.revision-history[data-v-82e2a5ea] {
  margin-top: var(--gap-inline);
  padding-top: var(--space-snug);
  border-top: var(--line-strong);
  position: relative;
  z-index: 1;
}
.revision-history-header-bar[data-v-82e2a5ea] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-glyph);
  padding: var(--space-tight) 0;
}
.revision-history-title[data-v-82e2a5ea] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.revision-cycle-message[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-body);
  margin-left: var(--gap-inline);
}
.revision-history-controls[data-v-82e2a5ea] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.revision-history-loading[data-v-82e2a5ea] {
  text-align: center;
  padding: var(--space-band);
  color: var(--ink-secondary);
}
.revision-history-loading--inline[data-v-82e2a5ea] {
  padding: var(--space-cozy) var(--space-snug) var(--space-tight) var(--space-snug);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
}
.revision-history-loading-text[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.chart-loading-indicator[data-v-82e2a5ea] {
  display: flex;
  gap: var(--gap-glyph);
}
.chart-loading-dot[data-v-82e2a5ea] {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-brand-vivid);
  opacity: 0.3;
  animation: chart-loading-pulse-82e2a5ea 1s infinite ease-in-out alternate;
}
.chart-loading-dot[data-v-82e2a5ea]:nth-child(2) {
  animation-delay: 0.15s;
}
.chart-loading-dot[data-v-82e2a5ea]:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chart-loading-pulse-82e2a5ea {
0% {
    transform: translateY(0);
    opacity: 0.3;
}
100% {
    transform: translateY(-4px);
    opacity: 1;
}
}
.revision-history-content[data-v-82e2a5ea] {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--space-tight);
  padding-right: var(--space-snug);
}

/* Webkit 브라우저용 스크롤바 스타일 - 얇고 둥근 핸들 */
.revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  display: block;
}
.revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-badge);
  -webkit-box-shadow: none;
}
.revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  -webkit-box-shadow: none;
}
.revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}

/* 다크 테마에서 스크롤바 더 밝게 */
html[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb,
body[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-track,
body[data-theme='dark'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: inset 0 0 2px var(--bg-subtle);
}

/* 라이트 테마에서 스크롤바 더 어둡게 */
html[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb,
body[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:hover,
body[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-track,
body[data-theme='light'] .revision-history-content[data-v-82e2a5ea]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: inset 0 0 2px var(--line-color-subtle);
}
.revision-history-list[data-v-82e2a5ea] {
  list-style: none;
  padding: 0;
  margin: 0;
}
.revision-history-item[data-v-82e2a5ea] {
  padding: var(--space-cozy);
  margin-bottom: var(--gap-inline);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: var(--line-strong);
}
.revision-history-item[data-v-82e2a5ea]:last-child {
  margin-bottom: 0;
}

/* 현재 개정순번 카드 강조 */
.revision-history-item-current[data-v-82e2a5ea] {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
}
.revision-history-row[data-v-82e2a5ea] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-inline);
}
.revision-history-header[data-v-82e2a5ea] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-inline);
}
.revision-number[data-v-82e2a5ea] {
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  font-size: var(--size-label);
}
.revision-dates[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.revision-dates.sales-active[data-v-82e2a5ea] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.revision-documents[data-v-82e2a5ea] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  margin-top: var(--gap-inline);
  padding: var(--space-snug) var(--space-tight) 0 var(--space-tight);
  border-top: var(--line-strong);
}
.revision-history-empty[data-v-82e2a5ea] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-cozy) 0;
}
.revision-history-error[data-v-82e2a5ea] {
  font-size: var(--size-meta);
  color: var(--ink-danger);
  text-align: center;
  padding: var(--space-cozy) 0;
}
.revision-history-chart[data-v-82e2a5ea] {
  width: 100%;
  height: 280px;
  cursor: default;
}
.revision-sort-toggle[data-v-82e2a5ea] {
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-secondary);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  transition: all var(--motion-base);
  height: 28px;
  box-sizing: border-box;
  white-space: nowrap;
}
.revision-sort-toggle[data-v-82e2a5ea]:hover {
  /* 배경은 그대로 두고, 테두리/텍스트/아이콘만 주제색으로 */
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.revision-sort-toggle i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
}
.chart-metric-toggle[data-v-82e2a5ea] {
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-field);
  color: var(--ink-secondary);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  transition: all var(--motion-base);
  height: 28px;
  box-sizing: border-box;
  white-space: nowrap;
}
.chart-metric-toggle[data-v-82e2a5ea]:hover:not(:disabled) {
  /* 배경은 그대로 두고, 테두리/텍스트/아이콘만 주제색으로 */
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.chart-metric-toggle[data-v-82e2a5ea]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chart-metric-toggle i[data-v-82e2a5ea] {
  font-size: var(--icon-marker);
}
.revision-close-btn[data-v-82e2a5ea]:hover {
  filter: brightness(1.05);
}

/* 문서 이름 반응형 - 모바일에서만 약어 사용 */
.document-link .doc-name-short[data-v-82e2a5ea] {
  display: none;
}

/* 태블릿 및 모바일에서 판매일이 아래로 내려가도록 */
@media (max-width: 768px) {
.detail-main[data-v-82e2a5ea] {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--gap-inline);
    max-width: 100%;
    overflow: hidden;
}
.product-section[data-v-82e2a5ea] {
    grid-row: 1;
    grid-column: 1;
    max-width: 100%;
    overflow: hidden;
    padding-right: 0; /* 모바일에서는 패딩 제거 */
}
.product-meta[data-v-82e2a5ea] {
    gap: var(--gap-inline); /* 모바일에서 배지 간격 줄이기 */
}
.sales-period[data-v-82e2a5ea] {
    position: static; /* 모바일에서는 일반 위치 */
    grid-row: 2;
    grid-column: 1;
    font-size: var(--size-label);
    align-self: start;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}
.documents-inline[data-v-82e2a5ea] {
    grid-row: 3;
    grid-column: 1;
    max-width: 100%;
    overflow: hidden;
}
.documents-container[data-v-82e2a5ea] {
    grid-row: 3;
    grid-column: 1;
    max-width: 100%;
    overflow: hidden;
}
}
@media (max-width: 480px) {
.document-link .doc-name-full[data-v-82e2a5ea] {
    display: none;
}
.document-link .doc-name-short[data-v-82e2a5ea] {
    display: inline;
}
  
  /* 모바일에서 배지 크기 및 간격 조정 */
.product-meta[data-v-82e2a5ea] {
    gap: var(--gap-glyph); /* 모바일에서 배지 간격 더 줄이기 */
}
.product-id-meta[data-v-82e2a5ea] {
    font-size: var(--size-meta);
    padding: var(--space-tight) var(--space-snug);
}
.company-meta[data-v-82e2a5ea],
  .type-meta[data-v-82e2a5ea],
  .code-meta[data-v-82e2a5ea],
  .revision-order-btn[data-v-82e2a5ea],
  .etc-meta[data-v-82e2a5ea],
  .update-count-btn[data-v-82e2a5ea] {
    font-size: var(--size-meta);
    padding: var(--space-tight) var(--space-snug);
}
}

/* 다크 테마 */
html[data-theme='dark'] .detail-item[data-v-82e2a5ea],
body[data-theme='dark'] .detail-item[data-v-82e2a5ea] {
  border-color: var(--line-color);
}
html[data-theme='dark'] .detail-item[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .detail-item[data-v-82e2a5ea]:hover {
  border-color: var(--ink-brand);
}
html[data-theme='dark'] .detail-item.last-clicked[data-v-82e2a5ea],
body[data-theme='dark'] .detail-item.last-clicked[data-v-82e2a5ea] {
  border-color: var(--ink-brand);
  box-shadow: var(--shadow-md);
}
html[data-theme='dark'] .company-meta[data-v-82e2a5ea],
body[data-theme='dark'] .company-meta[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .type-meta[data-v-82e2a5ea],
body[data-theme='dark'] .type-meta[data-v-82e2a5ea] {
  color: var(--ink-info);
  background: var(--bg-info-soft);
}
html[data-theme='dark'] .code-meta[data-v-82e2a5ea],
body[data-theme='dark'] .code-meta[data-v-82e2a5ea] {
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
html[data-theme='dark'] .update-count-btn[data-v-82e2a5ea],
body[data-theme='dark'] .update-count-btn[data-v-82e2a5ea] {
  color: var(--ink-accent-orange);
  background: var(--bg-accent-orange-soft);
}
html[data-theme='dark'] .update-count-btn[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .update-count-btn[data-v-82e2a5ea]:hover {
  background: var(--bg-accent-orange-soft);
}
html[data-theme='dark'] .revision-order-btn[data-v-82e2a5ea],
body[data-theme='dark'] .revision-order-btn[data-v-82e2a5ea] {
  color: var(--ink-accent-indigo);
  background: var(--bg-accent-indigo-soft);
}
html[data-theme='dark'] .revision-order-btn[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .revision-order-btn[data-v-82e2a5ea]:hover {
  background: var(--bg-accent-indigo-soft);
}
html[data-theme='dark'] .etc-meta[data-v-82e2a5ea],
body[data-theme='dark'] .etc-meta[data-v-82e2a5ea] {
  color: var(--ink-secondary);
  background: var(--bg-field);
}
html[data-theme='dark'] .product-id-meta[data-v-82e2a5ea],
body[data-theme='dark'] .product-id-meta[data-v-82e2a5ea] {
  color: var(--ink-muted);
  background: var(--bg-field);
}
html[data-theme='dark'] .revision-history[data-v-82e2a5ea],
body[data-theme='dark'] .revision-history[data-v-82e2a5ea] {
  border-top-color: var(--line-color);
}
html[data-theme='dark'] .sales-period.sales-active[data-v-82e2a5ea],
body[data-theme='dark'] .sales-period.sales-active[data-v-82e2a5ea] {
  color: var(--ink-brand);
}
html[data-theme='dark'] .sales-period.sales-active i[data-v-82e2a5ea],
body[data-theme='dark'] .sales-period.sales-active i[data-v-82e2a5ea] {
  color: var(--ink-brand);
}
html[data-theme='dark'] .sales-period.sales-ended[data-v-82e2a5ea],
body[data-theme='dark'] .sales-period.sales-ended[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .sales-period.sales-ended i[data-v-82e2a5ea],
body[data-theme='dark'] .sales-period.sales-ended i[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .document-link[data-v-82e2a5ea],
body[data-theme='dark'] .document-link[data-v-82e2a5ea] {
  background: var(--bg-field);
  border-color: var(--line-color);
  color: var(--ink-primary);
}
html[data-theme='dark'] .document-link[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .document-link[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
html[data-theme='dark'] .document-link.active[data-v-82e2a5ea],
body[data-theme='dark'] .document-link.active[data-v-82e2a5ea] {
  background: var(--bg-field);
  color: var(--ink-primary);
  border: var(--line-w-thick) solid var(--ink-brand);
}
html[data-theme='dark'] .document-link.active[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .document-link.active[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
html[data-theme='dark'] .no-documents[data-v-82e2a5ea],
body[data-theme='dark'] .no-documents[data-v-82e2a5ea] {
  color: var(--ink-muted);
}
html[data-theme='dark'] .doc-count-bubble[data-v-82e2a5ea],
body[data-theme='dark'] .doc-count-bubble[data-v-82e2a5ea] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
html[data-theme='dark'] .doc-popup__item[data-v-82e2a5ea]:hover,
body[data-theme='dark'] .doc-popup__item[data-v-82e2a5ea]:hover {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
}
html[data-theme='dark'] .doc-popup__item-size[data-v-82e2a5ea],
body[data-theme='dark'] .doc-popup__item-size[data-v-82e2a5ea] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .error-marker[data-v-82e2a5ea],
body[data-theme='dark'] .error-marker[data-v-82e2a5ea] {
  background: var(--bg-warning);
  color: var(--ink-on-solid);
  border-color: var(--ink-warning-hover);
}
html[data-theme='dark'] .documents-inline[data-v-82e2a5ea],
body[data-theme='dark'] .documents-inline[data-v-82e2a5ea] {
  border-top-color: var(--line-color);
}

/* 다크 테마에서 현재 개정순번 카드 강조 */
html[data-theme='dark'] .revision-history-item-current[data-v-82e2a5ea],
body[data-theme='dark'] .revision-history-item-current[data-v-82e2a5ea] {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
}

.product-list-view-wrapper[data-v-b0c6b704] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: 0;
}
.product-list-view-wrapper[data-v-b0c6b704] .list-view {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.product-grid[data-v-b0c6b704] {
  display: grid;
  /* 상품 카드는 항상 1단으로 표시 */
  grid-template-columns: 1fr;
  gap: var(--gap-inline);
}
.products-group[data-v-b0c6b704] {
  position: relative;
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  padding: var(--space-roomy) var(--space-roomy) var(--space-cozy);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--gap-stack);
}
.products-group[data-v-b0c6b704]:last-child {
  margin-bottom: 0;
}
.products-group-header[data-v-b0c6b704] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}
.products-group-title[data-v-b0c6b704] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.products-group-meta[data-v-b0c6b704] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}
.products-group-count[data-v-b0c6b704] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.products-group-body[data-v-b0c6b704] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.products-group-body[data-v-b0c6b704] .detail-item {
  margin-bottom: 0;
}

/* 하일라이팅 스타일은 전역 스타일(search-highlight.css)에서 관리 */
.product-page__placeholder[data-v-b0c6b704] {
  margin: 0;
  padding: var(--space-band) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--line-normal);
}

/* 다크 테마 */
html[data-theme='dark'] .products-group[data-v-b0c6b704],
body[data-theme='dark'] .products-group[data-v-b0c6b704] {
  background: var(--bg-subtle);
  border-color: var(--line-color-subtle);
  box-shadow: none;
}
@media (max-width: 480px) {
.products-group[data-v-b0c6b704] {
    padding: var(--space-tight) var(--space-tight) var(--space-tight);
    margin-top: var(--gap-glyph);
    margin-bottom: var(--gap-glyph);
    gap: var(--gap-glyph);
}
.products-group[data-v-b0c6b704]:first-child {
    margin-top: 0;
}
.products-group-header[data-v-b0c6b704] {
    gap: var(--gap-glyph);
}
.products-group-body[data-v-b0c6b704] {
    gap: var(--gap-glyph);
}
}


/* 추가 상세 필터 그룹은 공통 컴포넌트 DetailFilterField 로 이관 */


.segmented-control[data-v-d2b32dba] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background-color: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-tight);
  gap: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  height: var(--h-control-md);
}
.segmented-control--sm[data-v-d2b32dba] {
  height: var(--h-control-sm);
}
.segmented-control__thumb[data-v-d2b32dba] {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: calc(50% + 2px);
  /* ⛔ 이 손잡이 **위로 고른 항목의 글자가 지나간다**(형제로 깔린 면이라 조상 탐색을 하는
     대비 검사가 못 본 자리다). --bg-brand-vivid 는 글자를 얹지 않는 채움이므로 면을 쓴다
     — 다크 흰 글자 2.54:1 → 6.84:1 (2026-09-03). */
  background-color: var(--bg-brand);
  border-radius: var(--radius-badge);
  transition: all var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0; /* css-ignore — 컴포넌트 내부 스태킹(thumb 아래) 전용, 전역 레이어와 무관 */
}
.segmented-control__thumb--right[data-v-d2b32dba] {
  left: calc(50% + 2px);
  right: 2px;
}
.segmented-control__option[data-v-d2b32dba] {
  position: relative;
  z-index: 1; /* css-ignore — 컴포넌트 내부 스태킹(thumb 위) 전용 */
  flex: 1;
  padding: var(--space-snug) var(--space-roomy);
  border: var(--line-w) solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  cursor: pointer;
  border-radius: var(--radius-badge);
  transition: color var(--motion-base) ease, border-color var(--motion-base) ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 라벨이 줄바꿈되지 않고, 공간이 부족할 때 말줄임표로 축약 */
  min-width: 0;
  line-height: var(--line-none);
  display: flex;
  align-items: center;
  justify-content: center;
}
.segmented-control__option--active[data-v-d2b32dba] {
  color: var(--ink-on-solid);
  font-weight: var(--weight-title);
  border-color: transparent;
}
.segmented-control__option[data-v-d2b32dba]:hover:not(.segmented-control__option--active) {
  color: var(--ink-primary);
  border-color: var(--ink-brand);
}

/* 좁은 화면 — 옵션 패딩 축소(구 ProductView 인라인 규칙을 공통으로 흡수) */
@media (max-width: 480px) {
.segmented-control__option[data-v-d2b32dba] {
    padding: var(--space-snug) var(--space-snug);
}
}

.list-filter-bar[data-v-eddc58f6] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.list-filter-bar__search-wrapper[data-v-eddc58f6] {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
.list-filter-bar[data-v-eddc58f6] {
    flex-wrap: wrap;
    padding: var(--space-snug) var(--space-cozy);
}
.list-filter-bar__search-wrapper[data-v-eddc58f6] {
    flex-basis: 100%;
    order: -1;
}
}

.psr[data-v-21a5f35e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.psr__type[data-v-21a5f35e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.psr__panel[data-v-21a5f35e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 420px; /* css-ignore: 탭(선택/업로드) 전환 시 모달 높이 고정 */
}
.psr__drop[data-v-21a5f35e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-band);
  border: var(--line-w) dashed var(--line-color);
  border-radius: var(--radius-control);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color var(--motion-base), color var(--motion-base);
}
.psr__drop[data-v-21a5f35e]:hover,
.psr__drop--over[data-v-21a5f35e] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.psr__drop i[data-v-21a5f35e] {
  font-size: var(--icon-lead);
}
.psr__file-hidden[data-v-21a5f35e] {
  display: none;
}

.audit-card[data-v-c8d36870] {
  border: var(--line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--motion-base) ease;
}
.audit-card[data-v-c8d36870]:hover {
  border-color: var(--line-color);
}
.audit-card--empty[data-v-c8d36870] {
  opacity: 0.5;
}
.audit-card--empty .audit-card__header[data-v-c8d36870] {
  cursor: default;
}
.audit-card__header[data-v-c8d36870] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  width: 100%;
  padding: var(--pad-panel);
  background: var(--bg-page);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--size-body);
  color: var(--ink-primary);
  transition: background var(--motion-fast) ease;
}
.audit-card__header[data-v-c8d36870]:hover {
  background: var(--bg-hover);
}
.audit-card--empty .audit-card__header[data-v-c8d36870]:hover {
  background: var(--bg-page);
}
.audit-card__severity[data-v-c8d36870] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  flex-shrink: 0;
  font-size: var(--size-body);
}
.audit-card__severity--high[data-v-c8d36870] { color: var(--ink-danger);
}
.audit-card__severity--medium[data-v-c8d36870] { color: var(--ink-warning);
}
.audit-card__severity--low[data-v-c8d36870] { color: var(--ink-info);
}
.audit-card__name[data-v-c8d36870] {
  flex: 1 1 auto;
  font-weight: var(--weight-title);
}
.audit-card__count[data-v-c8d36870] {
  flex-shrink: 0;
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  padding: var(--pad-badge);
  border-radius: var(--radius-card);
}
.audit-card__count--high[data-v-c8d36870] { background: var(--bg-danger-soft); color: var(--ink-danger);
}
.audit-card__count--medium[data-v-c8d36870] { background: var(--bg-warning-soft); color: var(--ink-warning);
}
.audit-card__count--low[data-v-c8d36870] { background: var(--bg-info-soft); color: var(--ink-info);
}
.audit-card__percent[data-v-c8d36870] {
  font-weight: var(--weight-body);
  opacity: 0.75;
}
.audit-card__chevron[data-v-c8d36870] {
  flex-shrink: 0;
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  transition: transform var(--motion-base) ease;
}
.audit-card--expanded .audit-card__chevron[data-v-c8d36870] {
  transform: rotate(90deg);
}
.audit-card--empty .audit-card__chevron[data-v-c8d36870] {
  display: none;
}
.audit-card__body[data-v-c8d36870] {
  border-top: var(--line-strong);
  background: var(--bg-card);
}
.audit-card__items[data-v-c8d36870] {
  padding: var(--space-snug) 0;
}
.audit-item[data-v-c8d36870] {
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(120px, 1.2fr) minmax(240px, 1fr) minmax(100px, 0.8fr);
  gap: var(--gap-inline);
  padding: var(--pad-row);
  font-size: var(--size-label);
  align-items: center;
  border-bottom: var(--line-soft);
}
.audit-item[data-v-c8d36870]:last-child {
  border-bottom: none;
}
.audit-item__company[data-v-c8d36870] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.audit-item__company-name[data-v-c8d36870] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-primary);
}
.audit-item__product[data-v-c8d36870] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.audit-item__product--clickable[data-v-c8d36870] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--motion-fast) ease;
}
.audit-item__product--clickable[data-v-c8d36870]:hover {
  text-decoration-color: var(--ink-brand);
  color: var(--ink-brand);
}
.audit-item__detail[data-v-c8d36870] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.audit-item__value[data-v-c8d36870] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-danger);
  white-space: nowrap;
}
.audit-item__message[data-v-c8d36870] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-card__actions[data-v-c8d36870] {
  display: flex;
  border-top: var(--line-strong);
}
.audit-card__fix-btn[data-v-c8d36870] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  background: var(--bg-success-soft);
  color: var(--ink-success);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.audit-card__fix-btn[data-v-c8d36870]:hover {
  background: var(--bg-brand-soft);
}
.audit-card__more-btn[data-v-c8d36870] {
  flex: 1;
}
@media (max-width: 1024px) {
.audit-item[data-v-c8d36870] {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-inline);
}
.audit-item__detail[data-v-c8d36870] {
    flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.audit-item[data-v-c8d36870] {
    grid-template-columns: 1fr;
    gap: var(--gap-glyph);
    padding: var(--space-cozy) var(--space-roomy);
}
}

.audit-detail__title[data-v-10d27c17] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  flex: 1;
}
.audit-detail__count[data-v-10d27c17] {
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  padding: var(--pad-badge);
  border-radius: var(--radius-card);
  flex-shrink: 0;
}
.audit-detail__count--high[data-v-10d27c17] { background: var(--bg-danger-soft); color: var(--ink-danger);
}
.audit-detail__count--medium[data-v-10d27c17] { background: var(--bg-warning-soft); color: var(--ink-warning);
}
.audit-detail__count--low[data-v-10d27c17] { background: var(--bg-info-soft); color: var(--ink-info);
}
.audit-detail__body[data-v-10d27c17] {
  min-height: 200px;
}
.audit-detail__loading[data-v-10d27c17] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
  font-size: var(--size-title-lg);
  color: var(--ink-muted);
}
.audit-detail__empty[data-v-10d27c17] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.audit-detail__items[data-v-10d27c17] {
  padding: var(--space-snug) 0;
}
.audit-detail-item[data-v-10d27c17] {
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(120px, 1.2fr) minmax(240px, 1fr) minmax(100px, 0.8fr);
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-band);
  font-size: var(--size-label);
  align-items: center;
  border-bottom: var(--line-soft);
}
.audit-detail-item[data-v-10d27c17]:last-child {
  border-bottom: none;
}
.audit-detail-item__company[data-v-10d27c17] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.audit-detail-item__company-name[data-v-10d27c17] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-primary);
}
.audit-detail-item__product[data-v-10d27c17] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.audit-detail-item__product--clickable[data-v-10d27c17] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--motion-fast) ease;
}
.audit-detail-item__product--clickable[data-v-10d27c17]:hover {
  text-decoration-color: var(--ink-brand);
  color: var(--ink-brand);
}
.audit-detail-item__detail[data-v-10d27c17] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.audit-detail-item__value[data-v-10d27c17] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-danger);
  overflow-wrap: break-word;
}
.audit-detail-item__message[data-v-10d27c17] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-detail__pagination[data-v-10d27c17] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-group);
  width: 100%;
}
.audit-detail__page-info[data-v-10d27c17] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
@media (max-width: 768px) {
.audit-detail-item[data-v-10d27c17] {
    grid-template-columns: 1fr;
    gap: var(--gap-glyph);
    padding: var(--space-cozy) var(--space-roomy);
}
.audit-detail-item__detail[data-v-10d27c17] {
    flex-wrap: wrap;
}
}

/* ─── Header ─── */
.diag__title-area[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  flex: 1;
}
.diag__title[data-v-d65ef486] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag__company-label[data-v-d65ef486] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  padding: var(--pad-badge);
  border-radius: var(--radius-card);
  background: var(--bg-hover);
  color: var(--ink-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.diag__actions[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
.diag__link-btn[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-brand);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-badge);
  text-decoration: none;
  transition: all var(--motion-fast) ease;
  white-space: nowrap;
}
.diag__link-btn[data-v-d65ef486]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}

/* ─── Body ─── */
.diag__body[data-v-d65ef486] {
  padding: var(--space-cozy) 0;
}
.diag__loading[data-v-d65ef486],
.diag__error[data-v-d65ef486] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-wide);
  font-size: var(--size-lead);
  color: var(--ink-muted);
}
.diag__error[data-v-d65ef486] {
  color: var(--ink-danger);
  font-size: var(--size-body);
}

/* ─── Sections ─── */
.diag-section[data-v-d65ef486] {
  border-bottom: var(--line-soft);
}
.diag-section[data-v-d65ef486]:last-child {
  border-bottom: none;
}
.diag-section__toggle[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
  padding: var(--space-cozy) var(--space-band);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  transition: background var(--motion-fast) ease;
}
.diag-section__toggle[data-v-d65ef486]:hover {
  background: var(--bg-hover);
}
.diag-section__chevron[data-v-d65ef486] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  transition: transform var(--motion-base) ease;
  width: 0.75rem;
  text-align: center;
}
.diag-section__chevron--open[data-v-d65ef486] {
  transform: rotate(90deg);
}
.diag-section__count[data-v-d65ef486] {
  font-weight: var(--weight-body);
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.diag-section__content[data-v-d65ef486] {
  padding: 0 var(--space-band) var(--space-cozy);
}
.diag-section__empty[data-v-d65ef486] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  padding: var(--space-snug) 0;
}
.diag-section__empty--ok[data-v-d65ef486] {
  color: var(--ink-success);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* ─── Product Info Grid ─── */
.diag-info-grid[data-v-d65ef486] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inline) var(--gap-band);
}
.diag-info-item[data-v-d65ef486] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  font-size: var(--size-label);
}
.diag-info-item__label[data-v-d65ef486] {
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.diag-info-item__label[data-v-d65ef486]::after {
  content: ':';
}
.diag-info-item__value[data-v-d65ef486] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag-info-remarks[data-v-d65ef486] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  margin-top: var(--gap-inline);
}

/* ─── Revisions ─── */
.diag-revision[data-v-d65ef486] {
  padding: var(--space-snug) 0;
  border-bottom: var(--line-soft);
}
.diag-revision[data-v-d65ef486]:last-child {
  border-bottom: none;
}
.diag-revision--no-docs[data-v-d65ef486] {
  background: var(--bg-danger-soft);
  border-left: var(--line-accent) solid var(--ink-danger);
  padding-left: calc(0.5rem - 3px);  /* role-ignore: 자리 계산 — 화면 폭에서 빼는 값이라 사다리 밖이다 */
  border-radius: var(--radius-badge);
}
.diag-revision__header[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  margin-bottom: var(--gap-inline);
}
.diag-revision__num[data-v-d65ef486] {
  font-weight: var(--weight-strong);
  color: var(--ink-muted);
  font-size: var(--size-meta);
  min-width: 1.5rem;
}
.diag-revision__dates[data-v-d65ef486] {
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}
.diag-revision__status[data-v-d65ef486] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
}
.diag-revision__status--active[data-v-d65ef486] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
}
.diag-revision__status--ended[data-v-d65ef486] {
  background: var(--bg-field);
  color: var(--ink-muted);
}
.diag-revision__docs[data-v-d65ef486] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  padding-left: var(--space-wide);
}
.diag-revision__no-docs[data-v-d65ef486] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-style: italic;
}
.diag-revision__no-docs--warn[data-v-d65ef486] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-danger);
  font-style: normal;
  font-weight: var(--weight-label);
}
.diag-doc[data-v-d65ef486] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  background: var(--bg-success-soft);
  color: var(--ink-success);
}
.diag-doc--error[data-v-d65ef486] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
}
.diag-doc__icon[data-v-d65ef486] {
  font-size: var(--icon-marker);
}
.diag-revision__error[data-v-d65ef486] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-danger);
  padding: var(--space-tight) 0 0 var(--space-wide);
}
.diag-revision__error i[data-v-d65ef486] {
  font-size: var(--icon-marker);
  margin-top: var(--gap-glyph);
  flex-shrink: 0;
}

/* ─── Issues ─── */
.diag-issue[data-v-d65ef486] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) 0;
  font-size: var(--size-label);
  border-bottom: var(--line-soft);
}
.diag-issue[data-v-d65ef486]:last-child {
  border-bottom: none;
}
.diag-issue__severity[data-v-d65ef486] {
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  flex-shrink: 0;
}
.diag-issue__severity--high[data-v-d65ef486] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
}
.diag-issue__severity--medium[data-v-d65ef486] {
  background: var(--bg-warning-soft);
  color: var(--ink-warning);
}
.diag-issue__severity--low[data-v-d65ef486] {
  background: var(--bg-info-soft);
  color: var(--ink-info);
}
.diag-issue__field[data-v-d65ef486] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.diag-issue__value[data-v-d65ef486] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-danger);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag-issue__message[data-v-d65ef486] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 768px) {
.diag-info-grid[data-v-d65ef486] {
    grid-template-columns: 1fr;
}
.diag-issue[data-v-d65ef486] {
    flex-wrap: wrap;
    gap: var(--gap-glyph);
}
.diag-issue__message[data-v-d65ef486] {
    margin-left: 0;
    width: 100%;
}
}

.audit-view[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;
  gap: var(--gap-group);
}

/* ─── Empty / Loading / Error states ─── */
.audit-view__empty[data-v-a835b2c5],
.audit-view__loading[data-v-a835b2c5] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 300px;
}
.audit-view__empty-content[data-v-a835b2c5],
.audit-view__loading-content[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-stack);
  text-align: center;
  max-width: 400px;
}
.audit-view__empty-icon[data-v-a835b2c5],
.audit-view__loading-icon[data-v-a835b2c5] {
  font-size: var(--icon-hero);
  color: var(--ink-muted);
  margin-bottom: var(--gap-inline);
}
.audit-view__empty-icon--error[data-v-a835b2c5] {
  color: var(--ink-danger);
}
.audit-view__empty-text[data-v-a835b2c5],
.audit-view__loading-text[data-v-a835b2c5] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
}
.audit-view__empty-sub[data-v-a835b2c5],
.audit-view__loading-sub[data-v-a835b2c5] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  margin: 0;
}
.audit-view__run-btn[data-v-a835b2c5] {
  margin-top: var(--gap-inline);
}

/* ─── Results ─── */
.audit-view__results[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.audit-view__header[data-v-a835b2c5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-panel);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  position: sticky;
  top: 0;
  z-index: 10;
}
.audit-view__meta[data-v-a835b2c5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.audit-view__timestamp i[data-v-a835b2c5] {
  margin-right: var(--gap-inline);
  color: var(--ink-muted);
}
.audit-view__duration[data-v-a835b2c5] {
  color: var(--ink-muted);
  font-size: var(--size-label);
}


/* ─── No issues ─── */
.audit-view__no-issues[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-wide) var(--space-roomy);
  text-align: center;
}
.audit-view__no-issues-icon[data-v-a835b2c5] {
  font-size: var(--icon-hero);
  color: var(--ink-success);
}
.audit-view__no-issues p[data-v-a835b2c5] {
  font-size: var(--size-lead);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  margin: 0;
}

/* ─── Summary cards ─── */
.audit-view__summary[data-v-a835b2c5] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-stack);
}
.summary-card[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-tile);
  border-radius: var(--radius-card);
  border: var(--line-strong);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.summary-card[data-v-a835b2c5]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.summary-card__label[data-v-a835b2c5] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.summary-card__value[data-v-a835b2c5] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
}
.summary-card__percent[data-v-a835b2c5] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-weight: var(--weight-label);
}
.summary-card--high[data-v-a835b2c5] { border-color: var(--ink-danger); background: var(--bg-danger-soft);
}
.summary-card--high .summary-card__label[data-v-a835b2c5] { color: var(--ink-danger);
}
.summary-card--high .summary-card__value[data-v-a835b2c5] { color: var(--ink-danger);
}
.summary-card--medium[data-v-a835b2c5] { border-color: var(--ink-warning); background: var(--bg-warning-soft);
}
.summary-card--medium .summary-card__label[data-v-a835b2c5] { color: var(--ink-warning);
}
.summary-card--medium .summary-card__value[data-v-a835b2c5] { color: var(--ink-warning);
}
.summary-card--low[data-v-a835b2c5] { border-color: var(--ink-info); background: var(--bg-info-soft);
}
.summary-card--low .summary-card__label[data-v-a835b2c5] { color: var(--ink-info);
}
.summary-card--low .summary-card__value[data-v-a835b2c5] { color: var(--ink-info);
}
.summary-card--total[data-v-a835b2c5] { border-color: var(--line-color); background: var(--bg-card);
}
.summary-card--total .summary-card__label[data-v-a835b2c5] { color: var(--ink-secondary);
}
.summary-card--total .summary-card__value[data-v-a835b2c5] { color: var(--ink-primary);
}

/* ─── Filter bar ─── */
.audit-view__filter-bar[data-v-a835b2c5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-hover);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* ─── Content ─── */
.audit-view__content[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}

/* ─── Categories ─── */
.audit-view__categories[data-v-a835b2c5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
@media (max-width: 768px) {
.audit-view__summary[data-v-a835b2c5] {
    grid-template-columns: repeat(2, 1fr);
}
.audit-view__header[data-v-a835b2c5] {
    flex-direction: column;
    gap: var(--gap-inline);
    align-items: flex-start;
}
.audit-view__rerun-btn[data-v-a835b2c5] {
    align-self: flex-end;
}
}
.page[data-v-ca0bd3a6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-ca0bd3a6] {
  margin: 0;
}
.page__desc[data-v-ca0bd3a6] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-ca0bd3a6] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-ca0bd3a6],
.page__card > .tab-nav[data-v-ca0bd3a6] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-ca0bd3a6] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-ca0bd3a6] {
    padding: var(--space-snug);
}
}
.product-page-root[data-v-ca0bd3a6] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important; /* .page 클래스의 gap: 1.5rem 오버라이드 */
  /* 부모(app-shell__content)의 높이를 그대로 채우되,
     여백은 부모 컨테이너의 padding에만 의존하도록 별도 padding은 두지 않는다. */
}
.product-page-root > .page__header[data-v-ca0bd3a6] {
  margin-top: 0;
}
.product-page-root .page__desc[data-v-ca0bd3a6] {
  margin-top: 0;
}
.product-page[data-v-ca0bd3a6] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.product-page-root .page__card[data-v-ca0bd3a6] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.product-page__tabs[data-v-ca0bd3a6] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.product-page__tab-header[data-v-ca0bd3a6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--line-strong);
  /* 탭 머리줄은 **판**이다 — 비워서 바탕이 이어지게 한다. 구분은 아래 실선이 한다.
     ⛔ --card-bg 를 쓰지 않는다(2026-08-22 실사고: 이 화면들만 흰 베일이 깔려 튀었다). */
  background: var(--bg-page);
}
.product-page__tab-panels[data-v-ca0bd3a6] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  padding: var(--space-cozy);
  touch-action: pan-y pinch-zoom; /* 수직 스크롤은 허용, 수평 스와이프는 제어 */
}
.product-page__tab-panel[data-v-ca0bd3a6] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.product-page__tab-header-right[data-v-ca0bd3a6] {
  display: flex;
  align-items: center;
  padding-right: var(--space-cozy);
  gap: var(--gap-inline);
  flex-shrink: 0;
}

/* 세그먼트 컨트롤 — 공통 SegmentedToggle 로 이동 */
@media (max-width: 480px) {
.product-page__tab-panels[data-v-ca0bd3a6] {
    padding: var(--space-snug);
}
}
@media (max-width: 480px) {
.product-page__tab-panels[data-v-ca0bd3a6] {
    padding: var(--space-tight);
}
}

/* 개정/상품보기 스위치는 모든 해상도에서 탭과 같은 한 줄에 유지한다. */

.documents-grid-card[data-v-797c29a3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--pad-card);
  position: relative;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  border: var(--line-strong);
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) ease;
}
.documents-grid-card[data-v-797c29a3]:hover,
.documents-grid-card[data-v-797c29a3]:focus-within {
  border-color: var(--ink-brand);
  box-shadow: var(--shadow-float);
  transform: translateY(-1px);
}
.document-row[data-v-797c29a3] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-stack);
  min-width: 0;
  flex-wrap: wrap;
}
.document-row-top[data-v-797c29a3] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  width: 100%;
}
.document-title-line[data-v-797c29a3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  row-gap: var(--gap-glyph);
  flex-wrap: wrap;
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  min-width: 0;
  flex: 1 1 auto;
}
.document-title-side[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.document-title-side .document-product-name[data-v-797c29a3] {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.document-title-side .document-title-meta[data-v-797c29a3] {
  white-space: normal;
  flex-shrink: 0;
}
.document-product-name[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  gap: var(--gap-inline);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1 1 auto;
  line-height: var(--line-normal);
}
.document-product-name[data-v-797c29a3] .search-highlight {
  font-weight: inherit;
  font-size: inherit;
}
.document-open-btn[data-v-797c29a3] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-inline);
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.document-open-btn[data-v-797c29a3]:hover,
.document-open-btn[data-v-797c29a3]:focus {
  color: var(--ink-brand);
  outline: none;
}
.document-title-meta[data-v-797c29a3] {
  flex-shrink: 0;
}
.document-title-text[data-v-797c29a3] {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--line-normal);
  white-space: normal;
  word-break: break-word;
}
.document-period[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  justify-content: flex-end;
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
  flex: 0 0 auto;
  min-width: -moz-max-content;
  min-width: max-content;
}
.document-period i[data-v-797c29a3] {
  color: currentColor;
}
.document-period.document-period-active[data-v-797c29a3] {
  color: var(--ink-brand);
}
.document-period.document-period-ended[data-v-797c29a3] {
  color: var(--ink-secondary);
}
.document-period.document-period-on-sale[data-v-797c29a3] {
  color: var(--ink-success-hover);
}
.document-period.document-period-off-sale[data-v-797c29a3] {
  color: var(--ink-secondary);
}
.document-row-bottom[data-v-797c29a3] {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-stack);
  width: 100%;
  flex-wrap: wrap;
  padding-top: var(--space-cozy);
  border-top: var(--line-soft);
}
.document-open-action[data-v-797c29a3] {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.document-meta-group[data-v-797c29a3] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-muted);
}
.document-company[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  min-width: 0;
}
.document-company-icon[data-v-797c29a3] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.document-company-name[data-v-797c29a3] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-id-meta[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  background: var(--bg-field);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  font-family: var(--font-mono);
  white-space: nowrap;
  border: var(--line-soft);
  line-height: var(--line-snug);
}
.document-status-pill[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  white-space: nowrap;
  border: var(--line-soft);
  color: var(--ink-secondary);
  background: var(--bg-field);
  line-height: var(--line-snug);
}
.document-status-pill.document-status-on[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-brand-soft);
  color: var(--ink-success-hover);
}
.document-status-pill.document-status-off[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-secondary);
}
.document-meta[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.document-meta-item[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  background: var(--bg-field);
  color: var(--ink-secondary);
  border: var(--line-soft);
  transition: background var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.document-meta-item i[data-v-797c29a3] {
  font-size: var(--icon-marker);
  color: currentColor;
}
.document-meta-item.document-meta-file[data-v-797c29a3] {
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
  color: var(--ink-info);
}
.document-meta-item.document-meta-download[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-success-soft);
  color: var(--ink-success-hover);
}
.document-meta-item.document-meta-service[data-v-797c29a3] {
  background: var(--bg-warning-soft);
  border-color: var(--bg-warning-soft);
  color: var(--ink-warning-hover);
}
.document-meta-item.document-meta-product-type[data-v-797c29a3] {
  background: transparent;
  border-color: var(--bg-accent-purple-soft);
  color: var(--ink-accent-purple);
}
.document-meta-item.document-meta-etc[data-v-797c29a3] {
  font-size: var(--size-meta);
  color: var(--ink-accent-purple);
  background: var(--bg-accent-purple-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-weight: var(--weight-title);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: var(--bg-accent-purple-soft);
}
.document-meta-item.document-meta-extension[data-v-797c29a3] {
  background: var(--bg-accent-indigo-soft);
  border-color: var(--bg-accent-indigo-soft);
  color: var(--ink-accent-indigo);
}
.document-meta-item.document-meta-error[data-v-797c29a3] {
  background: var(--bg-danger-soft);
  border-color: var(--bg-danger-soft);
  color: var(--ink-danger);
}
.document-version[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-info);
  background: var(--bg-info-soft);
  border: var(--line-w) solid var(--bg-info-soft);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  line-height: var(--line-snug);
  white-space: nowrap;
  transition: background var(--motion-base) ease, color var(--motion-base) ease, transform var(--motion-base) ease, border-color var(--motion-base) ease;
}
.document-version i[data-v-797c29a3] {
  font-size: var(--icon-marker);
  color: currentColor;
}

/* 하일라이팅 스타일은 전역 스타일(search-highlight.css)에서 관리 */
@media (prefers-color-scheme: dark) {
.documents-grid-card[data-v-797c29a3] {
    background: var(--bg-page);
    border-color: var(--line-color);
}
.documents-grid-card[data-v-797c29a3]:hover,
  .documents-grid-card[data-v-797c29a3]:focus-within {
    border-color: var(--ink-brand);
    box-shadow: var(--shadow-sm);
}
.document-meta-group[data-v-797c29a3] {
    color: var(--ink-secondary);
}
.document-product-name[data-v-797c29a3] {
    color: var(--ink-primary);
}
.document-period.document-period-active[data-v-797c29a3] {
    color: var(--ink-brand);
}
.document-period.document-period-ended[data-v-797c29a3] {
    color: var(--ink-secondary);
}
.document-period.document-period-on-sale[data-v-797c29a3] {
    color: var(--ink-success);
}
.document-period.document-period-off-sale[data-v-797c29a3] {
    color: var(--ink-secondary);
}
.document-row-bottom[data-v-797c29a3] {
    border-top: var(--line-soft);
}
.document-company-icon[data-v-797c29a3] {
    color: var(--ink-muted);
}
.document-open-btn[data-v-797c29a3]:hover,
  .document-open-btn[data-v-797c29a3]:focus {
    color: var(--ink-brand);
}
.document-title-line[data-v-797c29a3] {
    color: var(--ink-primary);
}
.document-status-pill[data-v-797c29a3] {
    background: var(--bg-field);
    border-color: var(--line-color-subtle);
    color: var(--ink-primary);
}
.document-status-pill.document-status-on[data-v-797c29a3] {
    background: var(--bg-success-soft);
    border-color: var(--bg-success-soft);
    color: var(--ink-success);
}
.document-status-pill.document-status-off[data-v-797c29a3] {
    background: var(--bg-field);
    border-color: var(--line-color-subtle);
    color: var(--ink-secondary);
}
.document-meta-item[data-v-797c29a3] {
    background: var(--bg-field);
    border-color: var(--line-color-subtle);
    color: var(--ink-primary);
}
.document-meta-item.document-meta-file[data-v-797c29a3] {
    background: var(--bg-info-soft);
    border-color: var(--bg-info-soft);
    color: var(--ink-info);
}
.document-meta-item.document-meta-download[data-v-797c29a3] {
    background: var(--bg-success-soft);
    border-color: var(--bg-success-soft);
    color: var(--ink-success);
}
.document-meta-item.document-meta-service[data-v-797c29a3] {
    background: var(--bg-warning-soft);
    border-color: var(--bg-warning-soft);
    color: var(--ink-warning);
}
.document-meta-item.document-meta-product-type[data-v-797c29a3] {
    background: transparent;
    border-color: var(--bg-accent-purple-soft);
    color: var(--ink-accent-purple);
}
.document-meta-item.document-meta-etc[data-v-797c29a3] {
    color: var(--ink-accent-purple);
    background: var(--bg-accent-purple-soft);
    border-color: var(--bg-accent-purple-soft);
}
.document-meta-item.document-meta-extension[data-v-797c29a3] {
    background: var(--bg-accent-indigo-soft);
    border-color: var(--bg-accent-indigo-soft);
    color: var(--ink-accent-indigo);
}
.document-meta-item.document-meta-error[data-v-797c29a3] {
    background: var(--bg-danger-soft);
    border-color: var(--bg-danger-soft);
    color: var(--ink-danger);
}
.document-version[data-v-797c29a3] {
    color: var(--ink-info);
    background: var(--bg-info-soft);
    border-color: var(--bg-info-soft);
}
}
html[data-theme='dark'] .documents-grid-card[data-v-797c29a3],
body[data-theme='dark'] .documents-grid-card[data-v-797c29a3] {
  background: var(--bg-page);
  border-color: var(--line-color);
}
html[data-theme='dark'] .documents-grid-card[data-v-797c29a3]:hover,
html[data-theme='dark'] .documents-grid-card[data-v-797c29a3]:focus-within,
body[data-theme='dark'] .documents-grid-card[data-v-797c29a3]:hover,
body[data-theme='dark'] .documents-grid-card[data-v-797c29a3]:focus-within {
  border-color: var(--ink-brand);
  box-shadow: var(--shadow-sm);
}
html[data-theme='dark'] .document-meta-group[data-v-797c29a3],
body[data-theme='dark'] .document-meta-group[data-v-797c29a3] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .document-product-name[data-v-797c29a3],
body[data-theme='dark'] .document-product-name[data-v-797c29a3] {
  color: var(--ink-primary);
}
html[data-theme='dark'] .document-period.document-period-active[data-v-797c29a3],
body[data-theme='dark'] .document-period.document-period-active[data-v-797c29a3] {
  color: var(--ink-brand);
}
html[data-theme='dark'] .document-period.document-period-ended[data-v-797c29a3],
body[data-theme='dark'] .document-period.document-period-ended[data-v-797c29a3] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .document-period.document-period-on-sale[data-v-797c29a3],
body[data-theme='dark'] .document-period.document-period-on-sale[data-v-797c29a3] {
  color: var(--ink-success);
}
html[data-theme='dark'] .document-period.document-period-off-sale[data-v-797c29a3],
body[data-theme='dark'] .document-period.document-period-off-sale[data-v-797c29a3] {
  color: var(--ink-secondary);
}
html[data-theme='dark'] .document-row-bottom[data-v-797c29a3],
body[data-theme='dark'] .document-row-bottom[data-v-797c29a3] {
  border-top: var(--line-soft);
}
html[data-theme='dark'] .document-company-icon[data-v-797c29a3],
body[data-theme='dark'] .document-company-icon[data-v-797c29a3] {
  color: var(--ink-muted);
}
html[data-theme='dark'] .document-open-btn[data-v-797c29a3]:hover,
html[data-theme='dark'] .document-open-btn[data-v-797c29a3]:focus,
body[data-theme='dark'] .document-open-btn[data-v-797c29a3]:hover,
body[data-theme='dark'] .document-open-btn[data-v-797c29a3]:focus {
  color: var(--ink-brand);
}
html[data-theme='dark'] .document-title-line[data-v-797c29a3],
body[data-theme='dark'] .document-title-line[data-v-797c29a3] {
  color: var(--ink-primary);
}
html[data-theme='dark'] .document-id-meta[data-v-797c29a3],
body[data-theme='dark'] .document-id-meta[data-v-797c29a3] {
  color: var(--ink-muted);
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
}
html[data-theme='dark'] .document-status-pill[data-v-797c29a3],
body[data-theme='dark'] .document-status-pill[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
html[data-theme='dark'] .document-status-pill.document-status-on[data-v-797c29a3],
body[data-theme='dark'] .document-status-pill.document-status-on[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-success-soft);
  color: var(--ink-success);
}
html[data-theme='dark'] .document-status-pill.document-status-off[data-v-797c29a3],
body[data-theme='dark'] .document-status-pill.document-status-off[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-secondary);
}
html[data-theme='dark'] .document-meta-item[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
html[data-theme='dark'] .document-meta-item.document-meta-file[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-file[data-v-797c29a3] {
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
  color: var(--ink-info);
}
html[data-theme='dark'] .document-meta-item.document-meta-download[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-download[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-success-soft);
  color: var(--ink-success);
}
html[data-theme='dark'] .document-meta-item.document-meta-service[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-service[data-v-797c29a3] {
  background: var(--bg-warning-soft);
  border-color: var(--bg-warning-soft);
  color: var(--ink-warning);
}
html[data-theme='dark'] .document-meta-item.document-meta-product-type[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-product-type[data-v-797c29a3] {
  background: transparent;
  border-color: var(--bg-accent-purple-soft);
  color: var(--ink-accent-purple);
}
html[data-theme='dark'] .document-meta-item.document-meta-etc[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-etc[data-v-797c29a3] {
  color: var(--ink-accent-purple);
  background: var(--bg-accent-purple-soft);
  border-color: var(--bg-accent-purple-soft);
}
html[data-theme='dark'] .document-meta-item.document-meta-extension[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-extension[data-v-797c29a3] {
  background: var(--bg-accent-indigo-soft);
  border-color: var(--bg-accent-indigo-soft);
  color: var(--ink-accent-indigo);
}
html[data-theme='dark'] .document-meta-item.document-meta-error[data-v-797c29a3],
body[data-theme='dark'] .document-meta-item.document-meta-error[data-v-797c29a3] {
  background: var(--bg-danger-soft);
  border-color: var(--bg-danger-soft);
  color: var(--ink-danger);
}
html[data-theme='dark'] .document-version[data-v-797c29a3],
body[data-theme='dark'] .document-version[data-v-797c29a3] {
  color: var(--ink-info);
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
}

/* 라이트 테마 명시적 스타일 (아이패드/아이폰 대응) */
html[data-theme='light'] .documents-grid-card[data-v-797c29a3],
body[data-theme='light'] .documents-grid-card[data-v-797c29a3] {
  background: var(--bg-page);
  border-color: var(--line-color);
}
html[data-theme='light'] .documents-grid-card[data-v-797c29a3]:hover,
html[data-theme='light'] .documents-grid-card[data-v-797c29a3]:focus-within,
body[data-theme='light'] .documents-grid-card[data-v-797c29a3]:hover,
body[data-theme='light'] .documents-grid-card[data-v-797c29a3]:focus-within {
  border-color: var(--ink-brand);
  box-shadow: var(--shadow-float);
}
html[data-theme='light'] .document-meta-group[data-v-797c29a3],
body[data-theme='light'] .document-meta-group[data-v-797c29a3] {
  color: var(--ink-muted);
}
html[data-theme='light'] .document-product-name[data-v-797c29a3],
body[data-theme='light'] .document-product-name[data-v-797c29a3] {
  color: var(--ink-primary);
}
html[data-theme='light'] .document-period.document-period-active[data-v-797c29a3],
body[data-theme='light'] .document-period.document-period-active[data-v-797c29a3] {
  color: var(--ink-brand);
}
html[data-theme='light'] .document-period.document-period-ended[data-v-797c29a3],
body[data-theme='light'] .document-period.document-period-ended[data-v-797c29a3] {
  color: var(--ink-secondary);
}
html[data-theme='light'] .document-period.document-period-on-sale[data-v-797c29a3],
body[data-theme='light'] .document-period.document-period-on-sale[data-v-797c29a3] {
  color: var(--ink-success-hover);
}
html[data-theme='light'] .document-period.document-period-off-sale[data-v-797c29a3],
body[data-theme='light'] .document-period.document-period-off-sale[data-v-797c29a3] {
  color: var(--ink-secondary);
}
html[data-theme='light'] .document-row-bottom[data-v-797c29a3],
body[data-theme='light'] .document-row-bottom[data-v-797c29a3] {
  border-top: var(--line-soft);
}
html[data-theme='light'] .document-company-icon[data-v-797c29a3],
body[data-theme='light'] .document-company-icon[data-v-797c29a3] {
  color: var(--ink-muted);
}
html[data-theme='light'] .document-open-btn[data-v-797c29a3]:hover,
html[data-theme='light'] .document-open-btn[data-v-797c29a3]:focus,
body[data-theme='light'] .document-open-btn[data-v-797c29a3]:hover,
body[data-theme='light'] .document-open-btn[data-v-797c29a3]:focus {
  color: var(--ink-brand);
}
html[data-theme='light'] .document-title-line[data-v-797c29a3],
body[data-theme='light'] .document-title-line[data-v-797c29a3] {
  color: var(--ink-primary);
}
html[data-theme='light'] .document-id-meta[data-v-797c29a3],
body[data-theme='light'] .document-id-meta[data-v-797c29a3] {
  color: var(--ink-muted);
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
}
html[data-theme='light'] .document-status-pill[data-v-797c29a3],
body[data-theme='light'] .document-status-pill[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-secondary);
}
html[data-theme='light'] .document-status-pill.document-status-on[data-v-797c29a3],
body[data-theme='light'] .document-status-pill.document-status-on[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-brand-soft);
  color: var(--ink-success-hover);
}
html[data-theme='light'] .document-status-pill.document-status-off[data-v-797c29a3],
body[data-theme='light'] .document-status-pill.document-status-off[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-secondary);
}
html[data-theme='light'] .document-meta-item[data-v-797c29a3],
body[data-theme='light'] .document-meta-item[data-v-797c29a3] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-secondary);
}
html[data-theme='light'] .document-meta-item.document-meta-file[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-file[data-v-797c29a3] {
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
  color: var(--ink-info);
}
html[data-theme='light'] .document-meta-item.document-meta-download[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-download[data-v-797c29a3] {
  background: var(--bg-success-soft);
  border-color: var(--bg-success-soft);
  color: var(--ink-success-hover);
}
html[data-theme='light'] .document-meta-item.document-meta-service[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-service[data-v-797c29a3] {
  background: var(--bg-warning-soft);
  border-color: var(--bg-warning-soft);
  color: var(--ink-warning-hover);
}
html[data-theme='light'] .document-meta-item.document-meta-product-type[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-product-type[data-v-797c29a3] {
  background: transparent;
  border-color: var(--bg-accent-purple-soft);
  color: var(--ink-accent-purple);
}
html[data-theme='light'] .document-meta-item.document-meta-etc[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-etc[data-v-797c29a3] {
  color: var(--ink-accent-purple);
  background: var(--bg-accent-purple-soft);
  border-color: var(--bg-accent-purple-soft);
}
html[data-theme='light'] .document-meta-item.document-meta-extension[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-extension[data-v-797c29a3] {
  background: var(--bg-accent-indigo-soft);
  border-color: var(--bg-accent-indigo-soft);
  color: var(--ink-accent-indigo);
}
html[data-theme='light'] .document-meta-item.document-meta-error[data-v-797c29a3],
body[data-theme='light'] .document-meta-item.document-meta-error[data-v-797c29a3] {
  background: var(--bg-danger-soft);
  border-color: var(--bg-danger-soft);
  color: var(--ink-danger);
}
html[data-theme='light'] .document-version[data-v-797c29a3],
body[data-theme='light'] .document-version[data-v-797c29a3] {
  color: var(--ink-info);
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
}
.document-version.document-version-interactive[data-v-797c29a3] {
  cursor: pointer;
}
body:not([data-theme='dark']) .document-version.document-version-interactive[data-v-797c29a3]:hover,
body:not([data-theme='dark']) .document-version.document-version-interactive[data-v-797c29a3]:focus {
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
  color: var(--ink-info-hover);
  transform: translateY(-1px);
}
body[data-theme='dark'] .document-version.document-version-interactive[data-v-797c29a3]:hover,
body[data-theme='dark'] .document-version.document-version-interactive[data-v-797c29a3]:focus {
  background: var(--bg-info-soft);
  border-color: var(--bg-info-soft);
  color: var(--ink-info);
  transform: translateY(-1px);
}

/* 버전 이력 차트 스타일 (기존 HTML 버전과 동일) */
.document-version-detail[data-v-797c29a3] {
  display: none;
  margin-top: var(--gap-inline);
  padding-top: var(--space-snug);
  border-top: var(--line-strong);
  position: relative;
  z-index: 1;
}
.document-version-detail.open[data-v-797c29a3] {
  display: block;
}

/* 상품정보와 동일한 스타일 적용 */
.document-version-detail .revision-history-header-bar[data-v-797c29a3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-glyph);
  padding: var(--space-tight) 0;
}
.document-version-detail .revision-history-title[data-v-797c29a3] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.document-version-detail .revision-history-title i[data-v-797c29a3] {
  color: var(--ink-brand);
  font-size: var(--icon-marker);
}
.document-version-detail .revision-history-controls[data-v-797c29a3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.document-version-detail .revision-history-content[data-v-797c29a3] {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--space-tight);
  padding-right: var(--space-snug);
}
.document-version-detail .revision-history-loading[data-v-797c29a3] {
  text-align: center;
  padding: var(--space-band);
  color: var(--ink-secondary);
}
.document-version-detail .revision-history-loading--inline[data-v-797c29a3] {
  padding: var(--space-cozy) var(--space-snug) var(--space-tight) var(--space-snug);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
}
.document-version-detail .revision-history-loading-text[data-v-797c29a3] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.document-version-detail .chart-loading-indicator[data-v-797c29a3] {
  display: flex;
  gap: var(--gap-glyph);
}
.document-version-detail .chart-loading-dot[data-v-797c29a3] {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-brand-vivid);
  opacity: 0.3;
  animation: chart-loading-pulse-797c29a3 1s infinite ease-in-out alternate;
}
.document-version-detail .chart-loading-dot[data-v-797c29a3]:nth-child(2) {
  animation-delay: 0.15s;
}
.document-version-detail .chart-loading-dot[data-v-797c29a3]:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chart-loading-pulse-797c29a3 {
from {
    opacity: 0.3;
    transform: scale(0.8);
}
to {
    opacity: 1;
    transform: scale(1.2);
}
}
.document-version-detail .revision-history-chart[data-v-797c29a3] {
  width: 100%;
  height: 280px;
  cursor: default;
}

/* 스크롤바 스타일 (상품정보와 동일) */
.document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  display: block;
}
.document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-badge);
  -webkit-box-shadow: none;
}
.document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  -webkit-box-shadow: none;
}
.document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}

/* 다크 테마 */
html[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb,
body[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-track,
body[data-theme='dark'] .document-version-detail .revision-history-content[data-v-797c29a3]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: inset 0 0 2px var(--bg-scroll-track);
}

/* 원본(原本) 섹션 (#853 ⑤) */
.document-originals-section[data-v-797c29a3] {
  margin-top: var(--gap-inline);
  border-top: var(--line-strong);
  padding-top: var(--space-snug);
}
.document-originals-toggle-label[data-v-797c29a3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
}
.document-originals-body[data-v-797c29a3] {
  margin-top: var(--gap-inline);
}

.document-list-view-wrapper[data-v-6b98ec83] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.documents-grid[data-v-6b98ec83] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.document-page__placeholder[data-v-6b98ec83] {
  margin: 0;
  padding: var(--space-band) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--line-normal);
}

/* 문서 그룹 스타일 (기존 HTML 버전과 동일) */
.documents-group[data-v-6b98ec83] {
  position: relative;
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  padding: var(--space-roomy) var(--space-roomy) var(--space-cozy);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--gap-stack);
}
.documents-group[data-v-6b98ec83]:last-child {
  margin-bottom: 0;
}
.documents-group-header[data-v-6b98ec83] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}
.documents-group-title[data-v-6b98ec83] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.documents-group-meta[data-v-6b98ec83] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}
.documents-group-count[data-v-6b98ec83] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.documents-group-body[data-v-6b98ec83] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.documents-group-body[data-v-6b98ec83] .documents-grid-card {
  margin: 0;
}

/* 다크 테마 */
html[data-theme='dark'] .documents-group[data-v-6b98ec83],
body[data-theme='dark'] .documents-group[data-v-6b98ec83] {
  background: var(--bg-subtle);
  border-color: var(--line-color-subtle);
  box-shadow: none;
}
html[data-theme='dark'] .documents-group-title[data-v-6b98ec83],
body[data-theme='dark'] .documents-group-title[data-v-6b98ec83] {
  color: var(--ink-primary);
}

/* 추가 상세 필터 그룹은 공통 컴포넌트 DetailFilterField 로 이관 */
@media (max-width: 480px) {
.documents-group[data-v-6b98ec83] {
    padding: var(--space-tight) var(--space-tight) var(--space-tight);
    margin-top: var(--gap-glyph);
    margin-bottom: var(--gap-glyph);
    gap: var(--gap-glyph);
}
.documents-group[data-v-6b98ec83]:first-child {
    margin-top: 0;
}
.documents-group-header[data-v-6b98ec83] {
    gap: var(--gap-glyph);
}
.documents-group-body[data-v-6b98ec83] {
    gap: var(--gap-glyph);
}
}
.page[data-v-bc9af234] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-bc9af234] {
  margin: 0;
}
.page__desc[data-v-bc9af234] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-bc9af234] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-bc9af234],
.page__card > .tab-nav[data-v-bc9af234] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-bc9af234] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-bc9af234] {
    padding: var(--space-snug);
}
}
.document-page-root[data-v-bc9af234] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important;
}
.document-page-root > .page__header[data-v-bc9af234] {
  margin-top: 0;
}
.document-page-root .page__desc[data-v-bc9af234] {
  margin-top: 0;
}
.document-page[data-v-bc9af234] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.document-page-root .page__card[data-v-bc9af234] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.document-page__tabs[data-v-bc9af234] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.document-page__tab-panels[data-v-bc9af234] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  padding: var(--space-cozy);
  touch-action: pan-y pinch-zoom; /* 수직 스크롤은 허용, 수평 스와이프는 제어 */
}
.document-page__tab-panel[data-v-bc9af234] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
@media (max-width: 480px) {
.document-page__tab-panels[data-v-bc9af234] {
    padding: var(--space-tight);
}
}


.help-tab[data-v-8f0c959e] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 헤더 — 아이콘 + 제목 + (닫기) */
.help-tab__header[data-v-8f0c959e] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.help-tab__header-icon[data-v-8f0c959e] {
  color: var(--ink-brand);
  font-size: var(--icon-label);
}
.help-tab__header-title[data-v-8f0c959e] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.help-tab__close[data-v-8f0c959e] {
  margin-left: auto;
}
.help-tab__body[data-v-8f0c959e] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-cozy) var(--space-roomy) var(--space-band);
}
.help-tab__intro[data-v-8f0c959e] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
}

/* 범례 — 점프 안내 등 */
.help-tab__legend[data-v-8f0c959e] {
  margin: 0 0 var(--gap-stack);
  padding: var(--space-tight) var(--space-snug);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  line-height: var(--line-snug);
  color: var(--ink-muted);
  background: var(--bg-field);
  border-radius: var(--radius-badge);
}
.help-tab__legend i[data-v-8f0c959e] {
  color: var(--ink-brand);
}
.help-tab__legend--muted[data-v-8f0c959e] {
  background: transparent;
  padding: 0 var(--space-tight);
}
.help-tab__legend--muted i[data-v-8f0c959e] {
  color: var(--ink-muted);
}

/* 목차 */
.help-tab__toc[data-v-8f0c959e] {
  margin-bottom: var(--gap-group);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-radius: var(--radius-control);
  border: var(--line-strong);
}
.help-tab__toc-title[data-v-8f0c959e] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.help-tab__toc-title i[data-v-8f0c959e] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.help-tab__toc-list[data-v-8f0c959e] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-stack);
}
.help-tab__toc-list li[data-v-8f0c959e] {
  font-size: var(--size-meta);
}
.help-tab__toc-link[data-v-8f0c959e] {
  color: var(--ink-brand);
  cursor: pointer;
  text-decoration: none;
}
.help-tab__toc-link[data-v-8f0c959e]:hover {
  text-decoration: underline;
}

/* 맨 위로 */
.help-tab__back-top[data-v-8f0c959e] {
  text-align: center;
  padding: var(--space-snug) 0 var(--space-tight);
}
.help-tab__back-top a[data-v-8f0c959e] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.help-tab__back-top a[data-v-8f0c959e]:hover {
  color: var(--ink-brand);
}


.help-tab__section {
  margin-bottom: var(--gap-group);
  padding-top: var(--space-tight);
}
.help-tab__section-title {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding-bottom: var(--space-snug);
  border-bottom: var(--line-strong);
}
.help-tab__section-title i {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}
.help-tab__subsection-title {
  margin: var(--gap-group) 0 var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.help-tab__subsection-title i {
  font-size: var(--icon-marker);
  color: var(--ink-brand);
}
.help-tab__text {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
}
.help-tab__list {
  margin: var(--gap-glyph) 0 var(--gap-inline);
  padding-left: var(--space-band);
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
}
.help-tab__list li {
  margin-bottom: var(--gap-glyph);
}
.help-tab__text strong,
.help-tab__list strong {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}

/* 카드 */
.help-tab__card {
  margin: var(--gap-inline) 0;
  padding: var(--pad-card-dense);
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  border-left: var(--line-accent) solid var(--ink-brand);
}
.help-tab__card--warn {
  border-left-color: var(--ink-warning);
}
.help-tab__card-title {
  margin: 0 0 var(--gap-glyph);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.help-tab__card-title i {
  font-size: var(--icon-marker);
  color: var(--ink-brand);
}
.help-tab__card--warn .help-tab__card-title i {
  color: var(--ink-warning);
}

/* 점프 링크 — 클릭 시 화면 영역 강조 (점선 밑줄) */
.help-jump {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.help-jump:hover {
  text-decoration-style: solid;
}

.list-refresh[data-v-26a9b473] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.list-refresh__action[data-v-26a9b473] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-md);
  padding: var(--pad-control);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-secondary);
  font-family: inherit;
  font-size: var(--size-label);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.list-refresh__action[data-v-26a9b473]:hover {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.list-refresh__action[data-v-26a9b473]:focus-visible {
  outline: var(--ring-focus);
  outline-offset: var(--space-tight);
}

/* 도는 것이 있어 스스로 따라가는 중 — 조용한 표시 하나면 된다. */
.list-refresh__action.is-live[data-v-26a9b473] {
  color: var(--ink-success);
}

/* 좁으면 아이콘만 — 이름은 툴팁(title)이 갖는다(사용자 지시 2026-09-13).
   ⛔ **두 축이 다 필요하다.** 목록 화면의 툴바 안에서는 머리줄 폭(`list-head`)이 정하고
      (열기탭을 켜면 툴바가 왼쪽 칸 안에 서는데 창은 그대로 넓다), 이 컨트롤을 툴바 밖에서
      혼자 쓰는 화면(모니터링·현황 판 9곳)에는 그 컨테이너가 없어 창 폭이 정한다.
      한쪽만 두면 반대쪽에서 글자가 남는다 — 실제로 그래서 새로고침만 글자가 남아 있었다. */
@container list-head (max-width: 768px) {
.list-refresh__label[data-v-26a9b473] { display: none;
}
.list-refresh__action[data-v-26a9b473] { padding: 0; width: var(--h-control-md); justify-content: center;
}
}
@media (max-width: 768px) {
.list-refresh__label[data-v-26a9b473] { display: none;
}
.list-refresh__action[data-v-26a9b473] { padding: 0; width: var(--h-control-md); justify-content: center;
}
}

.cdm[data-v-bc28309c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  /* ⛔ 모달은 열려 있는 동안 크기가 변하지 않는다 — 가장 높은 조합 기준으로 못 박는다(modal.md) */
  min-height: 28rem;
}
.cdm__head[data-v-bc28309c] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline) var(--gap-group);
  margin: 0;
}
.cdm__pair[data-v-bc28309c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.cdm__pair dt[data-v-bc28309c] {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
}
.cdm__pair dd[data-v-bc28309c] {
  margin: 0;
  min-width: 0;
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdm__summary[data-v-bc28309c] {
  margin: 0;
  color: var(--ink-primary);
}
.cdm__note[data-v-bc28309c] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--font-rel-sm);
}
/* 이전 값은 한 단 낮게, 이후 값이 지금이다 */
.cdm__old[data-v-bc28309c] {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.cdm__new[data-v-bc28309c] { color: var(--ink-primary);
}

.chp[data-v-2d5a8bb3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
}
/* 찾기 + 일괄작업 — 한 줄. 좁은 판에서도 단추가 줄어들지 않게 찾기만 늘어난다. */
.chp__toolbar[data-v-2d5a8bb3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.chp__toolbar[data-v-2d5a8bb3] > :first-child {
  flex: 1;
  min-width: 0;
}
.chp__screen[data-v-2d5a8bb3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.chp__screen i[data-v-2d5a8bb3] {
  color: var(--ink-muted);
  font-size: var(--icon-marker);
}
/* 내용 — 눌러서 자세히를 연다 */
.chp__what[data-v-2d5a8bb3] {
  cursor: pointer;
}
.chp__what[data-v-2d5a8bb3]:hover {
  text-decoration: underline;
}
/* 되돌린 것은 흐리게 — 지우지 않고 남기되 지금 상태가 아님을 보인다 */
.chp__undone[data-v-2d5a8bb3] {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* ⛔ 모달 안의 목록은 **키가 정해져 있어야 한다**(원본: AutoParsingFailuresModal 의 .apf).
   키가 없으면 목록이 내용만큼 자라 제 스크롤을 잃는다 — 그러면 ① 크롬에서 목록 위 휠이 죽고
   (목록 상자의 overscroll-behavior: contain 이 모달 본문으로 넘기지 않는다) ② 가상 스크롤이
   100줄을 한꺼번에 그리며 ③ 목록이 굴러가지 않아 다음 쪽(load-more)을 영영 안 부른다
   (실측 2026-09-12: 팩터 이력 131건 중 100건에서 멈춤). */
.chm[data-v-e714869f] {
  height: 56vh;
  min-height: 24rem;
}

.list-screen[data-v-589f26c9] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* 최대폭 제한 없음 — 넓은 화면에서도 좌우 여백은 --page-pad-x 로 상단과 동일하게 유지
     (상품정보/회사정보/ToDo 등 비-ListScreen 화면과 폭 정책 일치) */
  width: 100%;
  padding: var(--pad-page-x) var(--pad-page-x) 0;
  box-sizing: border-box;
  gap: var(--gap-inline);
}

/* 헤더 — 넓으면 한 줄, 좁으면 툴바가 줄바꿈해 우측 정렬.
   ⛔ **툴바가 좁은지는 창이 아니라 이 머리줄의 폭이 정한다**(`@container list-head`, 아래).
   창으로 재면 「리스트 ｜ 열기탭」처럼 판이 창보다 훨씬 좁은 자리에서 어긋난다 —
   창 1500px 인데 왼쪽 칸은 414px 이라, 창 기준으로는 영영 넓은 화면이다. */
.list-screen__header[data-v-589f26c9] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  container-type: inline-size;
  container-name: list-head;
}

/* 1차 분류 영역은 내용 폭을 유지(짓눌리지 않음). 툴바가 길면 헤더 flex-wrap 으로
   툴바가 다음 줄로 내려간다. */
.list-screen__lead[data-v-589f26c9] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}

/* 목록 바로 위 한 줄 설명 — 필터와 목록 사이. */
.list-screen__note[data-v-589f26c9] {
  margin: 0;
  display: flex;
  align-items: center;
  padding: var(--space-tight) 0 var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  min-width: 0;
}
.list-screen__title[data-v-589f26c9] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
}

/* 조회 결과 한 줄 — 같은 줄 오른쪽 툴바 버튼과 글꼴·높이를 맞춘다(AppButton md).
   탭 안에서는 이 줄이 헤더의 유일한 내용이라, 글씨가 작으면 줄 전체가 비어 보인다. */
.list-screen__summary[data-v-589f26c9] {
  /* 오른쪽 툴바 버튼과 글꼴·상자를 그대로 맞춘다(AppButton md: 14px/500, 32px).
     ⚠️ 상자 안에서 글자를 아래로 붙이면(flex-end) 글자가 버튼 글자보다 5px 내려앉는다 —
     맞춰야 하는 것은 상자가 아니라 글자 선이므로 버튼과 같이 가운데로 세운다.
     flex 가 아니라 line-height 로 세우는 이유: flex 로 두면 문장 조각(시각 span 등)이
     각각 flex item 이 되어 한 문장으로 안 읽힌다. */
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* 조회시각 — 문장이 아니라 곁다리 정보라 한 단계 흐리게(크기·굵기는 그대로). */
.list-screen__summary-at[data-v-589f26c9] {
  color: var(--ink-muted);
}

/* 툴바 구분자 — 「무엇을 보는가」와 「무엇을 하는가」를 가른다. */
.list-screen__toolbar-divider[data-v-589f26c9] {
  width: 1px;
  align-self: stretch;
  margin: var(--gap-glyph) var(--gap-glyph);
  background: var(--line-color);
}
.list-screen__toolbar[data-v-589f26c9] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  justify-content: flex-end;
  /* 분류 영역 오른쪽으로 밀착. 한 줄에 안 들어가면 헤더 flex-wrap 으로 다음 줄. */
  margin-left: auto;
}

/* 툴바 버튼은 공통 AppButton(variant=secondary, active) 사용 */
.list-screen__filters[data-v-589f26c9] {
  flex-shrink: 0;
}

/* 통계 패널 — **제 높이 그대로 선다. 줄이지도, 잘라내지도 않는다.**
   ⛔ 한때 목록에 자리를 내주라고 줄였더니(`flex-shrink:1` + `overflow-y:auto`)
   월별 출시 현황의 차트가 **아래가 잘려** 보였다(내용 680px 인데 411px 만 보임, 2026-09-04 실측).
   사용자 확정(2026-09-04): **통계는 다 보이고, 목록은 남는 만큼** 쓴다. 목록을 더 보고 싶으면
   툴바의 「통계」 단추로 통계를 접는다 — 그때 목록이 판 전체를 쓴다.
   스크롤은 그래도 목록이 갖는다(판은 안 굴러간다). */
.list-screen__stats[data-v-589f26c9] {
  flex-shrink: 0;
}
.list-screen__body[data-v-589f26c9] {
  /* flex 기본 min-width:auto 가 자식 내용(목록 하한 등)만큼 body 를 팽창시켜
     분리대 컨테이너 측정이 커지는 문제 차단 — 자식은 자체 스크롤로 대응한다. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ───── 도움말 도킹 드로어 ─────
   help 슬롯이 없으면 wrapper 는 display:contents — 본문이 .list-screen 의 직접 flex
   자식처럼 동작해 기존 화면 레이아웃과 100% 동일(무영향). help 가 있으면 좌(본문)|우(드로어) 행. */
.list-screen__body-wrap[data-v-589f26c9] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* ⛔ **본문에 하한을 두지 않는다** (사용자 확정 2026-09-04).
     통계가 우선이고 목록은 **남는 만큼**이다. 하한을 두면 그만큼 통계를 밀어내
     차트가 잘리고(여섯 줄일 때 680→411px), 하한이 창보다 크면 판이 넘쳐
     **메인에 스크롤바가 선다**(두 줄일 때도 111px 넘쳤다 — 월별 출시 현황 실측).
     목록을 넓게 보려면 툴바의 「통계」 단추로 통계를 접는다 — 그때 목록이 판 전체를 쓴다. */
  min-height: 0;
}
.list-screen__body-wrap.has-help[data-v-589f26c9] {
  flex-direction: row;
  position: relative; /* 모바일에서 드로어 overlay 앵커 */
}
.list-screen__help[data-v-589f26c9] {
  --help-width: 340px;
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  background: var(--bg-page);
  border-left: var(--line-w) solid transparent;
  box-shadow: none;
  transition: width var(--motion-base) ease, flex-basis var(--motion-base) ease, border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.list-screen__help.is-open[data-v-589f26c9] {
  flex: 0 0 var(--help-width);
  width: var(--help-width);
  border-left-color: var(--line-color);
  box-shadow: var(--shadow-float);
}
/* 내부 패널은 고정 폭 — 애니메이션 중 내용 리플로우 방지 */
.list-screen__help[data-v-589f26c9] > * {
  width: var(--help-width);
  height: 100%;
}
/* 도킹 도움말 헤더 높이를 본문 표 헤더 행(--list-row-h + 하단 보더 1px)과 정확히 맞춰,
   두 헤더의 구분선이 같은 y 에 오게 한다. (기본 패딩 8+8 보다 닫기 버튼 26px 가 커서
   2px 어긋나 구분선이 안 맞던 문제) */
.list-screen__help[data-v-589f26c9] .help-tab__header {
  height: calc(var(--h-row) + 1px);
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.list-screen__help[data-v-589f26c9] {
    transition: none;
}
}

/* 모바일(≤768): 드로어를 본문 위 우측 오버레이로 (좁은 폭 3분할 방지) */
@media (max-width: 768px) {
.list-screen__help.is-open[data-v-589f26c9] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    flex-basis: auto;
    z-index: var(--z-popover);
}
.list-screen__help.is-open[data-v-589f26c9] > * {
    width: 100%;
}
}

/* 좁은 **판**: 툴바 버튼을 아이콘만으로 축약하고 이름은 툴팁(title)이 갖는다
   (사용자 지시 2026-09-13 「좁아지면 툴바는 아이콘만 표시하자. 툴팁으로 설명은 제공하는 것이고」).
   ⛔ 창(`@media`)이 아니라 머리줄 폭(`@container list-head`)으로 잰다 — 열기탭을 켜면 툴바가
      왼쪽 칸 안에 서는데, 창은 그대로 넓어서 창 기준으로는 절대 안 걸린다.
   줄바꿈은 강제하지 않는다 — 헤더의 flex-wrap 이 공간이 부족할 때만 자연스럽게 내림.
   SortControl(.sort-control__field/__order)은 자체 모양을 가지므로 축약 대상에서 제외 —
   필드 선택 버튼은 현재 정렬 기준 라벨을 모바일에서도 보여줘야 한다. */
@container list-head (max-width: 768px) {
.list-screen__toolbar[data-v-589f26c9] .app-btn:not(.sort-control__field):not(.sort-control__order) .app-btn__label {
    display: none;
}

  /* 뱃지 버튼(.ls-filter-btn--badged)은 아래 예외 규칙이 폭을 키우므로 제외 —
     :not() 인자도 특이도에 들어가 이 규칙을 빼지 않으면 예외 규칙을 이겨버린다. */
.list-screen__toolbar[data-v-589f26c9]
    .app-btn:not(.sort-control__field):not(.sort-control__order):not(.ls-filter-btn--badged) {
    padding: 0;
    width: var(--h-control-md);
}

  /* 상세 필터 적용 개수가 있으면 아이콘만으로 축약하지 않고
     뱃지까지 담도록 폭을 키운다 — 적용 상태가 한눈에 보이도록. */
.list-screen__toolbar[data-v-589f26c9] .app-btn.ls-filter-btn--badged {
    width: auto;
    padding: 0 var(--space-cozy);
    gap: var(--gap-glyph);
}
}

/* === scroll='page' — 통계 영역이 큰 화면: 전체를 한 흐름으로 스크롤 ===
   기본('body') 은 바디만 내부 스크롤하지만, 통계 패널이 커서 한 화면에 안 담기는
   화면은 통계+필터+바디를 함께 스크롤한다. 헤더(툴바)는 sticky 로 항상 보이게 둔다. */
.list-screen--scroll-page[data-v-589f26c9] {
  overflow-y: auto;
  padding-top: 0;
  /* 끝에 닿은 뒤 더 끌어도 문서로 넘기지 않는다 — 넘기면 모바일에서 화면 전체가 밀린다. */
  overscroll-behavior: contain;
}

/* 헤더+필터 묶음 — 기본(scroll=body)은 box 를 만들지 않아 각자 flex 자식으로 동작 */
.list-screen__pinned[data-v-589f26c9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* 스크롤을 따라가는 동안은 transition 없이 1:1 이동(멈추면 그 자리). 수동 토글·
   비활성 복귀 같은 이산 이동일 때만 transition (useScrollLinkedHide 의 animating). */
.list-screen__pinned--animate[data-v-589f26c9] {
  transition: margin-top var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1), transform var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.list-screen__pinned--animate[data-v-589f26c9] {
    transition: none;
}
}

/* 모바일 자동 숨김 — body 모드: pinned 가 margin-top 음수로 위로 슬라이드하며 나가는 것을
   루트가 클립하도록 overflow:hidden, 투명 배경으로 인한 비침 방지용 surface 배경.
   (page 모드는 이미 overflow-y:auto 스크롤 뷰포트가 sticky 헤더를 클립하므로 제외) */
@media (max-width: 768px) {
.list-screen[data-v-589f26c9]:not(.list-screen--scroll-page) {
    overflow: hidden;
}
.list-screen:not(.list-screen--scroll-page) .list-screen__pinned[data-v-589f26c9] {
    background: var(--bg-page);
}
}

/* scroll=page: 헤더+필터를 한 덩어리로 상단 고정 → 통계·바디만 스크롤 */
.list-screen--scroll-page .list-screen__pinned[data-v-589f26c9] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  padding-top: var(--pad-page-x);
}

/* 바디는 남는 공간을 채우지 않고 자체 높이(ListBody clamp)를 그대로 쓴다.
   ⛔ **감싸개(`__body-wrap`)에도 같이 걸어야 한다** — 도움말 드로어를 붙이며 본문을 한 겹
   감쌌는데 이 규칙이 안쪽만 가리켜, 감싸개가 `flex:1 1 0` 인 채로 **높이 0** 이 되어
   본문이 통째로 안 보였다(2026-09-04 실측: 감싸개 0px 인데 안의 내용은 691px). */
.list-screen--scroll-page .list-screen__body[data-v-589f26c9],
.list-screen--scroll-page .list-screen__body-wrap[data-v-589f26c9] {
  flex: 0 0 auto;
}

/* ⛔ 좁다고 툴바를 **미리** 다음 줄로 내리지 않는다(사용자 지적 2026-09-13 「이러면 한 줄일 수 있잖아?」).
   한때 480px 아래에서 분류 영역과 툴바를 각각 `flex-basis: 100%` 로 못 박아 **언제나 두 줄**이었다.
   지금은 그 폭이면 툴바가 이미 아이콘만 남아(위 규칙) 400px 남짓한 판에도 한 줄에 다 선다 —
   진짜로 안 들어가는 때만 헤더의 `flex-wrap` 이 알아서 내린다. */

/* ⛔ scoped 가 아니다 — 이 컴포넌트는 render 함수라 scoped 표시가 자식(AppChip)에 닿지 않는다.
   그래서 클래스 이름으로 자리를 좁힌다. */
.list-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}

/* 뒤에 붙는 ✕ — 「누르면 이 조건이 풀린다」를 알리는 표시다(따로 누르는 단추가 아니다). */
.list-applied__x {
  margin-left: var(--space-tight);
  opacity: 0.65;
}

.list-filter-panel[data-v-324b34a6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-snug) 0;
}

/* 상시 노출 한 줄 — 컨트롤이 폭을 채우지 않으면 가운데 정렬. 키워드창은 너비 100%. */
.list-filter-panel__lead[data-v-324b34a6] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}

/* 상세 필터 영역 — 키워드창(있으면, 너비 100% 한 줄) + 필터 컨트롤 줄을 세로로 쌓음 */
.list-filter-panel__detail[data-v-324b34a6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* 필터 컨트롤 묶음 — 초기화 버튼도 마지막 컨트롤 뒤에 같이 나열. */
.list-filter-panel__detail-fields[data-v-324b34a6] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}

/* 상세 필터의 셀렉터는 고정폭 대신 값(선택 태그/플레이스홀더) 너비만큼만 차지한다.
   공통 규칙이라 화면별 width prop 과 무관하게 모든 화면의 상세 필터에 동일 적용된다.
   (MultiSelect 의 인라인 width 스타일을 덮기 위해 !important — 컨테이너 레이아웃 표준)
   ⚠️ 자식 결합자(>) 로 '직접 자식' 컨트롤(= detail-filter-raw 로 래핑 제외된 것)에만 적용한다.
   DetailFilterField 로 감싼 컨트롤의 wrapper 는 셸 내부(.detail-filter-field__control) 라 여기 매칭되지 않고,
   셸이 정한 width:100%(셸은 값 너비만큼 축소) 가 그대로 적용된다. */
.list-filter-panel__detail-fields[data-v-324b34a6] >  .multi-select-wrapper {
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100%;
}

.law-name[data-v-54ef497f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  min-width: 0;
}
.cell-num[data-v-54ef497f] {
  font-variant-numeric: tabular-nums;
  /* 그냥 세는 수는 목록 어디서나 --text-secondary 한 벌이다.
     색을 안 주면 셀 기본색(--text-primary)을 물려받아 이 화면만 희게 튄다
     (2026-08-22 lint:sameness 적발). */
  color: var(--ink-secondary);
}
.cell-sep[data-v-54ef497f] {
  /* 값 사이 구분자 — 전역 .text-aside 가 크기·색을 준다 */
  margin: 0 var(--gap-glyph);
}
.row-actions[data-v-54ef497f] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

.dx-detail[data-v-9c3a93f2] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.dx-detail__state[data-v-9c3a93f2] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-secondary);
}

/* 법령 상세(ReferenceLawDetailModal)의 머리 정보와 같은 짜임 —
   같은 화면에서 열리는 두 팝업이 다르게 보이면 그 자리만 튄다. */
.dx-detail__meta[data-v-9c3a93f2] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-band);
  margin: 0;
}
.dx-detail__row[data-v-9c3a93f2] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  min-width: 0;
}
.dx-detail__row dt[data-v-9c3a93f2] {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.dx-detail__row dd[data-v-9c3a93f2] {
  margin: 0;
  min-width: 0;
  color: var(--ink-primary);
  word-break: break-word;
}
.dx-detail__num[data-v-9c3a93f2] {
  font-variant-numeric: tabular-nums;
}
.dx-detail__section-title[data-v-9c3a93f2] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.dx-detail__synonyms[data-v-9c3a93f2] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.dx-detail__synonyms li[data-v-9c3a93f2] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  align-items: baseline;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
}
.dx-detail__synonym-ko[data-v-9c3a93f2] {
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.dx-detail__synonym-en[data-v-9c3a93f2] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dx-detail__presence[data-v-9c3a93f2] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.dx-detail__presence-item[data-v-9c3a93f2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
}
.dx-detail__presence-item--absent[data-v-9c3a93f2] {
  opacity: 0.55;
}
.dx-detail__presence-no[data-v-9c3a93f2] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* 설명은 왼쪽, 차수 고르는 것은 오른쪽 끝 — 문장과 조작을 갈라 둔다 */
.dl-note[data-v-937edd3f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-page);
  width: 100%;
  min-width: 0;
}
.dl-lead[data-v-937edd3f] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 상병기호는 자릿수로 읽는 값이라 폭이 고르게 — 목록에서 A00 / A0000 이 세로로 맞아야 훑힌다 */
.dx-code[data-v-937edd3f] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); /* AppBadge mono 와 같은 스택 */
}
.dx-name[data-v-937edd3f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.dx-name__line[data-v-937edd3f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  min-width: 0;
}
.dx-name__matched[data-v-937edd3f] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  min-width: 0;
}
.row-actions[data-v-937edd3f] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

.dbf[data-v-08b3c015] {
  display: flex;
  justify-content: center;
}
.dbf__svg[data-v-08b3c015] {
  display: block;
  width: auto;
  height: 428px;
  max-width: 100%;
}
@media (max-width: 768px) {
.dbf__svg[data-v-08b3c015] { height: 380px;
}
}

/* 부위 — 몸통색에 부위색을 섞어 칠한다. 불투명이라 겹쳐도 색이 섞이지 않는다. */
.dbf__zone[data-v-08b3c015] {
  cursor: pointer;
  fill: color-mix(in srgb, var(--zc) var(--zo, var(--disability-zone-rest)), var(--disability-figure)); /* css-ignore: --zc/--zo 는 디자인 토큰이 아니라 각 path 에 :style 로 꽂는 지역 변수(부위 색·농도) */
  stroke: color-mix(in srgb, var(--zc) 58%, var(--disability-figure-line)); /* css-ignore: 같은 지역 변수 */
  stroke-width: 0.45;
  stroke-opacity: 0.5;
  transition: fill var(--motion-fast), stroke-opacity var(--motion-fast);
}
.dbf__zone[data-v-08b3c015]:hover { --zo: var(--disability-zone-hover); stroke-opacity: 0.85;
}
.dbf__zone.is-on[data-v-08b3c015] { --zo: var(--disability-zone-on); stroke-opacity: 0.9;
}
.dbf__zone.is-active[data-v-08b3c015] { --zo: var(--disability-zone-active); stroke-opacity: 1; stroke-width: 0.7;
}
.dbf__zone[data-v-08b3c015]:focus-visible { outline: var(--focus-ring-width) solid var(--ink-brand);
}

/* 부피감 — 왼쪽에서 빛이 오는 아주 옅은 그라데이션.
   tokens-ignore-start: 빛과 그림자는 색이 아니라 **불투명도**다. 순백/순흑을 몇 % 얹는 것이라
   테마색으로 바꿀 대상이 없다(테마 대응은 아래 stop-opacity 재보정으로 한다). */
.dbf__v0[data-v-08b3c015] { stop-color: #fff; stop-opacity: 0;
}
.dbf__v1[data-v-08b3c015] { stop-color: #fff; stop-opacity: 0.08;
}
.dbf__v2[data-v-08b3c015] { stop-color: #000; stop-opacity: 0.02;
}
.dbf__v3[data-v-08b3c015] { stop-color: #000; stop-opacity: 0.05;
}
.dbf__v4[data-v-08b3c015] { stop-color: #000; stop-opacity: 0.10;
}
/* tokens-ignore-end */
html[data-theme='light'] { stop-opacity: 0.11;
}
html[data-theme='light'] { stop-opacity: 0.11;
}
html[data-theme='light'] { stop-opacity: 0.19;
}
.dbf__leader[data-v-08b3c015] {
  stroke: var(--line-color);
  stroke-width: 0.6;
  fill: none;
}
.dbf__tag[data-v-08b3c015] {
  font-size: var(--size-meta);
  fill: var(--ink-secondary);
  cursor: pointer;
}
.dbf__tag[data-v-08b3c015]:hover,
.dbf__tag.is-on[data-v-08b3c015],
.dbf__tag.is-active[data-v-08b3c015] { fill: var(--ink-brand);
}
.dbf__tag.is-on[data-v-08b3c015],
.dbf__tag.is-active[data-v-08b3c015] { font-weight: var(--weight-strong);
}
.dbf__pill rect[data-v-08b3c015] { fill: var(--ink-brand);
}
.dbf__tag-pill[data-v-08b3c015] { cursor: pointer;
}
.dbf__pill text[data-v-08b3c015] {
  font-family: var(--font-mono); /* AppBadge mono 와 같은 스택 */
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  /* 배경색을 글자에 쓴다 — 밝은 테마는 진한 초록 위 흰 글자, 어두운 테마는 밝은 초록 위 검정. */
  fill: var(--bg-page);
  text-anchor: middle;
}
.dbf__cues text[data-v-08b3c015] {
  font-size: var(--size-meta);
  fill: var(--ink-muted);
  letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
.dbf__zone[data-v-08b3c015] { transition: none;
}
}

.rdp[data-v-ccb6fba5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--space-cozy);
  overflow-y: auto;
  min-height: 0;
}

/* ⛔ **줄여서 맞추지 않는다 — 넘치면 굴린다.**
   이 패널은 높이가 정해진 칸 안에서 세로 flex 로 서고 스스로 스크롤한다. 그런데 flex 자식은 기본이
   `flex-shrink: 1` 이라, 내용이 칸보다 길면 스크롤이 생기기 전에 **자식들이 먼저 눌린다.** 눌린 칸은
   `min-height: 0`(아래 .rdp__card) 이라 바닥까지 찌그러지고, 그 안의 내용은 잘리지 않고 **아래 칸
   위로 넘쳐 겹친다** — 「말로 적기」의 입력칸·AI 버튼이 도해/항목 카드 위에 얹혀 보이던 증상이 이것이다
   (실측 2026-08-09: 말로 적기 35px 칸에 내용 127px, 근거표 118px 칸에 내용 446px).
   자식은 제 높이를 지키고 남는 것은 이 칸의 스크롤이 받는다. */
.rdp[data-v-ccb6fba5] > * { flex: none;
}
.rdp__head[data-v-ccb6fba5] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  align-items: flex-end;
  justify-content: space-between;
}

/* 결과 + 초기화 — 값 오른쪽에 버튼이 붙어 한눈에 들어온다 */
/* 초기화 — 세 칸과 **위아래 끝선을 맞춘다**. 옆에 얹힌 별개 버튼처럼 보이면 겉돈다
   (사용자 지적 2026-08-08). 높이를 카드에 맞추고 왼쪽 칸선만 그어 네 번째 칸처럼 세운다. */
.rdp__cell--reset[data-v-ccb6fba5] {
  align-self: stretch;          /* ← 위아래 끝선을 카드에 맞춘다 */
  height: auto;
  flex-direction: column;
  gap: var(--gap-glyph);
  border-radius: 0;
  border-left: var(--line-strong);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.rdp__cell--reset[data-v-ccb6fba5]:hover:not(:disabled) { background: var(--bg-field);
}
.rdp__cell--reset[data-v-ccb6fba5]:disabled { opacity: 0.45;
}
.rdp__cell-derived[data-v-ccb6fba5] {
  font-size: var(--size-meta);
  color: var(--ink-warning);
  font-weight: var(--weight-strong);
}
.rdp__lead h3[data-v-ccb6fba5] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-strong);
}
.rdp__lead p[data-v-ccb6fba5] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* 세 판 + 초기화를 한 테두리 안에 — 값과 그 값을 지우는 자리는 한 덩어리다 */
.rdp__triple[data-v-ccb6fba5] {
  display: flex;
  min-width: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-card);
}
.rdp__cell[data-v-ccb6fba5] {
  display: flex;
  flex-direction: column;
  padding: var(--pad-cell);
  min-width: 136px;
  border-left: var(--line-strong);
}
.rdp__cell[data-v-ccb6fba5]:first-child {
  border-left: 0;
  background: var(--bg-hover);
}
.rdp__cell-period[data-v-ccb6fba5] { font-size: var(--size-label); color: var(--ink-secondary);
}
.rdp__cell-name[data-v-ccb6fba5] { font-size: var(--size-meta); color: var(--ink-primary); font-weight: var(--weight-title);
}
.rdp__cell-value[data-v-ccb6fba5] {
  font-family: var(--font-mono); /* AppBadge mono 와 같은 스택 */
  font-size: var(--size-title-lg);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
  color: var(--ink-brand);
  font-variant-numeric: tabular-nums;
}
.rdp__cell.is-dim .rdp__cell-value[data-v-ccb6fba5] { color: var(--ink-muted);
}
.rdp__cell-note[data-v-ccb6fba5] { font-size: var(--size-label); color: var(--ink-secondary);
}
.rdp__error[data-v-ccb6fba5] {
  margin: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-field);
  color: var(--ink-danger);
  font-size: var(--size-meta);
}

/* 도해 칸은 넓어질 이유가 없다 — 인체 그림은 높이가 정해져 있고 범례는 두 줄씩 접히면 된다.
   화면이 넓어지면 남는 폭은 **항목 목록**이 가져간다(장해의 분류 문구가 길다).
   ⚠️ 상한을 안 두면 넓은 화면에서 범례가 한 줄에 셋씩 늘어서 옆으로만 퍼지고,
      그 옆 인체 그림 아래는 텅 빈 채 카드만 커진다(실측 2026-08-07). */
/* ⚠️ 두 카드의 **높이를 맞춘다**(align-items: stretch, 기본값).
   `start` 로 두었더니 항목 카드가 내용만큼만 줄어, 부위를 안 고른 상태에서 도해 카드보다
   훨씬 짧아지고 그 아래 테두리가 허공에 뜬 선처럼 보였다(사용자 지적 2026-08-08). */
.rdp__main[data-v-ccb6fba5] {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: var(--gap-stack);
}
@media (max-width: 1024px) {
.rdp__main[data-v-ccb6fba5] { grid-template-columns: 1fr;
}
}
.rdp__card[data-v-ccb6fba5] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.rdp__card-head[data-v-ccb6fba5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.rdp__card-head h4[data-v-ccb6fba5] {
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
}
.rdp__meta[data-v-ccb6fba5] { font-size: var(--size-meta); color: var(--ink-muted);
}
.rdp__figbody[data-v-ccb6fba5] {
  display: flex;
  gap: var(--gap-stack);
  align-items: flex-start;
  padding: var(--space-cozy);
}
@media (max-width: 768px) {
.rdp__figbody[data-v-ccb6fba5] { flex-direction: column; align-items: center;
}
}
.rdp__legend[data-v-ccb6fba5] { flex: 1; min-width: 0;
}
.rdp__legend h5[data-v-ccb6fba5] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-strong);
}
.rdp__legend-list[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph);
}
.rdp__swatch[data-v-ccb6fba5] {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-badge);
  margin-right: var(--gap-glyph);
  vertical-align: -1px;
}
.rdp__dot[data-v-ccb6fba5] {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
  margin-left: var(--gap-glyph);
  vertical-align: middle;
}
.rdp__search[data-v-ccb6fba5] { padding: var(--space-snug) var(--space-cozy) 0;
}
.rdp__item-text[data-v-ccb6fba5] { display: inline-flex; flex-wrap: wrap; gap: var(--gap-glyph); align-items: baseline;
}
.rdp__item-part[data-v-ccb6fba5] { font-size: var(--size-meta); color: var(--ink-muted); font-style: normal;
}

/* 고른 항목의 속내 — 세 판 대응 · 판정기준 · 측정치 */
.rdp__detail[data-v-ccb6fba5] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.rdp__editions[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph);
}
.rdp__edition[data-v-ccb6fba5] {
  flex: 1 1 150px;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-page);
}
.rdp__edition.is-missing[data-v-ccb6fba5] { opacity: 0.6;
}
.rdp__edition-head[data-v-ccb6fba5] {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-weight: var(--weight-strong);
}
.rdp__edition-head b[data-v-ccb6fba5] {
  font-family: var(--font-mono); /* AppBadge mono 와 같은 스택 */
  color: var(--ink-brand);
}
.rdp__edition.is-missing .rdp__edition-head b[data-v-ccb6fba5] { color: var(--ink-muted);
}
.rdp__edition p[data-v-ccb6fba5] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.rdp__edition em[data-v-ccb6fba5] { color: var(--ink-muted); font-style: normal;
}
.rdp__criteria[data-v-ccb6fba5] {
  padding: var(--space-snug);
  border-left: var(--line-w-thick) solid var(--line-color);
  background: var(--bg-page);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.rdp__label[data-v-ccb6fba5] {
  font-size: var(--size-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-strong);
}
.rdp__criteria p[data-v-ccb6fba5] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-relaxed);
}
.rdp__muted[data-v-ccb6fba5] { color: var(--ink-muted);
}
.rdp__cases[data-v-ccb6fba5] { list-style: none; margin: 0; padding: var(--space-snug) var(--space-cozy); display: flex; flex-direction: column; gap: var(--gap-inline);
}
.rdp__case[data-v-ccb6fba5] { padding: var(--space-snug); border-left: var(--line-w-thick) solid var(--line-color); background: var(--bg-field); border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.rdp__case-head[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-glyph); font-size: var(--size-meta);
}
.rdp__case-head a[data-v-ccb6fba5] { color: var(--ink-brand); font-weight: var(--weight-strong); text-decoration: none;
}
.rdp__case-head a[data-v-ccb6fba5]:hover { text-decoration: underline;
}
.rdp__case-head em[data-v-ccb6fba5] { color: var(--ink-muted); font-style: normal;
}
.rdp__case-id[data-v-ccb6fba5] { font-weight: var(--weight-strong); color: var(--ink-secondary);
}

/* 판례의 인정 지급률 — 우리 시산값(초록 큰 숫자)과 **다른 옷**을 입힌다 */
.rdp__case-rate[data-v-ccb6fba5] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  border: var(--line-w) dashed var(--line-color);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.rdp__case-src[data-v-ccb6fba5] { margin: var(--gap-glyph) 0 0; font-size: var(--size-meta); color: var(--ink-muted); font-style: italic;
}
.rdp__case p[data-v-ccb6fba5] { margin: var(--gap-glyph) 0 0; font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-relaxed);
}
.rdp__cases-note[data-v-ccb6fba5] { margin: 0; padding: 0 var(--space-cozy) var(--space-cozy); font-size: var(--size-label); color: var(--ink-secondary);
}
.rdp__disclaimer[data-v-ccb6fba5] {
  margin-top: var(--gap-stack);
  padding: var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-field);
}
.rdp__disclaimer p[data-v-ccb6fba5] { margin: 0 0 var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-relaxed);
}
.rdp__disclaimer .rdp__stamp[data-v-ccb6fba5] { color: var(--ink-secondary); font-family: var(--font-mono);
}
.rdp__say-toggle[data-v-ccb6fba5] { padding-left: 0;
}
.rdp__edfilter[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph); padding: var(--space-snug) var(--space-cozy) 0;
}
.rdp__card-head.is-collapsed[data-v-ccb6fba5] { border-bottom: 0;
}

/* ⚠️ **선이 두 겹으로 보이는 자리를 한 규칙으로 쓸어낸다.**
   카드 안 마지막 요소가 아래 선을 가지면(목록 머리줄·판정기준 바 등) 카드 테두리와 1px 사이를
   두고 나란히 서서 2px 짜리 굵은 띠가 된다. 1px 끌어올려 두 선을 한 줄로 포갠다.
   (사용자 지적 2026-08-08 — 세 곳에서 같은 증상이 났다: 접힌 카드 아래, 판정기준 바 위,
    항목이 없을 때 목록 머리줄 아래) */
.rdp__card[data-v-ccb6fba5] > :last-child { margin-bottom: var(--gap-glyph);
}

/* 입력칸 + AI 버튼 한 줄 — 버튼은 오른쪽에 붙고 **입력칸과 위아래 끝선을 맞춘다**.
   좁아지면 아래로 내려간다. 결과 문구는 카드 머리로 보내 버튼 높이를 건드리지 않는다. */
.rdp__say-input[data-v-ccb6fba5] { display: flex; align-items: stretch; gap: var(--gap-inline); flex-wrap: wrap;
}
.rdp__say-input[data-v-ccb6fba5] .app-textarea { flex: 1 1 320px; min-width: 0;
}
.rdp__say-ask[data-v-ccb6fba5] { height: auto; align-self: stretch;
}
.rdp__say-error[data-v-ccb6fba5] { font-size: var(--size-meta); color: var(--ink-danger); font-style: normal;
}
.rdp__say-ai[data-v-ccb6fba5] { font-size: var(--size-meta); color: var(--ink-muted); font-style: normal;
}
.rdp__say-body[data-v-ccb6fba5] { display: flex; flex-direction: column; gap: var(--gap-inline); padding: var(--space-cozy);
}
.rdp__say-out[data-v-ccb6fba5] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.rdp__clause[data-v-ccb6fba5] {
  padding: var(--space-snug);
  border-left: var(--line-w-thick) solid var(--line-color);
  background: var(--bg-page);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.rdp__clause-head[data-v-ccb6fba5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.rdp__clause-text[data-v-ccb6fba5] { font-weight: var(--weight-strong); color: var(--ink-primary);
}
.rdp__clause-head em[data-v-ccb6fba5] { color: var(--ink-muted); font-style: normal;
}
.rdp__clause-list[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph); margin-top: var(--gap-inline);
}
.rdp__measure[data-v-ccb6fba5] { display: flex; flex-wrap: wrap; gap: var(--gap-inline); align-items: center;
}
.rdp__measure-field[data-v-ccb6fba5] {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;              /* 라벨·입력·단위는 한 줄이다 */
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* ⚠️ AppNumberInput 은 기본이 width:100% 라 flex 안에서 끝까지 늘어난다.
   그러면 옆의 라벨이 「각 변 / 형」처럼 글자 단위로 접히고 단위 문구도 두 줄이 된다
   (실측 2026-08-08). 숫자 몇 자리만 받는 칸이므로 폭을 글자수로 못 박는다. */
.rdp__measure-field[data-v-ccb6fba5] .app-number-input { width: 8ch; flex: none;
}
.rdp__measure-field > span[data-v-ccb6fba5],
.rdp__measure-field em[data-v-ccb6fba5] { white-space: nowrap;
}
.rdp__measure-field em[data-v-ccb6fba5] { color: var(--ink-muted); font-style: normal;
}

/* ⚠️ 위 테두리를 긋지 않는다. 목록 마지막 행이 이미 아래 테두리를 그어서, 둘이 맞붙으면
   2px 짜리 굵은 선이 된다(사용자 지적 2026-08-08). 배경색 차이만으로 충분히 갈린다. */
.rdp__crit[data-v-ccb6fba5] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
}
.rdp__crit summary[data-v-ccb6fba5] {
  cursor: pointer;
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  color: var(--ink-secondary);
}
.rdp__crit ul[data-v-ccb6fba5] {
  margin: var(--gap-inline) 0 0;
  /* 번호는 원문이 갖고 있다 — 목록 자동 마커를 끄고 들여쓰기만 준다 */
  list-style: none;
  padding-left: var(--space-snug);
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-relaxed);
}
.rdp__crit li[data-v-ccb6fba5] {
  /* 줄이 넘칠 때 둘째 줄이 원문 번호 아래로 파고들지 않게 매단다 */
  padding-left: var(--space-cozy);
  text-indent: calc(-1 * var(--space-cozy));
  margin-top: var(--gap-glyph);
}

/* 원문의 하위 층(가)·나)…) — 한 칸 더 들여써 윗줄에 속함이 보이게 */
.rdp__crit li.is-sub[data-v-ccb6fba5] { margin-left: var(--gap-group);
}
.rdp__dropped[data-v-ccb6fba5] { color: var(--ink-muted); text-decoration: line-through;
}

/* 「확인 필요」 표 — 값 옆에 붙어 이 숫자를 그대로 믿으면 안 된다고 알린다 */
.rdp__flag[data-v-ccb6fba5] {
  color: var(--ink-warning);
  font-weight: var(--weight-strong);
  cursor: help;
}
.rdp__notes[data-v-ccb6fba5] { display: flex; flex-direction: column; gap: var(--gap-glyph); padding: var(--space-cozy);
}
.rdp__note[data-v-ccb6fba5] {
  margin: 0;
  padding: var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  background: var(--bg-page);
  border-left: var(--line-w-thick) solid var(--ink-brand);
  line-height: var(--line-comfortable);
}
.rdp__note b[data-v-ccb6fba5] { color: var(--ink-brand);
}
.rdp__note.is-warn[data-v-ccb6fba5] { border-left-color: var(--ink-warning);
}
.rdp__note.is-warn b[data-v-ccb6fba5] { color: var(--ink-warning);
}
.rdp__note.is-bad[data-v-ccb6fba5] { border-left-color: var(--ink-danger);
}
.rdp__note.is-bad b[data-v-ccb6fba5] { color: var(--ink-danger);
}
.rdp__source[data-v-ccb6fba5] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  line-height: var(--line-comfortable);
}

.pm[data-v-be225bd4] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 0;
}
.pm__head[data-v-be225bd4] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-inline) var(--gap-group);
  margin: 0;
}
.pm__head dt[data-v-be225bd4] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-bottom: var(--gap-glyph);
}
.pm__head dd[data-v-be225bd4] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.pm__mono[data-v-be225bd4] {
  font-variant-numeric: tabular-nums;
}
.pm__mono--strong[data-v-be225bd4] {
  font-weight: var(--weight-title);
  color: var(--ink-brand);
}
.pm__muted[data-v-be225bd4] {
  color: var(--ink-muted);
}

/* 탭 안쪽만 스크롤한다 — 팝업 높이는 고정 */
.pm__pane[data-v-be225bd4] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 46vh;
}
.pm__lead[data-v-be225bd4] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

.pc-lead[data-v-d176974c] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.pc-num[data-v-d176974c] {
  font-variant-numeric: tabular-nums;
}
.pc-code[data-v-d176974c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-title);
}
.pc-name[data-v-d176974c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}

/* 산정명칭('제2의수술', '야간')은 이름이 아니라 그 파생이 무엇인지다 — 작게 붙인다 */
.pc-calc[data-v-d176974c] {
  font-style: normal;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 옆 필터들과 같은 껍데기(테두리·라운드·높이)를 두른다 — 혼자 맨몸이면 붕 떠 보인다.
   라벨 칸과 ✕ 는 없다(켜고 끄는 것이 전부라 지울 값이 없다, 사용자 확정 2026-08-10).
   ⚠️ 값은 DetailFilterField 와 같은 토큰을 쓴다 — 따로 재면 그 자리만 어긋난다. */
.pc-derived[data-v-d176974c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-height: var(--h-control-md);
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast);
}
.pc-derived[data-v-d176974c]:hover,
.pc-derived[data-v-d176974c]:focus-within {
  border-color: var(--ink-brand);
}


/* 관리자 설정 화면과 같은 짜임 — 탭 아래가 한 덩어리로 남은 높이를 채운다.
   ⚠️ .page 부터 flex 로 세워야 한다. 이 화면은 views/shared.css 를 import 하지 않아
   .page 가 아무 규칙도 못 받는 맨 블록 박스였고, 그러면 아래 .page__card 의
   `flex:1; min-height:0` 이 통째로 무의미해져 높이 사슬이 첫 칸에서 끊긴다.
   그 결과 목록이 내용만큼(진단코드 44,846건 → 2,400px+) 부풀어 화면 밖으로 잘리고
   ListBody 의 스크롤러는 넘칠 일이 없어 스크롤바가 아예 생기지 않았다. */
.page[data-v-d3b9d8e4] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.page__card[data-v-d3b9d8e4] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tabs-content[data-v-d3b9d8e4] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tab-pane[data-v-d3b9d8e4] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tab-pane[data-v-d3b9d8e4] > * {
  width: 100%;
}

/* 하위 탭 아래도 같은 높이 사슬을 이어야 한다 — 여기서 끊으면 목록이 내용만큼 부풀어
   ListBody 의 스크롤러가 생기지 않는다(위 .page 주석과 같은 사고). */
.tab-pane__sub[data-v-d3b9d8e4] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다(shared.css 와 같은 규칙 — 이 화면은
   shared.css 를 import 하지 않으므로 여기에 둔다). 밑줄 띠는 그대로 끝까지 간다. */
.page__card[data-v-d3b9d8e4] >  .tab-nav {
  padding-inline: var(--pad-page-x);
}

.ups[data-v-2a4cdfb3] {
  display: flex;
  align-items: center;
}
.ups__item[data-v-2a4cdfb3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--line-w-thick) solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform var(--motion-fast) ease;
}
/* 겹침 — 뒤 요소가 자연히 위에 그려지므로 z-index 불필요 */
.ups__item + .ups__item[data-v-2a4cdfb3] {
  margin-left: calc(var(--space-snug) * -1);
}
.ups__item[data-v-2a4cdfb3]:hover {
  transform: scale(1.12);
}
.ups__item--current[data-v-2a4cdfb3] {
  border-color: var(--ink-brand);
}

.avs[data-v-6ae5ea47] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.avs-bar[data-v-6ae5ea47] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background-color: var(--bg-card);
  /* ⛔ 축약은 **창이 아니라 이 바의 폭**이 정한다 — 열기영역이 중첩 분할되면서 창은 1600px 인데
     바는 440px 인 자리가 생겼다(2026-09-13 실측: 좌우로 나눈 뒤 오른쪽을 다시 상하로 나눈 모습에서
     압축 편집기의 「다운로드」가 잘려 있었다). 창 기준 규칙은 그런 자리에 아예 걸리지 않는다 —
     목록 툴바에서 이미 같은 일을 겪고 판 기준으로 옮겼다(ListScreen 의 `list-head`). */
  container-type: inline-size;
  container-name: viewer-bar;
}
.avs-bar__info[data-v-6ae5ea47] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
/* ⛔ 색을 여기서 칠하지 않는다 — 종류가 정한다(전역 `styles/file-type-icons.css`). */
.avs-bar__name[data-v-6ae5ea47] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avs-bar__meta[data-v-6ae5ea47] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}
.avs-bar__actions[data-v-6ae5ea47] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-shrink: 0;
}
/* 뷰어 컨트롤 자리 — 비어 있을 때는 자리를 차지하지 않는다(PDF 처럼 자체 컨트롤이 없는 뷰어) */
.avs-bar__viewer[data-v-6ae5ea47]:empty {
  display: none;
}
/* 좁은 «판»: 파일 바의 단추를 아이콘만으로 줄인다(title 이 툴팁 몫).
   원본: components/common/list-screen/ListScreen.vue 의 「좁은 화면: 툴바 버튼을 아이콘만으로 축약」.
   다른 점: 단(1024)이 하나 넓다 — 이 바는 한 줄을 지켜야 하는데(뷰어 컨트롤 포털)
   원격 탐색기처럼 단추가 여섯인 뷰어는 1024 에서 이미 바가 넘친다(실측 2026-09-13:
   1440·1280 안 넘침 / 1024·768 넘침). ⛔ 넘친다고 단추를 sm 으로 낮추지 않는다 —
   그러면 높이만 낮고 글자는 그대로라 답답해 보인다(이 파일 머리의 실사고).
   :deep() 는 포털로 실려 온 뷰어 컨트롤까지 닿게 하려는 것이다(그 조각은 다른 파일이 만든다). */
/* 곁들이는 값(크기·시각)은 이름보다 먼저 물러난다 — 바가 좁아지면 감춘다.
   ⛔ 감추지 않으면 `white-space: nowrap` 이라 **줄지 못해 옆으로 삐져나온다**
      (실측 2026-09-13, 창 1024 의 분할 칸: 자리는 96px 인데 113px 를 썼다).
      이름은 말줄임으로 줄고 있었는데 이 값이 그 자리를 끝까지 붙들고 있었다. */
@container viewer-bar (max-width: 560px) {
.avs-bar__meta[data-v-6ae5ea47] {
    display: none;
}
}
@container viewer-bar (max-width: 1024px) {
  /* 글자 자체가 값인 단추(HWP 배율 「100%」)는 줄이지 않는다 — 줄이면 빈 네모만 남는다.
     ListScreen 이 정렬 기준 단추(.sort-control__field)를 뺀 것과 같은 이유다. */
.avs-bar__actions[data-v-6ae5ea47] .app-btn:not(.hv__zoom) .app-btn__label {
    display: none;
}
.avs-bar__actions[data-v-6ae5ea47] .app-btn:not(.hv__zoom) {
    padding: 0;
    width: var(--h-control-md);
}
}

/* 바 왼쪽을 가져다 쓰는 자리(구획 탭) — 대부분의 뷰어는 비워 두므로 자리를 차지하지 않는다 */
.avs-bar__lead[data-v-6ae5ea47] {
  display: flex;
  align-items: center;
  min-width: 0;
}
.avs-bar__lead[data-v-6ae5ea47]:empty {
  display: none;
}
.avs-body[data-v-6ae5ea47] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.avs-body[data-v-6ae5ea47] >  * {
  flex: 1 1 auto;
  min-height: 0;
}
.avs-state[data-v-6ae5ea47] {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  font-size: var(--size-body);
  padding: var(--space-band);
  text-align: center;
}
.avs-state__icon[data-v-6ae5ea47] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.avs-state__icon--danger[data-v-6ae5ea47] {
  color: var(--ink-danger);
}
.avs-state__title[data-v-6ae5ea47] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.avs-state__hint[data-v-6ae5ea47] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.trm[data-v-e35bb359] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.trm-toolbar[data-v-e35bb359] { display: flex; align-items: center; gap: var(--gap-inline);
}
.trm-search[data-v-e35bb359] { flex: 1; min-width: 0;
} /* 새로고침 앞까지 확장 */
.trm-body[data-v-e35bb359] {
  height: min(420px, 55vh); /* css-ignore: 모달 리스트 고정 높이(뷰포트 상한, 치수 토큰 없음) */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.trm-body[data-v-e35bb359] >  .list-body { flex: 1; min-height: 0;
}
.trm-actions[data-v-e35bb359] { display: flex; width: 100%; gap: var(--gap-glyph); justify-content: flex-end;
}
.trm-del-icon[data-v-e35bb359] { color: var(--ink-secondary);
}
.trm-actions[data-v-e35bb359] .app-btn:hover .trm-del-icon { color: var(--ink-danger);
}
.trm-hint[data-v-e35bb359] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}

/* 좁은 폰: '비우기' 라벨+버튼들이 검색창을 짓누르므로 검색을 한 줄 통째로 내림 */
@media (max-width: 480px) {
.trm-toolbar[data-v-e35bb359] { flex-wrap: wrap;
}
.trm-search[data-v-e35bb359] { flex-basis: 100%;
}
}

.aftp[data-v-15cc0c09] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.aftp__search[data-v-15cc0c09] { flex-shrink: 0;
}
.aftp__list[data-v-15cc0c09] {
  /* 고정 높이 — 폴더 펼침/필터/선택으로 내용이 바뀌어도 피커(따라서 모달) 크기가 변하지 않게.
     내용이 많으면 내부 스크롤. (모달 전체에 스크롤이 생기지 않도록 약간 낮춤) */
  height: 220px;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-tight);
}
/* fill — 고정 높이 대신 부모의 남은 높이를 채운다. 스크롤은 이 목록 안에서만 생기고
   부모(모달 본문)에는 스크롤이 생기지 않는다. 최소 높이는 남겨 아주 낮은 화면에서 사라지지 않게. */
.aftp--fill[data-v-15cc0c09] { flex: 1 1 0; min-height: 0;
}
.aftp--fill .aftp__list[data-v-15cc0c09] {
  height: auto;
  flex: 1 1 0;
  min-height: 7.5rem;
}
.aftp__row[data-v-15cc0c09] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-row-dense);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  cursor: pointer;
}
.aftp__indent[data-v-15cc0c09] { flex-shrink: 0;
}
.aftp__caret[data-v-15cc0c09] {
  flex-shrink: 0;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  border-radius: var(--radius-badge);
}
.aftp__caret[data-v-15cc0c09]:hover { background: var(--bg-hover); color: var(--ink-primary);
}
.aftp__caret-sp[data-v-15cc0c09] { flex-shrink: 0; width: 20px;
}
.aftp__icon[data-v-15cc0c09] { color: var(--ink-brand); flex-shrink: 0; margin-left: var(--gap-glyph);
}
.aftp__name[data-v-15cc0c09] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aftp__empty[data-v-15cc0c09] { padding: var(--pad-card); text-align: center; color: var(--ink-muted); font-size: var(--size-label);
}
.aftp__row[data-v-15cc0c09]:hover { background: var(--bg-hover);
}
.aftp__row[data-v-15cc0c09]:focus-visible { outline: var(--focus-ring-width) solid var(--ink-brand); outline-offset: -2px;
}
.aftp__row.is-selected[data-v-15cc0c09] { background: var(--bg-active); color: var(--ink-brand); font-weight: var(--weight-title);
}
.aftp__row.is-selected .aftp__icon[data-v-15cc0c09] { color: var(--ink-brand);
}
/* 필터 경로 맥락(조상, 비선택) — 흐리게, 커서 기본 */
.aftp__row.is-context[data-v-15cc0c09] { cursor: default; color: var(--ink-muted);
}
.aftp__row.is-context[data-v-15cc0c09]:hover { background: transparent;
}
.aftp__row.is-context .aftp__icon[data-v-15cc0c09] { color: var(--ink-muted);
}

/* 가장 높은 조합(실측: SFTP+개인키 = 콘텐츠 399px) 기준으로 못 박은 높이 —
   종류(SFTP/S3)·인증(비밀번호/개인키)을 바꿔도 높이가 안 출렁인다(모달 표준).
   상태 간 자연 높이 차를 먼저 줄여(개인키 2줄) 최저 상태의 예약 빈칸이 한 줄 반을 넘지 않는다. */
.rcm[data-v-7d31cfb5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 25rem;
}
/* 수정 모드 — 파일 이름 행이 없다(실측 최고 355px). 모드는 열려 있는 동안 안 바뀐다. */
.rcm--edit[data-v-7d31cfb5] {
  min-height: 22.25rem;
}
.rcm-field[data-v-7d31cfb5] {
  display: flex;
  align-items: center; /* 한 줄 컨트롤(입력·칩·체크박스)과 라벨을 세로 중앙 정렬 */
  gap: var(--gap-stack);
}
/* 여러 줄 컨트롤(개인키 textarea)은 위 맞춤 — 라벨이 첫 줄 옆에 선다 */
.rcm-field--top[data-v-7d31cfb5] {
  align-items: flex-start;
}
.rcm-field--top > .rcm-label[data-v-7d31cfb5] {
  padding-top: var(--space-snug);
}
.rcm-field > .rcm-label[data-v-7d31cfb5] {
  flex: 0 0 96px;
  text-align: left;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.rcm-field[data-v-7d31cfb5] > *:not(.rcm-label) {
  flex: 1 1 auto;
  min-width: 0;
}
.rcm-choice[data-v-7d31cfb5] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
  padding-top: var(--space-tight);
}
.rcm-name[data-v-7d31cfb5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.rcm-ext[data-v-7d31cfb5] {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--size-label);
}
.rcm-hostport[data-v-7d31cfb5] {
  display: flex;
  gap: var(--gap-inline);
}
.rcm-port[data-v-7d31cfb5] {
  flex: 0 0 92px;
}
.rcm-key[data-v-7d31cfb5] textarea {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}

/* 세 판 중 가장 높은 조합 기준으로 못 박은 높이 — 탭·엔진·갈래를 바꿔도 높이가 안 출렁인다(모달 표준).
   실측 2026-09-12(브라우저 셋, 창 1600×980): 가장 높은 것은 «풀·실행 제한» 판이고
   Chromium 529 · WebKit 528 · Firefox 531px 이라 그 위인 33.25rem(532px)으로 못 박았다.
   ⛔ 만들기·수정을 갈라 두지 않는다 — 파일 이름 행은 «접속 정보» 판에 있어 가장 높은 판을 안 건드린다
      (그래서 두 모드의 최고 높이가 같다). 전에는 둘 다 27rem(432px)이라 하한이 아예 안 걸렸고,
      탭마다 모달이 574 / 583~620 / 671px 로 세 갈래였다. */
.rcm[data-v-4a7f4276] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 33.25rem;
}
.rcm-pane[data-v-4a7f4276] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
/* 메모 판 — 결과 띠가 접힌 자리까지 글 상자가 받는다(그래야 모달 높이가 그대로다) */
.rcm-pane--memo[data-v-4a7f4276] {
  flex: 1 1 auto;
  min-height: 0;
}
/* AppTextarea 의 뿌리가 곧 textarea 다 — 칸을 남김없이 채우게 한다(rows 로 재지 않는다) */
.rcm-memo[data-v-4a7f4276] {
  flex: 1 1 auto;
  min-height: 0;
}
.rcm-memo-count[data-v-4a7f4276] {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.rcm-field[data-v-4a7f4276] {
  display: flex;
  align-items: center; /* 한 줄 컨트롤(입력·칩·고르개)과 라벨을 세로 중앙 정렬 */
  gap: var(--gap-stack);
}
/* 여러 줄 컨트롤(연결 속성 textarea)은 위 맞춤 — 라벨이 첫 줄 옆에 선다 */
.rcm-field--top[data-v-4a7f4276] {
  align-items: flex-start;
}
.rcm-field--top > .rcm-label[data-v-4a7f4276] {
  padding-top: var(--space-snug);
}
.rcm-field > .rcm-label[data-v-4a7f4276] {
  flex: 0 0 96px;
  text-align: left;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.rcm-field[data-v-4a7f4276] > *:not(.rcm-label) {
  flex: 1 1 auto;
  min-width: 0;
}
.rcm-choice[data-v-4a7f4276] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
  padding-top: var(--space-tight);
}
/* 엔진 고르개의 벤더 로고 — MultiSelect 기본 아이콘과 같은 자리·같은 크기(목록 16 · 고른 값 14).
   로고가 없는 엔진은 같은 자리에 DB 글리프가 서서 줄이 어긋나지 않는다. */
.rcm-engine-logo[data-v-4a7f4276] {
  width: var(--icon-toolbar);
  height: var(--icon-toolbar);
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  text-align: center;
}
.rcm-engine-logo--glyph[data-v-4a7f4276] {
  font-size: var(--icon-label);
  line-height: var(--icon-toolbar);
  color: var(--ink-secondary);
}
.rcm-name[data-v-4a7f4276] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.rcm-ext[data-v-4a7f4276] {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--size-label);
}
.rcm-empty[data-v-4a7f4276] {
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.rcm-hostport[data-v-4a7f4276] {
  display: flex;
  gap: var(--gap-inline);
}
.rcm-port[data-v-4a7f4276] {
  flex: 0 0 92px;
}
.rcm-key[data-v-4a7f4276] textarea {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}

/* ── 연결 테스트 결과 띠 ──
   ⛔ 높이는 상태와 무관하게 같다. 대기·안내는 한 줄, 성공은 세 줄이라 자리를 안 잡아 두면
      [연결 테스트]를 누를 때마다 모달이 자라고 단추가 손끝에서 도망간다(모달 표준).
   ⛔ flow-root — 마지막 자식의 아래 여백이 밖으로 새면 자리를 잡아도 띠가 더 커진다. */
.rcm-result[data-v-4a7f4276] {
  display: flow-root;
  margin-top: auto;
  min-height: 5.5rem;
  padding: var(--pad-card-dense);
  border-radius: var(--radius-card);
  background: var(--bg-field);
  color: var(--ink-secondary);
}
.rcm-result--ok[data-v-4a7f4276] {
  background: var(--bg-success-soft);
}
.rcm-result--fail[data-v-4a7f4276] {
  background: var(--bg-danger-soft);
}
.rcm-result--notice[data-v-4a7f4276] {
  background: var(--bg-warning-soft);
}
.rcm-result__head[data-v-4a7f4276] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.rcm-result__icon[data-v-4a7f4276] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
}
.rcm-result--ok .rcm-result__icon[data-v-4a7f4276] {
  color: var(--ink-success);
}
.rcm-result--fail .rcm-result__icon[data-v-4a7f4276] {
  color: var(--ink-danger);
}
.rcm-result--notice .rcm-result__icon[data-v-4a7f4276] {
  color: var(--ink-warning);
}
.rcm-result__title[data-v-4a7f4276] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
/* 왕복 시간은 제목 줄 오른쪽 끝 — 값이 바뀌어도 제목이 밀리지 않는다 */
.rcm-result__latency[data-v-4a7f4276] {
  margin-left: auto;
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.rcm-result__product[data-v-4a7f4276] {
  margin-top: var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}
/* 곁줄 — 라벨과 값을 두 칸으로 세워 눈이 한 번에 훑게 한다 */
.rcm-result__facts[data-v-4a7f4276] {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--gap-glyph) var(--gap-inline);
  margin: var(--space-tight) 0 0;
  font-size: var(--size-meta);
}
.rcm-result__facts dt[data-v-4a7f4276] {
  color: var(--ink-muted);
}
.rcm-result__facts dd[data-v-4a7f4276] {
  margin: 0;
  min-width: 0;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 사유는 두 줄까지 — 그 뒤는 말줄임하고 전문은 title 로 본다 */
.rcm-result__detail[data-v-4a7f4276] {
  margin: var(--space-snug) 0 0;
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.chat-window[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  border-left: var(--line-strong);
  overflow: hidden;
}
.chat-window-header[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
}
.chat-window-title[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-weight: var(--weight-title);
  font-size: var(--size-body);
  color: var(--ink-primary);
}
.chat-window-title i[data-v-dc243bdb] {
  color: var(--ink-brand);
}
.chat-messages[data-v-dc243bdb] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
}
.chat-messages[data-v-dc243bdb]::-webkit-scrollbar {
  width: 8px;
}
.chat-messages[data-v-dc243bdb]::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages[data-v-dc243bdb]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-badge);
}
.chat-messages[data-v-dc243bdb]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.chat-welcome[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide) var(--space-roomy);
  text-align: center;
  gap: var(--gap-group);
}
.chat-welcome-icon[data-v-dc243bdb] {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-brand) 0%, var(--bg-brand-lift) 100%);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
}
.chat-welcome-icon i[data-v-dc243bdb] {
  font-size: var(--icon-hero);
  color: var(--ink-on-solid);
}
.chat-welcome-title[data-v-dc243bdb] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  margin: 0;
}
.chat-welcome-subtitle[data-v-dc243bdb] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
  max-width: 500px;
}
.chat-welcome-warning[data-v-dc243bdb] {
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-danger);
  margin-top: var(--gap-band);
  background: var(--bg-danger-soft);
  padding: var(--pad-row);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  border: var(--line-w) solid var(--bg-danger-soft);
}
.chat-suggestions[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  width: 100%;
  max-width: 600px;
  margin-top: var(--gap-inline);
}
.chat-suggestion-card[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--pad-modal);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  background: var(--bg-float);
  color: var(--ink-primary);
  font-size: var(--size-body);
  text-align: left;
  cursor: pointer;
  transition: all var(--motion-base);
  box-shadow: var(--shadow-sm);
}
.chat-suggestion-card[data-v-dc243bdb]:hover {
  border-color: var(--ink-brand);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.chat-suggestion-card i[data-v-dc243bdb] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
  flex-shrink: 0;
}
.chat-suggestion-card span[data-v-dc243bdb] {
  flex: 1;
  line-height: var(--line-normal);
}
.chat-message[data-v-dc243bdb] {
  display: flex;
  gap: var(--gap-group);
  align-items: flex-start;
  margin-bottom: var(--gap-page);
  width: 100%;
}
.chat-message--user[data-v-dc243bdb] {
  flex-direction: row-reverse;
}
.chat-message-face[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;  /* dimensions-ignore: 말풍선 옆 얼굴 원의 지름이다 — 컨트롤 높이가 아니라 그림 크기다 */
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink-secondary);
  flex-shrink: 0;
  overflow: hidden;
}
.chat-message--user .chat-message-face[data-v-dc243bdb] {
  background: var(--bg-field);
  color: var(--ink-primary);
}
.chat-message-body[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1;
  min-width: 0;
  max-width: 85%;
}
.chat-message--user .chat-message-body[data-v-dc243bdb] {
  align-items: flex-end;
}
.chat-message-content[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.chat-message--user .chat-message-content[data-v-dc243bdb] {
  align-items: flex-end;
}
.chat-message--user .chat-message-content[data-v-dc243bdb] {
  flex-direction: row-reverse;
}
.chat-message-text[data-v-dc243bdb] {
  position: relative;
  padding: var(--space-cozy) var(--space-roomy);
  border-radius: var(--radius-card);
  /*
   * 말풍선의 면색 — **배경과 꼬리가 이 값 하나만 본다.**
   * ⛔ 꼬리에 다른 토큰을 적지 마라. 라이트에서는 우연히 같아 보이고 **다크에서만 갈라진다**
   *    (실측 2026-08-30: 꼬리가 잉크색 rgb(16,185,129), 말풍선은 면색 rgb(9,104,72) —
   *     밝은 초록 화살표가 어두운 초록 말풍선에 붙어 있었다).
   */
  --bubble-face: var(--bg-bubble);
  background: var(--bubble-face);
  color: var(--ink-primary);
  font-size: var(--size-body);
  line-height: var(--line-comfortable);
  word-wrap: break-word;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/*
 * 말풍선 꼬리 (AI) — 모서리 곡선이 끝나는 자리에서 **말풍선 몸에 붙어** 자라 나온다.
 * ⛔ 좌우 대칭 삼각형으로 두지 마라 — 몸에서 떨어져 나온 「▶」 글리프처럼 보인다
 *    (사용자 지적 2026-08-30). 말풍선에 닿는 쪽은 곧은 세로 변이어야 한다.
 */
.chat-message-text[data-v-dc243bdb]::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 10px 0;
  border-color: transparent var(--bubble-face) transparent transparent;
}
.chat-message--user .chat-message-text[data-v-dc243bdb] {
  --bubble-face: var(--bg-brand);
  color: var(--ink-on-solid);
}
.chat-message--assistant[data-v-dc243bdb] {
  margin-bottom: var(--gap-group);
}

/* 회신 중에 더 친 말 — 아직 안 보낸 상태임을 흐리게 알린다 */
.chat-message--pending .chat-message-content[data-v-dc243bdb] {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-glyph);
}
.chat-pending-header[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
  font-size: var(--size-meta);
  line-height: var(--line-none);
  color: var(--ink-secondary);
}

/* 답하는 중에 곧바로 전달한 말 — 언제 들어간 말인지 한 줄로 밝힌다 */
.chat-message--steered .chat-message-content[data-v-dc243bdb] {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-glyph);
}
.chat-steered-note[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  width: 100%;
  justify-content: flex-end;
  font-size: var(--size-meta);
  line-height: var(--line-none);
  color: var(--ink-secondary);
}
.chat-pending-spacer[data-v-dc243bdb] {
  flex: 1;
}
.chat-pending-btn[data-v-dc243bdb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-tight);
  border: none;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  cursor: pointer;
}
.chat-pending-btn[data-v-dc243bdb]:hover {
  background: var(--bg-page);
  color: var(--ink-primary);
}
.chat-pending-text[data-v-dc243bdb] {
  opacity: 0.65;
  border: var(--line-w) dashed var(--line-color);
  white-space: pre-wrap;
}

/* 말풍선 꼬리 (User) */
.chat-message--user .chat-message-text[data-v-dc243bdb]::before {
  left: auto;
  right: -6px;
  border-width: 0 0 10px 6px;
  border-color: transparent transparent transparent var(--bubble-face);
}

/* 마크다운 스타일 (Bold, List, Header, Table) */
.chat-message-text[data-v-dc243bdb] p { margin-bottom: var(--gap-inline);
}
.chat-message-text[data-v-dc243bdb] p:last-child { margin-bottom: 0;
}
.chat-message-text[data-v-dc243bdb] strong { font-weight: var(--weight-strong); color: var(--ink-brand);
}
.chat-message-text[data-v-dc243bdb] ul, .chat-message-text[data-v-dc243bdb] ol { margin: var(--gap-inline) 0; padding-left: var(--space-band);
}
.chat-message-text[data-v-dc243bdb] li { margin-bottom: var(--gap-glyph); list-style-type: disc;
}
.chat-message-text[data-v-dc243bdb] h1, .chat-message-text[data-v-dc243bdb] h2, .chat-message-text[data-v-dc243bdb] h3 { font-weight: var(--weight-strong); margin: var(--space-cozy) 0 var(--space-snug) 0;
}
.chat-message-text[data-v-dc243bdb] h1 { font-size: var(--size-title);
}
.chat-message-text[data-v-dc243bdb] h2 { font-size: var(--size-title-sm);
}
.chat-message-text[data-v-dc243bdb] h3 { font-size: var(--size-lead);
}
.chat-message-text[data-v-dc243bdb] table { width: 100%; border-collapse: collapse; margin: var(--gap-stack) 0; font-size: var(--size-body);
}
.chat-message-text[data-v-dc243bdb] th, .chat-message-text[data-v-dc243bdb] td { border: var(--line-strong); padding: var(--space-snug) var(--space-cozy);
}
.chat-message-text[data-v-dc243bdb] th { background: var(--bg-subtle); font-weight: var(--weight-title);
}
.chat-message--user .chat-message-text[data-v-dc243bdb] th,
.chat-message--user .chat-message-text[data-v-dc243bdb] td { border-color: rgba(var(--chat-ink-on-user-rgb), 0.3);
}
.chat-message--user .chat-message-text[data-v-dc243bdb] th { background: rgba(var(--chat-ink-on-user-rgb), 0.2);
}
.chat-message-text[data-v-dc243bdb] pre {
  background: var(--bg-subtle);
  padding: var(--space-snug);
  border-radius: var(--radius-badge);
  overflow-x: auto;
  margin: var(--gap-inline) 0;
}
.chat-message--user .chat-message-text[data-v-dc243bdb] pre {
  background: rgba(var(--chat-ink-on-user-rgb), 0.2);
}
.chat-message-text[data-v-dc243bdb] code {
  background: var(--bg-subtle);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--font-rel-code);
}
.chat-message--user .chat-message-text[data-v-dc243bdb] code {
  background: rgba(var(--chat-ink-on-user-rgb), 0.2);
}

/* AI 가 짚은 자리 — 종류는 tone 으로만 갈린다(config/aiLinks.ts). */
.chat-message-text[data-v-dc243bdb] .ai-link {
  text-decoration: underline;
  cursor: pointer;
  font-weight: var(--weight-label);
}
.chat-message-text[data-v-dc243bdb] .ai-link--primary { color: var(--ink-brand);
}
.chat-message-text[data-v-dc243bdb] .ai-link--info { color: var(--ink-info);
}
.chat-message-text[data-v-dc243bdb] .ai-link:hover {
  filter: brightness(1.1);
}
.chat-message-loading[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-panel);
  color: var(--ink-secondary);
  font-style: italic;
}
.chat-error[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-panel);
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
  border-radius: var(--radius-card);
  font-size: var(--size-body);
}

/* Message Stats */
.message-stats[data-v-dc243bdb] {
    margin-top: var(--gap-inline);
    font-size: var(--size-meta);
    color: var(--ink-secondary);
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    justify-content: flex-end;
}
.stat-item[data-v-dc243bdb] {
    display: flex;
    align-items: center;
    gap: var(--gap-glyph);
}
.stat-item i[data-v-dc243bdb] {
    font-size: var(--icon-marker);
}
.stat-divider[data-v-dc243bdb] {
    color: var(--ink-muted);
}

/* 다크 모드 지원 (필요 시) */
:root.dark .message-stats[data-v-dc243bdb] {
    color: var(--ink-muted);
}

/* 스트리밍 인디케이터 */
.streaming-indicator[data-v-dc243bdb] {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    margin-top: var(--gap-stack);
    padding: var(--space-snug) var(--space-cozy);
    font-size: var(--size-label);
    color: var(--ink-brand);
    background: var(--bg-brand-soft);
    border-radius: var(--radius-control);
    animation: fadeIn-dc243bdb 0.3s ease;
}
.streaming-indicator i[data-v-dc243bdb] {
    font-size: var(--icon-marker);
}
.streaming-indicator span[data-v-dc243bdb] {
    font-weight: var(--weight-label);
}
.chat-input-container[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-snug);
  border-top: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
  /* 툴바가 화면 너비가 아니라 '이 채팅창이 실제로 받은 너비' 에 반응하도록 기준을 세운다.
     채팅창은 전체 화면(AiChatView)뿐 아니라 좁은 곁패널(TodoAiPanel 등) 로도 쓰이는데,
     화면 기준(@media) 으로는 곁패널이 좁아도 규칙이 걸리지 않아 버튼이 잘려 나갔다. */
  container-type: inline-size;
  container-name: chat-input;
}

/* 입력창과 툴바를 감싼 한 덩어리 — 테두리·라운드·포커스 표시를 여기서 한 번만 그린다.
   (전에는 입력창과 툴바가 각자 테두리를 둘러, 사이에 실선 두 줄과 틈이 보였다.) */
.chat-composer[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--line-strong);
  border-radius: var(--radius-float);
  background: var(--bg-card);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.chat-composer[data-v-dc243bdb]:focus-within {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.chat-input-wrapper[data-v-dc243bdb] {
  display: flex;
  min-width: 0;
}

/* 테두리·포커스 링은 위 덩어리가 이미 그렸다 — 입력창은 속을 채우는 역할만 한다.
   (덩어리보다 선택자를 한 칸 길게 잡아야 AppTextarea 의 기본 외형을 확실히 덮는다.) */
.chat-composer .chat-input[data-v-dc243bdb] {
  display: block;
  width: 100%;
  min-height: 76px;
  max-height: 200px;
  padding: var(--space-cozy) var(--space-cozy) var(--space-snug);
  border: none;
  border-radius: var(--radius-float) var(--radius-float) 0 0;
  background: transparent;
}
.chat-composer .chat-input[data-v-dc243bdb]:focus-visible {
  border-color: transparent;
  box-shadow: none;
}
.chat-toolbar[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-snug) var(--space-snug);
  gap: var(--gap-inline);
}
.chat-toolbar-left[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  min-width: 0;
}
.context-usage[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.context-gauge[data-v-dc243bdb] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;   /* 옆에 서는 압축 단추와 같은 키 */
  flex-shrink: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);  /* 옆에 서는 압축 단추와 같은 모서리 */
  overflow: hidden;                      /* 물이 모서리를 넘지 않게 */
}

/* 물통에 물이 차듯 아래에서부터 찬다 — 높이가 곧 사용률이다. */
.context-gauge-water[data-v-dc243bdb] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 한 단 진한 틴트(mid)다 — 옅은 단(soft)으로는 라이트에서 수면이 거의 안 보였다(2026-09-13 실측).
     ⛔ 「넓은 면을 mid 로 채우지 않는다」는 제약 밖이다: 여기는 48×28 게이지의 물높이 자체가
        눈을 모으는 자리다. 채운 쪽에도 「39%」 글자가 걸치므로 원색(vivid)은 쓰지 않는다. */
  background: var(--bg-brand-mid);
  /* 값이 바뀌면 물이 차오르듯 따라간다. 큰 움직임이라 느린 단을 쓰고, 밀려 올라왔다 가라앉는 결로 끝난다.
     ⛔ 상시 애니메이션이 아니다 — 값이 바뀔 때만 도는 transition 이라 놀 때는 CPU 를 쓰지 않는다. */
  transition:
    height var(--motion-slow) cubic-bezier(0.22, 1, 0.36, 1),
    background-color var(--motion-slow) ease;
}
.context-gauge-water--warning[data-v-dc243bdb] {
  background: var(--bg-warning-mid);
}
.context-gauge-water--danger[data-v-dc243bdb] {
  background: var(--bg-danger-mid);
}

/* 네모 한가운데. 안쪽 폭이 44px 라 「100%」(35.1px)도 여유를 두고 선다. */
.context-gauge-text[data-v-dc243bdb] {
  position: relative;
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  /* ⛔ 곁들이는 글의 잉크(--ink-secondary)를 쓰지 않는다 — 물이 찬 쪽에서 대비가 무너진다.
     다크 실측 2026-09-13: 물속 브랜드 4.45 · 경고 4.13 (12px 굵은 글자의 AA 하한은 4.5).
     --ink-primary 로 올리면 물속 최저 10.04 다. */
  color: var(--ink-primary);
  line-height: var(--line-none);
  font-variant-numeric: tabular-nums;
}
.context-compress-button[data-v-dc243bdb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-float);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--motion-base);
  box-shadow: var(--shadow-sm);
}
.context-compress-button[data-v-dc243bdb]:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.context-compress-button[data-v-dc243bdb]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.context-compress-button i[data-v-dc243bdb] {
  font-size: var(--icon-marker);
}
.chat-toolbar-right[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  flex: 0 1 auto;
  min-width: 0;
}

/* 반응형: 채팅창이 좁아지면 버튼 글자를 감추고 아이콘만 남긴다(제목은 title 로 남아 있다). */
@container chat-input (max-width: 460px) {
.chat-toolbar-button-text[data-v-dc243bdb] {
    display: none;
}

  /* ⛔ 글자만 감추면 빈 라벨 자리와 그 옆 gap 이 남아 아이콘이 오른쪽으로 밀린다.
     좁을 때는 정사각형 아이콘 버튼으로 바꿔 아이콘이 한가운데 오게 한다. */
.chat-toolbar-right .app-btn[data-v-dc243bdb] {
    width: var(--h-control-md);
    padding: 0;
    gap: 0;
}
}

/* diff 블록 스타일 */
/* 문서 편집 스크립트 — 결과 한 줄이 주인공, 코드는 접혀 있다 */
.chat-message-text[data-v-dc243bdb] .doc-script-block {
  margin: var(--gap-stack) 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  overflow: hidden;
}
.chat-message-text[data-v-dc243bdb] .doc-script-block--done {
  border-color: var(--ink-success);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block--error {
  border-color: var(--ink-danger);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-title i {
  color: var(--ink-brand);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block--done .doc-script-block-title i {
  color: var(--ink-success);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block--error .doc-script-block-title i {
  color: var(--ink-danger);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-reason {
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-danger);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-details {
  padding: 0 var(--space-cozy) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-details summary {
  cursor: pointer;
  padding: var(--space-snug) 0;
}
.chat-message-text[data-v-dc243bdb] .doc-script-block-code {
  margin: 0;
  padding: var(--space-snug);
  background: var(--bg-card);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 18rem;
  overflow: auto;
}
.chat-message-text[data-v-dc243bdb] .diff-block {
  margin: var(--gap-stack) 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-card);
}
.chat-message-text[data-v-dc243bdb] .diff-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  gap: var(--gap-inline);
}
.chat-message-text[data-v-dc243bdb] .diff-block-title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-weight: var(--weight-title);
  font-size: var(--size-body);
  color: var(--ink-primary);
}
.chat-message-text[data-v-dc243bdb] .diff-block-title i {
  color: var(--ink-brand);
}
.chat-message-text[data-v-dc243bdb] .diff-apply-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  border: var(--line-w) solid var(--ink-brand);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  white-space: nowrap;
}
.chat-message-text[data-v-dc243bdb] .diff-apply-button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.chat-message-text[data-v-dc243bdb] .diff-apply-button:active {
  transform: translateY(0);
}
.chat-message-text[data-v-dc243bdb] .diff-apply-button--disabled,
.chat-message-text[data-v-dc243bdb] .diff-apply-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.chat-message-text[data-v-dc243bdb] .diff-apply-button--disabled:hover,
.chat-message-text[data-v-dc243bdb] .diff-apply-button:disabled:hover {
  filter: none;
  transform: none;
}
.chat-message-text[data-v-dc243bdb] .diff-block-content {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}
.chat-message-text[data-v-dc243bdb] .diff-block-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-top: var(--line-strong);
  gap: var(--gap-inline);
}
.chat-message-text[data-v-dc243bdb] .diff-applied-message {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-success);
  font-weight: var(--weight-label);
}
.chat-message-text[data-v-dc243bdb] .diff-applied-message i {
  color: var(--ink-success);
}
.chat-message-text[data-v-dc243bdb] .diff-revert-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  border: var(--line-w) solid var(--ink-warning);
  background: var(--bg-card);
  color: var(--ink-warning);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition: all var(--motion-base);
}
.chat-message-text[data-v-dc243bdb] .diff-revert-button:hover {
  background: var(--bg-warning);
  color: var(--ink-on-solid);
  transform: translateY(-1px);
}
.chat-message-text[data-v-dc243bdb] .diff-revert-button:active {
  transform: translateY(0);
}
.chat-message-text[data-v-dc243bdb] .diff-revert-button--disabled,
.chat-message-text[data-v-dc243bdb] .diff-revert-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.chat-message-text[data-v-dc243bdb] .diff-revert-button--disabled:hover,
.chat-message-text[data-v-dc243bdb] .diff-revert-button:disabled:hover {
  background: var(--bg-page);
  color: var(--ink-warning);
  transform: none;
}
.chat-message-text[data-v-dc243bdb] .diff-line-header {
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-subtle);
  color: var(--ink-secondary);
  font-weight: var(--weight-title);
}
.chat-message-text[data-v-dc243bdb] .diff-line-hunk {
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-info-soft);
  color: var(--ink-info);
  font-weight: var(--weight-title);
}
.chat-message-text[data-v-dc243bdb] .diff-line-add {
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-success-soft);
  color: var(--ink-success);
}
.chat-message-text[data-v-dc243bdb] .diff-line-remove {
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
}
.chat-message-text[data-v-dc243bdb] .diff-line-context {
  padding: var(--space-tight) var(--space-snug);
  color: var(--ink-primary);
}
.chat-message-text[data-v-dc243bdb] p {
  margin: 0;
}
.chat-message-text[data-v-dc243bdb] p + p {
  margin-top: 0.5em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
}

/* 다크 테마 */
html[data-theme='dark'] .chat-message--user .chat-message-text[data-v-dc243bdb] pre {
  background: var(--bg-active);
}

/* 메시지 재사용 버튼 스타일 */
.chat-message-retry-btn[data-v-dc243bdb] {
  opacity: 0;
  transition: opacity var(--motion-base);
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  cursor: pointer;
  padding: var(--space-snug); /* 클릭 영역 확보 */
  font-size: var(--size-body); /* 아이콘 크기 약간 키움 */
  border-radius: var(--radius-pill); /* 원형 버튼 */
}
.chat-message-retry-btn[data-v-dc243bdb]:hover {
  color: var(--ink-brand);
  background: var(--bg-hover);
}



/* 터치 디바이스나 호버 시 표시 */
.chat-message:hover .chat-message-retry-btn[data-v-dc243bdb] {
  opacity: 1;
}
@media (max-width: 768px) {
.chat-input[data-v-dc243bdb] {
    font-size: var(--size-lead) !important;
}
}

/* Malpoongsun Action Card */
.chat-action-card[data-v-dc243bdb] {
  margin-top: var(--gap-stack);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  animation: fadeIn-dc243bdb 0.3s ease;
}
.chat-action-header[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--font-rel-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.chat-action-header i[data-v-dc243bdb] {
  color: var(--ink-warning);
}
.chat-action-buttons[data-v-dc243bdb] {
  display: flex;
  gap: var(--gap-inline);
  justify-content: flex-end;
}
.chat-action-btn[data-v-dc243bdb] {
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  font-size: var(--font-rel-sm);
  cursor: pointer;
  border: none;
  font-weight: var(--weight-title);
}
.chat-action-btn--cancel[data-v-dc243bdb] {
  background: var(--bg-hover);
  color: var(--ink-secondary);
  border: var(--line-strong);
}
.chat-action-btn--ok[data-v-dc243bdb] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
@keyframes fadeIn-dc243bdb {
from { opacity: 0; transform: translateY(5px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Process Logs (Cursor Style) */
.process-logs-container[data-v-dc243bdb] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
  padding: var(--space-tight) 0;
}
.process-log-item[data-v-dc243bdb] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  font-size: var(--size-body);
  transition: all var(--motion-base) ease;
}
.process-log-item.running[data-v-dc243bdb] {
  border-color: var(--ink-brand);
  box-shadow: 0 0 0 var(--line-w) var(--bg-brand-soft);
}
.process-log-item.done[data-v-dc243bdb] {
  border-color: var(--line-color);
}
.log-header[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  padding: var(--space-snug) var(--space-cozy);
}
.log-header i[data-v-dc243bdb] {
  font-size: 0.9em; /* css-ignore */ /* 컨테이너 폰트 대비 상대 크기 (em) */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리 */
  width: 16px;
  text-align: center;
}
.process-log-item.running .log-header i[data-v-dc243bdb] {
  color: var(--ink-brand);
}
.process-log-item.done .log-header i[data-v-dc243bdb] {
  color: var(--ink-success);
}
.process-log-item.error .log-header i[data-v-dc243bdb] {
  color: var(--ink-warning);
}
.log-name[data-v-dc243bdb] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  font-family: var(--font-mono);
}
.log-status-text[data-v-dc243bdb] {
  font-size: var(--font-rel-sm);
  color: var(--ink-muted);
}
.log-spacer[data-v-dc243bdb] {
  flex: 1;
}
.log-actions[data-v-dc243bdb] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.log-copy-btn[data-v-dc243bdb] {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  transition: all var(--motion-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.log-copy-btn[data-v-dc243bdb]:hover {
  color: var(--ink-brand);
  background: var(--bg-hover);
}
.log-details[data-v-dc243bdb] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-top: var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--font-rel-sm);
  color: var(--ink-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* 이 화면만 쓰는 값 — 전역 어휘를 차지하지 않게 여기서 정의한다(2026-08-29 이관).
   ⛔ `:root` 에 적지 않는다 — scoped 스타일에서는 `:root[data-v-…]` 가 되어 **아무 데도 안 걸린다**.
   이 컴포넌트의 뿌리에 붙여 그 안에서만 상속되게 한다.
   ⛔ 다른 화면이 쓰기 시작하면 그때 역할 토큰으로 올린다. */
.chat-window[data-v-dc243bdb] {
  --chat-ink-on-user-rgb: 255, 255, 255;
}

.apm[data-v-db6ab212] { display: flex; flex-direction: column; gap: var(--gap-group);
}
.apm-loading[data-v-db6ab212] { padding: var(--space-band); text-align: center; color: var(--ink-secondary);
}
.apm-inherit[data-v-db6ab212] { display: flex; align-items: flex-start; gap: var(--gap-stack); padding: var(--space-cozy);
  background: var(--bg-page); border: 1px solid var(--line-color); border-radius: var(--radius-control); cursor: pointer;
}
.apm-inherit__txt b[data-v-db6ab212] { display: block; font-size: var(--size-label); font-weight: var(--weight-title);
}
.apm-inherit__txt small[data-v-db6ab212] { display: block; margin-top: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-muted);
}
.apm-label[data-v-db6ab212] { font-size: var(--size-meta); font-weight: var(--weight-title); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* 규칙 목록 자체는 스크롤하지 않는다 — 상위(속성 팝업 본문)가 고정높이로 스크롤하므로
   여기서 또 overflow 를 주면 스크롤바가 이중으로 겹친다. 목록은 자연히 늘고 바깥이 스크롤. */
.apm-rules[data-v-db6ab212] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.apm-rule[data-v-db6ab212], .apm-others[data-v-db6ab212] { display: flex; align-items: center; gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy); border: 1px solid var(--line-color); border-radius: var(--radius-control);
}
.apm-others[data-v-db6ab212] { background: var(--bg-active);
}
.apm-icon[data-v-db6ab212] { /* dimensions-ignore: 아바타 크기(28px) 아이콘 원 — UserAvatar 와 통일 */
  width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center;
  font-size: var(--icon-label); flex-shrink: 0;
}
.apm-icon--role[data-v-db6ab212], .apm-icon--all[data-v-db6ab212] { background: var(--bg-page); color: var(--ink-secondary);
}
.apm-optic[data-v-db6ab212] { /* dimensions-ignore: 아바타 크기(20px) 아이콘 원 */
  width: 20px; height: 20px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--bg-active); color: var(--ink-secondary); font-size: var(--size-meta);
}
.apm-name[data-v-db6ab212] { min-width: 0; font-size: var(--size-label); font-weight: var(--weight-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apm-who[data-v-db6ab212] { flex: 1; min-width: 0;
}
.apm-who b[data-v-db6ab212] { display: block; font-size: var(--size-label); font-weight: var(--weight-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apm-who small[data-v-db6ab212] { font-size: var(--size-meta); color: var(--ink-muted);
}
.apm-perm[data-v-db6ab212] { flex-shrink: 0; margin-left: auto;
}
.apm-hint[data-v-db6ab212] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-comfortable);
}

/* 좁은 폰: 권한 select(104px 고정)가 이름을 몇 글자로 짓눌러 클리핑되므로,
   행을 줄바꿈해 select 를 아래 줄로 내리고 전체폭으로 편다. width prop 은 인라인이라 override 필요. */
@media (max-width: 480px) {
.apm-rule[data-v-db6ab212], .apm-others[data-v-db6ab212] { flex-wrap: wrap;
}
.apm-perm[data-v-db6ab212] { width: 100% !important; margin-left: 0;
}
}

.apr[data-v-e59d9c09] { display: flex; flex-direction: column;
}
/* 높이 고정 — 탭·필터·규칙 수와 무관하게 팝업 크기 불변, 내부만 스크롤.
   단 짧은 뷰포트(가로 폰·낮은 창)에선 60vh 로 낮춰 저장/취소 푸터가 화면 밖으로 밀리지 않게. */
.apr-body[data-v-e59d9c09] { height: min(380px, 60vh); overflow-y: auto; padding-top: var(--space-roomy);
}
.apr-loading[data-v-e59d9c09] { padding: var(--space-band); text-align: center; color: var(--ink-muted); font-size: var(--size-label);
}
.apr-pane[data-v-e59d9c09] { display: flex; flex-direction: column; gap: var(--gap-group);
}
.apr-field[data-v-e59d9c09] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.apr-field label[data-v-e59d9c09] { font-size: var(--size-meta); font-weight: var(--weight-title); color: var(--ink-secondary);
}

/* 하단 정보 — **두 줄**로 접는다(사용자 지시 2026-09-13). 한 줄에 한 쌍씩 넉 줄로 세웠더니
   일반 탭이 판 높이(380px)를 넘어 스크롤바가 섰다. 라벨·값 쌍을 가로로 둘씩 놓아 줄 수를 반으로 줄인다. */
/* 하단 정보 — 한 줄에 「라벨 값」 두 쌍. ⛔ **값을 라벨 바로 옆에 붙인다**(사용자 지적 2026-09-13):
   값을 칸 오른쪽 끝으로 밀었더니 「등록자 ……… 관리자」처럼 한 뼘이 비어 라벨과 값이 짝으로 안 읽혔다.
   남는 자리는 쌍과 쌍 **사이**로 간다(값 칸의 `1fr` 이 그 몫을 한다).
   원본: CatalogPackageWizard.vue 의 `.pkg-confirm`(auto 1fr · dd 왼쪽 정렬) — 쌍이 둘인 것만 다르다. */
.apr-meta[data-v-e59d9c09] { margin: 0; border: var(--line-strong); border-radius: var(--radius-control); background: var(--bg-card);
  padding: var(--pad-panel); display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: var(--gap-inline) var(--gap-stack); font-size: var(--size-label);
}
.apr-meta dt[data-v-e59d9c09] { color: var(--ink-muted);
}
.apr-meta dd[data-v-e59d9c09] { margin: 0; color: var(--ink-primary); min-width: 0;
}
.apr-label[data-v-e59d9c09] { font-size: var(--size-meta); font-weight: var(--weight-title); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.apr-verhead[data-v-e59d9c09] { display: flex; align-items: center; gap: var(--gap-stack);
}
.apr-verhead .apr-label[data-v-e59d9c09] { flex: 1;
}
.apr-vers[data-v-e59d9c09], .apr-logs[data-v-e59d9c09] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.apr-ver[data-v-e59d9c09], .apr-log[data-v-e59d9c09] { display: flex; align-items: center; gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy); border: 1px solid var(--line-color); border-radius: var(--radius-control);
}
.apr-ver__no[data-v-e59d9c09] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-brand);
  min-width: var(--space-wide);
}
.apr-ver__body[data-v-e59d9c09] { flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.apr-ver__body b[data-v-e59d9c09] { font-size: var(--size-label); font-weight: var(--weight-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apr-ver__body small[data-v-e59d9c09] { font-size: var(--size-meta); color: var(--ink-muted);
}
.apr-ver__meta[data-v-e59d9c09] { display: inline-flex; align-items: center; gap: var(--gap-glyph); flex-wrap: wrap;
}
/* 접근기록 한 줄: 한 일(가변) … [아바타 사용자] · 시간 */
.apr-log__act[data-v-e59d9c09] { flex: 1; min-width: 0; font-size: var(--size-label); font-weight: var(--weight-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apr-log__detail[data-v-e59d9c09] { color: var(--ink-muted); font-weight: var(--weight-body);
}
/* ⛔ 간격은 UserLabel 이 갖는다 — 여기서 gap 을 다시 주지 않는다. 자리 잡기만. */
.apr-log__user[data-v-e59d9c09] { flex-shrink: 0; min-width: 0; max-width: 40%;
}
.apr-log__time[data-v-e59d9c09] { font-size: var(--size-label); color: var(--ink-secondary); flex-shrink: 0;
}

/* 대상 DB 는 상대 경로라 길 수 있다 — 잘라 숨기지 말고 접어서 다 보인다. */
.apr-extra__val[data-v-e59d9c09] { word-break: break-all;
}

/* 머리 제목 — 슬롯 내용은 AppModal 의 scoped 규칙을 못 받으므로 같은 단을 여기 적는다
   (선례: AuditDetailModal 의 `.audit-detail__title`). */
/* 이름 + 종류 — 목록의 이름 칸과 **같은 사이 간격**(--gap-inline). */
.apr-head[data-v-e59d9c09] { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.apr-title[data-v-e59d9c09] { margin: 0; font-size: var(--size-lead); font-weight: var(--weight-title);
  color: var(--ink-primary); min-width: 0; overflow-wrap: anywhere;
}
.apr-empty[data-v-e59d9c09] { padding: var(--space-band); text-align: center; color: var(--ink-muted); font-size: var(--size-label);
}
.apr-foot-sp[data-v-e59d9c09] { flex: 1;
}

/* 높이 고정 — '변경함' 체크로 섹션이 펴지고 접혀도 모달 크기가 변하지 않게(모달 표준).
   속성 팝업(.apr-body)과 같은 방식: 본문을 고정 높이로 못 박고 내부만 스크롤. */
.abp[data-v-2ddea875] { display: flex; flex-direction: column; gap: var(--gap-group); height: min(420px, 60vh); overflow-y: auto;
}
.abp-summary[data-v-2ddea875] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.abp-sec[data-v-2ddea875] { border: var(--line-strong); border-radius: var(--radius-control);
  background: var(--bg-card); padding: var(--space-cozy) var(--space-roomy);
  display: flex; flex-direction: column; gap: var(--gap-stack);
}
.abp-sec.is-off[data-v-2ddea875] { opacity: 0.85;
}
.abp-sec b[data-v-2ddea875] { font-size: var(--size-label); font-weight: var(--weight-title);
}
.abp-body[data-v-2ddea875] { display: flex; flex-direction: column; gap: var(--gap-stack);
  padding-left: var(--space-band);
}
.abp-note[data-v-2ddea875] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-comfortable);
}
.abp-note--warn[data-v-2ddea875] { color: var(--ink-warning);
}
.abp-hint[data-v-2ddea875] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); text-align: center;
}

.atr-name[data-v-5d588b19] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.atr-name__icon[data-v-5d588b19] { flex: none;
}
/* ⛔ 파일 아이콘 색을 여기서 칠하지 않는다 — 전역 `styles/file-type-icons.css`(.ftype--*) 소관. */
.atr-name__label[data-v-5d588b19] { min-width: 0; overflow-wrap: anywhere;
}
.atr-muted[data-v-5d588b19] { color: var(--ink-secondary);
}

.asset-ai[data-v-b9633729] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* 원본(TodoAiPanel 의 `__context`)과 같은 줄이다 — 배지 줄 + 아래 선. */
.asset-ai__context[data-v-b9633729] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  font-size: var(--size-meta);
}

/* 채팅창이 남은 높이를 채우고 제 안에서만 구른다. */
.asset-ai__chat[data-v-b9633729] {
  flex: 1;
  min-height: 0;
}

.apane[data-v-d0e237b2] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.apane--row[data-v-d0e237b2] { flex-direction: row;
}
.apane--col[data-v-d0e237b2] { flex-direction: column;
}

/* ── 분리대 ── 모양·색은 VerticalSplitter 와 같은 어법이다(가운데로 모이는 빛 + 손잡이).
   ⛔ 그쪽 CSS 는 scoped 라 클래스 이름만 빌려 쓸 수 없어 여기에 같은 값으로 다시 적는다. */
.apane__resizer[data-v-d0e237b2] {
  flex: 0 0 var(--space-snug);
  align-self: stretch;
  background: var(--bg-field);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-base);
  z-index: var(--z-splitter);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.apane__resizer--col[data-v-d0e237b2] { cursor: row-resize;
}
.apane__resizer[data-v-d0e237b2]:hover {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-brand-soft) 30%,
    var(--bg-brand-mid) 50%,
    var(--bg-brand-soft) 70%,
    transparent 100%
  );
}
.apane__resizer--col[data-v-d0e237b2]:hover {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--bg-brand-soft) 30%,
    var(--bg-brand-mid) 50%,
    var(--bg-brand-soft) 70%,
    transparent 100%
  );
}
/* 끄는 중 — 얹힘과 **같은 모양을 더 진하게**(모양이 튀지 않게). */
.apane__resizer.is-resizing[data-v-d0e237b2] {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-brand-mid) 24%,
    var(--bg-brand-vivid) 50%,
    var(--bg-brand-mid) 76%,
    transparent 100%
  );
}
.apane__resizer--col.is-resizing[data-v-d0e237b2] {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--bg-brand-mid) 24%,
    var(--bg-brand-vivid) 50%,
    var(--bg-brand-mid) 76%,
    transparent 100%
  );
}
.apane__resizer-handle[data-v-d0e237b2] {
  width: calc(var(--line-w) * 3);
  height: var(--space-wide);
  background: var(--ink-secondary);
  border-radius: var(--radius-badge);
  opacity: 0.6;
  transition: opacity var(--motion-base), background-color var(--motion-base);
  pointer-events: none;
}
.apane__resizer--col .apane__resizer-handle[data-v-d0e237b2] {
  width: var(--space-wide);
  height: calc(var(--line-w) * 3);
}
.apane__resizer:hover .apane__resizer-handle[data-v-d0e237b2],
.apane__resizer.is-resizing .apane__resizer-handle[data-v-d0e237b2] {
  background: var(--bg-brand-vivid);
  opacity: 1;
}

/* ── 잎(탭 줄 + 무대) ── 원본: AssetView 의 옛 `.asset-split__tabbar`/`__stage`. */
.apane--tabs[data-v-d0e237b2] { background: var(--bg-page); position: relative;
}
/* 끌고 있는 동안 칸을 덮는다 — 분리대를 끄는 동안 깔리는 덮개와 같은 이유·같은 층이다. */
.apane__drop-catch[data-v-d0e237b2] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
}
.apane__tabbar[data-v-d0e237b2] {
  display: flex;
  align-items: center;
  /* 꽂힐 자리를 가리키는 금이 이 안에 선다(absolute). */
  position: relative;
  gap: var(--gap-inline);
  flex-shrink: 0;
  min-width: 0;
  /* ⛔ 밑줄은 **줄이 긋는다** — 탭 바가 저 혼자 그으면 단추 아래에서 선이 끊긴다. */
  border-bottom: var(--line-strong);
}
/* 꽂힐 자리 — 탭 사이에 서는 세로 금. 덮개(`.apane__drop-catch`)보다 위라야 보인다.
   ⛔ 자리(top·height)는 손잡이가 준다 — 좁은 칸에서 탭 줄이 접히면 **그 줄에만** 서야 한다. */
.apane__tabcaret[data-v-d0e237b2] {
  position: absolute;
  width: var(--line-w-thick);
  transform: translateX(-50%);
  background: var(--ink-brand);
  border-radius: var(--radius-badge);
  pointer-events: none;
  z-index: var(--z-resize-overlay);
}
/* 지금 고른 칸 — 목록에서 연 파일이 어디로 들어가는지 알린다. 칸이 하나면 알릴 것이 없어 안 붙는다. */
.apane--tabs.is-active > .apane__tabbar[data-v-d0e237b2] { border-bottom-color: var(--ink-brand);
}
.apane__tabs[data-v-d0e237b2] {
  flex: 1 1 auto;
  min-width: 0;
  /* ⛔ 위아래 여백을 두지 않는다 — 서브 탭의 기본 여백이 그대로면 선과 편집기 사이가 벌어지고
     고른 탭의 밑줄도 줄의 선과 어긋난다. */
  margin: 0;
}
.apane__tabtools[data-v-d0e237b2] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* ⛔ 사이를 벌리지 않는다 — 테두리가 없어진 뒤로 셋이 한 덩어리로 읽혀야 한다(사용자 확정 2026-09-13). */
}
/* AI 채팅이 서 있는 동안 — 면을 칠하지 않고 **잉크만** 바꾼다(셋이 한 덩어리로 읽혀야 한다). */
.apane__tabtools .is-on[data-v-d0e237b2] {
  color: var(--ink-brand);
}
/* ⛔ 넷의 크기는 «그려진 그림»으로 맞춘다 — font-size 로는 못 맞춘다(사용자 지적 2026-09-13).
   글리프마다 제 em 을 채우는 몫이 달라, 같은 1.1em(15.4px)에서도 실측이 갈렸다:
   마법봉 16.4px · ✕ 11.7px · 가는 선 그림 10.5px. 눈에 띄는 것은 그려진 크기뿐이라
   기준을 마법봉(16.4px)으로 잡고 나머지 셋을 거기에 맞춘다.
   가는 선 그림 셋: 칸 20px 에 바깥 13.1단위를 그려 16.4px. 선 굵기는 셋 다 0.95단위(≈1.19px)다
   — 굵기가 하나라도 다르면 그것만 진해 보인다(✕ 를 글꼴로 두었을 때 2.74px 이었다). */
.apane__icon[data-v-d0e237b2] {
  width: var(--icon-header);
  height: var(--icon-header);
  display: block;
}
.apane__stage[data-v-d0e237b2] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.apane__viewer[data-v-d0e237b2] {
  flex: 1 1 auto;
  min-height: 0;
}
.apane__empty[data-v-d0e237b2] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-muted);
  font-size: var(--size-label);
  text-align: center;
  padding: var(--space-cozy);
}
.apane__empty-sub[data-v-d0e237b2] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
/* 만들어 여는 길 — 단추는 나란히, 좁으면 접힌다(판 폭이 정한다). */
.apane__empty-actions[data-v-d0e237b2] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline);
  margin-top: var(--gap-stack);
}
/* 「이 자리에서 할 수 있는 일」 — 아래 세 갈래의 머리줄 */
.apane__empty-lead[data-v-d0e237b2] {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
/*
 * 셋(열기·생성·AI)을 **위에서 아래로** 읽게 세운다(사용자 지시 2026-09-13) — 옆으로 늘어놓으면
 * 세 갈래를 한꺼번에 견주게 되는데, 여기는 고르는 자리가 아니라 «할 수 있는 일을 차례로 알려 주는»
 * 자리다. 갈래 사이는 «띠» 만큼 띄운다 — 테두리가 없으니 사이가 곧 경계다.
 */
.apane__ways[data-v-d0e237b2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-band);
  width: 100%;
  margin-top: var(--gap-stack);
}
.apane__way[data-v-d0e237b2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
}
.apane__way-desc[data-v-d0e237b2] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.apane__way-acts[data-v-d0e237b2] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline);
  margin-top: var(--gap-glyph);
}
.apane__empty-icon[data-v-d0e237b2] {
  font-size: var(--icon-empty);
  color: var(--ink-muted);
  opacity: 0.6;
}
/* 끌어다 놓을 자리 — 화면 전체 드롭존과 같은 표시(점선 + 은은한 면). */
.apane--tabs.is-drop[data-v-d0e237b2] {
  outline: var(--line-w-thick) dashed var(--ink-brand);
  outline-offset: calc(-1 * var(--line-w-thick));
  background: var(--bg-brand-soft);
}

.aopanes[data-v-1cef1a6c] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.asset-name[data-v-63d5c0ad] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
/* 인라인 이름변경 입력 — 이름 셀 자리에 들어감 */
/* 그 자리에서 고치는 이름 — **글자는 그대로 두고 밑줄만 하나** 긋는다.
   원본: components/todo/MetaContentNode.vue 의 `.content-node__text--editing`.
   ⛔ 테두리·면·안여백을 주지 않는다 — 그 순간 「상자가 떴다」가 되고, 아이콘·배지가 밀린다. */
.asset-name__label--editing[data-v-63d5c0ad] {
  outline: none;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  /* 글자를 다 지워도 밑줄과 커서가 설 자리는 남는다(빈 인라인은 폭이 0 이라 사라진다). */
  display: inline-block;
  min-width: var(--icon-header);
  border-bottom: var(--line-w) solid var(--ink-brand);
  /* 이름은 한 줄이다 — 붙여넣기로 줄이 넘어와도 칸이 커지지 않게. */
  white-space: pre;
  overflow: hidden;
}
/* 파일/폴더 이름 → grab 손 커서(드래그 가능 표시). 드래그 중엔 body.asset-grabbing 이 grabbing 강제. */
.asset-name.is-dragging-src[data-v-63d5c0ad] { opacity: 0.45;
} /* 드래그 중인 원본 흐리게 */
/* 드래그 손잡이는 아이콘뿐 — 제목은 기본 커서(더블클릭으로 열기) */
.asset-name__icon[data-v-63d5c0ad] { cursor: grab;
}
.asset-name__label[data-v-63d5c0ad] { cursor: default;
}
.asset-name__icon[data-v-63d5c0ad] {
  flex: none;
}
.asset-name__icon--folder[data-v-63d5c0ad] {
  color: var(--ink-brand);
}
.asset-name__icon--file[data-v-63d5c0ad] {
  color: var(--ink-secondary);
}
/* ⛔ 확장자별 색을 이 화면이 다시 칠하지 않는다 — 전역 `styles/file-type-icons.css`(.ftype--*) 소관이다.
   여기 있던 `:deep(.ext-*)` 아홉 줄이 **전부 --ink-secondary** 라, 모양은 갈렸는데 색이 한 가지여서
   자세히 봐야 종류를 알 수 있었다(사용자 지적 2026-09-13). */

/* ⛔ 고른 줄 강조를 이 화면이 다시 그리지 않는다 — 좌측 액센트(4px) + 틴트는 `ListBody` 소관이다.
   여기 있던 3px 막대는 표준보다 얇아 그 화면만 선이 가늘었다(사용자 지적 2026-09-12). */
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.asset-name__label[data-v-63d5c0ad] {
  min-width: 0;
  overflow-wrap: anywhere;
}
.asset-muted[data-v-63d5c0ad] {
  color: var(--ink-secondary);
}
.asset-path[data-v-63d5c0ad] {
  color: var(--ink-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* "더 보기" 센티넬 행 — 화면 진입 시 다음 페이지 자동 로드 */
.asset-more[data-v-63d5c0ad] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.asset-more__icon[data-v-63d5c0ad] {
  color: var(--ink-brand);
}
.asset-actions[data-v-63d5c0ad] {
  display: flex;
  width: 100%;
  gap: var(--gap-glyph);
  justify-content: flex-end;
}
/* 보기 전환 세그먼트 컨트롤 — 상품정보(상품/개정)와 동일한 슬라이딩 thumb 방식.
   토큰만 사용(신규 파일 strict). ProductView 의 .segmented-control 을 토큰화해 재현. */
.segmented-control[data-v-63d5c0ad] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: var(--h-control-md);
  padding: var(--space-tight);
  /* 중립 트랙 — 옆 보조(secondary) 버튼들과 톤을 맞춰 튀지 않게. 활성 표시는 흰 thumb + primary 아이콘. */
  background-color: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.segmented-control__thumb[data-v-63d5c0ad] {
  position: absolute;
  top: var(--space-tight);
  bottom: var(--space-tight);
  left: var(--space-tight);
  right: calc(50% + var(--space-tight));
  background-color: var(--bg-field);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-badge);
  transition: left var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1), right var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0; /* css-ignore: 세그먼트 내부 로컬 stacking (thumb 를 옵션 텍스트 뒤로) */
}
.segmented-control__thumb--right[data-v-63d5c0ad] {
  left: calc(50% + var(--space-tight));
  right: var(--space-tight);
}
/* 3위치 세그먼트 — thumb 너비=옵션 1칸(트랙 안쪽 폭의 1/3), transform 으로 0/1/2칸 이동 */
.segmented-control--3 .segmented-control__thumb[data-v-63d5c0ad] {
  right: auto;
  width: calc((100% - var(--space-snug)) / 3);
  transform: translateX(0);
}
/* 아이콘 전용 옵션 — 좌우 여백을 좁혀 컴팩트하게(기본 space-3 은 아이콘엔 과함) */
.segmented-control--3 .segmented-control__option[data-v-63d5c0ad] {
  padding: 0 var(--space-snug);
}
.segmented-control--3 .segmented-control__thumb--pos1[data-v-63d5c0ad] { transform: translateX(100%);
}
.segmented-control--3 .segmented-control__thumb--pos2[data-v-63d5c0ad] { transform: translateX(200%);
}
.segmented-control__option[data-v-63d5c0ad] {
  position: relative;
  z-index: 1; /* css-ignore: 세그먼트 내부 로컬 stacking (옵션 텍스트를 thumb 위로) */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
  min-width: 0;
  padding: var(--pad-control);
  border: var(--line-w) solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  line-height: var(--line-none);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-badge);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.segmented-control__option--active[data-v-63d5c0ad] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.segmented-control__option[data-v-63d5c0ad]:hover:not(.segmented-control__option--active) {
  color: var(--ink-primary);
  border-color: var(--ink-brand);
}
.segmented-control__option[data-v-63d5c0ad]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--bg-brand-soft);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
}

/* 기본보기 브레드크럼 — 리스트 상단 현재 경로. '/' 구분, 세그먼트 클릭 이동. */
.asset-crumb[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) 0 var(--space-snug);
  min-height: var(--h-control-md);
  /* ⛔ **경로가 먼저다** — 둘이 한 줄을 다투면 아래로 내려가는 것은 오른쪽 단추 줄이다
     (사용자 지시 2026-09-13). 언제 내려갈지는 폭 경계가 아니라 **내용**이 정한다. */
  flex-wrap: wrap;
}
/* 경로(왼쪽) — 남는 폭 흡수. ⛔ **한 줄로 버틴다**(사용자 지시 2026-09-13) — 접히는 대신
   마디가 줄어들며 말줄임된다(마디마다 ellipsis 가 걸려 있다). */
.asset-crumb__path[data-v-63d5c0ad] {
  flex: 1 1 auto;
  /* 여기까지 줄어들어도 자리가 모자라면 **단추 줄이 아래로 내려간다**(.asset-crumb 의 wrap).
     ⛔ 폭 경계로 미리 내리지 않는다 — 「루트」 한 마디뿐인데 단추가 내려가 있었다(사용자 지적). */
  min-width: min(14rem, 100%);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: var(--gap-glyph);
}
.asset-crumb__seg[data-v-63d5c0ad] {
  flex: 0 1 auto;
  min-width: 0;
}
/* 현재 폴더 작업 툴바 — 오른쪽 정렬 고정(내려가도 오른쪽) */
.asset-crumb__actions[data-v-63d5c0ad] {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
/* 툴바 표준(§2)과 동일한 반응형 — 좁으면 라벨을 숨기고 title 툴팁만 남긴다.
   ⛔ 기준은 **이 칸의 폭**이다(창이 아니다) — 「리스트 ｜ 열기탭」을 켜면 창은 넓은 채로 칸만
      좁아지므로 창 기준 규칙은 한 번도 걸리지 않는다(2026-09-13 실측).
   폴더 안에서는 단추가 넷(폴더·자산·속성·삭제)이라 라벨을 단 채로는 560px 이 필요하다 —
   실측으로 잡은 자리다. 더 좁아지면 아래 규칙이 경로와 단추를 두 줄로 나눈다. */
/* 아주 좁아지면 단추는 아이콘만 남기고 이름은 툴팁(title)이 갖는다 — 툴바 표준(§2)과 같다.
   실측 2026-09-13: 단추 넷(폴더·자산·속성·삭제)이 이름을 달면 약 350px 이 필요하다. */
@container asset-left (max-width: 420px) {
.asset-crumb__actions[data-v-63d5c0ad] .app-btn__label {
    display: none;
}
}
/* 판이 아니라 창이 좁은 경우(폰) — 켜지 않은 자산관리 화면도 같은 규칙을 따른다. */
@media (max-width: 768px) {
.asset-crumb__actions[data-v-63d5c0ad] .app-btn__label {
    display: none;
}
}
.asset-crumb__seg[data-v-63d5c0ad] {
  max-width: 18rem;
}
/* 좁은 폰: 깊은 폴더명 하나가 288px(≈폰 한 폭)를 먹지 않게 화면비로 제한 */
@media (max-width: 480px) {
.asset-crumb__seg[data-v-63d5c0ad] {
    max-width: 40vw;
}
}
.asset-crumb__seg[data-v-63d5c0ad] .app-button__label,
.asset-crumb__seg[data-v-63d5c0ad] span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 현재(마지막) 세그먼트 — 클릭 불가지만 흐리지 않게(경로 인지). */
.asset-crumb__seg--current[data-v-63d5c0ad] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
  opacity: 1;
}
.asset-crumb__sep[data-v-63d5c0ad] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* 경로 끝 행 수 (N) — 현재 폴더에 표시된 행이 몇 개인지 */
.asset-crumb__count[data-v-63d5c0ad] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.asset-form[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
/* 등록 모달 본문 — 빈 상태(가장 흔한 초기 화면) 실측 높이로 고정해 파일이 몇 개 쌓여도
   모달이 커졌다 작아졌다 하지 않게 한다(모달 표준). 넘치는 내용은 내부 스크롤.
   실측(1440×900): 빈 상태 본문 676px ≈ 42.25rem. 짧은 뷰포트는 62vh 로 낮춘다. */
.asset-form--upload[data-v-63d5c0ad] {
  height: min(42.25rem, 62vh);
  overflow-y: auto;
}
/* ── 등록/폴더 마법사 — TodoCreateWizard 와 같은 시각 문법(제목+단계 점, 카드 선택) ── */
.asset-wizard__title[data-v-63d5c0ad] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
}
.asset-wizard__steps[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-left: auto;
  margin-right: var(--gap-inline);
}
.asset-wizard-dot[data-v-63d5c0ad] {
  /* dimensions-ignore: 단계 점 지름 — TodoCreateWizard 와 동일 고정 치수 */
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-marker);
  font-weight: var(--weight-title);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
}
.asset-wizard-dot--active[data-v-63d5c0ad] {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
}
.asset-wizard-dot--done[data-v-63d5c0ad] {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
  opacity: 0.6;
}
.asset-wizard-step[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
/* ① 종류 트리 — 찾기 + 분류. 높이가 고정이라 종류가 늘어도 판이 안 커진다.
   원본: components/asset/viewers/db/DbNavTree.vue (아이콘·이름·오른끝 곁말의 줄 문법). */
/* ① 방식 카드 — 이 모달이 본래 쓰던 갈래 카드 그대로다(옛 ① 에서 그대로 옮겨 왔다).
   다른 점: 줄이 둘뿐이라 스크롤이 날 수 없고, 남는 자리에 붙지 않도록 판 가운데에 세운다. */
.asset-mode-cards[data-v-63d5c0ad] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-group);
  min-height: 0;
}
.asset-kind-card[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--pad-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.asset-kind-card[data-v-63d5c0ad]:hover {
  border-color: var(--ink-brand);
}
.asset-kind-card--selected[data-v-63d5c0ad] {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.asset-kind-card__icon[data-v-63d5c0ad] {
  font-size: var(--icon-header);
  color: var(--ink-brand);
  flex-shrink: 0;
}
.asset-kind-card__text[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.asset-kind-card__name[data-v-63d5c0ad] {
  font-weight: var(--weight-title);
}
.asset-kind-card__desc[data-v-63d5c0ad] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.asset-kind-tree[data-v-63d5c0ad] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  padding: var(--pad-row-dense);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.asset-kind-group[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-menu-item);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.asset-kind-group__icon[data-v-63d5c0ad] {
  color: var(--ink-warning);
  font-size: var(--icon-label);
}
.asset-kind-item[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: var(--pad-menu-item);
  padding-left: var(--space-roomy);
  border: var(--line-none);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-primary);
  cursor: pointer;
}
.asset-kind-item[data-v-63d5c0ad]:hover {
  background: var(--bg-hover);
}
.asset-kind-item--selected[data-v-63d5c0ad] {
  background: var(--bg-brand-soft);
  box-shadow: var(--ring-focus);
}
.asset-kind-item__icon[data-v-63d5c0ad] {
  flex: none;
  color: var(--ink-brand);
  font-size: var(--icon-label);
}
/* 넘침은 이름이 받는다 — 오른끝 확장자는 줄지 않는다(그것이 무엇인지 가리는 말이라). */
.asset-kind-item__name[data-v-63d5c0ad] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-kind-item__ext[data-v-63d5c0ad] {
  margin-left: auto;
  padding-left: var(--space-tight);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.asset-kind-empty[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--pad-card);
}
/* 고른 종류의 설명 — 두 줄 고정. 줄마다 설명을 달면 트리가 길어지므로 한 자리에 모으되,
   한 줄로 자르면 DB 연결처럼 긴 설명이 문장 한가운데서 끊긴다(실측 2026-09-13).
   자리는 **늘 두 줄만큼** 잡아 두어 종류를 바꿔도 판이 흔들리지 않는다(모달 표준).
   원본: components/document/DocumentCard.vue 의 두 줄 자르기. */
.asset-kind-desc[data-v-63d5c0ad] {
  margin: 0;
  min-height: var(--h-control-md);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--line-normal);
  white-space: normal;
  word-break: break-word;
}
/* 형식 자리 — 고르개·직접입력·고정 안내가 같은 높이로 선다(모달 표준).
   실측: 라벨 21px + 간격 4px + 컨트롤 38px + 여유 = 64px(4rem) — 제목 자리와 같은 셈. */
.asset-ext-slot[data-v-63d5c0ad] {
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 만들어질 파일 이름 — 글자가 아니라 '값'이라 등폭으로 둔다 */
.asset-blank-name[data-v-63d5c0ad] {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-body);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 폴더 마법사 본문 — 두 단계 중 높은 쪽(위치 트리) 기준 고정 */
.asset-form--folder-wizard[data-v-63d5c0ad] {
  height: min(24rem, 55vh);
  overflow-y: auto;
}
/* 마법사 본문을 세로 flex 로 — 채움 필드(트리·설명)가 남는 높이를 다 쓰게 */
.asset-form--upload[data-v-63d5c0ad],
.asset-form--folder-wizard[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
}
.asset-form--upload > .asset-wizard-step[data-v-63d5c0ad],
.asset-form--folder-wizard > .asset-wizard-step[data-v-63d5c0ad] {
  flex: 1 1 auto;
  min-height: 0;
}
/* 채움 필드 — 상자 안 스크롤 + 아래 죽은 공간 대신, 남는 높이를 컨트롤이 다 쓴다(2026-08-16 지적) */
.asset-field--fill[data-v-63d5c0ad] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.asset-field--fill[data-v-63d5c0ad] .aftp {
  flex: 1 1 auto;
  min-height: 0;
}
.asset-field--fill[data-v-63d5c0ad] .aftp__list {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.asset-field--fill .asset-desc-fill[data-v-63d5c0ad],
.asset-field--fill .asset-desc-fill[data-v-63d5c0ad] textarea {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
/* 외부 연결 푸터의 연결 테스트 결과 한 줄 */
.asset-remote-test[data-v-63d5c0ad] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--size-meta);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  overflow: hidden;
}
.asset-remote-test__text[data-v-63d5c0ad] {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asset-remote-test--ok[data-v-63d5c0ad] {
  color: var(--ink-success);
}
.asset-remote-test--fail[data-v-63d5c0ad] {
  color: var(--ink-danger);
}
.asset-remote-test--idle[data-v-63d5c0ad] {
  color: var(--ink-secondary);
}
/* 새 DB 엔진 고르기 — 칩 한 줄 */
.asset-db-engines[data-v-63d5c0ad] {
  display: flex;
  gap: var(--gap-inline);
}
/* 제목 자리 — 단건(라벨+입력)과 다건(안내문)이 같은 키로 서게 최고 상태(라벨+입력) 기준 고정.
   실측: 라벨 21px + 간격 4px + 입력 38px + 여유 = 64px(4rem, 브라우저 실측 일치). */
.asset-title-slot[data-v-63d5c0ad] {
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.asset-field[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.asset-field__label[data-v-63d5c0ad] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.asset-field__label .req[data-v-63d5c0ad] {
  color: var(--ink-danger);
}
.asset-optional[data-v-63d5c0ad] {
  color: var(--ink-secondary);
  font-weight: var(--weight-body);
}
.asset-hint[data-v-63d5c0ad] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
}
.asset-del-icon[data-v-63d5c0ad] {
  color: var(--ink-secondary);
}
/* 행 액션 삭제 버튼 호버 시 위험색 */
.asset-actions[data-v-63d5c0ad] .app-button:hover .asset-del-icon {
  color: var(--ink-danger);
}

/* ── 파일 드롭존 (네이티브 file input 대체, 테마 일치) ── */
.asset-file-hidden[data-v-63d5c0ad] {
  display: none;
}
.asset-dropzone[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
  border: 1.5px dashed var(--line-color);  /* role-ignore: 헤어라인 — 1px 과 2px 사이가 필요한 자리 */
  border-radius: var(--radius-control);
  background: var(--bg-card);
  padding: var(--space-band) var(--space-cozy);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.asset-dropzone[data-v-63d5c0ad]:hover,
.asset-dropzone[data-v-63d5c0ad]:focus-visible {
  border-color: var(--ink-brand);
  outline: none;
}
.asset-dropzone.is-over[data-v-63d5c0ad] {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.asset-dropzone.has-file[data-v-63d5c0ad] {
  flex-direction: row;
  padding: var(--space-cozy);
  justify-content: flex-start;
}
.asset-dropzone__up-icon[data-v-63d5c0ad] {
  font-size: var(--icon-header);
  color: var(--ink-secondary);
}
.asset-dropzone__file-icon[data-v-63d5c0ad] {
  color: var(--ink-brand);
  flex: none;
}
.asset-dropzone__hint[data-v-63d5c0ad] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.asset-dropzone__hint[data-v-63d5c0ad] b,
.asset-dropzone__hint b[data-v-63d5c0ad] {
  color: var(--ink-brand);
}
.asset-dropzone__sub[data-v-63d5c0ad] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.asset-dropzone__name[data-v-63d5c0ad] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-primary);
}
.asset-dropzone__size[data-v-63d5c0ad] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-left: auto;
  flex: none;
}

/* 선택 파일 목록 — 다중 업로드 파일별 진행률·상태 */
.asset-files[data-v-63d5c0ad] {
  list-style: none;
  margin: var(--gap-inline) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  max-height: 180px; /* css-ignore: 선택 파일 목록 스크롤 상한(치수 토큰 없음) */
  overflow-y: auto;
}
.asset-file[data-v-63d5c0ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
}
.asset-file.is-error[data-v-63d5c0ad] { border-color: var(--ink-danger);
}
.asset-file__icon[data-v-63d5c0ad] { color: var(--ink-secondary); flex: none;
}
.asset-file__name[data-v-63d5c0ad] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.asset-file__size[data-v-63d5c0ad] { color: var(--ink-secondary); font-size: var(--size-label); flex: none;
}
.asset-file__bar[data-v-63d5c0ad] {
  flex: none;
  width: 80px; /* css-ignore: 진행바 고정폭(치수 토큰 없음) */
  height: var(--space-tight);
  background: var(--bg-page);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.asset-file__bar-fill[data-v-63d5c0ad] {
  display: block;
  height: 100%;
  background: var(--bg-brand-vivid);
  transition: width var(--motion-fast) ease;
}
.asset-file__bar-fill.is-done[data-v-63d5c0ad] { background: var(--ink-success);
}
.asset-file__pct[data-v-63d5c0ad] { flex: none; font-size: var(--size-meta); color: var(--ink-secondary); min-width: var(--space-wide); text-align: right;
}
.asset-file__done[data-v-63d5c0ad] { color: var(--ink-success); flex: none;
}
.asset-file__err[data-v-63d5c0ad] { color: var(--ink-danger); flex: none;
}

/* 트리 행 드래그 이동 — 손잡이는 아이콘뿐(위 .asset-name__icon) */
.asset-name.is-drop-target[data-v-63d5c0ad] {
  outline: var(--focus-ring-width) dashed var(--ink-brand);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
  background: var(--bg-brand-soft);
}
/* 원래 부모 폴더로의 드롭 무효 — 제자리 이동이라 막음(단일 드래그). 못 놓는다는 표시. */
.asset-name.is-no-drop[data-v-63d5c0ad] {
  outline: var(--focus-ring-width) dashed var(--ink-danger);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
  opacity: 0.75;
}

/* ───── 「리스트 ｜ 열기탭」 ─────
   원본: components/todo/TodoWorkTypeMeta.vue 의 `.vertical-split-container`(같은 분리대를 쓰는 화면).
   다른 점: **꺼져 있을 때가 기본**이라 그때는 판이 그냥 한 칸이다(아래 규칙이 전부 `.is-split` 안). */
.asset-split[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
.asset-split.vertical-split-container[data-v-63d5c0ad] {
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  /* ⚠️ 자식(목록 하한·오른쪽 px 폭)이 컨테이너를 밀어 넓히지 못하게 — 분리대 드래그가 제 폭을
     기준으로 오른쪽을 키우는 자기증폭 루프를 막는다(선례: PartsClausesView `.mi-split`). */
  overflow: hidden;
  max-width: 100%;
}
/* 드래그 중 오른쪽 뷰어(iframe·PDF)가 마우스를 가로채지 못하게 깔리는 덮개.
   z-index 규칙은 tokens.css 의 --z-resize-overlay 주석 참고. */
.asset-split .resize-overlay[data-v-63d5c0ad] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.asset-split__left[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* ⛔ 이 칸 안의 반응형은 **창이 아니라 이 칸의 폭**이 정한다(breakpoint 표준).
     창은 1600px 인데 칸은 456px 인 자리라, 창 기준 규칙(@media)은 아예 걸리지 않아
     단추가 라벨을 단 채 분리대 밖으로 밀려 나갔다(2026-09-13 실측: 좁히면 3px 넘침). */
  container-type: inline-size;
  container-name: asset-left;
}
/* 분리대에 살이 닿지 않게 — 켠 동안에만 오른쪽 여백을 준다(사용자 지적 2026-09-13
   「툴바 버튼 오른쪽 여백도 없고」. 실측: 단추 오른쪽 끝이 칸 오른쪽 끝과 정확히 같았다). */
.asset-split.vertical-split-container .asset-split__left[data-v-63d5c0ad] {
  padding-right: var(--gap-inline);
}
/* 켠 동안 머리줄 덩어리(크럼+제목·툴바+필터)가 내려앉는 자리 — 목록과 같은 폭을 쓴다.
   ⛔ 여기에 여백을 다시 주지 않는다 — 덩어리 안쪽 사이(`--gap-inline`)는 ListScreen 소관이다. */
.asset-split__pinned[data-v-63d5c0ad] {
  flex-shrink: 0;
  min-width: 0;
  /* 포털로 옮겨 온 덩어리는 `.list-screen` 자손이 아니게 되므로, 그 자리에서 다시 세로로 쌓는다. */
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.asset-split__right[data-v-63d5c0ad] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-page);
}
/* ⛔ 탭 줄·무대·빈 자리의 모양은 여기 없다 — 칸 부품(panes/AssetPaneNode.vue)이 갖는다.
   칸이 중첩 분할되면서 「오른쪽 칸 하나」가 아니게 되었고, 그 안은 몇 겹이든 같은 모양이라야 한다. */

/* 화면 전체 파일 드롭 오버레이 힌트 */
.asset-screen[data-v-63d5c0ad] {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 래퍼가 ListScreen 에 높이를 넘겨 바디(ListBody)가 내부 스크롤되게 — 안 그러면 리스트가 통째로
   늘어나 화면 밖으로 잘린다(스크롤 X). */
.asset-screen[data-v-63d5c0ad] >  .list-screen {
  flex: 1;
  min-height: 0;
}
.asset-screen.is-file-over[data-v-63d5c0ad]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--line-w-thick) dashed var(--ink-brand);
  border-radius: var(--radius-control);
  background: var(--bg-brand-soft);
  pointer-events: none;
  z-index: 10; /* css-ignore — 화면 내부 드롭존 오버레이 스태킹 전용, 전역 레이어와 무관 */
}
/* 내부 항목을 빈 영역(최상위)으로 드래그 중 — 은은한 테두리로 루트 드롭존 표시 */
.asset-screen.is-root-drop[data-v-63d5c0ad]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--line-w-thick) dashed var(--ink-brand);
  border-radius: var(--radius-control);
  pointer-events: none;
  z-index: 10; /* css-ignore — 화면 내부 드롭존 오버레이 스태킹 전용, 전역 레이어와 무관 */
  opacity: 0.5;
}

.asset-drag-ghost {
  position: fixed;
  z-index: var(--z-modal);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  background: var(--bg-float);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-float);
  font-size: var(--size-label);
  color: var(--ink-primary);
  max-width: 280px;
}
.asset-drag-ghost__icon { color: var(--ink-brand);
}
.asset-drag-ghost__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 포인터 드래그 진행 중 — 화면 전체 grabbing + 텍스트 선택 방지 */
body.asset-grabbing, body.asset-grabbing * { cursor: grabbing !important;
}
body.asset-grabbing { -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
/* 원래 부모 폴더 위에선 못 놓음 커서(전역 grabbing 을 이김) */
body.asset-grabbing .asset-name.is-no-drop, body.asset-grabbing .asset-name.is-no-drop * { cursor: not-allowed !important;
}

.av-page[data-v-300a36e2] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.av-card[data-v-300a36e2] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* ⛔ **원색을 글자에 그대로 쓰지 않는다** — 태그 면은 제 색 14% 틴트라, 라이트에서 원색을
   얹으면 대비가 2.8~3.4:1 로 바랜다(실사고 2026-09-04: 태그 「에러」 3.38:1, 기준 4.5).
   의미색 12종은 라이트에서 한 단 어둡게 재보정되는데 **DB 에 저장된 태그 hex 는 그 보정을
   못 받는다.** 그 몫을 여기서 한다 — 재료(--tag-ink-amt/--tag-ink-shade)는 tokens.css 가
   테마별로 주고, 조합은 **제 색이 있는 이 자리에서** 한다(커스텀 속성의 var 는 적은 자리에서 푼다).
   다크에서는 100% + transparent 라 원색 그대로다. */
.todo-tag-ink[data-v-1003e373] {
  --_badge-fg: color-mix(in srgb, var(--_tag-color, currentColor) var(--tag-ink-amt), var(--tag-ink-shade));
}

.priority-options[data-v-7247610d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* 우선순위 옵션 — 색 코드된 도메인 세그먼트 선택자 (AppButton 으로 대체 불가) */
.priority-option[data-v-7247610d] {
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
  text-align: center;
}
.priority-option[data-v-7247610d]:hover {
  background: var(--bg-hover);
}
.priority-option--selected[data-v-7247610d] {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.priority-option--low.priority-option--selected[data-v-7247610d] {
  background: var(--bg-field);
  border-color: var(--ink-secondary);
  color: var(--ink-secondary);
}
.priority-option--normal.priority-option--selected[data-v-7247610d] {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.priority-option--high.priority-option--selected[data-v-7247610d] {
  background: var(--bg-warning-soft);
  border-color: var(--ink-warning);
  color: var(--ink-warning);
}
.priority-option--urgent.priority-option--selected[data-v-7247610d] {
  background: var(--bg-danger-soft);
  border-color: var(--ink-danger);
  color: var(--ink-danger);
}
.priority-option__label[data-v-7247610d] {
  display: block;
}
.priority-reason-group[data-v-7247610d] {
  margin-top: var(--gap-group);
}
.priority-reason-label[data-v-7247610d] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.priority-reason-input[data-v-7247610d] {
  width: 100%;
}

.status-options-label[data-v-59e2c136] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.status-options[data-v-59e2c136] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* 상태 옵션 — 진행/후퇴 색 코드된 도메인 세그먼트 선택자 (AppButton 으로 대체 불가) */
.status-option[data-v-59e2c136] {
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
  text-align: center;
}
.status-option[data-v-59e2c136]:hover {
  background: var(--bg-hover);
}
.status-option--selected[data-v-59e2c136] {
  font-weight: var(--weight-title);
}
.status-option--forward.status-option--selected[data-v-59e2c136] {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.status-option--backward.status-option--selected[data-v-59e2c136] {
  background: var(--bg-danger-soft);
  border-color: var(--ink-danger);
  color: var(--ink-danger);
}
.status-option__label[data-v-59e2c136] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.status-option__arrow[data-v-59e2c136] {
  font-size: var(--icon-marker);
  opacity: 0.8;
}
.status-option__arrow--forward[data-v-59e2c136] {
  margin-left: var(--gap-glyph);
  color: var(--ink-brand);
}
.status-option__arrow--backward[data-v-59e2c136] {
  margin-right: var(--gap-glyph);
  color: var(--ink-danger);
}
.status-warning-message[data-v-59e2c136] {
  margin-top: var(--gap-group);
  padding: var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-warning-soft);
  border: var(--line-w) solid var(--ink-warning);
  color: var(--ink-warning);
  font-size: var(--size-body);
  line-height: var(--line-normal);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
}
.status-warning-message i[data-v-59e2c136] {
  font-size: var(--icon-label);
  flex-shrink: 0;
  margin-top: var(--gap-glyph);
}
.status-warning-message span[data-v-59e2c136] {
  flex: 1;
}
.status-reason-group[data-v-59e2c136] {
  margin-top: var(--gap-group);
}
.status-reason-label[data-v-59e2c136] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.status-reason-input[data-v-59e2c136] {
  width: 100%;
}

.app-date-picker[data-v-6ccfc21f] {
  height: var(--h-control-md);
  padding: 0 var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: var(--size-body);
  box-sizing: border-box;
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
  /* 네이티브 달력 아이콘·팝업이 테마를 따르도록 (다크 기본, 라이트는 아래 오버라이드) */
  color-scheme: dark;
}
html[data-theme='light'] .app-date-picker[data-v-6ccfc21f],
body[data-theme='light'] .app-date-picker[data-v-6ccfc21f] {
  color-scheme: light;
}
.app-date-picker[data-v-6ccfc21f]:hover:not(:disabled) {
  border-color: var(--ink-brand);
}
.app-date-picker[data-v-6ccfc21f]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.app-date-picker[data-v-6ccfc21f]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.app-date-picker[data-v-6ccfc21f]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* === Sizes === */
.app-date-picker--sm[data-v-6ccfc21f] {
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
}

.app-time-picker[data-v-b68475cb] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-md);
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  box-sizing: border-box;
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.app-time-picker[data-v-b68475cb]:hover:not(.app-time-picker--disabled) {
  border-color: var(--ink-brand);
}
.app-time-picker[data-v-b68475cb]:focus-within {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.app-time-picker--disabled[data-v-b68475cb] {
  opacity: 0.6;
  cursor: not-allowed;
}
.app-time-picker__field[data-v-b68475cb] {
  width: 28px;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--size-body);
  text-align: center;
  padding: 0;
  /* 네이티브 인풋 기본 외형 제거 */
  -moz-appearance: textfield;
}
.app-time-picker__field[data-v-b68475cb]::-webkit-outer-spin-button,
.app-time-picker__field[data-v-b68475cb]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.app-time-picker__field[data-v-b68475cb]::-moz-placeholder {
  color: var(--ink-secondary);
  opacity: 0.6;
}
.app-time-picker__field[data-v-b68475cb]::placeholder {
  color: var(--ink-secondary);
  opacity: 0.6;
}
.app-time-picker__field[data-v-b68475cb]:disabled {
  cursor: not-allowed;
}
.app-time-picker__sep[data-v-b68475cb] {
  color: var(--ink-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* === Sizes === */
.app-time-picker--sm[data-v-b68475cb] {
  height: var(--h-control-sm);
  border-radius: var(--radius-badge);
}
.app-time-picker--sm .app-time-picker__field[data-v-b68475cb] {
  font-size: var(--size-label);
  width: 24px;
}

.due-date-input-group[data-v-5aaae164] {
  margin-bottom: var(--gap-group);
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.due-date-input-group[data-v-5aaae164]:last-of-type {
  margin-bottom: 0;
}
.due-date-input-label[data-v-5aaae164] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.due-date-reason-group[data-v-5aaae164] {
  margin-top: var(--gap-group);
}
.due-date-reason-label[data-v-5aaae164] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.due-date-reason-input[data-v-5aaae164] {
  width: 100%;
}

/* 원본: components/admin/AdminUsersConfig.vue 의 역할 편집 모달(.transfer-*) — 값까지 그대로다.
   다른 점: 오른쪽이 두 칸(담당자·검토자)이라 그 자리만 세로로 나눈다. */
.transfer-container[data-v-1e565484] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--gap-stack);
  align-items: stretch;
}
.transfer-column[data-v-1e565484] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  min-width: 0;
}
.transfer-column__header[data-v-1e565484] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
}
.transfer-column__title[data-v-1e565484] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.transfer-column__search[data-v-1e565484] {
  padding: var(--space-snug);
  border-bottom: var(--line-strong);
}
.transfer-column__body[data-v-1e565484] {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
  min-height: 200px;
}
/* 오른쪽 두 칸은 왼쪽 칸의 키를 나눠 가지므로 제 키를 주장하지 않는다. */
.transfer-side .transfer-column__body[data-v-1e565484] {
  min-height: 0;
  max-height: none;
}
.transfer-list[data-v-1e565484] {
  display: flex;
  flex-direction: column;
}
.transfer-item[data-v-1e565484] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  cursor: pointer;
  transition: background var(--motion-fast);
  font-size: var(--size-label);
  /* 행을 잇달아 눌러 고르는 자리 — 글자가 긁혀 선택되지 않게(원본: UserTransferPicker.vue .utp-item) */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.transfer-item[data-v-1e565484]:hover { background: var(--bg-hover);
}
.transfer-item--selected[data-v-1e565484] {
  background: var(--bg-active);
  border-left: var(--line-w-thick) solid var(--ink-brand);
}
.transfer-empty[data-v-1e565484] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.transfer-actions[data-v-1e565484] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--gap-glyph);
  padding: 0 var(--space-tight);
}
.transfer-actions__divider[data-v-1e565484] {
  height: var(--line-w);
  background: var(--line-color);
  margin: var(--gap-glyph) 0;
}

/* 오른쪽: 담당자 칸과 검토자 칸이 왼쪽 한 칸의 키를 나눠 쓴다. */
.transfer-side[data-v-1e565484] {
  display: grid;
  grid-template-rows: 2fr 1fr;
  gap: var(--gap-stack);
  min-width: 0;
}
.transfer-item__user[data-v-1e565484] {
  min-width: 0;
}
.transfer-item__user[data-v-1e565484] .user-label__name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* ⛔ 검수자 고리는 **얼굴에만** 두른다 — 부품 뿌리에 두르면 이름까지 감싼다.
   간격·배치는 UserLabel 이 갖고, 화면은 이 자리에만 얹는다. */
.transfer-item__user--verifier[data-v-1e565484] .user-label__face {
  box-shadow: 0 0 0 var(--line-w-thick) var(--ink-brand);
  border-radius: var(--radius-pill);
}
.transfer-item__verifier-mark[data-v-1e565484] {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  font-size: var(--icon-marker) !important;
  background: var(--bg-brand);
  color: var(--ink-on-solid) !important;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.assignee-reason-group[data-v-1e565484] {
  margin-top: var(--gap-stack);
}
.assignee-reason-label[data-v-1e565484] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
/* ── 좁은 화면: 3열 → 1열 세로 스택 (원본: AdminUsersConfig.vue 역할 편집) ── */
@media (max-width: 768px) {
.transfer-container[data-v-1e565484] {
    grid-template-columns: 1fr;
}
.transfer-actions[data-v-1e565484] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-tight) 0;
    gap: var(--gap-inline);
}
.transfer-actions__divider[data-v-1e565484] {
    display: none;
}
.transfer-column__body[data-v-1e565484],
  .transfer-side .transfer-column__body[data-v-1e565484] {
    max-height: 140px;
    min-height: 70px;
}
.transfer-side[data-v-1e565484] {
    grid-template-rows: auto auto;
}
}

.app-slider[data-v-3a462ee8] {
  --_track-h: var(--space-tight);          /* 4 — 밀도 씨앗을 따라 함께 굵어진다 */
  --_thumb: var(--space-roomy);            /* 16 */
  --_accent: var(--ink-brand);             /* 채운 쪽·손잡이 — tone 이 바꾼다 */
  width: 100%;
  /* 잡히는 자리는 **손잡이만큼**이다 — 보이는 줄(4px)만큼만 두면 못 잡는다.
     ⛔ 실측 2026-09-03: 높이를 안 주면 input 상자가 트랙 높이(4px)로 잡혀, 크롬·사파리에서
        가운데서 4px 만 벗어나도 클릭이 슬라이더에 안 닿았다(파이어폭스만 17px). 끌어서 고르는
        컨트롤인데 잡을 자리가 4px 인 셈이었다. 보이는 줄 굵기는 트랙이 정하므로 모양은 그대로다. */
  height: var(--_thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.app-slider--sm[data-v-3a462ee8] {
  --_thumb: var(--space-cozy);             /* 12 — 좁은 판 */
}
.app-slider--danger[data-v-3a462ee8] { --_accent: var(--ink-danger);
}
.app-slider[data-v-3a462ee8]:disabled { cursor: not-allowed; opacity: 0.5;
}

/* 트랙 — 채워진 쪽은 브랜드, 남은 쪽은 입력 면 */
.app-slider[data-v-3a462ee8]::-webkit-slider-runnable-track {
  height: var(--_track-h);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--_accent) 0 var(--_filled),
    var(--bg-field) var(--_filled) 100%
  );
}
.app-slider[data-v-3a462ee8]::-moz-range-track {
  height: var(--_track-h);
  border-radius: var(--radius-pill);
  background: var(--bg-field);
}
.app-slider[data-v-3a462ee8]::-moz-range-progress {
  height: var(--_track-h);
  border-radius: var(--radius-pill);
  background: var(--_accent);
}

/* 손잡이 */
.app-slider[data-v-3a462ee8]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--_thumb);
  height: var(--_thumb);
  margin-top: calc((var(--_track-h) - var(--_thumb)) / 2);
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-w-thick) solid var(--_accent);
  box-shadow: var(--shadow-card);
  -webkit-transition: transform var(--motion-fast) ease;
  transition: transform var(--motion-fast) ease;
}
.app-slider[data-v-3a462ee8]::-moz-range-thumb {
  width: var(--_thumb);
  height: var(--_thumb);
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-w-thick) solid var(--_accent);
  box-shadow: var(--shadow-card);
}
.app-slider[data-v-3a462ee8]:not(:disabled):active::-webkit-slider-thumb { transform: scale(1.12);
}
.app-slider[data-v-3a462ee8]:focus-visible { outline: none;
}
.app-slider[data-v-3a462ee8]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring-focus);
}
.app-slider[data-v-3a462ee8]:focus-visible::-moz-range-thumb { box-shadow: var(--ring-focus);
}
@media (prefers-reduced-motion: reduce) {
.app-slider[data-v-3a462ee8]::-webkit-slider-thumb { -webkit-transition: none; transition: none;
}
}

.user-picker__option-face[data-v-e1fd0b0b] {
  display: inline-flex;
}

.bulk-comment__header-content[data-v-e5fa2285] {
  flex: 1;
  min-width: 0;
}
.bulk-comment__title[data-v-e5fa2285] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.bulk-comment__subtitle[data-v-e5fa2285] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.bulk-comment__body[data-v-e5fa2285] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.bulk-comment__notify-label[data-v-e5fa2285] {
  font-size: var(--size-body);
}
.bulk-comment__notify-hint[data-v-e5fa2285] {
  margin: 0;
  font-size: var(--size-label);
  line-height: var(--line-comfortable);
  color: var(--ink-secondary);
}

.ds-panel[data-v-8eb2371a] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  gap: var(--gap-inline);
}

/* 검색 */
.ds-search[data-v-8eb2371a] {
  flex-shrink: 0;
}

/* 문서 유형 필터 행 */
.ds-doc-type-row[data-v-8eb2371a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}

/* 회사 필터 + 정렬 */
.ds-filter-row[data-v-8eb2371a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ds-sort-btns[data-v-8eb2371a] {
  display: flex;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  margin-left: auto;
}
.ds-sort-btn__icon[data-v-8eb2371a] {
  font-size: var(--icon-marker);
}
.ds-company-select[data-v-8eb2371a] {
  flex: 1;
  min-width: 0;
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  outline: none;
}

/* 목록 */
.ds-list[data-v-8eb2371a] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
}
.ds-status[data-v-8eb2371a] {
  padding: var(--space-band);
  text-align: center;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.ds-status--more[data-v-8eb2371a] {
  padding: var(--space-cozy);
}

/* ds-status__reset — AppButton secondary xs + 레이아웃 */
.ds-status__reset[data-v-8eb2371a] {
  margin-top: var(--gap-inline);
}
.ds-item[data-v-8eb2371a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  cursor: pointer;
  border-bottom: var(--line-strong);
  transition: background var(--motion-fast) ease;
}
.ds-item[data-v-8eb2371a]:last-child {
  border-bottom: none;
}
.ds-item[data-v-8eb2371a]:hover:not(.ds-item--excluded) {
  background: var(--bg-brand-soft);
}
.ds-item--selected[data-v-8eb2371a] {
  background: var(--bg-brand-soft);
  border-left: var(--line-accent) solid var(--ink-brand);
}
.ds-item--excluded[data-v-8eb2371a] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ds-item__row1[data-v-8eb2371a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.ds-item__name[data-v-8eb2371a] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ds-item__type-tag[data-v-8eb2371a] {
  flex-shrink: 0;
}
.ds-item__docid[data-v-8eb2371a] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  opacity: 0.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-item__row2[data-v-8eb2371a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ds-item__company[data-v-8eb2371a] {
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-item__size[data-v-8eb2371a] {
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.75;
}
.ds-item__spacer[data-v-8eb2371a] {
  flex: 1;
}
.ds-item__date[data-v-8eb2371a] {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 순서 표시 */
.ds-item__slot-mark[data-v-8eb2371a] {
  flex-shrink: 0;
}

/* 멀티 선택 상단 바 */
.ds-multi-top[data-v-8eb2371a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) 0;
  padding-bottom: var(--space-snug);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.ds-multi-top__selections[data-v-8eb2371a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 1;
  min-width: 0;
}
.ds-multi-top__slot[data-v-8eb2371a] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-control);
  border: var(--line-w) dashed var(--line-color);
  background: var(--bg-page);
}
.ds-multi-top__slot--left[data-v-8eb2371a] {
  justify-content: flex-start;
}
.ds-multi-top__slot--right[data-v-8eb2371a] {
  justify-content: flex-end;
}
.ds-multi-top__vs[data-v-8eb2371a] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-muted);
  opacity: 0.6;
}
.ds-multi-top__dot[data-v-8eb2371a] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-marker);
  font-weight: var(--weight-strong);
  color: var(--ink-on-solid);
}
.ds-multi-top__dot--a[data-v-8eb2371a] { background: var(--bg-brand);
}
.ds-multi-top__dot--b[data-v-8eb2371a] { background: var(--bg-indigo);
}
.ds-multi-top__dot--empty[data-v-8eb2371a] {
  background: transparent;
  border: var(--line-w) dashed var(--ink-muted);
  color: var(--ink-muted);
  opacity: 0.5;
}
.ds-multi-top__name[data-v-8eb2371a] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--ink-primary);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
}
.ds-multi-top__empty[data-v-8eb2371a] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
  opacity: 0.6;
}

/* ds-multi-top__remove — AppButton icon-only ghost xs + 레이아웃 */
.ds-multi-top__remove[data-v-8eb2371a] {
  flex-shrink: 0;
}

/* 멀티 선택 하단 확인 바 */
.ds-multi-bottom[data-v-8eb2371a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  border-top: var(--line-strong);
  background: var(--bg-page);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
}
.ds-multi-bottom--warn[data-v-8eb2371a] {
  background: var(--bg-warning-soft);
  border-top-color: var(--ink-warning);
  animation: ds-warn-shake-8eb2371a 0.3s ease;
}
@keyframes ds-warn-shake-8eb2371a {
0%, 100% { transform: translateX(0);
}
25% { transform: translateX(-4px);
}
75% { transform: translateX(4px);
}
}
.ds-multi-bottom__message[data-v-8eb2371a] {
  flex: 1;
  min-width: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.ds-multi-bottom__msg-icon[data-v-8eb2371a] {
  opacity: 0.6;
  font-size: var(--icon-marker);
}
.ds-multi-bottom__warn-icon[data-v-8eb2371a] {
  flex-shrink: 0;
  color: var(--ink-warning);
  font-size: var(--icon-marker);
}

/* ds-multi-bottom__btn — AppButton primary sm + 레이아웃 */
.ds-multi-bottom__btn[data-v-8eb2371a] {
  flex-shrink: 0;
}

.wizard-popup__title[data-v-affb34b3] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
}
.wizard-popup__steps[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.wizard-step-dot[data-v-affb34b3] {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-marker);
  font-weight: var(--weight-title);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
  transition: all var(--motion-base) ease;
}
.wizard-step-dot--active[data-v-affb34b3] {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
}
.wizard-step-dot--done[data-v-affb34b3] {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
  opacity: 0.6;
}

/* Body */
.wizard-popup__body[data-v-affb34b3] {
  flex: 1 1 0;
  /* AppModal 은 max-height 만 있고 컨텐츠가 적은 step(특히 step 1) 에서 모달이 작게 줄어드는 문제 — 원본 wizard-popup{height:70vh} 효과 복원 */
  min-height: calc(70vh - 120px);
  overflow-y: auto;
  padding: var(--pad-modal);
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
.wizard-popup__body[data-v-affb34b3] {
    min-height: calc(80vh - 120px);
}
}
.wizard-step[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.wizard-step--centered[data-v-affb34b3] {
  justify-content: center;
  align-items: center;
}
.wizard-step--centered .wizard-worktype-list[data-v-affb34b3] {
  width: 100%;
  max-width: 400px;
}
.wizard-step__desc[data-v-affb34b3] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0 0 var(--gap-stack) 0;
  flex-shrink: 0;
}

/* Step 1: Work type cards */
.wizard-worktype-list[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.wizard-worktype-item[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-roomy) var(--space-roomy);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  text-align: left;
  width: 100%;
}
.wizard-worktype-item[data-v-affb34b3]:hover {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.wizard-worktype-item--selected[data-v-affb34b3] {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.wizard-worktype-item__icon[data-v-affb34b3] {
  font-size: var(--icon-toolbar);
  color: var(--ink-secondary);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.wizard-worktype-item--selected .wizard-worktype-item__icon[data-v-affb34b3] {
  color: var(--ink-brand);
}
.wizard-worktype-item__text[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.wizard-worktype-item__name[data-v-affb34b3] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
}
.wizard-worktype-item__desc[data-v-affb34b3] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* Step 2: Selector */
.wizard-selector__search[data-v-affb34b3] {
  margin-bottom: var(--gap-inline);
}
.wizard-assign-mode[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}
.wizard-assign-mode__hint[data-v-affb34b3] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  min-width: 0;
}
.wizard-selector[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.wizard-selector__list[data-v-affb34b3] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
}
.wizard-selector__item[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  cursor: pointer;
  border-bottom: var(--line-strong);
  transition: all var(--motion-fast) ease;
}
.wizard-selector__item--row[data-v-affb34b3] {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-inline);
}
.wizard-selector__item[data-v-affb34b3]:last-child {
  border-bottom: none;
}
.wizard-selector__item[data-v-affb34b3]:hover {
  background: var(--bg-brand-soft);
}
.wizard-selector__item--selected[data-v-affb34b3] {
  background: var(--bg-brand-soft);
}
.wizard-selector__item-main[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.wizard-selector__item-name[data-v-affb34b3] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-selector__item-code[data-v-affb34b3] {
  flex-shrink: 0;
}
.wizard-selector__item-date[data-v-affb34b3] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.wizard-selector__item-row2[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.wizard-selector__item-size[data-v-affb34b3] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.wizard-selector__item-sub[data-v-affb34b3] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.wizard-selector__item--row .wizard-selector__item-sub[data-v-affb34b3] {
  margin-left: auto;
}
.wizard-selector__loading[data-v-affb34b3],
.wizard-selector__empty[data-v-affb34b3] {
  padding: var(--space-band);
  text-align: center;
  font-size: var(--size-label);
  color: var(--ink-muted);
}

/* 2단계 하단 안내 — 권한 정책 등 선택에 앞서 알아야 할 한 줄(#1235 문서작성) */
.wizard-selector__hint[data-v-affb34b3] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}

/* 새 문서(위치만 잡기) 폼 — 파일명 + 형식 한 줄, 아래 폴더 트리(#1235) */
.wizard-newdoc[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  /* 남은 높이를 채우고 넘치는 몫은 폴더 트리 안에서만 스크롤한다 —
     자리를 안 잡아 주면 고정 높이 트리가 본문을 밀어내 모달 본문에도 스크롤이 하나 더 생긴다.
     (기존 문서 탭의 목록이 쓰는 것과 같은 방식) */
  flex: 1 1 0;
  min-height: 0;
}
/* 트리를 뺀 나머지(이름 줄·안내문)는 줄어들지 않는다 — 줄어들 몫은 트리가 받는다. */
.wizard-newdoc > .wizard-form-group[data-v-affb34b3]:not(.wizard-form-group--grow),
.wizard-newdoc > .wizard-selector__hint[data-v-affb34b3] {
  flex-shrink: 0;
}
.wizard-newdoc__name-row[data-v-affb34b3] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
}
.wizard-newdoc__name[data-v-affb34b3] {
  flex: 1;
  min-width: 0;
}
.wizard-selector__load-more[data-v-affb34b3] {
  display: block;
  width: 100%;
  padding: var(--space-snug);
  background: transparent;
  border: none;
  border-top: var(--line-strong);
  color: var(--ink-brand);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.wizard-selector__load-more[data-v-affb34b3]:hover {
  background: var(--bg-brand-soft);
}
.wizard-selector__load-more[data-v-affb34b3]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Step 4: Assignee */
.wizard-assignee-list[data-v-affb34b3] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-top: var(--gap-stack);
}
.wizard-assignee-item[data-v-affb34b3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  border-radius: var(--radius-float);
  background: var(--bg-brand-soft);
  border: var(--line-w) solid var(--ink-brand);
  color: var(--ink-primary);
  font-size: var(--size-meta);
}
.wizard-assignee-item--reviewer[data-v-affb34b3] {
  background: var(--bg-info-soft);
  border-color: var(--ink-info);
}
.wizard-assignee-item__remove[data-v-affb34b3] {
  cursor: pointer;
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.wizard-assignee-item__remove[data-v-affb34b3]:hover {
  color: var(--ink-danger);
}
.wizard-assignee-check[data-v-affb34b3] {
  font-size: var(--size-body);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.wizard-selector__item--selected .wizard-assignee-check[data-v-affb34b3] {
  color: var(--ink-brand);
}

/* Step 3: Form */
.wizard-form-group[data-v-affb34b3] {
  margin-bottom: var(--gap-stack);
}
.wizard-form-label[data-v-affb34b3] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.wizard-summary-box[data-v-affb34b3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.wizard-summary-box__icon[data-v-affb34b3] {
  color: var(--ink-brand);
  font-size: var(--icon-label);
}
.wizard-priority-list[data-v-affb34b3] {
  display: flex;
  gap: var(--gap-inline);
}
.wizard-priority-btn[data-v-affb34b3] {
  flex: 1;
}
.wizard-priority-btn--low.wizard-priority-btn--selected[data-v-affb34b3] {
  border-color: var(--ink-info) !important;
  background: var(--bg-info-soft) !important;
  color: var(--ink-info) !important;
}
.wizard-priority-btn--normal.wizard-priority-btn--selected[data-v-affb34b3] {
  border-color: var(--ink-brand) !important;
  background: var(--bg-brand-soft) !important;
  color: var(--ink-brand) !important;
}
.wizard-priority-btn--high.wizard-priority-btn--selected[data-v-affb34b3] {
  border-color: var(--ink-warning) !important;
  background: var(--bg-warning-soft) !important;
  color: var(--ink-warning) !important;
}
.wizard-priority-btn--urgent.wizard-priority-btn--selected[data-v-affb34b3] {
  border-color: var(--ink-danger) !important;
  background: var(--bg-danger-soft) !important;
  color: var(--ink-danger) !important;
}
.wizard-form-row[data-v-affb34b3] {
  display: flex;
  gap: var(--gap-inline);
}
.wizard-form-input[data-v-affb34b3] {
  flex: 1;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  transition: all var(--motion-base) ease;
}
.wizard-form-input[data-v-affb34b3]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.wizard-form-textarea[data-v-affb34b3] {
  width: 100%;
  box-sizing: border-box;
}
.wizard-form-group--grow[data-v-affb34b3] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.wizard-form-group--grow .wizard-form-textarea[data-v-affb34b3] {
  flex: 1 1 0;
  min-height: 0;
  resize: none;
}
.wizard-warning[data-v-affb34b3] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-warning-soft);
  border: var(--line-w) solid var(--ink-warning);
  color: var(--ink-warning);
  font-size: var(--size-meta);
  margin-top: var(--gap-inline);
}
.wizard-error[data-v-affb34b3] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-danger-soft);
  border: var(--line-w) solid var(--ink-danger);
  color: var(--ink-danger);
  font-size: var(--size-meta);
  margin-top: var(--gap-inline);
}
.wizard-popup__footer-spacer[data-v-affb34b3] {
  flex: 1;
}


/* Responsive */
@media (max-width: 480px) {
.wizard-priority-list[data-v-affb34b3] {
    flex-wrap: wrap;
}
.wizard-priority-btn[data-v-affb34b3] {
    flex: 0 0 calc(50% - 0.2rem);
}
}

/* component-ignore-start: 태그 묶음 레이아웃 컨테이너 — 뱃지 재정의가 아니라 AppBadge/TodoTagBadge 를 배치하는 flex 래퍼 */
.todo-tag-badges[data-v-9d79ecaf] {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  min-width: 0;
}
.todo-tag-badges__overflow[data-v-9d79ecaf] {
  flex-shrink: 0;
}
/* component-ignore-end */

.todo-card[data-v-186c9ec5] {
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  background: var(--bg-card);
  transition: all var(--motion-base);
  min-width: 0;
  width: 100%;
  position: relative;
  line-height: var(--line-comfortable);
}

/* 대기/진행 탭일 때 padding 제거 */
.todo-card[data-v-186c9ec5]:has(.todo-list-item) {
  padding: 0;
}
.todo-card[data-v-186c9ec5]:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--ink-brand);
}
html[data-theme='light'] .todo-card[data-v-186c9ec5]:hover,
body[data-theme='light'] .todo-card[data-v-186c9ec5]:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--ink-brand);
}
html[data-theme='dark'] .todo-card[data-v-186c9ec5]:hover,
body[data-theme='dark'] .todo-card[data-v-186c9ec5]:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--ink-brand);
}

/* 전체 탭에서 상태별 카드 스타일 (일반 레이아웃용) - GitLab 스타일 레이아웃이 아닐 때만 적용 */
.todo-card--status-pending[data-v-186c9ec5]:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) {
  background: var(--bg-page);
  border-color: var(--line-color);
}
.todo-card--status-in-progress[data-v-186c9ec5]:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) {
  background: var(--bg-brand-soft);
  border-color: var(--ink-brand);
}
.todo-card--status-review[data-v-186c9ec5]:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) {
  background: var(--bg-warning-soft);
  border-color: var(--ink-warning);
}
.todo-card--status-completed[data-v-186c9ec5]:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) {
  background: var(--bg-success-soft);
  border-color: var(--ink-success);
}
.todo-card--status-cancelled[data-v-186c9ec5] {
  background: var(--bg-page);
  border-color: var(--line-color);
}
.todo-header[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-inline);
}
.todo-header-left[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  min-width: 0;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-header-left strong[data-v-186c9ec5] {
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-header-right[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.tag[data-v-186c9ec5] {
  display: inline-block;
  padding: var(--pad-badge);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  background: var(--bg-field);
  color: var(--ink-secondary);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tag-pending[data-v-186c9ec5] {
  background: var(--bg-field);
  color: var(--ink-muted);
}
.tag-in_progress[data-v-186c9ec5] {
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
}
.tag-review[data-v-186c9ec5] {
  background: var(--bg-warning-soft);
  color: var(--ink-warning);
}
.tag-completed[data-v-186c9ec5] {
  background: var(--bg-success-soft);
  color: var(--ink-success-hover);
}
.tag-cancelled[data-v-186c9ec5] {
  background: var(--bg-field);
  color: var(--ink-secondary);
}
.tag-priority-low[data-v-186c9ec5] {
  border-left: var(--line-w-thick) solid var(--ink-secondary);
}
.tag-priority-normal[data-v-186c9ec5] {
  border-left: var(--line-w-thick) solid var(--ink-brand);
}
.tag-priority-high[data-v-186c9ec5] {
  border-left: var(--line-w-thick) solid var(--ink-warning);
}
.tag-priority-urgent[data-v-186c9ec5] {
  border-left: var(--line-w-thick) solid var(--ink-danger-hover);
}
.todo-row[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
  line-height: var(--line-comfortable);
}
.todo-row[data-v-186c9ec5]:last-child {
  margin-bottom: 0;
}
.todo-row .left[data-v-186c9ec5] {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-row .right[data-v-186c9ec5] {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.muted[data-v-186c9ec5] {
  color: var(--ink-secondary);
}
.todo-description-text[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-comfortable);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-meta[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-comfortable);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-meta-separator[data-v-186c9ec5] {
  color: var(--ink-muted);
}
.todo-category[data-v-186c9ec5] {
  font-weight: var(--weight-label);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-priority[data-v-186c9ec5] {
  font-weight: var(--weight-label);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-priority--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity var(--motion-base) ease;
}
.todo-priority--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
}
.todo-due-date[data-v-186c9ec5] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  line-height: var(--line-comfortable);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-date-info[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-comfortable);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-date-separator[data-v-186c9ec5] {
  color: var(--ink-muted);
}
.todo-completed-date[data-v-186c9ec5] {
  font-size: var(--size-label);
  line-height: var(--line-comfortable);
  color: var(--ink-success);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-tools-row[data-v-186c9ec5] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
  width: 100%;
}
html[data-theme='dark'] .todo-tools-row[data-v-186c9ec5] {
  border-top-color: var(--line-color);
}
.todo-tools-row--in-list[data-v-186c9ec5] {
  padding-left: var(--space-cozy);
  padding-right: var(--space-cozy);
  padding-bottom: var(--space-snug);
}
.todo-tools[data-v-186c9ec5] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

/* .todo-tool-btn → AppButton variant="secondary" size="sm" */

/* 대기 탭 전용 스타일 (GitLab 스타일) */
.todo-list-item[data-v-186c9ec5] {
  /* ⛔ 아래 실선을 두지 않는다 — 행의 경계는 카드 자신의 테두리(.todo-card)와 카드 사이 틈(.todo-grid gap)이 이미 긋는다.
     안쪽에 border-bottom 을 두면 둥근 카드 테두리 바로 안에 각진 줄이 한 겹 더 그어져
     모서리 곡선 밖으로 직각 끝이 튀어나왔다(사용자 지적 2026-09-12). */
  display: flex;
  align-items: flex-start;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-cozy);
  min-height: 60px;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  flex-wrap: wrap; /* 필요 시 오른쪽 영역이 아래 줄로 내려갈 수 있도록 허용 */
}


/* 마감일이 지난 카드 배경 - todo-card에 적용 */
.todo-card--overdue[data-v-186c9ec5] {
  background: var(--bg-danger-soft) !important;
}
html[data-theme='light'] .todo-card--overdue[data-v-186c9ec5],
body[data-theme='light'] .todo-card--overdue[data-v-186c9ec5] {
  background: var(--bg-danger-soft) !important;
}

/* 마감일이 미지정된 카드 배경 - todo-card에 적용 */
.todo-card--no-due-date[data-v-186c9ec5] {
  background: var(--bg-field) !important;
}
html[data-theme='light'] .todo-card--no-due-date[data-v-186c9ec5],
body[data-theme='light'] .todo-card--no-due-date[data-v-186c9ec5] {
  background: var(--bg-field) !important;
}

/* 진척이 소진율보다 작은 카드 배경 - 연한 노랑 */
.todo-card--progress-behind[data-v-186c9ec5] {
  background: var(--bg-warning-soft) !important;
}
html[data-theme='light'] .todo-card--progress-behind[data-v-186c9ec5],
body[data-theme='light'] .todo-card--progress-behind[data-v-186c9ec5] {
  background: var(--bg-warning-soft) !important;
}

/* 대기 탭 카드 - 좌측 연두색 강조 + 얇은 연두색 테두리 */
.todo-card--waiting-tab[data-v-186c9ec5] {
  border: var(--line-w) solid var(--ink-accent-lime); /* 얇은 연두색 테두리 */
}
.todo-card--waiting-tab[data-v-186c9ec5]:hover {
  box-shadow: -var(--line-w) 0 0 0 var(--ink-brand);
  border-color: var(--ink-brand);
}

/* 진행 탭 카드 - 좌측 파란색 강조 + 얇은 파란색 테두리 */
.todo-card--progress-tab[data-v-186c9ec5] {
  border: var(--line-w) solid var(--ink-info); /* 얇은 파란색 테두리 */
}
.todo-card--progress-tab[data-v-186c9ec5]:hover {
  box-shadow: -var(--line-w) 0 0 0 var(--ink-brand);
  border-color: var(--ink-brand);
}

/* 검토 탭 카드 - 좌측 주황색 강조 + 얇은 주황색 테두리 */
.todo-card--review-tab[data-v-186c9ec5] {
  border: var(--line-w) solid var(--ink-accent-orange); /* 얇은 주황색 테두리 */
}
.todo-card--review-tab[data-v-186c9ec5]:hover {
  box-shadow: -var(--line-w) 0 0 0 var(--ink-brand);
  border-color: var(--ink-brand);
}

/* 완료 탭 카드 - 좌측 테마 반대색 강조 + 얇은 테마 반대색 테두리 */
.todo-card--completed-tab[data-v-186c9ec5] {
  border: var(--line-w) solid var(--ink-primary); /* 얇은 테마 반대색 테두리 */
}
.todo-card--completed-tab[data-v-186c9ec5]:hover {
  box-shadow: -var(--line-w) 0 0 0 var(--ink-brand);
  border-color: var(--ink-brand);
}
.todo-card--completion-early[data-v-186c9ec5] {
  background: var(--bg-success-soft) !important; /* 연한 초록색 - 선행 */
}
html[data-theme='light'] .todo-card--completion-early[data-v-186c9ec5],
body[data-theme='light'] .todo-card--completion-early[data-v-186c9ec5] {
  background: var(--bg-success-soft) !important;
}
.todo-card--completion-delayed[data-v-186c9ec5] {
  background: var(--bg-danger-soft) !important; /* 연한 붉은색 - 지연 */
}
html[data-theme='light'] .todo-card--completion-delayed[data-v-186c9ec5],
body[data-theme='light'] .todo-card--completion-delayed[data-v-186c9ec5] {
  background: var(--bg-danger-soft) !important;
}
.todo-list-item__icon[data-v-186c9ec5] {
  flex-shrink: 0;
  width: 20px;
  padding-top: var(--space-tight);
  color: var(--ink-muted);
  font-size: var(--icon-label);
}
.todo-list-item__content[data-v-186c9ec5] {
  /* 기본은 가변 폭이지만, 너무 일찍 줄바꿈되지 않도록 적당한 기준 폭만 설정 */
  flex: 1 1 400px;
  min-width: 0;
}
.todo-list-item__header[data-v-186c9ec5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  align-items: flex-start;
}
.todo-list-item__title-row[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap; /* 좁은 폭에서 뱃지가 다음 줄로 떨어지도록 허용 (제목과 겹침 방지) */
}
.todo-list-item__title-prefix[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  order: 1;
  flex-wrap: nowrap;
}
.todo-list-item__tag-row[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: nowrap;
  order: 2;
  flex-shrink: 0; /* 좁아져도 자기 컨텐츠 폭 유지 — 묶음이 통째로 다음 줄로 떨어진다 */
}
.todo-checkbox[data-v-186c9ec5] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--ink-brand);
}
.todo-list-item__title[data-v-186c9ec5] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  line-height: var(--line-comfortable);
  flex: 1 1 auto;
  min-width: 0;
  /* inline flow 로 두어 아이콘과 텍스트가 같은 줄에서 시작하고 텍스트만 자연 줄바꿈 */
  display: block;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.todo-list-item__category-icon[data-v-186c9ec5] {
  display: inline-block;
  margin-right: var(--gap-glyph);
  flex-shrink: 0;
}
.todo-list-item__title--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color var(--motion-base) ease;
}
.todo-list-item__title--clickable[data-v-186c9ec5]:hover {
  color: var(--ink-brand);
}
.todo-list-item__title > span[data-v-186c9ec5] {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.todo-list-item__tags[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.todo-list-item__priority-tag[data-v-186c9ec5] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  line-height: var(--line-comfortable);
  background: var(--bg-field);
  color: var(--ink-primary);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  border: var(--line-soft);
  transition: background var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 0;
}
.todo-list-item__priority-tag--low[data-v-186c9ec5] {
  background: var(--bg-field);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
.todo-list-item__priority-tag--normal[data-v-186c9ec5] {
  background: var(--bg-brand-soft);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
.todo-list-item__priority-tag--high[data-v-186c9ec5] {
  background: var(--bg-warning-soft);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
.todo-list-item__priority-tag--urgent[data-v-186c9ec5] {
  background: var(--bg-danger-soft);
  border-color: var(--line-color-subtle);
  color: var(--ink-primary);
}
.todo-list-item__priority-tag--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity var(--motion-base) ease, transform var(--motion-base) ease;
}
.todo-list-item__priority-tag--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.todo-tag-shrink[data-v-186c9ec5] {
  flex-shrink: 0;
}
.todo-list-item__description[data-v-186c9ec5] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  line-height: var(--line-tight);
  word-wrap: break-word;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-list-item__description[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__description[data-v-186c9ec5] {
  color: var(--ink-secondary);
  opacity: 0.85;
}
.todo-list-item__meta[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-tight);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  margin-top: var(--gap-glyph);
  min-height: calc(12px * 1.3);
}
html[data-theme='light'] .todo-list-item__meta[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__meta[data-v-186c9ec5] {
  color: var(--ink-secondary);
}
.todo-list-item__id[data-v-186c9ec5] {
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}

/* 대화형 상태 토글 — 클릭 시 상태 변경, 탭 컨텍스트별 테마. AppBadge(비대화형)가 아니라 토글이므로 toggle 로 명명. */
.todo-list-item__status-toggle[data-v-186c9ec5] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  line-height: var(--line-comfortable);
  transition: background var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-list-item__status-toggle--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-list-item__status-toggle--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.todo-list-item__status-toggle--pending[data-v-186c9ec5] {
  background: var(--bg-accent-lime-soft); /* 대기 탭 연두색 */
  color: var(--ink-primary);
  border: var(--line-soft);
}
.todo-card--status-pending:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) .todo-list-item__status-toggle--pending[data-v-186c9ec5] {
  background: var(--bg-field); /* 전체 탭 회색 */
  border: var(--line-soft);
}
.todo-list-item__status-toggle--in_progress[data-v-186c9ec5] {
  background: var(--bg-info-soft); /* 진행 탭 파란색 */
  color: var(--ink-primary);
  border: var(--line-soft);
}
.todo-card--status-in-progress:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) .todo-list-item__status-toggle--in_progress[data-v-186c9ec5] {
  background: var(--bg-brand-soft); /* 전체 탭 초록색 */
  border: var(--line-soft);
}
.todo-list-item__status-toggle--review[data-v-186c9ec5] {
  background: var(--bg-accent-orange-soft); /* 검토 탭 주황색 */
  color: var(--ink-primary);
  border: var(--line-soft);
}
.todo-card--status-review:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) .todo-list-item__status-toggle--review[data-v-186c9ec5] {
  background: var(--bg-warning-soft); /* 전체 탭 노란색 */
  border: var(--line-soft);
}
.todo-list-item__status-toggle--completed[data-v-186c9ec5] {
  background: color-mix(in srgb, var(--ink-primary) 12%, transparent); /* 완료 탭 - 테마 반대색 */
  color: var(--ink-primary);
  border: var(--line-w) solid color-mix(in srgb, var(--ink-primary) 24%, transparent);
}
.todo-card--status-completed:not(.todo-card--waiting-tab):not(.todo-card--progress-tab):not(.todo-card--review-tab):not(.todo-card--completed-tab) .todo-list-item__status-toggle--completed[data-v-186c9ec5] {
  background: var(--bg-brand-soft); /* 전체 탭 초록색 */
  border: var(--line-soft);
}
.todo-list-item__status-toggle--cancelled[data-v-186c9ec5] {
  background: var(--bg-field); /* 회색 */
  color: var(--ink-primary);
  border: var(--line-soft);
}
.todo-list-item__separator[data-v-186c9ec5] {
  color: var(--ink-muted);
}
.todo-list-item__created[data-v-186c9ec5] {
  color: var(--ink-muted);
}
.todo-list-item__meta-text[data-v-186c9ec5] {
  font-size: var(--size-label);
  line-height: var(--line-tight);
  color: var(--ink-muted);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-list-item__meta-text[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__meta-text[data-v-186c9ec5] {
  color: var(--ink-secondary);
}
.todo-list-item__right[data-v-186c9ec5] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-glyph);
  text-align: right;
  min-width: 120px;
  max-width: 100%;
  overflow: hidden;
  justify-content: flex-start;
  margin-left: auto; /* 오른쪽 영역이 아래로 내려갔을 때 오른쪽 정렬 유지 */
}
.todo-list-item__updated[data-v-186c9ec5] {
  font-size: var(--size-label);
  line-height: var(--line-tight);
  color: var(--ink-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-height: calc(0.9375rem * 1.4);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-list-item__updated[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__updated[data-v-186c9ec5] {
  color: var(--ink-secondary);
}
.todo-list-item__updated i[data-v-186c9ec5] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  opacity: 0.7;
  margin: 0 var(--gap-glyph);
}
.todo-list-item__updated i.fa-caret-right[data-v-186c9ec5] {
  margin: 0 var(--gap-glyph);
}
.todo-list-item__due-date[data-v-186c9ec5] {
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  line-height: var(--line-tight);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-list-item__due-date[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__due-date[data-v-186c9ec5] {
  color: var(--ink-secondary);
}
.todo-list-item__due-date--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-list-item__due-date i[data-v-186c9ec5] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  opacity: 0.7;
  flex-shrink: 0;
}
.todo-due-date-unspecified[data-v-186c9ec5] {
  font-weight: normal;
}
.todo-divider[data-v-186c9ec5] {
  font-weight: normal;
}
.todo-due-date-info[data-v-186c9ec5] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-left: var(--gap-glyph);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-due-date-info i.fa-caret-right[data-v-186c9ec5] {
  margin: 0 var(--gap-glyph);
}

/* 남은 시간 텍스트 스타일 */
.todo-remaining-time[data-v-186c9ec5] {
  position: relative;
  display: inline-block;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  z-index: 0;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-remaining-time[data-v-186c9ec5]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-badge);
  z-index: -1;
  transition: background-color var(--motion-base) ease;
}
.todo-remaining-time[data-v-186c9ec5]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: var(--progress, 0%);
  border-radius: 0 0 var(--radius-badge) var(--radius-badge);
  transition: width var(--motion-base) ease, background-color var(--motion-base) ease;
  z-index: 1;
}
.todo-remaining-time.todo-progress-low[data-v-186c9ec5]::before {
  background-color: var(--bg-success-soft);
}
.todo-remaining-time.todo-progress-low[data-v-186c9ec5]::after {
  background-color: var(--ink-success);
}
.todo-remaining-time.todo-progress-medium[data-v-186c9ec5]::before {
  background-color: var(--bg-warning-soft);
}
.todo-remaining-time.todo-progress-medium[data-v-186c9ec5]::after {
  background-color: var(--ink-warning);
}
.todo-remaining-time.todo-progress-high[data-v-186c9ec5]::before {
  background-color: var(--bg-accent-orange-soft);
}
.todo-remaining-time.todo-progress-high[data-v-186c9ec5]::after {
  background-color: var(--ink-accent-orange);
}

/* 진척율 색상 클래스 */
.todo-progress-bold[data-v-186c9ec5] {
  font-weight: bold;
}
.todo-progress-gap-medium[data-v-186c9ec5] {
  font-weight: bold;
  color: var(--ink-accent-orange);
}
.todo-progress-gap-high[data-v-186c9ec5] {
  font-weight: bold;
  color: var(--ink-danger); /* 붉은색 */
}
.todo-progress-gap-good[data-v-186c9ec5] {
  font-weight: bold;
  color: var(--ink-success); /* 녹색 */
}
.todo-list-item__assignee[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-tight);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  min-height: calc(12px * 1.3);
}

/* 타임라인 — 원본: AppSlider 트랙(--space-tight 굵기·pill 모서리·남은 쪽 면)과 손잡이
   (--line-w-thick 테두리 + --bg-float 면), 점 크기는 AdminAppearanceConfig 의 견본(--icon-marker).
   다른 점: 점은 표식일 뿐 끌리지 않고, 트랙은 소진(옅은 면)과 진척(채운 면) 두 겹이다. */
.todo-progress-comparison-bar[data-v-186c9ec5] {
  /* 선 위에 서는 활동 아이콘의 지름 — 트랙과 점은 이 띠의 가운데에 선다 */
  --timeline-mark: calc(var(--space-roomy) + var(--space-tight));
  /* 띠 아래에 비워 두는 진척 % 한 줄. ⛔ % 가 있을 때만 비우지 않는다 —
     진척이 0↔N 으로 바뀔 때마다 카드 높이가 덜컹인다. */
  --timeline-foot: calc(var(--size-meta) + var(--gap-glyph));
  width: 100%;
  margin-top: var(--gap-inline);
  padding-top: var(--gap-inline);
  border-top: var(--line-soft);
  flex-shrink: 0;
}
.todo-progress-comparison-bar__rail[data-v-186c9ec5] {
  position: relative;
  /* 양 끝 점이 반쯤 밖으로 나가지 않게 점 반지름만큼 들인다 */
  margin-inline: calc(var(--icon-marker) / 2);
  /* 위 라벨 줄 + 점이 서는 띠 + 아래 진척 % 줄 */
  height: calc(var(--size-meta) + var(--gap-glyph) + var(--timeline-mark) + var(--timeline-foot));
  font-size: var(--size-meta);
}

/* 진척 % — 채움이 끝나는 자리 **아래**. 색은 진척 단(낮음·보통·높음)을 따른다. */
.todo-progress-comparison-bar__progress-label[data-v-186c9ec5] {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  pointer-events: none;
}
.todo-progress-comparison-bar__progress-label.todo-progress-low[data-v-186c9ec5] { color: var(--ink-success);
}
.todo-progress-comparison-bar__progress-label.todo-progress-medium[data-v-186c9ec5] { color: var(--ink-warning);
}
.todo-progress-comparison-bar__progress-label.todo-progress-high[data-v-186c9ec5] { color: var(--ink-accent-orange);
}

/* 지나온 자리 — 생성(레일 왼쪽 끝)부터 「현재」 선까지. 모든 것의 **뒤**에 깔린다(z 없음 = 0). */
.todo-progress-comparison-bar__elapsed[data-v-186c9ec5] {
  position: absolute;
  left: 0;
  /* 발치(진척 % 줄) 위에 선다 — 점·활동과 **같은 바닥·같은 높이**.
     ⛔ 한 단(--gap-glyph) 더 높게 잡았더니 띠보다 위로 들린 것처럼 보였다(사용자 지적 2026-09-12). */
  bottom: var(--timeline-foot);
  height: var(--timeline-mark);
  border-radius: var(--radius-badge);
  /* ⛔ 중립 베일(--bg-hover)로도 해 봤는데 라이트에서 **거의 안 보였다**(2026-09-12 실측).
     「현재」 선과 같은 계열의 옅은 면이라야 면의 끝과 선이 한 뜻으로 읽힌다. */
  background: var(--bg-brand-soft);
  pointer-events: none;
}
.todo-progress-comparison-bar__track[data-v-186c9ec5] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((var(--timeline-mark) - var(--space-tight)) / 2 + var(--timeline-foot));
  height: var(--space-tight);
  border-radius: var(--radius-pill);
  background: var(--line-color);
  overflow: hidden;
}
.todo-progress-comparison-bar__background[data-v-186c9ec5],
.todo-progress-comparison-bar__foreground[data-v-186c9ec5] {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  transition: left var(--motion-base) ease, width var(--motion-base) ease;
}

/* 소진(시작 → 지금) — 옅은 면. 진척이 그만큼 따라왔으면 채운 면에 덮인다 */
.todo-progress-comparison-bar__background[data-v-186c9ec5] {
  background: var(--bg-brand-soft);
}
.todo-progress-comparison-bar__background--overdue[data-v-186c9ec5] {
  background: var(--bg-danger-soft);
}

/* 진척(시작 → 마감 사이의 N%) — 채운 면 */
.todo-progress-comparison-bar__foreground.todo-progress-low[data-v-186c9ec5] {
  background: var(--bg-success);
}
.todo-progress-comparison-bar__foreground.todo-progress-medium[data-v-186c9ec5] {
  background: var(--bg-warning);
}
.todo-progress-comparison-bar__foreground.todo-progress-high[data-v-186c9ec5] {
  background: var(--bg-orange);
}

/* 마커 — 폭 0 의 기준점. 라벨과 점이 같은 색(currentColor)을 쓴다 */
.todo-progress-comparison-bar__marker[data-v-186c9ec5] {
  position: absolute;
  top: 0;
  bottom: var(--timeline-foot);
  width: 0;
  z-index: 1;
  color: var(--ink-muted);
}
.todo-progress-comparison-bar__marker-label[data-v-186c9ec5] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  font-weight: var(--weight-label);
  line-height: var(--line-none);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 양 끝 라벨은 점의 바깥 가장자리에 맞춰 안쪽으로 편다 */
.todo-progress-comparison-bar__marker--left .todo-progress-comparison-bar__marker-label[data-v-186c9ec5] {
  left: calc(var(--icon-marker) / -2);
  transform: none;
}
.todo-progress-comparison-bar__marker--right .todo-progress-comparison-bar__marker-label[data-v-186c9ec5] {
  left: auto;
  right: calc(var(--icon-marker) / -2);
  transform: none;
}
.todo-progress-comparison-bar__marker-dot[data-v-186c9ec5] {
  position: absolute;
  bottom: calc((var(--timeline-mark) - var(--icon-marker)) / 2);
  left: 0;
  box-sizing: border-box;
  width: var(--icon-marker);
  height: var(--icon-marker);
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-w-thick) solid currentColor;
  transform: translateX(-50%);
  transition: transform var(--motion-base) ease;
}
.todo-progress-comparison-bar__marker:hover .todo-progress-comparison-bar__marker-dot[data-v-186c9ec5] {
  transform: translateX(-50%) scale(1.25);
}
.todo-progress-comparison-bar__marker--started[data-v-186c9ec5] { color: var(--ink-info);
}
.todo-progress-comparison-bar__marker--completed[data-v-186c9ec5] { color: var(--ink-success);
}
.todo-progress-comparison-bar__marker--reviewed[data-v-186c9ec5] { color: var(--ink-accent-orange);
}
.todo-progress-comparison-bar__marker--due[data-v-186c9ec5] { color: var(--ink-danger);
}

/* 지금 — 점이 아니라 **세로 선**이다.
   ⛔ 「현재」는 일어난 일이 아니라 **지금 어디인가**를 가리키는 자리다. 다른 표식(생성·시작·
      완료·검토·마감)처럼 점으로 그렸더니, 방금 한 일이 있을 때 활동 아이콘(20px 흰 원 + 글리프)과
      **같은 자리**에 서서 「원 안에 원」이 되었다 — 안쪽 원이 가운데서 어긋나 보이고(두 시각이
      조금 다르니 당연하다) 활동 글리프는 통째로 가려졌다. 마우스를 올리면 1.25배로 커져 완전히
      덮이는 바람에 「올리면 원, 떼면 네모」로 보였다(2026-09-12 사용자 지적, 두 차례).
      선으로 그으면 겹칠 자리가 없다 — 활동 아이콘은 원 그대로 남고 선이 그 위를 지난다. */
.todo-progress-comparison-bar__marker--current[data-v-186c9ec5] {
  z-index: 3;
  color: var(--ink-brand);
}

/* ⛔ 「현재」는 제 표식을 그리지 않는다 — **지나온 면의 오른쪽 끝이 곧 현재**이고 그 위에 라벨이 선다
   (사용자 확정 2026-09-12). 점도 선도 두지 않는다: 무엇을 두든 방금 한 일의 활동 아이콘과 같은
   자리에 서서 겹친다. 면의 가장자리는 겹칠 몸이 없다. */
.todo-progress-comparison-bar__marker--current .todo-progress-comparison-bar__marker-dot[data-v-186c9ec5] {
  display: none;
}

/* 활동 — 선 위에 선다. 원본: 활동 탭의 레일 아이콘(TodoSystemNote .todo-system-note__rail-icon —
   --bg-float 원 + --line-strong 테두리 + --ink-secondary·--icon-marker 글리프).
   다른 점: 세로가 아니라 가로 레일이고, 겹치면 나중 것이 위로 쌓인다(차례는 스크립트의 z, 올리면 맨 위).
   층 차례: 점(1) < 활동(2) < 지금(3). 층 밖으로는 눌리지 않게 해 가려지지 않은 점의 툴팁은 그대로 뜬다. */
.todo-progress-comparison-bar__activity[data-v-186c9ec5] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--timeline-foot);
  z-index: 2;
  pointer-events: none;
}
.todo-progress-comparison-bar__activity-mark[data-v-186c9ec5] {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: var(--timeline-mark);
  height: var(--timeline-mark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-strong);
  color: var(--ink-secondary);
  font-size: var(--icon-marker);
  transform: translateX(-50%);
  transition: transform var(--motion-base) ease;
  pointer-events: auto;
}
.todo-progress-comparison-bar__activity-mark[data-v-186c9ec5]:hover {
  transform: translateX(-50%) scale(1.15);
}
html[data-theme='light'] .todo-list-item__assignee[data-v-186c9ec5],
body[data-theme='light'] .todo-list-item__assignee[data-v-186c9ec5] {
  color: var(--ink-primary);
  opacity: 0.9;
}
.todo-assignee-line[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-assignee-line--clickable[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-section[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.todo-assignee-separator[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  color: var(--ink-muted);
  margin: 0 var(--gap-glyph);
}
.todo-assignee-separator i[data-v-186c9ec5] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
  opacity: 0.7;
}
.todo-assignee-stack[data-v-186c9ec5] {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* 뒤 요소가 자연히 위에 그려지지만, 차례를 뒤집어 앞사람이 위에 오게 zIndex 를 준다 */
.todo-assignee-stack__item[data-v-186c9ec5] {
  position: relative;
  cursor: pointer;
}
.todo-assignee-line--clickable .todo-assignee-label-text[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-line--clickable .todo-assignee-name[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-line--clickable .todo-assignee-assign-text[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-line--clickable .todo-assignee-label[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-line--clickable .todo-assignee-separator[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-line--clickable .todo-assignee-separator i[data-v-186c9ec5] {
  cursor: pointer;
}
.todo-assignee-label-text[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-tight);
  color: var(--ink-secondary);
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-assignee-label-text[data-v-186c9ec5],
body[data-theme='light'] .todo-assignee-label-text[data-v-186c9ec5] {
  color: var(--ink-primary);
  opacity: 0.85;
}
.todo-assignee-label-text--current-user[data-v-186c9ec5] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.todo-assignee-item[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.todo-assignee-name[data-v-186c9ec5] {
  font-size: var(--size-meta);
  line-height: var(--line-tight);
  color: var(--ink-primary);
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-assignee-name[data-v-186c9ec5],
body[data-theme='light'] .todo-assignee-name[data-v-186c9ec5] {
  color: var(--ink-primary);
  opacity: 0.85;
}
.todo-assignee-name--current-user[data-v-186c9ec5] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.todo-assignee-assign-text[data-v-186c9ec5] {
  font-weight: normal;
  color: var(--ink-secondary);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-assignee-assign-text[data-v-186c9ec5],
body[data-theme='light'] .todo-assignee-assign-text[data-v-186c9ec5] {
  color: var(--ink-primary);
  opacity: 0.75;
}
.todo-assignee-empty[data-v-186c9ec5] {
  font-size: var(--size-label);
  line-height: var(--line-tight);
  color: var(--ink-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
html[data-theme='light'] .todo-assignee-empty[data-v-186c9ec5],
body[data-theme='light'] .todo-assignee-empty[data-v-186c9ec5] {
  color: var(--ink-muted);
}
.todo-assignee-line--clickable .todo-assignee-empty[data-v-186c9ec5] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.todo-assignee-empty i[data-v-186c9ec5] {
  font-size: var(--icon-marker);
  opacity: 0.7;
}

/* 실제 탭(전체 탭이 아닌)에서만 상태별 스타일 무시 (탭별 스타일 우선) */
/* 전체 탭에서는 상태별 스타일이 적용되어야 하므로 이 규칙은 실제 탭에서만 적용 */

/* 만료된 TODO 텍스트 스타일 */
.todo-overdue-text[data-v-186c9ec5] {
  background: transparent;
  /* ⛔ 여기에 --color-danger-hover(어두운 변종)를 쓰면 **다크에서 대비가 깎인다**
     (실측 2026-08-29: 4.22:1 — 12px/600 이라 AA 4.5 미달). 강조는 굵기로 하고 색은 의미색 본색을 쓴다. */
  color: var(--ink-danger);
  padding: 0;
  border-radius: 0;
  font-weight: var(--weight-title);
  display: inline-block;
}
.todo-completion-early[data-v-186c9ec5] {
  color: var(--ink-success); /* 초록색 - 선행 */
  font-weight: var(--weight-title);
}
.todo-completion-delayed[data-v-186c9ec5] {
  /* ⛔ --ink-danger-hover 는 **누를 때의 색**이다. 가만히 있는 글자에 쓰면 다크 바탕
     (#050505) 위에서 4.22:1 로 본문 AA(4.5)에 못 미친다(실측 2026-09-03).
     카드 위라면 4.83 로 통과라 화면마다 갈렸다 — 바탕에 바로 놓이는 자리가 있다. */
  color: var(--ink-danger); /* 붉은색 - 지연 */
  font-weight: var(--weight-title);
}
.tag-priority[data-v-186c9ec5] {
  border-left: none !important;
}

/* 오른쪽 영역이 아래로 내려갈 때 간격 조정 (863px 이하) */
@media (max-width: 768px) {
.todo-list-item[data-v-186c9ec5] {
    gap: var(--gap-inline); /* 간격을 줄여서 높이 최소화 */
    align-items: flex-start; /* 상단 정렬로 불필요한 높이 증가 방지 */
}
.todo-list-item__content[data-v-186c9ec5] {
    flex: 1 1 auto; /* flex-basis를 auto로 변경하여 불필요한 높이 증가 방지 */
    align-self: flex-start; /* 상단 정렬로 높이 최소화 */
    width: 100%; /* 전체 너비 차지 */
}
.todo-list-item__right[data-v-186c9ec5] {
    width: 100%; /* 전체 너비를 차지하여 간격 최소화 */
    margin-left: auto; /* 항상 오른쪽 정렬 유지 */
    align-self: flex-start; /* 상단 정렬로 높이 최소화 */
    align-items: flex-end; /* 오른쪽 정렬 유지 */
    text-align: right; /* 텍스트 오른쪽 정렬 유지 */
}
.todo-list-item__right .todo-list-item__updated[data-v-186c9ec5],
  .todo-list-item__right .todo-list-item__due-date[data-v-186c9ec5],
  .todo-list-item__right .todo-list-item__assignee[data-v-186c9ec5] {
    justify-content: flex-end; /* 내부 요소들도 오른쪽 정렬 */
}
}

/* 모바일(폰) 화면에서 반응형 레이아웃 조정 */
@media (max-width: 768px) {
  /* 태블릿 */
.todo-list-item__right[data-v-186c9ec5] {
    min-width: 100px;
}
.todo-list-item__updated[data-v-186c9ec5] {
    font-size: var(--size-label);
}
.todo-list-item__due-date[data-v-186c9ec5] {
    font-size: var(--size-label);
}
}
@media (max-width: 480px) {
.todo-header[data-v-186c9ec5] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-inline);
}
.todo-header-right[data-v-186c9ec5] {
    width: 100%;
    justify-content: flex-start;
    gap: var(--gap-inline);
}
.todo-row[data-v-186c9ec5] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-glyph);
}
.todo-row .left[data-v-186c9ec5],
  .todo-row .right[data-v-186c9ec5] {
    white-space: normal;
    text-align: left;
}
.todo-list-item__tag-row[data-v-186c9ec5] {
    flex-wrap: wrap;
}
.todo-list-item__icon[data-v-186c9ec5] {
    display: none;
}
.todo-list-item__title-row[data-v-186c9ec5] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-inline);
    flex-wrap: wrap;
}
.todo-list-item__title-prefix[data-v-186c9ec5] {
    flex-shrink: 0;
    flex: 1 1 100%;
    min-width: 0;
}
.todo-list-item__title[data-v-186c9ec5] {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.todo-list-item__tag-row[data-v-186c9ec5] {
    flex: 1 1 100%;
    width: 100%;
}
.todo-list-item__updated[data-v-186c9ec5] {
    font-size: var(--size-label);
    white-space: normal;
    flex-wrap: wrap;
    gap: var(--gap-glyph);
    justify-content: flex-end;
    text-align: right;
}
.todo-list-item__due-date[data-v-186c9ec5] {
    font-size: var(--size-label);
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}
.todo-due-date-info[data-v-186c9ec5] {
    white-space: normal;
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: var(--gap-glyph);
    justify-content: flex-end;
}
.todo-assignee-line[data-v-186c9ec5] {
    flex-wrap: wrap;
    gap: var(--gap-inline);
    justify-content: flex-end;
}
.todo-list-item__assignee[data-v-186c9ec5] {
    white-space: normal;
    justify-content: flex-end;
    text-align: right;
}
.todo-list-item__meta-text[data-v-186c9ec5] {
    font-size: var(--size-label);
    word-break: break-word;
}
}

/* 진척도 입력 그룹 */
.progress-input-group[data-v-186c9ec5] {
  margin-bottom: var(--gap-group);
  display: flex;
  flex-direction: column;
}
.progress-label[data-v-186c9ec5] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.progress-value-display[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
  margin-top: var(--gap-stack);
}

/* 슬라이더 모양(굵기·손잡이·색)은 AppSlider 소유 — 화면에서 다시 그리지 않는다(2026-09-03 정리).
   ⛔ 걷어낼 것은 **모양**뿐이다. 위아래 여백은 이 자리의 배치라 여기 남는다. */
.progress-slider[data-v-186c9ec5] {
  margin-top: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}

/* 외형은 AppNumberInput(size="sm")이 소유 — 여기선 폭/정렬만 */
.progress-input[data-v-186c9ec5] {
  width: 60px;
  min-width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.progress-percent[data-v-186c9ec5] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
  flex-shrink: 0;
  white-space: nowrap;
}
.todo-progress--clickable[data-v-186c9ec5] {
  cursor: pointer;
  transition: opacity var(--motion-base) ease;
}
.todo-progress--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
}
.todo-list-item__due-date--clickable[data-v-186c9ec5] {
  cursor: pointer;
  transition: opacity var(--motion-base) ease;
}
.todo-list-item__due-date--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
}

/* 우선순위/진척도 팝업 */
/* .priority-popup__btn → AppButton variant="secondary/primary" size="sm" */
.priority-popup__btn[data-v-186c9ec5] {
  min-width: 80px;
}
.progress-input-group[data-v-186c9ec5] {
  margin-bottom: var(--gap-group);
}
.progress-label[data-v-186c9ec5] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}

/* 슬라이더 모양은 AppSlider 소유 — 여백은 위 .progress-slider 규칙이 갖는다. */
.progress-value-display[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  justify-content: center;
}

/* 외형은 AppNumberInput(size="sm")이 소유 — 여기선 폭/정렬만 */
.progress-input[data-v-186c9ec5] {
  width: 60px;
  min-width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.progress-percent[data-v-186c9ec5] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
  flex-shrink: 0;
  white-space: nowrap;
}
.priority-reason-group[data-v-186c9ec5] {
  margin-top: var(--gap-group);
}
.priority-reason-label[data-v-186c9ec5] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.priority-reason-input[data-v-186c9ec5] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  font-family: inherit;
  transition: all var(--motion-base) ease;
}
.priority-reason-input[data-v-186c9ec5]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.priority-reason-input[data-v-186c9ec5]::-moz-placeholder {
  color: var(--ink-muted);
}
.priority-reason-input[data-v-186c9ec5]::placeholder {
  color: var(--ink-muted);
}

/* 담당자/검토자 지정 팝업 */
.assignee-popup-overlay[data-v-186c9ec5] {
  position: fixed;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
}
.assignee-popup[data-v-186c9ec5] {
  background: var(--bg-float);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-modal);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assignee-popup__header[data-v-186c9ec5] {
  padding: var(--pad-panel);
  border-bottom: var(--line-soft);
}
.assignee-popup__title[data-v-186c9ec5] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.assignee-popup__body[data-v-186c9ec5] {
  padding: var(--pad-card);
  overflow-y: auto;
  flex: 1;
}
.assignee-selector-container[data-v-186c9ec5] {
  display: flex;
  gap: var(--gap-stack);
  margin-bottom: var(--gap-group);
  min-height: 250px;
}
.assignee-column[data-v-186c9ec5] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  overflow: hidden;
}
.assignee-column--center[data-v-186c9ec5] {
  flex: 0 0 80px;
  border: none;
  background: transparent;
  justify-content: center;
}
.assignee-column__header[data-v-186c9ec5] {
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.assignee-column__header--reviewer[data-v-186c9ec5] {
  margin-top: var(--gap-stack);
  border-top: var(--line-strong);
}
.assignee-column__title[data-v-186c9ec5] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.assignee-column__search[data-v-186c9ec5] {
  position: relative;
  padding: var(--space-tight);
  border-bottom: none;
}
.assignee-search-input[data-v-186c9ec5] {
  width: 100%;
  padding: var(--space-snug) var(--space-wide) var(--space-snug) var(--space-wide);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  font-family: inherit;
  transition: all var(--motion-base) ease;
}
.assignee-search-input[data-v-186c9ec5]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.assignee-search-input[data-v-186c9ec5]::-moz-placeholder {
  color: var(--ink-muted);
}
.assignee-search-input[data-v-186c9ec5]::placeholder {
  color: var(--ink-muted);
}
.assignee-search-icon[data-v-186c9ec5] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: var(--icon-marker);
}
.assignee-search-icon--left[data-v-186c9ec5] {
  left: 0.5rem;
  pointer-events: none;
}
.assignee-search-icon--right[data-v-186c9ec5] {
  right: 0.5rem;
  cursor: pointer;
  transition: color var(--motion-base) ease;
}
.assignee-search-icon--right[data-v-186c9ec5]:hover {
  color: var(--ink-primary);
}
.assignee-search-clear[data-v-186c9ec5] {
  pointer-events: auto;
}
.assignee-loading[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-snug);
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.assignee-loading i[data-v-186c9ec5] {
  font-size: var(--icon-marker);
}
.assignee-column__body[data-v-186c9ec5] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-tight);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.assignee-column__body--assignees[data-v-186c9ec5] {
  flex: 1;
  min-height: 0;
}
.assignee-column__body--reviewer[data-v-186c9ec5] {
  flex: 0 0 auto;
  min-height: 2.5rem;
  overflow: hidden;
}
.assignee-column__body--reviewer .assignee-user-list[data-v-186c9ec5] {
  max-height: none;
  overflow: visible;
}
.assignee-column__body--reviewer .assignee-user-item[data-v-186c9ec5] {
  margin-bottom: 0;
}
.assignee-column__body--assignees[data-v-186c9ec5] {
  flex: 1;
  min-height: 0;
}
.assignee-no-users[data-v-186c9ec5] {
  padding: var(--space-cozy);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.assignee-user-list[data-v-186c9ec5] {
  max-height: 120px;
  overflow-y: auto;
  background: var(--bg-page);
  padding: var(--space-tight);
}
.assignee-user-item[data-v-186c9ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-snug);
  cursor: pointer;
  transition: background var(--motion-base) ease;
  margin-bottom: var(--gap-glyph);
}
.assignee-user-item[data-v-186c9ec5]:hover {
  background: var(--bg-hover);
}
.assignee-user-item--selected[data-v-186c9ec5] {
  background: var(--bg-brand-soft);
  border: var(--line-w) solid var(--ink-brand);
}
.assignee-user-item--selected[data-v-186c9ec5]:hover {
  background: var(--bg-brand-soft);
}
.assignee-actions[data-v-186c9ec5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) 0;
}
.assignee-actions-divider[data-v-186c9ec5] {
  width: 100%;
  height: 1px;
  background: var(--line-color);
  margin: var(--gap-inline) 0;
}
.assignee-action-btn[data-v-186c9ec5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-snug);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  font-size: var(--size-meta);
}
.assignee-action-btn[data-v-186c9ec5]:hover:not(:disabled) {
  background: var(--bg-brand);
  border-color: var(--ink-brand);
  color: var(--ink-on-solid);
}
.assignee-action-btn[data-v-186c9ec5]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.assignee-action-btn i[data-v-186c9ec5] {
  font-size: var(--icon-label);
}
.assignee-action-label[data-v-186c9ec5] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
}
.assignee-action-btn--clear-all[data-v-186c9ec5] {
  margin-top: 0;
  margin-bottom: 0;
}
.assignee-action-btn--clear-all[data-v-186c9ec5]:hover:not(:disabled) {
  background: var(--bg-danger);
  border-color: var(--ink-danger);
  color: var(--ink-on-solid);
}
.assignee-empty[data-v-186c9ec5] {
  padding: var(--space-snug) var(--space-cozy);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-label);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}
.assignee-user-name[data-v-186c9ec5] {
  flex: 1;
  color: var(--ink-primary);
  font-size: var(--size-meta);
}
.assignee-select[data-v-186c9ec5] {
  width: 100%;
  padding: var(--space-cozy);
  border-radius: var(--radius-card);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--motion-base) ease;
}
.assignee-select[data-v-186c9ec5]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.assignee-reason-group[data-v-186c9ec5] {
  margin-top: var(--gap-stack);
}
.assignee-reason-label[data-v-186c9ec5] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.assignee-reason-input[data-v-186c9ec5] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  font-family: inherit;
  transition: all var(--motion-base) ease;
}
.assignee-reason-input[data-v-186c9ec5]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.assignee-reason-input[data-v-186c9ec5]::-moz-placeholder {
  color: var(--ink-muted);
}
.assignee-reason-input[data-v-186c9ec5]::placeholder {
  color: var(--ink-muted);
}
.assignee-popup__footer[data-v-186c9ec5] {
  padding: var(--pad-panel);
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
  border-top: var(--line-soft);
}
.assignee-popup__btn[data-v-186c9ec5] {
  min-width: 80px;
  padding: var(--space-snug) var(--space-roomy);
  border-radius: var(--radius-control);
  border: var(--line-w) solid transparent;
  font-size: var(--size-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--motion-base) ease;
}
.assignee-popup__btn--cancel[data-v-186c9ec5] {
  background: var(--bg-float);
  color: var(--ink-secondary);
  border-color: var(--line-color);
}
.assignee-popup__btn--cancel[data-v-186c9ec5]:hover {
  background: var(--bg-float);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
.assignee-popup__btn--confirm[data-v-186c9ec5] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.assignee-popup__btn--confirm[data-v-186c9ec5]:hover {
  filter: brightness(1.05);
}
.assignee-popup__btn[data-v-186c9ec5]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.todo-assignee-line--clickable[data-v-186c9ec5] {
  cursor: pointer;
  transition: opacity var(--motion-base) ease;
}
.todo-card--completed-tab .todo-assignee-label-text[data-v-186c9ec5],
.todo-card--completed-tab .todo-assignee-name[data-v-186c9ec5],
.todo-card--completed-tab .todo-assignee-empty[data-v-186c9ec5] {
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.todo-assignee-line--clickable[data-v-186c9ec5]:hover {
  opacity: 0.8;
}
@media (max-width: 480px) {
.assignee-popup[data-v-186c9ec5] {
    margin: 0 var(--gap-stack);
}
}

/* 삭제 팝업 */

/* 삭제 버튼 → AppButton icon-only variant="ghost" size="xs" */
/* 카드 줄 끝의 ⋯ 자리 — 위험색은 메뉴 안의 삭제 항목이 갖는다(AppMenu 의 danger). */
.todo-delete-btn[data-v-186c9ec5] {
  margin-left: var(--gap-glyph);
  flex-shrink: 0;
}
@media (max-width: 480px) {
.delete-popup[data-v-186c9ec5] {
    margin: 0 var(--gap-stack);
}
}

.todo-list-view-wrapper[data-v-40e7cd4d] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: 0;
}
.todo-list-view-wrapper[data-v-40e7cd4d] .list-view {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

/* 추가 상세 필터 그룹은 공통 컴포넌트 DetailFilterField 로 이관 */
.todo-grid[data-v-40e7cd4d] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-group);
}
.todo-list-view-wrapper[data-v-40e7cd4d] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: 0;
}
.todo-list-view-content[data-v-40e7cd4d] {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  gap: var(--gap-stack);
  align-items: stretch;
}
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] {
  flex: 1 1 auto;
  min-width: 0;
}
.todo-list-view-main[data-v-40e7cd4d] {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.todo-list-view-wrapper[data-v-40e7cd4d] .list-view {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .list-view {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  height: 100%;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .list-view__toolbar {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .list-view__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] .list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] .list-view__toolbar,
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] .list-view__body {
  flex-shrink: 0;
}
.todo-list-view-wrapper--bulk-mode .todo-list-view-main[data-v-40e7cd4d] .list-view__body {
  flex: 1 1 auto;
  min-height: 0;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .list-view__pagination {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  position: relative;
  z-index: 10;
}

/* 일괄편집 패널 */
.todo-bulk-panel[data-v-40e7cd4d] {
  flex: 0 0 auto;
  /* 컨트롤이 보기 좋게 들어가는 최소/최대 너비 범위 */
  min-width: 220px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
  transition: all var(--motion-base) ease;
  color: var(--ink-primary);
  min-height: 0;
}
.todo-bulk-panel__header[data-v-40e7cd4d] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-roomy) var(--space-band) var(--space-snug);
  border-bottom: var(--line-soft);
  background: var(--bg-page);
  flex-shrink: 0;
}
.todo-bulk-panel__title[data-v-40e7cd4d] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.todo-bulk-panel__section[data-v-40e7cd4d] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.todo-bulk-panel__section[data-v-40e7cd4d] {
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) transparent;
}
.todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  display: block;
}
.todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-badge);
  -webkit-box-shadow: none;
}
.todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  -webkit-box-shadow: none;
}
.todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:active {
  background: var(--ink-secondary);
}
html[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb,
body[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:hover,
body[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-track,
body[data-theme='dark'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: none;
}
html[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb,
body[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
}
html[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:hover,
body[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scroll-thumb-hover);
}
html[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-track,
body[data-theme='light'] .todo-bulk-panel__section[data-v-40e7cd4d]::-webkit-scrollbar-track {
  background: var(--bg-card);
  -webkit-box-shadow: none;
}
.todo-bulk-panel__group[data-v-40e7cd4d] {
  margin-bottom: 0;
}
.todo-bulk-panel__group-title[data-v-40e7cd4d] {
  margin: 0 0 var(--gap-inline) 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.todo-bulk-panel__selection-controls[data-v-40e7cd4d] {
  display: flex;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}

/* .todo-bulk-panel__btn → AppButton variant="secondary" size="sm" */
.todo-bulk-panel__selection-count[data-v-40e7cd4d] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-inline);
}
.todo-bulk-panel__divider[data-v-40e7cd4d] {
  height: 1px;
  background: var(--line-color);
  margin: var(--gap-stack) 0;
  width: 100%;
}
.todo-bulk-panel__action-buttons[data-v-40e7cd4d] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.todo-bulk-panel__action-buttons--spaced[data-v-40e7cd4d] {
  margin-top: var(--gap-stack);
}
.todo-bulk-panel__action-buttons--spaced[data-v-40e7cd4d] {
  margin-top: var(--gap-stack);
}
.todo-bulk-panel__icon-btn[data-v-40e7cd4d] {
  width: var(--h-control-md);
  height: var(--h-control-md);
  padding: 0;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-base);
}
.todo-bulk-panel__icon-btn[data-v-40e7cd4d]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.todo-bulk-panel__icon-btn--danger[data-v-40e7cd4d] {
  color: var(--ink-danger);
}
.todo-bulk-panel__icon-btn--danger[data-v-40e7cd4d]:hover {
  border-color: var(--ink-danger-hover);
  color: var(--ink-danger-hover);
}

/* .todo-bulk-panel__*-btn → AppButton variant="secondary/danger" size="sm" */
.todo-bulk-panel__select-all-results[data-v-40e7cd4d] {
  margin-top: var(--gap-inline);
}
.todo-bulk-panel__checkbox-label[data-v-40e7cd4d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-primary);
  cursor: pointer;
}

/* 대기 탭일 때는 리스트 형태 */
.todo-grid--list[data-v-40e7cd4d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.todo-page__placeholder[data-v-40e7cd4d] {
  margin: 0;
  padding: var(--space-band) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--line-normal);
}

/* 카드 오른쪽 영역 반응형 배치
   - 일반 모드: 600px 이하에서 오른쪽 영역이 아래로 내려감
   - 일괄 설정 모드: 패널(250px) + gap(16px) + 카드 최소 너비(600px)를 고려해 866px 이하에서 세로 배치 */
@media (max-width: 480px) {
.todo-list-view-wrapper[data-v-40e7cd4d] .todo-list-item {
    flex-direction: column;
    gap: var(--gap-inline);
}
.todo-list-view-wrapper[data-v-40e7cd4d] .todo-list-item__right {
    align-items: flex-end;
    text-align: right;
    min-width: auto;
    width: 100%;
}
.todo-list-view-wrapper[data-v-40e7cd4d] .todo-list-item__updated {
    justify-content: flex-end;
    text-align: right;
}
}
@media (max-width: 768px) {
  /* 좁은 화면: 일괄 모드 패널을 옆이 아닌 아래로 stack — min-width 충돌로 panel 이 짜부라지는 문제 회피 */
.todo-list-view-wrapper--bulk-mode .todo-list-view-content[data-v-40e7cd4d] {
    flex-direction: column;
}
.todo-list-view-wrapper--bulk-mode .todo-bulk-panel[data-v-40e7cd4d] {
    position: static;
    min-width: 0;
    max-width: none;
    width: 100%;
    height: auto;
    max-height: none;
    align-self: auto;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .todo-list-item {
    flex-direction: column;
    gap: var(--gap-inline);
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .todo-list-item__right {
    align-items: flex-end;
    text-align: right;
    min-width: auto;
    width: 100%;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .todo-list-item__updated {
    justify-content: flex-end;
    text-align: right;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .todo-list-item__due-date {
    justify-content: flex-end;
    text-align: right;
}
.todo-list-view-wrapper--bulk-mode[data-v-40e7cd4d] .todo-list-item__assignee {
    justify-content: flex-end;
    text-align: right;
}
}

/* 태그 필터 옵션/칩의 색+아이콘 — 아이콘 없는 태그도 폭을 차지해 라벨 정렬을 맞춘다 */
.todo-tag-filter-icon[data-v-40e7cd4d] {
  width: 1em;
  text-align: center;
  flex-shrink: 0;
}


.ttr-title[data-v-7544d14a] { display: inline-flex; align-items: flex-start; gap: var(--gap-inline); min-width: 0; max-width: 100%;
}
/* 제목은 말줄임 없이 전체 표시(줄바꿈) — 사용자 확정 2026-08-16 */
.ttr-title__label[data-v-7544d14a] { min-width: 0; overflow-wrap: anywhere;
}
.ttr-muted[data-v-7544d14a] { color: var(--ink-secondary);
}
.page[data-v-3567d4e7] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-3567d4e7] {
  margin: 0;
}
.page__desc[data-v-3567d4e7] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-3567d4e7] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-3567d4e7],
.page__card > .tab-nav[data-v-3567d4e7] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-3567d4e7] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-3567d4e7] {
    padding: var(--space-snug);
}
}
.todo-page-root[data-v-3567d4e7] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important;
}
.todo-page-root > .page__header[data-v-3567d4e7] {
  margin-top: 0;
}
.todo-page-root .page__desc[data-v-3567d4e7] {
  margin-top: 0;
}
.todo-page[data-v-3567d4e7] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.todo-page-root .page__card[data-v-3567d4e7] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.todo-page__tabs[data-v-3567d4e7] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.todo-page__tab-header[data-v-3567d4e7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--line-strong);
  /* 탭 머리줄은 **판**이다 — 비워서 바탕이 이어지게 한다. 구분은 아래 실선이 한다.
     ⛔ --card-bg 를 쓰지 않는다(2026-08-22 실사고: 이 화면들만 흰 베일이 깔려 튀었다). */
  background: var(--bg-page);
}
.todo-page__header-actions[data-v-3567d4e7] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-right: var(--gap-stack);
  flex-shrink: 0;
}

/* 시각 스타일은 AppButton이 담당 — 클래스는 레이아웃 훅용으로만 존재 */
.todo-page__tab-panels[data-v-3567d4e7] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  padding: var(--space-cozy);
  touch-action: pan-y pinch-zoom; /* 수직 스크롤은 허용, 수평 스와이프는 제어 */
}
.todo-page__tab-panel[data-v-3567d4e7] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
@media (max-width: 480px) {
.todo-page__tab-header[data-v-3567d4e7] {
    flex-direction: column;
    align-items: stretch;
}

  /* 모바일에서 헤더 액션 버튼 숨김 */
.todo-page__header-actions[data-v-3567d4e7] {
    display: none;
}
.todo-page__tab-panels[data-v-3567d4e7] {
    padding: var(--space-snug);
}
}
@media (max-width: 480px) {
.todo-page__tab-panels[data-v-3567d4e7] {
    padding: var(--space-tight);
}
}

.monaco-editor-container[data-v-c0297860] {
  width: 100%;
  height: 100%;
  /* 탭 영역에서 에디터가 꽉 차도록 보더/라운드 제거 */
  border: none;
  border-radius: 0;
  overflow: hidden;
  /* Canvas 최대 크기 제한 방지 */
  max-height: 16384px;
  min-height: 0;
  /* flex 레이아웃에서 제대로 작동하도록 */
  flex: 1;
}

/* 원격 선택 영역 스타일 (scoped가 아닌 전역 스타일) */
.monaco-editor .remote-selection {
  background-color: var(--bg-info-soft);
}
.monaco-editor .remote-selection-inline {
  background-color: var(--bg-info-soft);
}

.terminal-wrapper[data-v-28982510] {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.terminal-toolbar[data-v-28982510] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  display: flex;
  /* DOM 역순 + row-reverse → 시각상 [검색창 ∧ ∨ count 복사 지우개 >].
     DOM 마지막(검색창)이 가장 먼저 넘침 → 좁아지면 검색창부터 하나씩
     아랫줄로. 오른쪽 버튼(>)은 윗줄 우측 고정. */
  flex-direction: row-reverse;
  flex-wrap: wrap;
  max-width: calc(100% - 1.5rem);
  gap: var(--gap-inline);
  padding: var(--space-tight);
  background: var(--bg-backdrop);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-sm);
}
html[data-theme='light'] .terminal-toolbar[data-v-28982510],
body[data-theme='light'] .terminal-toolbar[data-v-28982510] {
  background: var(--bg-page);
  box-shadow: var(--shadow-sm);
}
html[data-theme='dark'] .terminal-toolbar[data-v-28982510],
body[data-theme='dark'] .terminal-toolbar[data-v-28982510] {
  background: var(--bg-backdrop);
  box-shadow: var(--shadow-sm);
}
.terminal-toolbar-toggle[data-v-28982510] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  padding: var(--space-tight);
  background: var(--bg-backdrop);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-sm);
}
html[data-theme='light'] .terminal-toolbar-toggle[data-v-28982510],
body[data-theme='light'] .terminal-toolbar-toggle[data-v-28982510] {
  background: var(--bg-page);
  box-shadow: var(--shadow-sm);
}
html[data-theme='dark'] .terminal-toolbar-toggle[data-v-28982510],
body[data-theme='dark'] .terminal-toolbar-toggle[data-v-28982510] {
  background: var(--bg-backdrop);
  box-shadow: var(--shadow-sm);
}

/* 검색 영역은 AppSearchInput 이 모양·동작을 가지므로 wrapper 폭만 — 좁아질 때 wrap 의 첫 항목이 됨. */
.search-input-wrapper[data-v-28982510] {
  width: 200px;
  /* 부모가 200px 미만이어도 부모를 넘쳐 input 이 깨지지 않게 — 부모 한도 내에서 표시 */
  max-width: 100%;
}
.search-input-wrapper[data-v-28982510] .app-search {
  width: 100%;
  min-width: 0;
}
.search-input-wrapper[data-v-28982510] .app-search__input {
  min-width: 0;
}
.toolbar-btn[data-v-28982510] {
  height: var(--h-control-md);
  box-sizing: border-box;
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  /* 눌리는 컨트롤이라 불투명 — 카드용 흰 베일(0.045)로는 검은 바탕에서 안 보인다
     (2026-08-22 실측). 분리대 손잡이와 같은 토큰을 쓴다. */
  background: var(--bg-float);
  color: var(--ink-primary);
  font-size: var(--size-body);
  cursor: pointer;
  transition: all var(--motion-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-small[data-v-28982510] {
  font-size: var(--icon-toolbar);
  line-height: var(--line-none);
}
.toolbar-btn[data-v-28982510]:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
}
.toolbar-btn[data-v-28982510]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.copy-btn[data-v-28982510] {
  padding: var(--space-tight) var(--space-cozy);
}
.terminal-output-container[data-v-28982510] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-cozy);
  /* 툴바가 absolute로 위치하므로 padding-top 불필요 */
  /* 얇은 스크롤바 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-color) var(--bg-page);
}
.terminal-output-container[data-v-28982510]::-webkit-scrollbar {
  width: 6px;
}
.terminal-output-container[data-v-28982510]::-webkit-scrollbar-track {
  background: var(--bg-page);
}
.terminal-output-container[data-v-28982510]::-webkit-scrollbar-thumb {
  background: var(--bg-scroll-thumb);
  border-radius: var(--radius-badge);
}
.terminal-output-container[data-v-28982510]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary);
}
.terminal-output[data-v-28982510] {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-body);
  line-height: var(--line-comfortable);
  color: var(--ink-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: var(--weight-body) !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 모든 하위 요소에도 동일한 폰트 굵기 강제 적용 */
.terminal-output[data-v-28982510] * {
  font-weight: var(--weight-body) !important;
  font-synthesis: none;
}

/* ANSI 변환 후 기본 텍스트 색상 보장 - 색상이 없는 경우만 기본 색상 적용 */
/* 인라인 스타일이 있는 경우는 ANSI 색상을 유지 */
.terminal-output[data-v-28982510] span:not([style*="color"]) {
  color: var(--ink-primary) !important;
}

/* 텍스트 노드도 기본 색상 적용 (부모에 색상이 없는 경우) */
.terminal-output[data-v-28982510] {
  color: var(--ink-primary);
}

/* 검색 하이라이트 */
.terminal-output[data-v-28982510] mark.search-highlight {
  background-color: var(--bg-mark);
  padding: 0;
  border-radius: var(--radius-badge);
  transition: background-color var(--motion-base) ease;
}
.terminal-output[data-v-28982510] mark.search-highlight.current-match {
  background-color: var(--bg-mark) !important;
  font-weight: var(--weight-title) !important;
  border: var(--line-w-thick) solid var(--ink-brand);
  border-radius: var(--radius-badge);
  box-shadow: var(--shadow-sm);
}

.extraction-steps[data-v-a65ca4cf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--size-meta);
  line-height: var(--line-none);
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}
.extraction-steps[data-v-a65ca4cf]::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}
.extraction-step[data-v-a65ca4cf] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  transition: opacity var(--motion-base);
}
.extraction-step--pending[data-v-a65ca4cf] { opacity: 0.3;
}
.extraction-step--done[data-v-a65ca4cf] { opacity: 0.5;
}
.extraction-step--done .extraction-step__icon[data-v-a65ca4cf] { color: var(--ink-success);
}
.extraction-step--running[data-v-a65ca4cf] {
  opacity: 1;
  font-weight: var(--weight-title);
  color: var(--ink-brand);
}
/* 진행 중 표시 — 스피너 대신 앞의 원만 깜빡인다(글자는 고정, 위쪽 진행바 스피너와 겹치지 않게). */
.extraction-step--running .extraction-step__icon[data-v-a65ca4cf] {
  color: var(--ink-brand);
  animation: extraction-step-pulse-a65ca4cf 1.2s ease-in-out infinite;
}
@keyframes extraction-step-pulse-a65ca4cf {
0%, 100% { opacity: 1;
}
50% { opacity: 0.2;
}   /* 작은 점이라 글자 pulse 보다 깊게 떨어뜨려야 눈에 띈다 */
}
@media (prefers-reduced-motion: reduce) {
.extraction-step--running .extraction-step__icon[data-v-a65ca4cf] { animation: none;
}
}
.extraction-step--failed .extraction-step__icon[data-v-a65ca4cf] { color: var(--ink-danger);
}
/* 상태 아이콘 — 상태 무관 동일 크기(라벨 --font-2xs 보다 한 단계 작게) */
.extraction-step__icon[data-v-a65ca4cf] { font-size: var(--icon-marker);
}
.extraction-step__sep[data-v-a65ca4cf] {
  font-size: var(--size-meta);
  opacity: 0.3;
  margin: 0 var(--gap-glyph);
}

.dhv[data-v-c1341b76] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-page);
}
.dhv__scroll[data-v-c1341b76] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
}
.dhv__page[data-v-c1341b76] {
  background: var(--bg-paper);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}
.dhv__page[data-v-c1341b76] svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.dhv__state[data-v-c1341b76] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-band);
  color: var(--ink-muted);
}
.dhv__state-icon[data-v-c1341b76] {
  font-size: var(--icon-toolbar);
}

/* 팝오버는 본문 위에 겹쳐 뜨므로 **밀도보다 읽힘**이 우선이다. 비슷한 상품명이 줄줄이 나오는 화면이라
   ① 회사 머리를 확실히 구분하고 ② 항목에 숨 쉴 여백을 주고 ③ 쪽번호를 오른쪽에 고정폭으로 세운다. */
.doc-pick[data-v-59da2d52] {
  display: flex;
  flex-direction: column;
  min-width: 380px;
  font-size: var(--size-meta);
  line-height: var(--line-normal);
}

/* 머리글 — 건수를 앞세우고 설명은 짧게. */
.doc-pick__head[data-v-59da2d52] {
  display: flex;
  align-items: baseline;
  padding: 0 var(--space-tight) var(--space-snug);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.doc-pick__headn[data-v-59da2d52] {
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.doc-pick__search[data-v-59da2d52] {
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
}
.doc-pick__search[data-v-59da2d52] input {
  height: var(--h-control-sm);
  font-size: var(--size-meta);
}
.doc-pick__state[data-v-59da2d52] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  padding: var(--space-cozy) var(--space-tight);
  text-align: center;
}
.doc-pick__state--error[data-v-59da2d52] {
  color: var(--ink-danger);
}
.doc-pick__list[data-v-59da2d52] {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  /* 스크롤 중에도 회사 머리가 붙어 있어야 지금 어느 회사를 보는지 안 놓친다. */
  scrollbar-gutter: stable;
}

/* 회사 머리 — 목록 위에 얹혀 따라온다. 배경이 있어야 항목과 확실히 갈린다. */
.doc-pick__group[data-v-59da2d52] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug);
  margin-top: var(--gap-glyph);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
}
.doc-pick__group[data-v-59da2d52]:first-child {
  margin-top: 0;
}
.doc-pick__co[data-v-59da2d52] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-pick__cnt[data-v-59da2d52] {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* 한 상품 = 한 줄. 쪽 칩이 실제 선택 대상이라 줄 자체는 클릭 대상이 아니다. */
.doc-pick__row[data-v-59da2d52] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  min-height: 34px;
  padding: var(--pad-row-dense);
  border-left: var(--line-w-thick) solid transparent;
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
}
.doc-pick__row + .doc-pick__row[data-v-59da2d52] {
  margin-top: var(--gap-glyph);
}
.doc-pick__row[data-v-59da2d52]:hover {
  background: color-mix(in srgb, var(--bg-brand-vivid) 5%, transparent);
}
/* 지금 열려 있는 약관 — 칩만이 아니라 **줄 전체**를 물들여야 훑다가 눈에 걸린다. */
.doc-pick__row--current[data-v-59da2d52] {
  border-left-color: var(--ink-brand);
  background: color-mix(in srgb, var(--bg-brand-vivid) 8%, transparent);
}
.doc-pick__row--current .doc-pick__name[data-v-59da2d52] {
  font-weight: var(--weight-title);
}

/* 지금 보고 있는 줄 — 왼쪽 막대만으로는 약하다. 체크로 분명히 한다.
   ⚠️ 안 고른 줄에서도 **자리는 남긴다**(투명) — 글자 시작점이 줄마다 달라지지 않게. */
.doc-pick__check[data-v-59da2d52] {
  color: var(--ink-brand);
  font-size: var(--size-meta);
  flex: none;
  width: 0.75rem;   /* dimensions-ignore: 체크 자리 고정 폭 — 줄 시작점을 맞춘다 */
}
.doc-pick__check--off[data-v-59da2d52] { visibility: hidden;
}
/* 칩 영역은 고정폭 우측 정렬 — 칩이 1개든 3개든 오른쪽 끝이 한 줄로 맞아야 훑힌다. */
.doc-pick__pages[data-v-59da2d52] {
  /* ⛔ flex:none 이면 칩 수만큼 폭이 무한정 늘어 행을 뚫는다 — 별표 칩 13개짜리 약관에서
     상품명이 「삼…」으로 뭉개지고 팝오버 밖까지 넘쳤다(사용자 보고 2026-08-16).
     넘치면 **줄을 바꾸고**, 이름 자리(최소 40%)는 남긴다. */
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  min-width: 128px;
  max-width: 60%;
}
.doc-pick__namepre[data-v-59da2d52] {
  color: var(--ink-muted);
}
.doc-pick__name[data-v-59da2d52] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 쪽 칩 — 실제로 누르는 대상. 같은 상품에 여러 판이 있으면 칩이 여러 개 붙는다. */
.doc-pick__page[data-v-59da2d52] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}
/* 접힌 건수 — 같은 쪽에 같은 이름 약관이 여럿일 때만 붙는다. */
.doc-pick__dup[data-v-59da2d52] {
  font-size: var(--size-meta);
  opacity: 0.75;
}
.doc-pick__page[data-v-59da2d52]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: color-mix(in srgb, var(--bg-brand) 10%, transparent);
}
.doc-pick__page[data-v-59da2d52]:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: 1px;
}
.doc-pick__page--current[data-v-59da2d52] {
  border-color: var(--ink-brand);
  background: var(--bg-brand);
  color: var(--ink-on-solid);   /* primary 로 채운 칩 위 글자 */
  font-weight: var(--weight-title);
}

/* ⚠️ 약관 탭이 쓰던 `.mi-clause3__pdfhead` 의 값 그대로다 — 옮겨 온 것이지 새로 정한 것이 아니다. */
.clause-head-wrap[data-v-d856fc77] {
  display: flex;
  align-items: stretch;
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-width: 0;
}

/* ‹ 약관명 › — 화살표가 이름 **양옆**에 선다(사용자 확정 2026-08-15). */
.clause-head__step[data-v-d856fc77] { flex: none; align-self: center;
}

/* 줄 하나가 두 부분(화살표 + 고르개)으로 나뉘어도 **한 줄로** 보여야 한다 —
   테두리는 감싸는 쪽이 갖고 안쪽은 갖지 않는다. */
.clause-head-wrap > .clause-head[data-v-d856fc77] { border-bottom: 0; flex: 1; min-width: 0;
}

/* ⛔ **고르개가 줄 폭을 다 써야 한다.** 고르개는 팝오버(AppPopover) 안에 들어 있어
   위 `> .clause-head` 규칙이 안 닿는다 — 그래서 이름 길이만큼만 차지하고 오른쪽이
   뻥 비어 보였다(실측 2026-08-15: 왼 26 · 오 197 · 사용자 지적 「약관보기 영역의
   오른쪽은 왜 여백이 있지」). 팝오버 손잡이째 늘린다. */
.clause-head-wrap[data-v-d856fc77] >  .app-popover__trigger { flex: 1; min-width: 0; display: flex;
}
.clause-head-wrap[data-v-d856fc77] .clause-head--pick { flex: 1; min-width: 0; border-bottom: 0;
}
.clause-head[data-v-d856fc77] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
  min-width: 0;
}
.clause-head--pick[data-v-d856fc77] { cursor: pointer; text-decoration: none;
}
.clause-head--pick[data-v-d856fc77]:hover { color: var(--ink-primary);
}
.clause-head--pick[data-v-d856fc77]:focus-visible { outline: none; box-shadow: var(--ring-focus);
}

/* 회사는 곁말, 상품이 주인공 — 좁아지면 상품부터 줄인다. */
.clause-head__co[data-v-d856fc77] { color: var(--ink-muted); white-space: nowrap; flex: none;
}
.clause-head__name[data-v-d856fc77] {
  color: var(--ink-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clause-head__caret[data-v-d856fc77] { font-size: var(--icon-marker); color: var(--ink-muted); margin-left: auto; flex: none;
}

.detail-hist[data-v-2cfbe699] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}

.part-manual-issue__body[data-v-f72cbcaa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.part-manual-issue__field[data-v-f72cbcaa] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.part-manual-issue__label[data-v-f72cbcaa] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.part-manual-issue__required[data-v-f72cbcaa] {
  color: var(--ink-danger);
}
.part-manual-issue__anchor[data-v-f72cbcaa] {
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-float);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.part-manual-issue__severity[data-v-f72cbcaa] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
}
.part-manual-issue__icon--error[data-v-f72cbcaa] { color: var(--ink-danger);
}
.part-manual-issue__icon--warning[data-v-f72cbcaa] { color: var(--ink-warning);
}
.part-manual-issue__icon--info[data-v-f72cbcaa] { color: var(--ink-info);
}

.part-issues-tab[data-v-975fa7fa] {
  display: flex;
  flex-direction: column;
  /* 부모 flex column 의 남는 자리를 채우되 그 이상 커지지 않게 — height:100% 는 탭 바 높이를
     빼지 못해 넘쳐서 목록 아래가 잘리고 스크롤이 막힌다(확인 탭 원본과 같은 사이징). */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.part-issues-tab__header[data-v-975fa7fa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 좁은 폭에서 건수 요약과 단추가 가로로 넘치지 않고 줄바꿈되도록 */
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.part-issues-tab__counts[data-v-975fa7fa] {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
  font-size: var(--size-label);
}
.part-issues-tab__count[data-v-975fa7fa] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.part-issues-tab__count--error[data-v-975fa7fa] { color: var(--ink-danger);
}
.part-issues-tab__count--warning[data-v-975fa7fa] { color: var(--ink-warning);
}
.part-issues-tab__count--info[data-v-975fa7fa] { color: var(--ink-info);
}
.part-issues-tab__count-label[data-v-975fa7fa] {
  font-size: var(--size-meta);
  opacity: 0.85;
}

/* 공통 ListBulkBar 를 감싸는 안여백. 막대의 체크상자 X 가 줄의 체크상자 X 와 맞도록 좌우는 0. */
.part-issues-tab__bulk-wrap[data-v-975fa7fa] {
  padding: var(--space-snug) 0;
  flex-shrink: 0;
}
.part-issues-tab__item-checkbox[data-v-975fa7fa] {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--gap-inline) 0 var(--gap-glyph);
}
.part-issues-tab__item--selected[data-v-975fa7fa] {
  background: var(--bg-brand-soft);
}
.part-issues-tab__item--active[data-v-975fa7fa] {
  background: var(--bg-info-soft);
}
.part-issues-tab__empty-count[data-v-975fa7fa] {
  color: var(--ink-muted);
  font-size: var(--size-label);
}

/* 도는 중 — 누르면 취소되는 것이 아니라 도는 중임을 색으로만 알린다. */
.part-issues-tab__action-btn--busy[data-v-975fa7fa] {
  border-color: var(--ink-warning) !important;
  color: var(--ink-warning) !important;
}
.part-issues-tab__action-label[data-v-975fa7fa] {
  display: none;
}
@media (min-width: 480px) {
.part-issues-tab__action-label[data-v-975fa7fa] { display: inline;
}
}
.part-issues-tab__state[data-v-975fa7fa] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-body);
}
.part-issues-tab__state--error[data-v-975fa7fa] { color: var(--ink-danger);
}
.part-issues-tab__list[data-v-975fa7fa] {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.part-issues-tab__item[data-v-975fa7fa] {
  border-bottom: var(--line-strong);
  padding: var(--space-tight) var(--space-cozy) var(--space-tight) var(--space-snug);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  display: flex;
  align-items: center;
  /* 좁은 폭에서 작업 묶음이 아랫줄로 내려가도록 — 제목의 min-width 바닥과 짝을 이룬다. */
  flex-wrap: wrap;
  gap: var(--gap-inline);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.part-issues-tab__item--error[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-danger);
}
.part-issues-tab__item--warning[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-warning);
}
.part-issues-tab__item--info[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-info);
}
.part-issues-tab__item-main[data-v-975fa7fa] {
  /* AppButton 기본을 덮는다 — 이 단추는 줄 전체를 채우는 짚기 손잡이다. */
  flex: 1 !important;
  min-width: min(100%, 8rem) !important;
  padding: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  font: inherit !important;
  text-align: left !important;
  width: auto !important;
  white-space: normal !important;
}
.part-issues-tab__item-main[data-v-975fa7fa] .app-btn__label {
  gap: var(--gap-inline);
}
.part-issues-tab__item[data-v-975fa7fa]:hover:not(.part-issues-tab__item--active) {
  background: var(--bg-hover);
}
.part-issues-tab__icon--error[data-v-975fa7fa] { color: var(--ink-danger);
}
.part-issues-tab__icon--warning[data-v-975fa7fa] { color: var(--ink-warning);
}
.part-issues-tab__icon--info[data-v-975fa7fa] { color: var(--ink-info);
}
.part-issues-tab__page[data-v-975fa7fa] {
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.part-issues-tab__origin[data-v-975fa7fa],
.part-issues-tab__where[data-v-975fa7fa] {
  flex-shrink: 0;
}
.part-issues-tab__message[data-v-975fa7fa] {
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.part-issues-tab__actions[data-v-975fa7fa] {
  display: flex;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 심각도 콤보: 셋뿐이라 고른 표시(체크마크)가 필요 없다 — 아이콘+이름만 남긴다. */
.part-issues-tab__severity-select[data-v-975fa7fa] .multi-select-option-marker {
  display: none;
}

/* 일괄 심각도 지정: MultiSelect 에 disabled prop 이 없어 그릇으로 비활성을 표시한다. */
.part-issues-tab__bulk-severity[data-v-975fa7fa] {
  display: inline-flex;
}
.part-issues-tab__bulk-severity--disabled[data-v-975fa7fa] {
  opacity: 0.5;
  pointer-events: none;
}
.part-issues-tab__header-actions[data-v-975fa7fa] {
  display: flex;
  gap: var(--gap-glyph);
}
.part-issues-tab__filter-bar[data-v-975fa7fa] {
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.part-issues-tab__group-header[data-v-975fa7fa] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-bottom: var(--line-strong);
  cursor: pointer;
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.part-issues-tab__group-header[data-v-975fa7fa]:hover { background: var(--bg-hover);
}
.part-issues-tab__group-header--error[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-danger);
}
.part-issues-tab__group-header--warning[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-warning);
}
.part-issues-tab__group-header--info[data-v-975fa7fa] { border-left: var(--line-accent) solid var(--ink-info);
}
.part-issues-tab__group-toggle[data-v-975fa7fa] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  /* 접힘 화살표가 좌우로 바뀌어도 제목이 흔들리지 않게 자리를 못 박는다. */
  width: var(--icon-label);
}
.part-issues-tab__group-title[data-v-975fa7fa] {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.part-issues-tab__group-count[data-v-975fa7fa] {
  color: var(--ink-muted);
  font-weight: normal;
  font-size: var(--size-meta);
  flex-shrink: 0;
}
.part-issues-tab__group-spacer[data-v-975fa7fa] {
  flex: 1;
}
.part-issues-tab__item--indented[data-v-975fa7fa] {
  padding-left: var(--space-wide);
}

.mfv[data-v-1649a072] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mfv__tabs[data-v-1649a072] {
  flex-shrink: 0;
  border-bottom: var(--line-strong);
}

/* ⛔ 선은 감싼 칸이 하나만 긋는다 — TabNav 의 밑줄과 겹쳐 굵어 보였다(사용자 지적 2026-08-22). */
.mfv__tabs[data-v-1649a072] .tab-nav {
  border-bottom: none;
}
.mfv__pane[data-v-1649a072] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  /* ⛔ 판을 **가득 채운다** — 표가 내용만큼만 차지하면 그 아래 빈 자리가 표 밖이 되어
     「행 밖을 눌러 선택 놓기」가 닿지 않는다(실측 2026-08-22: 표 135px, 판 그 아래). */
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* ⛔ 가로로 밀리지 않는다 — 좁은 판이라 옆으로 새면 값이 화면 밖으로 나간다. */
  overflow-x: hidden;
}
.mfv__history[data-v-1649a072] {
  flex: 1;
  overflow-y: auto;
}
.mfv__head[data-v-1649a072] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}

/* ⛔ 찾기 상자는 제 폭을 100% 로 잡는다 — 곁에 단추를 두려면 그 폭을 **꺾어** 줘야 한다.
   안 그러면 단추가 판 밖으로 밀려 잘린다(2026-08-30 사용자 지적). */
.mfv__search[data-v-1649a072] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.mfv__head > .app-btn[data-v-1649a072] {
  flex: 0 0 auto;
}

/* 감춘 첫 단 고르개 — 판 머리 바로 아래 한 줄(일괄 바가 서는 그 자리와 같다).
   여백은 판이 준다(.mfv__pane 의 gap) — 여기서 따로 주면 그 줄만 떠 보인다. */
.mfv__rootpick[data-v-1649a072] {
  flex-shrink: 0;
}
.mfv__body[data-v-1649a072] {
  flex: 1;
  min-height: 0;
}
.mfv__name[data-v-1649a072] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}

/* 그림표는 이름을 거드는 자리 — 글자보다 한 톤 물러선다. */
.mfv__name > i[data-v-1649a072] {
  color: var(--ink-muted);
}

/* ⛔ 고르는 줄은 **형제 줄 위**에 선다 — 그냥 두면 **다음 줄의 글자가 열린 목록을 덮는다**
   (사용자 지적 2026-08-23). 면색은 이미 불투명(--surface-solid)이라 비쳐 보이는 게 아니라 덮인 것이다.

   ⚠️ 올려야 할 것은 행(rowwrap)이 **아니라** 가상 스크롤이 행마다 감싸는 칸(.lvs__item)이다.
      그 칸은 자리를 잡느라 `transform` 을 쓰는데, transform 은 **쌓임을 스스로 만든다** —
      그래서 행에 z 를 줘 봐야 그 칸 안에 갇히고, 뒤 칸이 통째로 위에 온다(실측 2026-08-23:
      행 z:1000 인데도 다음 행의 셀이 목록 위에 있었다). */
.mfv__body[data-v-1649a072] .lvs__item:has(.mfv__pickbox) {
  z-index: var(--z-dropdown);
}
.mfv__body[data-v-1649a072] .list-body__rowwrap:has(.mfv__pickbox) {
  position: relative;
  z-index: var(--z-dropdown);
}
.mfv__value[data-v-1649a072] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}

/* 값은 **읽는 자리**다 — 고치기는 작업 칸의 「수정」이 연다(사용자 확정 2026-08-23).
   ⛔ 밑줄·손가락 커서를 두지 않는다: 누를 수 있다고 말해 놓고 아무 일도 안 하면 그게 더 나쁘다.
   ⛔ **넘침을 여기서 정하지 않는다**(사용자 지적 2026-08-23, 두 번째다 — 2026-08-17 에 12곳을
      걷어냈던 그 유형이다). 넘침은 **컬럼 설정**(설정 모달의 「넘침」)이 정한다. 여기에 nowrap +
      말줄임을 박아 두면 설정이 「줄바꿈」인데도 값이 「…」으로 잘려, 뒤가 다른 값들이 서로 구분되지
      않는다. 값은 셀 폭에 맞춰 접히고, 잘라야 하면 사람이 그 컬럼을 말줄임으로 바꾼다. */
.mfv__val[data-v-1649a072] {
  min-width: 0;
}
.mfv__val--none[data-v-1649a072] {
  color: var(--ink-muted);
}

/* 고치는 중 — **내용 탭의 조문 편집과 똑같은 모양**이다(사용자 지시 2026-08-22).
   ⛔ 상자를 그리지 않는다(사방 테두리·패딩·라운드 금지) — 그러면 「편집창」이 뜬 것으로 보인다.
      표시는 밑줄 하나뿐이고, 글자는 있던 자리에 그대로 선다. */
.mfv__val--editing[data-v-1649a072] {
  flex: 1;
  min-width: 0;
  min-height: 1.2em;
  outline: none;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: pre-wrap;
  border-block-end: 1px solid var(--ink-brand);
}
.mfv__unit[data-v-1649a072] {
  margin-inline-start: var(--gap-glyph);
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
}

/* 원장을 가리키는 값 — 누르면 그 부품으로 한 단 들어간다.
   원본: ReferenceDisabilityPanel.vue 의 짚어 가는 글자(브랜드 잉크 · 올려야 밑줄). */
.mfv__ledger[data-v-1649a072] {
  color: var(--ink-brand);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.mfv__ledger[data-v-1649a072]:hover { text-decoration: underline;
}
.mfv__val-sep[data-v-1649a072] { color: var(--ink-muted);
}

.met[data-v-818afedd] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  overflow-y: auto;
}
.met__header[data-v-818afedd] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.met__summary[data-v-818afedd] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.met__summary-label[data-v-818afedd] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.met__state[data-v-818afedd] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-wide) var(--space-cozy);
  color: var(--ink-muted);
}
.met__state-icon[data-v-818afedd] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.met__state-hint[data-v-818afedd] {
  font-size: var(--size-label);
}
.met__list[data-v-818afedd] {
  display: flex;
  flex-direction: column;
}
.met__run[data-v-818afedd] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) 0;
  border-bottom: var(--line-soft);
  font-size: var(--size-label);
}
.met__when[data-v-818afedd] {
  color: var(--ink-primary);
  white-space: nowrap;
}
.met__tags[data-v-818afedd] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex: 1;
  min-width: 0;
}
.met__none[data-v-818afedd],
.met__msg[data-v-818afedd],
.met__restored[data-v-818afedd],
.met__who[data-v-818afedd],
.met__dur[data-v-818afedd] {
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clause-pdf[data-v-a9c54698] {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.clause-pdf__frame[data-v-a9c54698] {
  flex: 1;
  min-height: 0;
  border: 0;
  background: var(--bg-field);
}
.clause-pdf__empty[data-v-a9c54698] {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-label);
  background: var(--bg-field);
}

.ccp[data-v-86dd04df] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1;
}







/* 펼친 목록 — 화면을 다 덮지 않는다. 고르는 자리이지 읽는 자리가 아니다. */
.ccp__pdf[data-v-86dd04df] { flex: 1; min-height: 0;
}
/* 질병그룹 패널 공통 스타일 — 정보 탭의 네 패널이 함께 쓴다.
   ⚠️ 글자 크기는 쓰임대로: --font-lg 결론 숫자 · --font-sm 제목·주어 ·
      --font-xs 읽어야 하는 내용 · --font-2xs 라벨·곁말.
      내용과 곁말을 같은 크기로 두면 어디를 읽어야 할지 알 수 없다. */
/* ── 글자 크기는 **쓰임대로** 쓴다 (tokens.css 의 눈금 그대로) ──
     --font-lg  결론 숫자 (정확도)
     --font-sm  패널 제목 · 물어본 병명처럼 그 칸의 주어
     --font-xs  본문 기본 — 규칙 원문·병명·코드 설명 등 **읽어야 하는 내용**
     --font-2xs 라벨·보조 설명 — 캡션, 「— 이름이 KCD 에 없음」 같은 곁말
   ⚠️ 예전 잘못: 내용과 곁말을 **둘 다 --font-xs** 로 써서 위계가 사라졌다.
      규칙 원문(읽어야 함)과 캡션(곁눈질용)이 같은 크기로 보이면 어디를 읽어야 할지 알 수 없다. */
/* 패널 — 정보 탭의 각 칸. 테두리와 머리글이 있어야 무엇의 묶음인지 읽힌다.
   ⚠️ 예전에 공통 스타일을 추릴 때 'dgm__pane' 로 거르다가 'dgm__panel' 까지 함께 지워
      정보 탭의 칸들이 테두리도 머리글 배경도 없이 맨 글로 흘렀다(실측). */
/* 남는 높이를 받은 패널(dgv__grow)은 머리·꼬리를 제외한 몸통이 스크롤한다 */
.dgp__panel {
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  min-width: 0;
}

.dgp__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-snug);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-float);
  border-bottom: var(--line-w) solid var(--line-color);
}

.dgp__panel-head h4 { margin: 0; font-size: var(--size-label); }

/* 머리말 오른쪽의 곁말 — 제목보다 작아야 곁말로 읽힌다.
   ⚠️ 클래스만 쓰고 규칙이 없어 제목(13px)보다 큰 16px 로 그려지고 있었다(2026-08-06 실측). */
.dgp__panel-note {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  font-weight: var(--weight-body);
}

.dgp__panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  padding: var(--space-cozy);
}

/* 스크롤되는 목록 위에 떠 보이지 않게 제 배경과 경계선을 준다 */
.dgp__panel-foot {
  padding: var(--space-tight) var(--space-cozy) var(--space-snug);
  background: var(--bg-float);
  border-top: var(--line-w) solid var(--line-color);
}



/* ── 질병그룹 탭은 3분할이다 ──
   별표 본문 · 제외 진단코드 · 판정 신뢰도 셋이 **항상 함께 보여야** 한다.
   하나를 보려고 다른 것을 스크롤로 밀어내면 서로 대조가 안 된다
   (제외 코드를 보면서 별표 본문을 확인하는 게 이 화면의 주된 쓰임이다).
   그래서 탭 자체는 스크롤하지 않고 **각 영역이 제 안에서** 스크롤한다. */
/* 별표 본문이 주인공이라 남는 높이를 더 가져간다 */
/* 아래 줄 — 제외 진단코드 · 판정 신뢰도를 나란히. 둘 다 이 줄의 높이를 통째로 쓴다. */
/* 머리·꼬리는 제 높이를 지키고, 스크롤은 몸통에만 준다 */
/* ListBody 는 제 스크롤러를 갖고 있으므로 남는 높이만 주면 된다 */
/* 좁은 화면에서 3분할은 칸마다 너무 얕아진다 — 원래대로 위에서 아래로 흐르게 둔다 */
/* ── 폭에 따라 가로/세로가 바뀐다 ──
   ⚠️ 넓은 화면에서 무조건 세로로 쌓으면 좌우가 텅 비고 세로는 답답해진다.
      폭이 있으면 나란히 놓고, 모자라면 위아래로 되돌린다.
   ⚠️ flex-wrap 으로 흉내내면 안 된다 — 줄바꿈이 되는 순간 높이 사슬(min-height:0)이 끊겨
      패널이 내용만큼 부풀고 모달 밖으로 넘친다(실측: 별표가 1028px 로 튀어나갔다).
      그래서 **두 칸을 감싸는 래퍼**를 두고 그 방향만 바꾼다. */
/* 넓으면 별표를 왼쪽에 크게, 오른쪽에 제외·신뢰도를 세로로 */
/* 좁아지면 두 칸을 나란히 두기엔 폭이 모자라 글이 잘게 접힌다 — 위아래로 되돌린다 */
/* 시뮬레이션 탭 — 넓으면 판정칸과 곁칸(기준·회차)을 나란히 */

/* 더 좁으면 3분할 자체가 칸마다 너무 얕아진다 — 원래대로 위에서 아래로 흐르게 둔다 */
/* 스크롤되는 목록 위에 떠 보이지 않게 제 배경과 경계선을 준다 */
.dgp__cell-name { min-width: 14ch; }

.dgp__codes { display: flex; flex-wrap: wrap; gap: var(--space-tight); align-items: center; }
.dgp__struck { text-decoration: line-through; }
.dgp__more { font-size: var(--size-meta); color: var(--ink-muted); }
.dgp__legend { margin: 0; font-size: var(--size-meta); color: var(--ink-muted); }
/* 패널 머리 **바로 아래** 붙는 안내 줄 — 여백 없이 찍히면 글이 새어 나온 것처럼 보인다
   (사용자 지적 2026-08-13). 위아래로 숨 쉴 자리를 주고 왼쪽 여백을 본문과 맞춘다. */
.dgp__panel > .dgp__legend {
  padding: var(--space-tight) var(--space-cozy) var(--space-snug);
}
.dgp__legend--warn { color: var(--ink-warning); }

.dgp__clues { display: flex; flex-direction: column; gap: var(--space-tight); margin: 0; padding: 0; list-style: none;
  border-top: var(--line-w) solid var(--line-color); padding-top: var(--space-snug); }
.dgp__clues li { display: flex; align-items: baseline; gap: var(--space-snug); font-size: var(--size-meta); color: var(--ink-secondary); }
/* 곁말은 내용보다 한 단계 작게 — 같은 크기면 규칙 원문과 구분이 안 된다 */
.dgp__clue-reason { font-size: var(--size-meta); color: var(--ink-muted); font-style: normal; }

.dgp__codes--inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-tight);
  margin-left: var(--space-snug);
}

/* 물어본 코드가 무슨 병인지 — 답 바로 위에 붙는다 */
.dgp__subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-snug);
}

.dgp__subject-name {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}

/* 확신도 — 확정이 아니면 왼쪽에 색 띠를 둬서 훑을 때 걸리게 한다 */
.dgp__confidence {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  padding-left: var(--space-snug);
  border-left: var(--line-accent) solid var(--ink-success);
}

.dgp__confidence--uncertain { border-left-color: var(--ink-warning); }
.dgp__confidence--open { border-left-color: var(--ink-info); }

.dgp__acc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-snug);
  margin: 0;
}

/* 정확도 숫자가 이 칸의 결론이라 가장 먼저 읽혀야 한다 */
.dgp__acc-num {
  font-size: var(--size-title-sm);
  font-variant-numeric: tabular-nums;
}

.dgp__scenarios {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dgp__scenarios li {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  flex-wrap: wrap;
}

/* 기준과 답이 갈리는 해석만 눈에 걸리게 한다 */
.dgp__scenarios li.is-diff .dgp__scenario-label {
  font-weight: var(--weight-title);
}

.dgp__scenario-label {
  min-width: 74px;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

.dgp__check,
.dgp__toggle { display: flex; align-items: baseline; gap: var(--space-snug); font-size: var(--size-meta); }
/* 입력줄 안에 들어가는 토글 — 입력칸·버튼과 **같은 컨트롤로 보이게** 테두리를 두르고
   높이를 맞춘다. 테두리가 없으면 글자만 떠 있어 옆 버튼과 줄이 어긋나 보인다
   (사용자 지적 2026-08-15). 높이/여백/모서리는 AppButton(md)과 같은 토큰을 쓴다. */
.dgp__toggle--inline {
  align-items: center;
  white-space: nowrap;
  height: var(--h-control-md);
  padding: 0 var(--space-cozy);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
}
.dgp__toggle--inline:hover { border-color: var(--ink-brand); color: var(--ink-brand); }
/* 입력줄은 컨트롤 높이가 모두 같으므로 baseline 이 아니라 가운데로 맞춘다 —
   baseline 이면 테두리 있는 컨트롤과 없는 컨트롤의 밑선이 서로 어긋난다. */
.dgp__check--wide { align-items: center; }

.dgp__suggest { display: flex; flex-direction: column; gap: var(--space-tight); }
.dgp__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-snug); margin: 0; }


.dgp__sim { display: flex; flex-wrap: wrap; gap: var(--space-cozy); }
.dgp__sim-item { display: flex; align-items: baseline; gap: var(--space-tight); font-size: var(--size-meta);
  color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.dgp__sim-item.is-base { color: var(--ink-brand); font-weight: var(--weight-title); }

/* 남는 높이를 받은 패널 — 안의 목록이 제 몫만큼만 쓰고 스크롤한다.
   ⚠️ min-height:0 이 없으면 목록이 제 내용만큼 부풀어 아래 패널을 밀어낸다. */
.dgv__grow.dgp__panel > .list-body,
.dgv__grow.dgp__panel > .dgp__panel-body {
  flex: 1 1 0;
  min-height: 0;
}

.dgv__grow.dgp__panel > .dgp__panel-head,
.dgv__grow.dgp__panel > .dgp__panel-foot {
  flex: 0 0 auto;
}

/* 문장으로 적힌 별표의 원문 — 읽어야 하는 내용이라 곁말보다 크고, 줄간격을 넉넉히 준다. */
.dgp__prose {
  margin: 0;
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 못 옮긴 제외 요약 한 줄 — 목록은 「판정 신뢰도」가 갖는다(같은 목록을 두 번 그리지 않는다). */
.dgp__clue-summary {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* ── 고치는 중의 코드 배지 ──────────────────────────────────────────────────
   ⛔ 배지를 새로 만들지 않는다. **읽기 때와 같은 AppBadge** 를 그대로 쓰고,
      그 안에 ✕ 만 더 넣는다(사용자 지적 2026-08-12: 「배지는 어디서 이런 걸 갑자기
      가져다 올려놓은 거야」). 여기서 하는 일은 그 ✕ 를 배지 안에 앉히는 것뿐이다. */
.dgp__codes--edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-tight);
}
/* ⛔ 급소 — **보기 배지와 편집 배지가 같은 크기**여야 화면이 안 흔들린다.
   (사용자 확정 2026-08-12: 「보기에서 보여주는 배지도 크기를 약간 키우면 두 모드에서
    동일한 크기가 되잖아」)

   그래서 코드 배지를 **평소에도** 조금 키우고, 오른쪽에 ✕ 가 앉을 자리를 **미리 비워 둔다**.
   편집으로 들어가면 그 빈자리에 ✕ 가 들어앉을 뿐, 폭도 높이도 1px 도 바뀌지 않는다.
   ⚠️ 이 규칙은 **읽기·편집 양쪽 코드 배지에 함께** 걸어야 뜻이 산다. */
.dgp__codes .app-badge {
  position: relative;
  padding: 1px var(--space-roomy) 1px var(--space-snug);  /* role-ignore: 글자 줄 안에 놓이는 표시라 세로 여백이 1px 이어야 한다 — 사다리(4px)로 올리면 줄 간격이 벌어진다 */
  line-height: var(--line-snug);
}
/* 실제 코드(파랑)는 고치는 값이 아니라 결과다 — ✕ 자리를 비워 둘 이유가 없다. */
.dgp__codes .app-badge--primary,
.dgp__codes .app-badge--danger.dgp__struck {
  padding-right: var(--space-snug);
}

/* ✕ — 미리 비워 둔 그 자리에 들어앉는다.
   ⚠️ AppButton 의 크기 규칙은 scoped 속성선택자라 한 겹으로는 못 이긴다 — 세 겹으로 짚는다. */
.dgp__codes--edit .app-badge .dgp__x {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  line-height: var(--line-none);
}
.dgp__codes--edit .app-badge .dgp__x i {
  font-size: var(--icon-marker);   /* 11px — 배지 안에 앉는 아이콘 */
  line-height: var(--line-none);
  width: auto;
}
/* 보이는 크기는 작지만 **눌리는 자리는 넓다** — 겹쳐 띄운 것이라 크기에 영향이 없다. */
.dgp__codes--edit .app-badge .dgp__x::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}
/* 줄 끝의 ＋ — ⛔ 배지보다 크면 그 줄 전체가 높아진다. 배지 높이에 맞춘다. */
.dgp__codes--edit .dgp__x--add {
  position: static;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 0;
  padding: 0;
  margin-left: 0;
}
.dgp__codes--edit .dgp__x--add i {
  font-size: var(--icon-label);    /* 12px — 배지 줄에 맞춘다 */
  line-height: var(--line-none);
}

/* 그 자리 고치기 — 읽기 때 글자와 **같은 자리**다(메타 편집기 내용 탭과 같은 방식).
   ⛔ 테두리·배경·여백을 주지 않는다. 주면 그만큼 카드가 커져 보기 화면이 흔들린다. */
.dgp__editing {
  outline: none;
  /* 고칠 수 있다는 표시는 **글자 밑선**으로만 — 자리를 차지하지 않는다. */
  box-shadow: 0 var(--line-w) 0 0 var(--ink-brand);
  white-space: pre-wrap;
  cursor: text;
}

/* ⛔ **짚힌 코드** — 왼쪽에서 고른 것과 오른쪽 원문에서 칠한 것이 **같은 것**임을 보인다
   (사용자 요건 2026-08-15). 브랜드색(초록)은 이 화면에서 이미 다른 뜻으로 쓰여 헷갈리므로
   경고색 계열(호박)로 짚는다 — 원문에 칠하는 색과 같은 색이다.
   ⚠️ 커서도 함께 바꾼다. 배지가 든 칸이 `cursor: text` 라 그대로 두면 **누를 수 있다는 것을
      아무도 모른다**(실측 2026-08-15: 커서가 글자 입력 모양). */
.dgp__code--pick { cursor: pointer; }
.dgp__code--pick:hover { border-color: var(--ink-warning); }

.dgp__code--on,
.dgp__codes .app-badge.dgp__code--on {
  border-color: var(--ink-warning);
  background: var(--bg-warning-soft);
  color: var(--ink-warning);
  font-weight: var(--weight-title);
}

/* 탭 안에 들어간 목록 판 — **탭 줄이 이미 경계**라 상자를 겹치지 않는다.
   ⚠️ 시뮬레이션 탭처럼 여러 판이 나란히 서는 곳은 상자가 각 판의 경계라 그대로 둔다.
   ⛔ **여기서 클립하지 않는다**(overflow: visible). 상자가 없는 판인데 overflow:hidden 을 두면
      그 판이 곧 스크롤 상자가 되어, 안쪽 찾기 칸의 position:sticky 가 조용히 죽는다
      (붙박이로 만들었는데 그대로 밀려 올라간다 — 실측 2026-08-15). */
.dgp__panel--bare { border: 0; border-radius: var(--radius-badge); overflow: visible; }

/* 이 표 안에서 찾기 — **두 탭이 같은 모양**이어야 한다.
   ⛔ 한쪽 컴포넌트의 scoped CSS 에 두었더니 다른 탭에는 안 먹어 높이가 40 vs 32 로 갈렸다
      (사용자 지적 2026-08-15). 두 패널이 함께 쓰는 이 파일에 둔다.
   ⛔ **굴려도 그 자리에 있어야 한다**(사용자 지시 2026-08-15). 이 상세는 스크롤 상자가
      바깥(.dgv__work-body) 하나뿐이라 찾기 칸이 목록과 함께 밀려 올라갔다 — 코드가 수백 줄인
      표에서는 검색어를 지우거나 고쳐 넣으려고 매번 맨 위로 되올라가야 했다.
   ⚠️ 배경을 반드시 준다 — 없으면 밑으로 지나가는 줄이 글자에 겹쳐 비친다. */
.dgp__find {
  display: flex;
  gap: var(--space-snug);
  padding: var(--space-snug) var(--space-roomy) var(--space-snug);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border-bottom: var(--line-w) solid var(--line-color);
}

/* 두 영역을 아우르는 띠 — 스크롤을 내려도 따라온다(표가 길어도 버튼을 잃지 않게). */
.dgb[data-v-c1172fbc] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-badge);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
.dgb--idle[data-v-c1172fbc] { border-color: var(--line-color);
}
.dgb__lead[data-v-c1172fbc] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-brand);
}
/* ⛔ **아래에 있어야 이긴다.** 특이도가 같아(0,1,0) 위에 두었더니 `.dgb__lead` 의 파란 굵은
   글씨가 그대로 남아, 고치는 중이 아닌데도 편집 중처럼 보였다(실측 2026-08-15).
   ⛔ 이름 없는 토큰(`--font-normal`)도 함께 고쳤다 — 없는 이름은 그 속성만 조용히 사라진다. */
.dgb__lead--idle[data-v-c1172fbc] { color: var(--ink-secondary); font-weight: var(--weight-body);
}
.dgb__live[data-v-c1172fbc] { font-size: var(--size-label); color: var(--ink-info);
}
.dgb__acts[data-v-c1172fbc] { display: inline-flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}

/* 함께 보는 사람들 — 줄의 **맨 오른쪽**. 버튼과 붙지 않게 한 칸 띄운다. */
.dgb__who[data-v-c1172fbc] { margin-left: var(--gap-inline);
}

/* ⛔ 창 높이는 **여기서 한 번 못 박는다.** 안의 자리들이 서로 주고받을 뿐이다 —
   선택된 코드가 늘면 그만큼 목록이 줄고, 창은 그대로다(docs/design-system/modal.md). */
.ccm[data-v-c3da6ec5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  height: 30rem;
}
.ccm__muted[data-v-c3da6ec5] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
/* 안내 한 줄 — 원장 · 건수 · 담는 법. 창 폭이 좁아지면 접힌다. */
.ccm__lead[data-v-c3da6ec5] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-glyph) var(--gap-stack);
  margin: 0;
  font-size: var(--size-label);
}
.ccm__count[data-v-c3da6ec5] { color: var(--ink-secondary); font-variant-numeric: tabular-nums;
}
.ccm__how[data-v-c3da6ec5] { margin-left: auto;
}
.ccm__dim[data-v-c3da6ec5] { color: var(--ink-muted);
}
/* 표가 들어갈 자리 — 후보가 몇 개든 창 높이는 그대로다. */
/* ⛔ **flex 여야 한다.** block 이면 ListBody(flex:1)가 이 높이를 못 받아 제 내용만큼 자라고,
   overflow:hidden 에 잘린 채 **굴러가지도 않는다**(실측 350px 상자에 495px — 145px 잘림.
   사용자 지적 2026-08-13). flex 로 두면 ListBody 가 이 높이를 채우고 제 스크롤러가 굴린다. */
.ccm__grid[data-v-c3da6ec5] {
  display: flex;
  flex: 1;          /* 남는 자리를 다 쓴다 — 위가 자라면 여기가 줄어든다 */
  min-height: 0;
  overflow: hidden;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
}
/* ⛔ 비었을 때 자리를 차지하지 않는다 — 목록 아래에 까닭 없는 여백으로 보였다
   (사용자 지적 2026-08-13). 창 높이는 .ccm 이 잡고 있으므로 이 줄이 생겨도 안 흔들린다. */
.ccm__raw[data-v-c3da6ec5]:not(:empty) {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: 2rem;
}
/* 선택된 코드 — 맨 위. 비어 있어도 자리를 차지한다(창 높이 고정). 많아지면 옆으로 흐른다. */
/* ⛔ 가로 스크롤바를 내지 않는다 — 코드 하나에도 막대가 떠 흉했다(사용자 지적 2026-08-13).
   많아지면 **줄을 바꿔** 아래로 쌓이고, 그래도 넘치면 이 상자만 세로로 굴린다.
   ⚠️ 처음엔 한 줄만큼만 차지하고 **고를수록 자란다**(사용자 확정 2026-08-13).
      대신 아래 목록이 그만큼 줄어 **창 전체 높이는 그대로**다 — 확인 자리가 안 움직인다. */
.ccm__picked[data-v-c3da6ec5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: 2.25rem;
  max-height: 7rem;
  flex: 0 0 auto;
  padding: var(--space-tight) var(--space-snug);
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
}
.ccm__picked-head[data-v-c3da6ec5] {
  flex: 0 0 auto;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ccm__picked-list[data-v-c3da6ec5] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
}
/* ✕ 를 배지 안에 겹쳐 넣는다 — 별표 표와 **같은 값**을 쓴다(diseaseGroupPanels.css).
   ⚠️ AppButton 의 크기 규칙은 한 겹으로는 못 이긴다 — width/min-width/padding/border/margin
      을 다 짚어야 한다. 몇 개만 짚었더니 ✕ 가 글자 위에 겹쳐 앉았다(2026-08-13). */
/* ⚠️ 오른쪽 여백은 **✕ 폭보다 넉넉히** 준다 — 같게 주면 ✕ 가 글자에 딱 붙어
   「A520✕」로 읽힌다(사용자 지적 2026-08-13). ✕ 12px + 양옆 숨 = 20px. */
.ccm__picked-list .app-badge[data-v-c3da6ec5] {
  position: relative;
  padding: var(--pad-badge);
  line-height: var(--line-snug);
}
/* ⚠️ ✕ 는 **작고 흐리게** 둔다 — 코드가 주인공이고 ✕ 는 거들 뿐이다.
   마우스를 올리면 또렷해진다. 다만 **숨기지는 않는다** — 손가락에는 hover 가 없어
   모바일에서 영영 못 지우게 된다(사용자 지적 2026-08-13). */
.ccm__picked-list .app-badge .ccm__unpick[data-v-c3da6ec5] {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  line-height: var(--line-none);
  /* ⚠️ 제 색을 쓰면 ✕ 가 코드보다 밝아 **✕ 가 먼저 보인다** — 코드 색을 그대로 물려받는다. */
  color: inherit;
  opacity: 0.5;
  transition: opacity var(--motion-fast) ease;
}
.ccm__picked-list .app-badge:hover .ccm__unpick[data-v-c3da6ec5],
.ccm__picked-list .app-badge .ccm__unpick[data-v-c3da6ec5]:focus-visible {
  opacity: 1;
}
.ccm__picked-list .app-badge .ccm__unpick i[data-v-c3da6ec5] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
  width: auto;
}
/* 손가락으로 누르는 화면에서는 흐릴 이유가 없다 — 처음부터 또렷하게. */
@media (hover: none) {
.ccm__picked-list .app-badge .ccm__unpick[data-v-c3da6ec5] { opacity: 1;
}
}
/* 누를 자리는 아이콘보다 넓게 — 작은 ✕ 를 정확히 겨누지 않아도 되게. */
.ccm__picked-list .app-badge .ccm__unpick[data-v-c3da6ec5]::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}

/* 창 높이는 줄 수와 상관없이 그대로다 — 안에서 무엇을 하든 확인 자리가 안 움직인다. */
.chm[data-v-03af1ac5] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  height: 28rem;
}
.chm[data-v-03af1ac5] .list-body { min-height: 0;
}
.chm__when[data-v-03af1ac5] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap;
}
.chm__what[data-v-03af1ac5] { overflow-wrap: anywhere;
}
.chm__none[data-v-03af1ac5] { font-size: var(--size-meta); color: var(--ink-muted);
}

.dgp__acts[data-v-8e5e02b0] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin-left: auto;
}
.dgp__editable[data-v-8e5e02b0] { cursor: text;
}
.dgp__legend--curated[data-v-8e5e02b0] { color: var(--ink-info);
}
.dgp__legend--error[data-v-8e5e02b0] { color: var(--ink-danger);
}
.dgp__legend--live[data-v-8e5e02b0] { color: var(--ink-info);
}
/* 이력 표가 들어갈 자리 — 줄 수와 상관없이 창 높이가 그대로다. */
.dgp__hbox[data-v-8e5e02b0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  height: 26rem;
}
.dgp__hbox > .list-body[data-v-8e5e02b0] { flex: 1 1 0; min-height: 0;
}
/* 작업 자리 — 버튼이 있든 없든 **같은 폭**이라야 카드가 안 흔들린다(아이콘 2개 기준). */
.dgp__rowops[data-v-8e5e02b0] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
  min-width: 3.5rem;
}
.dgp__hwhat[data-v-8e5e02b0] { color: var(--ink-secondary);
}
.dgp__hwhen[data-v-8e5e02b0] { white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dgp__hwho[data-v-8e5e02b0] { display: inline-flex; align-items: center; gap: var(--gap-glyph); white-space: nowrap;
}
.dgp__hnone[data-v-8e5e02b0] { color: var(--ink-muted);
}
.dgp__savebox[data-v-8e5e02b0] { display: flex; flex-direction: column; gap: var(--gap-inline); min-height: 11rem;
}
/* 반영 범위 — 저장 버튼 바로 위에 둔다. 누르기 직전에 눈에 들어와야 한다. */
/* 자주 쓰는 사유 — 한 줄로 늘어놓되 넘치면 접힌다. */
.dgp__presets[data-v-8e5e02b0] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph);
}
.dgp__scope[data-v-8e5e02b0] {
  padding: var(--space-snug);
  border: var(--line-w) solid var(--ink-warning);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
}
.dgp__scope-head[data-v-8e5e02b0] { margin: 0; font-size: var(--size-meta); color: var(--ink-secondary);
}
.dgp__scope-count[data-v-8e5e02b0] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.dgp__scope-list[data-v-8e5e02b0] {
  /* 자리를 **고정**으로 잡는다 — 몇 곳이든 창 높이가 그대로여야 한다. */
  height: 4.5rem;
  overflow-y: auto;
  margin: var(--gap-inline) 0 0;
  padding: 0 0 0 var(--space-tight);
  list-style: none;
  font-size: var(--size-meta);
}
.dgp__scope-list li[data-v-8e5e02b0] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) 0;
}
/* 회사 이름은 상품 이름보다 한 톤 죽여 둔다 — 찾는 것은 상품이다. */
.dgp__scope-co[data-v-8e5e02b0] { color: var(--ink-secondary); white-space: nowrap;
}


.dgp__acts[data-v-30d4cadf] { display: inline-flex; align-items: center; gap: var(--gap-glyph); margin-left: auto;
}


/* 판정 · 기준 · 회차별 전개를 위에서 아래로 */
.dgp__sim-stack[data-v-ba4bc8a2] { display: flex; flex-direction: column; gap: var(--gap-stack);
}

/* 자연어 입력은 문장을 받는 자리라 폭을 다 쓴다 — 버튼·옵션은 오른쪽에 붙는다 */
.dgp__check--wide[data-v-ba4bc8a2] { flex-wrap: nowrap;
}
.dgp__check--wide[data-v-ba4bc8a2] > :first-child { flex: 1 1 auto; min-width: 0;
}
.dgp__check--wide[data-v-ba4bc8a2] > :not(:first-child) { flex: 0 0 auto;
}
@media (max-width: 768px) {
.dgp__check--wide[data-v-ba4bc8a2] { flex-wrap: wrap;
}
}
.dgp__suggest[data-v-ba4bc8a2] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}

/* 「지급 판정이 아니다」 — 흘려보지 않게 경고색으로, 다만 한 줄이다. */
.dgp__notjudge[data-v-ba4bc8a2] {
  color: var(--ink-warning);
  white-space: normal;
}

.dgv[data-v-5ba89f6f] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* ⛔ 제목과 그 아래 줄 사이를 띄우지 않는다 — 8px 이 뜨면 두 줄이 남남처럼 보인다. */
  gap: 0;
  /* ⛔ 상세는 **제 여백을 갖지 않는다**(사용자 지시 2026-08-15). 목록 ｜ 상세 3단이 되면서
     이 여백이 칸 경계마다 들쭉날쭉하게 드러났다 — 특히 좌우를 바꾸면 더 두드러진다.
     여백은 안의 카드·머리줄이 제 것으로 갖고, 칸을 채우는 것은 벽에 붙는다. */
  padding: 0;
}

/* 재파싱이 오른쪽 끝으로 밀리고, 닫기는 그 뒤에 붙는다. */
/* 컨트롤 묶음 — 세 상세 공통 규격. 묶음에 auto — 구성이 달라져도 항상 오른쪽 한 덩어리. */
.dgv__crumb-acts[data-v-5ba89f6f] { display: inline-flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
.dgv__crumb__close[data-v-5ba89f6f] { margin-left: 0;
}
.dgv__crumb[data-v-5ba89f6f] {
  display: flex;
  /* ⛔ 글자 밑선(baseline)이 아니라 **가운데**로 맞춘다 — 약관 탭(`.mi-crumb`)·법령·수술이
     모두 center 라, 여기만 배지와 닫기 단추가 제목 밑선에 매달려 몇 픽셀 내려앉아 있었다. */
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  min-width: 0;
  /* ⛔ 상세 머리줄은 **약관 탭과 같은 규격**이다(사용자 지시 2026-08-15) — `.mi-crumb` 의 값 그대로.
     아래 경계선 · 판 배경 · 최소 높이(목록 머리줄과 같은 y) · 좌우 12px.
     ⚠️ 아래는 비운다: 바로 밑 줄(편집 바·툴바)이 제 여백을 갖는다. */
  /* ⚠️ 좌우는 **카드와 같은 16px** — 약관 탭은 12지만 이 화면들은 카드가 16이라
     제목만 4px 앞으로 튀어나와 보인다(실측 2026-08-15: 제목 12 · 카드 16). */
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-height: calc(var(--h-row) + 1px);
  font-size: var(--size-label);
  flex-shrink: 0;
  row-gap: var(--gap-glyph);
}

/* 제목 — 네 화면(약관·법령·질병재해·수술)이 **같은 크기·같은 굵기**다.
   ⛔ 16px(--font-base)로 두면 이 화면의 머리줄만 한 급 커 보인다(실측 2026-08-15). */
.dgv__title[data-v-5ba89f6f] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  min-width: 0;
}
/* 배지 줄 — **한 줄로 버티지 않는다.** 갈래·건수·검수·최종수정·작업본이 다 붙으면
   좁은 화면에서 머리줄이 판 밖으로 밀려난다(2026-08-23 실측 390px: 오른쪽 끝 393px).
   감싼 머리줄(.dgv__crumb)이 이미 wrap 이라, 이 줄만 접히면 그대로 아래로 흐른다. */
.dgv__meta[data-v-5ba89f6f] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-glyph); min-width: 0;
}

/* 불러오는 중·오류 — 세 상세가 같은 여백·같은 색이다. */
.dgv__state[data-v-5ba89f6f] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.dgv__state--error[data-v-5ba89f6f] { color: var(--ink-danger);
}

/* 다시 읽는 중 덮개 — 자리를 지킨 채 손만 못 대게 한다(원문 뷰어를 살려 두려는 것이 요점). */
.dgv__busy[data-v-5ba89f6f] {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  background: color-mix(in srgb, var(--bg-page) 62%, transparent);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.dgv__pane[data-v-5ba89f6f] { display: flex; flex: 1; min-height: 0; gap: var(--gap-stack);
}

/* 작업대 — 왼쪽 값 ｜ 오른쪽 약관 원문.
   ⚠️ 두 칸 다 **제 안에서** 스크롤한다. 바깥을 스크롤시키면 별표가 길어질 때 제외·서랍이
      화면 밖으로 밀려 없는 것처럼 보인다(실측 지적).
   ⚠️ 오른쪽은 높이를 스스로 잡아야 한다 — 안 그러면 원문 뷰어가 185px 로 찌그러진다(실측). */
/* ⛔ 약관 탭의 2단과 **같은 여백**이다(사용자 지적 2026-08-15).
   ⚠️ 칸 사이 간격을 두지 않는다 — 약관 탭은 분리대가 두 칸을 맞물리게 붙여 놓는데, 여기만
      12px 이 벌어져 있어 「뭔가 다르다」로 읽혔다. 오른쪽 바탕도 그쪽과 같은 것을 쓴다. */
.dgv__work[data-v-5ba89f6f] { position: relative; overflow: hidden; align-items: stretch; gap: 0;
}
.dgv__work-right[data-v-5ba89f6f] { background: var(--bg-field);
}
.dgv__work-left[data-v-5ba89f6f],
.dgv__work-right[data-v-5ba89f6f] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ⛔ **약관 탭과 같은 몸가짐이어야 한다**(사용자 지적 2026-08-15: 「좌우 여백과 상단 수정
   버튼영역의 테두리 등이 약관탭과 달라 영 다른 화면처럼 느껴진다」).
   약관 탭(`.mi-clause3__content`)의 규칙은 셋뿐이다 —
     ① 판 자체는 테두리도 여백도 없다(분리대에 붙는다)
     ② 머리줄(툴바·이름줄)은 **상자가 아니라 아래 경계선 하나**다
     ③ 여백은 **본문 안쪽**이 갖는다(좌우 같은 값)
   그래서 여기도 판에서 여백을 걷고 본문이 갖게 한다. */
/* ⛔ 칸 자체에는 여백을 주지 않는다(2026-08-15 되돌림).
   8px 을 줬더니 **오른쪽 스크롤바가 분리대에서 떨어져** 좌우가 달라 보였다(사용자 지적).
   여백은 안의 카드·머리줄이 제 것으로 갖는다 — 그래야 스크롤바가 분리대에 붙는다. */
.dgv__work-left[data-v-5ba89f6f] { gap: 0;
}

/* 정보 탭 — 좌우 두 칸.
   ⚠️ 탭 전체를 스크롤시키면 별표가 길어질 때 제외·신뢰도가 화면 밖으로 밀려 **없는 것처럼**
      보인다(실측 지적). 그래서 탭은 스크롤하지 않고 **각 칸이 제 안에서** 처리한다. */


/* ⛔ **스크롤은 하나뿐이다**(사용자 확정 2026-08-15). 종전에는 칸 전체 스크롤 + 패널마다
   제 스크롤이 겹쳐, 어느 것을 굴려야 하는지 매번 헷갈렸다. 이제 탭 본문 하나만 구른다. */
.dgv__work-body[data-v-5ba89f6f] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  /* ⛔ 여기서 또 여백을 주지 않는다 — **카드가 이미 제 여백(12/16px)을 갖는다.**
     둘을 겹쳤더니 글이 판에서 28px, 탭줄에서 20px 씩 밀려 앞·위가 뻥 떴다
     (사용자 지적 2026-08-15). 상자를 두르는 시뮬레이션 탭만 아래에서 따로 여백을 준다. */
  padding: 0;
}

/* 시뮬레이션 탭 — 여기는 판마다 상자라 **상자가 벽에 붙지 않게** 제 여백을 갖는다. */
.dgv__judge[data-v-5ba89f6f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-snug);
}

/* ⛔ 편집 바는 **상자가 아니라 줄**이다 — 약관 탭 머리줄(`.mi-clause3__pdfhead`)과 같은 값.
   둥근 테두리 상자를 얹으면 그 자리만 다른 화면에서 떠 온 것처럼 보인다. */
[data-v-5ba89f6f] .dgv__work-left [role="tablist"] { margin: 0;
}
[data-v-5ba89f6f] .dgb {
  border: 0;
  border-bottom: var(--line-strong);
  border-radius: 0;
  /* ⚠️ 좌우는 **제목·카드와 같은 선**(16px). 12px 이라 넉 픽셀씩 어긋나 보였다
     (사용자 지적 2026-08-15: 「이렇게 띄워져 있고」). */
  padding: var(--pad-row);
}

/* ⛔ 여기서 `> .dgp__panel` 로 벗기면 **직계 자식만** 맞아 「판정 신뢰도만 상자가 아닌」
   짝짝이가 된다(사용자 지적 2026-08-15 — 시뮬레이션 탭의 네 판 중 하나만 벗겨졌다).
   벗기는 기준은 자리(직계냐)가 아니라 **성격**이다: 탭이 곧 제목인 목록 판(`--bare`)만
   벗고, 시뮬레이션 탭처럼 여러 판이 나란히 서는 곳은 넷 다 상자를 그대로 둔다. */

/* 안쪽 패널은 제 높이를 그대로 갖고, 제 안에서 구르지 않는다. */
.dgv__work-body[data-v-5ba89f6f] >  .dgp__panel { flex: 0 0 auto; max-height: none;
}
.dgv__work-body[data-v-5ba89f6f] .dgp__panel-body { overflow-y: visible; max-height: none;
}

/* ⛔ **휠이 안 먹던 자리.** 목록(ListBody)의 안쪽 스크롤러는 `overscroll-behavior: contain` 이라
   제가 못 구를 때도 **부모로 굴림을 넘기지 않는다**(모바일에서 화면 전체가 딸려 올라가는 것을
   막으려고 넣은 규칙이다). 여기서는 구르는 주인이 바깥 칸이므로 넘기게 풀어 준다
   (실측 2026-08-15: 휠을 굴려도 scrollTop 0 → 0). */
.dgv__work-body[data-v-5ba89f6f] .list-body__scroller { overscroll-behavior: auto;
}
@media (max-width: 1024px) {
  /* 세로로 흐를 땐 높이가 무한하다 — 상한을 풀어 세 칸 모두 제 내용을 그대로 편다. */
.dgv__work-left > .dgp__panel[data-v-5ba89f6f] { flex: 0 0 auto; max-height: none;
}
.dgv__work-left > .dgp__panel > .dgp__panel-body[data-v-5ba89f6f] { overflow-y: visible;
}
.dgv__work-left > .dgv__grow[data-v-5ba89f6f] { flex: 0 0 auto; min-height: 320px;
}
}









/* 좌우 교체(⇄) — **자리만 바꾼다**(약관 탭 `.mi-split.swapped` 와 같은 방식).
   ⛔ 클래스는 붙는데 이 규칙이 없어 눌러도 아무 일이 없었다(실측 2026-08-15). */
.dgv__work.swapped .dgv__work-left[data-v-5ba89f6f] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.dgv__work.swapped[data-v-5ba89f6f] >  .vertical-split-resizer { order: 1;
}
.dgv__work.swapped .dgv__work-right[data-v-5ba89f6f] { order: 0;
}

.sie[data-v-923a171d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 32rem;
}
.sie__grid[data-v-923a171d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-stack);
}
.sie__field[data-v-923a171d] { display: flex; flex-direction: column; gap: var(--gap-glyph); flex: 1 1 12rem;
}
.sie__field--wide[data-v-923a171d] { flex: 2 1 20rem;
}
.sie__field--narrow[data-v-923a171d] { flex: 0 0 6rem;
}
.sie__label[data-v-923a171d] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.sie__row[data-v-923a171d] { display: flex; align-items: flex-start; gap: var(--gap-stack);
}
/* ⛔ 라벨은 **한 줄**이다. 6rem 이라 「적힌 코드로 붙는 몸통」이 두 줄로 접혀 그 줄만
   높이가 달라 보였다(사용자 지적 2026-08-14, 실측 38px = 2줄).
   가장 긴 라벨이 들어가는 폭을 잡고 nowrap 으로 못 박는다 — 접히면 바로 드러나게. */
.sie__row .sie__label[data-v-923a171d] {
  flex: 0 0 9.5rem;
  padding-top: var(--space-tight);
  white-space: nowrap;
}
.sie__codes[data-v-923a171d] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph); align-items: center;
}
.sie__muted[data-v-923a171d] { margin: 0; font-size: var(--size-label); color: var(--ink-muted);
}
.sie__lead[data-v-923a171d] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.sie__warn[data-v-923a171d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-warning);
}
/* 후보 목록 — 몇 개든 창 높이가 그대로여야 한다. */
.sie__list[data-v-923a171d] {
  height: 12rem;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
}
.sie__cand[data-v-923a171d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  cursor: pointer;
}
.sie__cand--picked[data-v-923a171d] { background: var(--bg-field);
}
.sie__cand-body[data-v-923a171d] { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.sie__cand-name[data-v-923a171d] { font-size: var(--size-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ✕ 를 배지 안에 겹쳐 넣는다 — 배지가 커지지 않게.
   ⛔ 값은 **분류표(diseaseGroupPanels.css `.dgp__codes`)와 한 벌**이다. 두 화면의 코드 배지가
      다르게 보이면 안 된다(사용자 지적 2026-08-14). 거기가 바뀌면 여기도 같이 고친다.
   ⚠️ `line-height` 를 빠뜨렸더니 배지가 16px 로 눌려(분류표 18px) 14px ✕ 가 꽉 차
      답답해 보였다 — 실측으로 잡은 자리다. */
.sie__codes .app-badge[data-v-923a171d] {
  position: relative;
  padding: var(--pad-badge);
  line-height: var(--line-snug);
}
.sie__codes .app-badge .sie__x[data-v-923a171d] {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  line-height: var(--line-none);
}
/* ⛔ `:deep()` 이 **반드시** 필요하다. 이 `<i>` 는 AppActionButton **안쪽** 이라
   scoped 속성(data-v-…)이 안 붙는다 — 그냥 쓰면 규칙이 통째로 빗나가고, 화면에는
   「✕ 만 유난히 크다」로만 보인다(실측 2026-08-14: 수술 14.3px / 분류표 11px).
   분류표 쪽이 멀쩡했던 이유는 그쪽 css 가 scoped 가 아니기 때문이다. */
.sie__codes .app-badge .sie__x[data-v-923a171d] i {
  font-size: var(--size-meta);   /* 11px — 배지 안에 앉는 아이콘 */
  line-height: var(--line-none);
  width: auto;
}
.sie__x--add[data-v-923a171d] { flex: 0 0 auto;
}

.snl[data-v-e384354c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  /* ⛔ 후보 개수에 따라 모달이 커졌다 작아졌다 하지 않게 — 가장 높은 조합 기준으로 못 박는다. */
  min-height: 26rem;
}
.snl__head[data-v-e384354c] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-inline);
}
.snl__name[data-v-e384354c] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.snl__cond[data-v-e384354c],
.snl__meta[data-v-e384354c],
.snl__muted[data-v-e384354c],
.snl__num[data-v-e384354c] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-style: normal;
}
.snl__warn[data-v-e384354c] {
  font-size: var(--size-meta);
  color: var(--ink-danger);
}
.snl__list[data-v-e384354c] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.snl__cand[data-v-e384354c] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  cursor: pointer;
}
.snl__cand--picked[data-v-e384354c] {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.snl__cand-body[data-v-e384354c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.snl__cand-top[data-v-e384354c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.snl__cand-name[data-v-e384354c] {
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.snl__cand-meta[data-v-e384354c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

/* 분류표(질병·재해) 상세와 같은 여백을 쓴다 — 종전에는 0 이라 브레드크럼·표가 화면 끝에
   딱 붙어 있었다(사용자 지적 2026-08-09). 두 화면이 같은 일을 하는 자리라 여백도 같아야 한다. */
.stv[data-v-77f34c66] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* ⛔ 머리줄과 그 아래 작업대 사이를 띄우지 않는다(질병·재해 `.dgv` 와 같은 값).
     8px 이 뜨면 **중앙분리대 위끝이 머리줄 아래선에서 떨어져** 두 칸이 머리줄에
     안 매달린 것처럼 보인다(사용자 지적 2026-08-15). */
  gap: 0;
  /* ⛔ 상세는 **제 여백을 갖지 않는다**(사용자 지시 2026-08-15). 목록 ｜ 상세 3단이 되면서
     이 여백이 칸 경계마다 들쭉날쭉하게 드러났다 — 특히 좌우를 바꾸면 더 두드러진다.
     여백은 안의 카드·머리줄이 제 것으로 갖고, 칸을 채우는 것은 벽에 붙는다. */
  padding: 0;
}

/* 컨트롤 묶음 — 세 상세 공통 규격. 묶음에 auto — 구성이 달라져도 항상 오른쪽 한 덩어리. */
.stv__crumb-acts[data-v-77f34c66] { display: inline-flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
/* 함께 보는 사람들 — 줄의 맨 오른쪽(버튼 자리가 사람 수에 밀리지 않게 뒤에 둔다). */
.stv__who[data-v-77f34c66] { margin-left: var(--gap-inline);
}
/* 탭은 툴바에 붙는다 — 한 덩어리로 읽히게(질병·재해와 같은 값). */
[data-v-77f34c66] .stv__work-left [role="tablist"] { margin: 0;
}
.stv__crumb__close[data-v-77f34c66] { margin-left: 0;
}
.stv__crumb[data-v-77f34c66] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  /* ⛔ 상세 머리줄은 **약관 탭과 같은 규격**이다(사용자 지시 2026-08-15) — `.mi-crumb` 의 값 그대로.
     아래 경계선 · 판 배경 · 최소 높이(목록 머리줄과 같은 y) · 좌우 12px.
     ⚠️ 아래는 비운다: 바로 밑 줄(편집 바·툴바)이 제 여백을 갖는다. */
  /* ⚠️ 좌우는 **카드와 같은 16px** — 약관 탭은 12지만 이 화면들은 카드가 16이라
     제목만 4px 앞으로 튀어나와 보인다(실측 2026-08-15: 제목 12 · 카드 16). */
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-height: calc(var(--h-row) + 1px);
  font-size: var(--size-label);
  flex-shrink: 0;
  row-gap: var(--gap-glyph);
}

/* 제목 — 세 상세(질병·재해 / 법령 / 수술)와 약관 탭이 **같은 크기·같은 굵기**다. */
.stv__title[data-v-77f34c66] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  margin: 0;
  color: var(--ink-primary);
}

/* 배지 줄 — 질병·재해 상세와 **같은 규칙**: 좁으면 접혀 내려간다(한 줄로 버티면 판 밖으로 민다). */
.stv__meta[data-v-77f34c66] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  min-width: 0;
}

/* 작업대 — 왼쪽 항목표 ｜ 오른쪽 약관 원문. 질병·재해 상세와 **같은 규칙**이다.
   ⚠️ 오른쪽은 높이를 스스로 잡아야 한다 — 안 잡으면 원문 뷰어가 찌그러진다(질병 쪽 실측). */
/* ⚠️ `.stv__pane` 이 세로(column)라 **뒤에 오는 그 규칙이 이긴다** — 두 칸이 위아래로
   쌓여 원문이 75px 로 눌렸다(실측). 클래스 둘을 함께 짚어 순서와 무관하게 만든다. */
.stv__pane.stv__work[data-v-77f34c66] { position: relative; flex-direction: row; gap: 0; overflow: hidden; align-items: stretch;
}

/* 약관 탭·분류표 상세와 같은 바탕 — 세 화면의 원문 칸이 달라 보이지 않게. */
.stv__work-right[data-v-77f34c66] { background: var(--bg-field);
}
.stv__work-left[data-v-77f34c66],
.stv__work-right[data-v-77f34c66] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 왼쪽(항목표)은 제 여백을 갖는다 — 분리대에 딱 붙으면 답답하다(질병 상세와 같은 값). */
/* 판은 제 간격을 갖지 않는다 — 안의 줄들이 각자 여백을 갖는다(질병·재해와 같은 값). */
.stv__work-left[data-v-77f34c66] { gap: 0;
}

/* 질병 상세와 같은 이유 — 목록 안쪽 스크롤러가 굴림을 부모로 넘기게 한다. */
.stv__work-left[data-v-77f34c66] .list-body__scroller { overscroll-behavior: auto;
}
.stv__pane[data-v-77f34c66] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* ⛔ 위 여백을 주지 않는다 — 중앙분리대 위끝이 머리줄 아래선에 **닿아야** 한다
     (사용자 지적 2026-08-15). 질병·재해 상세(`.dgv__pane`)에는 이 여백이 없다. */
}
.stv__toolbar[data-v-77f34c66] {
  /* ⛔ 질병·재해의 편집 줄(`.dgb`)과 **같은 값**이다(사용자 지적 2026-08-15: 「조금씩 다른 데가
     많다」). 눈대중 말고 그 값을 그대로 옮긴다 — 여백 8/16 · 사이 8/12 · 아래선 1px · 판 배경. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-stack);
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}

/* 단추 묶음 — 질병·재해 `.dgb__acts` 와 같은 값(오른쪽 끝, 단추 사이 8px). */
.stv__acts[data-v-77f34c66] { display: inline-flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
.stv__item[data-v-77f34c66] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.stv__item-cond[data-v-77f34c66] {
  font-style: normal;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.stv__codes[data-v-77f34c66] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
  flex-wrap: wrap;
}
.stv__dash[data-v-77f34c66] {
  color: var(--ink-muted);
}

/* 불러오는 중·오류 — 세 상세가 같은 여백·같은 색이다. */
.stv__state[data-v-77f34c66] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.stv__state--error[data-v-77f34c66] {
  color: var(--ink-danger);
}

/* 다시 읽는 중 덮개 — 질병·재해 상세(.dgv__busy)와 같은 규격. */
.stv__busy[data-v-77f34c66] {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  background: color-mix(in srgb, var(--bg-page) 62%, transparent);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}

/* 고치는 중 코드 배지 — ✕ 를 안에 겹쳐 넣어 **배지가 커지지 않게**(분류표와 같은 값). */
.stv__codes--edit .app-badge[data-v-77f34c66] {
  position: relative;
  padding: var(--pad-badge);
  line-height: var(--line-snug);
}
.stv__codes--edit .app-badge .stv__x[data-v-77f34c66] {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  line-height: var(--line-none);
}
.stv__codes--edit .app-badge .stv__x i[data-v-77f34c66] {
  font-size: var(--icon-marker);   /* 11px — 배지 안에 앉는 아이콘 */
  line-height: var(--line-none);
  width: auto;
}
/* 누를 자리는 아이콘보다 넓게 — 작은 ✕ 를 정확히 겨누지 않아도 되게. */
.stv__codes--edit .app-badge .stv__x[data-v-77f34c66]::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}
/* 고칠 수 있다는 표시는 **글자 밑선**으로만 — 자리를 차지하지 않는다. */
.stv__editing[data-v-77f34c66] {
  outline: none;
  box-shadow: 0 var(--line-w) 0 0 var(--ink-brand);
  white-space: pre-wrap;
  cursor: text;
  min-width: 6ch;
  display: inline-block;
}
.stv__more[data-v-77f34c66] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

/* 고치는 중 — 한 칸에 입력 두 개(이름+조건, 코드+분류번호)를 세로로 쌓는다. */
.stv__edit-name[data-v-77f34c66] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.stv__ops[data-v-77f34c66] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.stv__editfoot[data-v-77f34c66] {
  display: flex;
  padding-top: var(--space-tight);
}
.stv__editable[data-v-77f34c66] { cursor: text;
}
.stv__err[data-v-77f34c66] { font-size: var(--size-label); color: var(--ink-danger);
}
.stv__hlist[data-v-77f34c66] { list-style: none; margin: 0; padding: 0;
}
.stv__hrow[data-v-77f34c66] {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) 0;
  border-bottom: var(--line-strong);
  font-size: var(--size-label);
}
.stv__hwhen[data-v-77f34c66] { color: var(--ink-secondary); white-space: nowrap;
}

/* 좌우 교체(⇄) — **자리만 바꾼다**(약관 탭 `.mi-split.swapped` 와 같은 방식).
   ⛔ 클래스는 붙는데 이 규칙이 없어 눌러도 아무 일이 없었다(실측 2026-08-15). */
.stv__work.swapped .stv__work-left[data-v-77f34c66] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.stv__work.swapped[data-v-77f34c66] >  .vertical-split-resizer { order: 1;
}
.stv__work.swapped .stv__work-right[data-v-77f34c66] { order: 0;
}

/* ══ 카드 — 좁은 칸에서는 표가 아니라 카드로 선다 ══
   ⛔ 곁말 줄에 「번호 : 0 · 구분 : — · 적힌 코드 : — · 실제 코드 : —」가 늘어서 있었다
      (사용자 지적 2026-08-15 「수술 상세 카드가 좀 후졌다」). 값이 없는 항목은 라벨째 감춘다 —
      「없다」는 표에서 「—」로 말하면 되고, 카드에서는 **있는 것만** 보이는 편이 읽힌다. */
.stv__work-left[data-v-77f34c66] .list-body__card-metaitem:has(.stv__dash) { display: none;
}
/* 코드 배지는 표에서만 가운데 — 카드에서는 왼쪽에서부터 이어 붙는다. */
.stv__work-left[data-v-77f34c66] .list-body__card-metavalue .stv__codes { justify-content: flex-start; display: inline-flex;
}
/* 부제(구분)는 값이 있을 때만 자리를 갖는다 — 빈 자리의 「—」는 카드에서 접는다. */
.stv__work-left[data-v-77f34c66] .list-body__card-subtitle .stv__dash--tableonly { display: none;
}

/* 짚기 — 질병·재해의 코드 배지와 같은 톤(경고색 바탕 + 손가락 커서). */
.stv__item--pick[data-v-77f34c66] { cursor: pointer;
}
.stv__item--on[data-v-77f34c66] { background: var(--bg-warning-soft); border-radius: var(--radius-badge);
}
/* 「적힌 코드」 배지도 같은 손짓으로 짚힌다 — 원문에 그 글자가 있기 때문이다. */
.stv__code--pick[data-v-77f34c66] { cursor: pointer;
}
.stv__code--on[data-v-77f34c66] { outline: var(--focus-ring-width) solid var(--ink-warning);
}

/* 키워드 칸 — 리스트 바로 위, 카드와 같은 좌우 여백(질병·재해와 같은 값). */
/* 찾기 줄 — 질병·재해의 `.dgp__find` 와 같은 값(위아래 8 · 좌우 16). */
.stv__find[data-v-77f34c66] { display: flex; gap: var(--gap-inline); padding: var(--pad-row);
}
/* ⛔ 남는 자리는 **찾기 상자**가 갖는다. 상태 고르개가 고정 폭으로 앞자리를 차지하면
   판이 좁을 때(3단이라 412px) 찾기 상자가 152px 까지 눌려 글자가 반도 안 보인다
   (사용자 지적 2026-08-15: 「항목 상태의 너비가 너무 넓다」). 실측: 찾기 152 → 208px. */
.stv__find > .app-search[data-v-77f34c66] { flex: 1 1 auto; min-width: 0;
}
.stv__find > .multi-select-wrapper[data-v-77f34c66] { flex: 0 0 auto;
}
/* 시뮬레이션 — 판 안에서 제 여백을 갖는다. */
.stv__sim[data-v-77f34c66] { display: flex; flex-direction: column; gap: var(--gap-inline); padding: var(--space-cozy) var(--space-roomy); overflow-y: auto;
}
.stv__sim-note[data-v-77f34c66] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.stv__sim-none[data-v-77f34c66] { font-size: var(--size-label); color: var(--ink-secondary);
}
.stv__sim-list[data-v-77f34c66] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.stv__sim-row[data-v-77f34c66] { display: flex; flex-direction: column; gap: var(--gap-glyph); padding-bottom: var(--space-snug); border-bottom: var(--line-strong);
}
.stv__sim-name[data-v-77f34c66] { font-size: var(--size-label); color: var(--ink-primary);
}
/* 조건은 이름과 붙어 읽히면 한 낱말처럼 보인다(「요추천자뇌척수압측정포함」) — 한 칸 띄운다. */
.stv__sim-name .stv__item-cond[data-v-77f34c66] { margin-left: var(--gap-glyph);
}
.stv__sim-vals[data-v-77f34c66] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph);
}

/* 안내 문구 — 질병·재해의 `.dgb__lead--idle` 과 **같은 값**이다(사용자 지시 2026-08-15).
   ⛔ 파란 글씨(primary)로 두지 않는다 — 그쪽은 「고치는 중」일 때만 쓰는 색이라,
      늘 파랗게 켜 두면 수술 쪽만 편집 중인 것처럼 보였다. 곁말은 곁말 색으로. */
.stv__lead[data-v-77f34c66] {
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-body);
  color: var(--ink-secondary);
}

.mlp[data-v-24e836d2] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 되돌아가는 줄 — 판 탭 줄과 같은 골격(원본: .mcp__tabs). */
.mlp__bar[data-v-24e836d2] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
}
.mlp__sep[data-v-24e836d2] { color: var(--ink-muted);
}
.mlp__name[data-v-24e836d2] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.mlp__body[data-v-24e836d2] { flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* 상세 판은 제 화면 골격(제목줄·작업대)을 그대로 들고 온다 — 남는 높이를 채우게만 해 준다. */
.mlp__body[data-v-24e836d2] >  * { flex: 1; min-height: 0;
}

.mcp[data-v-514e5027] {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}
.mcp__pane[data-v-514e5027] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mcp__content[data-v-514e5027] { flex: 1;
}
/* 왼쪽 판의 탭 켜 — 부품을 한 단 들어가면 감춰진다(자리는 그대로 남는다). */
.mcp__stack[data-v-514e5027] { flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.mcp__pdf[data-v-514e5027] { flex: 1;
}

/* 좌우 교체(⇄) — **자리만 바꾼다**(다른 화면의 `.stv__work.swapped` 와 같은 방식).
   ⚠️ **직계 자식만** — `:deep()` 을 그냥 쓰면 안쪽(내용 트리 안) 분리대까지 잡아
      그 버튼을 엉뚱한 자리로 밀어 버린다. */
.mcp.swapped .mcp__content[data-v-514e5027] { order: 2;
}
.mcp.swapped[data-v-514e5027] >  .vertical-split-resizer { order: 1;
}
.mcp.swapped .mcp__pdf[data-v-514e5027] { order: 0;
}

/* 판 탭 줄 — [팩터값 ｜ 약관 ｜ 추출] + 재추출 + 함께 보는 사람. */
.mcp__tabs[data-v-514e5027] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug) 0;
  border-bottom: var(--line-strong);
}
/* ⛔ 선은 감싼 칸이 하나만 긋는다 — TabNav 의 밑줄과 겹쳐 굵어 보였다. */
.mcp__tabs[data-v-514e5027] .tab-nav { border-bottom: none;
}
/* ⛔ 오른쪽 정렬은 **빈 칸**이 맡는다 — `margin-left:auto` 는 앞엣것 하나만 밀어서,
   오른쪽에 둘 이상이 서면 뒤엣것이 가운데로 끌려온다(편집자 아바타가 그랬다). */
.mcp__tabs-gap[data-v-514e5027] { flex: 1 1 auto; min-width: 0;
}
.mcp__collab[data-v-514e5027] { flex-shrink: 0;
}

/* 근거 짚기 안내 막대 — 원본: .content-tree__ref-pick-bar (같은 값·같은 자리).
   다른 점: 칩이 줄을 넘칠 수 있어 wrap 을 준다. */
.mcp__spot-bar[data-v-514e5027] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-brand-soft);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.mcp__spot-icon[data-v-514e5027] { color: var(--ink-brand);
}
.mcp__spot-text[data-v-514e5027] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.mcp__spot-hint[data-v-514e5027] { color: var(--ink-secondary); margin-left: var(--space-tight);
}
/* 뒤에 붙는 ✕ — 「누르면 이 근거가 빠진다」를 알리는 표시다(따로 누르는 단추가 아니다). */
.mcp__spot-x[data-v-514e5027] { margin-left: var(--space-tight); opacity: 0.65;
}
.mcp__tree[data-v-514e5027] { flex: 1; min-height: 0;
}
.mcp__side-tab[data-v-514e5027] { flex: 1; min-height: 0;
}
.mcp__state[data-v-514e5027] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.mcp__nopdf[data-v-514e5027] { padding: var(--pad-card); text-align: center;
}
.mcp__warn[data-v-514e5027] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  color: var(--ink-warning);
  font-size: var(--size-label);
}
.mcp__warntext[data-v-514e5027] { min-width: 0;
}
.mcp__iframe[data-v-514e5027] {
  flex: 1;
  width: 100%;
  border: 0;
  min-height: 0;
}
.mcp__confirm[data-v-514e5027] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--space-cozy);
}
.mcp__confirm-lead[data-v-514e5027] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.mcp__confirm-actions[data-v-514e5027] {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
}

/* ⛔ 안쪽 여백을 다시 주지 않는다 — 말풍선(AppPopover)이 이미 안쪽을 띄운다.
   여기서 한 번 더 주면 28px 이 되어 한 줄짜리 물음이 큰 판처럼 보인다(사용자 지적 2026-08-29). */
.crb__confirm[data-v-2087cb11] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.crb__lead[data-v-2087cb11] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  /* 한글은 낱말 가운데서 꺾지 않는다. */
  word-break: keep-all;
}
.crb__actions[data-v-2087cb11] {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
}

.law-link[data-v-4cebd529] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.law-link__source[data-v-4cebd529] {
  background: var(--bg-field);
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
}
.law-link__source-label[data-v-4cebd529] {
  display: block;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.law-link__source-text[data-v-4cebd529] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  word-break: break-all;
}
.law-link__field[data-v-4cebd529] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.law-link__field-label[data-v-4cebd529] { font-size: var(--size-meta); color: var(--ink-secondary);
}

/* ⛔ 결과 자리는 **늘 같은 높이**다 — 찾는 말에 따라 결과 수가 바뀌어도 상자가 움직이면 안 된다.
   실측 2026-09-04(창 1600×1000): 결과 없음 271px · 「의료법」 420px · 「보험」 468px
   → 판이 413↔610 으로 **197px** 들썩였다.
   ⛔ 목록만 고정하면 모자란다 — 「찾는 중」·「결과 없음」도 같은 자리를 차지해야 한다.
   값은 원래 목록이 쓰던 260px 그대로다(새 값을 만들지 않는다). */
.law-link__state[data-v-4cebd529],
.law-link__list[data-v-4cebd529] {
  height: 16.25rem;  /* css-ignore: 원래 목록이 쓰던 260px — 결과 자리의 고정 높이 */
}
.law-link__state[data-v-4cebd529] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  padding: var(--space-cozy);
  text-align: center;
}
.law-link__list[data-v-4cebd529] {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.law-link__item[data-v-4cebd529] {
  width: 100%;
  justify-content: flex-start;
  gap: var(--gap-inline);
}
.law-link__item--on[data-v-4cebd529] {
  background: color-mix(in srgb, var(--bg-brand-vivid) 12%, transparent);
  outline: var(--focus-ring-width) solid var(--ink-brand);
}
.law-link__item-name[data-v-4cebd529] { flex: 1; min-width: 0; text-align: left;
}

.lsd[data-v-d6baca7c] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* ⛔ 머리줄·탭줄과 그 아래 작업대 사이를 띄우지 않는다(질병·재해 `.dgv` 와 같은 값).
     8px 이 뜨면 **중앙분리대 위끝이 아래선에서 떨어져** 두 칸이 매달려 있지 않아 보인다
     (사용자 지적 2026-08-15). 여백은 안의 카드가 제 것으로 갖는다(아래 `.lsd__info`). */
  gap: 0;
  /* ⛔ 상세는 **제 여백을 갖지 않는다**(사용자 지시 2026-08-15). 목록 ｜ 상세 3단이 되면서
     이 여백이 칸 경계마다 들쭉날쭉하게 드러났다 — 특히 좌우를 바꾸면 더 두드러진다.
     여백은 안의 카드·머리줄이 제 것으로 갖고, 칸을 채우는 것은 벽에 붙는다. */
  padding: 0;
}

/* 컨트롤 묶음 — 세 상세 공통 규격. 개별 버튼이 아니라 **묶음**에 auto 를 걸어
   구성(재파싱/검수 ToDo 유무)이 달라져도 항상 한 덩어리로 오른쪽에 선다. */
.lsd__crumb-acts[data-v-d6baca7c] { display: inline-flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
.lsd__crumb[data-v-d6baca7c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  /* ⛔ 상세 머리줄은 **약관 탭과 같은 규격**이다(사용자 지시 2026-08-15) — `.mi-crumb` 의 값 그대로.
     아래 경계선 · 판 배경 · 최소 높이(목록 머리줄과 같은 y) · 좌우 12px.
     ⚠️ 아래는 비운다: 바로 밑 줄(편집 바·툴바)이 제 여백을 갖는다. */
  /* ⚠️ 좌우는 **카드와 같은 16px** — 약관 탭은 12지만 이 화면들은 카드가 16이라
     제목만 4px 앞으로 튀어나와 보인다(실측 2026-08-15: 제목 12 · 카드 16). */
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-height: calc(var(--h-row) + 1px);
  font-size: var(--size-label);
  flex-shrink: 0;
  row-gap: var(--gap-glyph);
}

/* 제목 — 네 화면(약관·법령·질병재해·수술)이 같은 크기·같은 굵기다. */
.lsd__title[data-v-d6baca7c] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
/* 배지 줄 — 질병·재해 상세와 **같은 규칙**: 좁으면 접혀 내려간다(한 줄로 버티면 판 밖으로 민다). */
.lsd__meta[data-v-d6baca7c] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-glyph); min-width: 0;
}

/* 불러오는 중·오류 — 세 상세가 같은 여백·같은 색이다. */
.lsd__state[data-v-d6baca7c] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.lsd__state--error[data-v-d6baca7c] { color: var(--ink-danger);
}

/* 다시 읽는 중 덮개 — 질병·재해 상세(.dgv__busy)와 같은 규격. */
.lsd__busy[data-v-d6baca7c] {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  background: color-mix(in srgb, var(--bg-page) 62%, transparent);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.lsd__info[data-v-d6baca7c] {
  /* 판을 붙여 놓은 만큼(gap 0) **카드가 제 여백을 갖는다** — 안 그러면 탭줄에 딱 붙는다. */
  margin: var(--gap-inline);
  display: flex;
  /* 문장은 왼쪽, 버튼은 오른쪽 — 한 줄로 둔다(사용자 요청 2026-08-06).
     세로로 쌓으면 버튼이 문장 밑에 붙어 머리 영역이 두 배로 두꺼워진다. */
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap-stack);
  padding: var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}
.lsd__label[data-v-d6baca7c] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
  margin-right: var(--gap-inline);
}
.lsd__sample[data-v-d6baca7c] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.lsd__hints[data-v-d6baca7c] { display: flex; align-items: center; gap: var(--gap-glyph); flex-wrap: wrap;
}
.lsd__infomain[data-v-d6baca7c] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.lsd__actions[data-v-d6baca7c] { flex: 0 0 auto; display: flex; gap: var(--gap-inline);
}

/* 좁으면 한 줄에 다 못 선다 — 그때만 아래로 내린다 */
@media (max-width: 768px) {
.lsd__info[data-v-d6baca7c] { flex-direction: column;
}
.lsd__actions[data-v-d6baca7c] { align-self: flex-start;
}
}

/* ⚠️ 칸 사이 간격을 두지 않는다 — 분리대가 두 칸을 맞물리게 붙여 놓는다(질병·재해와 같은 값). */
.lsd__split[data-v-d6baca7c] { position: relative; display: flex; flex: 1 1 auto; min-height: 0; gap: 0; overflow: hidden; align-items: stretch;
}
.lsd__split-left[data-v-d6baca7c],
.lsd__split-right[data-v-d6baca7c] { display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
/* 약관 탭·다른 상세와 같은 바탕 — 네 화면의 원문 칸이 달라 보이지 않게. */
.lsd__split-right[data-v-d6baca7c] { background: var(--bg-page);
}
/* 왼쪽 목록을 세우지 않는 자리(번들 문맥) — 남은 칸 하나가 높이까지 다 가져가야 한다.
   (분류표 상세와 같은 이유. 폭만 늘리면 원문 뷰어가 찌그러진다) */
.lsd__split--solo[data-v-d6baca7c] { height: 100%;
}
.lsd__split--solo .lsd__split-right[data-v-d6baca7c] { flex: 1 1 auto; height: 100%;
}
.lsd__split-left[data-v-d6baca7c] { flex: 1 1 auto;
}

/* 목록 머리줄 — 질병·재해 편집 바(`.dgb`)·수술 툴바(`.stv__toolbar`)와 **같은 값**이다.
   여백 8/16 · 사이 8/12 · 아래선 1px · 판 배경. 상자가 아니라 **줄**이다. */
.lsd__toolbar[data-v-d6baca7c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline) var(--gap-stack);
  flex-wrap: wrap;
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}

/* 조회 칸이 남는 폭을 갖는다 — 머리줄에 제목이 없어졌으므로(키워드 조회 하나) */
.lsd__search[data-v-d6baca7c] { flex: 1 1 auto; min-width: 0;
}
.lsd__company[data-v-d6baca7c] { display: flex; align-items: center; gap: var(--gap-glyph); min-width: 0;
}
.lsd__line[data-v-d6baca7c] { color: var(--ink-secondary); font-size: var(--size-meta);
}

/* 정보 탭 — 법령 설명(팝업 본문)을 그대로 끼운다 */
.lsd__law[data-v-d6baca7c] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.lsd__state--sm[data-v-d6baca7c] { padding: var(--space-cozy); font-size: var(--size-meta);
}

/* 좌우 교체(⇄) — 자리만 바꾼다(다른 상세·약관 탭과 같은 방식).
   ⛔ 클래스는 붙는데 규칙이 없어 눌러도 아무 일이 없었다(실측 2026-08-15). */
.lsd__split.swapped .lsd__split-left[data-v-d6baca7c] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.lsd__split.swapped[data-v-d6baca7c] >  .vertical-split-resizer { order: 1;
}
.lsd__split.swapped .lsd__split-right[data-v-d6baca7c] { order: 0;
}

.mcv[data-v-52ee2913] {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mcv__bar[data-v-52ee2913] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
}
.mcv__bar-text[data-v-52ee2913] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  /* 제목 칸이 남는 자리를 다 먹는다 — 그래야 오른쪽 단추가 **끝**에 선다
     (부품정보의 mi-content-bar 와 같은 방식). */
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.mcv__state[data-v-52ee2913] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
}
.mcv__state--error[data-v-52ee2913] { color: var(--ink-danger);
}

.todo-work-type-general[data-v-21de0b90] {
  padding: var(--space-band);
}
.todo-work-type__header[data-v-21de0b90] {
  margin-bottom: var(--gap-band);
  padding-bottom: var(--space-roomy);
  border-bottom: var(--line-strong);
}
.todo-work-type__title[data-v-21de0b90] {
  margin: 0 0 var(--gap-inline) 0;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.todo-work-type__title i[data-v-21de0b90] {
  color: var(--ink-brand);
}
.todo-work-type__description[data-v-21de0b90] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.todo-work-type__body[data-v-21de0b90] {
  color: var(--ink-primary);
}
.todo-work-form[data-v-21de0b90] {
  padding: var(--pad-card);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: var(--line-strong);
}

/* 공통 골격(help-tab / body / toc / section / text / list / card / back-top)은
   AppHelpPanel 이 제공. 여기서는 이 화면 고유의 단축키 표·code 인라인만 유지. */

/* 테이블 */
.help-tab__table[data-v-4bf4a927] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-meta);
  margin: var(--gap-inline) 0;
}
.help-tab__table th[data-v-4bf4a927],
.help-tab__table td[data-v-4bf4a927] {
  padding: var(--space-snug) var(--space-snug);
  border: var(--line-strong);
  text-align: left;
}
.help-tab__table th[data-v-4bf4a927] {
  background: var(--bg-field);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
}
.help-tab__table td[data-v-4bf4a927] {
  color: var(--ink-secondary);
}
.help-tab__table kbd[data-v-4bf4a927] {
  display: inline-block;
  padding: var(--space-tight) var(--space-snug);
  font-size: var(--size-meta);
  font-family: inherit;
  color: var(--ink-primary);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  box-shadow: 0 var(--line-w) 0 var(--line-color);
}

/* v-html 인라인 코드 (이 화면 고유) */
.help-tab__text[data-v-4bf4a927] code,
.help-tab__list[data-v-4bf4a927] code {
  padding: var(--space-tight) var(--space-tight);
  font-size: var(--size-meta);
  font-family: var(--font-mono);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
}

.todo-work-type-crawling[data-v-06e98942] {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.scraper-editor-container[data-v-06e98942] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.todo-work-form[data-v-06e98942] {
  padding: var(--pad-card);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: var(--line-strong);
}
.todo-work-form--loading[data-v-06e98942],
.todo-work-form--error[data-v-06e98942],
.todo-work-form--no-company[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex: 1 1 0;
  min-height: 0;
  gap: var(--gap-group);
}
.todo-work-form--error[data-v-06e98942] {
  border-radius: 0;
}
.loading-container[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
  color: var(--ink-secondary);
}
.loading-container i[data-v-06e98942] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
}
.error-message[data-v-06e98942] {
  color: var(--ink-danger);
  font-size: var(--size-body);
  margin: 0;
}
.action-button[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  border-radius: var(--radius-control);
  border: var(--line-w) solid transparent;
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition: all var(--motion-base) ease;
}
.action-button--primary[data-v-06e98942] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.action-button--primary[data-v-06e98942]:hover:not(:disabled) {
  filter: brightness(1.1);
}
.action-button--primary[data-v-06e98942]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-button--secondary[data-v-06e98942] {
  background: var(--bg-page);
  color: var(--ink-primary);
  border-color: var(--line-color);
}
.action-button--secondary[data-v-06e98942]:hover:not(:disabled) {
  background: var(--bg-page);
  border-color: var(--ink-brand);
}
.action-button--secondary[data-v-06e98942]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scraper-editor-header[data-v-06e98942] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-group);
  padding-bottom: var(--space-roomy);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
  gap: var(--gap-group);
}
.scraper-editor-info[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-primary);
}
.company-code-label[data-v-06e98942] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}
.company-code-value[data-v-06e98942] {
  font-size: var(--size-body);
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  border: var(--line-strong);
}
.scraper-editor-actions[data-v-06e98942] {
  display: flex;
  gap: var(--gap-inline);
}
.tabs-container[data-v-06e98942] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.tabs-header[data-v-06e98942] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
  overflow: visible;
  padding-right: var(--space-cozy);
  padding-bottom: var(--space-snug); /* 2줄일 때 하단 여백 추가 */
}
.tabs-header-left[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap; /* 너비가 부족하면 2줄로 표시 */
  overflow-x: visible; /* 스크롤 대신 줄바꿈 사용 */
}
.tabs-header-right[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
  padding-left: var(--space-cozy);
}
.tab-btn[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  background: transparent;
  border: none;
  border-bottom: var(--line-w-thick) solid transparent;
  cursor: pointer;
  transition: all var(--motion-base);
  white-space: nowrap;
  position: relative;
}
.tab-btn[data-v-06e98942]:hover {
  color: var(--ink-primary);
  background: var(--bg-hover);
}
.tab-btn.active[data-v-06e98942] {
  color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
  background: transparent;
}
.tab-count[data-v-06e98942] {
  display: inline-block;
  font-size: var(--size-meta);
  opacity: 0.8;
}
.tab-progress[data-v-06e98942] {
  font-size: var(--size-meta);
  margin-left: var(--gap-glyph);
  font-weight: var(--weight-title);
  opacity: 0.9;
}

/* 모바일 스타일 */
@media (max-width: 768px) {
.tabs-header-left[data-v-06e98942] {
    gap: var(--gap-inline); /* 모바일에서 간격 줄이기 */
}
.tab-btn[data-v-06e98942] {
    padding: var(--pad-panel); /* 모바일에서 패딩 줄이기 */
    font-size: var(--size-label); /* 폰트 크기 약간 줄이기 */
}
.tabs-header-right[data-v-06e98942] {
    padding-left: var(--space-snug); /* 모바일에서 패딩 줄이기 */
}
}
.tabs-content[data-v-06e98942] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.tab-panel[data-v-06e98942] {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tab-panel.active[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tab-placeholder[data-v-06e98942] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.tab-panel-data-wrapper[data-v-06e98942] {
  width: 100%;
  height: 100%;
  padding: var(--pad-card);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.data-tab-header[data-v-06e98942] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-group);
  flex-shrink: 0;
}
.data-tab-header-message[data-v-06e98942] {
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.data-tab-footer[data-v-06e98942] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--gap-group);
  flex-shrink: 0;
}
.data-tab-footer-message[data-v-06e98942] {
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.delete-test-data-button[data-v-06e98942] {
  white-space: nowrap;
  flex-shrink: 0;
}
.vertical-split-container[data-v-06e98942] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}
.vertical-split-container.swapped[data-v-06e98942] {
  flex-direction: row-reverse;
}

/* ═══ 데스크톱 좌측 패널 (데이터/AI/배포/도움말) ═══ */
.crawling-left-pane[data-v-06e98942] {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.crawling-left-tabs__content[data-v-06e98942] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ═══ 데스크톱 우측 패널 (코드편집기) ═══ */
.crawling-right-pane[data-v-06e98942] {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.crawling-right-pane__title[data-v-06e98942] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-height: var(--h-control-md);
}
.crawling-right-pane__title-left[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.crawling-right-pane__title-left i[data-v-06e98942] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.crawling-right-pane__title-users[data-v-06e98942] {
  display: flex;
  align-items: center;
}

/* 분리대 라벨 (compact 모드) */
.vertical-split-resizer-label[data-v-06e98942] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  pointer-events: none;
  letter-spacing: 0.5px;
}
.resizer-icon-vertical[data-v-06e98942] {
  transform: rotate(90deg);
}

/* 드래그 중 iframe/PDF 가 마우스 이벤트 가로채지 못하게 깔리는 overlay.
   z-index 규칙은 tokens.css 의 --z-resize-overlay 주석 참고. */
.resize-overlay[data-v-06e98942] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.split-container {
&[data-v-06e98942] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  }
&.swapped[data-v-06e98942] {
    flex-direction: column-reverse;
}
}
.source-editor-pane[data-v-06e98942] {
  flex-shrink: 0;
  overflow: hidden;
  min-height: 100px;
  position: relative;
}
.scraper-editor-wrapper[data-v-06e98942] {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}
.split-resizer[data-v-06e98942] {
  flex-shrink: 0;
  height: 8px;
  background: var(--bg-field);
  cursor: row-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-base), opacity var(--motion-base), height var(--motion-base);
  z-index: 10;
  overflow: visible;
}
.split-resizer.compact[data-v-06e98942] {
  opacity: 1;
  cursor: pointer;
  height: var(--h-control-md);
  background: var(--bg-float);
  border-top: var(--line-strong);
  border-bottom: var(--line-strong);
}
html[data-theme='light'] .split-resizer.compact[data-v-06e98942],
body[data-theme='light'] .split-resizer.compact[data-v-06e98942] {
  background: var(--bg-page);
}
html[data-theme='dark'] .split-resizer.compact[data-v-06e98942],
body[data-theme='dark'] .split-resizer.compact[data-v-06e98942] {
  background: var(--bg-field);
  border-top: var(--line-strong);
  border-bottom: var(--line-strong);
}
.split-resizer-message[data-v-06e98942] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  margin-left: var(--gap-page); /* 버튼 영역을 피하기 위해 오른쪽으로 이동 */
}
.split-resizer[data-v-06e98942]:hover:not(.compact) {
  background: var(--bg-brand-vivid);
}
.split-resizer.compact[data-v-06e98942]:hover {
  opacity: 1;
  background: var(--bg-hover);
  border-top-color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
}
html[data-theme='dark'] .split-resizer.compact[data-v-06e98942]:hover,
body[data-theme='dark'] .split-resizer.compact[data-v-06e98942]:hover {
  background: var(--bg-hover);
  border-top-color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
}
.split-resizer.resizing[data-v-06e98942] {
  background: var(--bg-brand-vivid);
}
.split-resizer-handle[data-v-06e98942] {
  width: 40px;
  height: 3px;
  background: var(--ink-secondary);
  border-radius: var(--radius-badge);
  opacity: 0.6;
  transition: opacity var(--motion-base);
}
.split-resizer:hover .split-resizer-handle[data-v-06e98942],
.split-resizer.resizing .split-resizer-handle[data-v-06e98942] {
  opacity: 1;
}
.split-resizer-controls[data-v-06e98942] {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  z-index: var(--z-pane-control);
  pointer-events: auto;
  overflow: visible;
}
.resizer-toggle-btn[data-v-06e98942] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-float);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--motion-fast);
  font-size: var(--size-meta);
  line-height: var(--line-none);
  box-sizing: border-box;
}
.resizer-toggle-btn[data-v-06e98942]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.resizer-toggle-btn i[data-v-06e98942] {
  font-size: var(--icon-marker);
  line-height: var(--line-none);
}
.split-resizer-controls-standalone[data-v-06e98942] {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  z-index: var(--z-pane-control);
  pointer-events: auto;
}
.test-pane[data-v-06e98942] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-page);
  position: relative;
  /* container query — 우측 패널 폭에 따라 헤더 컨트롤 압축 (#441 반응형) */
  container-type: inline-size;
  container-name: test-pane;
}

/* 패널이 좁아지면 (#441 반응형):
   1) 헤더를 column 으로 — status 위, controls 아래
   2) controls 가 부모 폭에 맞춰 width:100% — 내부 flex-wrap 이 비로소 동작
   3) 테스트 버튼은 텍스트 숨기고 32×32 아이콘 정사각으로 압축 */
@container test-pane (max-width: 600px) {
.test-pane-header[data-v-06e98942] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-inline);
}
.test-status-info[data-v-06e98942] {
    width: 100%;
}
.test-controls[data-v-06e98942] {
    width: 100%;
    margin-left: 0;
    row-gap: var(--gap-inline);
}
}
@container test-pane (max-width: 480px) {
.test-button span[data-v-06e98942] {
    display: none;
}
.test-button[data-v-06e98942] {
    padding: 0;
    width: 32px;
    gap: 0;
}
}

/* 라이트 테마에서 테스트 영역 배경을 흰색으로 */
html[data-theme='light'] .test-pane[data-v-06e98942],
body[data-theme='light'] .test-pane[data-v-06e98942] {
  background: var(--bg-paper);
}
.test-pane-header[data-v-06e98942] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  gap: var(--gap-group);
  position: relative;
}

/* 스크롤바가 스크래퍼 선택 컨트롤 전까지 확장되도록 */
.test-pane-header[data-v-06e98942]::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  /* 스크롤 꼬리를 가리는 막 — 판이 비워진 뒤로는 불투명 색을 깔면 **회색 띠**로 보인다
     (2026-08-22 실측 rgb(22,24,27)). 바탕색으로 서서히 사라지게 한다. */
  background: linear-gradient(to right, transparent, var(--bg-page)); /* surface-ignore — 스크롤 꼬리를 바탕색으로 서서히 지우는 페이드 막이다. 면을 칠하는 것이 아니라 '바탕으로 되돌리는' 것이라 --background-color 가 맞다. */
  z-index: 2;
  pointer-events: none;
  /* test-controls 시작 위치까지만 확장 (대략 200px 정도) */
  margin-right: calc(150px + 0.75rem + 80px); /* MultiSelect width + gap + button approximate width */  /* role-ignore: 자리 계산 — 화면 폭에서 빼는 값이라 사다리 밖이다 */
}

/* 스크롤바가 스크래퍼 선택 컨트롤 전까지 확장되도록 */
.test-pane-header[data-v-06e98942]::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  /* 스크롤 꼬리를 가리는 막 — 판이 비워진 뒤로는 불투명 색을 깔면 **회색 띠**로 보인다
     (2026-08-22 실측 rgb(22,24,27)). 바탕색으로 서서히 사라지게 한다. */
  background: linear-gradient(to right, transparent, var(--bg-page)); /* surface-ignore — 스크롤 꼬리를 바탕색으로 서서히 지우는 페이드 막이다. 면을 칠하는 것이 아니라 '바탕으로 되돌리는' 것이라 --background-color 가 맞다. */
  z-index: 2;
  pointer-events: none;
  /* test-controls 시작 위치까지만 확장 (대략 200px 정도) */
  margin-right: calc(150px + 0.75rem + 80px); /* MultiSelect width + gap + button approximate width */  /* role-ignore: 자리 계산 — 화면 폭에서 빼는 값이라 사다리 밖이다 */
}
.test-button[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--pad-control);
  height: var(--h-control-md);
  border-radius: var(--radius-control);
  border: var(--line-w) solid var(--ink-brand);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.test-button[data-v-06e98942]:hover:not(:disabled) {
  filter: brightness(1.1);
}
.test-button[data-v-06e98942]:active:not(:disabled) {
  transform: scale(0.98);
}
.test-button[data-v-06e98942]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.test-button--stop[data-v-06e98942] {
  border-color: var(--ink-danger);
  background: var(--bg-danger);
}
.test-button--stop[data-v-06e98942]:hover:not(:disabled) {
  /* 면이 깊어진 뒤로는 hover 를 다른 색으로 주지 않는다 — 밝기만 올린다(AppButton 과 같은 방식).
     옛 코드는 잉크(--ink-danger-hover)를 면으로 빌려 써 흰 글자가 4.22:1 이었다. */
  filter: brightness(1.1);
}
.test-button i[data-v-06e98942] {
  font-size: var(--icon-marker);
}
.test-status-info[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex: 1;
  min-width: 0;
}
.test-controls[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  background: var(--bg-page);
   /* 상단 헤더의 오른쪽에 붙도록 */
  margin-left: auto;
  /* 가로 공간이 부족할 때 여러 줄로 내려가도 오른쪽 정렬 유지 */
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 로그 레벨/스크래퍼 픽커 셸 — 표준 DetailFilterField, 폭만 지정 */
.test-picker-item[data-v-06e98942] {
  flex: 0 0 auto;
}
.test-picker-item--loglevel[data-v-06e98942] {
  width: 176px;
}
.test-picker-item--scraper[data-v-06e98942] {
  width: 200px;
}
.clear-data-checkbox-label[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--size-label);
  color: var(--ink-primary);
  /* 좁은 가로 공간에서 라벨 한 글자씩 wrap 되어 세로처럼 깨지는 회귀 방지.
     라벨이 길어 다 못 들어가면 ellipsis 로 잘리고, 충분한 공간이면 그대로 표시. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.clear-data-checkbox-label.disabled[data-v-06e98942] {
  opacity: 0.6;
  cursor: not-allowed;
}
.clear-data-checkbox[data-v-06e98942] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ink-brand);
}
.clear-data-checkbox[data-v-06e98942]:disabled {
  cursor: not-allowed;
}
.clear-data-checkbox-text[data-v-06e98942] {
  white-space: nowrap;
}
.test-controls[data-v-06e98942] .multi-select-wrapper {
  width: 150px;
  flex-shrink: 0;
}

/* 태그 줄바꿈 허용 — 기본 고정 높이 대신 auto (bespoke). hover/focus/open 테두리는 MultiSelect 기본이 처리. */
.test-controls[data-v-06e98942] .multi-select-control {
  height: auto;
  min-height: var(--h-control-md);
}
.scraper-select-disabled[data-v-06e98942] .multi-select-control {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.scraper-select-disabled[data-v-06e98942] .multi-select-control:hover,
.scraper-select-disabled[data-v-06e98942] .multi-select-control:focus-within {
  border-color: var(--line-color);
  box-shadow: none;
}

/* 스크래퍼/로그 레벨 드롭다운이 로그 뷰어 툴바 위로 올라오도록 z-index 보정 */
[data-v-06e98942] .multi-select-dropdown {
  z-index: 40;
}
.test-progress-bar-container[data-v-06e98942] {
  flex-shrink: 0;
  width: 100%;
  height: 4px;
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
}
.test-progress-bar[data-v-06e98942] {
  height: 100%;
  background: var(--bg-brand-vivid);
  transition: width var(--motion-base) ease;
  border-radius: 0;
}
.test-status-message[data-v-06e98942] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.test-status-message.error[data-v-06e98942] {
  color: var(--ink-danger);
}
.test-pane-content[data-v-06e98942] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.active-users-stack[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-md);
  padding: var(--space-tight) 0;
}

/* 협업 사용자 링 — UserAvatar 외곽 둘레에 userColor 테두리만 표현 */
.active-user-ring[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--line-w-thick) solid transparent; /* 실제 색상은 inline style 에서 userColor 로 설정 */
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
  position: relative;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 10;
}
.active-user-ring[data-v-06e98942]:hover {
  transform: scale(1.1);
  z-index: 11;
}
.active-user-ring--current[data-v-06e98942] {
  z-index: 12;
  border-color: var(--ink-brand) !important;
  border-width: 3px !important;
}
.tab-save-button[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  white-space: nowrap;
  margin-left: var(--gap-inline);
}
.tab-save-button[data-v-06e98942]:hover:not(:disabled) {
  filter: brightness(1.1);
}
.tab-save-button[data-v-06e98942]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 반응형 브레이크포인트: 768px */
/* 모바일 에디터 높이 상수: 500px */
@media (max-width: 768px) {
.scraper-editor-header[data-v-06e98942] {
    flex-direction: column;
    align-items: flex-start;
}
.scraper-editor-actions[data-v-06e98942] {
    width: 100%;
    justify-content: flex-end;
}
.scraper-editor-wrapper[data-v-06e98942] {
    /* 모바일 에디터 높이: 500px */
    height: 500px;
}
.test-pane-header[data-v-06e98942] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-inline);
}
.test-status-info[data-v-06e98942] {
    width: 100%;
}
.test-status-message[data-v-06e98942] {
    white-space: normal;
}
.test-controls[data-v-06e98942] {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--gap-inline);
}
.test-controls[data-v-06e98942] > * {
    flex: 0 0 auto;
}
.test-controls[data-v-06e98942] .multi-select-wrapper {
    width: 180px;
}
.log-level-sort-control[data-v-06e98942] .list-view__sort-select {
    width: 150px;
}
}

/* 배포 탭 스타일 */
.deploy-container[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  height: 100%;
  overflow: hidden;
  padding: var(--pad-card);
  box-sizing: border-box;
}
.deploy-buttons[data-v-06e98942] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
}
.deploy-server-count[data-v-06e98942] {
  color: var(--ink-secondary);
  font-size: var(--size-body);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.deploy-buttons-right[data-v-06e98942] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.deploy-button[data-v-06e98942] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-primary);
  cursor: pointer;
  transition: all var(--motion-base) ease;
  white-space: nowrap;
}
.deploy-button[data-v-06e98942] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.deploy-button[data-v-06e98942]:hover:not(:disabled) {
  filter: brightness(1.1);
}
.deploy-button[data-v-06e98942]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.deploy-button--cancel[data-v-06e98942] {
  background: var(--bg-danger);
  border-color: var(--ink-danger);
}
.deploy-button--cancel[data-v-06e98942]:hover:not(:disabled) {
  /* 면이 깊어진 뒤로는 hover 를 다른 색으로 주지 않는다 — 밝기만 올린다(AppButton 과 같은 방식).
     옛 코드는 잉크(--ink-danger-hover)를 면으로 빌려 써 흰 글자가 4.22:1 이었다. */
  filter: brightness(1.12);
  border-color: var(--ink-danger-hover);
}
.deploy-button-count[data-v-06e98942] {
  font-weight: var(--weight-title);
}
.deploy-table-wrapper[data-v-06e98942] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-page);
}
.deploy-table[data-v-06e98942] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body);
}
.deploy-table thead[data-v-06e98942] {
  position: sticky;
  top: 0;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  z-index: 10;
  border-bottom: var(--line-w-thick) solid var(--line-color);
}
.deploy-table th[data-v-06e98942] {
  padding: var(--space-cozy);
  text-align: left;
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  position: relative;
}
.deploy-table td[data-v-06e98942] {
  padding: var(--space-cozy);
  border-bottom: var(--line-strong);
  color: var(--ink-primary);
}
.deploy-table__row[data-v-06e98942] {
  transition: background-color var(--motion-base) ease;
}
.deploy-table__row[data-v-06e98942]:hover {
  background: var(--bg-hover);
}
.deploy-table__row--selected[data-v-06e98942] {
  background: var(--bg-brand-soft);
}
.deploy-table__row--deploying[data-v-06e98942] {
  background: var(--bg-brand-soft);
  animation: pulse-06e98942 2s ease-in-out infinite;
}
.deploy-table__row--error[data-v-06e98942] {
  opacity: 0.6;
}
.deploy-table__loading-row[data-v-06e98942],
.deploy-table__empty-row[data-v-06e98942] {
  text-align: center;
}
.deploy-table__loading-cell[data-v-06e98942],
.deploy-table__empty-cell[data-v-06e98942] {
  /* 빈 목록·불러오는 중 안내 칸이다 — 다른 화면의 빈 상태와 같은 단을 쓴다. */
  padding: var(--space-wide);  /* role-ignore: 위와 같음 — 표 칸이 아니라 빈 상태의 여백 */
  color: var(--ink-muted);
  width: 100%;
  min-width: 200px;
}
.deploy-table__loading-cell[data-v-06e98942] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  white-space: nowrap;
}
.deploy-table__col-checkbox[data-v-06e98942] {
  width: 3rem;
  text-align: left; /* 좌측 정렬로 변경 */
  padding-left: var(--space-cozy); /* 좌측 여백으로 정렬 맞춤 */
}
.deploy-table__col-server[data-v-06e98942] {
  min-width: 120px;
  font-weight: var(--weight-label);
}
.deploy-table__col-url[data-v-06e98942] {
  min-width: 150px;
  max-width: 250px;
}
.deploy-url-text[data-v-06e98942] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--size-label);
}
.deploy-url-empty[data-v-06e98942] {
  color: var(--ink-muted);
  font-style: italic;
}
.deploy-table__col-exists[data-v-06e98942] {
  width: 6rem;
}
.deploy-table th.deploy-table__col-exists[data-v-06e98942],
.deploy-table td.deploy-table__col-exists[data-v-06e98942] {
  text-align: center;
}
.deploy-table__col-size[data-v-06e98942] {
  width: 8rem;
  font-variant-numeric: tabular-nums;
}
.deploy-table th.deploy-table__col-size[data-v-06e98942],
.deploy-table td.deploy-table__col-size[data-v-06e98942] {
  text-align: right;
}
.deploy-table__col-modified[data-v-06e98942] {
  min-width: 140px;
  font-variant-numeric: tabular-nums;
}
.deploy-table th.deploy-table__col-modified[data-v-06e98942],
.deploy-table td.deploy-table__col-modified[data-v-06e98942] {
  text-align: center;
}
.deploy-table__col-status[data-v-06e98942] {
  min-width: 120px;
  text-align: left;
}
.deploy-table__sortable[data-v-06e98942] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.deploy-table__sortable[data-v-06e98942]:hover {
  background: var(--bg-hover);
}
.deploy-table__sortable-text[data-v-06e98942] {
  display: inline-block;
  white-space: nowrap;
}
.deploy-table__sortable i[data-v-06e98942] {
  display: inline-block;
  margin-left: var(--gap-glyph);
  font-size: var(--icon-marker);
  color: var(--ink-secondary);
  opacity: 0.3;
  vertical-align: middle;
  width: 0.75rem;
  text-align: center;
}
.deploy-table__sortable:hover i.fa-up-down[data-v-06e98942] {
  opacity: 0.5;
}
.deploy-table th.deploy-table__sortable i.fa-sort-up[data-v-06e98942],
.deploy-table th.deploy-table__sortable i.fa-sort-down[data-v-06e98942] {
  opacity: 1;
  color: var(--ink-brand);
}
.deploy-table th.deploy-table__sortable i.fa-up-down[data-v-06e98942] {
  opacity: 0;
  visibility: hidden;
}
.deploy-text-empty[data-v-06e98942] {
  color: var(--ink-muted);
  font-style: italic;
}
@keyframes pulse-06e98942 {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.7;
}
}

/* 모바일 반응형 */
@media (max-width: 768px) {
.deploy-buttons[data-v-06e98942] {
    flex-wrap: wrap;
    justify-content: flex-end; /* 줄바꿈 시 오른쪽 정렬 */
}
.deploy-buttons-right[data-v-06e98942] {
    order: 1; /* 버튼을 위로 */
    margin-left: auto; /* 오른쪽 정렬 유지 */
}
.deploy-server-count[data-v-06e98942] {
    order: 2; /* 메시지를 아래로 */
    flex-basis: 100%; /* 메시지가 전체 너비를 차지 */
}
.deploy-table-wrapper[data-v-06e98942] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.deploy-table[data-v-06e98942] {
    min-width: 800px;
}
.deploy-table th[data-v-06e98942],
  .deploy-table td[data-v-06e98942] {
    padding: var(--space-snug);
    font-size: var(--size-label);
}
.deploy-table__col-url[data-v-06e98942] {
    max-width: 200px;
}
}
@media (max-width: 480px) {
.deploy-button[data-v-06e98942] {
    padding: var(--space-snug) var(--space-cozy);
    font-size: var(--size-label);
}
.deploy-table[data-v-06e98942] {
    min-width: 0; /* 2개 컬럼만 표시하므로 최소 너비 제거 */
}
.deploy-table th[data-v-06e98942],
  .deploy-table td[data-v-06e98942] {
    padding: var(--space-snug);
    font-size: var(--size-meta);
}
  
  /* 3개 컬럼만 표시: 체크박스, 서버, 상태 */
.deploy-table thead th.deploy-table__col-exists[data-v-06e98942],
  .deploy-table tbody td.deploy-table__col-exists[data-v-06e98942],
  .deploy-table thead th.deploy-table__col-size[data-v-06e98942],
  .deploy-table tbody td.deploy-table__col-size[data-v-06e98942],
  .deploy-table thead th.deploy-table__col-modified[data-v-06e98942],
  .deploy-table tbody td.deploy-table__col-modified[data-v-06e98942] {
    display: none;
}
}

/* 수직 분리대 스타일 (인라인 — VerticalSplitter 컴포넌트와 동일 동작) */
.vertical-split-resizer[data-v-06e98942] {
  flex-shrink: 0;
  width: 8px;
  background: var(--bg-field);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-base), opacity var(--motion-base), width var(--motion-base);
  /* 반드시 --z-resize-overlay 보다 높아야 < = > 버튼이 클릭됨 (tokens.css 주석 참고) */
  z-index: var(--z-splitter);
  overflow: visible;
}
.vertical-split-resizer.compact[data-v-06e98942] {
  opacity: 1;
  cursor: pointer;
  width: 32px;
  /* ⛔ 접힌 레일에는 면을 깔지 않는다 — 폭이 넓어 띠로 보인다. 경계는 테두리가 만든다. */
  background: var(--bg-page);
  border-left: var(--line-strong);
  border-right: var(--line-strong);
}
.vertical-split-resizer[data-v-06e98942]:hover:not(.compact) {
  background: var(--bg-brand-vivid);
}
.vertical-split-resizer.compact[data-v-06e98942]:hover {
  opacity: 1;
  background: var(--bg-hover);
  border-left-color: var(--ink-brand);
  border-right-color: var(--ink-brand);
}
.vertical-split-resizer.resizing[data-v-06e98942] {
  background: var(--bg-brand-vivid);
}
.vertical-split-resizer-handle[data-v-06e98942] {
  width: 3px;
  height: 40px;  /* dimensions-ignore: 판을 미는 손잡이 그림의 길이다(폭 3px) — 컨트롤 높이가 아니다 */
  background: var(--ink-secondary);
  border-radius: var(--radius-badge);
  opacity: 0.6;
  transition: opacity var(--motion-base);
}
.vertical-split-resizer:hover .vertical-split-resizer-handle[data-v-06e98942],
.vertical-split-resizer.resizing .vertical-split-resizer-handle[data-v-06e98942] {
  opacity: 1;
}
.vertical-split-resizer-controls[data-v-06e98942] {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  z-index: var(--z-pane-control);
  pointer-events: auto;
  overflow: visible;
}
.chat-pane[data-v-06e98942] {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  transition: width var(--motion-base) ease;
}
.chat-pane-toggle-button[data-v-06e98942] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 80px;
  background: var(--bg-float);
  border: var(--line-strong);
  border-right: none;
  border-radius: var(--radius-badge) 0 0 var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-base);
  z-index: var(--z-pane-control);
  color: var(--ink-secondary);
}
.chat-pane-toggle-button[data-v-06e98942]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.chat-pane-toggle-button i[data-v-06e98942] {
  font-size: var(--icon-toolbar);
}

/* 다크 테마 */
html[data-theme='dark'] .vertical-split-resizer.compact[data-v-06e98942],
body[data-theme='dark'] .vertical-split-resizer.compact[data-v-06e98942] {
  background: var(--bg-field);
  border-left-color: var(--line-color);
  border-right-color: var(--line-color);
}
html[data-theme='dark'] .vertical-split-resizer.compact[data-v-06e98942]:hover,
body[data-theme='dark'] .vertical-split-resizer.compact[data-v-06e98942]:hover {
  background: var(--bg-hover);
  border-left-color: var(--ink-brand);
  border-right-color: var(--ink-brand);
}

/* ═══ 모바일 전체 레이아웃 ═══ */
.crawling-mobile-layout[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.crawling-mobile-content[data-v-06e98942] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══ 모바일 코딩 하위 탭 ═══ */
.mobile-coding-layout[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mobile-coding-content[data-v-06e98942] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-coding-content .scraper-editor-wrapper[data-v-06e98942] {
  flex: 1 1 0;
  min-height: 0;
}
.mobile-coding-content .test-pane[data-v-06e98942] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.icon-streaming[data-v-06e98942] {
  animation: iconStreaming-06e98942 1.2s ease-in-out infinite;
  color: var(--ink-brand);
  filter: drop-shadow(0 0 4px var(--ink-brand));
}
@keyframes iconStreaming-06e98942 {
0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--ink-brand));
}
50% {
    opacity: 0.3;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--ink-brand));
}
}


/* 공통 골격(help-tab / body / toc / section / text / list / subsection-title /
   card / back-top / v-html strong)은 AppHelpPanel 이 제공.
   여기서는 이 화면 고유의 것만 유지 — 시스템 태그 칩·표·인라인 코드·data-highlight 앵커. */

/* data-highlight 앵커 클릭 위임 래퍼 — 레이아웃 영향 없음 */
.mc-jumproot[data-v-628602b5] {
  display: contents;
}

/* 시스템 태그 목록 — 색상 칩 + 설명 */
.help-tab__tag-list[data-v-628602b5] {
  list-style: none;
  margin: var(--gap-inline) 0 var(--gap-stack);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.help-tab__tag-list li[data-v-628602b5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
}
.help-tab__tag-chip[data-v-628602b5] { /* component-ignore: 도움말의 태그 안내용 칩 — DB content_tags 의 brand hex 색을 그대로 노출해 실제 메타편집기에서 보이는 태그와 시각 일치시키는 것이 목적. AppBadge 의 의미색 팔레트로는 임의 hex 매핑 불가하므로 자체 비대화형 chip 셀렉터 유지. */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-on-solid);
  min-width: 72px;
  justify-content: center;
}
.help-tab__tag-desc[data-v-628602b5] {
  flex: 1;
  min-width: 0;
}

/* 테이블 */
.help-tab__table[data-v-628602b5] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-meta);
  margin: var(--gap-inline) 0;
}
.help-tab__table th[data-v-628602b5],
.help-tab__table td[data-v-628602b5] {
  padding: var(--space-snug) var(--space-snug);
  border: var(--line-strong);
  text-align: left;
}
.help-tab__table th[data-v-628602b5] {
  background: var(--bg-field);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
}
.help-tab__table td[data-v-628602b5] {
  color: var(--ink-secondary);
}
.help-tab__table td i[data-v-628602b5] {
  color: var(--ink-muted);
}
.help-tab__table kbd[data-v-628602b5] {
  display: inline-block;
  padding: var(--space-tight) var(--space-snug);
  font-size: var(--size-meta);
  font-family: inherit;
  color: var(--ink-primary);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  box-shadow: 0 var(--line-w) 0 var(--line-color);
}

/* v-html 내 data-highlight 앵커 — 클릭 시 화면 영역 강조 (이 화면 고유) */
.help-tab__text[data-v-628602b5] [data-highlight],
.help-tab__list[data-v-628602b5] [data-highlight] {
  color: var(--ink-brand);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.help-tab__text[data-v-628602b5] [data-highlight]:hover,
.help-tab__list[data-v-628602b5] [data-highlight]:hover {
  text-decoration-style: solid;
}
.help-tab__text[data-v-628602b5] code,
.help-tab__list[data-v-628602b5] code {
  padding: var(--space-tight) var(--space-tight);
  font-size: var(--size-meta);
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  color: var(--ink-brand);
}

.todo-work-type-meta[data-v-5cb91dc4] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* 상태 표시 (로딩/에러/문서없음) */
.meta-state[data-v-5cb91dc4] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding: var(--space-wide);
}
.meta-state__icon[data-v-5cb91dc4] {
  font-size: var(--icon-hero);
  color: var(--ink-muted);
}
.meta-state__icon--error[data-v-5cb91dc4] {
  color: var(--ink-warning);
}
.meta-state__text[data-v-5cb91dc4] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-secondary);
}

/* .meta-state__retry → AppButton variant="secondary" size="sm" */

/* 좌우 분할 컨테이너 */
.vertical-split-container {
&[data-v-5cb91dc4] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  }
&.swapped[data-v-5cb91dc4] {
    flex-direction: row-reverse;
}
}

/* 드래그 중 iframe/PDF 가 마우스 이벤트 가로채지 못하게 깔리는 overlay.
   z-index 규칙은 tokens.css 의 --z-resize-overlay 주석 참고. */
.resize-overlay[data-v-5cb91dc4] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.meta-left-pane[data-v-5cb91dc4] {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.meta-right-pane[data-v-5cb91dc4] {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

/* 뷰어 영역 */
.meta-viewer__container[data-v-5cb91dc4] {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}
.meta-viewer__iframe[data-v-5cb91dc4] {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.meta-viewer__onlyoffice[data-v-5cb91dc4] {
  width: 100%;
  height: 100%;
  display: block;
}
.meta-viewer__fallback[data-v-5cb91dc4] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
}
.meta-viewer__fallback-content[data-v-5cb91dc4] {
  text-align: center;
}
.meta-viewer__fallback-icon[data-v-5cb91dc4] {
  font-size: var(--icon-hero);
  color: var(--ink-muted);
  margin-bottom: var(--gap-group);
}
.meta-viewer__fallback-title[data-v-5cb91dc4] {
  margin: 0 0 var(--gap-inline) 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.meta-viewer__fallback-message[data-v-5cb91dc4] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-secondary);
}

/* 분리대 관련 룰은 모두 공통 컴포넌트 VerticalSplitter (scoped) 로 이동됨 */

/* 우측 패널: 문서 정보 헤더 */
.meta-editor-header[data-v-5cb91dc4] {
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.meta-editor-header__product-row[data-v-5cb91dc4] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-inline);
  margin-bottom: var(--gap-glyph);
  border-radius: var(--radius-badge);
}

/* 글로벌 .flash-highlight (style.css) 가 product-row 에도 적용된다.
   별도 키프레임 불필요. */
.meta-editor-header__product[data-v-5cb91dc4] {
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-comfortable);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}
.meta-editor-header__version[data-v-5cb91dc4] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-muted);
}
.meta-editor-header__details[data-v-5cb91dc4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.meta-editor-header__left[data-v-5cb91dc4] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.meta-editor-header__company[data-v-5cb91dc4] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.meta-editor-header__period[data-v-5cb91dc4] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}
.meta-editor-header__doctype[data-v-5cb91dc4] {
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.meta-editor-header__doctype-select {
&[data-v-5cb91dc4] {
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  }
&[data-v-5cb91dc4]:hover {
    border-color: var(--ink-brand);
}
&[data-v-5cb91dc4]:focus {
    border-color: var(--ink-brand);
    box-shadow: var(--ring-focus);
}
}
.meta-editor-header__version-nav[data-v-5cb91dc4] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}

/* .meta-editor-header__version-btn → AppButton icon-only variant="ghost" size="xs" */
.meta-editor-header__version-btn[data-v-5cb91dc4] {
  width: var(--h-control-xs);
  height: var(--h-control-xs);
}
.meta-editor-header__version-select {
&[data-v-5cb91dc4] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
  height: var(--h-control-xs);
  cursor: pointer;
  outline: none;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  min-width: var(--space-wide);
  }
&[data-v-5cb91dc4]:hover { border-color: var(--ink-brand);
}
&[data-v-5cb91dc4]:focus { border-color: var(--ink-brand); box-shadow: var(--ring-focus);
}
}
.meta-editor-header__return-btn {
&[data-v-5cb91dc4] {
  color: var(--ink-brand);
  }
&[data-v-5cb91dc4]:hover:not(:disabled) {
    color: var(--ink-brand);
}
}
.meta-editor-header__file-info[data-v-5cb91dc4] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 우측 패널: 편집 본문 */
.meta-editor-body[data-v-5cb91dc4] {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 추출 상태바 */
.meta-extraction-status[data-v-5cb91dc4] {
  flex-shrink: 0;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
.extraction-status[data-v-5cb91dc4] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.extraction-status__icon[data-v-5cb91dc4] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.extraction-status__icon--done[data-v-5cb91dc4] {
  color: var(--ink-success);
}
.extraction-status__text[data-v-5cb91dc4] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex: 1;
  min-width: 0;
}
.extraction-status__text strong[data-v-5cb91dc4] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.extraction-status__percent[data-v-5cb91dc4] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-brand);
  flex-shrink: 0;
}

/* .extraction-status__btn → AppButton variant="primary/secondary/ghost" size="sm" */
.extraction-status__btn[data-v-5cb91dc4] {
  flex-shrink: 0;
}

/* 스타일 토글 자리 — 모양은 공통 부품(MetaStyleToggle)이 갖는다. */
.extraction-status__style-toggle[data-v-5cb91dc4] {
  margin-left: auto;
}

/* 추출 진행 */
.extraction-progress-row[data-v-5cb91dc4] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
}
.extraction-progress-bar[data-v-5cb91dc4] {
  height: var(--space-tight);
  width: 100%;
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
  margin-top: var(--gap-glyph);
}
.extraction-progress-fill[data-v-5cb91dc4] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  transition: width var(--motion-slow);
}

/* 라이브 텍스트 */
.meta-left-tabs__content[data-v-5cb91dc4] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══ 모바일 레이아웃 ═══ */
.meta-mobile-layout[data-v-5cb91dc4] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.meta-mobile-content[data-v-5cb91dc4] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 분리대 다크 테마 보정은 VerticalSplitter 자체가 CSS 변수로 처리 */

/* 모바일: 세로 스택 */
@media (max-width: 768px) {
.vertical-split-container[data-v-5cb91dc4] {
    flex-direction: column;
}
.meta-left-pane[data-v-5cb91dc4] {
    width: 100% !important;
    height: 50%;
    flex-shrink: 0;
}
.meta-right-pane[data-v-5cb91dc4] {
    width: 100% !important;
    height: 50%;
    flex-shrink: 0;
}
.meta-editor-header[data-v-5cb91dc4] {
    padding: var(--space-snug) var(--space-cozy);
}
.meta-editor-header__product[data-v-5cb91dc4] {
    font-size: var(--size-label);
    flex-basis: 100%;
    text-align: center;
}
.meta-editor-header__doctype[data-v-5cb91dc4] {
    font-size: var(--size-label);
}
.meta-editor-header__file-info[data-v-5cb91dc4] {
    display: none;
}
}
.icon-streaming[data-v-5cb91dc4] {
  animation: iconStreaming-5cb91dc4 1.2s ease-in-out infinite;
  color: var(--ink-brand);
  filter: drop-shadow(0 0 4px var(--ink-brand));
}
@keyframes iconStreaming-5cb91dc4 {
0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--ink-brand));
}
50% {
    opacity: 0.3;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--ink-brand));
}
}
.meta-unextracted-cta[data-v-5cb91dc4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding: var(--space-band);
  margin: var(--gap-group) auto;
  max-width: 32rem;
  text-align: center;
  color: var(--ink-secondary);
}
.meta-unextracted-cta__icon[data-v-5cb91dc4] {
  font-size: var(--icon-hero);
  color: var(--ink-muted);
  opacity: 0.6;
}
.meta-unextracted-cta__text[data-v-5cb91dc4] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-primary);
  line-height: var(--line-normal);
}

/* .meta-unextracted-cta__btn → AppButton variant="primary" size="sm" */

.todo-work-type-meta-review[data-v-5463952d] {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 임베드된 상세(.lsd/.dgv/.stv)가 세로를 다 쓰도록 */
.todo-work-type-meta-review[data-v-5463952d] >  section {
  flex: 1;
  min-height: 0;
}
.mr-state[data-v-5463952d] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-wide);
}
.mr-state__icon[data-v-5463952d] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.mr-state__text[data-v-5463952d] {
  margin: 0;
  font-size: var(--size-body);
}

.twd[data-v-b524b172] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.twd__notice[data-v-b524b172] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  border-bottom: var(--line-strong);
}
.twd__notice--warning[data-v-b524b172] {
  color: var(--ink-warning);
  background: var(--bg-page);
}
.twd__notice--danger[data-v-b524b172] {
  color: var(--ink-danger);
  background: var(--bg-page);
}
.twd__empty[data-v-b524b172] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-muted);
  padding: var(--space-band);
  text-align: center;
}
.twd__empty-icon[data-v-b524b172] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.twd__empty-title[data-v-b524b172] {
  margin: 0;
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.twd__empty-desc[data-v-b524b172] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}

.todo-comment-card[data-v-ded077da] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--pad-card);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.todo-comment-card__header[data-v-ded077da] {
  display: flex;
  align-items: center;
  /* ⛔ 부품(UserLabel)을 못 쓰는 두 줄 자리지만 **간격은 부품과 같다** — 4px(2026-09-12). */
  gap: var(--gap-glyph);
}
.todo-comment-card__meta[data-v-ded077da] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.todo-comment-card__name-row[data-v-ded077da] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-inline);
  min-width: 0;
}
.todo-comment-card__name[data-v-ded077da] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  font-size: var(--size-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.todo-comment-card__email[data-v-ded077da] {
  font-weight: var(--weight-body);
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
  margin-left: var(--gap-glyph);
}
.todo-comment-card__time[data-v-ded077da] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  white-space: nowrap;
}
.todo-comment-card__edited[data-v-ded077da] {
  margin-left: 0.25em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.todo-comment-card__tag[data-v-ded077da] {
  flex-shrink: 0;
}
.todo-comment-card__actions[data-v-ded077da] {
  display: flex;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.todo-comment-card__body[data-v-ded077da] {
  font-size: var(--size-body);
  color: var(--ink-primary);
  line-height: var(--line-normal);
  word-break: break-word;
}
.todo-comment-card__body[data-v-ded077da] img {
  max-width: 100%;
  border-radius: var(--radius-badge);
}
.todo-comment-card__body[data-v-ded077da] p {
  margin: 0 0 0.5em;  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.todo-comment-card__body[data-v-ded077da] p:last-child {
  margin-bottom: 0;
}
.todo-comment-card__body[data-v-ded077da] pre {
  background: var(--bg-card);
  padding: var(--space-snug);
  border-radius: var(--radius-badge);
  overflow-x: auto;
}
.todo-comment-card__body[data-v-ded077da] code {
  background: var(--bg-card);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  font-size: var(--font-rel-code);
}
.todo-comment-card__replies[data-v-ded077da] {
  margin-top: var(--gap-inline);
  margin-left: var(--gap-band);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  border-left: var(--line-w-thick) solid var(--line-color);
  padding-left: var(--space-cozy);
}

.todo-comment-form[data-v-d1a5f46d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.todo-comment-form__reply-banner[data-v-d1a5f46d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-card);
  border-radius: var(--radius-badge);
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.todo-comment-form__cancel-reply[data-v-d1a5f46d] {
  margin-left: auto;
}
.todo-comment-form__tags[data-v-d1a5f46d] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.todo-comment-form__tags-label[data-v-d1a5f46d] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.todo-comment-form__actions[data-v-d1a5f46d] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
}
.todo-comment-form__error[data-v-d1a5f46d] {
  flex: 1;
  color: var(--ink-danger);
  font-size: var(--size-body);
}

.todo-system-note[data-v-4252ae86] {
  /* 세로 레일의 가로 위치 — 기본값을 **여기서 선언**한다.
     부모(TodoStatusPanel)가 같은 이름으로 덮어쓰면 그 값이 상속돼 레일이 맞춰진다.
     ⛔ `var(--rail-x)` 처럼 폴백으로 숨기지 않는다 — 부모가 안 준 것인지
        이름을 틀린 것인지 구분이 안 되고, 린트도 못 잡는다. */
  --rail-x: 14px;
  display: flex;
  align-items: flex-start; /* 첫 줄 기준 정렬 — 사유가 추가돼 row 가 커져도 위쪽으로 붙음 */
  gap: var(--gap-inline);
  padding: var(--space-tight) 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  /* rail 옆 들여쓰기 — 아이콘(반지름 11) 우측 끝 + 충분한 여백 */
  padding-left: calc(var(--rail-x) + 22px);
  position: relative;
}
/* 액션 아이콘이 rail 위에 그려짐 — 첫 줄(작업자/내용) 가운데에 맞춤 */
.todo-system-note__rail-icon[data-v-4252ae86] {
  position: absolute;
  left: var(--rail-x);
  top: calc(var(--space-tight) + 11px); /* padding-top + 아이콘 반지름 = 첫 줄 중심 */
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;  /* dimensions-ignore: 레일 위 아이콘 원의 지름이다 — 컨트롤 높이가 아니라 그림 크기다 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-strong);
  color: var(--ink-secondary);
  font-size: var(--icon-marker);
  z-index: 1;
}
/* 작업자 아바타 — 본문 안쪽, 이름 앞에 인라인 배치 */
.todo-system-note__text[data-v-4252ae86] {
  flex: 1;
  min-width: 0;
}
.todo-system-note__verb[data-v-4252ae86] {
  color: var(--ink-secondary);
  margin-left: 0.5em; /* actor-uid 가 없는 경우(uid == name)에도 verb 와 간격 확보 */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.todo-system-note__reason[data-v-4252ae86] {
  font-style: normal;
  color: var(--ink-muted);
  /* 상태 변경 사유는 항상 다음 줄에 배치 */
  display: block;
  margin-top: var(--gap-glyph);
}
.todo-system-note__time[data-v-4252ae86] {
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.todo-status-panel[data-v-b572876a] {
  /* timeline rail 의 x 좌표 (panel 좌측 내부 기준). 자식들이 inherit 받아 사용 */
  --rail-x: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--pad-card);
  /* 아래 여백은 **옆의 AI 탭과 같은 8px** (사용자 확정 2026-08-17).
     ⛔ flex 를 함께 못 박아야 한다 — 감싸는 상자(.todo-edit-page__right-body)가 세로 flex +
        overflow:auto 라, 안 막으면 flex-shrink 로 상자 높이까지 찌그러져 **내용만 박스 밖으로
        넘친다**. 그러면 이 padding 이 내용 뒤가 아니라 화면 위쪽에 찍혀, 끝까지 내렸을 때
        댓글 등록 버튼이 바닥에 딱 붙는다(실측 -1px). */
  flex: 0 0 auto;
  padding-bottom: var(--space-snug);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.todo-status-panel__header[data-v-b572876a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  /* 스크롤 시 상단 고정 — 활동 탭 스크롤 컨테이너 기준 */
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  padding: var(--space-snug) 0;
  border-bottom: var(--line-strong);
  /* panel 의 좌우 padding 만큼 헤더가 좌우 끝까지 가도록 — sticky 일 때 시각적 단절 방지 */
  margin: calc(-1 * var(--gap-group)) calc(-1 * var(--gap-group)) 0;
  padding-left: var(--space-roomy);
  padding-right: var(--space-roomy);
}
.todo-status-panel__title[data-v-b572876a] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
.todo-status-panel__title-count[data-v-b572876a] {
  color: var(--ink-secondary);
  font-weight: var(--weight-body);
  font-size: var(--font-rel-sm);
  margin-left: var(--gap-glyph);
}
/* 타이틀 앞 inline 접기 토글 — 디스클로저 위젯 스타일 (>) */
.todo-status-panel__close-btn[data-v-b572876a] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--font-rel-sm);
  padding: 0;
  border-radius: var(--radius-badge);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.todo-status-panel__close-btn[data-v-b572876a]:hover {
  background: var(--bg-page);
  color: var(--ink-primary);
}
.todo-status-panel__controls[data-v-b572876a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  position: relative;
  flex-shrink: 0;
  /* 좁아져서 줄바꿈되면 자체 라인에서 우측 정렬 유지 */
  margin-left: auto;
}
.todo-status-panel__dropdown[data-v-b572876a] {
  position: relative;
}
.todo-status-panel__dropdown--open .todo-status-panel__dropdown-btn[data-v-b572876a] {
  border-color: var(--ink-brand) !important;
}
.todo-status-panel__dropdown-caret[data-v-b572876a] {
  font-size: 0.7em; /* css-ignore: decorative em */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
  color: var(--ink-secondary);
}
.todo-status-panel__dropdown-menu[data-v-b572876a] {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  padding: var(--space-tight);
  margin: 0;
  list-style: none;
  z-index: var(--z-dropdown);
}
.todo-status-panel__dropdown-item[data-v-b572876a] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
}
.todo-status-panel__dropdown-item[data-v-b572876a]:hover {
  background: var(--bg-float);
}
.todo-status-panel__dropdown-item--active[data-v-b572876a] {
  font-weight: var(--weight-title);
}
.todo-status-panel__dropdown-item-check[data-v-b572876a] {
  /* 체크 영역을 항상 같은 너비로 확보 → 선택/비선택 항목의 라벨 시작 위치 정렬 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  flex-shrink: 0;
}
.todo-status-panel__dropdown-item-check .fa-check[data-v-b572876a] {
  color: var(--ink-brand);
  font-size: 0.85em; /* css-ignore: decorative em */  /* role-ignore: 본문 렌더·아이콘 배수 — 앞 글자를 따라가야 하는 자리라 절대값을 박으면 어긋난다 */
}
.todo-status-panel__dropdown-item-label[data-v-b572876a] {
  flex: 1;
}
/* timeline rail: ol 의 좌측에 세로 라인 */
.todo-status-panel__timeline[data-v-b572876a] {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.todo-status-panel__timeline[data-v-b572876a]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  width: 2px;
  background: var(--line-color);
  border-radius: var(--radius-badge);
  transform: translateX(-50%);
}
.todo-status-panel__entry[data-v-b572876a] {
  position: relative;
}
/* 댓글 카드는 rail 들여쓰기 적용 + 점 마커 */
.todo-status-panel__comment-slot[data-v-b572876a] {
  /* rail 아이콘(반지름 11) 우측 끝 + 충분한 여백 */
  padding-left: calc(var(--rail-x) + 22px);
  position: relative;
}
.todo-status-panel__comment-icon[data-v-b572876a] {
  position: absolute;
  left: var(--rail-x);
  top: var(--space-roomy);
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;  /* dimensions-ignore: 레일 위 아이콘 원의 지름이다 — 컨트롤 높이가 아니라 그림 크기다 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-float);
  border: var(--line-strong);
  color: var(--ink-brand);
  font-size: var(--icon-marker);
  z-index: 1;
}
.todo-status-panel__empty[data-v-b572876a] {
  padding: var(--space-band);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.todo-status-panel__form-wrap[data-v-b572876a] {
  margin-top: var(--gap-stack);
}
.todo-status-panel__form-wrap--top[data-v-b572876a] {
  margin-top: 0;
  margin-bottom: var(--gap-stack);
}

.todo-ai-panel[data-v-c0a0e682] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.todo-ai-panel__context[data-v-c0a0e682] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  font-size: var(--size-meta);
}

/*
 * 배지는 왼쪽, [AI 검수] 는 오른쪽 끝.
 * ⛔ 미는 칸(flex:1)을 따로 두지 않는다 — 좁아져 줄이 바뀌면 그 칸은 윗줄에 남고
 *    단추만 아랫줄 **왼쪽**에 선다. 자동 여백은 줄마다 다시 계산되므로 줄이 바뀌어도
 *    그 줄의 오른쪽 끝을 지킨다(사용자 지시 2026-08-30).
 */
.todo-ai-panel__review[data-v-c0a0e682] {
  margin-left: auto;
}

/* ChatWindow 가 남은 높이를 채우고 내부에서만 스크롤 */
.todo-ai-panel__chat[data-v-c0a0e682] {
  flex: 1;
  min-height: 0;
}
.page[data-v-c568aeee] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-c568aeee] {
  margin: 0;
}
.page__desc[data-v-c568aeee] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-c568aeee] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-c568aeee],
.page__card > .tab-nav[data-v-c568aeee] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-c568aeee] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-c568aeee] {
    padding: var(--space-snug);
}
}
.todo-edit-page-root[data-v-c568aeee] {
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important;
  padding: 0;
  margin: 0;
}
.todo-edit-page-root > .page__header[data-v-c568aeee] {
  margin-top: 0;
}
.todo-edit-page-root .page__desc[data-v-c568aeee] {
  margin-top: 0;
}
.todo-edit-page-root .page__card[data-v-c568aeee] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  /* 페이지 판 — 다크에서 비워 바탕 글로우가 비치게. 이름에 card 가 들어가지만 카드가 아니라 판이다. */
  background: var(--bg-page);
  border: none;       /* 편집 화면에서는 카드 보더 제거 */
  border-radius: 0;   /* 편집 화면에서는 카드 모서리 라운드 제거 */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.todo-edit-page[data-v-c568aeee] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--bg-page);
}

/* 라이트 테마에서는 편집 화면 배경을 완전히 흰색으로 통일 */
:root[data-theme='light'] .todo-edit-page-root[data-v-c568aeee],
:root[data-theme='light'] .todo-edit-page-root .todo-edit-page[data-v-c568aeee] {
  background: var(--bg-page);
}
.todo-edit-page__loading[data-v-c568aeee] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-group);
  padding: var(--space-wide);
  color: var(--ink-secondary);
}
.todo-edit-page__loading i[data-v-c568aeee] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
}
.todo-edit-page__content[data-v-c568aeee] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.todo-edit-page__header[data-v-c568aeee] {
  flex-shrink: 0;
}

/* 작업+활동 패널 컨테이너 */
.todo-edit-page__panels[data-v-c568aeee] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 좌우 분할 모드 — 넓은 화면 */
.todo-edit-page__panels--split[data-v-c568aeee] {
  flex-direction: row;
  gap: 0;
  position: relative;
}

/* split 모드에서는 좌/우 모두 flex: 0 0 auto + 인라인 width 로 제어.
   flex-grow 가 있으면 인라인 width 가 무시되어 드래그 시 깜빡임 발생. */
.todo-edit-page__panels--split .todo-edit-page__work-type-wrapper[data-v-c568aeee] {
  flex: 0 0 auto;
  min-width: 0;
}
.todo-edit-page__panels--split .todo-edit-page__activity-tab[data-v-c568aeee] {
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
}

/* 분리대는 공통 VerticalSplitter 컴포넌트에서 자체 scoped CSS 보유 */

/* 좌우 스왑: CSS order 만 반전 (DOM 구조 유지) */

/* 스왑 시 자식 패널/분리대 순서. VerticalSplitter 는 child 컴포넌트라 :deep() 사용. */
.todo-edit-page__panels--split.swapped .left-pane[data-v-c568aeee] { order: 3;
}
.todo-edit-page__panels--split.swapped[data-v-c568aeee] .vertical-split-resizer { order: 2;
}
.todo-edit-page__panels--split.swapped .right-pane[data-v-c568aeee] { order: 1;
}

/* 드래그 중 iframe 등 자식이 마우스 이벤트 가로채지 못하도록.
   z-index 규칙은 tokens.css 의 --z-resize-overlay 주석 참고. */
.todo-edit-page__resize-overlay[data-v-c568aeee] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.todo-edit-page__work-type-wrapper[data-v-c568aeee] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* 읽기 전용 모드 — 시각 뱃지만. 실제 입력 차단은 각 작업화면 컴포넌트가
   useTodoReadOnly() inject 를 통해 자체 readOnly prop 으로 처리. */
.todo-edit-page__work-type-wrapper--read-only[data-v-c568aeee]::after {
  content: attr(data-read-only-label);
  position: absolute;
  top: var(--space-snug);
  right: var(--space-snug);
  /* 이 뱃지는 머리줄의 고르개(문서 종류·판)와 **같은 줄에 선다** — 그러면 같은 키라야 한다.
     ⛔ 안여백만 주고 높이를 비워 두면 글줄 높이가 키를 정해 22px 이 되는데, 옆 고르개는
        26px(--h-control-sm) 이라 그 한 자리만 한 단 낮아 보인다(실측 2026-09-03). */
  display: inline-flex;
  align-items: center;
  min-height: var(--h-control-sm);
  padding: var(--pad-badge);
  background: var(--bg-warning);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  border-radius: var(--radius-badge);
  z-index: var(--z-sticky);
  pointer-events: none;
}

/* 우측 패널 — 탭 바는 고정, 스크롤은 본문(__right-body)에서만.
   ⚠️ 패널 전체에 overflow 를 주면 탭 바가 함께 밀려 올라가고, TodoStatusPanel 의
   sticky 헤더와도 겹친다. 그래서 컬럼 레이아웃 + 본문만 스크롤로 둔다. */
.todo-edit-page__activity-tab[data-v-c568aeee] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.todo-edit-page__right-tabs[data-v-c568aeee] {
  flex: 0 0 auto;
}
.todo-edit-page__right-body[data-v-c568aeee] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* AI 패널이 남은 높이를 채우도록 (채팅 입력창이 바닥에 붙는다) */
  display: flex;
  flex-direction: column;
}
.todo-edit-page__right-body[data-v-c568aeee] > * {
  min-height: 0;
}
.todo-edit-page__no-work-type[data-v-c568aeee] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}
.todo-edit-page__header[data-v-c568aeee] {
  flex-shrink: 0;
  padding: var(--space-roomy) var(--space-band);
  border-bottom: var(--line-strong);
  background: transparent;
}
.todo-timeline[data-v-c568aeee] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  color: var(--ink-primary);
  justify-content: center;
}
.todo-timeline__status-controls[data-v-c568aeee] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin-left: var(--gap-inline);
  flex-shrink: 0; /* 줄어들지 않도록 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
.todo-timeline__status-shrink[data-v-c568aeee] {
  flex-shrink: 0;
}

/* 가운데 뱃지가 '지금 이 단계' 다 — 높이는 양옆 이동 단추(sm)와 같게 두고, 채운 면·큰 글자로 먼저 읽히게 한다.
   양옆은 secondary(중립 테두리)로 낮춰, 색으로 다투지 않고 '앞뒤로 옮길 수 있다' 만 알린다. */
.todo-timeline__status-controls .todo-timeline__status-shrink[data-v-c568aeee] {
  height: var(--h-control-sm);
  padding: 0 var(--space-cozy);
  /* 채운 면 위 글자는 700 이어야 다크의 의미색 면에서도 대비가 선다(14px+bold = 3:1 기준). */
  font-weight: var(--weight-strong);
}
.todo-timeline__item[data-v-c568aeee] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.todo-timeline__progress-group[data-v-c568aeee] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  justify-content: center; /* 줄바꿈 시 가운데 정렬 */
}
.todo-timeline__duration-group[data-v-c568aeee] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
}
.todo-timeline__todo-id[data-v-c568aeee] {
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  margin-right: var(--gap-stack);
  white-space: nowrap;
}
.todo-timeline__item--progress[data-v-c568aeee] {
  display: flex;
  align-items: center;
  justify-content: center; /* 가운데 정렬 */
  gap: var(--gap-inline);
  margin-left: var(--gap-stack);
  flex-wrap: nowrap; /* 한 줄 유지 */
  flex-shrink: 1; /* 필요시 줄어들 수 있도록 */
  flex-grow: 0; /* 늘어나지 않도록 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  min-width: 0; /* 최소 너비 제한 없음 */
}
.todo-timeline__label[data-v-c568aeee] {
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}
.todo-timeline__label--delayed[data-v-c568aeee] {
  color: var(--ink-danger);
  font-weight: bold;
}
.todo-timeline__value[data-v-c568aeee] {
  color: var(--ink-primary);
  white-space: nowrap;
}
.todo-timeline__value--delayed[data-v-c568aeee] {
  color: var(--ink-danger);
  font-weight: bold;
}
.todo-timeline__separator[data-v-c568aeee] {
  color: var(--ink-muted);
  margin: 0 var(--gap-glyph);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-meta);
  line-height: var(--line-none);
}
.todo-timeline__separator i[data-v-c568aeee] {
  font-size: var(--icon-toolbar);
  opacity: 0.7;
}
.todo-timeline__divider[data-v-c568aeee] {
  color: var(--ink-muted);
  margin: 0 var(--gap-inline);
  font-weight: var(--weight-title);
}
.todo-timeline__consumption[data-v-c568aeee] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* todo-timeline__prev-button → AppButton secondary sm */

/* todo-timeline__status-button → AppButton secondary sm */
.todo-timeline__progress-slider-wrapper[data-v-c568aeee] {
  position: relative;
  width: 150px;
  flex-shrink: 0;
}

/* 슬라이더의 모양(굵기·손잡이·색)은 AppSlider 가 갖는다 — 여기서 다시 칠하지 않는다.
   ⛔ 한때 이 자리에 트랙 높이와 ::-webkit-slider-thumb / ::-moz-range-thumb 규칙이 남아 있었다.
      표준 컨트롤과 **같은 요소를 두고 겹쳐** 이겼다 졌다 하면서, 화면에는 표준 트랙(초록) 위에
      옛 손잡이(빨강)가 얹힌 뒤죽박죽이 떴다(사용자 지적 2026-09-03). 「지연」은 색을 칠해
      나타내는 것이 아니라 :tone 으로 **선언**한다. */

/* 모바일 헤더 토글 */
.todo-header-toggle[data-v-c568aeee] {
  display: none;
}
@media (max-width: 768px) {
.todo-header-toggle[data-v-c568aeee] {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    cursor: pointer;
    padding: var(--space-tight) 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.todo-header-toggle .todo-timeline__todo-id[data-v-c568aeee] {
    font-weight: var(--weight-strong);
    font-size: var(--size-body);
    color: var(--ink-primary);
}
.todo-header-toggle__progress[data-v-c568aeee] {
    font-size: var(--size-label);
    font-weight: var(--weight-title);
}
.todo-header-toggle .fa-chevron-down[data-v-c568aeee],
  .todo-header-toggle .fa-chevron-up[data-v-c568aeee] {
    font-size: var(--icon-marker);
    color: var(--ink-secondary);
    margin-left: auto;
    transition: transform var(--motion-base) ease;
}
.todo-edit-page__header--collapsed[data-v-c568aeee] {
    padding: var(--pad-row);
}
.todo-edit-page__header--collapsed .todo-timeline__todo-id[data-v-c568aeee] {
    /* 펼침 상태의 타임라인 안 #ID 숨기기 (토글에 이미 표시) */
}
.todo-edit-page__header[data-v-c568aeee] {
    padding: var(--pad-panel);
}
.todo-timeline[data-v-c568aeee] {
    font-size: var(--size-label);
    gap: var(--gap-inline);
    margin-top: var(--gap-inline);
}
.todo-timeline__item--progress[data-v-c568aeee] {
    width: 100%;
    margin-top: var(--gap-inline);
    padding-top: var(--space-snug);
    border-top: var(--line-strong);
    margin-left: 0;
    justify-content: center; /* 모바일에서도 가운데 정렬 유지 */
}
.todo-timeline__status-controls[data-v-c568aeee] {
    justify-content: center; /* 모바일에서 줄바꿈 시 가운데 정렬 */
    margin-left: 0; /* 모바일에서 왼쪽 마진 제거 */
    width: 100%; /* 모바일에서 전체 너비로 확장 */
}
.todo-timeline__progress-slider-wrapper[data-v-c568aeee] {
    width: 100px;
}
}

/* 상태 변경 팝업 — 메시지(본문) */
.status-popup__message[data-v-c568aeee] {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
}

/* 상태 변경 팝업 스타일 */
.status-reason-group[data-v-c568aeee] {
  margin-top: var(--gap-inline);
}
.status-reason-label[data-v-c568aeee] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.status-reason-input[data-v-c568aeee] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  font-size: var(--size-label);
  font-family: inherit;
  transition: all var(--motion-base) ease;
}
.status-reason-input[data-v-c568aeee]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.status-reason-input[data-v-c568aeee]::-moz-placeholder {
  color: var(--ink-muted);
}
.status-reason-input[data-v-c568aeee]::placeholder {
  color: var(--ink-muted);
}

/* 사유 빠른 선택 — 레이아웃만 */
.status-reason-presets[data-v-c568aeee] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
}

/* status-popup__btn--cancel → AppButton secondary sm */

/* status-popup__btn--confirm → AppButton primary sm */

.parsing-content-page[data-v-f45be009] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
}
.state-msg[data-v-f45be009] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}

/* 헤더 (메타편집기 헤더 비주얼 그대로) */
.meta-header[data-v-f45be009] {
  flex: 0 0 auto;
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.meta-header__product-row[data-v-f45be009] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline) var(--gap-inline);
  flex-wrap: wrap;
}
.meta-header__product[data-v-f45be009] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.meta-header__doctype[data-v-f45be009] {
  display: inline-flex; align-items: center;
  font-size: var(--size-meta); color: var(--ink-info);
  background: var(--bg-info-soft);
  padding: var(--space-tight) var(--space-cozy); border-radius: 3px; /* dimensions-ignore: 문서유형 칩 고정 패딩 */
  font-weight: var(--weight-title);
}
.meta-header__details[data-v-f45be009] {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-stack); font-size: var(--size-body); color: var(--ink-secondary);
  flex-wrap: wrap;
}
.meta-header__left[data-v-f45be009] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
 /* dimensions-ignore: 파비콘 고정 크기 */
.meta-header__company[data-v-f45be009] { font-weight: var(--weight-title); color: var(--ink-primary);
}
.meta-header__file-info[data-v-f45be009] {
  font-family: var(--font-mono);
  font-size: var(--size-label); color: var(--ink-secondary);
}

/* 추출 상태바 */
.extraction-status[data-v-f45be009] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  padding: var(--space-cozy) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.extraction-status__icon[data-v-f45be009] { font-size: var(--icon-label); flex-shrink: 0; color: var(--ink-secondary);
}
.extraction-status__icon--done[data-v-f45be009] { color: var(--ink-success);
}
.extraction-status__text[data-v-f45be009] { font-size: var(--size-label); color: var(--ink-secondary); flex: 1; min-width: 0;
}
.extraction-status__text strong[data-v-f45be009] { color: var(--ink-primary); font-weight: var(--weight-title);
}
.extraction-status__percent[data-v-f45be009] {
  font-size: var(--size-label); color: var(--ink-brand);
  font-weight: var(--weight-title); font-variant-numeric: tabular-nums;
}
.extraction-status__btn[data-v-f45be009] { flex-shrink: 0;
}

/* 재파싱 진행 막대 (TodoWorkTypeMeta 와 동일) — flex-wrap 컨테이너에서 한 줄 전체 차지 */
.extraction-progress-bar[data-v-f45be009] {
  flex: 0 0 100%;
  height: var(--space-tight);
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.extraction-progress-fill[data-v-f45be009] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  transition: width var(--motion-slow);
}

/* 단계별 진행 체크리스트 — 모양은 공용 ExtractionSteps 소관, 여기서는 배치만 준다 */
.pc-extraction-steps[data-v-f45be009] {
  flex: 0 0 100%;
  margin-top: var(--gap-glyph);
}

/* 스타일 토글 자리 — 모양은 공통 부품(MetaStyleToggle)이 갖는다. */
.extraction-status__style-toggle[data-v-f45be009] {
  margin-left: auto;
}

/* split pane */
.vertical-split-container[data-v-f45be009] {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  width: 100%;
}
.resize-overlay[data-v-f45be009] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.left-pane[data-v-f45be009] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-iframe[data-v-f45be009] {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg-page);
}
.empty[data-v-f45be009] {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--ink-muted);
  gap: var(--gap-inline);
}
.right-pane[data-v-f45be009] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-pane > .meta-content-tree[data-v-f45be009] {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* swapped */
.vertical-split-container.swapped .left-pane[data-v-f45be009] { order: 3;
}
.vertical-split-container.swapped[data-v-f45be009] .vertical-split-resizer { order: 2;
}
.vertical-split-container.swapped .right-pane[data-v-f45be009] { order: 1;
}

/* 모바일 */
.pc-mobile-layout[data-v-f45be009] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-mobile-content[data-v-f45be009] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-mobile-content > .pdf-iframe[data-v-f45be009],
.pc-mobile-content > .empty[data-v-f45be009] {
  flex: 1 1 auto;
  min-height: 0;
}
.pc-mobile-layout .meta-header[data-v-f45be009] { padding: var(--space-snug) var(--space-cozy);
}
.pc-mobile-layout .meta-header__file-info[data-v-f45be009] { display: none;
}

/* 골격은 원본(ParsingContentView)의 .parsing-content-page 그대로 — 높이 사슬이 끊기면
   안쪽 판이 제 높이를 못 받아 원문이 찌그러진다. */
.extract-content-page[data-v-4e3bc718] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
}
/* 임베드된 상세(.lsd/.dgv/.stv)가 세로를 다 쓰도록 — TodoWorkTypeMetaReview 와 같다 */
.extract-content-page[data-v-4e3bc718] >  section {
  flex: 1;
  min-height: 0;
}
.state-msg[data-v-4e3bc718] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}

.month-nav[data-v-f12eb0aa] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-glyph);
}

.app-calendar[data-v-db3233d2] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.app-calendar__nav[data-v-db3233d2] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding-bottom: var(--space-cozy);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* 제목 슬롯이 있으면 좌(제목)–우(월 컨트롤) 한 줄 배치 */
.app-calendar__nav--split[data-v-db3233d2] {
  justify-content: space-between;
}
.app-calendar__nav-start[data-v-db3233d2] {
  display: flex;
  align-items: center;
  min-width: 0;
}
.app-calendar__nav-end[data-v-db3233d2] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.app-calendar__weekdays[data-v-db3233d2] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: var(--line-strong);
  border-bottom: none;
  border-radius: var(--radius-float) var(--radius-float) 0 0;
  background: var(--bg-hover);
  overflow: hidden;
}
.app-calendar__weekday[data-v-db3233d2] {
  padding: var(--space-snug);
  text-align: center;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.app-calendar__weekday--sun[data-v-db3233d2] { color: var(--ink-danger);
}
.app-calendar__weekday--sat[data-v-db3233d2] { color: var(--ink-info);
}
.app-calendar__grid[data-v-db3233d2] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  border: var(--line-strong);
  border-radius: 0 0 var(--radius-float) var(--radius-float);
  overflow: hidden;
}
.app-calendar__cell[data-v-db3233d2] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: var(--line-strong);
  border-bottom: var(--line-strong);
  /* 달력 칸은 테두리로 나뉜 **정사각 격자**다. */
  padding: var(--space-tight);  /* role-ignore: 표 칸(--pad-cell 4 8)처럼 좌우를 더 주면 날짜·표식이 한쪽으로 쏠린다 */
  overflow: hidden;
  cursor: pointer;
  transition: background var(--motion-fast);
}

/* 마지막 열·마지막 행의 중복 보더 제거 */
.app-calendar__cell[data-v-db3233d2]:nth-child(7n) { border-right: none;
}
.app-calendar__cell[data-v-db3233d2]:nth-last-child(-n + 7) { border-bottom: none;
}
.app-calendar__cell[data-v-db3233d2]:hover { background: var(--bg-hover);
}

/* 읽기 전용 — 클릭/포커스 비활성, 정보 표시 전용 */
.app-calendar--readonly .app-calendar__cell[data-v-db3233d2] { cursor: default;
}
.app-calendar--readonly .app-calendar__cell[data-v-db3233d2]:hover { background: transparent;
}
.app-calendar--readonly .app-calendar__cell--out[data-v-db3233d2]:hover { background: var(--bg-field);
}
.app-calendar__cell[data-v-db3233d2]:focus-visible {
  outline: var(--focus-ring-width) solid rgba(var(--ink-brand-rgb), 0.5);
  outline-offset: -1px;
}
.app-calendar__cell--out[data-v-db3233d2] { background: var(--bg-field);
}
.app-calendar__cell--out .app-calendar__daynum[data-v-db3233d2] { color: var(--ink-muted);
}

/* 오늘 — 날짜 숫자에 윤곽 원 */
.app-calendar__cell--today .app-calendar__daynum[data-v-db3233d2] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  font-weight: var(--weight-strong);
}

/* 선택일 — 아주 옅은 배경 + 흐린 테두리 (채운 뱃지 아님, 1/3 톤다운) */
.app-calendar__cell--selected[data-v-db3233d2] {
  background: rgba(var(--ink-brand-rgb), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-brand-rgb), 0.33);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
.app-calendar__cell--selected[data-v-db3233d2]:hover { background: rgba(var(--ink-brand-rgb), 0.04);
}
.app-calendar__cell--selected .app-calendar__daynum[data-v-db3233d2] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.app-calendar__cell-head[data-v-db3233d2] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.app-calendar__daynum[data-v-db3233d2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border: var(--line-w) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.app-calendar__cell--sun .app-calendar__daynum[data-v-db3233d2] { color: var(--ink-danger);
}
.app-calendar__cell--sat .app-calendar__daynum[data-v-db3233d2] { color: var(--ink-info);
}

/* 하루에 표식이 여러 개면 칸 높이를 넘긴다 —
   ⛔ 잘라내면 그날 무슨 일이 있었는지 **아무 표시 없이** 사라진다(실측 2026-08-18:
   자동파싱 회차가 시간마다 쌓여 두 번째 칩부터 반쯤 잘린 채 끝났다). 넘치는 만큼 스크롤한다.
   스크롤바는 전역 스타일(style.css)의 6px 얇은 것이라 칸을 잡아먹지 않는다. */
.app-calendar__cell-body[data-v-db3233d2] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 통계 패널 — 전체 상품 현황 차트 */
.count-stats__title[data-v-a0a4b90a] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}

/* 차트 카드 */
/* 차트 담는 칸 — 원래부터 테두리·배경 없이 차트만 보이게 한 자리다(border: none 명시).
   ⛔ 여기에 경계를 넣지 않는다: 차트가 이미 제 모양으로 영역을 알린다. */
.chart-card[data-v-a0a4b90a] {
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}
.loading-overlay[data-v-a0a4b90a] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-float);
  opacity: 0.9;
  z-index: 10;
  border-radius: var(--radius-control);
}
.loading-overlay i[data-v-a0a4b90a] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
}
.chart-content[data-v-a0a4b90a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
@media (min-width: 768px) {
.chart-content[data-v-a0a4b90a] {
    flex-direction: row;
    align-items: stretch;
}
}
.chart-wrapper[data-v-a0a4b90a] {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-container[data-v-a0a4b90a] {
  width: 100%;
  height: 280px;
}

/* 통계 카드 */
.stats-wrapper[data-v-a0a4b90a] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  justify-content: center;
}
.stats-grid[data-v-a0a4b90a] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-inline);
}
.stat-card[data-v-a0a4b90a] {
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  transition: all var(--motion-base);
}
.stat-card[data-v-a0a4b90a]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-card--total[data-v-a0a4b90a] {
  background: var(--bg-page);
}
.stat-card--on-sale[data-v-a0a4b90a] {
  background: var(--bg-success-soft);
  border-left: var(--line-accent) solid var(--ink-success);
}
.stat-card--off-sale[data-v-a0a4b90a] {
  background: var(--bg-field);
  border-left: var(--line-accent) solid var(--ink-muted);
}
.stat-label[data-v-a0a4b90a] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.stat-value[data-v-a0a4b90a] {
  font-size: var(--size-display-sm);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  text-align: right;
}
.stat-card--on-sale .stat-value[data-v-a0a4b90a] {
  color: var(--ink-success);
}
.stat-card--off-sale .stat-value[data-v-a0a4b90a] {
  color: var(--ink-muted);
}
.stat-sublabel[data-v-a0a4b90a] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  text-align: right;
}

/* 회사명 셀 */
.company-cell[data-v-a0a4b90a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}


/* 판매중/판매중지 값 색상 */
.value-on-sale[data-v-a0a4b90a] {
  color: var(--ink-success);
  font-weight: var(--weight-label);
}
.value-off-sale[data-v-a0a4b90a] {
  color: var(--ink-muted);
  font-weight: var(--weight-label);
}

/* 판매 비율 표시 */
.ratio-display[data-v-a0a4b90a] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
}
.ratio-text[data-v-a0a4b90a] {
  font-size: var(--size-meta);
  min-width: 2rem;
}
.ratio-bar[data-v-a0a4b90a] {
  width: 4rem;
  height: 0.375rem;
  background: var(--bg-page);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ratio-fill[data-v-a0a4b90a] {
  height: 100%;
  background: var(--ink-success);
  border-radius: var(--radius-pill);
  transition: width var(--motion-base);
}

/* ── 본문 목록 ──
   ⛔ **여기서 목록에 높이를 박지도, 판을 굴리지도 않는다** (접수 MSHOP-202609-0005).
   스크롤은 **목록이 갖는다** — ListScreen 기본(scroll='body')이라 ListBody 가 남는
   자리를 flex 로 채우고 제 안에서 굴러간다. 이 화면만의 규칙이 아니라 목록 화면 48개 중
   46개가 그렇다(원본: AdminParsingJobs — 통계 카드 + 목록).
   ⛔ scroll='page' 로 되돌리지 말 것: 판이 굴러가면 목록 스크롤과 겹쳐 세로 막대가 둘로 선다. */

/* 반응형 — 좁은 화면에서 차트 축소 */
@media (max-width: 768px) {
.chart-wrapper[data-v-a0a4b90a],
  .chart-container[data-v-a0a4b90a] {
    min-height: 160px;
    height: 160px;
}

  /* 판매중/판매중지 카드는 모바일에서도 2열 유지 (카드가 2개뿐이라 좁아도 가독성 충분) */
.stats-grid[data-v-a0a4b90a] {
    grid-template-columns: repeat(2, 1fr);
}
.stat-card[data-v-a0a4b90a] {
    padding: var(--pad-tile);
}
.stat-value[data-v-a0a4b90a] {
    font-size: var(--size-title);
}
}

/* 본문(차트 영역) — ListScreen body 안에서 남는 높이를 채우고 내부 스크롤 */
.trend-body[data-v-a2586246] {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 스크롤 영역 */
.charts-scroll-area[data-v-a2586246] {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

/* 그룹 */
.chart-group[data-v-a2586246] {
  flex-shrink: 0;
}
.chart-group-header[data-v-a2586246] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: 0 var(--space-tight);
  margin-bottom: var(--gap-inline);
}
.chart-group-title[data-v-a2586246] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.chart-group-count[data-v-a2586246] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-muted);
  background: var(--bg-field);
  border-radius: var(--radius-card);
  padding: var(--pad-badge);
}

/* 높이는 AppChart 가 토큰(--h-chart-lg = 320px)으로 갖는다 — 여기서 다시 적지 않는다. */
.trend-chart-container[data-v-a2586246] {
  width: 100%;
}

/* 로딩 오버레이 */
.loading-overlay[data-v-a2586246] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-float);
  z-index: 10;
  opacity: 0.8;
}
.loading-overlay i[data-v-a2586246] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
}

/* 빈 상태 */
.empty-state[data-v-a2586246] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
  text-align: center;
}
.empty-icon-wrapper[data-v-a2586246] {
  width: 4rem;
  height: 4rem;
  background: var(--bg-page);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap-band);
}
.empty-icon-wrapper i[data-v-a2586246] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
  opacity: 0.5;
}
.empty-title[data-v-a2586246] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
}
.empty-desc[data-v-a2586246] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  margin-top: var(--gap-inline);
}

.company-cell[data-v-9144dccc] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  white-space: nowrap;
}
.product-link[data-v-9144dccc] {
  color: var(--ink-brand);
  cursor: pointer;
  text-decoration: none;
  /* 긴 상품명은 셀 안에서 줄바꿈 — nowrap 이면 다음 컬럼을 침범한다 */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.product-link[data-v-9144dccc]:hover {
  text-decoration: underline;
}

/* 유형 — 길면 셀 안에서 줄바꿈 (inner nowrap 이 ListBody 셀 기본 줄바꿈을 막지 않도록) */
.type-cell[data-v-9144dccc] {
  overflow-wrap: anywhere;
}
.name-suffix[data-v-9144dccc] {
  margin-left: var(--gap-glyph);
}

/* 예상개정일 — 좁아지면 날짜와 주기가 줄바꿈(다음 컬럼 침범 방지) */
.revision-cell[data-v-9144dccc] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--gap-glyph);
}
.revision-date[data-v-9144dccc] {
  white-space: nowrap;
}
.cycle-label[data-v-9144dccc] {
  /* 「(3개월)」 — 앞의 개정일에 딸린 글이라 크기를 절대값으로 박지 않는다.
     전역 .text-aside 가 상대 사다리(--font-rel-sm)와 색을 준다. */
  white-space: nowrap;
}
.doc-icons[data-v-9144dccc] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 문서 유형 인터랙티브 링크(약/사/요) — 클릭 시 문서 뷰어로 이동. */
.doc-type-link[data-v-9144dccc] {
  cursor: pointer;
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  transition: opacity var(--motion-fast);
  line-height: var(--line-snug);
}
.doc-type-link[data-v-9144dccc]:hover {
  opacity: 0.8;
}
.doc-type-link--terms[data-v-9144dccc] {
  background: var(--bg-brand-soft);
  color: var(--ink-brand);
}
.doc-type-link--business[data-v-9144dccc] {
  background: var(--bg-accent-orange-soft);
  color: var(--ink-accent-orange);
}
.doc-type-link--summary[data-v-9144dccc] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
}

/* 통계 패널 — 예측 배지 + AI 인사이트 + 요약 카드 + 차트를 세로로 쌓는다 */
.monthly-stats[data-v-557324da] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.forecast-row[data-v-557324da] {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ── AI 인사이트 ── */
.insight-card[data-v-557324da] {
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-tile);
  border-left: var(--line-accent) solid var(--ink-accent-indigo);
}
.insight-header[data-v-557324da] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin-bottom: var(--gap-stack);
}
.insight-header i[data-v-557324da] {
  color: var(--ink-accent-indigo);
}
.forecast-tag[data-v-557324da] {
  font-size: var(--size-meta);
  padding: var(--pad-badge);
  background: var(--bg-warning-soft);
  color: var(--ink-warning);
  border-radius: var(--radius-card);
}
.insight-skeleton[data-v-557324da] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.skeleton-line[data-v-557324da] {
  height: 14px;
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  animation: pulse-557324da 1.5s ease-in-out infinite;
}
.skeleton-line.short[data-v-557324da] {
  width: 60%;
}
.skeleton-hint[data-v-557324da] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}
@keyframes pulse-557324da {
0%, 100% { opacity: 0.4;
}
50% { opacity: 0.8;
}
}
.insight-text[data-v-557324da] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.insight-text[data-v-557324da] p {
  margin: var(--gap-glyph) 0;
}
.insight-text[data-v-557324da] strong {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.ai-loading-hint[data-v-557324da] {
  margin-top: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-accent-indigo);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.fade-enter-active[data-v-557324da] { transition: opacity var(--motion-base) ease;
}
.fade-enter-from[data-v-557324da] { opacity: 0;
}

/* ── 요약 카드 ── */
.summary-section[data-v-557324da] {
  display: flex;
  gap: var(--gap-stack);
  align-items: stretch;
}
.summary-cards[data-v-557324da] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-stack);
  flex: 1;
}
.summary-card[data-v-557324da] {
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-tile);
  transition: all var(--motion-base);
}
.summary-card[data-v-557324da]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.summary-label[data-v-557324da] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.summary-value[data-v-557324da] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.summary-sub[data-v-557324da] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-top: var(--gap-glyph);
}
.contract-split[data-v-557324da] {
  display: flex;
  gap: var(--gap-inline);
}
.cards-3[data-v-557324da] {
  grid-template-columns: repeat(3, 1fr) !important;
}
.card-new[data-v-557324da] {
  border-left: var(--line-accent) solid var(--ink-brand);
}
.card-new .summary-value[data-v-557324da] {
  color: var(--ink-brand);
}
.card-revised[data-v-557324da] {
  border-left: var(--line-accent) solid var(--ink-warning);
}
.card-revised .summary-value[data-v-557324da] {
  color: var(--ink-warning);
}
.card-total[data-v-557324da] {
  border-color: var(--ink-accent-indigo);
  background: var(--bg-accent-indigo-soft);
}
.card-total .summary-value[data-v-557324da] {
  color: var(--ink-accent-indigo);
  font-weight: var(--weight-strong);
}
.forecast-card[data-v-557324da] {
  border-color: var(--ink-warning);
  background: var(--bg-warning-soft);
}
.forecast-card .summary-label i[data-v-557324da] {
  color: var(--ink-warning);
}
.value-up[data-v-557324da] { color: var(--ink-success) !important;
}
.value-down[data-v-557324da] { color: var(--ink-danger) !important;
}
.trend-mini-wrapper[data-v-557324da] {
  min-width: 200px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-cozy);
  background: var(--bg-page);
}
.trend-mini-label[data-v-557324da] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
  text-align: center;
}
.trend-mini-chart[data-v-557324da] {
  flex: 1;
  min-height: 90px;
}

/* ── 차트 ── */
.charts-section[data-v-557324da] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-stack);
}
.chart-panel[data-v-557324da] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}
.chart-title[data-v-557324da] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0 0 var(--gap-glyph) 0;
}
.chart-subtitle[data-v-557324da] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0 0 var(--gap-stack) 0;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.chart-click-hint[data-v-557324da] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-brand);
  opacity: 0.6;
  font-size: var(--size-label);
}
.chart-container[data-v-557324da] {
  width: 100%;
}
.bar-chart[data-v-557324da] {
  height: 360px;
}
.donut-chart[data-v-557324da] {
  height: 360px;
}

/* ── 차트 필터 행 ── */
.chart-filter-row[data-v-557324da] {
  display: flex;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}
.filter-close[data-v-557324da] {
  cursor: pointer;
  opacity: 0.7;
  margin-left: var(--gap-glyph);
}
.filter-close[data-v-557324da]:hover {
  opacity: 1;
}

/* ── 보기 전환 (리스트/달력) — 너비 전체로 균등 분할 ── */
.body-view-bar[data-v-557324da] {
  margin-bottom: var(--gap-stack);
}
.body-view-bar[data-v-557324da] .tab-nav {
  width: 100%;
}

/* 리스트 보기 래퍼는 레이아웃에 투명 — ListBody 가 변경 전처럼 ListScreen body 의 직속처럼 동작.
   (v-show 의 display:none 은 인라인으로 우선 적용되어 숨김도 정상 작동) */
.monthly-list-view[data-v-557324da] {
  display: flex;
  flex-direction: column;
  height: clamp(420px, 70vh, 920px);
}
.monthly-list-view[data-v-557324da] .list-body {
  flex: 1;
  min-height: 0;
}

/* ── 달력 보기 ── */
/* ── 본문 높이 — 달력과 목록이 **같은 높이**를 쓴다 (사용자 확정 2026-09-04) ──
   이 화면은 통계 구획이 680px 이라 한 창에 통계+본문이 안 들어간다. 그래서 판이 함께 굴러가고
   (`scroll='page'`), 본문은 제 높이를 갖는다:
     · 달력 — 한 달이 **통째로** 보여야 하므로 이 높이가 달력 한 판의 크기다.
     · 목록 — 같은 높이를 차지하고 **그 안에서 굴러간다**(넘치는 줄은 목록 스크롤로 본다).
   ⛔ 둘의 높이가 다르면 리스트↔달력을 오갈 때마다 아래 내용이 위아래로 덜컹인다. */
.monthly-calendar[data-v-557324da] {
  display: flex;
  flex-direction: column;
  height: clamp(420px, 70vh, 920px);
}

/* 일별 건수 — 하나의 박스(AppBadge): 23(신10 개13). 클릭 시 그 날짜 목록 팝업. */
.cal-day[data-v-557324da] {
  display: flex;
  padding-top: var(--space-tight);
}
.cal-box[data-v-557324da] { cursor: pointer; max-width: 100%;
}
.cal-box[data-v-557324da]:hover { filter: brightness(1.15);
}
/* 좁은 셀에서 한 줄로 잘리지 않게 줄바꿈 (반응형) */
.cal-box__inner[data-v-557324da] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--gap-glyph);
}
/* 상품수 — 크게 */
.cal-box__total[data-v-557324da] {
  color: var(--ink-primary);
  font-weight: var(--weight-strong);
  font-size: var(--size-body);
}
/* 신/개/예상 — 작게 */
.cal-box__new[data-v-557324da],
.cal-box__rev[data-v-557324da],
.cal-box__fc[data-v-557324da] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
}
.cal-box__new[data-v-557324da] { color: var(--ink-brand);
}
.cal-box__rev[data-v-557324da] { color: var(--ink-warning);
}
.cal-box__fc[data-v-557324da] { color: var(--ink-warning);
}
.cal-box__fc i[data-v-557324da] { margin-right: var(--gap-glyph);
}
/* 회사 수 — 작게, 보조색 */
.cal-box__company[data-v-557324da] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.cal-box__company i[data-v-557324da] { margin-right: var(--gap-glyph);
}

/* ── 일자 팝업 목록 (표준 ListBody) ── */
.day-modal__body[data-v-557324da] {
  height: min(60vh, 560px);
}

/* ── 목록 ── */
/* ⛔ **여기서 목록에 높이를 박지도, 판을 굴리지도 않는다** (접수 MSHOP-202609-0005).
   스크롤은 **목록이 갖는다** — ListScreen 기본(scroll='body')이라 ListBody 가 남는 자리를
   flex 로 채우고 제 안에서 굴러간다(.monthly-list-view 는 display:contents 라 통과시킨다).
   ⛔ scroll='page' 로 되돌리지 말 것: 판이 굴러가면 세로 막대가 둘로 선다. */

/* 회사/상품/유형/문서 셀 스타일은 MonthlyReleaseList.vue 로 이전 (메인 리스트·팝업 공통) */

/* ── 반응형 ── */
@media (max-width: 1024px) {
.charts-section[data-v-557324da] {
    grid-template-columns: 1fr;
}
.summary-cards[data-v-557324da] {
    grid-template-columns: repeat(2, 1fr);
}
}

/* 모바일 — 통계 패널이 차지하는 세로 공간을 줄여서 하단 카드 목록이 화면에서 사라지지 않도록 한다.
   stats-default-open 을 모바일에서는 false 로 둬 첫 진입 시 본문이 바로 보이지만,
   사용자가 통계 토글을 켰을 때도 통계+본문이 한 번의 스크롤로 잡히도록 압축한다. */
@media (max-width: 768px) {
  /* 통계 패널 내부 간격 축소 */
.monthly-stats[data-v-557324da] {
    gap: var(--gap-inline);
}
.summary-section[data-v-557324da] {
    flex-direction: column;
    gap: var(--gap-inline);
}
.summary-cards[data-v-557324da] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-inline);
}

  /* 요약 카드 자체도 컴팩트하게 */
.summary-card[data-v-557324da] {
    padding: var(--pad-tile);
}
.summary-value[data-v-557324da] {
    font-size: var(--size-title-sm);
}
.trend-mini-wrapper[data-v-557324da] {
    max-width: none;
    padding: var(--space-snug);
}
.trend-mini-chart[data-v-557324da] {
    min-height: 60px;
}

  /* 차트 높이 추가 축소 — 220px 였던 것을 180px 로 더 줄여 두 개 합쳐도 데스크톱(2열 360px) 수준 유지 */
.bar-chart[data-v-557324da],
  .donut-chart[data-v-557324da] {
    height: 180px;
}

  /* 차트 패널 패딩도 축소(좌우 여백 확보) */
.chart-panel[data-v-557324da] {
    padding: var(--space-cozy);
}
.chart-title[data-v-557324da] {
    font-size: var(--size-body);
    margin: 0 0 var(--gap-glyph) 0;
}
.chart-subtitle[data-v-557324da] {
    font-size: var(--size-label);
    margin: 0 0 var(--gap-inline) 0;
}
.charts-section[data-v-557324da] {
    gap: var(--gap-inline);
}
.insight-card[data-v-557324da] {
    padding: var(--pad-tile);
}
.insight-header[data-v-557324da] {
    margin-bottom: var(--gap-inline);
    font-size: var(--size-label);
}
.insight-text[data-v-557324da] {
    font-size: var(--size-label);
}
}

/* 초소형 화면 — 차트 높이만 더 압축, 카드는 2열 유지 */
@media (max-width: 480px) {
.bar-chart[data-v-557324da],
  .donut-chart[data-v-557324da] {
    height: 160px;
}
}

/* Reuse shared styles for consistency */
.page[data-v-c88f21b0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-c88f21b0] {
  margin: 0;
}
.page__desc[data-v-c88f21b0] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-c88f21b0] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}
/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-c88f21b0],
.page__card > .tab-nav[data-v-c88f21b0] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-c88f21b0] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-c88f21b0] {
    padding: var(--space-snug);
}
}
.statistics-page-root[data-v-c88f21b0] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important;
}
.statistics-page[data-v-c88f21b0] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
  position: relative; /* 첫 방문 안내 큐(.help-cue) 앵커 */
}
.statistics-page__tabs[data-v-c88f21b0] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* 도움말(아이콘 전용) 탭은 탭 바 맨 오른쪽 끝으로 밀어 배치 — 라벨 탭은 그대로 좌측 유지 (모바일 전용) */
.statistics-page__tabs[data-v-c88f21b0] .tab-nav__tab--icon-only {
  margin-left: auto;
}
.statistics-page__tab-panels[data-v-c88f21b0] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
  padding: 0;
}
.statistics-page__tab-panel[data-v-c88f21b0] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
/* ───── 데스크톱 분할 레이아웃 (좌 콘텐츠 | 중앙분리대 | 우 도움말) ───── */
.statistics-page__split.vertical-split-container[data-v-c88f21b0] {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  width: 100%;
}
/* 드래그 중 좌측 차트/iframe 위 이벤트 차단 */
.resize-overlay[data-v-c88f21b0] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}
.left-pane[data-v-c88f21b0] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-pane[data-v-c88f21b0] {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.help-pane[data-v-c88f21b0] {
  background: var(--bg-page);
  border-left: var(--line-strong);
}
/* ───── 첫 방문 안내 큐 — 도움말이 있다는 걸 잠깐 알리는 작은 핀 ───── */
.help-cue[data-v-c88f21b0] {
  position: absolute;
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-radius: var(--radius-pill);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
}
/* 데스크톱 위치는 desktopCueStyle(인라인)로 — 분리대 경계 왼쪽에서 우측 도움말을 가리킴 */
/* 모바일: 탭 바 바로 아래 우측 — 위 화살표가 도움말 탭을 가리킴 */
.help-cue--mobile[data-v-c88f21b0] {
  top: var(--space-snug);
  right: var(--space-cozy);
}
.help-cue__arrow[data-v-c88f21b0] {
  /* ⛔ 상시 표시는 steps() 로 (2026-08-29 실측). 매끄러운 타이밍은 초당 60번
     다시 그리게 만들어, 7px 점 하나로도 CPU 20%를 태운다. steps 로 드문 갱신. */
  animation: help-cue-blink-c88f21b0 1.1s steps(4) infinite;
}
@keyframes help-cue-blink-c88f21b0 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.3;
}
}
.help-cue-fade-enter-active[data-v-c88f21b0],
.help-cue-fade-leave-active[data-v-c88f21b0] {
  transition: opacity var(--motion-base) ease;
}
.help-cue-fade-enter-from[data-v-c88f21b0],
.help-cue-fade-leave-to[data-v-c88f21b0] {
  opacity: 0;
}
/* 화면 탭 바는 본문과 같은 세로선에서 시작한다(shared.css 와 같은 규칙 — 이 화면은
   shared.css 를 import 하지 않으므로 여기에 둔다). 밑줄 띠는 그대로 끝까지 간다. */
.statistics-page__tabs[data-v-c88f21b0] >  .tab-nav {
  padding-inline: var(--pad-page-x);
}

.schedule-page-root[data-v-eb553fec] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  gap: 0 !important;
}
.schedule-page[data-v-eb553fec] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--pad-card);
  background: transparent;
  border: none;
}
.schedule-page__title[data-v-eb553fec] {
  margin: 0;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}

.doc-picker-panel[data-v-86f27cb9] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: min(70vh, 600px);
  padding: var(--pad-panel);
}

/* 부모(.compare-result__diff-cell)가 flex 라 flex 아이템으로 자리를 채우게 한다.
   min-width:0 이 없으면 넓은 표가 컬럼을 밀어내 좌우 폭이 어긋난다. */
.compare-table[data-v-91fd1e8c] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.compare-table--nested[data-v-91fd1e8c] {
  margin-top: var(--gap-glyph);
}
.compare-table__table[data-v-91fd1e8c] {
  border-collapse: collapse;
  border: var(--line-strong);
  font-size: var(--size-meta);
  width: 100%;
  table-layout: fixed;
}
.compare-table__cell[data-v-91fd1e8c] {
  border: var(--line-strong);
  padding: var(--pad-cell);
  color: var(--ink-primary);
  vertical-align: top;
  word-break: break-word;
  white-space: pre-line;
}

/* 셀 단위 차이 — 행 전체 배경(diff-row) 위에 얹히므로 은은하게만 */
.compare-table__cell--changed[data-v-91fd1e8c] {
  background: var(--bg-warning-soft);
}
.compare-table__cell--only-a[data-v-91fd1e8c] {
  background: var(--bg-danger-soft);
}
.compare-table__cell--only-b[data-v-91fd1e8c] {
  background: var(--bg-success-soft);
}
.compare-table__del[data-v-91fd1e8c] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
  text-decoration: line-through;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.compare-table__ins[data-v-91fd1e8c] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}

/* ── 전체 레이아웃 ── */
.compare-result[data-v-4be44b3d] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── 헤더 ── */
.compare-result__header[data-v-4be44b3d] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--pad-row);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  min-height: 48px;
}
.compare-result__title[data-v-4be44b3d] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  white-space: nowrap;
}
.compare-result__header-right[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-left: auto;
  flex-shrink: 1;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
.compare-result__stats[data-v-4be44b3d] {
  display: flex;
  gap: var(--gap-inline);
}
.compare-result__stat[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-badge);
  border-radius: var(--radius-card);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
}
.compare-result__stat--changed[data-v-4be44b3d] { background: var(--bg-warning-soft); color: var(--ink-warning-hover);
}
.compare-result__stat--added[data-v-4be44b3d]   { background: var(--bg-success-soft); color: var(--ink-success-hover);
}
.compare-result__stat--removed[data-v-4be44b3d] { background: var(--bg-danger-soft);  color: var(--ink-danger);
}
.compare-result__stat--equal[data-v-4be44b3d]   { background: var(--bg-success-soft); color: var(--ink-success-hover);
}

/* 다른 부분만 / 모두 보기 */
.compare-result__toggle-style-row[data-v-4be44b3d] {
  display: contents;
}

/* 컨트롤 묶음(토글 + PDF토글 + 재파싱) — 폰에서 줄바꿈 시 묶음 단위로 우측 정렬 */
.compare-result__controls-group[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.compare-result__toggle-group[data-v-4be44b3d] {
  display: inline-flex;
  height: var(--h-control-sm);
  /* 부모 border 제거 — 각 버튼이 자기 border 를 가지고 1px 겹쳐서 공유 */
}
.compare-result__toggle-btn[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: 0 var(--space-cozy);
  border: var(--line-strong);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--motion-fast) ease;
  position: relative;
  box-sizing: border-box;
}

/* 두번째 버튼은 좌측 1px 만큼 겹쳐 — 디바이더가 두께 1px 이 되고 양쪽 폭 동일 */
.compare-result__toggle-btn + .compare-result__toggle-btn[data-v-4be44b3d] {
  margin-left: var(--gap-glyph);
}
.compare-result__toggle-btn[data-v-4be44b3d]:first-child {
  border-radius: var(--radius-control) 0 0 var(--radius-control);
}
.compare-result__toggle-btn[data-v-4be44b3d]:last-child {
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.compare-result__toggle-btn--active[data-v-4be44b3d] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  /* 활성 버튼의 border 가 비활성 위로 올라와 윤곽이 보이도록 */
  z-index: 1;
  /* --border-color 가 다크모드에서 너무 어두워 녹색 vs 페이지 bg 사이에 묻힘 → 더 contrast 있는 색 사용 */
  border-color: var(--ink-muted);
}

/* 태그 필터 split-button (메인=태그 보유 토글 / 드롭다운=특정 태그 픽커) */
.compare-result__tag-filter-group[data-v-4be44b3d] {
  display: inline-flex;
  align-items: stretch;
  gap: var(--gap-glyph); /* dimensions-ignore: 분리선 두께 */
}
.compare-result__tag-filter-group[data-v-4be44b3d] .compare-result__tag-filter-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.compare-result__tag-filter-group[data-v-4be44b3d] .compare-result__tag-filter-dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: var(--space-tight);
  padding-right: var(--space-tight);
}

/* 선택 태그 수 배지 — pill 단일 숫자가 큰 원이 되지 않도록 축소 (메타편집기와 동일) */
.compare-result__tag-filter-main[data-v-4be44b3d] .compare-result__tag-filter-count {
  margin-left: var(--gap-glyph);
  padding: 0 var(--space-tight);
  min-width: var(--space-roomy);
  font-size: var(--size-meta);
  line-height: var(--line-none);
}

/* diff 행의 태그 칩 — 메타편집기 콘텐츠 태그와 동일 시각 (색상=태그 색, 읽기 전용) */
.compare-result__tags[data-v-4be44b3d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  margin-left: auto;        /* 셀(flex row) 안에서 태그를 오른쪽 끝으로 정렬 */
  padding-left: var(--space-snug);     /* 본문과 간격 */
  justify-content: flex-end;
  flex-shrink: 0;
}
.compare-result__tag[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-cell);
  border: var(--line-w) solid transparent;
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  line-height: var(--line-snug);
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 한쪽 문서에만 있는 태그 — 채움 대신 외곽선(태그색) + A/B 표식으로 비대칭을 드러냄 */
.compare-result__tag--one-side[data-v-4be44b3d] {
  background: transparent;
  border-style: dashed;
}

/* 병합 행 칩의 좌우 표식: AB(양쪽)/A(좌측만)/B(우측만) — 칩 글자색 그대로 쓰는 텍스트
   (배경 채움은 색 충돌로 안 보이던 문제가 있어 텍스트 + 구분선 방식으로) */
.compare-result__tag-side[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  padding-right: var(--space-tight);
  border-right: var(--line-w) solid currentColor;
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  line-height: var(--line-snug);
  letter-spacing: 0.03em;
  opacity: 0.8;
}

/* 불일치 순회 네비게이션 */
.compare-result__diff-nav[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-sm);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: 0 var(--space-tight);
  box-sizing: border-box;
}
.compare-result__diff-nav-btn[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control-xs);
  height: var(--h-control-xs);
  border: none;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}
.compare-result__diff-nav-btn[data-v-4be44b3d]:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.compare-result__diff-nav-btn[data-v-4be44b3d]:disabled {
  opacity: 0.3;
  cursor: default;
}
.compare-result__diff-nav-pos[data-v-4be44b3d] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  min-width: 3.5em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-result__sync-label[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
}

/* 메타 스타일 토글(MetaStyleToggle) 자리 — 모양은 공통 부품이 갖는다. */
.compare-result__style-toggle[data-v-4be44b3d] {
  height: var(--h-control-sm);
}

/* PDF 표시/숨김 — 화면 구조를 직관적으로 보여주는 아이콘 토글
   showPdf=true: view_week(3컬럼: PDF|diff|PDF)  /  false: crop_square(단일) */
.compare-result__doc-label[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-badge);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  flex-shrink: 0;
}

/* 파비콘 모양은 CompanyFavicon 이 정한다(크기는 size prop) — 여기선 인라인 정렬/간격만. */
.compare-result__title-favicon[data-v-4be44b3d] {
  vertical-align: middle;
  margin-right: var(--gap-glyph);
}

/* ── 문서 미선택 상태 ── */
.compare-result__empty-state[data-v-4be44b3d] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-band);
  padding: var(--space-wide);
}
.compare-result__doc-slots[data-v-4be44b3d] {
  display: flex;
  gap: var(--gap-band);
  width: 100%;
  max-width: 680px;
}
.compare-result__doc-slot[data-v-4be44b3d] {
  flex: 1;
  min-height: 90px;
  border: var(--line-w-thick) dashed var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.compare-result__doc-slot[data-v-4be44b3d]:hover {
  border-color: var(--ink-brand);
  background: var(--bg-hover);
}
.compare-result__doc-slot--filled[data-v-4be44b3d] {
  border-style: solid;
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}
.compare-result__slot-placeholder[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.compare-result__slot-info[data-v-4be44b3d] {
  flex: 1;
  min-width: 0;
}
.compare-result__slot-name[data-v-4be44b3d] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-result__slot-meta[data-v-4be44b3d] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}
.compare-result__slot-change[data-v-4be44b3d] {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-label);
  transition: all var(--motion-fast) ease;
}
.compare-result__slot-change[data-v-4be44b3d]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
}
.compare-result__start-btn[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border: none;
  border-radius: var(--radius-card);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  cursor: pointer;
  transition: opacity var(--motion-fast) ease;
}
.compare-result__start-btn[data-v-4be44b3d]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.compare-result__start-btn[data-v-4be44b3d]:not(:disabled):hover {
  opacity: 0.9;
}

/* ── 상태 메시지 ── */
.compare-result__status[data-v-4be44b3d] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  padding: var(--space-wide);
  color: var(--ink-secondary);
  font-size: var(--size-body);
}
.compare-result__status > i[data-v-4be44b3d] { font-size: var(--icon-lead); opacity: 0.6;
}
.compare-result__status--error[data-v-4be44b3d] { color: var(--ink-danger);
}


/* ── 추출 진행 UI ── */
.compare-result__extracting[data-v-4be44b3d] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-band);
  padding: var(--space-wide) var(--space-wide);
}
.compare-result__extracting-title[data-v-4be44b3d] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
}
.compare-result__extract-items[data-v-4be44b3d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  width: 100%;
  max-width: 480px;
}
.compare-result__extract-item[data-v-4be44b3d] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-panel);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.compare-result__extract-item-header[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-body);
}
.compare-result__extract-item-name[data-v-4be44b3d] {
  flex: 1;
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-result__extract-status[data-v-4be44b3d] { font-size: var(--size-label); flex-shrink: 0;
}
.compare-result__extract-status--done[data-v-4be44b3d]    { color: var(--ink-success);
}
.compare-result__extract-status--failed[data-v-4be44b3d]  { color: var(--ink-danger);
}
.compare-result__extract-status--skipped[data-v-4be44b3d] { color: var(--ink-secondary);
}
.compare-result__extract-status--extracting[data-v-4be44b3d] { color: var(--ink-brand);
}
.compare-result__extract-status--pending[data-v-4be44b3d] { color: var(--ink-secondary);
}
.compare-result__extract-bar-wrap[data-v-4be44b3d] {
  height: 6px;
  background: var(--bg-hover);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.compare-result__extract-bar[data-v-4be44b3d] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  transition: width var(--motion-base) ease;
}
.compare-result__extract-bar--done[data-v-4be44b3d] { background: var(--ink-success);
}
.compare-result__extract-message[data-v-4be44b3d] {
  font-size: var(--size-meta);
  color: var(--ink-danger);
}

/* ── 3열 본문 ── */
.compare-result__body-wrap[data-v-4be44b3d] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 통합 타이틀 바 */
.compare-result__title-bar[data-v-4be44b3d] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: 36px;
  padding: var(--pad-control);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.compare-result__title-doc[data-v-4be44b3d] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.compare-result__title-doc--right[data-v-4be44b3d] {
  justify-content: flex-end;
}
.compare-result__title-info[data-v-4be44b3d] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-glyph) var(--gap-inline);
}
.compare-result__title-info--right[data-v-4be44b3d] {
  justify-content: flex-end;
  align-content: flex-end;
  text-align: right;
}
.compare-result__title-meta--right[data-v-4be44b3d] {
  justify-content: flex-end;
}
.compare-result__title-meta[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.compare-result__title-tag[data-v-4be44b3d] {
  flex-shrink: 0;
}
.compare-result__title-docid[data-v-4be44b3d] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-result__title-date[data-v-4be44b3d] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  white-space: nowrap;
  opacity: 0.85;
}
.compare-result__title-name[data-v-4be44b3d] {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.compare-result__title-doc--right .compare-result__title-name[data-v-4be44b3d] {
  text-align: right;
}
.compare-result__title-center[data-v-4be44b3d] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.compare-result__title-sep[data-v-4be44b3d] {
  flex-shrink: 0;
  font-size: var(--size-body);
  color: var(--ink-secondary);
  opacity: 0.5;
  padding: 0 var(--space-tight);
}
.compare-result__body[data-v-4be44b3d] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* ── PDF 패널 ── */
.compare-result__pdf-pane[data-v-4be44b3d] {
  flex: 0 0 30%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: var(--line-strong);
  overflow: hidden;
}
.compare-result__pdf-pane[data-v-4be44b3d]:last-child {
  border-right: none;
  border-left: var(--line-strong);
}
.compare-result__pdf-pane-header[data-v-4be44b3d] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  font-size: var(--size-label);
  min-height: 34px;
}
.compare-result__pdf-pane-name[data-v-4be44b3d] {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.compare-result__pdf-pane-change[data-v-4be44b3d] {
  flex-shrink: 0;
}
.compare-result__pdf-iframe[data-v-4be44b3d] {
  flex: 1 1 0;
  width: 100%;
  border: none;
  display: block;
}

/* ── Diff 패널 ── */
.compare-result__diff-pane[data-v-4be44b3d] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 필터 검색 바 ── */
.compare-result__filter[data-v-4be44b3d] {
  flex-shrink: 0;
  padding: var(--space-tight) var(--space-tight);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.compare-result__filter-bar[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex: 1;
  min-width: 0;
}

/* 검색 입력창은 공통 AppSearchInput find-mode — 카운터·네비 버튼 내장, 폭을 채운다. */
.compare-result__filter-bar[data-v-4be44b3d] .app-search {
  flex: 1;
  min-width: 0;
}

/* 키워드 인라인 하이라이트 */
.compare-result__highlight[data-v-4be44b3d] {
  background: var(--bg-mark);
  color: inherit;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}

/* 검색 매칭 행 배경 */
.compare-result__diff-row--filter-match[data-v-4be44b3d] {
  background: var(--bg-warning-soft);
}
.compare-result__diff-row--filter-match[data-v-4be44b3d]:hover {
  background: var(--bg-warning-soft);
}

/* 현재 검색 매칭 행 — 주황색 강조 */
.compare-result__diff-row--filter-current[data-v-4be44b3d] {
  background: var(--bg-accent-orange-soft);
}
.compare-result__diff-row--filter-current[data-v-4be44b3d]:hover {
  background: var(--bg-accent-orange-soft);
}
.compare-result__diff-col-headers[data-v-4be44b3d] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-w-thick) solid var(--line-color);
  background: var(--bg-page);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  min-height: var(--h-control-md);
  overflow: hidden;
}
.compare-result__diff-col-name[data-v-4be44b3d] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.compare-result__diff-col-sep[data-v-4be44b3d] {
  flex-shrink: 0;
  color: var(--ink-muted);
  opacity: 0.6;
  font-size: var(--size-label);
}
.compare-result__doc-label-sm[data-v-4be44b3d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-badge);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
  flex-shrink: 0;
}
.compare-result__diff-content[data-v-4be44b3d] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.compare-result__diff-list[data-v-4be44b3d] {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  outline: none;
}

/* ── 디프 미니맵 ── */
.compare-result__minimap[data-v-4be44b3d] {
  flex: 0 0 10px;
  position: relative;
  background: var(--bg-page);
  border-right: var(--line-strong);
  cursor: pointer;
}
.compare-result__minimap-mark[data-v-4be44b3d] {
  position: absolute;
  left: 1px;
  right: 1px;
  min-height: 2px;
  cursor: pointer;
  z-index: 1;
}
.compare-result__minimap-mark--changed[data-v-4be44b3d] {
  background: var(--ink-warning);
}
.compare-result__minimap-mark--added[data-v-4be44b3d] {
  background: var(--ink-success);
}
.compare-result__minimap-mark--removed[data-v-4be44b3d] {
  background: var(--ink-danger);
}

/* 뷰포트 박스: 실제 보이는 범위를 정확히 표시 (부풀리지 않음) */
.compare-result__minimap-viewport[data-v-4be44b3d] {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg-info-soft);
  border-top: var(--line-w) solid var(--ink-info-hover);
  border-bottom: var(--line-w) solid var(--ink-info-hover);
  pointer-events: none;
  z-index: 2;
}
.compare-result__diff-empty[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-wide);
  color: var(--ink-success);
  font-size: var(--size-label);
}
.compare-result__equal-group[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background var(--motion-fast) ease;
}
.compare-result__equal-group[data-v-4be44b3d]:hover { background: var(--bg-hover);
}
.compare-result__diff-row[data-v-4be44b3d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--h-control-sm);
  cursor: default;
  border-bottom: var(--line-strong);
}
.compare-result__diff-row--has-pos[data-v-4be44b3d] { cursor: pointer;
}
.compare-result__diff-row--has-pos[data-v-4be44b3d]:hover { filter: brightness(0.96);
}
.compare-result__diff-row--selected[data-v-4be44b3d] {
  outline: var(--focus-ring-width) solid var(--ink-brand);
  outline-offset: -2px;
  z-index: 1;
}

/* equal / resegmented: 단일 컬럼, 흐리게 */
.compare-result__diff-row--equal[data-v-4be44b3d] {
  grid-template-columns: 1fr;
  opacity: 0.45;
}
.compare-result__diff-row--equal[data-v-4be44b3d]:hover {
  opacity: 0.75;
}
.compare-result__diff-cell--merged[data-v-4be44b3d] {
  padding: var(--pad-cell);
}

/* changed */
.compare-result__diff-row--changed[data-v-4be44b3d] {
  background: var(--bg-warning-soft);
}
.compare-result__diff-row--changed .compare-result__diff-cell--a[data-v-4be44b3d] {
  border-left: var(--line-accent) solid var(--ink-danger);
  background: var(--bg-danger-soft);
}
.compare-result__diff-row--changed .compare-result__diff-cell--b[data-v-4be44b3d] {
  border-left: var(--line-accent) solid var(--ink-success);
  background: var(--bg-success-soft);
}

/* added */
.compare-result__diff-row--added .compare-result__diff-cell--a[data-v-4be44b3d] {
  background: var(--bg-success-soft);
}
.compare-result__diff-row--added .compare-result__diff-cell--b[data-v-4be44b3d] {
  border-left: var(--line-accent) solid var(--ink-success);
  background: var(--bg-success-soft);
}

/* removed */
.compare-result__diff-row--removed .compare-result__diff-cell--a[data-v-4be44b3d] {
  border-left: var(--line-accent) solid var(--ink-danger);
  background: var(--bg-danger-soft);
}
.compare-result__diff-row--removed .compare-result__diff-cell--b[data-v-4be44b3d] {
  background: var(--bg-danger-soft);
}

/* 인라인 diff */
.idiff-del[data-v-4be44b3d] {
  background: var(--bg-danger-soft);
  color: var(--ink-danger);
  text-decoration: line-through;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.idiff-ins[data-v-4be44b3d] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.compare-result__diff-cell[data-v-4be44b3d] {
  padding: var(--pad-cell);
  min-height: var(--h-control-sm);
  display: flex;
  align-items: flex-start;
  word-break: break-word;
}
.compare-result__diff-cell--a[data-v-4be44b3d] { border-right: var(--line-strong);
}
.compare-result__diff-text[data-v-4be44b3d] {
  font-size: var(--size-label);
  line-height: var(--line-normal);
  color: var(--ink-primary);
  white-space: pre-wrap;
}
.compare-result__diff-text--heading[data-v-4be44b3d] {
  font-weight: var(--weight-title);
}
.compare-result__diff-text--table[data-v-4be44b3d] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}

/* 가로 정렬 — 셀이 flex 라 span 에 display:block + width:100% 보장 */
.compare-result__diff-text--align-center[data-v-4be44b3d] {
  display: block;
  width: 100%;
  text-align: center;
}
.compare-result__diff-text--align-right[data-v-4be44b3d] {
  display: block;
  width: 100%;
  text-align: right;
}
@media (max-width: 1024px) {
.compare-result__pdf-pane[data-v-4be44b3d] { display: none;
}
.compare-result__diff-text[data-v-4be44b3d] { font-size: var(--size-body);
}
.compare-result__title-bar[data-v-4be44b3d] { padding: var(--pad-cell); gap: var(--gap-glyph);
}
.compare-result__title-name[data-v-4be44b3d] { font-size: var(--size-meta);
}
.compare-result__header[data-v-4be44b3d] { gap: var(--gap-inline); padding: var(--space-tight) var(--space-cozy);
}
.compare-result__header-right[data-v-4be44b3d] { gap: var(--gap-inline);
}
.compare-result__toggle-btn[data-v-4be44b3d] { padding: 0 var(--space-snug); font-size: 0;
}
.compare-result__toggle-btn i[data-v-4be44b3d] { font-size: var(--icon-marker);
}
  /* PDF 패널 숨김 시 PDF 표시 토글(아이콘)도 숨김 (스타일 토글은 유지) */
.compare-result__pdf-icon-toggle[data-v-4be44b3d] { display: none;
}
.compare-result__style-toggle[data-v-4be44b3d] { display: inline-flex;
}
}

/* ── 모바일 (≤640px) ── */
@media (max-width: 768px) {
.compare-result__pdf-pane[data-v-4be44b3d] { display: none;
}

  /* 헤더: 세로 스택 */
.compare-result__header[data-v-4be44b3d] {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-snug) var(--space-snug);
    gap: var(--gap-inline);
    min-height: auto;
}
.compare-result__title[data-v-4be44b3d] {
    font-size: var(--size-body);
}
.compare-result__header-right[data-v-4be44b3d] {
    margin-left: 0;
    flex-shrink: 1;
    flex-wrap: wrap;
    gap: var(--gap-inline) var(--gap-inline);
    justify-content: flex-start;
    row-gap: var(--gap-inline);
}
  /* 컨트롤 묶음(토글/PDF/재파싱)은 항상 우측 정렬:
     - 한 줄이면 stats/diff-nav 우측에 붙음
     - 줄바꿈되면 두 번째 줄에서 우측 끝으로 정렬 (자체 justify-content: flex-end) */
.compare-result__controls-group[data-v-4be44b3d] {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

  /* 통계 뱃지 더 작게 */
.compare-result__stat[data-v-4be44b3d] {
    padding: var(--pad-cell);
    font-size: var(--size-meta);
}

  /* 토글 버튼: 아이콘만 표시 */
.compare-result__toggle-btn[data-v-4be44b3d] {
    padding: 0 var(--space-snug);
    font-size: var(--size-meta);
}
.compare-result__toggle-btn i[data-v-4be44b3d] {
    font-size: var(--icon-marker);
}

  /* 라디오버튼 + 스타일 토글을 한 줄에 배치 */
.compare-result__toggle-style-row[data-v-4be44b3d] {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    flex-wrap: nowrap;
}

  /* PDF 표시 토글 숨김 (PDF 패널 없으므로 불필요, 스타일 토글은 유지) */
.compare-result__pdf-icon-toggle[data-v-4be44b3d] { display: none;
}
.compare-result__style-toggle[data-v-4be44b3d] { display: inline-flex;
}

  /* 불일치 네비게이션 더 작게 */
.compare-result__diff-nav[data-v-4be44b3d] {
    height: var(--h-control-sm);
}
.compare-result__diff-nav-pos[data-v-4be44b3d] {
    font-size: var(--size-meta);
    min-width: 2.5em;
}

  /* 타이틀 바: 3열 → 세로 스택 */
.compare-result__title-bar[data-v-4be44b3d] {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-snug) var(--space-snug);
    gap: var(--gap-glyph);
    min-height: auto;
}
.compare-result__title-doc[data-v-4be44b3d] {
    justify-content: flex-start;
}
.compare-result__title-info[data-v-4be44b3d] {
    flex-direction: column;
    align-items: flex-start;
}
.compare-result__title-name[data-v-4be44b3d] {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compare-result__title-doc--right[data-v-4be44b3d] {
    justify-content: flex-end;
    border-top: var(--line-strong);
    padding-top: var(--space-tight);
}
.compare-result__title-info--right[data-v-4be44b3d] {
    justify-content: flex-end;
    text-align: right;
    align-items: flex-end;
}
.compare-result__title-doc--right .compare-result__title-name[data-v-4be44b3d] {
    text-align: right;
}
.compare-result__title-meta--right[data-v-4be44b3d] {
    justify-content: flex-end;
}
.compare-result__title-doc[data-v-4be44b3d] { order: 1;
}
.compare-result__title-doc--right[data-v-4be44b3d] { order: 2;
}
.compare-result__title-center[data-v-4be44b3d] {
    order: 3;
    align-self: center;
    gap: var(--gap-inline);
}
.compare-result__title-meta[data-v-4be44b3d] {
    flex-wrap: wrap;
}

  /* 검색바 더 작게 */
.compare-result__filter-bar[data-v-4be44b3d] {
    font-size: var(--size-meta);
}

  /* 미니맵 모바일 대응: 좁게 표시 */
.compare-result__minimap[data-v-4be44b3d] {
    flex: 0 0 8px;
}

  /* 디프 텍스트 */
.compare-result__diff-text[data-v-4be44b3d] {
    font-size: var(--size-label);
}
}

/* ── 추출 진행 다이얼로그 ── */
.compare-extract-dialog__items[data-v-4be44b3d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.compare-extract-dialog__item-header[data-v-4be44b3d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.compare-extract-dialog__item-info[data-v-4be44b3d] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.compare-extract-dialog__item-product[data-v-4be44b3d] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-extract-dialog__item-doctype[data-v-4be44b3d] {
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  background: var(--bg-float);
  border-radius: var(--radius-badge);
  padding: var(--pad-cell);
  white-space: nowrap;
  flex-shrink: 0;
}
.compare-extract-dialog__status[data-v-4be44b3d] {
  flex-shrink: 0;
  font-size: var(--size-label);
}
.compare-extract-dialog__status--done[data-v-4be44b3d],
.compare-extract-dialog__status--skipped[data-v-4be44b3d] {
  color: var(--ink-success);
}
.compare-extract-dialog__status--failed[data-v-4be44b3d] {
  color: var(--ink-danger);
}
.compare-extract-dialog__status--pending[data-v-4be44b3d],
.compare-extract-dialog__status--extracting[data-v-4be44b3d] {
  color: var(--ink-brand);
}
.compare-extract-dialog__bar-wrap[data-v-4be44b3d] {
  height: 3px;
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.compare-extract-dialog__bar[data-v-4be44b3d] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  transition: width var(--motion-base) ease;
}
.compare-extract-dialog__bar--done[data-v-4be44b3d] {
  background: var(--ink-success);
}

/* 단계 스텝퍼와 현재 상태 한 줄 — 진행바 바로 아래.
   메타편집기(넓은 화면)는 가로 스크롤로 현재 단계를 중앙에 두지만, 이 다이얼로그는
   폭이 좁아 그대로 두면 앞 단계가 잘려 나간다. 여기서는 6단계를 한 번에 보여주는 것이
   목적이므로 줄바꿈으로 바꾼다(컴포넌트 기본 동작은 건드리지 않는 국소 재정의). */
.compare-extract-dialog__item[data-v-4be44b3d] .extraction-steps {
  margin-top: var(--gap-inline);
  flex-wrap: wrap;
  white-space: normal;
  overflow-x: visible;
  row-gap: var(--gap-glyph);
}
.compare-extract-dialog__stage[data-v-4be44b3d] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline);
  margin-top: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.compare-extract-dialog__stage-text[data-v-4be44b3d] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-extract-dialog__stage-pct[data-v-4be44b3d] {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.compare-extract-dialog__title[data-v-4be44b3d] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
}


.compare-page-root[data-v-01929500] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ai-chat-page[data-v-ea3c061b] {
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
}
.ai-chat-container[data-v-ea3c061b] {
  flex: 1;
  height: 100%;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  position: relative;
}

/* ChatWindow 내부 스타일 오버라이드 */
[data-v-ea3c061b] .chat-window {
  border-left: none;
  /* flex: 1 to ensure it fills the container including proper shrinking */
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* 창 높이는 줄 수와 상관없이 그대로다 — 안에서 무엇을 하든 확인 자리가 안 움직인다. */
.msh[data-v-49411b0f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  height: 28rem;
}
.msh[data-v-49411b0f] .list-body { min-height: 0;
}
.msh__lead[data-v-49411b0f] { margin: 0; font-size: var(--size-meta); color: var(--ink-secondary);
}
.msh__when[data-v-49411b0f] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap;
}
.msh__what[data-v-49411b0f] { display: inline-flex; align-items: baseline; gap: var(--gap-inline); overflow-wrap: anywhere;
}
.msh__none[data-v-49411b0f] { font-size: var(--size-meta); color: var(--ink-muted);
}

.cf-group[data-v-314b224d] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
/* 겹침 — 앞선 로고가 위로 오게 쌓는다(z-index). 테두리 없이 -4px 만 물린다. */
.cf-group__item + .cf-group__item[data-v-314b224d] {
  /* ⛔ **음수다** — 사이가 아니라 겹침이다. 부호가 사라지면 로고 하나마다 8px 씩 넓어져 좁은 칸에서 넘친다. */
  margin-left: calc(-1 * var(--gap-glyph));
}
.cf-group__item[data-v-314b224d] {
  position: relative;
}
/* 채도 낮춤은 CompanyFavicon 의 muted 가 담당(낱개와 같은 규칙). 여기선 셀 전체에 마우스가
   올라오면 함께 원색으로 — 파비콘 하나하나에 정확히 올릴 필요가 없게. */
.cf-group--muted[data-v-314b224d]:hover .company-favicon {
  filter: none;
  opacity: 1;
}
/* +N — 한 덩어리. ⛔ 좁은 컬럼에서 두 줄로 눌리지 않게 nowrap 유지. */
.cf-group__more[data-v-314b224d] {
  margin-left: var(--gap-glyph);
  padding: 0 var(--space-tight);
  border-radius: var(--radius-pill);
  background: var(--bg-field);
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-secondary);
}

.mcc[data-v-93fb8c2a] { height: 72vh; display: flex; flex-direction: column;
}
/* inline 모드 — 우측 패널 높이를 꽉 채운다(모달의 72vh 대신 부모 100%). */
.mcc--inline[data-v-93fb8c2a] { height: 100%;
}
.mcc[data-v-93fb8c2a] > * { flex: 1; min-height: 0;
}
.mcc__msg[data-v-93fb8c2a] { padding: var(--space-band); text-align: center; color: var(--ink-secondary);
}
.mcc__msg--err[data-v-93fb8c2a] { color: var(--ink-danger);
}

.mgo[data-v-1beefd18] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-width: 0;
}
.mgo__desc[data-v-1beefd18] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.mgo__srclist[data-v-1beefd18] {
  margin: 0;
  padding: var(--space-snug) var(--space-cozy);
  list-style: none;
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  max-height: 160px;
  overflow-y: auto;
}
.mgo__srcitem[data-v-1beefd18] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  padding: var(--space-tight) 0;
}
.mgo__label[data-v-1beefd18] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.mgo__row[data-v-1beefd18] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.mgo__row[data-v-1beefd18] .app-input { flex: 1;
}
.mgo__add[data-v-1beefd18] { align-self: flex-start;
}
/* 나누기 — 멤버 칩(다중선택) + 옮길 위치 */
.mgo__members[data-v-1beefd18] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-tight);
}
.mgo__target[data-v-1beefd18] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.mgo__radios[data-v-1beefd18] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}

/* 재추출 확인 — 한 번 묻는 작은 판. 팝오버라 화면을 덮지 않는다. */
.mi-benefit-confirm[data-v-cf382053] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  /* max-width 는 상한일 뿐이라 패널이 내용에 맞춰 쪼그라든다 — 134px 까지 줄어
     '팩터값을 다시 추출할까요?' 가 세 줄로 접혔다(실측 2026-08-22). 한 줄로 서게 하한을 준다. */
  min-width: 16rem;
}
.mi-benefit-confirm__lead[data-v-cf382053] {
  margin: 0;
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.mi-benefit-confirm__actions[data-v-cf382053] {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-inline);
}

/* ⛔ **말줄임을 여기서 박지 않는다**(사용자 지적 2026-08-17 「테이블 속성이 … 줄임이 아닌데
   썡뚱맞게 줄임을 해」). 넘침 처리는 **컬럼 설정**(ListColumn.overflow · 설정 모달에서 사람이
   고른다)이 정하고, 셀은 그 결정을 덮지 않는다. 여기서 nowrap+ellipsis 를 박아 두면 기본값
   (wrap = 접어서 다 보임)이 통째로 무시돼, 뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 됐다
   (실측: 「상해및질병통합치료비(연간1천만원한도)(태아보장용) …」 여섯 줄이 모두 같아 보임).
   ⚠️ min-width:0 은 남긴다 — flex 자식이 내용보다 작아질 수 있어야 컬럼 폭이 지켜진다. */
.mi-title[data-v-cf382053] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  min-width: 0;
  /* 원문 줄바꿈을 그대로 — 약관·특약 제목은 조판이 끊은 자리가 뜻을 가진다
     (한 줄에 특약 하나씩 콤마로 쌓은 조판). 추출기가 그 줄바꿈을 제목에 남긴다. */
  white-space: pre-line;
}
/* 이름변경 연필 — '작업' 컬럼.
   ⛔ 제목 옆으로 되돌리지 말 것 — 이름 옆에 계속 떠 목록이 지저분하다는 지적(사용자 지시 2026-08-01).
   ⛔ 여기서 흐리게(opacity) 만들지 말 것 — 옆에 ⚡·휴지통이 나란히 서면서 **이것만 흐린** 아이콘이
      되어 한 줄이 제각각으로 보였다(사용자 지적 2026-08-15). 톤은 AppActionButton 이 소유한다. */
.mi-rename-btn[data-v-cf382053] {
  flex-shrink: 0;
  vertical-align: middle;
}
/* 그룹 제목 링크 — 클릭 시 내용 상세로 이동. 밑줄은 hover 에서만(목록 노이즈 방지). */
.mi-title--link[data-v-cf382053] {
  cursor: pointer;
}
.mi-title--link[data-v-cf382053]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
/* 구성 컬럼 — 멤버 메타 수(그룹=N, 개별=1). 링크 아님(행 클릭이 내용상세). 강조색/아이콘 없이 숫자만. */
.mi-comp[data-v-cf382053] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 그냥 세는 수는 목록 어디서나 --text-secondary 한 벌이다(.mi-num 과 같은 단).
     여기만 --text-primary 라 같은 줄의 '구성'만 희게 튀었다
     (2026-08-22 lint:sameness 적발). 색이 뜻을 지는 수는 .mi-linknum 쪽이다. */
  color: var(--ink-secondary);
}
/* 상세(내용/사용)의 메타명 컬럼 — 그룹 멤버 구분(일반형/갱신형).
   긴 이름은 …축약 대신 줄바꿈(사용자 요청). */
/* 메타명 — 제목(.mi-title)·상품명(.mi-product)과 같은 한 줄 말줄임 정책.
   ⛔ white-space: normal 로 되돌리지 말 것 — 이름 계열 셀만 여러 줄이 되어 행 높이가 들쭉날쭉했다.
      잘린 전체 값은 셀의 title 툴팁에서 본다(양쪽 사용처 모두 title 부착). */
.mi-metaname[data-v-cf382053] {
  color: var(--ink-primary);
  font-size: var(--size-label);
  display: block;
  min-width: 0;
  white-space: pre-line;   /* 제목의 원문 줄바꿈 유지 — .mi-title 과 같은 이유 */
}

/* 비교로 고른 두 제목에서 **서로 다른 자리**. 좌는 좌 칩 색, 우는 우 칩 색으로 물들여
   목록의 어느 쪽 이야기인지 색만 보고 알게 한다(사용자 요청 2026-08-20 — 이름이 길어
   눈으로 차이를 찾는 것이 일이었다). 글자 단위라 '5'↔'9' 한 글자도 짚는다. */
.mi-tdiff[data-v-cf382053] {
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
  font-weight: var(--weight-title);
}
.mi-tdiff--left[data-v-cf382053] {
  background: color-mix(in srgb, var(--bg-brand-vivid) 22%, transparent);
  color: var(--ink-brand);
}
.mi-tdiff--right[data-v-cf382053] {
  background: color-mix(in srgb, var(--ink-info) 22%, transparent);
  color: var(--ink-info);
}

/* 사용 기간 — 판매 개시~종료. 숫자 정렬 고정폭, 한 줄 유지. */
/* 사용 기간 — 세 목록 모두 한 줄. 컬럼 폭(PERIOD_W/PERIOD_MINW)이 'YYYY-MM-DD ~ YYYY-MM-DD' 를
   담도록 잡혀 있고, 그래도 모자라면 두 줄로 접히는 대신 말줄임(전체 값은 툴팁).
   ⛔ white-space: normal 로 되돌리지 말 것 — 같은 값이 목록마다 한 줄/두 줄로 갈렸다(사용자 지적).
   예전에 nowrap 이 옆 컬럼을 덮은 건 overflow 처리가 없었기 때문이라 여기서 함께 막는다. */
.mi-period[data-v-cf382053] {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  /* 날짜·시각은 목록 어디서나 14px — .cell-datetime 과 같은 단 */
  font-size: var(--size-body);
  white-space: nowrap;
  min-width: 0;
}

/* 평범한 인라인 — inline-flex 로 두면 box 의 합성 baseline 이 첫 자식(img) 바닥이
   되어 외부 텍스트와 내부 텍스트의 베이스라인이 어긋남. 인라인 + favicon vertical-align
   으로 외부 텍스트와 같은 베이스라인을 자연 공유. */
.mi-company[data-v-cf382053] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  max-width: 100%;
}
/* 카드형 전용 — 표에서는 파비콘만 두므로 이 이름은 카드에서만 렌더된다. */
.mi-company__name[data-v-cf382053] {
  min-width: 0;
}

/* 첫 방문 힌트 배너 — 상세 목록 행 클릭 안내. 한 번 닫으면 기억되어 다시 안 뜬다. */
.mi-hint[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  margin-bottom: var(--gap-inline);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.mi-hint__icon[data-v-cf382053] { color: var(--ink-brand); flex: 0 0 auto;
}
.mi-hint__text[data-v-cf382053] { flex: 1; min-width: 0;
}
.mi-hint__close[data-v-cf382053] { flex: 0 0 auto; margin-left: auto;
}

/* 평범한 inline — inline-block 으로 두면 box 의 합성 baseline 이 자기 margin-box
   바닥이 되어 외부 텍스트 baseline 보다 위로 떠 보임. ellipsis 는 metaitem 단위에서
   잡으므로 여기서 따로 처리 불필요. */
.mi-product[data-v-cf382053] {
  color: var(--ink-secondary);
  display: block;
  min-width: 0;
}
.mi-num[data-v-cf382053] {
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* 비교 좌/우 픽커 — 행별 [좌][우] 칩. 활성 칩(현재 픽)이 색으로 표시. */
.mi-cmp-pick[data-v-cf382053] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 내용/건수 클릭 링크 (숫자). 내용=강조색. */
.mi-linknum[data-v-cf382053] {
  font-variant-numeric: tabular-nums;
  color: var(--ink-brand);
  cursor: pointer;
  border-bottom: var(--line-w) dashed var(--ink-brand);
  white-space: nowrap;
}
.mi-linknum--content[data-v-cf382053] {
  color: var(--ink-warning);
  border-color: var(--ink-warning);
  font-weight: var(--weight-title);
}
/* 사용 화면 해시 셀 — 클릭하면 내용 메인으로 이동. 배지 자체 색은 유지하고 커서만 링크로. */
.mi-hashlink[data-v-cf382053] {
  cursor: pointer;
}
/* 회사 파비콘 — 겹치지 않고 약간의 간격으로 나란히 나열. */

/* 위치 표시(브레드크럼) — 좌측 목록 상단. 현재 위치 = 선택한 메타그룹. */
/* 브레드크럼 — 한 줄이 기본. 폭이 부족할 때만 컨트롤(토글+재파싱)이 통째로 다음 줄로 내려간다.
   정체성(루트›제목[배지])은 nowrap 한 덩어리라 제목이 먼저 ellipsis 로 줄어 루트가 홀로 남지 않는다. */
.mi-crumb[data-v-cf382053] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--gap-glyph);
  gap: var(--gap-inline);
  /* 왼쪽은 비우지 않는다 — 돌아가는 단추가 아래 건수·찾기와 같은 세로선에서 시작해야
     머리줄이 들쭉날쭉해 보이지 않는다(사용자 지시 2026-08-23). */
  padding: var(--space-snug) var(--space-cozy) var(--space-snug) 0;
  border-bottom: var(--line-strong);
  /* 구분선 아래 여백은 툴바 **아래** 여백(툴바→찾기 16px)과 같아야 한다 — 판이 주는 8px 에
     8px 을 더한다. 안 그러면 툴바가 위로 붙어 위아래가 어긋나 보인다(사용자 지적 2026-08-23). */
  margin-bottom: var(--gap-inline);
  background: var(--bg-page);
  flex-shrink: 0;
  /* 그리드 헤더 행(hcell 44px + head-clip 하단 보더 1px)과 구분선 y 통일. */
  min-height: calc(var(--h-row) + 1px);
  /* ⛔ `--font-size-sm` 은 **없는 이름**이었다(진짜 이름은 `--font-sm`) — 없는 토큰을 쓰면
     그 속성만 조용히 사라져, 이 머리줄만 본문 크기(14px)로 커진 채 세 상세(13px)와 어긋났다.
     tokens.md 「이름을 틀리면 조용히 무너진다」의 그 사고다. */
  font-size: var(--size-label);
}
/* 정체성 덩어리 — 남는 폭 차지(flex:1)해 컨트롤을 우측으로 밀고, 좁으면 제목이 ellipsis 로 줄어든다. */
.mi-crumb__id[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  flex: 0 1 auto; /* 콘텐츠 폭 — 뒤의 배지+토글(meta)이 제목 바로 오른쪽에 붙게. 좁으면 제목 ellipsis */
}
/* 돌아가는 길 — 평상시에도 링크 색이라야 누를 수 있음이 읽힌다(hover 에서야 드러나면 늦다).
   `.mi-crumb` 를 앞세워 AppButton 의 ghost 색(--text-secondary)보다 구체성을 높인다. */
.mi-crumb .mi-crumb__root[data-v-cf382053] {
  flex-shrink: 0;
  color: var(--ink-brand);
  /* 글자는 제목(mi-crumb__title)과 같은 단·굵기 — 한 줄에 선 두 이름이 서로 다른 글자면
     같은 층으로 안 읽힌다(사용자 지시 2026-08-23). 색만 링크로 갈린다. */
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  /* 단추 제 몫의 왼쪽 여백도 없앤다 — 화살표가 판의 맨 왼쪽에 붙는다. */
  padding-left: 0;
}
/* 마우스를 올리면 화살표가 가는 쪽(왼쪽)으로 한 걸음 나간다 — 어디로 데려가는지를 움직임으로 말한다.
   글자는 제자리에 두고 화살표만 움직인다(줄 전체가 흔들리지 않게). */
.mi-crumb .mi-crumb__root i[data-v-cf382053] {
  transition: transform var(--motion-fast);
}
.mi-crumb .mi-crumb__root:not(:disabled):hover i[data-v-cf382053] {
  transform: translateX(calc(var(--space-tight) * -1));
}
/* 움직임을 덜 원하는 사용자에게는 움직이지 않는다. */
@media (prefers-reduced-motion: reduce) {
.mi-crumb .mi-crumb__root i[data-v-cf382053],
  .mi-crumb .mi-crumb__root:not(:disabled):hover i[data-v-cf382053] {
    transition: none;
    transform: none;
}
}
/* 밑줄은 긋지 않는다 — 색과 화살표의 움직임만으로 충분하다(사용자 지시 2026-08-23). */
.mi-crumb .mi-crumb__root[data-v-cf382053]:not(:disabled):hover {
  color: var(--ink-brand);
}
/* 그룹 크럼(› 제목[배지])만 제목이 길 수 있어 줄어들 수 있게 허용. */
.mi-crumb__root--group[data-v-cf382053] {
  flex-shrink: 1;
  min-width: 0;
}
.mi-crumb__sep[data-v-cf382053] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
  flex-shrink: 0;
}
.mi-crumb__cur[data-v-cf382053] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  flex-shrink: 1; /* 좁은 패널에서 제목이 먼저 줄도록 */
}
/* 약관 배지 + 내용/사용 토글 묶음 — id(부품정보 › 제목)의 형제. 넓으면 제목 오른쪽 같은 줄,
   좁으면 통째로 다음 줄(= 부품정보 › 제목 줄 아래, 좌측 정렬)로 내려간다(mi-crumb 가 flex-wrap). */
.mi-crumb__meta[data-v-cf382053] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  row-gap: var(--gap-glyph);
  flex: 0 1 auto;
  min-width: 0;
  /* 아주 좁은 패널(분리대를 끝까지 끌었을 때)에서는 묶음 안에서도 줄바꿈 — 배지/해시가 잘려나가지 않게.
     요소 자체(뱃지·토글)는 나뉘지 않고 요소 사이에서만 줄이 바뀐다. */
  flex-wrap: wrap;
}
.mi-crumb__title[data-v-cf382053] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 3ch; /* 완전 소멸 방지 하한 */
}
/* 컨트롤 — 토글. 우측 정렬. 좁으면 통째로 다음 줄(그때도 우측). */
/* 이동·닫기 — 한 벌로 붙여 둔다(사이 간격을 좁혀 세 단추가 한 덩어리로 읽히게). */
.mi-crumb__nav[data-v-cf382053] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.mi-crumb__ctrls[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
  margin-left: auto;
}
.mi-crumb__mode[data-v-cf382053] {
  flex-shrink: 0;
}
/* 상세의 카드형 정렬 — 내용/사용 토글 오른쪽. 좁은 폭에서 눌리지 않게 축소 금지. */
.mi-crumb__sort[data-v-cf382053] {
  flex-shrink: 0;
}

/* split 컨테이너 — 좌(목록) | 분리대 | 우(PDF) */
.mi-split[data-v-cf382053] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  /* ⚠️ 자식(좌측 목록 하한·우측 px 폭)이 컨테이너를 밀어 넓히지 못하게 고정 —
     분리대 드래그가 컨테이너 rect 를 기준으로 우측 폭을 키우는 자기증폭 루프(무한 확장) 차단.
     좌측 하한 초과분은 ListBody 내부 가로 스크롤이 흡수한다. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /* 분리대 z-index 를 dropdown(1000) 아래로 낮춤 — 검색 자동완성이 분리대 버튼 위에 올라가야 함.
     resize-overlay(5) 보다 높기만 하면 < > = 버튼은 정상 클릭. */
  --z-splitter: 999;
}
.mi-split__left[data-v-cf382053] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.mi-split__right[data-v-cf382053] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-page);
}

/* 내용 판의 탭 줄 — [약관 ｜ 팩터값] + 오른쪽 끝에 「스타일/텍스트」(내용 탭에서만). */
.mi-pane-tabs[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
  padding-inline-end: var(--space-snug);
  border-bottom: var(--line-strong);
}
.mi-pane-tabs[data-v-cf382053] .tab-nav {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}
.mi-pane-tabs__toggle[data-v-cf382053],
.mi-pane-tabs__collab[data-v-cf382053] {
  flex-shrink: 0;
}
.mi-factor-tab[data-v-cf382053] {
  flex: 1;
  min-height: 0;
}

/* 내용보기 3단 대조 — 우측 패널 안 [내용 트리 ｜ 공통 분리대 ｜ 약관 원문 PDF].
   ⚠️ .vertical-split-container 의 flex-row 는 TodoWorkTypeMeta 에 scoped 라 여기엔 안 먹으므로
   flex-row 를 직접 준다(외부 .mi-split 도 자체 CSS 로 row). 두 pane 은 :style 로 폭(내용=%, 약관=px)
   지정 → 공통 VerticalSplitter 가 드래그로 조절. */
.mi-clause3[data-v-cf382053] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}
.mi-clause3__pane[data-v-cf382053] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mi-clause3__warn[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-warning-soft);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  line-height: var(--line-snug);
  border-bottom: var(--line-strong);
}
.mi-clause3__warntext[data-v-cf382053] {
  flex: 1;
  min-width: 0;
}
.mi-clause3__pdfhead[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
}
.mi-clause3__pdf .mi-pdf[data-v-cf382053] {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
}
.mi-clause3__nopdf[data-v-cf382053] {
  flex: 1;
  padding: var(--pad-card);
  text-align: center;
}
.mi-pdf-header[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
  /* 좌측 브레드크럼·그리드 헤더·도킹 도움말 헤더와 구분선 y 통일 (border-box 라 보더 1px 포함분 +1px) */
  min-height: calc(var(--h-row) + 1px);
}
.mi-pdf-header__title[data-v-cf382053] {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
/* 내용 보기: 메타편집기와 동일한 추출상태 바 (해시 + N건 + 토글 + 닫기) */
.mi-content-bar[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
  min-height: calc(var(--h-row) + 1px);
}
.mi-content-bar__text[data-v-cf382053] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  /* ⚠️ 남는 자리를 글자가 먹어야 오른쪽 단추들이 오른쪽 끝에 선다.
     예전엔 「스타일/텍스트」가 margin-left:auto 로 그 일을 했는데, 그것을 아래 탭 줄로
     옮기면서 단추들이 글자 바로 뒤로 딸려 왔다(2026-08-22). 미는 일은 글자가 맡는다. */
  flex: 1;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-content-bar__btn[data-v-cf382053],
.mi-content-bar__close[data-v-cf382053] {
  flex-shrink: 0;
}
/* 좁은 화면 — **한 줄에 다 못 넣는다.**
   ⛔ 한 줄로 버티면 남는 자리를 글자 칸이 다 내주고, 그 안의 배지가 **글자 가운데서 잘린다**
      (2026-08-23 실측 390px: 해시 배지가 'c006' 까지만 보이고 오른쪽이 잘려 나갔다).
      배지는 말줄임이 통하지 않는 덩어리라 잘리면 무슨 값인지 알 길이 없다.
   그래서 좁아지면 **글자 줄과 단추 줄로 나눈다** — 참조법령·분류표 상세가 이미 그 모양이다. */
@media (max-width: 768px) {
  /* 오른쪽 판(원본 문서·팩터값)을 보는 동안은 **목록 전용 머리띠가 자리를 비운다.**
     좁은 화면에서 두 판은 탭으로 갈아 끼워지므로 이때 목록은 이미 가려져 있는데,
     그 목록의 건수 줄·툴바·찾기는 그대로 남아 상세를 눌렀다 — 실측 2026-08-31(390×844):
     팩터값 목록에 **26px** 만 남아 값을 한 줄도 못 봤다.
     ⛔ 지우는 게 아니라 자리만 비운다(display) — 「부품정보 목록」 탭으로 돌아가면 그대로 선다.
     ⛔ 돌아가는 길(브레드크럼)과 옆 메타로 옮기는 ‹ › 는 상세에서도 쓰는 것이라 남긴다. */
.mi--mobile-detail[data-v-cf382053] .list-screen__header,
  .mi--mobile-detail[data-v-cf382053] .list-screen__filters {
    display: none;
}
  /* 목록을 고르고 정렬하는 컨트롤도 같은 이유로 자리를 비운다(브레드크럼 줄 안). */
.mi--mobile-detail .mi-crumb__mode[data-v-cf382053],
  .mi--mobile-detail .mi-crumb__sort[data-v-cf382053] {
    display: none;
}
.mi-content-bar[data-v-cf382053] {
    flex-wrap: wrap;
}
.mi-content-bar__text[data-v-cf382053] {
    flex: 1 1 100%;
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    row-gap: var(--gap-glyph);
}
}
/* 비교 바 — 두 해시 배지 + vs 아이콘, 닫기는 우측. */
.mi-compare-bar__text[data-v-cf382053] { flex: 1;
}
.mi-compare-bar__vs[data-v-cf382053] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
/* X 버튼과 동일 폭의 좌측 spacer — 타이틀 시각 중앙 정렬 */
.mi-pdf-header__spacer[data-v-cf382053],
.mi-pdf-header__close[data-v-cf382053] {
  width: var(--h-control-sm);
  flex-shrink: 0;
}
.mi-pdf[data-v-cf382053] {
  flex: 1;
  width: 100%;
  border: 0;
}
/* 내용 보기 — 메타편집기 내용 렌더가 우측 패널을 채움. */
.mi-content-tree[data-v-cf382053] {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* 편집 문서 프로비저닝 대기 로딩 표시 */
.mi-content-loading[data-v-cf382053] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.resize-overlay[data-v-cf382053] {
  position: absolute;
  inset: 0;
  z-index: var(--z-resize-overlay);
  cursor: col-resize;
}

/* 스왑 시 좌-우 순서 뒤집기 — CatalogContentView 와 동일 패턴 */
.mi-split.swapped .mi-split__left[data-v-cf382053] {
  order: 2;
}
.mi-split.swapped[data-v-cf382053] .vertical-split-resizer {
  order: 1;
}
.mi-split.swapped .mi-split__right[data-v-cf382053] {
  order: 0;
}


.surface-cell[data-v-8a790509] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.surface-cell__hints[data-v-8a790509] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
}
.surface-cell__hints-label[data-v-8a790509] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.law-name[data-v-8a790509] { min-width: 0;
}
.law-link[data-v-8a790509] {
  padding: 0;
  min-width: 0;
  justify-content: flex-start;
}
.cell-num[data-v-8a790509] {
  font-variant-numeric: tabular-nums;
  /* 그냥 세는 수는 목록 어디서나 --text-secondary 한 벌이다.
     색을 안 주면 셀 기본색(--text-primary)을 물려받아 이 화면만 희게 튄다
     (2026-08-22 lint:sameness 적발). */
  color: var(--ink-secondary);
}
.cell-muted[data-v-8a790509] {
  color: var(--ink-muted);
}
.row-actions[data-v-8a790509] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* ══ 목록 ｜ 상세 — **머리(조회 메시지·툴바·검색)는 전체 폭**, 본문만 갈린다 ══
   ⛔ 종전에는 목록 화면 통째로를 왼쪽 칸에 밀어 넣어, 385px 안에 툴바·검색·안내가 다 들어갔다.
      약관 탭과 **모양이 달라 다른 화면처럼 보였다**(사용자 지적 2026-08-15).
      약관 탭(`.mi-split`)이 하는 대로, ListScreen 의 본문 슬롯 안에서만 좌우로 가른다. */
.rl-split[data-v-8a790509] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /* ⛔ 999 로 낮추면 편집 바(sticky 1020) 가 분리대 버튼을 덮는다 — 「‹ 가 뭔가에 먹혔다」
     (사용자 지적 2026-08-15). tokens.css 기본값(1021 = sticky+1)을 그대로 쓴다. */
}
.rl-split__list[data-v-8a790509],
.rl-split__detail[data-v-8a790509] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* ⛔ 상세를 열기 **전에도** 목록은 폭을 다 써야 한다. flex 값을 안 줬더니 표가 제 내용만큼만
   차지하고 오른쪽 절반이 텅 비었다(사용자 지적 2026-08-15: 「아직 행을 선택도 안 했어」).
   ⚠️ 열린 뒤에는 인라인 style(leftPaneStyle) 의 width·flex 가 이 규칙을 덮는다. */
.rl-split__list[data-v-8a790509] { flex: 1 1 0;
}
.rl-split__detail[data-v-8a790509] {
  background: var(--bg-page);
  /* ⛔ 위 `--z-splitter: 999` 는 **상속된다** — 그대로 두면 상세 **안쪽** 분리대(값↔원문)까지
     999 가 되어 편집 바(sticky 1020) 밑으로 숨는다(사용자 지적 2026-08-15: 「중앙분리대
     버튼이 밑으로 숨네」). 상세 안에서는 tokens.css 의 기본값으로 되돌린다. */
  --z-splitter: 1021;
}

/* 좌우 교체(⇄) — 약관 탭과 **같은 방식**이다(order 로 자리만 바꾼다).
   ⛔ 목록↔상세 분리대에는 ⇄ 가 아예 없어 상세 안에만 있었다(사용자 지적 2026-08-15). */
.rl-split.swapped .rl-split__list[data-v-8a790509] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.rl-split.swapped[data-v-8a790509] >  .vertical-split-resizer { order: 1;
}
.rl-split.swapped .rl-split__detail[data-v-8a790509] { order: 0;
}

.dg-name[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  flex-wrap: wrap;
}

/* 숫자는 세로로 맞아야 훑힌다 — 코드 수는 자릿수로 읽는 값이다 */
.dg-num[data-v-cb2914bf] {
  font-variant-numeric: tabular-nums;
}

/* 별표 번호 — '81-1' 처럼 하이픈이 섞여 줄바꿈되면 다른 번호로 읽힌다 */
.dg-appendix[data-v-cb2914bf] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 실제 코드가 이 화면의 주된 값이라 눈에 먼저 들어와야 한다 */
.dg-num--strong[data-v-cb2914bf] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}
.dg-issues[data-v-cb2914bf] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 진단 시뮬레이션 — 입력+AI+실행이 한 묶음. 상세 필터 줄에서 한 덩어리로 읽혀야 한다. */
.dg-sim[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  /* 한 줄짜리 도구라 왼쪽에 붙여 두면 넓은 화면에서 오른쪽이 통째로 빈다 — 가운데로 모은다.
     (키워드 검색줄도 같은 이유로 가운데 정렬이다 — ListFilterPanel 의 상시 노출 한 줄)
     ⚠️ 의료행위 분류표의 조회 패널(.st-ask)과 **같은 규격**이다 — 같은 자리의 같은 도구가
        탭마다 다른 자리에 서면 안 된다(사용자 지적 2026-08-15). 한쪽만 고치지 말 것. */
  justify-content: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  min-width: 0;
  padding: var(--space-snug) 0;
}
.dg-sim__label[data-v-cb2914bf] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-title);
}
.dg-sim__hint[data-v-cb2914bf] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dg-sim__toggle[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  cursor: pointer;
}

/* 걸러 놓은 근거 줄 — 필터를 접어도 남는다 */
.dg-simbar[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  margin-top: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  font-size: var(--size-meta);
}
.dg-simbar__read[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-primary);
  min-width: 0;
}
.dg-simbar__name[data-v-cb2914bf] {
  color: var(--ink-primary);
  font-style: normal;
}
.dg-simbar__count[data-v-cb2914bf] {
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.dg-simbar__warn[data-v-cb2914bf] {
  color: var(--ink-warning);
  font-style: normal;
}

/* 코드와 병명이 붙어 「I64출혈…」로 읽히지 않게 — 코드가 먼저 눈에 들어와야 한다 */
.dg-simbar__cand-code[data-v-cb2914bf] {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-title);
  margin-right: var(--gap-glyph);
}
.dg-simbar__cand-name[data-v-cb2914bf] {
  opacity: 0.85;
}
.dg-simbar__cands[data-v-cb2914bf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  min-width: 0;
}

/* ══ 목록 ｜ 상세 — **머리(조회 메시지·툴바·검색)는 전체 폭**, 본문만 갈린다 ══
   ⛔ 종전에는 목록 화면 통째로를 왼쪽 칸에 밀어 넣어, 385px 안에 툴바·검색·안내가 다 들어갔다.
      약관 탭과 **모양이 달라 다른 화면처럼 보였다**(사용자 지적 2026-08-15).
      약관 탭(`.mi-split`)이 하는 대로, ListScreen 의 본문 슬롯 안에서만 좌우로 가른다. */
.rl-split[data-v-cb2914bf] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  /* 자식이 컨테이너를 밀어 넓히지 못하게(분리대 드래그 자기증폭 차단) — 약관 탭과 같은 값. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /* ⛔ 999 로 낮추면 편집 바(sticky 1020) 가 분리대 버튼을 덮는다 — 「‹ 가 뭔가에 먹혔다」
     (사용자 지적 2026-08-15). tokens.css 기본값(1021 = sticky+1)을 그대로 쓴다. */
}
.rl-split__list[data-v-cb2914bf],
.rl-split__detail[data-v-cb2914bf] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* ⛔ 상세를 열기 **전에도** 목록은 폭을 다 써야 한다. flex 값을 안 줬더니 표가 제 내용만큼만
   차지하고 오른쪽 절반이 텅 비었다(사용자 지적 2026-08-15: 「아직 행을 선택도 안 했어」).
   ⚠️ 열린 뒤에는 인라인 style(leftPaneStyle) 의 width·flex 가 이 규칙을 덮는다. */
.rl-split__list[data-v-cb2914bf] { flex: 1 1 0;
}
.rl-split__detail[data-v-cb2914bf] {
  background: var(--bg-page);
  /* ⛔ 위 `--z-splitter: 999` 는 **상속된다** — 그대로 두면 상세 **안쪽** 분리대(값↔원문)까지
     999 가 되어 편집 바(sticky 1020) 밑으로 숨는다(사용자 지적 2026-08-15: 「중앙분리대
     버튼이 밑으로 숨네」). 상세 안에서는 tokens.css 의 기본값으로 되돌린다. */
  --z-splitter: 1021;
}

/* 좌우 교체(⇄) — 약관 탭과 **같은 방식**이다(order 로 자리만 바꾼다).
   ⛔ 목록↔상세 분리대에는 ⇄ 가 아예 없어 상세 안에만 있었다(사용자 지적 2026-08-15). */
.rl-split.swapped .rl-split__list[data-v-cb2914bf] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.rl-split.swapped[data-v-cb2914bf] >  .vertical-split-resizer { order: 1;
}
.rl-split.swapped .rl-split__detail[data-v-cb2914bf] { order: 0;
}

/* ⛔ 카드에서 「주의 : ⟨뱃지⟩」가 두 줄로 갈리던 원인 — 값 안이 `display:flex`(블록)라
   무조건 줄이 바뀐다(실측 2026-08-15). 카드 안에서는 인라인으로 흐르게 한다. */
[data-v-cb2914bf] .list-body__card-metavalue > .dg-issues { display: inline-flex; vertical-align: baseline;
}

.st-name[data-v-f4664eb2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  flex-wrap: wrap;
}

/* 숫자는 세로로 맞아야 훑힌다 */
.st-num[data-v-f4664eb2] {
  font-variant-numeric: tabular-nums;
}
.st-num--strong[data-v-f4664eb2] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}

/* 매핑률 — 숫자만 두면 훑기 어렵다. 막대가 있어야 어디가 비었는지 한눈에 보인다. */
.st-ratio[data-v-f4664eb2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  justify-content: center;
}
.st-ratio__bar[data-v-f4664eb2] {
  flex: 1;
  max-width: 64px;
  height: var(--space-tight);
  border-radius: var(--radius-badge);
  background: var(--bg-page);
  overflow: hidden;
}
.st-ratio__fill[data-v-f4664eb2] {
  display: block;
  height: 100%;
  background: var(--bg-brand-vivid);
}

/* ── 조회 도구 · 결과 띠 ─────────────────────────────────────────────────
   분류표의 「판정」 패널과 같은 짜임·같은 간격을 쓴다. 두 화면이 달라 보이면
   같은 일을 하는 자리라는 것을 사용자가 못 알아본다. */
.st-ask[data-v-f4664eb2] {
  display: flex;
  align-items: center;
  /* ⚠️ 분류표 탭의 조회 패널(.dg-sim)과 **같은 규격**이다 — 종전에는 이쪽만 왼쪽에 붙어 있어
     같은 자리의 같은 도구가 탭마다 다른 데 떴다(사용자 지적 2026-08-15). 한쪽만 고치지 말 것. */
  justify-content: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  min-width: 0;
  padding: var(--space-snug) 0;
}
.st-ask__label[data-v-f4664eb2] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.st-ask__hint[data-v-f4664eb2],
.st-found__meta[data-v-f4664eb2],
.st-found__cellmeta[data-v-f4664eb2] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.st-found[data-v-f4664eb2] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  margin-bottom: var(--gap-inline);
}
.st-found__line[data-v-f4664eb2],
.st-found__dist[data-v-f4664eb2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.st-found__q[data-v-f4664eb2] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.st-found__chain[data-v-f4664eb2] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.st-found__warn[data-v-f4664eb2] {
  font-size: var(--size-meta);
  color: var(--ink-warning);
}
.st-found__cell[data-v-f4664eb2] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.st-found__gap[data-v-f4664eb2] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* ── 통계 패널 — 이름 붙이기 진행률. 카드 골격은 관리자 목록 화면들의 stat-card 와 같은 모양 ── */
.st-stats[data-v-f4664eb2] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline);
}
.stat-card[data-v-f4664eb2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--pad-tile);
  min-width: 0;
}
.stat-main[data-v-f4664eb2] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.stat-icon[data-v-f4664eb2] {
  width: var(--h-control-lg);
  height: var(--h-control-lg);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-toolbar);
  color: var(--ink-on-solid);
  flex-shrink: 0;
}
.stat-icon--confirmed[data-v-f4664eb2] { background: var(--bg-success);
}
.stat-icon--coverage[data-v-f4664eb2]  { background: var(--bg-info);
}
.stat-label[data-v-f4664eb2] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-body[data-v-f4664eb2] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  min-width: 0;
}
.stat-value[data-v-f4664eb2] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-none);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-f4664eb2] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
  line-height: var(--line-none);
}
.st-progress__bar[data-v-f4664eb2] {
  display: block;
  width: 100%;
  max-width: 240px;
  height: var(--space-tight);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
  overflow: hidden;
}
.st-progress__fill[data-v-f4664eb2] {
  display: block;
  height: 100%;
  background: var(--bg-brand-vivid);
}

/* ══ 목록 ｜ 상세 — **머리(조회 메시지·툴바·검색)는 전체 폭**, 본문만 갈린다 ══
   ⛔ 종전에는 목록 화면 통째로를 왼쪽 칸에 밀어 넣어, 385px 안에 툴바·검색·안내가 다 들어갔다.
      약관 탭과 **모양이 달라 다른 화면처럼 보였다**(사용자 지적 2026-08-15).
      약관 탭(`.mi-split`)이 하는 대로, ListScreen 의 본문 슬롯 안에서만 좌우로 가른다. */
.rl-split[data-v-f4664eb2] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /* ⛔ 999 로 낮추면 편집 바(sticky 1020) 가 분리대 버튼을 덮는다 — 「‹ 가 뭔가에 먹혔다」
     (사용자 지적 2026-08-15). tokens.css 기본값(1021 = sticky+1)을 그대로 쓴다. */
}
.rl-split__list[data-v-f4664eb2],
.rl-split__detail[data-v-f4664eb2] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* ⛔ 상세를 열기 **전에도** 목록은 폭을 다 써야 한다. flex 값을 안 줬더니 표가 제 내용만큼만
   차지하고 오른쪽 절반이 텅 비었다(사용자 지적 2026-08-15: 「아직 행을 선택도 안 했어」).
   ⚠️ 열린 뒤에는 인라인 style(leftPaneStyle) 의 width·flex 가 이 규칙을 덮는다. */
.rl-split__list[data-v-f4664eb2] { flex: 1 1 0;
}
.rl-split__detail[data-v-f4664eb2] {
  background: var(--bg-page);
  /* ⛔ 위 `--z-splitter: 999` 는 **상속된다** — 그대로 두면 상세 **안쪽** 분리대(값↔원문)까지
     999 가 되어 편집 바(sticky 1020) 밑으로 숨는다(사용자 지적 2026-08-15: 「중앙분리대
     버튼이 밑으로 숨네」). 상세 안에서는 tokens.css 의 기본값으로 되돌린다. */
  --z-splitter: 1021;
}

/* 좌우 교체(⇄) — 약관 탭과 **같은 방식**이다(order 로 자리만 바꾼다).
   ⛔ 목록↔상세 분리대에는 ⇄ 가 아예 없어 상세 안에만 있었다(사용자 지적 2026-08-15). */
.rl-split.swapped .rl-split__list[data-v-f4664eb2] { order: 2;
}
/* ⚠️ **직계 자식만** — `:deep()` 은 안쪽 분리대(값↔원문)까지 잡아 그 버튼을 오른쪽 끝으로
   밀어 버린다(사용자 지적 2026-08-15: 「중앙분리대가 오른쪽으로 가버렸는데」). */
.rl-split.swapped[data-v-f4664eb2] >  .vertical-split-resizer { order: 1;
}
.rl-split.swapped .rl-split__detail[data-v-f4664eb2] { order: 0;
}

/* ⚠️ **.page 부터 flex 로 세워야 한다.** 이 화면은 views/shared.css 를 import 하지 않아
   .page 가 아무 규칙도 못 받는 맨 블록 박스였고, 그러면 아래 칸들의 `flex:1; min-height:0`
   이 통째로 무의미해져 높이 사슬이 첫 칸에서 끊긴다.
   끊기면 **높이를 제 내용으로 만드는 것(목록)** 은 멀쩡해 보이고, **남은 높이를 채워야 하는 것
   (원문 PDF 뷰어)** 만 100px 남짓으로 찌그러진다 — 그래서 늦게 발견된다(2026-08-07 실측).
   같은 함정을 참조자료 화면이 먼저 겪었다(ReferenceDataView 의 같은 주석). */
.page[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.page__card[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  border-radius: var(--radius-float);
  overflow: hidden;
}
.tabs-content[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}
.tab-pane[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 하위 탭(수술) 아래도 **같은 높이 사슬을 이어야 한다.**
   ⛔ 이 한 칸이 빠지면 목록이 제 내용만큼 부풀어 ListBody 안에 스크롤바가 아예 생기지 않는다
      (여기서 실제로 그랬다 — 사용자 지적 2026-08-09). 참조자료 화면이 먼저 겪은 것과 같은 함정. */
.tab-pane__sub[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 2단 — 목록 ｜ (내용/약관 탭). 참조법령·분류표가 함께 쓴다.
   ⚠️ 고른 것이 없으면 목록이 **전체 폭**을 쓴다. 반쯤 비운 채로 두면 오른쪽 절반이
      회색으로 남아 "무엇을 하는 자리인지" 를 가린다. */
.split[data-v-5fbc2023] {
  flex-direction: row;
  gap: var(--gap-stack);
}
.split__list[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  /* 폭은 분리대(useVerticalSplitPane)가 정한다 — 드래그한 값이 기억된다.
     ⚠️ 이 목록들은 컬럼이 많다(분류표 9칸). 좁으면 표가 뭉개져 숫자가 세로로 쪼개진다
        — 110 이 1/1/0 으로 보인다(2026-08-07 실측). 기본 분할을 넉넉히 잡아 둔 이유다. */
  /* ⚠️ shrink 를 막지 않는다(0 0 auto 금지). 좌우 폭 합이 컨테이너를 넘는 순간이 있는데
     축소를 막으면 그때 칸이 삐져나가 「왼쪽을 좁힐수록 오른쪽이 넓어지는」 것처럼 보인다
     (2026-08-08 지적 · 예전에도 같은 증상이 있었다). 다른 2단 화면과 같이 둔다. */
  flex: 0 1 auto;
  /* 폭·넘침 규약은 분리대 부품(VerticalSplitter)이 전역으로 보장한다 — 여기서 챙기지 않는다. */
  min-height: 0;
  overflow: hidden;
}
/* 고른 것이 없으면 목록이 전체 폭 */
.split__list--solo[data-v-5fbc2023] { flex: 1 1 auto; width: 100% !important;
}
/* 접힌 칸은 min-width 를 적용하지 않는다 — v-show 로 display:none 이라 폭 계산에서 빠진다. */
/* ⚠️ 오른쪽도 **분리대가 정한 폭**을 그대로 쓴다(flex 로 늘리지 않는다).
   flex:1 로 두면 왼쪽이 최소폭에 걸려 더 못 줄어들 때 오른쪽이 남은 자리를 다 먹어,
   왼쪽으로 끝까지 끌면 오른쪽이 되레 넓어진다(2026-08-08 지적 · 예전에도 같은 문제가 있었다).
   좌우 모두 명시 폭이어야 드래그가 그대로 반영된다 — 다른 2단 화면과 같은 방식. */
.split__detail[data-v-5fbc2023] {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
}

/* 전사(부품정보)는 목록을 상세로 **갈아 끼운다** — 곁에 목록이 없으니 상세가 화면을 채워야 한다.
   ⚠️ 위 `flex: 0 1 auto` 는 분리대가 정한 폭을 쓰라는 뜻이라, 폭이 안 붙는 이 자리에서는
      내용 크기로 쪼그라들어 오른쪽이 통째로 비었다(2026-08-08 실측: 2180 칸에 상세 1192).
      번들(메타보기)은 인라인 폭이 붙으므로 이 규칙이 닿지 않는다. */
.split__detail--solo[data-v-5fbc2023] {
  flex: 1 1 auto;
  width: 100%;
}


/* 좁은 화면 — 나란히 두면 둘 다 못 읽는다. 고른 것이 있으면 오른쪽만 보인다
   (목록으로 돌아가는 길은 상세 머리의 위치 표시가 맡는다). */
@media (max-width: 1023px) {
.split[data-v-5fbc2023] { flex-direction: column;
}
.split__list[data-v-5fbc2023] { flex: 1 1 auto;
}
.split:has(.split__detail) .split__list[data-v-5fbc2023] { display: none;
}
.split__detail[data-v-5fbc2023] { border-left: none;
}
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다(shared.css 와 같은 규칙 — 이 화면은
   shared.css 를 import 하지 않으므로 여기에 둔다). 밑줄 띠는 그대로 끝까지 간다. */
.page__card[data-v-5fbc2023] >  .tab-nav {
  padding-inline: var(--pad-page-x);
}

.dm-compose__body[data-v-5ffe92a6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.dm-compose__field[data-v-5ffe92a6] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.dm-compose__field--grow[data-v-5ffe92a6] {
  flex: 1;
}
.dm-compose__label[data-v-5ffe92a6] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.dm-compose__input[data-v-5ffe92a6] {
  font-size: var(--size-body);
}
.dm-compose__editor-wrapper[data-v-5ffe92a6] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.dm-compose__toolbar[data-v-5ffe92a6] {
  display: flex;
  gap: var(--gap-glyph);
  padding: var(--space-snug);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
}
.dm-compose__toolbar button[data-v-5ffe92a6] {
  background: transparent;
  border: none;
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-meta);
}
.dm-compose__toolbar button[data-v-5ffe92a6]:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.dm-compose__toolbar button.active[data-v-5ffe92a6] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.dm-compose__editor[data-v-5ffe92a6] {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-cozy);
  font-size: var(--size-body);
  line-height: var(--line-normal);
  color: var(--ink-primary);
}
.dm-compose__editor[data-v-5ffe92a6] .tiptap {
  outline: none;
  min-height: 100px;
}
.dm-compose__editor[data-v-5ffe92a6] .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ink-muted);
  pointer-events: none;
  float: left;
  height: 0;
}
.dm-compose__options[data-v-5ffe92a6] {
  display: flex;
  gap: var(--gap-group);
  padding: var(--space-snug) 0;
}
.dm-compose__option[data-v-5ffe92a6] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dm-compose__option i[data-v-5ffe92a6] {
  font-size: var(--icon-marker);
}
.dm-compose__recipients[data-v-5ffe92a6] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  align-items: center;
}
.dm-compose__recipient[data-v-5ffe92a6] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.dm-compose__recipient-icon[data-v-5ffe92a6] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  width: 18px;
  text-align: center;
}
.dm-compose__recipient-remove[data-v-5ffe92a6] {
  margin-left: var(--gap-glyph);
}
.dm-compose__add-btn[data-v-5ffe92a6] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  background: transparent;
  border: var(--line-w) dashed var(--line-color);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--motion-fast);
}
.dm-compose__add-btn[data-v-5ffe92a6]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.dm-compose__schedule[data-v-5ffe92a6] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.dm-compose__schedule-check[data-v-5ffe92a6] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  cursor: pointer;
}
.dm-compose__datetime[data-v-5ffe92a6] {
  padding: var(--space-snug) var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  font-family: inherit;
}

/* 수신자 선택 팝업 */
.dm-picker[data-v-5ffe92a6] {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.dm-picker__tabs[data-v-5ffe92a6] {
  display: flex;
  border-bottom: var(--line-strong);
}
.dm-picker__tab[data-v-5ffe92a6] {
  flex: 1;
  padding: var(--pad-tab);
  background: transparent;
  border: none;
  border-bottom: var(--line-w-thick) solid transparent;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  cursor: pointer;
}
.dm-picker__tab--active[data-v-5ffe92a6] {
  color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
}
.dm-picker__content[data-v-5ffe92a6] {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dm-picker__search[data-v-5ffe92a6] {
  margin: var(--gap-inline);
  font-size: var(--size-label);
}
.dm-picker__list[data-v-5ffe92a6] {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
}
.dm-picker__item[data-v-5ffe92a6] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.dm-picker__item[data-v-5ffe92a6]:hover {
  background: var(--bg-field);
}
.dm-picker__item--selected[data-v-5ffe92a6] {
  background: color-mix(in srgb, var(--bg-brand-vivid) 8%, var(--bg-page));
}
.dm-picker__role-icon[data-v-5ffe92a6] {
  color: var(--ink-muted);
  font-size: var(--icon-label);
  width: 24px;
  text-align: center;
}
.dm-picker__check[data-v-5ffe92a6] {
  color: var(--ink-brand);
  font-size: var(--size-meta);
}
.dm-picker__name[data-v-5ffe92a6] {
  flex: 1;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.dm-picker__empty[data-v-5ffe92a6] {
  padding: var(--space-band);
  text-align: center;
  font-size: var(--size-label);
  color: var(--ink-muted);
}

/* 모바일(iOS Safari) contenteditable 자동 확대 방지 */
/* TipTap은 contenteditable로 렌더되어 전역 input/textarea 16px 규칙이 적용되지 않음 */
@media screen and (max-width: 768px) {
.dm-compose__editor[data-v-5ffe92a6],
  .dm-compose__editor[data-v-5ffe92a6] .tiptap {
    font-size: max(16px, 1em); /* fonts-ignore — iOS 는 16px 미만 입력창에 자동 확대가 걸린다. 사다리가 아니라 브라우저 제약이다 */  /* role-ignore: iOS 가 16px 미만 입력창을 자동 확대한다 — 사다리로 표현할 수 없는 브라우저 제약 */
}
}

/* 원본: views/TodoView.vue 의 `.todo-page__tab-header` / `.todo-page__header-actions`.
   다른 점: 단추가 하나다. */
.dm-page__tab-header[data-v-ab95f3b9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--line-strong);
  /* 탭 머리줄은 **판**이다 — 비워서 바탕이 이어지게 한다. 구분은 아래 실선이 한다. */
  background: var(--bg-page);
}
.dm-page__header-actions[data-v-ab95f3b9] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-right: var(--gap-stack);
  flex-shrink: 0;
}

/* ─── 메시지 카드 ─── */
.dm-card[data-v-ab95f3b9] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  min-width: 0;
  width: 100%;
}
.dm-card--unread .dm-card__subject[data-v-ab95f3b9],
.dm-card--unread .dm-card__name[data-v-ab95f3b9] {
  font-weight: var(--weight-title);
}
.dm-card__user[data-v-ab95f3b9] {
  flex-shrink: 0;
}
.dm-card__group-icon[data-v-ab95f3b9],
.dm-card__role-icon[data-v-ab95f3b9] {
  /* ⛔ 얼굴이 설 자리에 서는 그림이다 — 기본 얼굴(md 24px)과 같은 단인 --icon-lead 로 준다.
     한때 22px 를 손으로 박아 두어, 얼굴 크기를 고치면 이 자리만 어긋났다(2026-09-12). */
  width: var(--icon-lead);
  height: var(--icon-lead);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--icon-marker);
}
.dm-card__group-icon[data-v-ab95f3b9] {
  background: var(--bg-field);
  color: var(--ink-muted);
}
.dm-card__role-icon[data-v-ab95f3b9] {
  background: var(--bg-active);
  color: var(--ink-brand);
}
.dm-card__body[data-v-ab95f3b9] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  overflow: hidden;
}
.dm-card__name[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.dm-card__more[data-v-ab95f3b9] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.dm-card__sep[data-v-ab95f3b9] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
  flex-shrink: 0;
}
.dm-card__subject[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 제목만 클릭해 여는 진입점 — 행 클릭 열림은 오클릭이 잦아 제거 */
.dm-card__subject--link[data-v-ab95f3b9] {
  cursor: pointer;
}
.dm-card__subject--link[data-v-ab95f3b9]:hover,
.dm-card__subject--link[data-v-ab95f3b9]:focus-visible {
  color: var(--ink-brand);
  text-decoration: underline;
}
.dm-card__dot[data-v-ab95f3b9] {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
  flex-shrink: 0;
}
.dm-row-item[data-v-ab95f3b9] {
  flex-shrink: 0;
}
.dm-reply-label[data-v-ab95f3b9] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dm-card__read-status[data-v-ab95f3b9] {
  flex-shrink: 0;
  font-size: var(--size-meta);
}
.dm-card__read-all[data-v-ab95f3b9] {
  color: var(--ink-success);
}
.dm-card__read-count[data-v-ab95f3b9] {
  color: var(--ink-muted);
}
.dm-card__meta[data-v-ab95f3b9] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.dm-card__actions[data-v-ab95f3b9] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.dm-card__time[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* ─── 상세 모달 ─── */
.dm-detail__title[data-v-ab95f3b9] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.dm-detail__urgent-icon[data-v-ab95f3b9] {
  color: var(--ink-warning);
  margin-left: var(--gap-inline);
}
.dm-detail__meta[data-v-ab95f3b9] {
  padding: var(--pad-panel);
  font-size: var(--size-label);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  border-bottom: var(--line-strong);
}
.dm-detail__row[data-v-ab95f3b9] {
  display: flex;
  gap: var(--gap-inline);
}
.dm-detail__label[data-v-ab95f3b9] {
  font-weight: var(--weight-label);
  color: var(--ink-muted);
  min-width: 4rem;
  flex-shrink: 0;
}
.dm-detail__value[data-v-ab95f3b9] {
  color: var(--ink-primary);
}
.dm-detail__recipient[data-v-ab95f3b9] {
  color: var(--ink-secondary);
}
.dm-detail__recipient--read[data-v-ab95f3b9] {
  color: var(--ink-primary);
}
.dm-detail__read-icon[data-v-ab95f3b9] {
  font-size: var(--icon-marker);
  color: var(--ink-success);
  margin-left: var(--gap-glyph);
}
.dm-detail__scroll[data-v-ab95f3b9] {
  max-height: 50vh;
  overflow-y: auto;
}
.dm-detail__body[data-v-ab95f3b9] {
  padding: var(--pad-card);
  font-size: var(--size-body);
  line-height: var(--line-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-primary);
}

/* 쪽지 본문의 링크 — 눌러야 할 자리는 눌러 보여야 한다.
   본문은 v-html 로 그려지는데 a 에 아무 규칙이 없어 본문 글자와 똑같이 보였다
   (「작업 바로가기」·수집 실패 쪽지의 「이 회차 보기」가 링크인 줄 몰랐다, 2026-09-01).
   모양은 목록의 링크 셀(MonthlyReleaseList .product-link)과 같게 맞춘다. */
.dm-detail__body[data-v-ab95f3b9] a,
.dm-replies__body[data-v-ab95f3b9] a {
  color: var(--ink-brand);
  text-decoration: none;
}
.dm-detail__body[data-v-ab95f3b9] a:hover,
.dm-replies__body[data-v-ab95f3b9] a:hover {
  text-decoration: underline;
}

/* 타임라인 */
.dm-timeline[data-v-ab95f3b9] {
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  display: flex;
  flex-direction: column;
}
.dm-timeline__item[data-v-ab95f3b9] {
  display: flex;
  align-items: flex-start;
  /* ⛔ 부품(UserLabel)을 못 쓰는 두 줄 자리지만 **간격은 부품과 같다** — 4px(2026-09-12). */
  gap: var(--gap-glyph);
  padding: var(--space-tight) 0;
  position: relative;
}
.dm-timeline__item[data-v-ab95f3b9]:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 26px;
  bottom: -2px;
  width: 1px;
  background: var(--line-color);
}
.dm-timeline__user-anchor[data-v-ab95f3b9] {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.dm-timeline__sent-mark[data-v-ab95f3b9] {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  font-size: var(--icon-marker);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-timeline__check[data-v-ab95f3b9] {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-success);
  color: var(--ink-on-solid);
  font-size: var(--size-meta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-timeline__content[data-v-ab95f3b9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding-top: var(--space-tight);
}
.dm-timeline__text[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.dm-timeline__time[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.dm-timeline__pending[data-v-ab95f3b9] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-style: italic;
}

/* 회신 스레드 */
.dm-replies[data-v-ab95f3b9] {
  border-top: var(--line-strong);
}
.dm-replies__header[data-v-ab95f3b9] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--pad-row);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  background: var(--bg-page);
}
.dm-replies__item[data-v-ab95f3b9] {
  display: flex;
  /* ⛔ 부품(UserLabel)을 못 쓰는 두 줄 자리지만 **간격은 부품과 같다** — 4px(2026-09-12). */
  gap: var(--gap-glyph);
  padding: var(--pad-panel);
  border-top: var(--line-strong);
}
.dm-replies__user[data-v-ab95f3b9] {
  flex-shrink: 0;
  padding-top: var(--space-tight);
}
.dm-replies__content[data-v-ab95f3b9] {
  flex: 1;
  min-width: 0;
}
.dm-replies__meta[data-v-ab95f3b9] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
}
.dm-replies__sender[data-v-ab95f3b9] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.dm-replies__time[data-v-ab95f3b9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.dm-replies__body[data-v-ab95f3b9] {
  font-size: var(--size-label);
  line-height: var(--line-normal);
  color: var(--ink-primary);
}
.dm-replies__body[data-v-ab95f3b9] p {
  margin: 0;
}
.dm-detail__reply-btn[data-v-ab95f3b9] {
  margin-right: auto;
}

.app-section[data-v-8fa8a8ad] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-card);
  min-width: 0;
  /* ⛔ `overflow: hidden` 을 두지 않는다 — 이 구획 안의 고르개·팝오버가 통째로 잘린다.
     실사고 2026-08-29: 화면 설정의 서체 고르개가 펼쳐지면 아래 33px 이 잘려 마지막 항목이
     반쯤 보였다. z-index 로는 못 고친다(자르는 것은 쌓임이 아니라 조상의 클리핑이다).
     안여백이 있어 자식이 모서리에 닿지 않으므로 둥근 모서리를 위해서도 필요 없다.
     가로로 넘치는 내용(표·차트)은 그 자리에서 제 `overflow-x: auto` 를 갖는 것이 표준이다. */
}
/* 접힌 상태 — 제목줄만 남으므로 위아래 여백을 줄여 목록처럼 읽히게 */
.app-section--collapsed[data-v-8fa8a8ad] { padding-bottom: var(--space-cozy);
}
.app-section__head[data-v-8fa8a8ad] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  /* 우측 내용(버튼·안내 문구)이 길면 제목을 밀어내지 않고 아랫줄로 접힌다 */
  flex-wrap: wrap;
}
.app-section__head--clickable[data-v-8fa8a8ad] { cursor: pointer;
}
.app-section__head--clickable:hover .app-section__caret[data-v-8fa8a8ad] { color: var(--ink-brand);
}
.app-section__caret[data-v-8fa8a8ad] {
  flex: none;
  width: 0.9rem;
  text-align: center;
  font-size: var(--icon-marker);
  color: var(--ink-muted);
  transition: color var(--motion-fast) ease;
}
.app-section__title[data-v-8fa8a8ad] {
  margin: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.app-section__icon[data-v-8fa8a8ad] { color: var(--ink-brand); font-size: var(--icon-label);
}
.app-section__meta[data-v-8fa8a8ad] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.app-section__gap[data-v-8fa8a8ad] { flex: 1 1 auto;
}
.app-section__actions[data-v-8fa8a8ad] { display: inline-flex; align-items: center; gap: var(--gap-inline); flex: 0 1 auto; min-width: 0; margin-left: auto; cursor: default;
}
.app-section__desc[data-v-8fa8a8ad] {
  margin: var(--gap-glyph) 0 var(--gap-stack);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.app-section__body[data-v-8fa8a8ad] { min-width: 0;
}
/* 설명 없이 본문이 바로 오는 경우의 제목줄 아래 간격 */
.app-section__desc + .app-section__body[data-v-8fa8a8ad] { margin-top: 0;
}
.app-section__head + .app-section__body[data-v-8fa8a8ad] { margin-top: var(--gap-stack);
}

.tcell[data-v-b285daf8] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-glyph);
  min-width: 0;
}
.tcell__value[data-v-b285daf8] { white-space: nowrap;
}
.tcell__sub[data-v-b285daf8] {
  margin-left: var(--gap-glyph);
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
}
.tcell__slot[data-v-b285daf8] {
  width: 100%;
  height: var(--h-chart-spark);
}
/* AppChart 는 값 옆에 곁들일 때를 기준으로 폭을 절반만 쓴다(옆 글자를 밀지 않으려고).
   여기서는 값 '아래' 줄이라 밀 글자가 없고, 좁으면 30일치가 뭉개진다 — 칸 폭을 다 쓴다. */
.tcell .tcell__spark[data-v-b285daf8] { width: 100%;
}

/* 카드 테두리·제목줄·설명은 공통 AppSection 이 그린다 — 여기서는 본문만 배치한다. */
.apm[data-v-017e01c2] .app-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-width: 0;
}
.apm__sub-title[data-v-017e01c2] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.apm__sub[data-v-017e01c2] { color: var(--ink-muted); font-size: var(--size-meta); font-weight: var(--weight-body);
}
.apm__cards[data-v-017e01c2] { display: flex; gap: var(--gap-stack); flex-wrap: wrap;
}
.apm__card[data-v-017e01c2] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  min-width: 130px;
  flex: 1;
}
.apm__card-label[data-v-017e01c2] { font-size: var(--size-meta); color: var(--ink-muted);
}
.apm__card-value[data-v-017e01c2] { font-size: var(--size-title-sm); font-weight: var(--weight-strong); color: var(--ink-primary);
}
.apm__chart[data-v-017e01c2] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
}
.apm__chart-title[data-v-017e01c2] { margin: 0 0 var(--gap-inline); font-size: var(--size-label); color: var(--ink-primary);
}
.apm__backlog[data-v-017e01c2] { margin: 0; display: flex; gap: var(--gap-group); font-size: var(--size-label); color: var(--ink-secondary); flex-wrap: wrap;
}
/* 카드형(좁은 화면)에서는 값이 '라벨 : 값' 으로 한 줄에 늘어선다 —
   그 사이에 추이선을 끼우면 줄이 끊기고, 손바닥만 한 폭에서는 30일치가 뭉개져 읽히지도 않는다.
   좁을 때는 숫자만 남긴다(추이는 넓은 화면의 표에서 본다). */
.apm[data-v-017e01c2] .list-body__card .tcell { display: inline;
}
.apm[data-v-017e01c2] .list-body__card .tcell__slot { display: none;
}
.apm__target[data-v-017e01c2] { display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.apm__role-icon[data-v-017e01c2] { color: var(--ink-muted);
}

.parsing-status[data-v-1f1ed459] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
/* 관리자 모니터링(.refresh-bar)과 동일하게: 스크롤해도 상단 고정 + 마지막 갱신 문구 좌측 정렬 */
.ps-refresh-bar[data-v-1f1ed459] { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-stack); padding: var(--space-snug) 0; margin-bottom: var(--gap-stack); background: var(--bg-sticky); backdrop-filter: var(--blur-sticky); -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.ps-last-refreshed[data-v-1f1ed459] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-summary[data-v-1f1ed459] { display: flex; gap: var(--gap-stack); margin-bottom: var(--gap-stack);
}
.ps-stat[data-v-1f1ed459] {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap-glyph);
  padding: var(--space-cozy); border-radius: var(--radius-control); border: var(--line-strong);
}
.ps-stat--waiting[data-v-1f1ed459] { background: var(--bg-warning-soft);
}
.ps-stat--processing[data-v-1f1ed459] { background: var(--bg-brand-soft);
}
.ps-stat--failed[data-v-1f1ed459] { background: var(--bg-danger-soft);
}
.ps-num[data-v-1f1ed459] { font-size: var(--size-title); font-weight: var(--weight-strong); line-height: var(--line-tight); color: var(--ink-primary);
}
/* 숫자 변경 순간 강조 — 커졌다 돌아오며 카드 색(currentColor)으로 글로우 */
.ps-num--bump[data-v-1f1ed459] { animation: psNumBump-1f1ed459 0.7s ease;
}
@keyframes psNumBump-1f1ed459 {
0% { transform: scale(1);
}
30% { transform: scale(1.3); text-shadow: 0 0 12px currentColor;
}
100% { transform: scale(1);
}
}
.ps-stat--waiting .ps-num[data-v-1f1ed459] { color: var(--ink-warning);
}
.ps-stat--processing .ps-num[data-v-1f1ed459] { color: var(--ink-brand);
}
.ps-stat--failed .ps-num[data-v-1f1ed459] { color: var(--ink-danger);
}
.ps-label[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-secondary); word-break: keep-all;
}
.ps-label i[data-v-1f1ed459] { font-size: var(--icon-marker); margin-left: var(--space-tight);
}
/* 세부 문구(사용자 N · 벌크 N) — 좁은 폰에서 글자 단위로 세로 붕괴되지 않도록 두 조각으로 나눠
   각 조각은 nowrap 로 통째 유지하고, 컨테이너는 flex-wrap 으로 폭이 넉넉하면 한 줄, 좁으면 두 줄로 접는다. */
.ps-sub[data-v-1f1ed459] { display: flex; flex-wrap: wrap; justify-content: center; -moz-column-gap: var(--gap-glyph); column-gap: var(--gap-glyph); row-gap: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-muted); margin-top: var(--space-tight); text-align: center;
}
.ps-sub-part[data-v-1f1ed459] { white-space: nowrap;
}
/* 구분자 '·' 는 둘째 조각 앞에 붙여, 같은 줄이면 중간 점, 줄바꿈되면 조각과 함께 둘째 줄로 내려간다. */
.ps-sub-part--sep[data-v-1f1ed459]::before { content: '·'; margin-right: var(--space-tight); color: var(--ink-muted);
}
.ps-stat--clickable[data-v-1f1ed459] { cursor: pointer;
}
.ps-stat--waiting.ps-stat--clickable[data-v-1f1ed459]:hover { border-color: var(--ink-warning);
}
.ps-stat--failed.ps-stat--clickable[data-v-1f1ed459]:hover { border-color: var(--ink-danger);
}
.ps-failed[data-v-1f1ed459] { margin-bottom: var(--gap-stack); padding: var(--space-cozy); border: var(--line-strong); border-radius: var(--radius-control);
}
.ps-failed-desc[data-v-1f1ed459] { font-size: var(--size-label); color: var(--ink-secondary); margin: 0 0 var(--gap-inline);
}
.ps-failed-list[data-v-1f1ed459] { display: flex; flex-direction: column; gap: var(--gap-inline); max-height: 260px; overflow-y: auto;
}
.ps-failed-list .ps-item-task[data-v-1f1ed459] { overflow-wrap: anywhere;
}
.ps-active[data-v-1f1ed459] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.ps-item[data-v-1f1ed459] { display: flex; align-items: center; gap: var(--gap-stack); padding: var(--space-snug) var(--space-cozy); border-radius: var(--radius-control); background: var(--bg-hover);
}
.ps-item-info[data-v-1f1ed459] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.ps-item-name[data-v-1f1ed459] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 문서명 클릭 → 문서보기(뷰어) 진입 */
.ps-item-name--link[data-v-1f1ed459] { cursor: pointer;
}
.ps-item-name--link[data-v-1f1ed459]:hover { color: var(--ink-brand); text-decoration: underline;
}
.ps-item-task[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-muted);
}
/* 파비콘 모양은 CompanyFavicon 이 정한다 — 여기선 인라인 흐름 정렬만. */
.ps-item-favicon[data-v-1f1ed459] { vertical-align: text-bottom; margin-right: var(--gap-glyph);
}
.ps-item-company[data-v-1f1ed459] { color: var(--ink-secondary); font-weight: var(--weight-title);
}
/* 문서 ID — 숫자 폭 정렬(tabular-nums)로 식별성 확보 (행 상세·대기 뱃지 공용, doctype-docid 컨벤션) */
.ps-item-docid[data-v-1f1ed459] { color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.ps-wait-docid[data-v-1f1ed459] { opacity: 0.75; font-variant-numeric: tabular-nums;
}
.ps-waitlist .ps-item-favicon[data-v-1f1ed459] { vertical-align: text-bottom;
}
.ps-item-host[data-v-1f1ed459] { color: var(--ink-muted);
}
.ps-item-elapsed[data-v-1f1ed459] { color: var(--ink-muted);
}
.ps-item-elapsed--stale[data-v-1f1ed459] { color: var(--ink-warning); font-weight: var(--weight-title);
}
.ps-item-progress[data-v-1f1ed459] { display: flex; align-items: center; gap: var(--gap-inline); flex-shrink: 0; width: 40%; max-width: 220px;
}
.ps-bar[data-v-1f1ed459] { flex: 1; height: 6px; border-radius: var(--radius-badge); background: var(--bg-field); overflow: hidden;
}
.ps-bar-fill[data-v-1f1ed459] { height: 100%; border-radius: var(--radius-badge); background: var(--bg-brand-vivid); transition: width 0.5s ease;
}
.ps-bar-text[data-v-1f1ed459] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-brand); min-width: 35px; text-align: right;
}
.ps-waiting[data-v-1f1ed459] { margin-top: var(--gap-stack); padding-top: var(--space-cozy); border-top: var(--line-strong);
}
.ps-waiting-head[data-v-1f1ed459] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline);
}
.ps-subtitle[data-v-1f1ed459] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-secondary); margin-bottom: var(--space-snug);
}
.ps-waitlist[data-v-1f1ed459] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}
.ps-more[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-muted); align-self: center;
}
.ps-empty[data-v-1f1ed459] { text-align: center; padding: var(--space-band); color: var(--ink-muted); font-size: var(--size-label);
}
.ps-empty i[data-v-1f1ed459] { margin-right: var(--gap-inline);
}

/* 추이 헤더 — 좌: 제목, 우: 추적 범위(표시 창) 선택 컨트롤 */
.ps-trend-head[data-v-1f1ed459] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); margin-top: var(--gap-stack);
}
.ps-trend-title[data-v-1f1ed459] { margin-bottom: 0;
}
.ps-trend-range[data-v-1f1ed459] { display: flex; align-items: center; gap: var(--gap-inline);
}
.ps-trend-range-label[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-muted); white-space: nowrap;
}
.ps-trend-range-ro[data-v-1f1ed459] { font-size: var(--size-meta); font-weight: var(--weight-title); color: var(--ink-secondary);
}
.ps-chart-section[data-v-1f1ed459] { margin-top: var(--gap-inline); display: flex; gap: var(--gap-group); flex-wrap: wrap;
}
.ps-chart-block[data-v-1f1ed459] { flex: 1; min-width: 240px;
}
.ps-chart-block--full[data-v-1f1ed459] { flex: 1 1 100%; margin-top: var(--gap-stack);
}
/* 높이는 AppChart 가 토큰(--h-chart-sm = 150px)으로 갖는다 — 여기서 다시 적지 않는다. */
.ps-chart[data-v-1f1ed459] { width: 100%;
}

/* ─── 남은 작업 예상(ETA) — 영역 제목줄 오른쪽에 카드/테두리 없는 메시지로 표시 ─── */
.ps-eta-inline[data-v-1f1ed459] { flex: 0 1 auto; min-width: 0; text-align: right;
}
.ps-eta-inline .ps-eta-main i[data-v-1f1ed459] { color: var(--ink-info); margin-right: var(--gap-glyph);
}
.ps-eta-main[data-v-1f1ed459] { font-size: var(--size-body); font-weight: var(--weight-title); color: var(--ink-primary); line-height: var(--line-tight);
}
.ps-eta-finish[data-v-1f1ed459] { margin-left: var(--gap-glyph); font-weight: var(--weight-label); color: var(--ink-info);
}
.ps-eta-sub[data-v-1f1ed459] { margin-top: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-muted); overflow-wrap: anywhere;
}
/* 모바일 — 제목줄이 좁아지면 남은 작업 예상 글씨를 줄여 제목과 한 줄에 유지한다. */
@media (max-width: 768px) {
.ps-eta-main[data-v-1f1ed459] { font-size: var(--size-label);
}
.ps-eta-sub[data-v-1f1ed459] { display: none;
}
}

/* ─── 통계 타일 ─── */
.ps-stats[data-v-1f1ed459] { margin-top: var(--gap-stack);
}
.ps-stats-window[data-v-1f1ed459] { margin-left: var(--gap-inline); font-weight: var(--weight-body); color: var(--ink-muted);
}
.ps-metrics[data-v-1f1ed459] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap-inline);
}
.ps-metric[data-v-1f1ed459] {
  display: flex; flex-direction: column; gap: var(--gap-glyph);
  padding: var(--space-cozy); border: 1px solid var(--line-color); border-radius: var(--radius-control);
  /* 판은 비운다 — 바로 위 추이 차트와 같은 바탕(테두리로만 구분) */
  background: var(--bg-page);
}
.ps-metric-value[data-v-1f1ed459] { font-size: var(--size-title-sm); font-weight: var(--weight-strong); color: var(--ink-primary); line-height: var(--line-tight); font-variant-numeric: tabular-nums;
}
.ps-metric-label[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-secondary); word-break: keep-all;
}
.ps-metric-sub[data-v-1f1ed459] { font-size: var(--size-meta); color: var(--ink-muted); word-break: keep-all;
}

/* 좁은 폰 — 카드 3개가 한 줄에 유지되므로 각 카드 폭이 좁다. 간격/패딩을 줄여 세부 문구가
   두 줄로 접힐 폭 여유를 확보한다. */
@media (max-width: 480px) {
.ps-summary[data-v-1f1ed459] { gap: var(--gap-inline);
}
.ps-stat[data-v-1f1ed459] { padding: var(--space-cozy) var(--space-tight);
}
}

.ch-body[data-v-8a466195] {
  /* 불러오는 중 / 비었음 / 목록이 같은 자리를 쓰도록 — 모달이 튀지 않게 */
  min-height: 18rem;
  max-height: 28rem;
  overflow-y: auto;
}
.ch-msg[data-v-8a466195] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  min-height: 18rem;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.ch-msg--error[data-v-8a466195] {
  color: var(--ink-danger);
}

/* 한눈 요약 — 목록 위에 한 줄로 붙는다 */
.ch-sum[data-v-8a466195] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}
.ch-list[data-v-8a466195] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ch-item[data-v-8a466195] {
  padding: var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.ch-item__head[data-v-8a466195] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.ch-time[data-v-8a466195] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ch-duration[data-v-8a466195] {
  margin-left: auto;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ch-item__stats[data-v-8a466195] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-group);
}
.ch-stat[data-v-8a466195] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
}
.ch-stat__label[data-v-8a466195] {
  color: var(--ink-muted);
}
.ch-stat__value[data-v-8a466195] {
  color: var(--ink-primary);
}

/* 이번 회차에 새로 들어온 것 — 늘 0 이 아니라 '얼마나 늘었나'가 이력의 알맹이다 */
.ch-delta[data-v-8a466195] {
  margin-right: var(--gap-glyph);
  color: var(--ink-success);
}
.ch-error[data-v-8a466195] {
  display: flex;
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
  padding-top: var(--space-snug);
  border-top: var(--line-strong);
  font-size: var(--size-meta);
}
.ch-error__label[data-v-8a466195] {
  flex-shrink: 0;
  color: var(--ink-danger);
}
.ch-error__msg[data-v-8a466195] {
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo[data-v-a7270e82] {
  position: relative;
}
.combo__caret[data-v-a7270e82] {
  position: absolute;
  top: 50%;
  right: var(--space-snug);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-band);
  height: var(--space-band);
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  cursor: pointer;
}
.combo__caret[data-v-a7270e82]:hover {
  color: var(--ink-primary);
}
.combo__list[data-v-a7270e82] {
  list-style: none;
  margin: 0;
  padding: var(--space-tight);
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
}
.combo__opt[data-v-a7270e82] {
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  cursor: pointer;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.combo__opt[data-v-a7270e82]:hover {
  background: var(--bg-active);
}
.combo__opt--default[data-v-a7270e82] {
  color: var(--ink-secondary);
}
.combo__opt--active[data-v-a7270e82] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}

.utp[data-v-789c3e29] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.utp-grid[data-v-789c3e29] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap-inline);
  flex: 1;
  min-height: 0;
}
@media (max-width: 768px) {
.utp-grid[data-v-789c3e29] { grid-template-columns: 1fr;
}
.utp-actions[data-v-789c3e29] { flex-direction: row; justify-content: center;
}
.utp-col[data-v-789c3e29] { max-height: 320px;
}
}
.utp-col[data-v-789c3e29] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  overflow: hidden;
  min-height: 0;
}
.utp-col-header[data-v-789c3e29] {
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  background: var(--bg-page);
}
.utp-col-title[data-v-789c3e29] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.utp-tools[data-v-789c3e29] {
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.utp-actions[data-v-789c3e29] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}
.utp-list[data-v-789c3e29] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-snug);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.utp-item[data-v-789c3e29] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug);
  border-radius: var(--radius-badge);
  cursor: pointer;
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.utp-item[data-v-789c3e29]:hover { background: var(--bg-hover);
}
.utp-item--selected[data-v-789c3e29] {
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--ink-brand);  /* role-ignore: 그림 효과(링·글로우·가리개) — 선 두께 사다리로 접히지 않는다 */
}
/* ⛔ 간격·배치는 UserLabel 이 갖는다 — 여기서는 칸을 차지하는 몫만 준다. */
.utp-item-label[data-v-789c3e29] {
  flex: 1;
  min-width: 0;
}
.utp-item-label[data-v-789c3e29] .user-label__name { white-space: nowrap;
}
.utp-empty[data-v-789c3e29] {
  padding: var(--pad-card);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--size-label);
}

.filter-input-wrapper[data-v-8da57e03] {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 180px;
}
.filter-input-icon[data-v-8da57e03] {
  position: absolute;
  left: 0.625rem;
  color: var(--ink-muted);
  font-size: var(--icon-marker);
  pointer-events: none;
}
.filter-input-field[data-v-8da57e03] {
  width: 100%;
  padding: var(--space-tight) var(--space-wide) var(--space-tight) var(--space-wide);
  font-size: var(--size-label);
  height: var(--h-control-md);
  box-sizing: border-box;
}
.filter-input-clear[data-v-8da57e03] {
  position: absolute;
  right: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--size-meta);
  padding: 0;
  border-radius: var(--radius-badge);
  transition: all var(--motion-fast);
}
.filter-input-clear[data-v-8da57e03]:hover {
  color: var(--ink-primary);
  background: var(--bg-hover);
}

/* 명령은 코드다 — 검색창과 달리 고정폭 글꼴로 보여준다. */
.app-command[data-v-d2989a66] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
}

.cli-logo[data-v-55749d57] {
  display: inline-block;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -0.125em;
}
.cli-logo--invert[data-v-55749d57] {
  filter: invert(1);
}

/* 범위 뱃지 — 의미색 토큰 + color-mix 로 옅은 배경 틴트 (raw 값 미사용) */
.scope-target[data-v-7b508d94] {
  margin-left: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 일괄 토글 위젯 (일괄 액션 바 내부) */
.bulk-toggle[data-v-7b508d94] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  height: var(--h-control-md);
  padding: var(--pad-control);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.bulk-toggle.is-disabled[data-v-7b508d94] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 일괄 체크박스 */

/* 액션 버튼 */
.action-btns[data-v-7b508d94] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 테이블 행 상세 — 규칙 설명 (ListBody #row-detail 슬롯 안) */
.rule-desc[data-v-7b508d94] {
  display: block;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}

/* 공통 텍스트 유틸 */
.text-muted[data-v-7b508d94] { color: var(--ink-muted);
}
.text-sm[data-v-7b508d94] { font-size: var(--size-label);
}
.text-xs[data-v-7b508d94] { font-size: var(--size-meta);
}

/* ── 카드형 본문 ── */
.rule-card[data-v-7b508d94] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  width: 100%;
  min-width: 0;
}
.rule-card__title[data-v-7b508d94] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.rule-card__tags[data-v-7b508d94] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-glyph);
}
.rule-card__desc[data-v-7b508d94] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.rule-card__footer[data-v-7b508d94] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-stack);
  margin-top: var(--gap-glyph);
}
.rule-card__toggles[data-v-7b508d94] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.card-toggle-label[data-v-7b508d94] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.card-toggle-label--locked[data-v-7b508d94] {
  cursor: not-allowed;
}
.card-toggle-text[data-v-7b508d94] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.rule-card__meta[data-v-7b508d94] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-left: auto;
}
.rule-card__actions[data-v-7b508d94] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}

.llm-settings[data-v-7bf20a94] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.llm-tab[data-v-7bf20a94] {
  display: flex;
  flex-direction: column;
}
/* 기존 설정 항목(AdminSystemSettings .setting-item)과 동일한 레이아웃: 레이블 좌 / 컨트롤 우 / 설명 아래 */
.setting-item[data-v-7bf20a94] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy) 0 var(--space-cozy) var(--space-cozy);
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--line-color) 50%, transparent);
  border-left: var(--line-accent) solid transparent;
}
.setting-item--modified[data-v-7bf20a94] {
  border-left-color: var(--ink-brand);
}
/* eslint-disable-next-line vue/no-restricted-syntax -- 제네릭 설정 항목과 동일한 인라인 reset 버튼 */
.reset-btn[data-v-7bf20a94] {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--size-meta);
  border-radius: var(--radius-badge);
  padding: 0;
  transition: all var(--motion-fast);
}
.reset-btn[data-v-7bf20a94]:hover {
  color: var(--ink-brand);
  background: var(--bg-hover);
}
.save-indicator[data-v-7bf20a94] {
  font-size: var(--size-meta);
}
.save-indicator--saved[data-v-7bf20a94] {
  color: var(--ink-success);
}
.save-indicator--error[data-v-7bf20a94] {
  color: var(--ink-danger);
}
.setting-main[data-v-7bf20a94] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-band);
}
.setting-info[data-v-7bf20a94] {
  flex: 1;
  min-width: 0;
}
.setting-label-row[data-v-7bf20a94] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
}
.setting-label[data-v-7bf20a94] {
  font-size: var(--size-body);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.setting-desc[data-v-7bf20a94] {
  display: block;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.setting-control[data-v-7bf20a94] {
  flex-shrink: 0;
  width: 280px;
}
.setting-input[data-v-7bf20a94] {
  width: 100%;
}
.cli-status[data-v-7bf20a94] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.cli-status__head[data-v-7bf20a94] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  min-height: var(--space-band);
}
/* 새로고침 아이콘 — 살짝 축소 */
.cli-refresh-icon[data-v-7bf20a94] {
  font-size: var(--icon-marker);
}
.cli-row[data-v-7bf20a94] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.cli-row__name[data-v-7bf20a94] {
  flex: 1;
}
.cli-row__ver[data-v-7bf20a94] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.cli-status__hint[data-v-7bf20a94] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.install-notice[data-v-7bf20a94] {
  margin-top: var(--gap-inline);
  padding: var(--space-cozy);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  background: var(--bg-field);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.install-notice--error[data-v-7bf20a94] {
  border-color: var(--ink-danger);
  color: var(--ink-danger);
}
.install-notice__cmd[data-v-7bf20a94] {
  display: inline-block;
  margin-top: var(--gap-glyph);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  background: var(--bg-active);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}

/* 반응형 — 제네릭 설정 항목(AdminSystemSettings)과 동일: 좁아지면 레이블 → 입력창 → 설명 세로 스택 */
@media (max-width: 768px) {
.setting-main[data-v-7bf20a94] {
    flex-direction: column;
    gap: var(--gap-inline);
}
.setting-control[data-v-7bf20a94] {
    width: 100%;
}
}

.system-settings[data-v-05c3a347] {
  /* 상단 여백은 검색 바(.settings-search)가 담당 → root 는 좌·우·하만.
     검색 바가 sticky 라 root 에 padding-top 을 주면 좌우보다 커 보임. */
  padding: 0 var(--pad-page-x) var(--space-band);
}

/* 검색 바 — 첫 요소이므로 상단 여백(--page-pad-x)을 직접 가져 좌우와 일치 */
.settings-search[data-v-05c3a347] {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: var(--pad-page-x) 0 var(--space-cozy);
  border-bottom: var(--line-strong);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}

/* 모바일 자동 숨김 — 스크롤을 따라가는 동안은 transition 없이 1:1 이동(멈추면 그
   자리). 수동 토글·비활성 복귀 같은 이산 이동일 때만 transition 으로 마무리.
   카테고리 스트립(top)도 같은 타이밍으로 맞춘다. */
.settings-search--animate[data-v-05c3a347] {
  transition: transform var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-sidebar--animate[data-v-05c3a347] {
  transition: top var(--motion-base) cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.settings-search--animate[data-v-05c3a347],
  .settings-sidebar--animate[data-v-05c3a347] {
    transition: none;
}
}

/* 레이아웃 */
.settings-layout[data-v-05c3a347] {
  display: flex;
}

/* 사이드바 */
.settings-sidebar[data-v-05c3a347] {
  position: sticky;
  align-self: flex-start;
  z-index: 4;
  width: 200px;
  flex-shrink: 0;
  border-right: var(--line-strong);
  overflow-y: auto;
  padding: var(--space-snug) 0;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  max-height: var(--05c3a347-sidebarMaxHeight);
}
.category-btn[data-v-05c3a347] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  cursor: pointer;
  text-align: left;
  border-left: var(--line-w-thick) solid transparent;
  transition: all var(--motion-fast);
}
.category-btn[data-v-05c3a347]:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}
.category-btn--active[data-v-05c3a347] {
  color: var(--ink-brand);
  border-left-color: var(--ink-brand);
  background: var(--bg-hover);
  font-weight: var(--weight-title);
}
.category-btn i[data-v-05c3a347] {
  width: 16px;
  text-align: center;
  font-size: var(--icon-marker);
  flex-shrink: 0;
}
.category-btn__label[data-v-05c3a347] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-btn__count[data-v-05c3a347] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-card);
  flex-shrink: 0;
}

/* 설정 패널 */
.settings-panel[data-v-05c3a347] {
  flex: 1;
  padding: var(--space-roomy) 0 var(--space-roomy) var(--space-band);
  min-width: 0;
}

/* 단일 카테고리 모드 — 사이드바가 없어 좌측 패딩 제거 */
.settings-layout--single .settings-panel[data-v-05c3a347] {
  padding-left: 0;
}

/* 로딩/빈 상태 */
.settings-loading[data-v-05c3a347],
.settings-empty[data-v-05c3a347] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide) var(--space-wide);
  color: var(--ink-muted);
  gap: var(--gap-group);
}
.settings-loading i[data-v-05c3a347],
.settings-empty i[data-v-05c3a347] {
  font-size: var(--icon-empty);
  opacity: 0.5;
}

/* 카테고리 그룹 */
.settings-category-group[data-v-05c3a347] {
  margin-bottom: var(--gap-page);
  scroll-margin-top: 4rem;
}
.category-title[data-v-05c3a347] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0 0 var(--gap-stack);
  padding-bottom: var(--space-snug);
  border-bottom: var(--line-strong);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.category-title i[data-v-05c3a347] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}

/* 설정 아이템 */
.setting-item[data-v-05c3a347] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy) 0;
  border-bottom: var(--line-w) solid color-mix(in srgb, var(--line-color) 50%, transparent);
  border-left: var(--line-accent) solid transparent;
  padding-left: var(--space-cozy);
}
.setting-item--modified[data-v-05c3a347] {
  border-left-color: var(--ink-brand);
}
.setting-main[data-v-05c3a347] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-band);
}
.setting-info[data-v-05c3a347] {
  flex: 1;
  min-width: 0;
}
.setting-label-row[data-v-05c3a347] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-glyph);
}
.setting-label[data-v-05c3a347] {
  font-size: var(--size-body);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.setting-desc[data-v-05c3a347] {
  display: block;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-comfortable);
}
.restart-hint[data-v-05c3a347] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:root.dark .restart-hint[data-v-05c3a347] {
  color: var(--ink-secondary);
}

/* 리셋 버튼 */
.reset-btn[data-v-05c3a347] {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--size-meta);
  border-radius: var(--radius-badge);
  padding: 0;
  transition: all var(--motion-fast);
}
.reset-btn[data-v-05c3a347]:hover {
  color: var(--ink-brand);
  background: var(--bg-hover);
}

/* 저장 인디케이터 */
.save-indicator[data-v-05c3a347] {
  font-size: var(--size-meta);
}
.save-indicator--saved[data-v-05c3a347] {
  color: var(--ink-success);
}
.save-indicator--error[data-v-05c3a347] {
  color: var(--ink-danger);
}

/* 설정 컨트롤 */
.setting-control[data-v-05c3a347] {
  flex-shrink: 0;
  width: 280px;
}
.setting-input[data-v-05c3a347] {
  /* 외형은 AppInput/AppTextarea 토큰이 담당 — 레이아웃만 유지 */
  width: 100%;
}
.setting-input--number[data-v-05c3a347] {
  width: 120px;
}

/* 코드 칸(json)은 오른쪽 좁은 컨트롤 자리에 끼우지 않는다 —
   **라벨·설명 아래로 내려 폭을 다 쓴다.** 코드는 줄이 길고 여러 줄이라 280px 칸에서 못 읽는다. */
.setting-item--code .setting-main[data-v-05c3a347] {
  flex-wrap: wrap;
}
.setting-item--code .setting-control[data-v-05c3a347] {
  width: 100%;
  flex-shrink: 1;
}
.setting-input--json[data-v-05c3a347] {
  width: 100%;
  /* 모나코는 부모 높이를 따라간다(height:100%) — 여기서 높이를 주지 않으면 한 줄로 눌린다 */
  height: 14rem; /* dimensions-ignore: 코드 편집기 높이 — 여러 줄을 한눈에 보는 자리라 사다리 밖 */
  overflow: hidden;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  resize: vertical;
  min-height: 60px;
}
.setting-select[data-v-05c3a347] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  outline: none;
  cursor: pointer;
  transition: border-color var(--motion-fast);
}
.setting-select[data-v-05c3a347]:focus {
  border-color: var(--ink-brand);
}

/* 비밀번호 */
.password-wrapper[data-v-05c3a347] {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper .setting-input[data-v-05c3a347] {
  padding-right: var(--space-wide);
}
.password-toggle[data-v-05c3a347] {
  position: absolute;
  right: 0.375rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--size-meta);
  padding: 0;
}
.password-toggle[data-v-05c3a347]:hover {
  color: var(--ink-primary);
}

/* 반응형 */
@media (max-width: 768px) {
.system-settings[data-v-05c3a347] {
    padding: 0 var(--pad-page-x) var(--space-roomy);
}

  /* 모바일: 좌측 세로 사이드바를 상단 가로 스크롤 스트립으로 전환 —
     숨기면 카테고리 전환이 불가하므로(기능 손실) 가로 탭 바로 유지 */
.settings-layout[data-v-05c3a347] {
    flex-direction: column;
}
.settings-sidebar[data-v-05c3a347] {
    width: 100%;
    max-height: none;
    /* ⛔ display 를 함께 주지 않으면 아래 flex-direction 이 통째로 무효다(기본 display:block).
       그때 분류 단추 18개가 세로로 쌓여 스트립이 801px 이 되는데, 이 판은 sticky 라
       스크롤하면 그 801px 이 화면(638px)을 통째로 덮고 설정 내용이 그 뒤로 흘러가
       **아무리 굴려도 아무것도 안 보였다**(실측 2026-08-31, 390×844). */
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: var(--line-strong);
    padding: var(--space-tight) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.settings-sidebar[data-v-05c3a347]::-webkit-scrollbar {
    display: none;
}
.category-btn[data-v-05c3a347] {
    width: auto;
    flex: 0 0 auto;
    border-left: none;
    border-bottom: var(--line-w-thick) solid transparent;
    white-space: nowrap;
}
.category-btn--active[data-v-05c3a347] {
    border-left-color: transparent;
    border-bottom-color: var(--ink-brand);
}
.category-btn__label[data-v-05c3a347] {
    flex: 0 0 auto;
}
.settings-panel[data-v-05c3a347] {
    padding: var(--space-roomy) 0;
}
.setting-main[data-v-05c3a347] {
    flex-direction: column;
    gap: var(--gap-inline);
}
.setting-control[data-v-05c3a347] {
    width: 100%;
}
.setting-input--number[data-v-05c3a347] {
    width: 100%;
}
.settings-panel[data-v-05c3a347] {
    padding: var(--space-roomy) 0;
}
}

.pub-storage[data-v-3c69bb41] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  padding: var(--space-roomy) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 헤더는 스크롤해도 붙어 있게 — 파싱 › 보관(.retention__header)과 같은 규칙.
   배경을 깔지 않으면 스크롤된 내용이 글자 뒤로 비쳐 지나간다. */
.pub-storage__header[data-v-3c69bb41] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  padding: var(--space-snug) 0;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
.pub-storage__lead[data-v-3c69bb41] { display: flex; align-items: baseline; gap: var(--gap-stack); min-width: 0;
}
.pub-storage__title[data-v-3c69bb41] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.pub-storage__sub[data-v-3c69bb41] { font-size: var(--size-label); color: var(--ink-muted);
}
.pub-storage__tools[data-v-3c69bb41] { display: flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
.pub-storage__updated[data-v-3c69bb41] {
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.pub-storage__loading[data-v-3c69bb41] { color: var(--ink-secondary); padding: var(--space-band); text-align: center;
}
.panel[data-v-3c69bb41] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.panel__head[data-v-3c69bb41] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-stack); flex-wrap: wrap;
}
.panel__title[data-v-3c69bb41] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.usage-head[data-v-3c69bb41] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-stack); flex-wrap: wrap;
}
.usage-title[data-v-3c69bb41] { font-size: var(--size-label); color: var(--ink-primary);
}
.usage-value[data-v-3c69bb41] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}

/* 살림별 몫 막대 — 예산이 없으므로(㉮ 현황만) 게이지가 아니라 '나눠 쓰는 비율'을 보여준다. */
.split-bar[data-v-3c69bb41] {
  display: flex;
  height: var(--h-control-xs);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.split-bar__seg[data-v-3c69bb41] { height: 100%;
}
.split-bar__seg--catalog[data-v-3c69bb41] { background: var(--bg-brand-vivid);
}
.split-bar__seg--meta[data-v-3c69bb41] { background: var(--ink-info);
}
.split-bar__seg--other[data-v-3c69bb41] { background: var(--bg-field);
}
.legend[data-v-3c69bb41] { display: flex; flex-wrap: wrap; gap: var(--gap-group); font-size: var(--size-meta); color: var(--ink-secondary);
}
.legend__item[data-v-3c69bb41] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.legend__dot[data-v-3c69bb41] { width: var(--space-snug); height: var(--space-snug); border-radius: var(--radius-pill);
}
.legend__dot--catalog[data-v-3c69bb41] { background: var(--bg-brand-vivid);
}
.legend__dot--meta[data-v-3c69bb41] { background: var(--ink-info);
}
.legend__dot--other[data-v-3c69bb41] { background: var(--bg-field);
}
.legend__pct[data-v-3c69bb41] { color: var(--ink-muted);
}
.stat-grid[data-v-3c69bb41] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gap-stack);
}
.stat-card[data-v-3c69bb41] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.stat-label[data-v-3c69bb41] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.stat-value[data-v-3c69bb41] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-3c69bb41] { font-size: var(--size-meta); color: var(--ink-muted);
}
.note[data-v-3c69bb41] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin: 0;
}
.note > i[data-v-3c69bb41] { line-height: inherit;
}
.note--danger[data-v-3c69bb41] { color: var(--ink-danger); font-size: var(--size-label);
}
.note--warn[data-v-3c69bb41] { color: var(--ink-warning); font-size: var(--size-label);
}

.pkg-steps[data-v-a3866087] {
  display: flex;
  list-style: none;
  margin: 0 0 var(--gap-group);
  padding: 0;
  gap: var(--gap-inline);
}
.pkg-steps li[data-v-a3866087] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex: 1;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.pkg-steps__num[data-v-a3866087] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px; /* dimensions-ignore: 단계 번호 뱃지 원형 고정 크기 */
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  font-weight: var(--weight-strong);
}
.pkg-steps__item--active[data-v-a3866087] { color: var(--ink-primary);
}
.pkg-steps__item--active .pkg-steps__num[data-v-a3866087] { background: var(--bg-brand); color: var(--ink-on-solid);
}
.pkg-steps__item--done .pkg-steps__num[data-v-a3866087] { background: var(--bg-info); color: var(--ink-on-solid);
}

/* 단계 영역은 일정한 높이를 확보 — 설명/목록이 이 높이를 flex 로 채운다(단계 간 높이 점프도 방지) */
.pkg-step[data-v-a3866087] { display: flex; flex-direction: column; gap: var(--gap-stack); min-height: 60vh;
}
.pkg-field[data-v-a3866087] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.pkg-field__label[data-v-a3866087] { font-size: var(--size-label); color: var(--ink-secondary);
}
.pkg-field__label em[data-v-a3866087] { color: var(--ink-danger); font-style: normal;
}
/* 입력/설명은 모달 너비 100% */
.pkg-field[data-v-a3866087] .app-input,
.pkg-field[data-v-a3866087] input,
.pkg-textarea[data-v-a3866087] { width: 100%; box-sizing: border-box;
}
/* 설명 — 남는 세로 공간까지 채워 늘어남 (너비 100% + 높이 flex-grow) */
.pkg-field--grow[data-v-a3866087] { flex: 1; min-height: 0;
}
.pkg-field--grow .pkg-textarea[data-v-a3866087] { flex: 1; height: 100%; min-height: 140px; resize: none;
}
.pkg-filters[data-v-a3866087] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.pkg-filters__row[data-v-a3866087] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}

/* 전체선택 체크박스를 행 체크박스(.pkg-cand 안쪽 패딩 + 1px 테두리)와 같은 x 축에 정렬 */
.pkg-cand-head[data-v-a3866087] { display: flex; align-items: center; gap: var(--gap-inline); padding-left: calc(var(--space-snug) + 1px); font-size: var(--size-label); color: var(--ink-secondary);
}
.pkg-select-all[data-v-a3866087] { display: inline-flex; align-items: center; gap: var(--gap-inline); cursor: pointer;
}
.pkg-cand-found[data-v-a3866087] { color: var(--ink-muted);
}
.pkg-cand-spacer[data-v-a3866087] { flex: 1;
}
.pkg-cand-selected[data-v-a3866087] { color: var(--ink-brand); font-weight: var(--weight-strong);
}
.pkg-cand-loading[data-v-a3866087], .pkg-empty[data-v-a3866087] { padding: var(--space-band); text-align: center; color: var(--ink-muted);
}

/* 목록은 단계 영역의 남는 높이를 채우고 내부 스크롤 (max-height 고정 대신 flex) */
.pkg-cand-list[data-v-a3866087], .pkg-order-list[data-v-a3866087], .pkg-confirm-list[data-v-a3866087] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-glyph); flex: 1 1 0; min-height: 0; overflow-y: auto;
}
.pkg-cand[data-v-a3866087] { display: flex; align-items: center; gap: var(--gap-inline); padding: var(--space-snug); border-radius: var(--radius-control); border: var(--line-strong); cursor: pointer;
}
.pkg-cand[data-v-a3866087]:hover { background: var(--bg-page);
}
.pkg-cand--on[data-v-a3866087] { border-color: var(--ink-brand); background: var(--bg-chrome);
}
.pkg-cand__thumb[data-v-a3866087] { width: 32px; height: 42px; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-badge); background: var(--bg-card);
}
.pkg-cand__thumb--empty[data-v-a3866087] { display: flex; align-items: center; justify-content: center; color: var(--ink-muted);
}
.pkg-cand__info[data-v-a3866087] { min-width: 0; flex: 1;
}
.pkg-cand__title[data-v-a3866087] { font-size: var(--size-label); color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pkg-cand__sub[data-v-a3866087] { display: flex; align-items: center; gap: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-secondary); margin-top: var(--space-tight);
}
.pkg-cand__dim[data-v-a3866087] { color: var(--ink-muted);
}
.pkg-hint[data-v-a3866087], .pkg-confirm-list .pkg-cand__dim[data-v-a3866087] { font-size: var(--size-label); color: var(--ink-secondary);
}
.pkg-cover-preview__box[data-v-a3866087] { width: 150px; height: 190px; flex: none;
} /* dimensions-ignore: 표지 미리보기 고정 크기 */

/* 확인 단계: 표지 미리보기 + 요약 나란히 */
.pkg-confirm-cover[data-v-a3866087] { display: flex; gap: var(--gap-group); align-items: flex-start;
}
.pkg-confirm[data-v-a3866087] { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-glyph) var(--gap-stack); margin: 0; flex: 1; min-width: 0;
}
.pkg-confirm dt[data-v-a3866087] { color: var(--ink-secondary); font-size: var(--size-label);
}
.pkg-confirm dd[data-v-a3866087] { margin: 0; color: var(--ink-primary); font-size: var(--size-label);
}
.pkg-confirm-list li[data-v-a3866087] { display: flex; align-items: center; gap: var(--gap-glyph); font-size: var(--size-label); padding: var(--space-tight) 0;
}
.pkg-confirm-list__idx[data-v-a3866087] { width: 18px; color: var(--ink-muted);
}
.pkg-footer-spacer[data-v-a3866087] { flex: 1;
}

/* 빌드 진행 / 실패 단계 */
.pkg-build[data-v-a3866087] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gap-inline);
  min-height: 220px; /* dimensions-ignore: 빌드 대기 화면 최소 높이 */
  padding: var(--space-band) var(--space-roomy);
}
.pkg-build__spinner[data-v-a3866087] { font-size: var(--icon-lead); color: var(--ink-brand);
}
.pkg-build__fail[data-v-a3866087] { font-size: var(--size-title-lg); color: var(--ink-danger);
}
.pkg-build__msg[data-v-a3866087] { margin: 0; font-size: var(--size-body); color: var(--ink-primary); font-weight: var(--weight-strong);
}
.pkg-build__hint[data-v-a3866087] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); max-width: 360px;
}
.pkg-build__err[data-v-a3866087] { margin: 0; font-size: var(--size-label); color: var(--ink-danger); max-width: 420px; word-break: break-word;
}

/* 좁은 폰: 확인 단계 표지(150px 고정)+요약을 세로로 쌓아 요약이 눌리지 않게 */
@media (max-width: 480px) {
.pkg-confirm-cover[data-v-a3866087] { flex-direction: column;
}
}

/* +추가 종류 선택 모달 */
.add-picker[data-v-b965bc4c] { display: flex; gap: var(--gap-stack);
}
.add-picker__choice[data-v-b965bc4c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-band) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  background: var(--bg-page);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.add-picker__choice[data-v-b965bc4c]:hover { border-color: var(--ink-brand); background: var(--bg-chrome);
}
.add-picker__icon[data-v-b965bc4c] { font-size: var(--icon-lead); color: var(--ink-brand);
}
.add-picker__label[data-v-b965bc4c] { font-size: var(--size-body); font-weight: var(--weight-strong); color: var(--ink-primary);
}
.add-picker__desc[data-v-b965bc4c] { font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-comfortable);
}
.catalog-config[data-v-b965bc4c] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ListScreen 이 남는 공간을 모두 차지하고 내부 스크롤 */
.catalog-config[data-v-b965bc4c] .list-screen {
  flex: 1;
  min-height: 0;
  /* 루트 상단 여백은 서브탭이 소유하므로 0 */
  padding-top: 0;
}

/* 설정 서브탭 컨테이너 — 내부 패널이 직접 배치 */
.section[data-v-b965bc4c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--pad-page-x) var(--space-band);
  width: 100%;
  box-sizing: border-box;
}
.section[data-v-b965bc4c] .system-settings {
  padding: 0;
  max-width: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ─── 테이블 셀 표현 ─── */
.title-cell[data-v-b965bc4c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.title-product[data-v-b965bc4c] {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
/* 클릭 가능한 카탈로그 제목 — hover 시 primary 강조, 기본은 본문 색 유지. */
.title-product--link[data-v-b965bc4c] {
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast);
}
.title-product--link[data-v-b965bc4c]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.title-company[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  min-width: 0;
}
.title-pkg-count[data-v-b965bc4c] { color: var(--ink-muted);
}
.text-sm[data-v-b965bc4c] { font-size: var(--size-label);
}

/* 상태 뱃지 */

/* 파일 상태 아이콘 */
.ok-icon[data-v-b965bc4c]   { color: var(--ink-success);
}
.warn-icon[data-v-b965bc4c] { color: var(--ink-warning);
}
.cat-status-cell[data-v-b965bc4c] { display: flex; align-items: center; gap: var(--gap-glyph); flex-wrap: wrap;
}

/* 액션 — icon-only AppButton 묶음 */
.action-btns[data-v-b965bc4c] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* ─── 카드형 본문 ─── */
.cat-card[data-v-b965bc4c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
  width: 100%;
}
.cat-card__title[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.cat-card__title .title-product[data-v-b965bc4c] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  word-break: break-word;
}
.cat-card__company[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.cat-card__metrics[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph) var(--gap-stack);
  flex-wrap: wrap;
}
.cat-card__meta[data-v-b965bc4c] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.cat-card__actions[data-v-b965bc4c] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  margin-top: var(--gap-glyph);
}

/* ─── 후보 모달 ─── */
.cand-filter-bar[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  margin-bottom: var(--gap-inline);
}
.cand-filter-bar--row2[data-v-b965bc4c] {
  padding-bottom: var(--space-snug);
  border-bottom: var(--line-w) dashed var(--line-color);
}
.cand-search-input[data-v-b965bc4c] { flex: 1 1 100%; min-width: 0;
}
.cand-sort-spacer[data-v-b965bc4c] { flex: 1 1 auto;
}

/* 후보 모달 — sticky 일괄선택 바 */
.cand-bulk-bar[data-v-b965bc4c] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-control);
  margin-bottom: var(--gap-stack);
}
.cand-select-all[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  color: var(--ink-primary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cand-count[data-v-b965bc4c] {
  font-size: var(--size-label);
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  margin-right: auto;
}
.cand-filtered-info[data-v-b965bc4c] {
  margin-left: var(--gap-glyph);
  font-weight: var(--weight-body);
  color: var(--ink-secondary);
}
.bulk-checkbox[data-v-b965bc4c] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ink-brand);
}

/* 후보 모달 본문 — 높이를 고정해 카드 리스트만 스크롤하게 함 (모달 본문 자체는 스크롤 X) */
.cand-modal-body[data-v-b965bc4c] {
  display: flex;
  flex-direction: column;
  height: 72vh;
  min-height: 0;
}
/* 필터·일괄선택 바는 고정 — 줄어들지 않음 */
.cand-modal-body > .cand-filter-bar[data-v-b965bc4c],
.cand-modal-body > .cand-bulk-bar[data-v-b965bc4c],
.cand-modal-body > .bulk-progress[data-v-b965bc4c] {
  flex-shrink: 0;
}
.candidate-list[data-v-b965bc4c] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.candidate-list li[data-v-b965bc4c] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-stack);
  padding: var(--pad-panel);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}
.cand-checkbox[data-v-b965bc4c] { margin-top: var(--gap-glyph);
}
.cand-info[data-v-b965bc4c] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.cand-title[data-v-b965bc4c] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-glyph);
  color: var(--ink-primary);
  font-size: var(--size-body);
}
/* 좁아지면 상품명만 줄바꿈, 뱃지/종류는 자리 유지 */
.cand-title .cand-doc-type[data-v-b965bc4c],
.cand-title .cand-doc-sep[data-v-b965bc4c],
.cand-title .cand-doc-revision[data-v-b965bc4c],
.cand-title .push-right[data-v-b965bc4c] {
  flex-shrink: 0;
  white-space: nowrap;
}
.cand-title .cand-doc-title[data-v-b965bc4c] {
  flex: 1 1 auto;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.cand-doc-type[data-v-b965bc4c] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.cand-doc-sep[data-v-b965bc4c] { color: var(--ink-muted);
}
.cand-doc-title[data-v-b965bc4c] { font-weight: var(--weight-title);
}
.cand-doc-revision[data-v-b965bc4c] { color: var(--ink-secondary); font-weight: var(--weight-body); font-size: var(--font-rel-sm);
} /* css-ignore: decorative em */
.cand-sub[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.cand-divider[data-v-b965bc4c] { color: var(--ink-muted);
}
.cand-meta-people[data-v-b965bc4c] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.cand-when[data-v-b965bc4c] {
  color: var(--ink-secondary);
  font-size: var(--size-label);
}

/* 신규/기존 카탈로그 뱃지 */
/* 1줄 우측 정렬 (제목/종류는 좌측, 카탈로그 상태 뱃지는 우측) */
.cand-title .push-right[data-v-b965bc4c] { margin-left: auto;
}
.empty-text[data-v-b965bc4c] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-muted);
}

/* === 후보 모달 로딩 (skeleton) === */
.cand-loading[data-v-b965bc4c] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30vh;
}
.cand-loading-status[data-v-b965bc4c] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  padding: var(--space-tight) var(--space-snug);
}

/* === 일괄 등록 진행상황 === */
.bulk-progress[data-v-b965bc4c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  margin-bottom: var(--gap-inline);
}
.bulk-progress-row[data-v-b965bc4c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
}
.bulk-progress-text[data-v-b965bc4c] {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.bulk-progress-counts[data-v-b965bc4c] {
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.bulk-progress-bar[data-v-b965bc4c] {
  height: 6px; /* css-ignore — 얇은 진행 바 (6px) */
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.bulk-progress-fill[data-v-b965bc4c] {
  height: 100%;
  background: var(--bg-brand-vivid);
  transition: width var(--motion-base) ease;
}

/* === 모바일 반응형 === */
@media (max-width: 768px) {
.section[data-v-b965bc4c] {
    padding: 0 var(--pad-page-x) var(--space-roomy);
}
}

.pi-overview[data-v-1c0cc693] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.pi-overview__header[data-v-1c0cc693] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-tight);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.pi-overview__counts[data-v-1c0cc693] {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
  font-size: var(--size-label);
  flex-wrap: wrap;
}
.pi-overview__count[data-v-1c0cc693] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.pi-overview__count--error[data-v-1c0cc693] { color: var(--ink-danger);
}
.pi-overview__count--warning[data-v-1c0cc693] { color: var(--ink-warning);
}
.pi-overview__count-label[data-v-1c0cc693] { font-size: var(--size-meta); opacity: 0.85;
}
.pi-overview__empty-count[data-v-1c0cc693] { color: var(--ink-muted); font-size: var(--size-label);
}
.pi-overview__doc-count[data-v-1c0cc693] { color: var(--ink-muted); font-size: var(--size-label);
}
.pi-overview__action-label[data-v-1c0cc693] { display: none;
}
@media (min-width: 480px) {
.pi-overview__action-label[data-v-1c0cc693] { display: inline;
}
}
.pi-overview__filter-bar[data-v-1c0cc693] {
  padding: var(--space-snug) var(--space-tight);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.pi-overview__truncated[data-v-1c0cc693] {
  display: flex; align-items: center; gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-info);
  background: var(--bg-info-soft);
  border-bottom: var(--line-strong);
}
.pi-overview__state[data-v-1c0cc693] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-wide);
  gap: var(--gap-inline); color: var(--ink-muted); font-size: var(--size-body);
}
.pi-overview__state--error[data-v-1c0cc693] { color: var(--ink-danger);
}

/* 리스트가 본문 내부 스크롤 영역 — 헤더/검색바(flex-shrink:0)는 고정, 리스트만 스크롤.
   ListBody 와 동일 패턴(flex:1 + min-height:0 + overflow-y:auto)이라야 모바일에서도 스크롤됨. */
.pi-overview__list[data-v-1c0cc693] {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pi-overview__group-header[data-v-1c0cc693] {
  display: flex; align-items: center; gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-bottom: var(--line-strong);
  cursor: pointer;
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pi-overview__group-header[data-v-1c0cc693]:hover { background: var(--bg-hover);
}
.pi-overview__group-header--error[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-danger);
}
.pi-overview__group-header--warning[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-warning);
}
.pi-overview__group-header--info[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-info);
}
.pi-overview__group-toggle[data-v-1c0cc693] { font-size: var(--size-meta); color: var(--ink-muted); width: 12px;
}
.pi-overview__group-title[data-v-1c0cc693] { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pi-overview__group-count[data-v-1c0cc693] { color: var(--ink-muted); font-weight: normal; font-size: var(--size-meta); flex-shrink: 0;
}
.pi-overview__item[data-v-1c0cc693] {
  border-bottom: var(--line-strong);
  padding: var(--space-tight) var(--space-snug) var(--space-tight) var(--space-snug);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  transition: background-color var(--motion-fast);
}
.pi-overview__item[data-v-1c0cc693]:hover { background: var(--bg-hover);
}
.pi-overview__item--error[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-danger);
}
.pi-overview__item--warning[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-warning);
}
.pi-overview__item--info[data-v-1c0cc693] { border-left: var(--line-accent) solid var(--ink-info);
}
.pi-overview__item--indented[data-v-1c0cc693] { padding-left: var(--space-wide);
}
.pi-overview__item-body[data-v-1c0cc693] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0; flex: 1; cursor: pointer;
}
.pi-overview__go-btn[data-v-1c0cc693] { flex-shrink: 0; align-self: center;
}
.pi-overview__message-row[data-v-1c0cc693] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.pi-overview__page[data-v-1c0cc693] { font-weight: var(--weight-title); color: var(--ink-secondary); flex-shrink: 0;
}
.pi-overview__message[data-v-1c0cc693] {
  flex: 1; min-width: 0;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
}
.pi-overview__icon--error[data-v-1c0cc693] { color: var(--ink-danger);
}
.pi-overview__icon--warning[data-v-1c0cc693] { color: var(--ink-warning);
}
.pi-overview__icon--info[data-v-1c0cc693] { color: var(--ink-info);
}
.pi-overview__doc[data-v-1c0cc693] {
  display: inline-flex; align-items: center; gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.pi-overview__doc-company[data-v-1c0cc693] { font-weight: var(--weight-title); color: var(--ink-secondary);
}
.pi-overview__doc-product[data-v-1c0cc693] { color: var(--ink-secondary);
}
/* 문서 ID — 숫자는 한 줄 고정 (부모의 overflow-wrap: anywhere 로 자릿수가 끊기지 않게) */
.pi-overview__doc-id[data-v-1c0cc693] { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 점진 적재 표식 — 목록 맨 아래에서 다음 묶음을 당기는 중임을 알린다 */
.pi-overview__more[data-v-1c0cc693] {
  display: flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  padding: var(--pad-card);
  color: var(--ink-muted);
  font-size: var(--size-label);
}


.avatar-popover[data-v-35921adc] {
  display: inline-flex;
  position: relative;
}
.avatar-popover__avatar[data-v-35921adc] {
  cursor: pointer;
}
.avatar-popover__card[data-v-35921adc] {
  background: var(--bg-float);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  overflow: hidden;
}
.avatar-popover__profile[data-v-35921adc] {
  display: flex;
  align-items: center;
  /* ⛔ 부품(UserLabel)을 못 쓰는 두 줄 자리지만 **간격은 부품과 같다** — 4px(2026-09-12). */
  gap: var(--gap-glyph);
  padding: var(--space-cozy);
}
.avatar-popover__profile-avatar[data-v-35921adc] {
  flex-shrink: 0;
}
.avatar-popover__info[data-v-35921adc] {
  display: flex;
  flex-direction: column;
}
.avatar-popover__name[data-v-35921adc] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.avatar-popover__uid[data-v-35921adc] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.avatar-popover__actions[data-v-35921adc] {
  padding: var(--space-snug);
  border-top: var(--line-strong);
}


.todos-cell[data-v-241f7072] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  overflow-x: auto;
  min-width: 0;
}
/* 대화형 TODO 항목 (role=button, 클릭 시 TODO 열기) — 다중 정보(아이디·상태·진행률·담당자·삭제)를
   포함한 합성 위젯이라 AppChip(단일 button + slot)로는 표현 불가능. 자체 구조 유지. */
.todo-item[data-v-241f7072] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  /* ⛔ 높이는 «칸이» 정한다 — 같은 줄에 서는 「제품 등록」·「부품 등록」 칩이 AppButton sm(--h-control-sm)
     이므로 이 칩도 같은 단이다. 전에는 안여백(--pad-badge) + 안에 든 sm 단추(26px)가 높이를 정해
     32px 이라, 같은 행의 칩들과 6px 어긋나 있었다(실측 2026-09-12, 수동파싱·수동추출 두 화면 모두).
     그래서 ① 높이를 못 박고 ② 안의 ✕ 를 xs(22px)로 낮춰 높이를 정하지 못하게 한다. */
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  cursor: pointer;
  transition: all var(--motion-fast);
  color: var(--ink-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.todo-item__id[data-v-241f7072],
.todo-item__status[data-v-241f7072],
.todo-item__progress[data-v-241f7072] {
  white-space: nowrap;
  flex-shrink: 0;
}
.todo-item__assignee-label[data-v-241f7072] .user-label__name {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7em;
}
.todo-item[data-v-241f7072]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
}
.todo-item__id[data-v-241f7072] {
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.todo-item__status[data-v-241f7072] {
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
}
.todo-item--pending     .todo-item__status[data-v-241f7072] { color: var(--ink-muted);
}
.todo-item--in_progress .todo-item__status[data-v-241f7072] { color: var(--ink-info);
}
.todo-item--review      .todo-item__status[data-v-241f7072] { color: var(--ink-warning);
}
.todo-item--completed   .todo-item__status[data-v-241f7072] { color: var(--ink-success);
}
.todo-item__progress[data-v-241f7072] {
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}
.todo-item__assignee[data-v-241f7072] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-muted);
  border-left: var(--line-strong);
  padding-left: var(--space-tight);
  margin-left: var(--gap-glyph);
}
/* ⛔ 왼쪽에 굵은 의미색 띠를 대지 않는다(사용자 지시 2026-09-12) — 고른 것도 아닌데 3px 띠를
   두르면 26px 짜리 칩에서 띠가 내용보다 세다. 상태는 **글자색**(.todo-item__status)이 말한다. */
.todo-item--completed[data-v-241f7072]   { opacity: 0.7;
}

/* 댓글 태그 심각도 강조 — 진행상태색보다 우선. 에러=빨강, 경고=주황(테마 토큰, 라이트/다크 공용).
   완료 상태의 흐림(opacity)도 해제해 플래그가 또렷이 보이도록 한다. (소스 순서로 위 규칙을 덮어씀) */
.todo-item--severity-warning .todo-item__status[data-v-241f7072] { color: var(--ink-warning);
}
.todo-item--severity-error   .todo-item__status[data-v-241f7072] { color: var(--ink-danger);
}
.todo-item--severity-warning[data-v-241f7072] { opacity: 1;
}
.todo-item--severity-error[data-v-241f7072]   { opacity: 1;
}

/* ⛔ ✕ 는 앞 글자의 곁 글리프가 아니라 **이웃 컨트롤**이다 — 사이는 8px(`--gap-inline`)이고
   칩 안여백과 같은 값이라야 좌우가 고르다. 칩 `gap` 이 4px 이므로 한 단 더한다
   (「제품 등록」·「부품 등록」 칸과 같은 유형 · 실사고 2026-09-12). */
.todo-item__delete[data-v-241f7072] {
  flex-shrink: 0;
  margin-left: var(--gap-glyph);
}
.create-todo-btn[data-v-241f7072] {
  border: var(--line-w) dashed var(--line-color);
}
.create-todo-btn[data-v-241f7072]:hover {
  border-style: solid;
  border-color: var(--ink-brand);
}

.product-cell[data-v-1e892064] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* 원본: ParsingJobTodosCell.vue 의 .todo-item — 같은 줄에 서는 카드라 골격·높이가 같아야 한다.
   ⛔ 높이는 «칸이» 정한다(--h-control-sm) — 안에 든 ✕ 가 높이를 정하지 못하게 xs 로 낮춰 둔다. */
.product-cell__catalog[data-v-1e892064] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.product-cell__catalog[data-v-1e892064]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
}
.product-cell__catalog-id[data-v-1e892064] {
  font-variant-numeric: tabular-nums;
}
/* ⛔ 왼쪽에 굵은 의미색 띠를 대지 않는다(사용자 지시 2026-09-12). 공개/비공개는 **글자색**으로. */
.product-cell__catalog--unlisted[data-v-1e892064]  { color: var(--ink-muted); opacity: 0.7;
}
/* ⛔ ✕ 는 번호의 곁 글리프가 아니라 **이웃 컨트롤**이다 — 사이는 8px(`--gap-inline`)이고
   카드 안여백과 같은 값이라야 좌우가 고르다. 카드 `gap` 이 4px 이므로 한 단 더한다
   (부품 등록 칸과 같은 유형 · 실사고 2026-09-12). */
.product-cell__toggle[data-v-1e892064] { color: var(--ink-muted); margin-left: var(--gap-glyph);
}
.product-cell__toggle[data-v-1e892064]:hover { color: var(--ink-danger);
}
.product-cell__register[data-v-1e892064] { border: var(--line-w) dashed var(--line-color);
}
/* 등록 불가 사유 — 버튼이 아니라 설명이므로 회색 텍스트로 둔다. */
.product-cell__blocked[data-v-1e892064] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-muted);
  font-size: var(--size-label);
  white-space: nowrap;
}

.ppr-btn[data-v-4afaad60] {
  /* 링은 sm(큼)·xs(작음)의 중간 ~28px 로 고정 (AppButton 사이즈 클래스보다 우선) */
  position: relative;
  flex-shrink: 0;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  padding: 0 !important;
}
/* SVG(치환 요소)를 버튼(1.75rem)에 꽉 채운다. 명시 크기 + 가운데 정렬.
   ⚠️ 카드 meta 슬롯(.list-body__card-metavalue :is(img,svg){width:1.2em!important})이 링을 14px 로
   찌그러뜨려 "깨진 원"처럼 보였다(비교모드 작업셀=meta 역할). 특이도(.ppr-btn .ppr-svg)+!important 로 이김. */
.ppr-btn .ppr-svg[data-v-4afaad60] {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.75rem !important;
  height: 1.75rem !important;
}
/* 트랙(미충전) 링 — 다크 테마 검은 카드(#000)에서 --border-color(#2a2a2a)는 거의 안 보여
   낮은 진행률에서 링이 '깨진 호'처럼 보였다. 두 테마 모두 은은하게 보이는 중성색+투명도로. */
.ppr-track[data-v-4afaad60] { stroke: var(--ink-muted); opacity: 0.35; stroke-width: 3;
}
.ppr-arc[data-v-4afaad60] {
  stroke: var(--ink-brand);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray var(--motion-base) ease;
}
.ppr-svg--pending .ppr-arc[data-v-4afaad60] { stroke: var(--ink-muted);
}
.ppr-arc--spin[data-v-4afaad60] {
  transform-box: fill-box;
  transform-origin: center;
  animation: ppr-spin-4afaad60 1s linear infinite;
}
@keyframes ppr-spin-4afaad60 {
to { transform: rotate(360deg);
}
}
.ppr-center[data-v-4afaad60] {
  /* 절대배치 + grid 정중앙 — 인라인 아이콘 baseline 오프셋에 의한 미세 상향 치우침 제거 */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ppr-center[data-v-4afaad60] > * {
  grid-area: 1 / 1; /* 같은 셀에 겹침 → 상태 교차 페이드에도 위치 불변 */
  line-height: var(--line-none);
}
.ppr-info[data-v-4afaad60] {
  transition: opacity var(--motion-fast) ease;
}
.ppr-pct[data-v-4afaad60] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink-brand);
  /* 글자 상자는 이미 정중앙이나 숫자(9·7·1 등)는 획 무게가 위쪽에 몰려 위로 떠 보임
     — 질량 중심 기준 광학 보정으로 0.03em 하향(픽셀 실측: 97 질량이 정중앙에 옴) */
  transform: translateY(0.03em);
}
.ppr-pct--wide[data-v-4afaad60] {
  /* 3자리(100)는 링 내경에 닿아 축소 — translate(광학보정)+scale 병기해 grid 정중앙 유지 */
  transform: translateY(0.03em) scale(0.82);
}
/* 호버 = '열 수 있음' 신호 — 트랙을 강조색으로 띄우고 진행 표시를 또렷하게.
   (예전엔 호버 시 중앙이 ✕ 로 교체됐으나, 취소는 링 밖 별도 버튼으로 분리됨) */
.ppr-btn:hover .ppr-track[data-v-4afaad60],
.ppr-btn:focus-visible .ppr-track[data-v-4afaad60] {
  stroke: var(--ink-brand);
  opacity: 0.4;
}

/* 진행률 링·'파싱 요청'을 셀 안에서 우측으로 — col-issue_count(align:right) 및 파싱됨 숫자와 정렬을 맞춤.
   테이블 셀(block)에선 전체 폭 → 오른쪽 끝, 카드 metrics 행(flex row)에선 콘텐츠 폭 flex 아이템 →
   분배할 여백이 없어 인라인 그대로 유지(폭 강제 없음). */
.issue-cell-center[data-v-090d85af] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 파싱 중 — 링(열기) + ✕(취소) 두 버튼. 좁은 셀이라 간격은 최소로. */
.issue-cell-center--parsing[data-v-090d85af] {
  gap: var(--gap-glyph);
}
/* 취소 ✕ — 평상시 흐린 보조색, 호버 시에만 위험색으로 또렷하게(오클릭 억제) */
.cancel-parse-btn[data-v-090d85af] {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.cancel-parse-btn[data-v-090d85af]:hover,
.cancel-parse-btn[data-v-090d85af]:focus-visible {
  color: var(--ink-danger);
}

/* 미파싱 행의 '파싱 요청' 버튼 — TODO 셀의 'create' 버튼과 동일 점선 톤 */
.request-parse-btn[data-v-090d85af] {
  border: var(--line-w) dashed var(--line-color);
}
.request-parse-btn[data-v-090d85af]:hover {
  border-style: solid;
  border-color: var(--ink-brand);
}
/* 재파싱(데이터 삭제됨) — 실선 테두리 + 보조색으로 '이미 파싱한 적 있음'을 점선(신규)과 구분. */
.request-parse-btn--reparse[data-v-090d85af] {
  border-style: solid;
  border-color: var(--line-color);
  color: var(--ink-secondary);
}
.request-parse-btn--reparse[data-v-090d85af]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}

/* 파싱 실패 이력 — 번개 아이콘/테두리를 붉게(에러 표시). color 로 fa 아이콘(currentColor)까지 함께 빨강. */
.request-parse-btn--failed[data-v-090d85af],
.request-parse-btn--failed[data-v-090d85af] .app-btn__label {
  color: var(--ink-danger);
  border-color: var(--ink-danger);
}
.request-parse-btn--failed[data-v-090d85af]:hover {
  border-style: solid;
  border-color: var(--ink-danger);
  color: var(--ink-danger);
}

/* 파싱됨 — 확인사항 수 자체가 링크(제목처럼, 클릭=내용 열람). 우측 정렬을 위해 높이/패딩 압축 */
.issue-num-btn[data-v-090d85af] {
  height: auto;
  padding: var(--space-tight) var(--space-tight);
  font-variant-numeric: tabular-nums;
}
/* 이 화면의 상품/문서명 링크(.document-name--link)와 동일한 '제목' 감:
   평상시 일반 텍스트색 → 호버/포커스 시에만 강조색 + 밑줄. */
.issue-num-btn[data-v-090d85af] .app-btn__label {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.issue-num-btn[data-v-090d85af]:hover .app-btn__label,
.issue-num-btn[data-v-090d85af]:focus-visible .app-btn__label {
  color: var(--ink-brand);
  text-decoration: underline;
}
.issue-num-btn--has[data-v-090d85af] .app-btn__label {
  color: var(--ink-warning);
  font-weight: var(--weight-title);
}
.issue-num__label[data-v-090d85af] {
  margin-right: var(--gap-glyph);
}
/* 파싱은 됐으나 마지막 재추출 실패 — 숫자를 위험색으로, 앞의 ⚠ 아이콘으로 '정상 아님' 명시.
   --has(경고색)·--card 조합보다 우선하도록 같은/높은 특이도로 마지막에 선언. */
.issue-num-btn--failed[data-v-090d85af] .app-btn__label,
.issue-num-btn--failed.issue-num-btn--has[data-v-090d85af] .app-btn__label,
.issue-num-btn--card.issue-num-btn--failed[data-v-090d85af] .app-btn__label,
.issue-num-btn--card.issue-num-btn--failed.issue-num-btn--has[data-v-090d85af] .app-btn__label {
  color: var(--ink-danger);
  font-weight: var(--weight-title);
}
.issue-num-btn--failed[data-v-090d85af]:hover .app-btn__label,
.issue-num-btn--failed[data-v-090d85af]:focus-visible .app-btn__label {
  color: var(--ink-danger);
}
.issue-num__fail-icon[data-v-090d85af] {
  color: var(--ink-danger);
  margin-right: var(--gap-glyph);
  font-size: var(--icon-marker);
}
/* 카드 변형 — 작은 폰트 (강조색은 위 기본 규칙 유지) */
.issue-num-btn--card[data-v-090d85af] .app-btn__label {
  font-size: var(--size-meta);
}
.issue-num-btn--card.issue-num-btn--has[data-v-090d85af] .app-btn__label {
  color: var(--ink-warning);
}

/* 목록/확인사항 뷰탭을 도움말 드로어 헤더 높이에 맞춰 살짝 키움 — 바닥 구분선 정렬. */
.pj-view-tabs[data-v-dde4e9f5] .tab-nav__tab {
  padding-block: 12.75px; /* dimensions-ignore: 12px(space-3)+0.75px 대칭 — 도움말 헤더(45px)와 정확히 같은 높이 */
}

/* ── 통계 카드 (KPI 카드: 아이콘 좌측 + 라벨/값 세로 텍스트열) ── */
/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창과 판이 따로 논다.
   실측 2026-08-29: 창 820px 에서 판은 568px 인데 3열(타일 184px)이고, 창 768px 에서는
   곁막대가 접혀 판이 736px 인데 **같은 3열**(240px)이었다 — 창이 좁아질수록 판은 넓어지는데
   열은 거꾸로 갔다. 200px 은 타일의 최대 내용 폭(178px 실측)에 맞춘 값이고,
   ActivityLogs·FeedbackAnalytics 가 이미 쓰는 선례다. */
.stats-summary[data-v-dde4e9f5] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-inline);
}
.stat-card[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--pad-tile);
  min-width: 0;
}
.stat-main[data-v-dde4e9f5] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
/* 아이콘은 라벨+값 2줄 높이에 맞춰 세로로 카드 중앙에 정렬 — 아이콘/텍스트 높이 일치 */
.stat-icon[data-v-dde4e9f5] {
  width: var(--h-control-lg);
  height: var(--h-control-lg);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-toolbar);
  color: var(--ink-on-solid);
  flex-shrink: 0;
}
.stat-icon--total[data-v-dde4e9f5]       { background: var(--bg-brand);
}
.stat-icon--parsed[data-v-dde4e9f5]      { background: var(--bg-purple);
}
.stat-icon--assignment[data-v-dde4e9f5]  { background: var(--bg-info);
}
.stat-icon--progress[data-v-dde4e9f5]    { background: var(--bg-success);
}
.stat-icon--catalog[data-v-dde4e9f5]     { background: var(--bg-warning);
}
.stat-icon--meta[data-v-dde4e9f5]        { background: var(--bg-info);
}
.stat-label[data-v-dde4e9f5] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-body[data-v-dde4e9f5] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  min-width: 0;
}
.stat-value[data-v-dde4e9f5] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-none);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-dde4e9f5] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: var(--line-none);
}

/* ── 일괄 'TODO 만들기' 버튼 — 인라인 진행률 (background fill) ── */
.bulk-create-btn[data-v-dde4e9f5] {
  position: relative;
  overflow: hidden;
  min-width: 140px;
  font-variant-numeric: tabular-nums;
}

/* ── 셀 콘텐츠 ── */
.date-cell[data-v-dde4e9f5] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.page-count-cell[data-v-dde4e9f5] {
  font-variant-numeric: tabular-nums;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.last-parsed-cell[data-v-dde4e9f5] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  /* ⚠️ 폭을 넘겨도 옆(확인) 컬럼을 침범하지 않게 자른다.
     실측 2026-08-05: 컬럼 96px - 좌우 패딩 32px = 내용 64px 인데 '🗄 2026. 05. 24.' 는 98px 이라
     34px 이 옆 컬럼으로 넘쳐 파싱 진행 링과 겹쳐 보였다. 폭은 134px 로 넓히고 여기서 한 번 더 막는다. */
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
/* 파싱 데이터가 삭제된 건 — 보관 아이콘 + 옅은 색으로 '지금은 데이터 없음(카탈로그 서빙)'을 구분 */
.last-parsed-cell--removed[data-v-dde4e9f5] {
  color: var(--ink-muted);
}
.last-parsed-cell__removed-icon[data-v-dde4e9f5] {
  margin-right: var(--gap-glyph);
  font-size: var(--icon-marker);
  opacity: 0.7;
}
.date-sep[data-v-dde4e9f5] {
  color: var(--ink-muted);
  margin: 0 var(--gap-glyph);
}
.company-cell[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.company-name[data-v-dde4e9f5] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  min-width: 0;
}
.document-name[data-v-dde4e9f5] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  /* 상품 컬럼은 wrap — 폭 초과 시 ... 대신 줄바꿈 */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* 클릭 대상 — 상품명은 문서뷰, 문서유형은 메타편집기 (행 클릭은 비활성) */
.document-name--link[data-v-dde4e9f5],
.doc-card__name--link[data-v-dde4e9f5],
.doctype-label--link[data-v-dde4e9f5] {
  cursor: pointer;
}
.document-name--link[data-v-dde4e9f5]:hover,
.doc-card__name--link[data-v-dde4e9f5]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.doctype-label--link[data-v-dde4e9f5]:hover {
  text-decoration: underline;
}
/* 문서유형 — 컬러 텍스트만 */
.doctype-label[data-v-dde4e9f5] {
  display: inline-block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  flex-shrink: 0;
  line-height: var(--line-none);
  white-space: nowrap;
}
/* 문서종류 + 문서 ID 셀 — 폭이 좁으면 ID 가 둘째 줄로 내려감. 두 줄이 되면 각 줄 가운데 정렬 */
.doctype-cell[data-v-dde4e9f5] {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
/* 문서 ID — 숫자는 무조건 한 줄. ListBody 셀 기본값(overflow-wrap: anywhere)이 걸려 있어
   컬럼이 좁아지면 자릿수 사이가 끊겨 세로로 쌓이므로 nowrap 으로 막는다.
   (말줄임은 쓰지 않는다 — 숫자가 잘리느니 유형/ID 가 두 줄로 나뉘는 편이 낫다) */
.doctype-docid[data-v-dde4e9f5] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-none);
  white-space: nowrap;
}

/* 문서유형별 색상 — id 기반 */
.doctype-label--1[data-v-dde4e9f5] { color: var(--ink-info);
}
.doctype-label--2[data-v-dde4e9f5] { color: var(--ink-warning);
}
.doctype-label--3[data-v-dde4e9f5] { color: var(--ink-success);
}
.doctype-label--4[data-v-dde4e9f5] { color: var(--ink-danger);
}

/* 일괄 진행 표시 — 특정 버튼 안이 아니라 액션 영역 자리에서 '무엇이 얼마나' 를 보여준다.
   진행 막대는 배경 그라디언트로 그린다(별도 엘리먼트 없이 폭만 --bulk-pct 로). */
.bulk-progress[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: linear-gradient(to right,
    var(--bg-brand-vivid) var(--bulk-pct, 0%),
    var(--bg-page) var(--bulk-pct, 0%));
  font-size: var(--size-label);
  white-space: nowrap;
}
.bulk-progress__label[data-v-dde4e9f5] { font-variant-numeric: tabular-nums;
}

/* ToDo 편집 드롭다운 — 항목은 왼쪽 정렬 한 줄씩. 위험 강조색(붉은색)은 쓰지 않는다(사용자 지시). */
.bulk-menu[data-v-dde4e9f5] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.bulk-menu__item[data-v-dde4e9f5] { justify-content: flex-start; width: 100%;
}

/* TODO/제품 셀은 공통 컴포넌트(ParsingJobTodosCell/ParsingJobProductCell)가 자체 스타일 보유 */

/* 키워드 매치 형광 표시는 공통 HighlightText 컴포넌트가 자체 스타일 보유 */

/* ── 일괄 체크박스 (테이블/카드 #check 슬롯) ── */
.row-check[data-v-dde4e9f5] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ink-brand);
}
.row-check[data-v-dde4e9f5]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  accent-color: var(--ink-brand);
}

/* ── 카드형 문서 카드 — 5줄 고정 높이 ── */
.doc-card[data-v-dde4e9f5] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-glyph);
  height: 100%;
  min-width: 0;
  /* 상품명 자연 줄바꿈으로 200px 초과 시 초과분 클립 (line-clamp 대신) */
  overflow: hidden;
}

/* 1줄: 상품명 + 문서유형 뱃지 — 한 묶음 인라인 흐름. 상품명 길면 자연 줄바꿈 */
/* 1줄: 상품명 + 문서유형 — 하나의 텍스트 문장처럼 흐른다(한 줄 취급).
   flex 아님 — 일반 텍스트 블록이라 상품명과 문서유형이 끊김 없이 이어지고
   길면 문장처럼 자연 줄바꿈. */
.doc-card__title[data-v-dde4e9f5] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
  color: var(--ink-primary);
  /* 말줄임(...)·line-clamp 금지 — 길면 자연 줄바꿈 */
  overflow-wrap: anywhere;
}
/* 문서유형 — 상품명과 같은 폰트(상속), 색만 다른 인라인 텍스트. 뱃지 박스 아님.
   상품명과 한 칸 띄움(한 문장처럼). */
.doc-card__title .doctype-label[data-v-dde4e9f5] {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  margin-left: var(--gap-glyph);
}

/* 2줄: 파비콘 + 회사명 + 판매기간 */
.doc-card__company-row[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.doc-card__company[data-v-dde4e9f5] {
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.doc-card__sep[data-v-dde4e9f5] {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.doc-card__period[data-v-dde4e9f5] {
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 3줄: 페이지 · 이슈 (라벨+값) — 우측 정렬 */
.doc-card__metrics[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
  min-width: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.doc-card__meta[data-v-dde4e9f5] {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-card__meta--alert[data-v-dde4e9f5] {
  color: var(--ink-warning);
  font-weight: var(--weight-title);
}

/* 4·5줄: TODO / 카탈로그 — 테이블 셀 공통 컴포넌트, 우측 정렬 */
.doc-card__cellrow[data-v-dde4e9f5] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.doc-card__cellrow[data-v-dde4e9f5] > * {
  min-width: 0;
  max-width: 100%;
}

/* 배치 작업 이력의 회차 보고서와 같은 조판 — 왼쪽에 라벨, 오른쪽에 값 한 줄. */
.apr[data-v-90d28720] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  font-size: var(--size-label);
}
.apr__line[data-v-90d28720] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-stack);
  min-width: 0;
}
.apr__line--warn[data-v-90d28720] { color: var(--ink-warning);
}
.apr__line--meta[data-v-90d28720] { color: var(--ink-muted); gap: var(--gap-inline);
}
.apr__k[data-v-90d28720] {
  flex: 0 0 5.5rem;
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.apr__facts[data-v-90d28720] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-stack);
  min-width: 0;
}
.apr-fact[data-v-90d28720] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
}
.apr-fact__k[data-v-90d28720] { color: var(--ink-muted); font-size: var(--size-meta);
}
.apr-fact__v[data-v-90d28720] { color: var(--ink-primary); font-variant-numeric: tabular-nums;
}
.apr-fact__v--bad[data-v-90d28720] { color: var(--ink-danger);
}
/* 누를 수 있는 숫자 — 밑줄로만 알린다(색은 이미 실패를 뜻한다). */
.apr-fact__v--link[data-v-90d28720] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: var(--space-tight);
}
.apr-fact__v--link[data-v-90d28720]:hover { text-decoration-thickness: 2px;
}

/* 모달 안의 목록 화면 — 모달 본문 높이를 채우고 그 안에서 스크롤한다.
   ⚠️ ListScreen 은 화면용 좌우 여백을 자체로 갖는다. 모달 본문에도 여백이 있어
      그대로 두면 목록만 더 들어가 푸터(닫기)와 줄이 안 맞는다(실측 2026-08-08). */
.ar-list[data-v-a0c674ca] {
  height: 56vh;
  min-height: 320px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.ar-sub[data-v-a0c674ca] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
/* ⛔ 넘침 처리를 셀에서 박지 않는다 — 표의 넘침은 컬럼 설정이 정한다. */
.ar-target[data-v-a0c674ca] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.ar-target__role-icon[data-v-a0c674ca] { color: var(--ink-muted);
}
.ar-form[data-v-a0c674ca] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.ar-form__field[data-v-a0c674ca] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  align-items: flex-start;
}
.ar-form__field label[data-v-a0c674ca] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ar-form__help[data-v-a0c674ca] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

/* ⛔ 모달 안의 목록은 **키가 정해져 있어야 한다** — 가상 스크롤이 잴 높이가 없으면 한 줄도 안 그린다
   (2026-08-29 실측: 칩은 떴는데 목록이 0줄이었다). 배정 관리 팝업(.ap-assign-list)과 같은 값.
   좌우·위 여백은 모달 본문이 이미 갖고 있어 여기서 뺀다(푸터의 [닫기]와 줄이 맞는다). */
.apf[data-v-0605773a] {
  height: 56vh;
  min-height: 20rem;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.apf-reasons[data-v-0605773a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.apf-reasons__text[data-v-0605773a] {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apf-reasons__none[data-v-0605773a] { color: var(--ink-muted); font-size: var(--size-label);
}
.apf-company[data-v-0605773a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.apf-doc[data-v-0605773a] {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.apf-doc__meta[data-v-0605773a] { color: var(--ink-muted); font-size: var(--size-meta);
}

/* ⚠️ ListScreen 본문(.list-screen__body)은 flex:0 0 auto 라 **가장 넓은 자식(회차 표)** 만큼
   벌어진다. 그대로 두면 위 카드 그리드가 화면 폭을 못 따라가 반응형이 죽는다(실측 2026-08-08:
   뷰포트 500px 인데 본문 1288px). 본문을 부모 폭에 묶고, 넓은 표는 자기 칸에서 가로 스크롤시킨다. */
[data-v-738ba56f] .list-screen__body {
  width: 100%;
  min-width: 0;
}

/* ── 상단 설정 카드 3장 — 가로 배열, 좁아지면 자동으로 아래로 내려간다 ── */
/* 배정 관리 팝업 — 검색·필터 바 + 한 목록 */
/* 모달 안의 목록 화면 — 모달 본문 높이를 채우고 그 안에서 스크롤한다.
   ⚠️ ListScreen 은 화면용 좌우 여백(--page-pad-x)을 자체로 갖는다. 모달 본문에도 여백이 있어
      그대로 두면 목록만 16px 더 들어가 푸터(닫기)와 줄이 안 맞는다(실측 2026-08-08). */
.ap-assign-list[data-v-738ba56f] {
  height: 56vh;
  min-height: 320px;
  /* 모달 본문이 이미 좌우 여백을 갖는다 — ListScreen 자체 여백을 빼야 푸터(닫기)와 줄이 맞는다. */
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.ap-setup[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  /* ⚠️ min-width:0 이 없으면 아래 넓은 표(컬럼 11개)의 최소 폭이 부모를 밀어
     이 그리드가 화면 폭을 따라 줄지 않는다 → auto-fit 이 영영 안 접힌다(실측 2026-08-08). */
  min-width: 0;
}
.ap-card[data-v-738ba56f] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
}
.ap-card__head[data-v-738ba56f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.ap-card__title[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ap-card__title i[data-v-738ba56f] { color: var(--ink-muted); font-size: var(--icon-label);
}
.ap-card__facts[data-v-738ba56f] {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline) var(--gap-stack);
}
.ap-card__facts dt[data-v-738ba56f] { font-size: var(--size-meta); color: var(--ink-muted);
}
.ap-card__facts dd[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.ap-card__pool[data-v-738ba56f] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
}
.ap-card__pool li[data-v-738ba56f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.ap-card__pool-name[data-v-738ba56f] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-card__warn[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-warning);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ap-card__actions[data-v-738ba56f] {
  margin-top: auto;
  display: flex;
  gap: var(--gap-inline);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── 모니터링 — 담당자·검증자 현황.
   ⚠️ 2열로 나누면 칸이 좁아 표가 카드형으로 떨어지고 정렬 헤더가 사라진다(실측).
      컬럼이 9개라 전체 폭을 줘야 표로 보인다. ── */
.ap-monitor[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  margin-bottom: var(--gap-group);
  min-width: 0;
}
.ap-monitor__pool[data-v-738ba56f] {
  min-width: 0;
  overflow-x: auto;   /* 표가 넓으면 이 안에서 가로 스크롤 — 화면 전체를 밀지 않는다 */
}
.ap-monitor__title[data-v-738ba56f] {
  margin: 0 0 var(--gap-glyph);
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
}
/* 접기/펴기 토글 — 제목 자체가 버튼이라 글자 크기를 제목에 맞춘다 */
.ap-fold[data-v-738ba56f] .app-btn__label,
.ap-fold[data-v-738ba56f] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.ap-period[data-v-738ba56f] {
  width: 260px;
  flex: none;
}

/* ── 담당자/검증자 설정 모달 ── */
.ap-duty[data-v-738ba56f] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.ap-duty__hint[data-v-738ba56f] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.ap-duty__list[data-v-738ba56f] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.ap-setup__block[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ap-setup__head[data-v-738ba56f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
}
.ap-setup__title[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ap-setup__title i[data-v-738ba56f] { color: var(--ink-muted); font-size: var(--icon-label);
}

/* 동작 설정 — 라벨(설명)과 컨트롤이 한 줄. 좁아지면 라벨 위/컨트롤 아래. */
.ap-form2[data-v-738ba56f] { margin: 0; display: flex; flex-direction: column;
}
.ap-form2__row[data-v-738ba56f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-snug) 0;
  border-bottom: var(--line-strong);
}
.ap-form2__row[data-v-738ba56f]:last-child { border-bottom: none;
}
.ap-form2__row dt[data-v-738ba56f] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.ap-form2__help[data-v-738ba56f] { font-size: var(--size-meta); color: var(--ink-muted);
}
.ap-form2__row dd[data-v-738ba56f] { margin: 0; flex: none;
}
@media (max-width: 480px) {
.ap-form2__row[data-v-738ba56f] { flex-direction: column; align-items: flex-start;
}
}
.ap-duty__scope[data-v-738ba56f] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-duty__row[data-v-738ba56f] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--pad-row-dense);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
}
.ap-duty__actions[data-v-738ba56f] { margin-left: auto; display: flex; gap: var(--gap-glyph);
}
.ap-duty__empty[data-v-738ba56f] { margin: 0; color: var(--ink-muted); font-size: var(--size-label);
}

/* ── 섹션(모니터링·처리결과) ── */
.ap-section[data-v-738ba56f] {
  margin-bottom: var(--gap-group);
}
/* 화면이 세로로 길어 페이지가 스크롤된다 — 목록은 flex 로 남은 높이를 받는 대신
   자기 높이(max-height)를 갖는다. flex:1 로 두면 위 내용이 길 때 높이가 0 이 되어
   행이 하나도 안 그려진다(실측 2026-08-08). */
/* 본문은 회차 목록 하나뿐 — 남은 높이를 끝까지 채운다(아래 여백 없음). */
.ap-results[data-v-738ba56f] {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.ap-section__head[data-v-738ba56f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  margin-bottom: var(--gap-inline);
}
.ap-section__title[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ap-section__title--body[data-v-738ba56f] {
  margin-bottom: var(--gap-inline);
}
.ap-section__title i[data-v-738ba56f] {
  color: var(--ink-muted);
  font-size: var(--icon-label);
}
.ap-section__count[data-v-738ba56f] {
  color: var(--ink-muted);
  font-weight: var(--weight-body);
  font-size: var(--size-label);
}
.ap-section__actions[data-v-738ba56f] {
  display: flex;
  gap: var(--gap-inline);
}

/* ── 스케줄 카드 ── */
.ap-schedule[data-v-738ba56f] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  padding: var(--space-cozy);
  margin-bottom: var(--gap-stack);
}
.ap-schedule__row[data-v-738ba56f] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
  flex-wrap: wrap;
}
.ap-schedule__state[data-v-738ba56f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.ap-schedule__facts[data-v-738ba56f] {
  display: flex;
  gap: var(--gap-band);
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
}
.ap-schedule__fact dt[data-v-738ba56f] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ap-schedule__fact dd[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.ap-schedule__warn[data-v-738ba56f] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-label);
  color: var(--ink-warning);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* ── 공통 ── */
.ap-when[data-v-738ba56f] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  white-space: nowrap;
}
.ap-caret[data-v-738ba56f] {
  color: var(--ink-muted);
  font-size: var(--icon-marker);
}
.ap-sub[data-v-738ba56f] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.ap-num--bad[data-v-738ba56f] { color: var(--ink-danger);
}
/* 누를 수 있는 실패 숫자 — 밑줄로만 알린다(색은 이미 실패를 뜻하고 있다). */
.ap-fail-link[data-v-738ba56f] {
  cursor: pointer;
  color: var(--ink-danger);
  text-decoration: underline;
  text-underline-offset: var(--space-tight);
}
.ap-fail-link[data-v-738ba56f]:hover { text-decoration-thickness: 2px;
}
.ap-fail-link[data-v-738ba56f]:focus-visible { outline: var(--focus-ring-width) solid var(--ink-brand); outline-offset: var(--space-tight);
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.ap-target[data-v-738ba56f] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;   /* 좁아도 한 글자씩 쪼개지지 않게 */
}
.ap-weight[data-v-738ba56f] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  white-space: nowrap;
}
.ap-weight__arrow[data-v-738ba56f] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.ap-target__role-icon[data-v-738ba56f] { color: var(--ink-muted);
}
.ap-actions[data-v-738ba56f] {
  display: inline-flex;
  gap: var(--gap-glyph);
}

/* ── 달력 보기 ── */
/* 보기 전환 한 쌍 — 툴바 맨 앞에서 둘이 한 덩어리로 붙어 선다.
   ⛔ margin-left 를 두지 않는다(툴바 자리 간격은 툴바가 소유). */
.ap-view[data-v-738ba56f] {
  display: inline-flex;
  gap: var(--gap-glyph);
}
.ap-cal[data-v-738ba56f] { width: 100%;
}
/* 넘치는 회차는 셀 본문(.app-calendar__cell-body)이 스크롤해 보여준다 —
   여기서 overflow:hidden 으로 잘라내면 그 스크롤이 아무 소용이 없다. */
.ap-cal__marks[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  margin-top: var(--gap-glyph);
}
.ap-cal__run[data-v-738ba56f] {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-tight);
  border: var(--line-w) solid transparent;
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  line-height: var(--line-none);
  cursor: pointer;
  background: var(--bg-hover);
  color: var(--ink-secondary);
  width: 100%;
}
.ap-cal__run[data-v-738ba56f]:hover { border-color: var(--line-color);
}
.ap-cal__run--success[data-v-738ba56f] { background: var(--bg-success-soft); color: var(--ink-success);
}
.ap-cal__run--partial[data-v-738ba56f] { background: var(--bg-warning-soft); color: var(--ink-warning);
}
.ap-cal__run--failed[data-v-738ba56f]  { background: var(--bg-danger-soft); color: var(--ink-danger);
}
.ap-cal__run--running[data-v-738ba56f] { background: var(--bg-info-soft); color: var(--ink-info);
}
.ap-cal__run-time[data-v-738ba56f] { font-weight: var(--weight-title);
}
.ap-cal__run-count[data-v-738ba56f] { color: inherit; opacity: 0.85;
}

/* ⚠️ ListBody 는 #row-detail 슬롯이 있으면 **모든 행에** 상세 래퍼를 그린다(패딩 포함).
   접힌 행은 슬롯 내용이 비어 있어 빈 래퍼의 패딩만 남아 행마다 아래 여백이 생긴다(실측 2026-08-08).
   비어 있을 때는 자리를 차지하지 않게 한다. */
[data-v-738ba56f] .list-body__row-detail:empty {
  display: none;
}

/* ── 회차 보고서 ── */


/* ── 통계 — 수집 이력·수집 작업·파싱 작업과 같은 카드 조판.
   ⛔ 자체 카드를 새로 만들지 않는다. 나란히 있는 화면이 서로 다른 카드를 쓰면 그게 곧 다른 화면으로 읽힌다. */
.ap-stats-basis[data-v-738ba56f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex-wrap: wrap;
}
.ap-stats-basis i[data-v-738ba56f] { color: var(--ink-muted);
}
.ap-stats-basis__src[data-v-738ba56f] { color: var(--ink-muted); font-size: var(--size-meta);
}
/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창과 판이 따로 논다.
   실측 2026-08-29: 창 820px 에서 판은 568px 인데 3열(타일 184px)이고, 창 768px 에서는
   곁막대가 접혀 판이 736px 인데 **같은 3열**(240px)이었다 — 창이 좁아질수록 판은 넓어지는데
   열은 거꾸로 갔다. 200px 은 타일의 최대 내용 폭(178px 실측)에 맞춘 값이고,
   ActivityLogs·FeedbackAnalytics 가 이미 쓰는 선례다. */
.stats-summary[data-v-738ba56f] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-inline);
}
/* 끊는 지점은 옆 서브탭(수집 이력·수집 작업·파싱 작업)과 같은 값으로 맞춘다. */
.stat-card[data-v-738ba56f] {
  display: flex; align-items: center; gap: var(--gap-inline);
  background: var(--bg-card); border: 1px solid var(--line-color);
  border-radius: var(--radius-badge); padding: var(--pad-tile); min-width: 0;
}
.stat-main[data-v-738ba56f] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.stat-icon[data-v-738ba56f] {
  width: var(--h-control-lg); height: var(--h-control-lg);
  border-radius: var(--radius-badge); display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-toolbar); color: var(--ink-on-solid); flex-shrink: 0;
}
.stat-icon--total[data-v-738ba56f] { background: var(--bg-brand);
}
.stat-icon--ok[data-v-738ba56f]    { background: var(--bg-success);
}
.stat-icon--fail[data-v-738ba56f]  { background: var(--bg-danger);
}
.stat-icon--partial[data-v-738ba56f] { background: var(--bg-warning);
}
.stat-icon--new[data-v-738ba56f]   { background: var(--bg-info);
}
.stat-label[data-v-738ba56f] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-body[data-v-738ba56f] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.stat-value[data-v-738ba56f] { font-size: var(--size-title); font-weight: var(--weight-strong); color: var(--ink-primary); line-height: var(--line-none); font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-738ba56f] { font-size: var(--size-meta); color: var(--ink-muted); white-space: nowrap; line-height: var(--line-none);
}

/* ── 폼 ── */
.ap-form[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.ap-form__field[data-v-738ba56f] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.ap-form__field label[data-v-738ba56f] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ap-form__help[data-v-738ba56f] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ap-form__separator[data-v-738ba56f] {
  height: 1px;
  background: var(--line-color);
}

/* 통계 카드 — AdminParsingJobs stat-card 표준 따름 */
.stats-summary[data-v-4b10beee] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-stack);
}
.stat-card[data-v-4b10beee] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}
.stat-card[data-v-4b10beee]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-icon[data-v-4b10beee] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-label);
  color: var(--ink-on-solid);
}
.stat-icon--today[data-v-4b10beee] { background: var(--bg-info);
}
.stat-icon--users[data-v-4b10beee] { background: var(--bg-danger);
}
.stat-icon--page[data-v-4b10beee] { background: var(--bg-success);
}
.stat-content[data-v-4b10beee] {
  flex: 1;
  min-width: 0;
}
.stat-label[data-v-4b10beee] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.stat-value[data-v-4b10beee] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}

/* 활성 사용자 카드: 기간을 라벨에 인라인으로 합쳐 카드를 2줄로 맞춘다(셋째 줄 제거) */
.stat-label__range[data-v-4b10beee] {
  color: var(--ink-muted);
  font-weight: var(--weight-body);
}

/* 상세 필터 — 날짜 선택기 폭 고정 (상세 필터 컨트롤은 늘리지 않는다).
   DateRangePicker 루트가 width:100% 라 폭을 명시하지 않으면 한 줄을 다 차지한다. */
[data-v-4b10beee] .date-picker-custom {
  width: 260px;
}

/* ─── 테이블 셀 표현 ─── */
/* 사용자 셀 — 표준 [아바타] + 이름(이메일) (UserPicker/AdminUsersConfig 와 동일 포맷) */


/* 상세 컬럼 — 페이지 라벨 + 경로 보조 표시 */
.detail-page[data-v-4b10beee] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.detail-page i[data-v-4b10beee] {
  color: var(--ink-brand);
  font-size: var(--icon-label);
}
.detail-page-label[data-v-4b10beee] {
  white-space: nowrap;
}
.detail-path[data-v-4b10beee] {
  display: inline-block;
  margin-left: var(--gap-inline);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  min-width: 0;
  vertical-align: middle;
}
.detail-text[data-v-4b10beee] {
  color: var(--ink-primary);
}

/* ─── 카드형 본문 ─── */
.log-card[data-v-4b10beee] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
  width: 100%;
}
.log-card__top[data-v-4b10beee] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.log-card__details[data-v-4b10beee] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.log-card__details .detail-path[data-v-4b10beee] {
  margin-left: 0;
  max-width: 100%;
}
.log-card__meta[data-v-4b10beee] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph) var(--gap-stack);
  flex-wrap: wrap;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.log-card__meta span[data-v-4b10beee] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
@media (max-width: 1024px) {
.detail-path[data-v-4b10beee] {
    max-width: 180px;
}
}

/* === 모바일 반응형 === */
@media (max-width: 768px) {
  /* 통계 카드: 3열, 카드당 2줄 (아이콘+라벨 / 값) */
.stats-summary[data-v-4b10beee] {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-glyph);
}
.stat-card[data-v-4b10beee] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--gap-glyph);
    padding: var(--pad-tile);
    align-items: center;
}
.stat-card[data-v-4b10beee]:hover {
    transform: none;
}
.stat-icon[data-v-4b10beee] {
    width: 20px;
    height: 20px;
    font-size: var(--icon-marker);
    border-radius: var(--radius-badge);
    flex-shrink: 0;
    grid-row: 1;
    grid-column: 1;
}
.stat-content[data-v-4b10beee] {
    display: contents;
}
.stat-label[data-v-4b10beee] {
    font-size: var(--size-meta);
    white-space: nowrap;
    grid-row: 1;
    grid-column: 2;
    margin-bottom: 0;
}
.stat-value[data-v-4b10beee] {
    font-size: var(--size-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-row: 2;
    grid-column: 1 / -1;
    text-align: center;
}
  /* 모바일 압축 레이아웃에선 기간 접미사 생략 (라벨 한 줄 유지) */
.stat-label__range[data-v-4b10beee] {
    display: none;
}
[data-v-4b10beee] .date-picker-custom {
    min-width: 0;
    width: 100%;
}
}

/* ⛔ 판은 자기 높이를 갖는다 — `flex: 1; min-height: 0` 으로 서브탭 높이에 맞추지 않는다.
   그렇게 하면 담는 자리(overflow-y:auto)의 scrollHeight 가 늘지 않아 스크롤이 아예 안 생기고,
   앞선 구획이 먹고 남은 자투리만 목록에 돌아간다. 최근 회차 목록의 높이는 ListBody max-height 가 정한다. */
.crawling-status[data-v-ceebe4db] { display: flex; flex-direction: column;
}

/* 구획 사이 간격 — 원본(자원현황)의 `.system-monitoring > .app-section` 과 같은 값.
   (자식 컴포넌트의 루트에는 부모 scoped 속성이 붙으므로 .app-section 선택이 닿는다) */
.cs-boxes > .app-section[data-v-ceebe4db] { margin-bottom: var(--gap-group);
}
.cs-boxes > .app-section[data-v-ceebe4db]:last-child { margin-bottom: 0;
}

/* 관리자 모니터링(.refresh-bar)과 동일: 스크롤해도 상단 고정 + 마지막 갱신 문구 좌측 정렬 */
.cs-refresh-bar[data-v-ceebe4db] {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-stack); padding: var(--space-snug) 0; margin-bottom: var(--gap-stack);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.cs-last-refreshed[data-v-ceebe4db] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 카드 테두리·제목줄·설명은 공통 AppSection 이 그린다. */
.cs-section[data-v-ceebe4db] { min-width: 0;
}
.cs-active[data-v-ceebe4db] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.cs-item[data-v-ceebe4db] {
  display: flex; align-items: center; gap: var(--gap-group);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-hover);
}
.cs-item-info[data-v-ceebe4db] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.cs-item-name[data-v-ceebe4db] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-item-task[data-v-ceebe4db] { font-size: var(--size-meta); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 파비콘 모양은 CompanyFavicon 이 정한다 — 여기선 인라인 흐름 정렬만. */
.cs-favicon[data-v-ceebe4db] { vertical-align: text-bottom; margin-right: var(--gap-glyph);
}
.cs-item-progress[data-v-ceebe4db] { display: flex; align-items: center; gap: var(--gap-inline); flex-shrink: 0; width: 40%; max-width: 220px;
}
.cs-bar[data-v-ceebe4db] { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--bg-field); overflow: hidden;
}
.cs-bar-fill[data-v-ceebe4db] { height: 100%; border-radius: var(--radius-pill); background: var(--bg-brand-vivid); transition: width 0.5s ease;
}
.cs-bar-text[data-v-ceebe4db] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-brand); min-width: 35px; text-align: right;
}
.cs-empty[data-v-ceebe4db] { text-align: center; padding: var(--space-band); color: var(--ink-muted); font-size: var(--size-label);
}
.cs-empty i[data-v-ceebe4db] { margin-right: var(--gap-glyph);
}

/* ⛔ 덩어리 사이를 끊는 선은 **한 구획 안에 셋이 쌓일 때만**이다(자원현황).
   셋이 각자 구획인 화면(수집 › 모니터링)에서는 구획 테두리가 이미 끊어 주므로 선을 그으면 두 겹이 된다. */
.crawling-status--merged .cs-trend[data-v-ceebe4db],
.crawling-status--merged .cs-sessions[data-v-ceebe4db] {
  margin-top: var(--gap-stack); padding-top: var(--space-cozy); border-top: var(--line-strong);
}
.cs-trend[data-v-ceebe4db] { flex: none;
}
/* 추이 차트 높이 — 파싱 모니터링의 시간대별 차트와 같은 크기감 */
/* 높이는 AppChart 가 갖는다(기본 sm = --h-chart-sm) — 여기서 다시 적지 않는다. */
.cs-chart[data-v-ceebe4db] { width: 100%;
}
.cs-window[data-v-ceebe4db] { margin-left: var(--gap-inline); color: var(--ink-muted); font-weight: var(--weight-body);
}
.cs-subtitle[data-v-ceebe4db] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-secondary); margin-bottom: var(--gap-inline);
}
.cs-cell-company[data-v-ceebe4db] { display: inline-flex; align-items: center; gap: var(--gap-glyph); min-width: 0;
}
.cs-new[data-v-ceebe4db] { color: var(--ink-success); font-weight: var(--weight-title); margin-right: var(--gap-glyph);
}
@media (max-width: 768px) {
.cs-item[data-v-ceebe4db] { flex-direction: column; align-items: stretch;
}
.cs-item-progress[data-v-ceebe4db] { width: 100%; max-width: none;
}
}

.system-monitoring[data-v-0f25632e] {
  padding: var(--pad-page-x) var(--pad-page-x) var(--space-band);
  animation: fadeIn-0f25632e 0.3s ease;
}

/* ─── 상단 자동 갱신 바 ─── */
.refresh-bar[data-v-0f25632e] {
  position: sticky;
  top: 0;
  /* 옆 탭(이용현황)의 같은 막대와 같은 값을 쓴다 — raw 10 이었다(토큰 규칙 위반). */
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) 0;
  margin-bottom: var(--gap-inline);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.last-refreshed[data-v-0f25632e] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 자동 갱신 컨트롤(주기 선택·카운트다운 링·새로고침)은 공통 ListRefreshControl 이 자체 스타일을 가진다. */
.refresh-controls[data-v-0f25632e] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* ─── 섹션 ─── */
/* 구획(카드 테두리·제목줄·설명·접기)은 공통 AppSection 이 그린다. 여기서는 간격만 준다.
   (자식 컴포넌트의 루트에는 부모 scoped 속성이 붙으므로 .app-section 선택이 닿는다) */
.system-monitoring > .app-section[data-v-0f25632e],
.panel-slot[data-v-0f25632e] {
  margin-bottom: var(--gap-group);
}
.system-monitoring > .app-section[data-v-0f25632e] { overflow: hidden;
}
.panel-slot[data-v-0f25632e] { min-width: 0;
}
/* '볼륨 서버 추가' 버튼은 볼륨 서버 헤더 우측 끝으로 (제목·경고는 좌측 유지) */
.storage-add-node[data-v-0f25632e] {
  margin-left: auto;
}

/* 볼륨 서버 추가 안내 모달 */
.add-node[data-v-0f25632e] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.add-node__intro[data-v-0f25632e] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-normal);
}
.add-node__step[data-v-0f25632e] {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gap-stack);
  padding: var(--space-cozy); border: 1px solid var(--line-color);
  border-radius: var(--radius-control); background: var(--bg-field);
}
.add-node__step--locked[data-v-0f25632e] { opacity: 0.65;
}
.add-node__n[data-v-0f25632e] {
  width: 1.6em; height: 1.6em; border-radius: var(--radius-pill);
  background: var(--bg-accent-indigo-soft); color: var(--ink-accent-indigo);
  font-weight: var(--weight-strong); font-size: var(--size-label);
  display: grid; place-items: center;
}
.add-node__body[data-v-0f25632e] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.add-node__body h4[data-v-0f25632e] { margin: 0; font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary);
}
.add-node__body p[data-v-0f25632e] { margin: 0; font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-normal);
}
.add-node__ip[data-v-0f25632e] {
  align-self: flex-start; margin-top: var(--gap-glyph); font-family: var(--font-mono);
  font-size: var(--size-meta); color: var(--ink-primary); background: var(--bg-card);
  border: var(--line-strong); padding: var(--space-tight) var(--space-snug); border-radius: var(--radius-badge);
}
.add-node__actions[data-v-0f25632e] { margin-top: var(--gap-inline);
}
.add-node__body .add-node__gate[data-v-0f25632e] { color: var(--ink-muted);
}
.add-node__key[data-v-0f25632e] { margin-top: var(--gap-inline);
}
.add-node__key[data-v-0f25632e] input { font-family: var(--font-mono);
}
.add-node__body .add-node__err[data-v-0f25632e] { color: var(--ink-danger);
}
.add-node__cmd[data-v-0f25632e] {
  margin-top: var(--gap-inline); padding: var(--space-snug) var(--space-cozy) var(--space-cozy);
  background: var(--bg-field); border: 1px solid var(--line-color); border-radius: var(--radius-badge);
}
.add-node__cmd-head[data-v-0f25632e] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-inline);
}
.add-node__cmd-label[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-muted);
}
.add-node__cmd code[data-v-0f25632e] {
  display: block; font-family: var(--font-mono); font-size: var(--size-meta); color: var(--ink-primary);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: var(--line-normal);
}
.add-node__body .add-node__ok[data-v-0f25632e] { color: var(--ink-success); margin-top: var(--gap-inline);
}
/* ─── 서비스 카드 ─── */
.service-cards[data-v-0f25632e] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-stack);
}
.service-card[data-v-0f25632e] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
  border-radius: var(--radius-control);
  border: var(--line-strong);
  /* 판은 비운다 — 옆 구획의 DB 추이 차트 자리와 같은 바탕(테두리로만 구분).
     ⛔ --surface-muted/--card-bg 로 채우지 않는다: 구획 안에서 이 카드들만 한 겹 밝은
        섬이 되어 같은 화면의 다른 차트 자리와 바탕이 갈렸다. */
  background: var(--bg-page);
  gap: var(--gap-inline);
  overflow: hidden;
  transition: border-color var(--motion-base), transform var(--motion-base);
}
.service-card[data-v-0f25632e]:hover {
  border-color: var(--ink-brand);
  transform: translateY(-2px);
}
.service-remove-btn[data-v-0f25632e] {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-badge);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--size-meta);
  opacity: 0;
  transition: all var(--motion-fast);
}
.service-card:hover .service-remove-btn[data-v-0f25632e] {
  opacity: 1;
}
.service-remove-btn[data-v-0f25632e]:hover {
  color: var(--ink-danger);
  background: var(--bg-danger-soft);
}
/* 상태는 헤더의 뱃지가 말한다 — 카드 테두리는 건드리지 않는다 */
.service-card.status--stopped[data-v-0f25632e] { opacity: 0.6;
}

/* 전면 패널 — 카드 위쪽을 가로지르는 한 단 낮은 면. 좌우 통풍구 + 표시등으로 장비처럼 읽힌다 */
.service-header[data-v-0f25632e] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  margin: 0 calc(-1 * var(--gap-stack));
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: var(--line-strong);
}
/* 통풍구 — 토큰 색으로만 그린 얇은 줄무늬. 폭이 남을 때만 자리를 차지한다 */
.service-vent[data-v-0f25632e] {
  flex: 0 1 var(--space-band);
  min-width: 0;
  height: 10px;
  border-radius: var(--radius-badge);
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-color) 0 1px,
    transparent 1px 4px
  );
}
.service-icon[data-v-0f25632e] { font-size: var(--icon-toolbar); color: var(--ink-brand);
}
.service-name[data-v-0f25632e] {
  font-weight: var(--weight-title);
  font-size: var(--size-body);
  color: var(--ink-primary);
  text-transform: capitalize;
  white-space: nowrap;
}
/* 표시등 — 실행 중일 때만 은은히 숨쉰다 */
.service-led[data-v-0f25632e] {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--ink-muted);
}
.service-led.status--running[data-v-0f25632e] {
  background: var(--ink-success);
  box-shadow: 0 0 6px var(--ink-success);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
  /* ⛔ 상시 표시는 steps() 로 (2026-08-29 실측). 매끄러운 타이밍은 초당 60번
     다시 그리게 만들어, 7px 점 하나로도 CPU 20%를 태운다. steps 로 드문 갱신. */
  animation: service-led-pulse-0f25632e 2.4s steps(6) infinite;
}
/* role-ignore: 켜짐을 알리는 글로우다 — 고도(--shadow-*)가 아니라 번짐 반경이라 사다리 밖 */
.service-led.status--stale[data-v-0f25632e] { background: var(--ink-warning); box-shadow: 0 0 6px var(--ink-warning);
}
.service-led.status--failed[data-v-0f25632e] { background: var(--ink-danger); box-shadow: 0 0 6px var(--ink-danger);
}  /* role-ignore: 위와 같은 글로우 */
@keyframes service-led-pulse-0f25632e {
0%, 100% { opacity: 1;
}
50% { opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.service-led.status--running[data-v-0f25632e] { animation: none;
}
}

/* 서버(인스턴스) 명패 — 같은 서비스가 여러 서버에 뜰 때 유일한 구분자 */
.service-host[data-v-0f25632e] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-tight) 0;
}
.service-metrics[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  margin-top: var(--gap-glyph);
  width: 100%;
}
.metrics-row[data-v-0f25632e] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 var(--gap-glyph);
  width: 100%;
}
.metrics-row + .metrics-row[data-v-0f25632e] {
  border-top: var(--line-strong);
  padding-top: var(--space-tight);
}
.metric[data-v-0f25632e] { display: flex; flex-direction: column; align-items: center;
}
.metric-label[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-muted); text-transform: uppercase;
}
.metric-value[data-v-0f25632e] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary); white-space: nowrap;
}
.metric-sub[data-v-0f25632e] { font-weight: var(--weight-body); color: var(--ink-muted); font-size: var(--size-meta);
}
.service-uptime[data-v-0f25632e] {
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-snug);
  border-top: var(--line-strong);
}
.uptime-row[data-v-0f25632e] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-meta);
  line-height: var(--line-normal);
}
.uptime-label[data-v-0f25632e] {
  color: var(--ink-muted);
}
.uptime-value[data-v-0f25632e] {
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}

/* ─── 나란한 구획(파일 스토리지·큐 | 데이터베이스·다운로드 큐) ───
   두 칸으로 나누고, **칸 안에서 구획이 제 키만큼 차례로 쌓인다**.
   ⛔ 구획 하나를 남는 폭에 늘리지 않는다 — 혼자만 두 배 넓어져 옆 구획들과 어긋난다
      (사용자 지적 2026-08-21: 큐·다운로드 큐가 화면 폭을 다 쓸 이유가 없다).
   ⛔ 격자로 줄까지 맞추지 않는다 — 줄을 맞추면 키가 짧은 구획 아래가 다음 줄이 시작될 때까지 빈다.
      칸을 세로 흐름으로 두면 아래 구획이 바로 붙어 빈 자리가 생기지 않는다.
   ⛔ 늘려 채우기(stretch)도 쓰지 않는다 — 접었을 때 제목줄만 남아야 할 카드가 옆 카드 높이만 한
      빈 상자로 남는다(실측: 접은 뒤에도 1,367px 유지). */
.two-column[data-v-0f25632e] {
  display: grid;
  /* 두 칸이 각각 360px 밑으로 좁아지면 한 칸으로 합친다(폰·좁은 창에서 글자가 뭉개지지 않게) */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
  gap: var(--gap-group);
  margin-bottom: var(--gap-group);
}
.two-column__col[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  min-width: 0;
}
.two-column .app-section[data-v-0f25632e] {
  margin-bottom: 0;
  overflow: hidden;
}

/* ─── 상태 점 ─── */
.status-dot[data-v-0f25632e] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
/* role-ignore: 켜짐을 알리는 글로우다 — 고도(--shadow-*)가 아니라 번짐 반경이라 사다리 밖 */
.status-dot--ok[data-v-0f25632e] { background: var(--ink-success); box-shadow: 0 0 6px var(--bg-success-soft);
}
.status-dot--error[data-v-0f25632e] { background: var(--ink-danger); box-shadow: 0 0 6px var(--bg-danger-soft);
}  /* role-ignore: 위와 같은 글로우 */

/* ─── 정보 그리드 ─── */
.info-grid[data-v-0f25632e] {
  display: grid;
  /* 구획이 좁아지면 한 줄에 하나로 — 두 칸을 못 박으면 '버전' 같은 라벨이 글자 단위로 쪼개진다 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-inline);
}
.info-item[data-v-0f25632e] {
  display: flex;
  justify-content: space-between;
  /* 값이 길면 라벨과 맞붙어 한 낱말처럼 읽힌다(버전SeaweedFS …) — 최소 간격을 둔다 */
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
}
.info-item--highlight[data-v-0f25632e] {
  grid-column: 1 / -1;
  background: var(--bg-accent-indigo-soft);
}
.info-label[data-v-0f25632e] { font-size: var(--size-label); color: var(--ink-secondary);
}
.info-value[data-v-0f25632e] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary);
}
.info-value--large[data-v-0f25632e] {
  font-size: var(--size-lead);
  color: var(--ink-brand);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.disconnected-state[data-v-0f25632e] {
  text-align: center;
  padding: var(--space-wide);
  color: var(--ink-muted);
}
.disconnected-state i[data-v-0f25632e] { font-size: var(--icon-empty); margin-bottom: var(--space-snug); display: block;
}

/* ─── 미니 차트 ─── */
.mini-chart-section[data-v-0f25632e] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.chart-title[data-v-0f25632e] {
  /* 차트 제목은 화면을 가로질러 한 단(--font-md) — 여기만 13px 이라 통계 화면과
     같은 이름의 제목이 다른 크기로 보였다(2026-08-22 lint:uniformity 적발) */
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin-bottom: var(--gap-inline);
}
.mini-chart[data-v-0f25632e] {
  height: 180px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ─── DB 추이 차트 ─── */
/* 네 개를 세로로 쌓으면 이 구획만 옆 구획의 두 배 키가 되어, 나란한 구획들의 바닥이 크게 어긋난다.
   폭이 되는 만큼 두 개씩 나란히 놓아 키를 낮춘다(파싱 현황의 대기/처리중 추이와 같은 배치). */
.db-trend-charts[data-v-0f25632e] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--gap-group);
}
.db-trend-charts .mini-chart-section[data-v-0f25632e] {
  border-top: var(--line-strong);
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  min-width: 0;
}
.db-trend-charts .mini-chart-section[data-v-0f25632e]:first-child {
  margin-top: var(--gap-stack);
}

/* ─── 테이블 리스트 ─── */
.top-tables[data-v-0f25632e] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.table-list[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.table-row[data-v-0f25632e] {
  display: flex;
  justify-content: space-between;
  padding: var(--pad-row-dense);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
  font-size: var(--size-meta);
}
.table-name[data-v-0f25632e] { color: var(--ink-primary); font-weight: var(--weight-title); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-rows[data-v-0f25632e] { color: var(--ink-muted); width: 100px; text-align: right;
}
.table-size[data-v-0f25632e] { color: var(--ink-secondary); font-weight: var(--weight-label); width: 80px; text-align: right;
}

/* 복제(HA) 상태 패널 */
.ha-panel[data-v-0f25632e] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.ha-header[data-v-0f25632e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
/* 헤더 제목 — chart-title 과 달리 margin 없음(배지와 수직 중앙 정렬 유지) */
.ha-title[data-v-0f25632e] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  line-height: var(--line-none);
}
.ha-desc[data-v-0f25632e] {
  margin: var(--gap-glyph) 0 var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ha-empty[data-v-0f25632e] {
  font-size: var(--size-label);
  color: var(--ink-muted);
  padding: var(--space-snug);
}
.ha-standby[data-v-0f25632e],
.ha-slot[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug);
  margin-top: var(--gap-glyph);
  border-radius: var(--radius-badge);
  background: var(--bg-field);
  font-size: var(--size-meta);
}
.ha-slot[data-v-0f25632e] {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.ha-standby-head[data-v-0f25632e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.ha-standby-name[data-v-0f25632e] {
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.ha-addr[data-v-0f25632e] {
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.ha-metrics[data-v-0f25632e] {
  display: flex;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  color: var(--ink-secondary);
}
.ha-metrics strong[data-v-0f25632e] {
  color: var(--ink-primary);
  font-weight: var(--weight-title);
}
.ha-slot-meta[data-v-0f25632e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
}


/* 수집(크롤링) 현황의 스타일은 공통 CrawlingStatusPanel 이 소유한다. */

/* 디스크 용량 패널 — 파일시스템 모니터링의 핵심 지표(크게) */
.capacity-panel[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--pad-card);
  margin-bottom: var(--gap-group);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  border: var(--line-strong);
}
.capacity-head[data-v-0f25632e] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.capacity-title[data-v-0f25632e] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary);
}
.capacity-percent[data-v-0f25632e] { font-size: var(--size-title); font-weight: var(--weight-strong); color: var(--ink-brand); font-variant-numeric: tabular-nums;
}
.capacity-bar[data-v-0f25632e] {
  height: var(--space-snug);
  border-radius: var(--radius-pill);
  background: var(--bg-field);
  overflow: hidden;
}
.capacity-fill[data-v-0f25632e] {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
  transition: width var(--motion-base) ease;
}
.capacity-legend[data-v-0f25632e] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.capacity-legend strong[data-v-0f25632e] { color: var(--ink-primary); font-variant-numeric: tabular-nums;
}
/* 임계 단계 색 전환 */
.capacity-panel--warn .capacity-percent[data-v-0f25632e],
.capacity-panel--warn .capacity-fill[data-v-0f25632e] { color: var(--ink-warning); background: var(--ink-warning);
}
.capacity-panel--warn .capacity-percent[data-v-0f25632e] { background: transparent;
}
.capacity-panel--danger .capacity-percent[data-v-0f25632e] { color: var(--ink-danger);
}
.capacity-panel--danger .capacity-fill[data-v-0f25632e] { background: var(--ink-danger);
}
.info-sub[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-muted); font-weight: var(--weight-body);
}

/* 볼륨 서버별 상세 — 마운트 디스크(NFS 등 백엔드 스토리지) 상태 */
.vol-servers[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin-top: var(--gap-group);
}
.vol-servers__head[data-v-0f25632e] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.vol-servers__title[data-v-0f25632e] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary);
}
.vol-servers__warn[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-warning); display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.vol-server[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-cozy);
  border-radius: var(--radius-control);
  /* 판은 비운다 — 같은 구획의 차트·서비스 카드와 같은 바탕(테두리로만 구분) */
  background: var(--bg-page);
  border: var(--line-strong);
}
.vol-server__head[data-v-0f25632e] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-inline);
}
.vol-server__url[data-v-0f25632e] { font-weight: var(--weight-title); color: var(--ink-primary); font-size: var(--size-label);
}
.vol-server__ver[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-muted);
}
.vol-server__vols[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-secondary); margin-left: auto;
}
.vol-server__down[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-danger); font-weight: var(--weight-title);
}
.vol-disk[data-v-0f25632e] { display: flex; align-items: center; gap: var(--gap-stack);
}
.vol-disk__dir[data-v-0f25632e] { font-size: var(--size-label); color: var(--ink-secondary); display: inline-flex; align-items: center; gap: var(--gap-glyph); min-width: 90px;
}
.vol-disk__bar[data-v-0f25632e] { flex: 1; height: var(--space-snug); border-radius: var(--radius-pill); background: var(--bg-field); overflow: hidden;
}
.vol-disk__fill[data-v-0f25632e] { height: 100%; border-radius: var(--radius-pill); background: var(--bg-brand-vivid); transition: width 0.5s ease;
}
.vol-disk__fill.is-warn[data-v-0f25632e] { background: var(--ink-warning);
}
.vol-disk__fill.is-danger[data-v-0f25632e] { background: var(--ink-danger);
}
.vol-disk__nums[data-v-0f25632e] { font-size: var(--size-meta); color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vol-disk--empty[data-v-0f25632e] { font-size: var(--size-label); color: var(--ink-muted);
}

/* 다운로드 큐 비어 있음 안내 (수집 현황이 옮겨간 뒤에도 이 화면이 계속 쓴다) */
.no-active-crawls[data-v-0f25632e] {
  text-align: center;
  padding: var(--space-band);
  color: var(--ink-muted);
  font-size: var(--size-body);
}
.no-active-crawls i[data-v-0f25632e] { margin-right: var(--gap-inline);
}

/* ─── 공통 ─── */
.empty-state[data-v-0f25632e] {
  text-align: center;
  padding: var(--space-wide);
  color: var(--ink-muted);
}
.empty-state i[data-v-0f25632e] { font-size: var(--icon-lead); margin-bottom: var(--space-snug); display: block;
}
.empty-state p[data-v-0f25632e] { margin: 0; font-size: var(--size-body);
}
@keyframes fadeIn-0f25632e {
from { opacity: 0; transform: translateY(10px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* ─── 반응형 ─── */
@media (max-width: 768px) {
  /* 좁은 화면 — 두 칸을 하나로 합쳐 한 줄에 하나씩 */
.two-column[data-v-0f25632e] {
    grid-template-columns: 1fr;
}
.service-cards[data-v-0f25632e] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.crawl-item[data-v-0f25632e] {
    flex-direction: column;
    align-items: stretch;
}
.crawl-progress-wrap[data-v-0f25632e] {
    min-width: unset;
}
.info-grid[data-v-0f25632e] {
    grid-template-columns: 1fr;
}
.refresh-controls[data-v-0f25632e] {
    justify-content: space-between;
}
  /* 새로고침 버튼: 모바일에서는 텍스트 숨기고 아이콘만 (데스크톱은 아이콘+텍스트) */
.refresh-controls[data-v-0f25632e] .app-btn__label {
    display: none;
}
.refresh-controls[data-v-0f25632e] .app-btn {
    padding: 0;
    width: var(--h-control-md);
}
}
@media (max-width: 480px) {
.system-monitoring[data-v-0f25632e] {
    padding: var(--space-tight) var(--pad-page-x) var(--space-roomy);
}
.last-refreshed__label[data-v-0f25632e] {
    display: none;
}
.section[data-v-0f25632e] {
    padding: var(--space-cozy);
}
.table-rows[data-v-0f25632e] { width: 80px;
}
.table-size[data-v-0f25632e] { width: 60px;
}
  /* 좁은 카드 안에서 3열 지표는 값이 잘리므로 2열로 접음 */
.metrics-row[data-v-0f25632e] { grid-template-columns: 1fr 1fr;
}
  /* 다운로드 큐 행: 회사명 고정폭을 줄여 파이프가 눌리지 않게 */
.dq-company[data-v-0f25632e] { min-width: 90px;
} /* dimensions-ignore: 좁은 폰용 회사명 최소폭 축소 */
}

/* 다운로드 큐 — 파이프 스타일 */
.dq-list[data-v-0f25632e] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.dq-row[data-v-0f25632e] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.dq-company[data-v-0f25632e] {
  min-width: 130px;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
.dq-pipe[data-v-0f25632e] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-height: var(--h-control-xs);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-tight) var(--space-tight);
  overflow: hidden;
}
.dq-processing[data-v-0f25632e] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-brand);
  width: 18px;
  text-align: center;
}
.dq-pipe-arrow[data-v-0f25632e] {
  flex-shrink: 0;
  font-size: var(--icon-marker);
  color: var(--ink-secondary);
  opacity: 0.5;
}
.dq-pipe-arrow--in[data-v-0f25632e] {
  margin-left: auto;
}
.dq-blocks[data-v-0f25632e] {
  display: flex;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  align-items: center;
}
.dq-block[data-v-0f25632e] {
  width: 8px;
  height: 14px;
  border-radius: var(--radius-badge);
  flex-shrink: 0;
  transition: background var(--motion-base);
}
.dq-block--normal[data-v-0f25632e] {
  background: var(--ink-accent-indigo);
}
.dq-block--high[data-v-0f25632e] {
  background: var(--ink-danger);
  /* ⛔ 상시 표시는 steps() 로 (2026-08-29 실측). 매끄러운 타이밍은 초당 60번
     다시 그리게 만들어, 7px 점 하나로도 CPU 20%를 태운다. steps 로 드문 갱신. */
  animation: dq-pulse-0f25632e 1s steps(4) infinite alternate;
}
@keyframes dq-pulse-0f25632e {
from { opacity: 0.7;
}
to { opacity: 1;
}
}
.dq-count[data-v-0f25632e] {
  flex-shrink: 0;
  font-size: var(--size-meta);
  color: var(--ink-primary);
  min-width: 55px;
  text-align: right;
  white-space: nowrap;
}
.dq-count-max[data-v-0f25632e] {
  color: var(--ink-secondary);
}
.dq-label-high[data-v-0f25632e] {
  color: var(--ink-danger);
  font-weight: var(--weight-title);
  margin-left: var(--gap-glyph);
  font-size: var(--size-meta);
}

/* 위 블록과의 사이 — 템플릿 style="" 대신 역할 토큰으로(검사에 보이게). */
.mini-chart-section--spaced[data-v-0f25632e] {
  margin-top: var(--gap-stack);
}

/* 옆 탭(AdminSystemMonitoring)과 같은 골격·간격 — 탭을 오갈 때 다른 화면처럼 보이면 안 된다 */
.usage-monitoring[data-v-3cd35725] {
  padding: 0 var(--space-roomy) var(--space-band);
}
.refresh-bar[data-v-3cd35725] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) 0;
  margin-bottom: var(--gap-inline);
  background: var(--bg-sticky);
  /* ⛔ `--bg-sticky` 는 **반투명**이라 blur 를 같이 둘러야 뒤가 정리된다 — 이 두 줄이 빠져 있어
     바로 옆 탭(자원현황)의 같은 막대보다 이 자리만 더 비쳐 보였다(사용자 지적 2026-08-30).
     전수 확인: `--bg-sticky` 를 쓰는 22곳 중 blur 가 없는 자리는 여기 하나뿐이었다. */
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.last-refreshed[data-v-3cd35725] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 자동 갱신 컨트롤 — 자원현황 탭의 같은 자리와 **같은 선언**이라야 한다.
   ⛔ `display:flex; align-items:center` 가 빠져 있어 안쪽 컨트롤이 글줄 기준선에 얹혀
      막대 높이가 50px 이었다(자원현황은 48px). 탭을 옮길 때마다 그 자리가 2px 덜컹였다
      — 실측 2026-08-30, 뜬 화면 계산값. */
.refresh-controls[data-v-3cd35725] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.load-error[data-v-3cd35725] {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.section[data-v-3cd35725] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-card);
  margin-bottom: var(--gap-group);
  min-width: 0;
  overflow: hidden;
}
.section-header[data-v-3cd35725] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  margin-bottom: var(--gap-stack);
  flex-wrap: wrap;
}
.section-header h3[data-v-3cd35725] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.section-header h3 i[data-v-3cd35725] { color: var(--ink-brand);
}
.section-search[data-v-3cd35725] { flex: 0 1 20rem; min-width: 12rem;
}
.section-description[data-v-3cd35725] {
  margin: 0 0 var(--gap-stack);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}

/* 큰 숫자 + 추이를 한 줄로. 추이가 남는 폭을 먹어 오른쪽이 비지 않는다. */
.nowrow[data-v-3cd35725] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group) var(--gap-page);
  align-items: flex-start;
}
.nowrow .figs[data-v-3cd35725] { flex: 0 0 auto;
}
.nowrow .spark[data-v-3cd35725] { flex: 1 1 20rem; min-width: 0;
}
.figs[data-v-3cd35725] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group) var(--gap-page);
  /* ⛔ flex-end 로 두지 않는다. 라벨이 두 줄인 타일만 숫자가 위로 떠서 큰 숫자가
     한 줄에 안 선다(실측 편차 30px). 위를 맞추면 숫자는 한 줄에 서고 라벨만 늘어난다. */
  align-items: flex-start;
}
/* 요약 카드 — 폭을 균등하게 다 채운다. 왼쪽에만 뭉치면 검색창 아래가 휑해진다. */
.statcards[data-v-3cd35725] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--gap-stack);
  margin-bottom: var(--gap-group);
}
.statcard[data-v-3cd35725] {
  border: var(--line-strong);
  border-radius: var(--radius-control);
  /* 판은 비운다 — 같은 화면의 차트·표와 같은 바탕(테두리로만 구분) */
  background: var(--bg-page);
  padding: var(--pad-panel);
  min-width: 0;
  /* 카드 안은 가운데 정렬 — 폭이 균등한 카드에서 값이 왼쪽에 붙으면 줄이 어긋나 보인다 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.statcard__v[data-v-3cd35725] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  line-height: var(--line-none);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.statcard__v.is-warn[data-v-3cd35725] { color: var(--ink-warning);
}
.statcard__v.is-crit[data-v-3cd35725] { color: var(--ink-danger);
}
.statcard__l[data-v-3cd35725] {
  margin-top: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-snug);
}
.statcard__note[data-v-3cd35725] { display: block; color: var(--ink-secondary);
}
.fig__v[data-v-3cd35725] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  line-height: var(--line-none);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.fig--lead .fig__v[data-v-3cd35725] { font-size: var(--size-display-sm);
}
.fig__v--sm[data-v-3cd35725] { font-size: var(--size-title);
}
.fig__v.is-warn[data-v-3cd35725] { color: var(--ink-warning);
}
.fig__v.is-crit[data-v-3cd35725] { color: var(--ink-danger);
}
.fig__l[data-v-3cd35725] {
  margin-top: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-snug);
}
.fig__note[data-v-3cd35725] { display: block; color: var(--ink-secondary);
}
.spark[data-v-3cd35725] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
/* 이 자리의 스파크라인은 곁들이는 결이 아니라 카드의 주인공이라 폭을 다 쓴다. */
.spark[data-v-3cd35725] .app-chart--spark { width: 100%; opacity: 1;
}
.spark__cap[data-v-3cd35725] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

/* 게이지 — 막대가 남는 폭을 전부 먹는다(오른쪽 공백 금지). 넓으면 두 줄로 나눈다. */
.gauges[data-v-3cd35725] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-inline) var(--gap-page);
}
@media (min-width: 1280px) {
.gauges[data-v-3cd35725] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.gauge[data-v-3cd35725] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  font-size: var(--size-meta);
  min-width: 0;
}
.gauge__l[data-v-3cd35725] {
  flex: 0 0 9rem;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gauge__t[data-v-3cd35725] {
  flex: 1 1 auto;
  height: var(--space-snug);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 0;
}

/* 상한을 모르는 줄: 자리는 지키되 '여유 만땅'으로 읽히지 않게 채움통을 비운다 */
.gauge__t--na[data-v-3cd35725] {
  background: transparent;
  border-style: dashed;
}

/* 전체 DB 연결 — 진짜 한계라 내역보다 앞에 크게 세운다 */
.gauge--lead[data-v-3cd35725] {
  margin-bottom: var(--gap-inline);
  font-weight: var(--weight-title);
}
.gauge--lead .gauge__t[data-v-3cd35725] { height: var(--space-cozy);
}

/* 내역(서비스별)은 한 단 들여 전체의 하위임을 드러낸다 */
.gauges--detail[data-v-3cd35725] {
  padding-left: var(--space-roomy);
  border-left: var(--line-strong);
}
.subhead[data-v-3cd35725] {
  margin: var(--gap-group) 0 var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 라벨 옆말: '3대 합계' 처럼 숫자를 어떻게 읽어야 하는지 알려 주는 짧은 말 */
.gauge__aside[data-v-3cd35725] {
  margin-left: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.gauge-note[data-v-3cd35725] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.gauge__f[data-v-3cd35725] { display: block; height: 100%; border-radius: var(--radius-pill);
}
.gauge__f.is-ok[data-v-3cd35725] { background: var(--ink-success);
}
.gauge__f.is-warn[data-v-3cd35725] { background: var(--ink-warning);
}
.gauge__f.is-crit[data-v-3cd35725] { background: var(--ink-danger);
}
.gauge__v[data-v-3cd35725] {
  flex: 0 0 auto;
  min-width: 5rem;
  white-space: nowrap;  /* 세 자리가 되면 그 줄만 두 줄로 접혀 정렬이 틀어진다 */
  text-align: right;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.dim[data-v-3cd35725] { color: var(--ink-muted);
}
.is-warn[data-v-3cd35725] { color: var(--ink-warning);
}

.detail__grid[data-v-2eccdb52] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-group);
  margin-bottom: var(--gap-group);
}
.detail__item label[data-v-2eccdb52] {
  display: block;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.detail__section[data-v-2eccdb52] {
  margin-bottom: var(--gap-group);
}
.detail__section label[data-v-2eccdb52] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.detail__section code[data-v-2eccdb52] {
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.detail__pre[data-v-2eccdb52] {
  background: var(--bg-field);
  padding: var(--space-cozy);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  color: var(--ink-primary);
}
.detail__pre--mono[data-v-2eccdb52] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}
@media (max-width: 768px) {
.detail__grid[data-v-2eccdb52] { grid-template-columns: repeat(2, 1fr);
}
}

.form-group[data-v-9106b142] {
  margin-bottom: var(--gap-group);
}
.form-group label[data-v-9106b142] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  margin-bottom: var(--gap-glyph);
  color: var(--ink-primary);
}
.selected-errors[data-v-9106b142] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 서비스 뱃지 */
/* 에러 메시지 셀 */
.error-message-cell[data-v-a2b0e9e7] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.error-message-cell--card[data-v-a2b0e9e7] {
  gap: var(--gap-glyph);
}
.error-code[data-v-a2b0e9e7] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  width: -moz-fit-content;
  width: fit-content;
}
.error-msg[data-v-a2b0e9e7] {
  cursor: pointer;
  word-break: break-word;
  color: var(--ink-primary);
}
.error-msg[data-v-a2b0e9e7]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.error-url[data-v-a2b0e9e7] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  word-break: break-all;
}

/* 발생 횟수 — 숫자 가운데 정렬 폭 확보 */
.count-num[data-v-a2b0e9e7] {
  min-width: 24px;
  justify-content: center;
}

/* 상태 아이콘 */
.status-open[data-v-a2b0e9e7] { color: var(--ink-danger);
}
.status-resolved[data-v-a2b0e9e7] { color: var(--ink-success);
}

/* 마지막 발생 시각 */
.time-cell[data-v-a2b0e9e7] {
  white-space: nowrap;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 에러 로그 카드형 본문 */
.error-card[data-v-a2b0e9e7] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  width: 100%;
  min-width: 0;
}
.error-card__head[data-v-a2b0e9e7] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.error-card__foot[data-v-a2b0e9e7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

.issue-card[data-v-ef21564a] {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--pad-card);
  border-left: var(--line-accent) solid var(--line-color);
}
.issue-card--low[data-v-ef21564a] { border-left-color: var(--ink-success);
}
.issue-card--medium[data-v-ef21564a] { border-left-color: var(--ink-warning);
}
.issue-card--high[data-v-ef21564a] { border-left-color: var(--ink-danger);
}
.issue-card--critical[data-v-ef21564a] { border-left-color: var(--ink-info);
}
.issue-card__header[data-v-ef21564a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.issue-card__date[data-v-ef21564a] {
  margin-left: auto;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.issue-card__title[data-v-ef21564a] {
  margin: 0 0 var(--gap-glyph);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  word-break: break-word;
}
.issue-card__desc[data-v-ef21564a] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  word-break: break-word;
}
.issue-ai[data-v-ef21564a] {
  margin: var(--gap-inline) 0;
  padding: var(--space-cozy);
  border-radius: var(--radius-badge);
  background: var(--bg-info-soft);
  border: var(--line-w) solid var(--bg-info-soft);
}
.issue-ai--suggestion[data-v-ef21564a] {
  background: var(--bg-warning-soft);
  border-color: var(--bg-warning-soft);
}
.issue-ai__label[data-v-ef21564a] {
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-info);
}
.issue-ai--suggestion .issue-ai__label[data-v-ef21564a] { color: var(--ink-warning);
}
.issue-ai__content[data-v-ef21564a] {
  font-size: var(--size-label);
  line-height: var(--line-normal);
  white-space: pre-wrap;
  color: var(--ink-primary);
}
.issue-card__actions[data-v-ef21564a] {
  display: flex;
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
  flex-wrap: wrap;
}

.admin-monitoring[data-v-68fa22c5] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 에러로그/이슈 서브탭 — 내부 ListScreen 이 남는 공간을 채우고 자체 스크롤 */
.section[data-v-68fa22c5] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.section[data-v-68fa22c5] .list-screen {
  flex: 1;
  min-height: 0;
  padding-top: 0;
}

/* ⛔ 안이 ListScreen(자체 스크롤)이 아닌 서브탭은 이 modifier 를 반드시 붙인다.
   기본 .section 은 overflow:hidden 이라, 내용이 길면 넘치는 부분을 볼 방법이 아예 없다
   (2026-08-09 실측: 패널을 손으로 쌓았을 때 1,364px 내용이 741px 상자에 갇혀 휠도 안 먹었다).
   ListScreen 을 쓰는 서브탭은 그쪽이 스크롤을 소유하므로 붙이지 않는다. */
.section--dashboard[data-v-68fa22c5] {
  display: block;
  overflow-y: auto;
}

/* 상단 패딩 제거 — 서브탭 TabNav 가 위 간격을 소유(중복 여백 방지) */
.section--dashboard[data-v-68fa22c5] .system-monitoring,
.section--dashboard[data-v-68fa22c5] .usage-monitoring {
  padding-top: 0;
}

.req-detail[data-v-3623384b] { display: flex; flex-direction: column; gap: var(--gap-group);
}
.req-detail__loading[data-v-3623384b] { padding: var(--space-band); text-align: center; color: var(--ink-secondary);
}
.req-detail__head[data-v-3623384b] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.req-detail__title[data-v-3623384b] { margin: 0; font-size: var(--size-title-sm);
}
.req-detail__labels[data-v-3623384b] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph);
}
/* ⛔ 탭을 바꿔도 모달 크기가 변하지 않도록 판 높이를 못 박는다(디자인 시스템 모달 규칙).
   스크롤은 **여기 한 곳뿐** — 안쪽 상자에 또 스크롤을 두지 않는다. */
.req-detail__panel[data-v-3623384b] {
  height: 22rem;
  overflow-y: auto;
  padding-right: var(--space-tight);
}
.req-detail__md[data-v-3623384b] {
  margin: 0;
  word-break: break-word;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.req-detail__md[data-v-3623384b] p { margin: 0 0 var(--gap-inline);
}
.req-detail__md[data-v-3623384b] ul,
.req-detail__md[data-v-3623384b] ol { margin: 0 0 var(--gap-inline); padding-left: var(--space-band);
}
.req-detail__md[data-v-3623384b] hr { border: 0; border-top: var(--line-strong); margin: var(--gap-stack) 0;
}
.req-detail__md[data-v-3623384b] strong { color: var(--ink-primary);
}
.req-detail__md[data-v-3623384b] img { max-width: 100%;
}
/* 본문에 이어 붙인 첨부 그림 — 원래 크기대로 두되 판을 넘지 않게만 가둔다.
   ⛔ v-html 안이라 scoped 속성이 안 붙는다 — 반드시 :deep() 으로 내려가야 한다. */
.req-detail__md[data-v-3623384b] .req-detail__figure { margin: 0 0 var(--gap-inline);
}
.req-detail__md[data-v-3623384b] .req-detail__figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  cursor: zoom-in;
}
.req-detail__attachments h4[data-v-3623384b],
.req-detail__vendor h4[data-v-3623384b],
.req-detail__timeline h4[data-v-3623384b] { margin: 0 0 var(--gap-inline); font-size: var(--size-label);
}
.req-detail__vendor p[data-v-3623384b] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.req-detail__none[data-v-3623384b] { margin: 0; font-size: var(--size-meta); color: var(--ink-secondary);
}
.req-note[data-v-3623384b] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.req-note__label[data-v-3623384b] { font-size: var(--size-body); font-weight: var(--weight-label); color: var(--ink-secondary);
}
.req-note__hint[data-v-3623384b] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-normal);
}
.req-note__submit[data-v-3623384b] { align-self: flex-start;
}
.req-attach[data-v-3623384b] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.req-attach__item[data-v-3623384b] { display: flex; align-items: center; gap: var(--gap-stack);
}
.req-attach__thumb[data-v-3623384b] {
  width: 5rem; height: 3.5rem; -o-object-fit: cover; object-fit: cover;
  border-radius: var(--radius-badge); border: 1px solid var(--line-color); cursor: pointer;
}
.req-attach__meta[data-v-3623384b] { display: flex; flex-direction: column; gap: var(--gap-glyph); flex: 1; min-width: 0;
}
.req-attach__size[data-v-3623384b] { font-size: var(--size-label); color: var(--ink-secondary);
}
.req-when[data-v-3623384b] { font-size: var(--size-label); color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.req-event-line[data-v-3623384b] { font-size: var(--size-meta); color: var(--ink-secondary); white-space: pre-wrap; word-break: break-word;
}
.req-no[data-v-3623384b] { font-family: var(--font-mono); font-size: var(--size-meta);
}
.req-detail__foot[data-v-3623384b] { display: flex; gap: var(--gap-inline); align-items: center; justify-content: flex-end; width: 100%;
}

.req-stats[data-v-9b96774f] {
  display: grid;
  gap: var(--gap-inline);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  padding: var(--space-snug) 0;
}
.req-stat[data-v-9b96774f] {
  height: auto;
  display: block;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
}
.req-stat[data-v-9b96774f]:hover { border-color: var(--ink-brand);
}
.req-stat.is-on[data-v-9b96774f] { border-color: var(--ink-brand); background: var(--bg-hover);
}
.req-stale[data-v-9b96774f] {
  height: auto;
  display: flex; align-items: center; gap: var(--gap-inline);
  margin-top: var(--gap-inline);
  border: var(--line-w) solid var(--ink-warning);
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: var(--size-label);
  cursor: pointer;
  width: 100%;
}
.req-stale.is-on[data-v-9b96774f] { background: var(--bg-hover);
}
.req-stale i[data-v-9b96774f] { color: var(--ink-warning);
}
.req-stat b[data-v-9b96774f] {
  display: block;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}
.req-stat span[data-v-9b96774f] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
/* 절대 표기('2026.08.19 (수) 10:06')가 두 줄로 접히면 행 높이가 44/58 로 들쭉날쭉해진다. */
.req-when[data-v-9b96774f] { font-size: var(--size-label); color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.req-no[data-v-9b96774f] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
}
/* ⛔ **넘침을 여기서 정하지 않는다** — 제목 열은 「줄바꿈」이라 접어서 다 보이는 게 맞다
   (제목이 잘리면 뒤가 다른 접수건이 서로 구분되지 않는다). 잘라야 하면 컬럼 설정을 바꾼다.
   셀에 건 말줄임이 슬롯 안까지 닿는 일은 이제 ListBody 가 한다(.ov-ellipsis). */
.req-title__text[data-v-9b96774f] {
  display: block;
  min-width: 0;
}
/* 상태 — 뱃지와 전달 흔적이 **한 줄**로 선다. 넘침은 컬럼 설정이 정한다. */
.req-status[data-v-9b96774f] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
/* ⛔ 상태 뱃지는 **줄어들지 않는다** — 상태는 언제나 다 읽혀야 하는 값이다.
   좁아지면 곁들인 흔적(#1438)만 줄고, 그건 눌러서 전문을 볼 수 있다.
   (안 막으면 「v2.0.1 수정됨」이 「v2.0.1 수정」으로 잘렸다 — 실측 2026-08-28) */
.req-status[data-v-9b96774f] >  .app-badge {
  flex: none;
}
/* 어느 이슈·꾸러미로 넘겼나 — 상태에 곁들이는 값이라 한 단 낮은 색으로 둔다. */
.req-status__ref[data-v-9b96774f] {
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-secondary);
}

.req-export[data-v-3013c8a2] { display: flex; flex-direction: column; gap: var(--gap-stack); min-height: 0; height: 100%;
}
.req-export[data-v-3013c8a2] .list-body { flex: 1; min-height: 0;
}
.req-export__lead[data-v-3013c8a2] { display: flex; align-items: center; gap: var(--gap-inline); flex-wrap: wrap; padding: var(--space-snug) 0;
}
.req-export__hint[data-v-3013c8a2] { font-size: var(--size-label); color: var(--ink-secondary);
}
.req-no[data-v-3013c8a2] { font-family: var(--font-mono); font-size: var(--size-meta); font-variant-numeric: tabular-nums;
}

.req-patch[data-v-0479ef9d] { display: flex; flex-direction: column; gap: var(--gap-stack); min-height: 0; height: 100%;
}
.req-patch[data-v-0479ef9d] .list-body { flex: 1; min-height: 0;
}
.req-patch__lead[data-v-0479ef9d] { display: flex; align-items: center; gap: var(--gap-inline); flex-wrap: wrap; padding: var(--space-snug) 0;
}
.req-patch__hint[data-v-0479ef9d] { font-size: var(--size-label); color: var(--ink-secondary);
}
.req-patch__none[data-v-0479ef9d] {
  margin: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
  background: var(--bg-field);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.req-patch__what[data-v-0479ef9d] { display: inline-flex; align-items: baseline; gap: var(--gap-glyph); min-width: 0;
}
.req-patch__na[data-v-0479ef9d] { color: var(--ink-muted);
}
.req-no[data-v-0479ef9d] { font-family: var(--font-mono); font-size: var(--size-meta);
}
.req-ver[data-v-0479ef9d] { font-size: var(--size-meta); font-variant-numeric: tabular-nums;
}

.admin-requirements[data-v-c44fe449] {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 안이 ListScreen(자체 스크롤)이라 여기서는 넘침을 막고 자리만 준다 */
.section[data-v-c44fe449] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.section[data-v-c44fe449] .list-screen {
  flex: 1;
  min-height: 0;
  padding-top: 0;
}

/* ⛔ 바깥에 스크롤을 만들지 않는다 — 목록 위에 커서가 있으면 휠을 목록이 먹어 바깥은
   안 움직인다(실측: scrollTop 0 그대로). 그래서 "스크롤이 안 된다"로 보인다.
   대신 탭이 한 판에 들어가게 하고, 넘치는 것은 **목록이 자기 안에서** 스크롤한다. */

.cjs[data-v-0908210e] { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
/* 수집 중일 때만 두 줄 — 다른 상태(뱃지 하나)는 그대로 한 줄이다 */
.cjs--running[data-v-0908210e] { flex-direction: column; align-items: stretch; gap: var(--gap-glyph);
}
.cjs-top[data-v-0908210e] { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.cjs-bar[data-v-0908210e] { flex: 1 1 auto; height: 6px; border-radius: var(--radius-pill); background: var(--bg-field); overflow: hidden;
}
.cjs-bar__fill[data-v-0908210e] { height: 100%; border-radius: var(--radius-pill); background: var(--bg-brand-vivid); transition: width 0.5s ease;
}
.cjs-pct[data-v-0908210e] { flex: none; white-space: nowrap; font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-brand); font-variant-numeric: tabular-nums;
}
/* 아랫줄 전체를 쓰므로 이제 "[9/88] 판매중 > 자동차보험 > 개인용" 같은 문구가 읽힌다.
   그래도 넘치면 말줄임(제목 툴팁에 전문). */
.cjs-task[data-v-0908210e] { display: block; min-width: 0; font-size: var(--size-meta); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cjs-never[data-v-0908210e] { font-size: var(--size-label); color: var(--ink-muted);
}

/* ── 통계 카드 (파싱 작업과 같은 모양) ── */
/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창과 판이 따로 논다.
   실측 2026-08-29: 창 820px 에서 판은 568px 인데 3열(타일 184px)이고, 창 768px 에서는
   곁막대가 접혀 판이 736px 인데 **같은 3열**(240px)이었다 — 창이 좁아질수록 판은 넓어지는데
   열은 거꾸로 갔다. 200px 은 타일의 최대 내용 폭(178px 실측)에 맞춘 값이고,
   ActivityLogs·FeedbackAnalytics 가 이미 쓰는 선례다. */
.stats-summary[data-v-722bb7fe] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-inline);
}
.stat-card[data-v-722bb7fe] {
  display: flex; align-items: center; gap: var(--gap-inline);
  background: var(--bg-card); border: 1px solid var(--line-color);
  border-radius: var(--radius-badge); padding: var(--pad-tile); min-width: 0;
}
.stat-main[data-v-722bb7fe] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.stat-icon[data-v-722bb7fe] {
  width: var(--h-control-lg); height: var(--h-control-lg);
  border-radius: var(--radius-badge); display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-toolbar); color: var(--ink-on-solid); flex-shrink: 0;
}
.stat-icon--total[data-v-722bb7fe]   { background: var(--bg-brand);
}
.stat-icon--running[data-v-722bb7fe] { background: var(--bg-info);
}
.stat-icon--ok[data-v-722bb7fe]      { background: var(--bg-success);
}
.stat-icon--fail[data-v-722bb7fe]    { background: var(--bg-danger);
}
.stat-icon--never[data-v-722bb7fe]   { background: var(--ink-muted);
}
.stat-label[data-v-722bb7fe] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-body[data-v-722bb7fe] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.stat-value[data-v-722bb7fe] { font-size: var(--size-title); font-weight: var(--weight-strong); color: var(--ink-primary); line-height: var(--line-none); font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-722bb7fe] { font-size: var(--size-meta); color: var(--ink-muted); white-space: nowrap; line-height: var(--line-none);
}

/* ── 셀 ── */
.cj-company[data-v-722bb7fe] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17) — 컬럼 설정이 정한다.
   여기서 박으면 기본값(wrap = 접어서 다 보임)이 무시돼 이름이 앞부분만 남는다. */
.cj-company__name[data-v-722bb7fe] { font-weight: var(--weight-title); color: var(--ink-primary);
}
.cj-muted[data-v-722bb7fe] { font-size: var(--size-label); color: var(--ink-muted);
}
.cj-scraper[data-v-722bb7fe] {
  font-size: var(--size-label);
}

/* 미지정 = 기본 스크래퍼 담당. 빠진 값이 아니라 '기본이 맡는다'는 뜻이라 흐리게만 둔다 */
.cj-scraper--default[data-v-722bb7fe] {
  color: var(--ink-muted);
}
.cj-schedule[data-v-722bb7fe] { font-size: var(--size-label); color: var(--ink-secondary);
}
.cj-lastrun[data-v-722bb7fe] { font-size: var(--size-label); color: var(--ink-secondary); font-variant-numeric: tabular-nums;
}
.cj-actions[data-v-722bb7fe] { display: inline-flex; align-items: center; gap: var(--gap-glyph); justify-content: center;
}

/* ── 일괄 진행 ── */
.bulk-progress[data-v-722bb7fe] { display: inline-flex; align-items: center; gap: var(--gap-inline); font-size: var(--size-label); color: var(--ink-secondary);
}

/* ── 카드형 ── */
.cj-card[data-v-722bb7fe] { display: flex; flex-direction: column; gap: var(--gap-inline); min-width: 0;
}
.cj-card__title[data-v-722bb7fe] { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.cj-card__meta[data-v-722bb7fe] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-muted);
}
.cj-card__state[data-v-722bb7fe] { min-width: 0;
}
.cj-card__actions[data-v-722bb7fe] { display: flex; align-items: center; gap: var(--gap-glyph);
}
.cj-sep[data-v-722bb7fe] { color: var(--ink-muted);
}


/* 보기 전환 — 제목 옆 작은 토글 */
.ch-stats-basis[data-v-3e300c11] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.ch-stats-basis__src[data-v-3e300c11] { color: var(--ink-muted); font-size: var(--size-meta);
}

/* 보기 전환 한 쌍 — 툴바 맨 앞에서 둘이 한 덩어리로 붙어 선다.
   ⛔ margin-left 를 두지 않는다(툴바 자리 간격은 툴바가 소유). */
.ch-view[data-v-3e300c11] {
  display: inline-flex;
  gap: var(--gap-glyph);
}

/* 통계 카드 — 수집 작업 화면(AdminCrawlingJobs)과 같은 모양·같은 토큰.
   두 화면이 나란히 있는 서브탭이라 카드가 다르게 생기면 다른 화면처럼 보인다. */
/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창과 판이 따로 논다.
   실측 2026-08-29: 창 820px 에서 판은 568px 인데 3열(타일 184px)이고, 창 768px 에서는
   곁막대가 접혀 판이 736px 인데 **같은 3열**(240px)이었다 — 창이 좁아질수록 판은 넓어지는데
   열은 거꾸로 갔다. 200px 은 타일의 최대 내용 폭(178px 실측)에 맞춘 값이고,
   ActivityLogs·FeedbackAnalytics 가 이미 쓰는 선례다. */
.stats-summary[data-v-3e300c11] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-inline);
}
/* ⛔ 좁아지면 칸 수를 줄인다 — 안 줄이면 폰에서 카드 하나가 68px 로 눌려 라벨이 통째로
   사라지고 숫자마저 잘린다(2026-08-10 실측, 390px). 끊는 지점은 옆 서브탭인
   수집 작업(AdminCrawlingJobs)·파싱 작업과 같은 값으로 맞춘다 — 나란히 있는 화면이
   서로 다르게 접히면 다른 화면처럼 보인다. */
.stat-card[data-v-3e300c11] {
  display: flex; align-items: center; gap: var(--gap-inline);
  background: var(--bg-card); border: 1px solid var(--line-color);
  border-radius: var(--radius-badge); padding: var(--pad-tile); min-width: 0;
}
.stat-main[data-v-3e300c11] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.stat-icon[data-v-3e300c11] {
  width: var(--h-control-lg); height: var(--h-control-lg);
  border-radius: var(--radius-badge); display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-toolbar); color: var(--ink-on-solid); flex-shrink: 0;
}
.stat-icon--total[data-v-3e300c11] { background: var(--bg-brand);
}
.stat-icon--ok[data-v-3e300c11]    { background: var(--bg-success);
}
.stat-icon--fail[data-v-3e300c11]  { background: var(--bg-danger);
}
.stat-icon--partial[data-v-3e300c11] { background: var(--bg-warning);
}
.stat-icon--new[data-v-3e300c11]   { background: var(--bg-info);
}
.stat-label[data-v-3e300c11] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-body[data-v-3e300c11] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.stat-value[data-v-3e300c11] { font-size: var(--size-title); font-weight: var(--weight-strong); color: var(--ink-primary); line-height: var(--line-none); font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-3e300c11] { font-size: var(--size-meta); color: var(--ink-muted); white-space: nowrap; line-height: var(--line-none);
}

/* 목록 셀 */
.ch-company[data-v-3e300c11] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17) — 컬럼 설정이 정한다.
   여기서 박으면 기본값(wrap = 접어서 다 보임)이 무시돼 이름이 앞부분만 남는다. */
.ch-company__name[data-v-3e300c11] {
}
/* 누를 수 있는 이름 — 평소엔 다른 글자와 같게 두고, 올렸을 때만 문임을 드러낸다.
   목록 전체가 파랗게 물들면 무엇이 특별한지 되레 안 보인다. */
.ch-company__name--link[data-v-3e300c11] { cursor: pointer;
}
.ch-company__name--link[data-v-3e300c11]:hover,
.ch-company__name--link[data-v-3e300c11]:focus-visible {
  color: var(--ink-brand);
  text-decoration: underline;
}
.ch-scraper[data-v-3e300c11] { font-size: var(--size-label); color: var(--ink-secondary);
}
.ch-scraper--none[data-v-3e300c11] { color: var(--ink-muted);
}
.ch-new[data-v-3e300c11] { margin-right: var(--gap-glyph); color: var(--ink-success); font-size: var(--size-meta); font-weight: var(--weight-title);
}
.ch-error[data-v-3e300c11] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  color: var(--ink-danger);
  font-size: var(--size-label);
}

/* 행 펼침 — 오류 전문 + 처리 내역 */
.ch-when[data-v-3e300c11] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.ch-caret[data-v-3e300c11] { color: var(--ink-muted); font-size: var(--icon-marker);
}
.ch-detail[data-v-3e300c11] { display: flex; flex-direction: column; gap: var(--gap-inline); padding: var(--space-snug) var(--space-cozy);
}
.ch-detail__label[data-v-3e300c11] { font-size: var(--size-meta); color: var(--ink-muted); margin-bottom: var(--gap-glyph);
}
.ch-detail__msg[data-v-3e300c11] { margin: 0; font-size: var(--size-label); color: var(--ink-danger); white-space: pre-wrap; word-break: break-word;
}
.ch-detail__facts[data-v-3e300c11] { display: flex; flex-wrap: wrap; gap: var(--gap-group); margin: 0;
}
.ch-detail__facts div[data-v-3e300c11] { display: flex; align-items: baseline; gap: var(--gap-inline);
}
.ch-detail__facts dt[data-v-3e300c11] { font-size: var(--size-meta); color: var(--ink-muted);
}
/* 출시 시기는 문장이 길어 한 줄을 통째로 쓴다 — 다른 값 사이에 끼면 줄바꿈이 지저분해진다. */
.ch-detail__span[data-v-3e300c11] { flex-basis: 100%;
}
.ch-detail__facts dd[data-v-3e300c11] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary); font-variant-numeric: tabular-nums;
}

/* 달력 */
/* 달력은 남는 높이를 **전부** 가져간다. 화면이 낮아도 --calendar-grid-min-h 아래로는
   줄지 않고 대신 스크롤한다 — 더 낮아지면 한 달이 뭉개져 읽을 수 없다(사용자 지시 2026-08-09). */
.ch-calendar-wrap[data-v-3e300c11] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 달력이 화면 맨 아래에 딱 붙지 않게 숨 쉴 틈을 둔다 —
     '꽉 채우라'는 것이 '테두리가 화면 끝에 닿으라'는 뜻은 아니다(사용자 지적 2026-08-09). */
  padding-bottom: var(--space-roomy);
}
.ch-calendar[data-v-3e300c11] { flex: 1 1 auto; min-height: 0;
}
/* 달력 상단 줄 — **월 이동(날짜 선택)은 가운데, 안내 메시지는 오른쪽**(사용자 지시 2026-08-09).
   안내를 흐름에 두면 그 폭만큼 월 이동이 왼쪽으로 밀려 가운데가 아니게 된다.
   그래서 안내만 흐름에서 빼 오른쪽 끝에 붙인다 — 월 이동은 nav 의 justify-content:center 로 정확히 중앙. */
.ch-calendar[data-v-3e300c11] .app-calendar__nav { position: relative;
}
.ch-cal-hint[data-v-3e300c11] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  pointer-events: none;
}
/* 좁은 화면에서는 월 이동과 겹치므로 접는다 — 터치에선 표시를 바로 누르면 되니 안내가 덜 필요하다 */
@media (max-width: 1024px) {
.ch-cal-hint[data-v-3e300c11] { display: none;
}
}
/* ⛔ 최소 높이는 **그리드**에 건다. 달력 전체(.ch-calendar)에 걸면 월 이동 헤더와
   요일 줄(약 80px)이 그 안을 먹어 정작 날짜 칸은 최소치보다 작아진다
   (2026-08-09 실측: 700px 화면에서 그리드가 340px 로 눌림).
   여기서는 자리를 못 채우면 래퍼(.ch-calendar-wrap)가 스크롤한다. */
.ch-calendar[data-v-3e300c11] .app-calendar__grid { min-height: var(--calendar-grid-min-h);
}
.ch-cal__cell[data-v-3e300c11] { display: flex; flex-direction: column; gap: var(--gap-glyph); align-items: center;
}
/* ⛔ 여는 것은 '칸'이 아니라 **칸 안의 수집 표시**다(사용자 지시 2026-08-09).
   아무 일도 없던 날을 눌러 빈 팝업이 뜨는 일이 없고, 누를 수 있는 자리가 눈에 보인다. */
.ch-cal__hit[data-v-3e300c11] {
  cursor: pointer;
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
}
.ch-cal__hit[data-v-3e300c11]:hover { background: var(--bg-hover);
}
.ch-cal__hit[data-v-3e300c11]:focus-visible { outline: none; box-shadow: var(--ring-focus);
}
.ch-cal__done[data-v-3e300c11] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph); justify-content: center; align-items: center;
}
.ch-cal__new[data-v-3e300c11] { display: inline-flex; align-items: center; gap: var(--gap-glyph); font-size: var(--size-meta); color: var(--ink-success); font-weight: var(--weight-title);
}
.ch-cal__plan[data-v-3e300c11] { display: flex; align-items: center; justify-content: center; gap: var(--gap-glyph);
}
/* 예정은 아직 일어나지 않은 일 — 시계 아이콘 + 흐린(muted) 파비콘으로 실적과 구분한다 */
.ch-cal__plan-icon[data-v-3e300c11] { color: var(--ink-muted); font-size: var(--icon-marker);
}

/* 그날 상세 팝업 — ⛔ 고른 날에 따라 높이가 튀지 않게 본문 최소 높이를 못 박는다 */
.ch-daymodal[data-v-3e300c11] { display: flex; flex-direction: column; gap: var(--gap-stack); min-height: 24rem;
}
.ch-daymodal__sum[data-v-3e300c11] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}
.ch-daymodal__plan[data-v-3e300c11] { margin: 0; display: flex; align-items: center; gap: var(--gap-inline); font-size: var(--size-meta); color: var(--ink-muted);
}


/* 달력 격자 최소 높이 — 이 화면만 쓴다. 전역 어휘를 차지하지 않게 여기서 정의한다.
   ⛔ 화면 뿌리(ListScreen)도 .ch-view(보기 전환 단추 묶음)도 아니라, **격자를 실제로 품는**
      .ch-calendar-wrap 에 붙인다 — 2026-08-30 뜬 화면에서 조상 관계를 확인했다. */
.ch-calendar-wrap[data-v-3e300c11] {
  --calendar-grid-min-h: 420px;
}

.sc-orphan[data-v-9137313b] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  border-radius: var(--radius-control);
  background: var(--bg-hover);
  color: var(--ink-warning);
  font-size: var(--size-label);
}
.sc-name__title[data-v-9137313b] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-weight: var(--weight-title);
}
.sc-name__icon[data-v-9137313b] {
  color: var(--ink-muted);
}
.sc-pid[data-v-9137313b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.sc-mode[data-v-9137313b] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.sc-url[data-v-9137313b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  word-break: break-all;
}
.sc-url--empty[data-v-9137313b] {
  color: var(--ink-muted);
}
.sc-companies[data-v-9137313b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.sc-companies__count[data-v-9137313b] {
  font-size: var(--size-label);
}

/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.sc-companies__note[data-v-9137313b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.sc-hb[data-v-9137313b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.sc-hb--stale[data-v-9137313b] {
  color: var(--ink-warning);
}
.sc-res[data-v-9137313b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.sc-actions[data-v-9137313b] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
}
.sc-form[data-v-9137313b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.sc-form__intro[data-v-9137313b] {
  margin: 0 0 var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.sc-form__label[data-v-9137313b] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
}
.sc-form__hint[data-v-9137313b],
.sc-form__preview[data-v-9137313b] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.sc-form__preview code[data-v-9137313b] {
  color: var(--ink-secondary);
  word-break: break-all;
}
.sc-form__preview--off[data-v-9137313b] {
  color: var(--ink-muted);
}

/* 지금 값이 어디서 온 것인지 — 관리 화면 지정인지 스크래퍼 환경변수인지 */
.sc-form__source[data-v-9137313b] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

.companies-config[data-v-27d87b09] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 서브탭 본문 구획 (수집 작업 / 모니터링) — 파싱 탭(AdminParsingConfig)과 같은 규칙 */
.section[data-v-27d87b09] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* 목록 화면(ListScreen)이 아닌 패널은 좌우 여백을 여기서 준다 */
.section--pad[data-v-27d87b09] {
  padding: 0 var(--pad-page-x) var(--space-roomy);
  /* ⛔ .section 이 overflow:hidden 이라 내용이 넘치면 잘린 채 스크롤도 안 생긴다.
     목록 서브탭은 ListScreen 이 자기 안에서 스크롤해 문제가 없지만, 설정처럼
     그냥 늘어나는 화면은 여기서 스크롤을 열어 줘야 한다.
     (2026-08-09: 수집 설정이 4개에서 11개로 늘자 아래쪽이 통째로 잘려 안 보였다)
     ⛔ `display: block` 을 반드시 되돌린다 — .section 이 flex 라 그대로 두면 자식이 부모 높이에
     눌려 scrollHeight 가 안 늘고, 스크롤바가 안 생긴 채 자투리 높이만 남는다
     (2026-09-01 실사고: 모니터링 서브탭이 789px 에 눌려 최근 회차 목록이 259px 였다.
      파싱·추출 모니터링의 .section--scroll 이 같은 줄을 갖고 있는 이유가 이것이다). */
  display: block;
  overflow-y: auto;
}

/* ListScreen 이 남는 공간을 모두 차지하고 내부 스크롤 */
.companies-config[data-v-27d87b09] .list-screen {
  flex: 1;
  min-height: 0;
  /* 루트 상단 여백은 서브탭이 소유하므로 0 */
  padding-top: 0;
}

/* 마스터데이터 본문 — 트리가 자체 스크롤되도록 flex 컬럼 */
.masterdata-body[data-v-27d87b09] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 트리 뷰 */
.tree-loading[data-v-27d87b09], .tree-empty[data-v-27d87b09] {
  padding: var(--space-wide);
  text-align: center;
  color: var(--ink-secondary);
}
/* 트리 컬럼 폭 — 헤더 행과 데이터 행이 공유 (테이블처럼 세로 정렬) */
.tree-col--count[data-v-27d87b09] {
  /* 회사 수 — 폭 고정·우측 정렬(숫자 정렬 표준) */
  flex-shrink: 0;
  width: 6rem;
  text-align: right;
}
.tree-col--actions[data-v-27d87b09] {
  /* 작업 — 레벨별 버튼 수가 달라도(L1·L2 3개 / L3 2개) 3버튼 폭으로 고정 */
  flex-shrink: 0;
  width: calc(3 * var(--h-control-sm) + 2 * var(--space-tight));
}
.tree-col--name[data-v-27d87b09] {
  /* 이름 — 남는 폭을 모두 차지. 들여쓰기(depth)는 여기에 패딩으로 부여 */
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* 컬럼 헤더 행 — 본문 스크롤 시 위에 고정 */
.tree-header[data-v-27d87b09] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.tree-header .tree-col--count[data-v-27d87b09] { text-align: right;
}
.tree-header .tree-col--actions[data-v-27d87b09] { text-align: center;
}
.tree[data-v-27d87b09] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.tree-node[data-v-27d87b09] {
  border-bottom: var(--line-strong);
  /* flex 컨테이너(.tree) 안에서 줄어들지 않게 — 줄어들면 행이 잘리고 스크롤이 안 됨 */
  flex-shrink: 0;
}
.tree-node[data-v-27d87b09]:last-child {
  border-bottom: none;
}
.tree-children[data-v-27d87b09] {
  border-top: var(--line-strong);
}
.tree-children .tree-node[data-v-27d87b09] {
  border-bottom: var(--line-strong);
}
.tree-row[data-v-27d87b09] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row-dense);
  cursor: default;
  transition: background var(--motion-fast);
}
.tree-row[data-v-27d87b09]:hover {
  background: var(--bg-hover);
}
.tree-row--l1[data-v-27d87b09] {
  cursor: pointer;
  font-weight: var(--weight-title);
  font-size: var(--size-body);
}
.tree-row--l2[data-v-27d87b09] {
  cursor: pointer;
  font-weight: var(--weight-label);
  font-size: var(--size-label);
}
.tree-row--l3[data-v-27d87b09] {
  font-size: var(--size-label);
}
/* 들여쓰기(depth) 는 이름 컬럼에만 — 회사 수/작업 컬럼은 깊이와 무관하게 같은 x 에 정렬 */
.tree-row--l2 .tree-col--name[data-v-27d87b09] { padding-left: var(--space-wide);
}
.tree-row--l3 .tree-col--name[data-v-27d87b09] { padding-left: var(--space-wide);
}
.tree-row--empty[data-v-27d87b09] {
  opacity: 0.5;
}
.tree-toggle[data-v-27d87b09] {
  width: 16px;
  text-align: center;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.tree-leaf-spacer[data-v-27d87b09] {
  width: 16px;
  flex-shrink: 0;
}
.tree-icon[data-v-27d87b09] {
  font-size: var(--icon-label);
  color: var(--ink-secondary);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.tree-row--l1 .tree-icon[data-v-27d87b09] { color: var(--ink-brand);
}
.tree-row--l2 .tree-icon[data-v-27d87b09] { color: var(--ink-secondary);
}
.tree-row--l3 .tree-icon[data-v-27d87b09] { color: var(--ink-muted); font-size: var(--icon-marker);
}
.tree-label[data-v-27d87b09] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-abbr[data-v-27d87b09] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
  flex-shrink: 0;
}
.tree-meta[data-v-27d87b09] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}
.tree-actions[data-v-27d87b09] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 회사 셀 (테이블형) */
.company-cell[data-v-27d87b09] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}

/* 회사 카드 (카드형) */
.company-card[data-v-27d87b09] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
  width: 100%;
}
.company-card__title[data-v-27d87b09] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.company-card__name[data-v-27d87b09] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  word-break: break-word;
}
.company-card__meta[data-v-27d87b09] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph) var(--gap-stack);
  flex-wrap: wrap;
}
.company-card__metaitem[data-v-27d87b09] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.company-card__actions[data-v-27d87b09] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  margin-top: var(--gap-glyph);
}
.text-muted[data-v-27d87b09] { color: var(--ink-muted); font-size: var(--size-label);
}

/* 액션 — icon-only AppButton 묶음 */
.action-btns[data-v-27d87b09] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}

/* 처리 중 오버레이 */
.modal-overlay[data-v-27d87b09] {
  position: fixed; inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
}
.processing-overlay[data-v-27d87b09] {
  z-index: var(--z-toast);
}
.processing-card[data-v-27d87b09] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
  padding: var(--pad-hero);
  background: var(--bg-card);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-float);
}
.processing-icon[data-v-27d87b09] {
  font-size: var(--icon-lead);
  color: var(--ink-brand);
}
.processing-msg[data-v-27d87b09] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-primary);
  text-align: center;
}

/* 폼 */
.form-group[data-v-27d87b09] {
  margin-bottom: var(--gap-stack);
  flex: 1;
}
.form-group label[data-v-27d87b09] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-input[data-v-27d87b09] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
  height: var(--h-control-md);
  box-sizing: border-box;
}
.form-input[data-v-27d87b09]:focus {
  outline: none;
  border-color: var(--ink-brand);
}
.form-row[data-v-27d87b09] {
  display: flex;
  gap: var(--gap-stack);
}
.form-error[data-v-27d87b09] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: block;
  margin-top: var(--gap-glyph);
}
.checkbox-label[data-v-27d87b09] {
  display: flex !important;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
}
.confirm-msg[data-v-27d87b09] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-primary);
  line-height: var(--line-normal);
}
/* 스케줄 트리거 — AppButton 의 align="between" + icon-end 로 폼 필드형 모양.
   여기선 폼 필드 느낌의 여백·글자 굵기만 보탠다. */
.schedule-btn[data-v-27d87b09] {
  margin-top: var(--gap-glyph);
  font-weight: var(--weight-body);
}
@media (max-width: 768px) {
.form-row[data-v-27d87b09] {
    flex-direction: column;
    gap: 0;
}
}

.form-group[data-v-41f37550] {
  margin-bottom: var(--gap-stack);
  flex: 1;
}
.form-group--narrow[data-v-41f37550] { max-width: 120px;
}
.form-group label[data-v-41f37550] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.code-mono[data-v-41f37550] {
  font-family: var(--font-mono);
  font-size: var(--size-label);
}
.form-hint[data-v-41f37550] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}
.form-row[data-v-41f37550] {
  display: flex;
  gap: var(--gap-stack);
}
.form-error[data-v-41f37550] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: block;
  margin-bottom: var(--gap-inline);
}
.info-notice[data-v-41f37550] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-left: var(--line-accent) solid var(--ink-muted);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.info-notice i[data-v-41f37550] {
  color: var(--ink-muted);
  flex-shrink: 0;
}

/* 컬러 피커: 한 줄 */
.color-inline[data-v-41f37550] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: nowrap;
}
.color-swatch[data-v-41f37550] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  flex-shrink: 0;
}
.color-swatch[data-v-41f37550]:hover { transform: scale(1.2);
}
.color-swatch--selected[data-v-41f37550] {
  border-color: var(--ink-primary);
  box-shadow: 0 0 0 var(--line-w) var(--bg-page), 0 0 0 2.5px var(--ink-primary);  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
}
.color-divider[data-v-41f37550] {
  width: 1px;
  height: 16px;
  background: var(--line-color);
  margin: 0 var(--gap-glyph);
  flex-shrink: 0;
}
.color-preview[data-v-41f37550] {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  flex-shrink: 0;
}
/* 외형/높이는 AppInput(size="sm")이 소유 — 여기선 폭과 코드용 monospace 폰트만 */
.form-input--hex[data-v-41f37550] {
  width: 80px;
  font-family: var(--font-mono);
}

/* 아이콘 프리셋: 대표 아이콘 그리드 */
.icon-presets[data-v-41f37550] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  margin-bottom: var(--gap-inline);
}
.icon-swatch[data-v-41f37550] {
  width: var(--h-control-md);
  height: var(--h-control-md);
  min-width: var(--h-control-md);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
}
.icon-swatch[data-v-41f37550]:hover {
  border-color: var(--ink-brand);
  color: var(--ink-primary);
}
.icon-swatch--selected[data-v-41f37550] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
}

/* 아이콘 입력: 미리보기 + 클래스 입력 */
.icon-inline[data-v-41f37550] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.icon-preview[data-v-41f37550] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control-md);
  height: var(--h-control-md);
  flex-shrink: 0;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
}
@media (max-width: 768px) {
.form-row[data-v-41f37550] {
    flex-direction: column;
    gap: 0;
}
.form-group--narrow[data-v-41f37550] { max-width: none;
}
}

.form-error[data-v-f17140b1] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: block;
  margin-bottom: var(--gap-inline);
}
.bulk-selected-list[data-v-f17140b1] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  margin-bottom: var(--gap-stack);
}
.bulk-tag[data-v-f17140b1] {
  display: inline-block;
  padding: var(--space-tight) var(--space-snug);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.form-group[data-v-f17140b1] {
  margin-bottom: var(--gap-stack);
}
.form-group label[data-v-f17140b1] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-hint[data-v-f17140b1] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}

.action-btns[data-v-23f665dd] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.display-name[data-v-23f665dd] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}

.action-btns[data-v-9e6d88ae] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.dt-abbr[data-v-9e6d88ae] {
  margin-left: var(--gap-inline);
  vertical-align: middle;
}
.dt-lock[data-v-9e6d88ae] {
  font-size: var(--size-meta);
  margin-right: var(--gap-glyph);
}
.dt-plain[data-v-9e6d88ae] {
  color: var(--ink-secondary);
}
.dt-usage[data-v-9e6d88ae] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.dt-usage__section[data-v-9e6d88ae] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.dt-usage__label[data-v-9e6d88ae] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.dt-usage__options[data-v-9e6d88ae] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.dt-usage__hint[data-v-9e6d88ae] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
}

.confirm-msg[data-v-b0a9dcf2] {
  margin: 0;
  font-size: var(--size-lead);
  color: var(--ink-primary);
  line-height: var(--line-normal);
}
.confirm-warn[data-v-b0a9dcf2] {
  margin-top: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-danger-soft);
  border: var(--line-w) solid var(--ink-danger);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  color: var(--ink-danger);
  font-size: var(--size-label);
}
.confirm-warn p[data-v-b0a9dcf2] { margin: 0 0 var(--gap-glyph) 0;
}
.confirm-warn p[data-v-b0a9dcf2]:last-child { margin: 0; opacity: 0.85;
}

.action-btns[data-v-cc7c3215] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.text-muted[data-v-cc7c3215] { color: var(--ink-muted);
}
.text-sm[data-v-cc7c3215] { font-size: var(--size-label);
}
.text-xs[data-v-cc7c3215] { font-size: var(--size-meta);
}
.col-desc[data-v-cc7c3215] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  display: block;
  min-width: 0;
}
.tag-code[data-v-cc7c3215] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.system-lock[data-v-cc7c3215] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}

/* 토글 스위치 */
/* 설명 칸 — 접기 단추 + 한 줄 미리보기 */
.col-desc[data-v-cc7c3215] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.col-desc__text[data-v-cc7c3215] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 펼친 설명 — 행 전체 폭 */
.row-desc[data-v-cc7c3215] {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 최종수정 — 한 줄. 크기는 표 셀 기본을 상속하고, 시각만 상대 사다리로 곁들인다. */
.who-when[data-v-cc7c3215] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  min-width: 0;
}
.who-when__when[data-v-cc7c3215] { font-size: var(--font-rel-sm); color: var(--ink-muted);
}

.el-lead[data-v-195e3cdd] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.el-num[data-v-195e3cdd] {
  font-variant-numeric: tabular-nums;
}
.row-actions[data-v-195e3cdd] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
}

.ex-form[data-v-2c6189de] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ex-form__row[data-v-2c6189de] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.ex-form__label[data-v-2c6189de] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 네이티브 파일 입력은 감춘다 — 누르는 것은 옆의 버튼이다 */
.ex-form__file[data-v-2c6189de] {
  display: none;
}
.ex-form__hint[data-v-2c6189de],
.ex-lead[data-v-2c6189de] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ex-num[data-v-2c6189de] {
  font-variant-numeric: tabular-nums;
}

.ex-form[data-v-cd6c1612] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ex-form__row[data-v-cd6c1612] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.ex-form__label[data-v-cd6c1612] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

/* 네이티브 파일 입력은 감춘다 — 누르는 것은 옆의 버튼이다 */
.ex-form__file[data-v-cd6c1612] {
  display: none;
}

/* 옆 컨트롤과 같은 껍데기 — 혼자 맨몸이면 붕 떠 보인다 */
.ex-form__toggle[data-v-cd6c1612] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-height: var(--h-control-md);
  padding: 0 var(--space-snug);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  cursor: pointer;
}
.ex-form__hint[data-v-cd6c1612],
.ex-lead[data-v-cd6c1612] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.ex-num[data-v-cd6c1612] {
  font-variant-numeric: tabular-nums;
}

.ext[data-v-bcedde5e] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--gap-inline);
}

/* ⚠️ 이 두 줄을 빼면 안쪽 목록이 스크롤되지 않는다 — 높이를 물려주지 못해
   자식이 제 내용만큼 늘어나고, 굴릴 것이 없어진다(부품정보 탭에서 겪은 것과 같은 사고). */
.ext__pane[data-v-bcedde5e] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.code-mgmt[data-v-82b77c5b] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 서브탭 컨텐츠 — 내부 ListScreen 이 남는 공간을 채우고 자체 스크롤 */
.section[data-v-82b77c5b] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ListScreen 루트 상단 여백은 서브탭이 소유하므로 0 */
.section[data-v-82b77c5b] .list-screen {
  flex: 1;
  min-height: 0;
  padding-top: 0;
}

.fc__name[data-v-53681121] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.fc__code[data-v-53681121] {
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-secondary);
}
.fc__cell-text[data-v-53681121] { color: var(--ink-secondary);
}
.fc__name-btn[data-v-53681121] { font-weight: var(--weight-label);
}
.fc__tags[data-v-53681121] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
}
.fc__row-actions[data-v-53681121] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
  width: 100%;
}
.fc__who[data-v-53681121] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.fc__who-name[data-v-53681121] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc__who-id[data-v-53681121] { color: var(--ink-muted); font-size: var(--font-rel-sm);
}
.fc__when[data-v-53681121] {
  /* ⛔ 한 줄로. 말줄임(…)이 뜨지 않게 칸을 넉넉히 잡았다 — 정확한 시각은 title 에 있다. */
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-muted);
}
/* 삭제는 왼쪽, 나머지는 오른쪽 */
.fc__gap[data-v-53681121] { flex: 1;
}
.fc__cell-muted[data-v-53681121] { color: var(--ink-muted);
}
.fc__check-none[data-v-53681121] { display: inline-block;
}
.fc__bulk[data-v-53681121] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

/* ⛔ 여기에 padding 을 주지 않는다 — 이 폼은 늘 모달 본문 안에 놓이고,
   본문(.app-modal__body)이 이미 좌우 여백을 물린다. 한 번 더 주면 머리글·바닥글보다
   본문만 안으로 들어가 여백이 어긋난다. */
.fc__form[data-v-53681121] {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
/* ⛔ 모달은 열려 있는 동안 크기가 변하지 않아야 한다 — 조건부 칸을 두지 않고,
   오류 줄도 늘 자리를 잡아 떠도 높이가 변하지 않게 한다. */
.fc__form--modal[data-v-53681121] {
  overflow: visible;
  gap: var(--gap-stack);
  /* 본문이 짧으면 드롭다운이 본문(overflow-y:auto) 아래로 잘린다 — 두 모달을 같은 높이로 못 박는다.
     값은 어림잡지 않고 가장 높은 상태(팩터 추가)를 실제로 띄워 잰 값이다. */
  min-height: 27rem;
}
.fc__lead[data-v-53681121] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
/* 탭으로 가른 팝업 — 탭 바는 제 자리를 갖고, 칸은 아래 판 안에서만 바뀐다. */
.fc__form--tabbed[data-v-53681121] {
  gap: var(--gap-inline);
}
/* ⛔ 탭을 옮겨도 팝업 높이가 그대로여야 한다(사용자 지시 2026-08-22).
   가장 높은 탭을 실제로 띄워 잰 값이다 — 어림잡은 값이 아니다:
     2026-08-22 기본 392px · 값 범위 188px · 값 확보 243px → 392px(24.5rem)
     2026-09-07 재측정 **값 확보 686px** → 686px(42.875rem)
     2026-09-12 재측정 **값 확보 759px** → 759px(47.4375rem)  ← 「비면 확인」 한 칸이 들어왔다
   ⛔ 그 사이 「값 확보」 탭에 **팩터 추출 규칙**(방식 라디오 넷·규칙 고르개·매개변수)이 들어와
      가장 높은 탭이 «기본»에서 «값 확보»로 바뀌었는데 이 값이 따라가지 않아, 탭을 옮길 때마다
      팝업이 **294px** 들썩였다(623 ↔ 917, lint:modal-size 실측 2026-09-04·09-07 동일).
      ⛔ 그 탭에 무엇을 더하면 **여기 값도 다시 재서 고친다** — 안 그러면 조용히 다시 흔들린다.
   ⛔ 여기에 overflow 를 걸지 않는다 — 안의 드롭다운(AppSelect)이 잘린다.
      길이가 들쭉날쭉한 것은 그 자리에서 재운다(아래 .fc__items 의 max-height). */
.fc__panes[data-v-53681121] {
  min-height: 47.4375rem;  /* css-ignore: 가장 높은 탭의 실측값(759px) — 사다리로 접히지 않는다 */
  display: flex;
  flex-direction: column;
}
.fc__pane[data-v-53681121] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  flex: 1;
  min-height: 0;
}
/* 탭 높이가 가장 높은 탭에 못 박혀 있어 짧은 탭에는 빈 자리가 남는다 —
   글을 길게 적는 칸(추출 규칙)은 그 자리를 끝까지 쓴다. */
.fc__field--grow[data-v-53681121] { flex: 1; min-height: 0;
}
/* 추출 방식 — 라벨 아래에 그 방식이 무슨 뜻인지 한 줄. 넷이 두 줄로 선다. */
.fc__modes[data-v-53681121] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-inline);
}
.fc__modes[data-v-53681121] .app-radio { align-items: flex-start;
}
.fc__modes[data-v-53681121] .app-radio__label { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.fc__mode-label[data-v-53681121] { font-weight: var(--weight-label); color: var(--ink-primary);
}
/* 고른 규칙의 설명 — 길이가 규칙마다 달라도 자리는 그대로(모달 높이 불변). */
.fc__desc--fixed[data-v-53681121] { height: 4.5rem; overflow-y: auto;
}
.fc__extract[data-v-53681121] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.fc__none[data-v-53681121] { color: var(--ink-muted);
}
/* ⛔ 여기서 height: 100% 는 안 듣는다 — 판의 높이가 min-height 에서 오는 터라
   백분율이 기댈 확정 높이가 없다(실측: 3줄 그대로인 81px). 늘리는 것은 flex 로 맡긴다. */
.fc__field--grow[data-v-53681121] .app-textarea { flex: 1; min-height: 0;
}
/* 짧은 칸 둘은 한 줄에 — 세로로 길어져 확인 버튼이 화면 밖으로 밀리지 않게 */
.fc__row[data-v-53681121] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-stack);
}
@media (max-width: 480px) {
.fc__row[data-v-53681121] { grid-template-columns: 1fr;
}
}
.fc__field[data-v-53681121] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.fc__label[data-v-53681121] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-strong);
}
.fc__req[data-v-53681121] {
  margin-left: var(--gap-glyph);
  color: var(--ink-danger);
  font-style: normal;
}
.fc__desc[data-v-53681121] { margin: 0; font-size: var(--size-meta); color: var(--ink-muted);
}
.fc__items[data-v-53681121] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  /* 자료형 항목이 수십 개여도 팝업이 늘어나지 않게 — 넘치면 이 칸 안에서만 구른다 */
  max-height: 9rem;
  overflow-y: auto;
}
.fc__row2[data-v-53681121] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inline);
}
.fc__sub[data-v-53681121] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}

/* 자료형 칸 앞 그림 — 글자 옆에 곁들이는 표식이라 본문보다 한 단 작다. */
.fc__type-icon[data-v-53681121] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.fc__type-facets[data-v-53681121] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.fc__error[data-v-53681121] {
  margin: 0;
  min-height: var(--size-title-sm);
  font-size: var(--size-meta);
  color: var(--ink-danger);
}
.fc__actions[data-v-53681121] { display: flex; justify-content: flex-end; padding-top: var(--space-snug);
}


.fdt__name[data-v-e4bb3e96] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.fdt__code[data-v-e4bb3e96] {
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-secondary);
}
.fdt__cell[data-v-e4bb3e96] { color: var(--ink-secondary);
}
.fdt__when[data-v-e4bb3e96] {
  /* ⛔ 한 줄로. 말줄임(…)이 뜨지 않게 칸을 넉넉히 잡았다 — 정확한 시각은 title 에 있다. */
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-muted);
}
.fdt__who[data-v-e4bb3e96] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.fdt__who-name[data-v-e4bb3e96] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdt__who-id[data-v-e4bb3e96] { color: var(--ink-muted); font-size: var(--font-rel-sm);
}
.fdt__name-btn[data-v-e4bb3e96] { font-weight: var(--weight-label);
}
.fdt__row-actions[data-v-e4bb3e96] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
  width: 100%;
}
.fdt__check-none[data-v-e4bb3e96] { display: inline-block;
}
.fdt__form[data-v-e4bb3e96] {
  padding: var(--space-cozy);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
/* ⛔ 모달은 열려 있는 동안 크기가 변하지 않아야 한다 — 조건부 칸을 두지 않고,
   오류 줄도 늘 자리를 잡아 떠도 높이가 변하지 않게 한다. */
.fdt__form--modal[data-v-e4bb3e96] {
  overflow: visible;
  padding: 0;
  min-height: 21rem;
}
.fdt__lead[data-v-e4bb3e96] {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.fdt__row[data-v-e4bb3e96] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-stack);
}
@media (max-width: 480px) {
.fdt__row[data-v-e4bb3e96] { grid-template-columns: 1fr;
}
}
.fdt__field[data-v-e4bb3e96] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.fdt__label[data-v-e4bb3e96] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-strong);
}
.fdt__req[data-v-e4bb3e96] { margin-left: var(--gap-glyph); color: var(--ink-danger); font-style: normal;
}
.fdt__readonly[data-v-e4bb3e96] { margin: 0; font-size: var(--size-body); color: var(--ink-primary);
}
.fdt__desc[data-v-e4bb3e96] { margin: 0; font-size: var(--size-meta); color: var(--ink-muted);
}
.fdt__error[data-v-e4bb3e96] { margin: 0; min-height: var(--size-title-sm); font-size: var(--size-meta); color: var(--ink-danger);
}
.fdt__none[data-v-e4bb3e96] { margin: 0; font-size: var(--size-meta); color: var(--ink-muted);
}
/* 삭제는 왼쪽, 나머지는 오른쪽 */
.fdt__gap[data-v-e4bb3e96] { flex: 1;
}

.fxr__name[data-v-ce042d3a] { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.fxr__code[data-v-ce042d3a] { font-family: var(--font-mono); font-size: var(--font-rel-code); color: var(--ink-secondary);
}
.fxr__params[data-v-ce042d3a] { display: block; font-family: var(--font-mono); font-size: var(--font-rel-code); color: var(--ink-muted);
}
.fxr__used[data-v-ce042d3a] { display: inline-flex; flex-wrap: wrap; gap: var(--gap-glyph);
}
.fxr__none[data-v-ce042d3a] { color: var(--ink-muted);
}
/* ⛔ 모달은 열려 있는 동안 크기가 변하지 않아야 한다 — 조건부 칸이 없고 오류 줄도 늘 자리를 잡는다. */
.fxr__form[data-v-ce042d3a] { display: flex; flex-direction: column; gap: var(--gap-stack); min-height: 26rem;
}
.fxr__field[data-v-ce042d3a] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.fxr__field--grow[data-v-ce042d3a] { flex: 1;
}
.fxr__lead[data-v-ce042d3a] { margin: 0; display: flex; align-items: center; gap: var(--gap-inline); font-size: var(--size-meta); color: var(--ink-muted);
}
.fxr__label[data-v-ce042d3a] { font-size: var(--size-meta); color: var(--ink-secondary); font-weight: var(--weight-strong);
}
.fxr__desc[data-v-ce042d3a] { margin: 0; font-size: var(--size-meta); color: var(--ink-muted);
}
.fxr__error[data-v-ce042d3a] { margin: 0; min-height: var(--size-title-sm); font-size: var(--size-meta); color: var(--ink-danger);
}
.fxr__mono[data-v-ce042d3a] textarea { font-family: var(--font-mono);
}

.action-btns[data-v-69d44697] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.text-muted[data-v-69d44697] { color: var(--ink-muted);
}
.text-sm[data-v-69d44697] { font-size: var(--size-label);
}
.text-xs[data-v-69d44697] { font-size: var(--size-meta);
}
.nowrap[data-v-69d44697] { white-space: nowrap;
}
.col-desc[data-v-69d44697] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  display: block;
  min-width: 0;
}

/* 색상 도트 */
.color-dot[data-v-69d44697] {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: var(--line-strong);
  vertical-align: middle;
}

/* 콘텐츠태그 코드 */
.tag-code[data-v-69d44697] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
}
.system-lock[data-v-69d44697] {
  color: var(--ink-muted);
  font-size: var(--size-meta);
}

/* who/when */

/* 토글 스위치 */
/* 설명 칸 — 접기 단추 + 한 줄 미리보기 */
.col-desc[data-v-69d44697] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.col-desc__text[data-v-69d44697] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 펼친 설명 — 행 전체 폭 */
.row-desc[data-v-69d44697] {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 최종수정 — 한 줄. 크기는 표 셀 기본을 상속하고, 시각만 상대 사다리로 곁들인다. */
.who-when[data-v-69d44697] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  min-width: 0;
}
.who-when__when[data-v-69d44697] { font-size: var(--font-rel-sm); color: var(--ink-muted);
}

.part-reg-cell[data-v-c4618996] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* 원본: ParsingJobProductCell.vue 의 .product-cell__catalog (그쪽은 ParsingJobTodosCell 의 .todo-item 이 원본)
   ⛔ 높이는 «칸이» 정한다(--h-control-sm) — 안에 든 ✕ 가 높이를 정하지 못하게 xs 로 낮춰 둔다. */
.part-reg-cell__card[data-v-c4618996] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: var(--h-control-sm);
  padding: 0 var(--space-snug);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  /* ⛔ 왼쪽에 굵은 의미색 띠를 대지 않는다(사용자 지시 2026-09-12) — 등록됐다는 것은 **글자색**이 말한다. */
  color: var(--ink-success);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  white-space: nowrap;
  transition: all var(--motion-fast);
}
.part-reg-cell__card--link[data-v-c4618996] { cursor: pointer;
}
.part-reg-cell__card--link[data-v-c4618996]:hover {
  background: var(--bg-hover);
  border-color: var(--ink-brand);
}
.part-reg-cell__id[data-v-c4618996] { font-variant-numeric: tabular-nums;
}
/* ⛔ ✕ 는 번호의 «곁 글리프» 가 아니라 **이웃 컨트롤**이다 — 사이는 `--gap-inline`(8px)이고
   카드 안여백과 같은 값이라야 좌우가 고르다. 카드의 `gap` 은 🏷 아이콘용 4px 이므로 여기서
   한 단(4px) 더한다(실사고 2026-09-12: 4px 이라 `#182138✕` 가 번호에 붙어 보였다).
   원본: ParsingJobTodosCell 의 .todo-item__assignee 가 같은 방식으로 margin-left 를 더한다. */
.part-reg-cell__toggle[data-v-c4618996] { color: var(--ink-muted); margin-left: var(--gap-glyph);
}
.part-reg-cell__toggle[data-v-c4618996]:hover { color: var(--ink-danger);
}
.part-reg-cell__register[data-v-c4618996] { border: var(--line-w) dashed var(--line-color);
}
/* 등록 불가 사유 — 버튼이 아니라 설명이므로 회색 텍스트로 둔다. */
/* 아래에 --issues 갈래가 색만 덮어쓴다(같은 모양·같은 자리). */
.part-reg-cell__blocked[data-v-c4618996] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-muted);
  font-size: var(--size-label);
  white-space: nowrap;
}
.part-reg-cell__blocked--issues[data-v-c4618996] { color: var(--ink-danger);
}
.part-reg-cell__none[data-v-c4618996] { color: var(--ink-muted);
}

/* 오른쪽 정렬 — col-issues(align:right)와 카드 지표 줄에서 같은 자리에 선다(원본과 같은 짜임). */
.eic[data-v-d75beacd] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.eic__none[data-v-d75beacd] { color: var(--ink-muted);
}

/* 확인 사항 수 자체가 링크(제목처럼) — 눌러서 그 부품의 확인 탭을 연다. */
.eic__num[data-v-d75beacd] {
  height: auto;
  padding: var(--space-tight) var(--space-tight);
  font-variant-numeric: tabular-nums;
}
.eic__num[data-v-d75beacd] .app-btn__label {
  color: var(--ink-primary);
  font-weight: var(--weight-label);
}
.eic__num[data-v-d75beacd]:hover .app-btn__label,
.eic__num[data-v-d75beacd]:focus-visible .app-btn__label {
  color: var(--ink-brand);
  text-decoration: underline;
}
.eic__num--has[data-v-d75beacd] .app-btn__label {
  color: var(--ink-warning);
  font-weight: var(--weight-title);
}
/* 심각 건이 남은 줄 — 등록이 막힌 자리다. 경고색(--has)보다 뒤에 선언해 이긴다. */
.eic__num--blocked[data-v-d75beacd] .app-btn__label,
.eic__num--blocked.eic__num--has[data-v-d75beacd] .app-btn__label {
  color: var(--ink-danger);
  font-weight: var(--weight-title);
}
.eic__num--blocked[data-v-d75beacd]:hover .app-btn__label,
.eic__num--blocked[data-v-d75beacd]:focus-visible .app-btn__label {
  color: var(--ink-danger);
}
.eic__blocked-icon[data-v-d75beacd] {
  color: var(--ink-danger);
  margin-right: var(--gap-glyph);
  font-size: var(--icon-marker);
}
.eic__label[data-v-d75beacd] { margin-right: var(--gap-glyph);
}
/* 카드 변형 — 작은 글자(강조색은 위 규칙이 그대로 이긴다) */
.eic__num--card[data-v-d75beacd] .app-btn__label { font-size: var(--size-meta);
}
.eic__num--card.eic__num--has[data-v-d75beacd] .app-btn__label { color: var(--ink-warning);
}

.ei-overview[data-v-fbd96e5b] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ei-overview__header[data-v-fbd96e5b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-tight);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.ei-overview__counts[data-v-fbd96e5b] {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
  font-size: var(--size-label);
  flex-wrap: wrap;
}
.ei-overview__count[data-v-fbd96e5b] { display: inline-flex; align-items: center; gap: var(--gap-glyph);
}
.ei-overview__count--error[data-v-fbd96e5b] { color: var(--ink-danger);
}
.ei-overview__count--warning[data-v-fbd96e5b] { color: var(--ink-warning);
}
.ei-overview__count-label[data-v-fbd96e5b] { font-size: var(--size-meta); opacity: 0.85;
}
.ei-overview__empty-count[data-v-fbd96e5b] { color: var(--ink-muted); font-size: var(--size-label);
}
.ei-overview__doc-count[data-v-fbd96e5b] { color: var(--ink-muted); font-size: var(--size-label);
}
.ei-overview__action-label[data-v-fbd96e5b] { display: none;
}
@media (min-width: 480px) {
.ei-overview__action-label[data-v-fbd96e5b] { display: inline;
}
}
.ei-overview__filter-bar[data-v-fbd96e5b] {
  padding: var(--space-snug) var(--space-tight);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.ei-overview__truncated[data-v-fbd96e5b] {
  display: flex; align-items: center; gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-info);
  background: var(--bg-info-soft);
  border-bottom: var(--line-strong);
}
.ei-overview__state[data-v-fbd96e5b] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-wide);
  gap: var(--gap-inline); color: var(--ink-muted); font-size: var(--size-body);
}
.ei-overview__state--error[data-v-fbd96e5b] { color: var(--ink-danger);
}

/* 리스트가 본문 내부 스크롤 영역 — 헤더/검색바(flex-shrink:0)는 고정, 리스트만 스크롤.
   ListBody 와 동일 패턴(flex:1 + min-height:0 + overflow-y:auto)이라야 모바일에서도 스크롤됨. */
.ei-overview__list[data-v-fbd96e5b] {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ei-overview__group-header[data-v-fbd96e5b] {
  display: flex; align-items: center; gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-bottom: var(--line-strong);
  cursor: pointer;
  font-weight: var(--weight-title);
  font-size: var(--size-label);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ei-overview__group-header[data-v-fbd96e5b]:hover { background: var(--bg-hover);
}
.ei-overview__group-header--error[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-danger);
}
.ei-overview__group-header--warning[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-warning);
}
.ei-overview__group-header--info[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-info);
}
.ei-overview__group-toggle[data-v-fbd96e5b] { font-size: var(--size-meta); color: var(--ink-muted); width: 12px;
}
.ei-overview__group-title[data-v-fbd96e5b] { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ei-overview__group-count[data-v-fbd96e5b] { color: var(--ink-muted); font-weight: normal; font-size: var(--size-meta); flex-shrink: 0;
}
.ei-overview__item[data-v-fbd96e5b] {
  border-bottom: var(--line-strong);
  padding: var(--space-tight) var(--space-snug) var(--space-tight) var(--space-snug);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  transition: background-color var(--motion-fast);
}
.ei-overview__item[data-v-fbd96e5b]:hover { background: var(--bg-hover);
}
.ei-overview__item--error[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-danger);
}
.ei-overview__item--warning[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-warning);
}
.ei-overview__item--info[data-v-fbd96e5b] { border-left: var(--line-accent) solid var(--ink-info);
}
.ei-overview__item--indented[data-v-fbd96e5b] { padding-left: var(--space-wide);
}
.ei-overview__item-body[data-v-fbd96e5b] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0; flex: 1; cursor: pointer;
}
.ei-overview__go-btn[data-v-fbd96e5b] { flex-shrink: 0; align-self: center;
}
.ei-overview__message-row[data-v-fbd96e5b] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.ei-overview__page[data-v-fbd96e5b] { font-weight: var(--weight-title); color: var(--ink-secondary); flex-shrink: 0;
}
.ei-overview__message[data-v-fbd96e5b] {
  flex: 1; min-width: 0;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
}
.ei-overview__icon--error[data-v-fbd96e5b] { color: var(--ink-danger);
}
.ei-overview__icon--warning[data-v-fbd96e5b] { color: var(--ink-warning);
}
.ei-overview__icon--info[data-v-fbd96e5b] { color: var(--ink-info);
}
.ei-overview__doc[data-v-fbd96e5b] {
  display: inline-flex; align-items: center; gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.ei-overview__doc-company[data-v-fbd96e5b] { font-weight: var(--weight-title); color: var(--ink-secondary);
}
.ei-overview__doc-product[data-v-fbd96e5b] { color: var(--ink-secondary);
}
/* 문서 ID — 숫자는 한 줄 고정 (부모의 overflow-wrap: anywhere 로 자릿수가 끊기지 않게) */
.ei-overview__doc-id[data-v-fbd96e5b] { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 점진 적재 표식 — 목록 맨 아래에서 다음 묶음을 당기는 중임을 알린다 */
.ei-overview__more[data-v-fbd96e5b] {
  display: flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  padding: var(--pad-card);
  color: var(--ink-muted);
  font-size: var(--size-label);
}


.run-cell-center[data-v-3bebfd67] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
}
.run-cell-center--running[data-v-3bebfd67] {
  gap: var(--gap-glyph);
}
.value-num-btn[data-v-3bebfd67] {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.value-num-btn--has[data-v-3bebfd67] {
  color: var(--ink-primary);
}
.value-num-btn--failed[data-v-3bebfd67] {
  color: var(--ink-danger);
}
.value-num__fail-icon[data-v-3bebfd67] {
  color: var(--ink-danger);
}
.value-num__label[data-v-3bebfd67] {
  margin-right: var(--gap-glyph);
  color: var(--ink-secondary);
}

/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창과 판이 따로 논다.
   실측 2026-08-29: 창 820px 에서 판은 568px 인데 3열(타일 184px)이고, 창 768px 에서는
   곁막대가 접혀 판이 736px 인데 **같은 3열**(240px)이었다 — 창이 좁아질수록 판은 넓어지는데
   열은 거꾸로 갔다. 200px 은 타일의 최대 내용 폭(178px 실측)에 맞춘 값이고,
   ActivityLogs·FeedbackAnalytics 가 이미 쓰는 선례다. */
/* ── 통계 타일 — **원본(AdminParsingJobs)의 .stats-summary/.stat-card 를 값까지 그대로** 옮겼다.
   ⛔ 여기서 크기·테두리·아이콘 모양을 다시 정하지 않는다. 한 번 그랬다가 두 화면이 딴판이 됐다
      (2026-08-29: 값을 --size-display-sm 로 키워 부제가 잘리고, 아이콘 칩이 사라졌다). */
.stats-summary[data-v-3c175097] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-inline);
}
.stat-card[data-v-3c175097] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--pad-tile);
  min-width: 0;
}
.stat-main[data-v-3c175097] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
/* 아이콘은 라벨+값 2줄 높이에 맞춰 세로로 카드 중앙에 정렬 — 아이콘/텍스트 높이 일치 */
.stat-icon[data-v-3c175097] {
  width: var(--h-control-lg);
  height: var(--h-control-lg);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-toolbar);
  color: var(--ink-on-solid);
  flex-shrink: 0;
}
.stat-icon--total[data-v-3c175097]   { background: var(--bg-brand);
}
.stat-icon--extract[data-v-3c175097] { background: var(--bg-purple);
}
.stat-icon--verify[data-v-3c175097]  { background: var(--bg-success);
}
/* ⛔ 타일의 **모든 키**가 면을 가져야 한다 — 하나만 빠지면 그 타일의 아이콘이 면 없이 떠서
   같은 줄에서 혼자 다르게 보인다(실사고 2026-09-12: 「등록 대기」만 네모가 없었다.
   정식 클래스라 `lint:role`·`lint:theme` 어디에도 안 걸린다 — 사용자가 눈으로 찾아냈다). */
.stat-icon--publish[data-v-3c175097] { background: var(--bg-indigo);
}
.stat-icon--assign[data-v-3c175097]  { background: var(--bg-info);
}
.stat-icon--failed[data-v-3c175097]  { background: var(--bg-danger);
}
.stat-icon--active[data-v-3c175097]  { background: var(--bg-warning);
}
.stat-label[data-v-3c175097] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-body[data-v-3c175097] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  min-width: 0;
}
.stat-value[data-v-3c175097] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-none);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-3c175097] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: var(--line-none);
}

/* ── 일괄 진행 — 도는 중에는 단추 대신 이 줄이 선다.
   원본(AdminParsingJobs)의 .bulk-progress 그대로: 진행 막대는 별도 엘리먼트 없이
   배경 그라디언트의 경계를 --bulk-pct 로 민다. ── */
.bulk-progress[data-v-3c175097] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: linear-gradient(to right,
    var(--bg-brand-vivid) var(--bulk-pct, 0%),
    var(--bg-page) var(--bulk-pct, 0%));
  font-size: var(--size-label);
  white-space: nowrap;
}
.bulk-progress__label[data-v-3c175097] { font-variant-numeric: tabular-nums;
}

/* ── 일괄 체크박스 (#check 슬롯) — 원본과 같은 규격 ── */
.row-check[data-v-3c175097] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ink-brand);
}

/* ── ToDo 손보기 메뉴 — 단추를 세로로 쌓는다 ── */
.fej-menu[data-v-3c175097] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.fej-menu__item[data-v-3c175097] {
  justify-content: flex-start;
  width: 100%;
}

/* ── 카드 — 원본(AdminParsingJobs)의 .doc-card* 를 값까지 그대로 옮겼다 ── */
.doc-card[data-v-3c175097] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-glyph);
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.doc-card__title[data-v-3c175097] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
  color: var(--ink-primary);
  /* 말줄임·line-clamp 금지 — 길면 자연 줄바꿈(원본과 같은 규칙) */
  overflow-wrap: anywhere;
}
.doc-card__name--link[data-v-3c175097] {
  cursor: pointer;
}
.doc-card__name--link[data-v-3c175097]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.doc-card__company-row[data-v-3c175097] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.doc-card__sep[data-v-3c175097] {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.doc-card__metrics[data-v-3c175097] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
  min-width: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.doc-card__meta[data-v-3c175097] {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-card__cellrow[data-v-3c175097] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.doc-card__cellrow[data-v-3c175097] > * {
  min-width: 0;
  max-width: 100%;
}

/* ── 목록 칸 ── */
.fej__title[data-v-3c175097] {
  font-weight: var(--weight-label);
}
.fej__title--link[data-v-3c175097] {
  cursor: pointer;
}
.fej__title--link[data-v-3c175097]:hover {
  text-decoration: underline;
  color: var(--ink-brand);
}
.fej__company-link[data-v-3c175097] {
  cursor: pointer;
}
.fej__company-link[data-v-3c175097]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.fej__company[data-v-3c175097] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.fej__last[data-v-3c175097] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.fej__when[data-v-3c175097] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}
.fej__none[data-v-3c175097] {
  color: var(--ink-muted);
}
.fej__num[data-v-3c175097] {
  font-variant-numeric: tabular-nums;
}
.fej__num--zero[data-v-3c175097] {
  color: var(--ink-muted);
}

.es[data-v-d08e04cf] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  min-height: 0;
}
/* ⛔ 파싱 모니터링(.ps-refresh-bar)과 **같은 줄**이다 — 나란히 있는 형제 화면이라 다르면 안 된다.
   예전에는 `justify-content: flex-end` 로 시각이 오른쪽 끝에 붙고 글자도 작은 회색이었다
   (사용자 지적 2026-08-29). 파싱 쪽 값을 그대로 가져온다. */
.es__refresh[data-v-d08e04cf] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-snug) 0;
  margin-bottom: var(--gap-stack);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴 */
.es__refreshed[data-v-d08e04cf] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 못 불러온 때도 같은 자리를 차지한다 — 그래야 새로고침 단추가 안 움직인다 */
.es__stale[data-v-d08e04cf] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-danger);
}
.es__body[data-v-d08e04cf] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  min-width: 0;
}
/* ⛔ 파싱 모니터링(ParsingStatusPanel 의 .ps-summary/.ps-stat)과 **같은 모양**이다 —
   가운데 정렬·상태색 면·같은 간격. 여기만 왼쪽 정렬에 회색 면이면 두 화면이 다른 물건으로 읽힌다
   (사용자 지적 2026-08-29). 바꿀 일이 생기면 두 판을 함께 바꾼다. */
.es__stats[data-v-d08e04cf] {
  display: flex;
  gap: var(--gap-stack);
}
.es__stat[data-v-d08e04cf] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.es__stat--waiting[data-v-d08e04cf] { background: var(--bg-warning-soft);
}
.es__stat--processing[data-v-d08e04cf] { background: var(--bg-brand-soft);
}
.es__stat--failed[data-v-d08e04cf] { background: var(--bg-danger-soft);
}
.es__stat--clickable[data-v-d08e04cf] { cursor: pointer;
}
.es__stat--waiting.es__stat--clickable[data-v-d08e04cf]:hover { border-color: var(--ink-warning);
}
.es__stat--failed.es__stat--clickable[data-v-d08e04cf]:hover { border-color: var(--ink-danger);
}
.es__stat--clickable[data-v-d08e04cf]:focus-visible { outline: var(--focus-ring-width) solid var(--ring-focus); outline-offset: var(--focus-ring-offset);
}
.es__num[data-v-d08e04cf] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  line-height: var(--line-tight);
  font-variant-numeric: tabular-nums;
}
.es__num-max[data-v-d08e04cf] { font-size: var(--font-rel-sm); color: var(--ink-muted);
}
.es__stat--waiting .es__num[data-v-d08e04cf] { color: var(--ink-warning);
}
.es__stat--processing .es__num[data-v-d08e04cf] { color: var(--ink-brand);
}
.es__stat--failed .es__num[data-v-d08e04cf] { color: var(--ink-danger);
}
.es__label[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  word-break: keep-all;
}
.es__eta[data-v-d08e04cf] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.es__eta-basis[data-v-d08e04cf] { color: var(--ink-muted);
}
.es__list[data-v-d08e04cf] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-field);
}
.es__row[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 좁은 폭에서 오른쪽(단계·소요·멈추기)이 제목을 밀지 않고 아랫줄로 접힌다 */
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-stack);
  padding: var(--pad-row-dense);
  border-bottom: var(--line-soft);
  min-width: 0;
}
.es__row[data-v-d08e04cf]:last-child { border-bottom: none;
}
.es__row-main[data-v-d08e04cf] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.es__row-title[data-v-d08e04cf] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.es__row-meta[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.es__fail-reason[data-v-d08e04cf] { color: var(--ink-danger);
}
.es__row-side[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-inline);
  flex: none;
}
/* ⛔ 상태 뱃지는 글자 수가 달라(완료·실패·멈춤) 오른쪽 묶음이 행마다 흔들린다 — 자리를 못 박는다. */
.es__row-side[data-v-d08e04cf] .app-badge { min-width: 3.25rem; justify-content: center;
}
.es__row-num[data-v-d08e04cf] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  /* 숫자 칸도 자리를 고정해 세로로 줄이 맞는다(자릿수가 달라도 흔들리지 않게) */
  min-width: 4.5rem;
  text-align: right;
}
.es__steps[data-v-d08e04cf] { display: flex; gap: var(--gap-glyph); align-items: center;
}
.es__step[data-v-d08e04cf] {
  width: var(--space-roomy);
  height: var(--space-tight);
  border-radius: var(--radius-pill);
  background: var(--line-color);
}
.es__step--on[data-v-d08e04cf] { background: var(--bg-brand-vivid);
}
.es__step-name[data-v-d08e04cf] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.es__block[data-v-d08e04cf] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.es__block-head[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.es__block-title[data-v-d08e04cf] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.es__note[data-v-d08e04cf] { font-size: var(--size-meta); color: var(--ink-muted);
}
.es__chips[data-v-d08e04cf] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph);
} /* component-ignore: AppChip 을 담는 자리 배치만 한다(칩 모양은 AppChip 소관) */
.es__more[data-v-d08e04cf] { font-size: var(--size-meta); color: var(--ink-muted); align-self: center;
}
.es__empty[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--space-band);
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.es__metrics[data-v-d08e04cf] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--gap-inline);
}
.es__metric[data-v-d08e04cf] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-soft);
  border-radius: var(--radius-control);
}
.es__metric-value[data-v-d08e04cf] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.es__metric-label[data-v-d08e04cf] { font-size: var(--size-meta); color: var(--ink-muted);
}

/* ── 추이 머리·차트 두 칸 — 원본(ParsingStatusPanel)의 .ps-trend-head / .ps-chart-section 과 같은 짜임 ── */
.es__trend-head[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.es__trend-range[data-v-d08e04cf] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.es__trend-range-label[data-v-d08e04cf] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}
.es__trend-range-ro[data-v-d08e04cf] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
}
.es__chart-section[data-v-d08e04cf] {
  margin-top: var(--gap-inline);
  display: flex;
  gap: var(--gap-group);
  flex-wrap: wrap;
}
.es__chart-block[data-v-d08e04cf] {
  flex: 1;
  min-width: 240px;
}
.es__chart-block--full[data-v-d08e04cf] {
  flex: 1 1 100%;
  margin-top: var(--gap-stack);
}
.es__chart-title[data-v-d08e04cf] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}

/* ⛔ 조판은 자동파싱(AdminAutoParsing.vue)에서 그대로 가져온다 — 나란히 선 화면이 서로 다른
   카드를 쓰면 그게 곧 다른 화면으로 읽힌다. 클래스 이름만 이 화면 것(amr-)으로 바꿨다. */
.amr-section[data-v-a500c0b2] { margin-bottom: var(--gap-group);
}
.amr-results[data-v-a500c0b2] { display: flex; flex-direction: column; min-height: 0;
}
.amr-when[data-v-a500c0b2] { display: inline-flex; align-items: center; gap: var(--gap-inline); white-space: nowrap;
}
.amr-caret[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--icon-marker);
}
.amr-sub[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--size-meta);
}
.amr-stats-basis[data-v-a500c0b2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  flex-wrap: wrap;
}
.amr-stats-basis i[data-v-a500c0b2] { color: var(--ink-muted);
}
.amr-stats-basis__src[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--size-meta);
}

/* 열 수는 창 폭이 아니라 이 판의 폭이 정한다 — 자동파싱과 같은 값(200px). */
.stats-summary[data-v-a500c0b2] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-inline);
}
.stat-card[data-v-a500c0b2] {
  display: flex; align-items: center; gap: var(--gap-inline);
  background: var(--bg-card); border: 1px solid var(--line-color);
  border-radius: var(--radius-badge); padding: var(--pad-tile); min-width: 0;
}
.stat-main[data-v-a500c0b2] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.stat-icon[data-v-a500c0b2] {
  width: var(--h-control-lg); height: var(--h-control-lg);
  border-radius: var(--radius-badge); display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-toolbar); color: var(--ink-on-solid); flex-shrink: 0;
}
.stat-icon--total[data-v-a500c0b2] { background: var(--bg-brand);
}
.stat-icon--ok[data-v-a500c0b2]    { background: var(--bg-success);
}
.stat-icon--fail[data-v-a500c0b2]  { background: var(--bg-danger);
}
.stat-icon--partial[data-v-a500c0b2] { background: var(--bg-warning);
}
.stat-icon--new[data-v-a500c0b2]   { background: var(--bg-info);
}
.stat-label[data-v-a500c0b2] { font-size: var(--size-label); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-body[data-v-a500c0b2] { display: flex; align-items: baseline; gap: var(--gap-inline); min-width: 0;
}
.stat-value[data-v-a500c0b2] { font-size: var(--size-title); font-weight: var(--weight-strong); color: var(--ink-primary); line-height: var(--line-none); font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-a500c0b2] { font-size: var(--size-meta); color: var(--ink-muted); white-space: nowrap; line-height: var(--line-none);
}

/* ── 회차 보고서 — 배치 작업 이력과 같은 '라벨 | 값 한 줄' 조판 ── */
.amr-report[data-v-a500c0b2] { display: flex; flex-direction: column; gap: var(--gap-glyph); padding: var(--pad-tile);
}
.amr-report__line[data-v-a500c0b2] { display: flex; gap: var(--gap-inline); font-size: var(--size-label);
}
.amr-report__k[data-v-a500c0b2] { color: var(--ink-secondary); min-width: 7rem; flex-shrink: 0;
}
.amr-report__facts[data-v-a500c0b2] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}
.amr-fact[data-v-a500c0b2] { display: inline-flex; align-items: baseline; gap: var(--gap-glyph);
}
.amr-fact__k[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--size-meta);
}
.amr-fact__v[data-v-a500c0b2] { color: var(--ink-primary); font-variant-numeric: tabular-nums;
}
.amr-fact__v--bad[data-v-a500c0b2] { color: var(--ink-danger);
}
.amr-report__items[data-v-a500c0b2] { display: flex; flex-direction: column; gap: var(--gap-glyph); margin-top: var(--gap-inline);
}
.amr-item[data-v-a500c0b2] { display: flex; align-items: center; gap: var(--gap-inline); font-size: var(--size-label); min-width: 0;
}
.amr-item__name[data-v-a500c0b2] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amr-item__who[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--size-meta); white-space: nowrap;
}

/* ── 스케줄 팝업 — 원본(AdminAutoParsing.vue .ap-setup/.ap-form2)과 같은 값 ── */
.amr-setup[data-v-a500c0b2] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  min-width: 0;
}
.amr-setup__block[data-v-a500c0b2] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.amr-setup__head[data-v-a500c0b2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
}
.amr-setup__title[data-v-a500c0b2] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.amr-setup__title i[data-v-a500c0b2] { color: var(--ink-muted); font-size: var(--icon-label);
}

/* 동작 설정 — 라벨(설명)과 컨트롤이 한 줄. 좁아지면 라벨 위/컨트롤 아래. */
.amr-form2[data-v-a500c0b2] { margin: 0; display: flex; flex-direction: column;
}
.amr-form2__row[data-v-a500c0b2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-snug) 0;
  border-bottom: var(--line-strong);
}
.amr-form2__row[data-v-a500c0b2]:last-child { border-bottom: none;
}
.amr-form2__row dt[data-v-a500c0b2] {
  font-size: var(--size-label);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.amr-form2__help[data-v-a500c0b2] { font-size: var(--size-meta); color: var(--ink-muted);
}
.amr-form2__row dd[data-v-a500c0b2] { margin: 0; flex: none;
}
@media (max-width: 480px) {
.amr-form2__row[data-v-a500c0b2] { flex-direction: column; align-items: flex-start;
}
}

.factor-config[data-v-d736dbe2] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유.
     ⛔ 좌우·아래는 다른 관리자 탭과 **같은 값**이다 — 탭을 옮길 때 목록이 좌우로
        덜컹이면 안 된다(2026-08-29 지적). 그 '같은 값'은 0 이다: 여백은 탭 바와
        목록 골격(ListScreen)이 각자 --page-pad-x 로 갖고 있어, 여기서 한 번 더
        주면 이 판만 16px 더 안쪽이 된다(실측 2026-08-29: 32px vs 16px). */
  padding: 0 0 var(--space-band);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.section[data-v-d736dbe2] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* 모니터링·설정은 위에서 아래로 읽는 판이라 스스로 스크롤한다.
   ⛔ `display: block` 을 반드시 되돌린다 — .section 이 flex 라 그대로 두면 자식이 부모 높이에
      눌려 scrollHeight 가 안 늘고, **스크롤바가 안 생긴 채 아랫부분이 잘린다**
      (2026-08-29 실사고: 내용 1,708px 중 603px 만 보이고 스크롤도 안 됐다. 파싱 판이 같은 줄을
      갖고 있는 이유가 이것이다). */
.section--scroll[data-v-d736dbe2] {
  display: block;
  overflow-y: auto;
}

.form-group[data-v-164029f1] {
  margin-bottom: var(--gap-stack);
}
.form-group label[data-v-164029f1] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-row[data-v-164029f1] {
  display: flex;
  gap: var(--gap-stack);
}
.form-row .form-group[data-v-164029f1] {
  flex: 1;
}
.form-error[data-v-164029f1] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: block;
  margin-bottom: var(--gap-inline);
}
@media (max-width: 768px) {
.form-row[data-v-164029f1] {
    flex-direction: column;
    gap: 0;
}
}

.confirm-msg[data-v-551cde54] {
  margin: 0;
  font-size: var(--size-lead);
  color: var(--ink-primary);
  line-height: var(--line-normal);
}
.confirm-warn[data-v-551cde54] {
  margin: var(--gap-stack) 0 0;
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-danger-soft);
  border: var(--line-w) solid var(--ink-danger);
  border-radius: var(--radius-badge);
  color: var(--ink-danger);
  font-size: var(--size-label);
}

.action-btns[data-v-c38b078a] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.code-mono[data-v-c38b078a] {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.col-desc[data-v-c38b078a] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  display: block;
  min-width: 0;
}


/* 설명 칸 — 접기 단추 + 한 줄 미리보기 */
.col-desc[data-v-c38b078a] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.col-desc__text[data-v-c38b078a] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 펼친 설명 — 행 전체 폭 */
.row-desc[data-v-c38b078a] {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 빈 자리 — 슬롯이 아무것도 안 그리면 ListBody 가 원시값을 대신 그린다(그걸 막는 자리) */
.col-none[data-v-c38b078a] { display: inline-block;
}


/* 최종수정 — 한 줄. 크기는 표 셀 기본을 상속하고, 시각만 상대 사다리로 곁들인다. */
.who-when[data-v-c38b078a] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  min-width: 0;
}
.who-when__when[data-v-c38b078a] { font-size: var(--font-rel-sm); color: var(--ink-muted);
}

.form-group[data-v-82712344] {
  margin-bottom: var(--gap-stack);
}
.form-group label[data-v-82712344] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-error[data-v-82712344] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  display: block;
  margin-bottom: var(--gap-inline);
}

.empty-text[data-v-01eac62d] {
  text-align: center;
  color: var(--ink-muted);
  padding: var(--space-band);
}
.transfer-container[data-v-01eac62d] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--gap-stack);
  align-items: stretch;
}
.transfer-column[data-v-01eac62d] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.transfer-column__header[data-v-01eac62d] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
}
.transfer-column__title[data-v-01eac62d] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.transfer-column__search[data-v-01eac62d] {
  padding: var(--space-snug);
  border-bottom: var(--line-strong);
}
.transfer-column__body[data-v-01eac62d] {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
  min-height: 200px;
}
.transfer-list[data-v-01eac62d] {
  display: flex;
  flex-direction: column;
}
.transfer-item[data-v-01eac62d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  cursor: pointer;
  transition: background var(--motion-fast);
  font-size: var(--size-label);
  /* 행을 잇달아 눌러 고르는 자리 — 글자가 긁혀 선택되지 않게(원본: UserTransferPicker.vue .utp-item) */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.transfer-item[data-v-01eac62d]:hover { background: var(--bg-hover);
}
.transfer-item--selected[data-v-01eac62d] {
  background: var(--bg-page);
  border-left: var(--line-w-thick) solid var(--ink-brand);
}
.transfer-item code[data-v-01eac62d] {
  font-size: var(--size-meta);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
  white-space: nowrap;
}
.transfer-item__name[data-v-01eac62d] {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-empty[data-v-01eac62d] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.transfer-actions[data-v-01eac62d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
  padding: 0 var(--space-tight);
}
@media (max-width: 768px) {
.transfer-container[data-v-01eac62d] {
    grid-template-columns: 1fr;
}
.transfer-actions[data-v-01eac62d] {
    flex-direction: row;
    justify-content: center;
    padding: var(--space-tight) 0;
}
}

.action-btns[data-v-3bbd2ad3] {
  display: flex;
  gap: var(--gap-glyph);
  justify-content: center;
}
.code-mono[data-v-3bbd2ad3] {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.col-desc[data-v-3bbd2ad3] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  display: block;
  min-width: 0;
}


/* 설명 칸 — 접기 단추 + 한 줄 미리보기 */
.col-desc[data-v-3bbd2ad3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  max-width: 100%;
}
.col-desc__text[data-v-3bbd2ad3] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 펼친 설명 — 행 전체 폭 */
.row-desc[data-v-3bbd2ad3] {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 권한 배지 — 원본: AdminUsersConfig.vue .role-tags / .role-tag-shrink */
.role-tags[data-v-3bbd2ad3] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  min-width: 0;
}
.role-tag-shrink[data-v-3bbd2ad3] {
  flex-shrink: 0;
}

/* 빈 자리 — 슬롯이 아무것도 안 그리면 ListBody 가 원시값을 대신 그린다(그걸 막는 자리) */
.col-none[data-v-3bbd2ad3] { display: inline-block;
}


/* 최종수정 — 한 줄. 크기는 표 셀 기본을 상속하고, 시각만 상대 사다리로 곁들인다. */
.who-when[data-v-3bbd2ad3] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  min-width: 0;
}
.who-when__when[data-v-3bbd2ad3] { font-size: var(--font-rel-sm); color: var(--ink-muted);
}

.permissions-config[data-v-a7d84c8f] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 서브탭 컨텐츠 — 내부 ListScreen 이 남는 공간을 채우고 자체 스크롤 */
.section[data-v-a7d84c8f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ListScreen 루트 상단 여백은 서브탭이 소유하므로 0 */
.section[data-v-a7d84c8f] .list-screen {
  flex: 1;
  min-height: 0;
  padding-top: 0;
}

.rtp[data-v-68fe209b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  height: 100%;
  min-height: 0;
}
.rtp-summary[data-v-68fe209b] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}
.rtp-summary__label[data-v-68fe209b] { font-size: var(--size-label); color: var(--ink-secondary);
}
.rtp-summary__count[data-v-68fe209b] { color: var(--ink-brand); font-size: var(--size-title-sm);
}
.rtp-summary__sub[data-v-68fe209b] { font-size: var(--size-meta); color: var(--ink-warning);
}
.rtp-summary__spacer[data-v-68fe209b] { flex: 1;
}
.rtp-force[data-v-68fe209b] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  color: var(--ink-primary);
  cursor: pointer;
}
.rtp-picker[data-v-68fe209b] { flex: 1; min-height: 0;
}
.rtp-bulk[data-v-68fe209b] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
}

.nl-preview-frame[data-v-f478a7a3] {
  width: 100%;
  min-height: 120px;
  border: none;
  background: #fff; /* tokens-ignore — 이메일 배경은 흰색 고정(테마 무관) */  /* role-ignore: 사다리로 표현할 수 없는 자리 */
  border-radius: var(--radius-badge);
  display: block;
}

/* fill 모드 — 부모(탭 패널 등) 높이를 꽉 채운다 */
.nl-preview-frame--fill[data-v-f478a7a3] {
  height: 100%;
}

.nl-editor[data-v-c9d4e42b] {
  display: flex;
  flex-direction: column;
  /* 탭 전환 시 모달 높이가 흔들리지 않도록 고정 */
  height: min(640px, calc(100dvh - var(--space-wide) - 120px));
  /* 내부 컨텐츠(form/RichTextEditor/RecipientPicker)가 자체 스크롤을 관리. 외곽 스크롤 차단. */
  overflow: hidden;
}

/* AppModal body 기본 overflow-y: auto 가 살아있으면 탭 헤더까지 같이 스크롤되어 올라간다.
   editor 가 자체 height 와 overflow 를 관리하므로 모달 body 스크롤은 강제 끈다.
   scoped + :deep + !important — 디자인 시스템 표준을 깨는 게 아니라 이 화면 특수 케이스만 차단. */
[data-v-c9d4e42b] .app-modal__body {
  overflow: hidden !important;
}
.nl-editor__tabs[data-v-c9d4e42b] {
  padding: 0 var(--space-band);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
}
.nl-editor__panes[data-v-c9d4e42b] {
  padding: var(--pad-modal);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nl-pane[data-v-c9d4e42b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  flex: 1;
  min-height: 0;
}
.nl-field[data-v-c9d4e42b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.nl-field--grow[data-v-c9d4e42b] {
  flex: 1;
  min-height: 0;
}
.nl-field--grow[data-v-c9d4e42b] .rich-text-editor {
  flex: 1;
  min-height: 280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* 내부 wrapper 도 flex 채움 + 명시 width — outer flex column 안에서 폭이 줄어드는 케이스 차단. */
.nl-field--grow[data-v-c9d4e42b] .rich-text-editor__content {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
/* TipTap 본체:
   - 기본 max-height: 400 은 newsletter 에선 외곽이 이미 height 관리하므로 제거 (이중 제약 → 좁아짐·스크롤 중첩의 원인)
   - 부모 __content (flex:1) 의 height 를 100% 채워서 내용 길어지면 tiptap 자체 overflow-y:auto 로 스크롤. */
.nl-field--grow[data-v-c9d4e42b] .tiptap {
  max-height: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.nl-label[data-v-c9d4e42b] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
}
.nl-label-row[data-v-c9d4e42b] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  justify-content: space-between;
}
.nl-vars[data-v-c9d4e42b] {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
}
.nl-vars__label[data-v-c9d4e42b] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
/* AppButton xs 위에 모노스페이스 폰트만 입혀 변수 토큰처럼 보이게 */
.nl-vars__token[data-v-c9d4e42b] {
  font-family: var(--font-mono);
}
.nl-hint[data-v-c9d4e42b] {
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.nl-footer[data-v-c9d4e42b] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
  width: 100%;
}
.nl-footer__spacer[data-v-c9d4e42b] {
  flex: 1;
}

/* HTML 업로드 모드 — 읽기 전용 미리보기 */
.nl-html-varsref[data-v-c9d4e42b] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.nl-var-token[data-v-c9d4e42b] {
  cursor: help;
}
.nl-html-name[data-v-c9d4e42b] {
  font-size: var(--size-meta);
  color: var(--ink-primary);
  margin-left: var(--gap-inline);
}
.nl-html-preview[data-v-c9d4e42b] {
  flex: 1;
  min-height: 280px;
  overflow: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-paper);
}
.nl-html-empty[data-v-c9d4e42b] {
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  color: var(--ink-muted);
  font-size: var(--size-label);
  text-align: center;
  padding: var(--pad-card);
}
.nl-html-empty i[data-v-c9d4e42b] {
  font-size: var(--icon-lead);
  opacity: 0.5;
}

.nl-additional[data-v-7a5dff50] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  height: min(560px, calc(100dvh - var(--space-wide) - 120px));
  min-height: 0;
}
.nl-additional__hint[data-v-7a5dff50] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.nl-additional__picker[data-v-7a5dff50] {
  flex: 1;
  min-height: 0;
}
.nl-additional__footer[data-v-7a5dff50] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  width: 100%;
}
.nl-additional__spacer[data-v-7a5dff50] { flex: 1;
}

.nl-detail[data-v-93d48549] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  /* 탭마다 내용 양이 달라도 모달 크기가 출렁이지 않도록 고정 높이.
     메타 정보 + 탭 바는 고정, 활성 패널만 내부 스크롤한다. */
  height: min(620px, calc(100dvh - var(--space-wide) - 180px));
}
.nl-meta[data-v-93d48549] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inline) var(--gap-group);
  padding: var(--space-cozy);
  background: var(--bg-card);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  flex-shrink: 0;
}
.nl-meta-row[data-v-93d48549] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.nl-meta-row--wide[data-v-93d48549] {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.nl-meta-label[data-v-93d48549] {
  color: var(--ink-secondary);
  min-width: 72px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
.nl-meta[data-v-93d48549] { grid-template-columns: 1fr;
}
}
.nl-meta-sep[data-v-93d48549] { color: var(--ink-secondary);
}
.nl-stat-sent[data-v-93d48549] { color: var(--ink-success);
}
.nl-stat-failed[data-v-93d48549] { color: var(--ink-danger);
}
.nl-stat-skipped[data-v-93d48549] { color: var(--ink-secondary);
}
.nl-stat-visitors[data-v-93d48549] { color: var(--ink-brand); font-weight: var(--weight-label);
}
.nl-no-clicks[data-v-93d48549] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
  padding: var(--space-snug) 0;
}
.nl-link-url[data-v-93d48549] {
  color: var(--ink-brand);
  text-decoration: none;
  word-break: break-all;
}
.nl-link-url[data-v-93d48549]:hover { text-decoration: underline;
}

/* 내용 탭 패널 (수신자별 결과 / 링크별 클릭 / 본문 미리보기)
   고정 높이의 .nl-detail 안에서 남는 공간을 채우고, 넘치면 패널만 스크롤한다. */
.nl-tab-panel[data-v-93d48549] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.nl-deliveries-toolbar[data-v-93d48549] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}
.nl-deliveries-summary[data-v-93d48549] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.nl-status-filter[data-v-93d48549] {
  display: flex;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nl-error-cell[data-v-93d48549] {
  font-size: var(--size-meta);
  color: var(--ink-danger);
}
.nl-detail-footer[data-v-93d48549] {
  display: flex;
  gap: var(--gap-inline);
  justify-content: flex-end;
}

.nl-recipients-sub[data-v-2f0b08ed] {
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  margin-left: var(--gap-glyph);
}
.nl-row-actions[data-v-2f0b08ed] {
  display: inline-flex;
  gap: var(--gap-glyph);
}

.feedback-analytics[data-v-9e62afdf] {
  /* 상단 패딩 0 — 서브탭 TabNav 바로 아래에 붙도록(형제 list-screen 과 동일). 상단 여백은 refresh-bar 가 소유 */
  padding: 0 var(--pad-page-x) var(--space-band);
  /* 서브탭(flex column, overflow:hidden) 안에서 자체 세로 스크롤 + 전체 너비 */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}

/* 새로고침 버튼 라벨은 데스크톱에서 표시, 모바일(≤768px)에서는 아이콘만 — 리스트 화면 툴바와 동일 */
@media (max-width: 768px) {
.refresh-controls[data-v-9e62afdf] .app-btn__label {
    display: none;
}
.refresh-controls[data-v-9e62afdf] .app-btn {
    padding: 0;
    width: var(--h-control-md);
}
}

/* ─── 상단 새로고침 바 ─── */
.refresh-bar[data-v-9e62afdf] {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) 0;
  margin-bottom: var(--gap-inline);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.last-refreshed[data-v-9e62afdf] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.refresh-controls[data-v-9e62afdf] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

/* 통계 요약 카드 */
.stats-summary[data-v-9e62afdf] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-group);
  margin-bottom: var(--gap-page);
}
.stat-card[data-v-9e62afdf] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-tile);
  display: flex;
  align-items: center;
  gap: var(--gap-group);
  transition: all var(--motion-base);
}
.stat-card[data-v-9e62afdf]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.stat-icon[data-v-9e62afdf] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--bg-info), var(--bg-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-on-solid);
  font-size: var(--icon-header);
}
.stat-icon--rating[data-v-9e62afdf] {
  background: linear-gradient(135deg, var(--bg-warning), var(--bg-warning));
}
.stat-icon--contact[data-v-9e62afdf] {
  background: linear-gradient(135deg, var(--bg-success), var(--bg-success));
}
.stat-icon--recent[data-v-9e62afdf] {
  background: linear-gradient(135deg, var(--bg-purple), var(--bg-indigo));
}
.stat-content[data-v-9e62afdf] {
  flex: 1;
}
.stat-label[data-v-9e62afdf] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.stat-value[data-v-9e62afdf] {
  font-size: var(--size-display-sm);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.stat-sublabel[data-v-9e62afdf] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
}

/* 차트 섹션 */
.chart-section[data-v-9e62afdf] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-band);
  margin-bottom: var(--gap-page);
  min-width: 0;
  overflow: hidden;
}
.chart-section--half[data-v-9e62afdf] {
  flex: 1;
  min-width: 0;
}
.charts-row[data-v-9e62afdf] {
  display: flex;
  gap: var(--gap-group);
  margin-bottom: var(--gap-page);
}
.chart-header[data-v-9e62afdf] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-band);
}
.chart-header h3[data-v-9e62afdf] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
}
.period-toggle[data-v-9e62afdf] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
}
.chart-container[data-v-9e62afdf] {
  width: 100%;
  
  min-width: 0;
  overflow: hidden;
}
.chart-container--pie[data-v-9e62afdf] {
}

/* 피드백 목록 */
.feedback-list-section[data-v-9e62afdf] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}
.list-header[data-v-9e62afdf] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-band);
  flex-wrap: wrap;
  gap: var(--gap-group);
}
.list-header h3[data-v-9e62afdf] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.total-count[data-v-9e62afdf] {
  font-size: var(--font-rel-sm);
  color: var(--ink-secondary);
  font-weight: normal;
}
.list-filters[data-v-9e62afdf] {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

/* 컨트롤 외양은 DetailFilterField 셸이 책임진다 — 폭만 지정 */
.list-filters__item[data-v-9e62afdf] {
  flex: 0 0 auto;
  width: 200px;
}
.loading[data-v-9e62afdf],
.empty-state[data-v-9e62afdf] {
  text-align: center;
  padding: var(--space-wide);
  color: var(--ink-muted);
}
.empty-state i[data-v-9e62afdf] {
  font-size: var(--icon-hero);
  margin-bottom: var(--gap-group);
  opacity: 0.5;
}

/* ListBody 는 가상 스크롤이라 바운드 높이가 필요 */
.feedback-list[data-v-9e62afdf] {
  height: clamp(300px, 55vh, 640px);
}
.rating-display[data-v-9e62afdf] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.rating-label[data-v-9e62afdf] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}
.rating-stars[data-v-9e62afdf] {
  display: flex;
  gap: var(--gap-glyph);
}
.rating-stars i[data-v-9e62afdf] {
  font-size: var(--icon-label);
  color: var(--ink-muted);
}
.rating-stars i.star-filled[data-v-9e62afdf] {
  color: var(--ink-warning);
}
.comment-cell[data-v-9e62afdf] {
  max-width: 300px;
}
.comment-text[data-v-9e62afdf] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  min-width: 0;
}

/* 페이지네이션 */
.pagination[data-v-9e62afdf] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-group);
  margin-top: var(--gap-band);
}
.pagination-btn[data-v-9e62afdf] {
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-field);
  color: var(--ink-primary);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: all var(--motion-base);
}
.pagination-btn[data-v-9e62afdf]:hover:not(:disabled) {
  background: var(--bg-page);
  border-color: var(--ink-brand);
}
.pagination-btn[data-v-9e62afdf]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-info[data-v-9e62afdf] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}

/* 반응형 */
@media (max-width: 1024px) {
.charts-row[data-v-9e62afdf] {
    flex-direction: column;
}
}
@media (max-width: 768px) {
.feedback-analytics[data-v-9e62afdf] {
    padding: var(--space-roomy) var(--pad-page-x);
}
.stats-summary[data-v-9e62afdf] {
    grid-template-columns: 1fr;
}
.list-header[data-v-9e62afdf] {
    flex-direction: column;
    align-items: flex-start;
}
.chart-container[data-v-9e62afdf] {
    height: 280px;
}
}
@media (max-width: 480px) {
.feedback-analytics[data-v-9e62afdf] {
    padding: var(--space-tight) var(--pad-page-x) var(--space-roomy);
}
.last-refreshed__label[data-v-9e62afdf] {
    display: none;
}
.chart-section[data-v-9e62afdf] {
    padding: var(--space-cozy);
}
.feedback-list-section[data-v-9e62afdf] {
    padding: var(--space-cozy);
}
}

/* 관리자 비밀번호 재확인 모달 */
.admin-pw-modal[data-v-dd25459d] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.admin-pw-modal__msg[data-v-dd25459d] { margin: 0 0 var(--gap-glyph); font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-relaxed);
}
.admin-pw-modal__label[data-v-dd25459d] { font-size: var(--size-label); font-weight: var(--weight-label); color: var(--ink-secondary);
}
.admin-pw-modal__error[data-v-dd25459d] { margin: 0; font-size: var(--size-label); color: var(--ink-danger);
}
.admin-pw-modal__actions[data-v-dd25459d] { display: flex; justify-content: flex-end; gap: var(--gap-inline); margin-top: var(--gap-inline);
}

/* 설정 서브탭 — 자체 스크롤 영역(부모 users-config 는 overflow:hidden 이므로 여기서 스크롤 소유) */
.users-settings-scroll[data-v-dd25459d] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.users-config[data-v-dd25459d] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ListScreen 이 자체 padding/max-width 를 소유 — 여기선 flex 확장만 */
.users-config[data-v-dd25459d] .list-screen {
  padding-top: 0;
}

/* ── 사용자 셀 (아바타 + 이름) ── */
.user-cell[data-v-dd25459d] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-inline);
  min-width: 0;
}
/* ⛔ `gap` 을 다시 주지 않는다 — 이 요소가 곧 `.user-label` 이고, 간격은 부품이 갖는다.
   여기서는 칸을 차지하는 몫(줄어들기·잘림)만 준다. */
.user-cell__main[data-v-dd25459d] {
  min-width: 0;
  flex-shrink: 1;
}
/* ⛔ 아바타도 「아바타 + 이름」 한 벌도 여기서 다시 그리지 않는다 —
   UserAvatar · UserLabel 이 갖는다(docs/design-system/user-label.md).
   한때 이 화면만 날 `<div class="user-avatar">` 로 얼굴을 손으로 그려
   `lint:components`(자체 `.avatar` 재정의)에도 `lint:user-label`(`<UserAvatar` 를 찾는다)에도
   안 걸렸다 — 2026-09-12 화면 실측에서 드러나 부품으로 모았다. */

/* ── 역할 배지 — 좁아지면 자연스럽게 줄바꿈 (테이블/카드 동일) ── */
.role-tags[data-v-dd25459d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  min-width: 0;
}
.role-tags--card[data-v-dd25459d] {
  /* 카드형도 동일 wrap. 명시적 alias 만 남김 — 다른 곳에서 selector 로 참조할 수 있음 */
  flex-wrap: wrap;
}
.role-tag-shrink[data-v-dd25459d] {
  flex-shrink: 0;
}

/* ── 활성 상태 토글 (AppButton ghost + pill 룩) ── */
.status-toggle[data-v-dd25459d] {
  height: var(--space-band);
  min-width: 44px;
  padding: 0 var(--space-snug);
  border-radius: var(--radius-pill);
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
}
.status-toggle--on[data-v-dd25459d] {
  background: var(--bg-success-soft);
  color: var(--ink-success);
}
.status-toggle--off[data-v-dd25459d] {
  background: var(--bg-page);
  color: var(--ink-secondary);
}
.text-sm[data-v-dd25459d] { font-size: var(--size-label);
}
.action-btns[data-v-dd25459d] { display: flex; gap: var(--gap-glyph); justify-content: center;
}

/* ── 카드형 본문 ── */
.user-card[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  width: 100%;
  min-width: 0;
}
.user-card__head[data-v-dd25459d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.user-card__id[data-v-dd25459d] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-glyph);
  min-width: 0;
  flex: 1;
}
/* 카드의 사람 한 벌 — 간격은 부품이 갖고, 여기서는 글자 크기와 잘림만 준다. */
.user-card__who[data-v-dd25459d] {
  min-width: 0;
  flex-shrink: 1;
}
.user-card__who[data-v-dd25459d] .user-label__name {
  font-size: var(--size-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-cell[data-v-dd25459d] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: var(--gap-inline);
       column-gap: var(--gap-inline);
  row-gap: var(--gap-glyph);
  min-width: 0;
}
.email-cell > .highlight-text[data-v-dd25459d] {
  /* 줄바꿈/말줄임은 셀의 컬럼 overflow 설정을 상속 — 자체 nowrap 강제 금지 */
  min-width: 0;
  flex: 1 1 auto;
}
/* 뱃지가 자체 width 유지 — 나란히 못 들어가면 다음 줄로 떨어짐 */
.email-cell > .app-badge[data-v-dd25459d] {
  flex-shrink: 0;
}
.user-card__email[data-v-dd25459d] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card__foot[data-v-dd25459d] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.user-card__login[data-v-dd25459d] {
  font-size: var(--size-label);
  color: var(--ink-muted);
}

/* ── 폼 ── */
.form-group[data-v-dd25459d] { margin-bottom: var(--gap-stack);
}
.form-group label[data-v-dd25459d] {
  display: block;
  margin-bottom: var(--gap-glyph);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.form-input[data-v-dd25459d] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
  box-sizing: border-box;
}
.form-input[data-v-dd25459d]:focus { outline: none; border-color: var(--ink-brand);
}
.form-hint[data-v-dd25459d] { color: var(--ink-secondary); font-size: var(--size-label);
}
.form-intro[data-v-dd25459d] {
  margin: 0 0 var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-field);
  border-left: var(--line-accent) solid var(--ink-brand);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: 1.6; /* css-ignore */ /* normal(1.5)~relaxed(1.7) 사이의 안내문 줄간격 — 토큰 매핑 없음 */
}
.user-status-tag[data-v-dd25459d] {
  flex-shrink: 0;
}
.consent-presets[data-v-dd25459d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.form-error[data-v-dd25459d] { color: var(--ink-danger); font-size: var(--size-meta);
}

/* 엑셀 일괄 등록 — 편집 그리드 */
.footer-spacer[data-v-dd25459d] { flex: 1 1 auto;
}
.bulk-toolbar[data-v-dd25459d] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}
.bulk-toolbar__spacer[data-v-dd25459d] { flex: 1 1 auto;
}
.bulk-grid[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  max-height: 46vh;
  overflow-y: auto;
}
.bulk-grid__head[data-v-dd25459d],
.bulk-grid__row[data-v-dd25459d] {
  display: grid;
  grid-template-columns: var(--space-band) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) var(--space-wide);
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-row-dense);
}
.bulk-grid__head[data-v-dd25459d] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  border-bottom: var(--line-strong);
}
.bulk-grid__row[data-v-dd25459d] {
  border-bottom: var(--line-strong);
}
.bulk-grid__row[data-v-dd25459d]:last-child { border-bottom: none;
}
.bulk-grid__row--invalid[data-v-dd25459d] {
  background: var(--bg-danger-soft);
}
.bulk-grid__error[data-v-dd25459d] {
  grid-column: 2 / 5;
  color: var(--ink-danger);
  font-size: var(--size-meta);
}
.bulk-empty[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-wide) var(--space-roomy);
  color: var(--ink-muted);
  border: var(--line-w) dashed var(--line-color);
  border-radius: var(--radius-control);
}
.bulk-empty i[data-v-dd25459d] { font-size: var(--icon-header);
}
.bulk-empty p[data-v-dd25459d] { margin: 0; font-size: var(--size-label);
}
.bulk-count[data-v-dd25459d] { font-size: var(--size-label); color: var(--ink-secondary); align-self: center;
}
.bulk-result[data-v-dd25459d] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.bulk-result__summary[data-v-dd25459d] {
  margin: 0 0 var(--gap-inline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.bulk-skipped[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  max-height: 160px;
  overflow-y: auto;
}
.bulk-skipped__row[data-v-dd25459d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
}
.bulk-skipped__who[data-v-dd25459d] {
  color: var(--ink-primary);
  flex-shrink: 0;
}
.bulk-skipped__reason[data-v-dd25459d] {
  color: var(--ink-warning);
  overflow-wrap: anywhere;
}
.confirm-msg[data-v-dd25459d] { margin: 0; font-size: var(--size-body); color: var(--ink-primary); line-height: var(--line-normal);
}
.loading-text[data-v-dd25459d], .empty-text[data-v-dd25459d] {
  text-align: center;
  color: var(--ink-secondary);
  padding: var(--space-wide);
}

/* ── Dual-list Transfer ── */
.transfer-container[data-v-dd25459d] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--gap-stack);
  align-items: stretch;
}
.transfer-column[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.transfer-column__header[data-v-dd25459d] {
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-bottom: var(--line-strong);
}
.transfer-column__title[data-v-dd25459d] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.transfer-column__search[data-v-dd25459d] {
  padding: var(--space-snug);
  border-bottom: var(--line-strong);
}
.transfer-column__body[data-v-dd25459d] {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
  min-height: 200px;
}
.transfer-list[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
}
.transfer-item[data-v-dd25459d] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-cozy);
  cursor: pointer;
  transition: background var(--motion-fast);
  font-size: var(--size-label);
  /* 행을 잇달아 눌러 고르는 자리 — 글자가 긁혀 선택되지 않게(원본: UserTransferPicker.vue .utp-item) */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.transfer-item[data-v-dd25459d]:hover { background: var(--bg-hover);
}
.transfer-item--selected[data-v-dd25459d] {
  background: var(--bg-active);
  border-left: var(--line-w-thick) solid var(--ink-brand);
}
.transfer-item__label[data-v-dd25459d] {
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.transfer-item code[data-v-dd25459d] {
  font-size: var(--size-meta);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.transfer-empty[data-v-dd25459d] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.transfer-actions[data-v-dd25459d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-glyph);
  padding: 0 var(--space-tight);
}

/* ── 벌크 역할 선택 모달 ── */
.bulk-role-search[data-v-dd25459d] {
  margin-bottom: var(--gap-stack);
}
.bulk-role-list[data-v-dd25459d] {
  /* ⛔ AppCheckbox 의 뿌리는 inline-flex 다 — 그릇이 block 이면 줄마다 서지 않고 옆으로 흐른다. */
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
/* 자리(안여백·hover)만 준다 — 상자와 글자 사이는 AppCheckbox 가 갖는다. */
.bulk-role-item[data-v-dd25459d] {
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
  transition: background var(--motion-fast);
}
/* 슬롯 그릇(AppCheckbox 안쪽) — 이름은 왼쪽, 코드는 오른쪽 끝으로. */
.bulk-role-item[data-v-dd25459d] .app-checkbox__label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  font-size: var(--size-label);
}
.bulk-role-item[data-v-dd25459d]:hover { background: var(--bg-hover);
}
.bulk-role-item--checked[data-v-dd25459d] { background: var(--bg-active);
}
.bulk-role-item[data-v-dd25459d]:not(:last-child) { border-bottom: var(--line-strong);
}
.bulk-role-name[data-v-dd25459d] { font-weight: var(--weight-title); color: var(--ink-primary);
}
.bulk-role-item code[data-v-dd25459d] {
  font-size: var(--size-meta);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  color: var(--ink-secondary);
  margin-left: auto;
}

/* ── 좁은 화면: 역할 편집 모달 3열 → 1열 세로 스택 ── */
@media (max-width: 768px) {
.transfer-container[data-v-dd25459d] {
    grid-template-columns: 1fr;
}
.transfer-actions[data-v-dd25459d] {
    flex-direction: row;
    justify-content: center;
    padding: var(--space-tight) 0;
    gap: var(--gap-inline);
}
  /* 좌우 화살표 → 상하 화살표로 회전 */
.transfer-arrow-add[data-v-dd25459d] { transform: rotate(90deg);
}
.transfer-arrow-remove[data-v-dd25459d] { transform: rotate(-90deg);
}
.transfer-column__body[data-v-dd25459d] {
    max-height: 140px;
    min-height: 70px;
}
  /* 엑셀 일괄등록 그리드(5열 인라인 편집)는 좁은 화면에서 각 입력이
     50~75px 로 눌려 못 쓰므로, 최소 폭을 유지하고 가로 스크롤로 전환 */
.bulk-grid[data-v-dd25459d] {
    overflow-x: auto;
}
.bulk-grid__head[data-v-dd25459d],
  .bulk-grid__row[data-v-dd25459d] {
    min-width: 520px; /* dimensions-ignore: 가로 스크롤 편집 그리드 최소폭(5열 유지) */
}
}

.retention[data-v-60c69204] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  padding: var(--space-roomy) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 헤더(제목 + 자동갱신·도움말)는 스크롤해도 붙어 있게 — 모니터링 탭의 .refresh-bar 와 같은 규칙.
   ⚠️ 배경을 깔지 않으면 스크롤된 내용이 글자 뒤로 비쳐 지나간다. */
.retention__header[data-v-60c69204] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  padding: var(--space-snug) 0;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
.retention__lead[data-v-60c69204] { display: flex; align-items: baseline; gap: var(--gap-stack); min-width: 0;
}
.retention__title[data-v-60c69204] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.retention__sub[data-v-60c69204] { font-size: var(--size-label); color: var(--ink-muted);
}
.retention__tools[data-v-60c69204] { display: flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
/* 갱신 시각 — 공통 목록 화면의 조회결과 줄(list-screen__summary)과 같은 글꼴·같은 가운데 정렬 */
.retention__updated[data-v-60c69204] {
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.retention__loading[data-v-60c69204] { color: var(--ink-secondary); padding: var(--space-band); text-align: center;
}
.panel[data-v-60c69204] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.panel__head[data-v-60c69204] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-stack);
}
.panel__title[data-v-60c69204] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.panel__empty[data-v-60c69204] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  text-align: center;
  padding: var(--space-wide) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  align-items: center;
}

/* 제목 — [수치 + 지금 정리]. 한 줄 안의 요소를 전부 세로 중앙에 맞춘다(높이가 서로 다르므로 baseline 금지). */
.usage-head[data-v-60c69204] { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-stack); flex-wrap: wrap;
}
.usage-head__right[data-v-60c69204] { display: flex; align-items: center; gap: var(--gap-stack); margin-inline-start: auto;
}
.usage-title[data-v-60c69204] { font-size: var(--size-label); color: var(--ink-primary);
}
.usage-value[data-v-60c69204] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.usage-pct[data-v-60c69204] { color: var(--ink-muted); font-weight: var(--weight-body);
}

/* 게이지 — 트랙(=보관 용량 전체)이 보여야 채워진 정도를 읽을 수 있다.
   ⚠️ 토큰명은 반드시 실재를 확인할 것. 예전에 없는 토큰(--surface-2/--radius-pill)을 써서
      배경이 투명해지고 모서리가 각져 '버튼'처럼 보였다. lint:tokens 는 미정의 토큰을 못 잡는다. */
.usage-bar[data-v-60c69204] {
  position: relative;
  height: var(--h-control-xs);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.usage-bar__fill[data-v-60c69204] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-pill);
  transition: width var(--motion-base) ease;
}
.usage-bar__fill--warn[data-v-60c69204] { background: var(--ink-warning);
}
.usage-bar__fill--over[data-v-60c69204] { background: var(--ink-danger);
}
.usage-bar__tick[data-v-60c69204] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-color);
  opacity: 0.8;
}
.usage-scale[data-v-60c69204] {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.usage-scale__mid[data-v-60c69204] { opacity: 0.7;
}
.stat-grid[data-v-60c69204] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gap-stack);
}
.stat-card[data-v-60c69204] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.stat-label[data-v-60c69204] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.stat-value[data-v-60c69204] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.stat-value--text[data-v-60c69204] { font-size: var(--size-body);
}
.stat-sublabel[data-v-60c69204] { font-size: var(--size-meta); color: var(--ink-muted);
}
.trend-chart[data-v-60c69204] { width: 100%; height: 260px;
}
.note[data-v-60c69204] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin: 0;
}
/* 아이콘 줄상자를 글줄과 같게 맞춘다 — 안 맞추면 아이콘만 위로 뜬다 */
.note > i[data-v-60c69204] { line-height: inherit;
}
.note--danger[data-v-60c69204] { color: var(--ink-danger); font-size: var(--size-label);
}
.note--warn[data-v-60c69204] { color: var(--ink-warning); font-size: var(--size-label);
}

.parsing-config[data-v-c3081c23] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유.
     ⛔ 좌우는 0 이다 — 여백은 탭 바와 목록 골격(ListScreen)이 각자 --page-pad-x 로
        갖는다. 여기서 한 번 더 주면 그만큼 겹쳐, 이 판만 본문이 16px 더 안쪽에서
        시작한다(실측 2026-08-29: 파싱·추출 32px vs 나머지 11개 탭 16px). */
  padding: 0 0 var(--space-band);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.section[data-v-c3081c23] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.section[data-v-c3081c23] .data-table-wrapper {
  flex: 1;
  min-height: 0;
}
/* 모니터링 패널은 내용이 길 수 있어 세로 스크롤 허용 */
.section--scroll[data-v-c3081c23] {
  overflow-y: auto;
  display: block;
}

/* 서브탭 + 목록 골격 — 사용자·파싱 화면과 동일 배치 */
.menu-config[data-v-01d49544] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 이름 셀 — 카테고리(루트)와 메뉴(하위)가 같은 컬럼을 공유한다 */
.menu-cell[data-v-01d49544] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.menu-cell__cat-icon[data-v-01d49544] {
  color: var(--ink-secondary);
  font-size: var(--icon-label);
  flex-shrink: 0;
}
.menu-cell__icon[data-v-01d49544] {
  font-size: var(--icon-label);
  color: var(--ink-secondary);
  flex-shrink: 0;
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.menu-cell__name[data-v-01d49544] {
  min-width: 0;
}
.menu-cell__name--cat[data-v-01d49544] {
  font-weight: var(--weight-title);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 화면 셀 — 주소 + 카탈로그 화면 이름 */
.menu-cell__screen[data-v-01d49544] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.menu-cell__url[data-v-01d49544] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  min-width: 0;
}

/* 상태 셀 */
.menu-cell__state[data-v-01d49544] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-wrap: wrap;
}

/* 작업 셀 */
.menu-cell__actions[data-v-01d49544] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-glyph);
}

/* 드래그 손잡이 — 행 전체가 드래그 대상이라 시각 힌트 역할 */
.menu-cell__grip[data-v-01d49544] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  cursor: grab;
  flex-shrink: 0;
}
.menu-cell__muted[data-v-01d49544] {
  color: var(--ink-muted);
}

/* 구분선 행 — 이름 대신 실제 선. 드롭다운에서의 모습과 맞춘다. */
.menu-cell__divider[data-v-01d49544] {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: var(--space-snug) 0;
}
.menu-cell__divider-line[data-v-01d49544] {
  flex: 1;
  height: 1px;
  background: var(--line-color);
}

/* 폼 */
.form-group[data-v-01d49544] { margin-bottom: var(--gap-stack);
}
.form-group label[data-v-01d49544] { display: block; margin-bottom: var(--gap-glyph); font-size: var(--size-label); font-weight: var(--weight-label); color: var(--ink-primary);
}
.form-input[data-v-01d49544] {
  width: 100%;
  padding: var(--space-snug) var(--space-cozy);
  border: var(--line-strong);
  background: var(--bg-page);
  color: var(--ink-primary);
  border-radius: var(--radius-control);
  font-size: var(--size-lead);
  box-sizing: border-box;
}
.form-input[data-v-01d49544]:focus { outline: none; border-color: var(--ink-brand);
}
.form-row[data-v-01d49544] { display: flex; gap: var(--gap-stack);
}
.form-row .form-group[data-v-01d49544] { flex: 1;
}
.form-checks[data-v-01d49544] { gap: var(--gap-band); margin-bottom: var(--gap-stack);
}
.form-check[data-v-01d49544] { display: flex; align-items: center; gap: var(--gap-inline); cursor: pointer; font-size: var(--size-label); color: var(--ink-primary);
}
.form-error[data-v-01d49544] { color: var(--ink-danger); font-size: var(--size-meta);
}
.form-error--top[data-v-01d49544] { display: block; margin-bottom: var(--gap-stack);
}
.form-hint[data-v-01d49544] { font-size: var(--size-label); color: var(--ink-secondary); margin-bottom: var(--gap-inline);
}
/* 선택 컨트롤 바로 아래 붙는 설명 — 위쪽 여백만 최소로 */
.form-hint--tight[data-v-01d49544] { margin: var(--gap-glyph) 0 0;
}

/* 폼 섹션 */
.form-section[data-v-01d49544] {
  margin-top: var(--gap-group);
  padding-top: var(--space-roomy);
  border-top: var(--line-strong);
}
.form-section__title[data-v-01d49544] {
  margin: 0 0 var(--gap-stack);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}

/* 권한 체크리스트 */
.perm-checklist__items[data-v-01d49544] {
  /* ⛔ AppCheckbox 의 뿌리는 inline-flex 다 — 그릇이 block 이면 줄마다 서지 않고 옆으로 흐른다. */
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
/* 자리(안여백·hover)만 준다 — 상자와 글자 사이는 AppCheckbox 가 갖는다. */
.perm-checklist__item[data-v-01d49544] {
  padding: var(--space-snug) var(--space-cozy);
  transition: background var(--motion-fast);
}
.perm-checklist__item[data-v-01d49544]:hover { background: var(--bg-hover);
}
.perm-checklist__item code[data-v-01d49544] {
  font-size: var(--size-meta);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-tight);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
  white-space: nowrap;
}
.perm-checklist__item span[data-v-01d49544] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 슬롯 그릇(AppCheckbox 안쪽)에도 자리를 준다 — code 와 이름이 한 줄에 서게. */
.perm-checklist__item[data-v-01d49544] .app-checkbox__label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
@media (max-width: 768px) {
.form-row[data-v-01d49544] { flex-direction: column; gap: 0;
}
.group-header[data-v-01d49544] { flex-wrap: wrap;
}
.group-header__actions[data-v-01d49544] { margin-left: 0;
}
}

.admin-vibe-page[data-v-af2de004] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}
.admin-vibe-container[data-v-af2de004] {
  flex: 1;
  height: 100%;
  background: var(--bg-page);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ChatWindow 내부 스타일 오버라이드 */
[data-v-af2de004] .chat-window {
  border: none;
  flex: 1;
  height: 100%;
  min-height: 0;
}
[data-v-af2de004] .chat-window-header {
  display: none !important;
}

/* 판·탭 영역은 껍데기다 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
   ⛔ --surface-color 로 칠하면 이 화면만 어두운 베일이 덮여 섬이 된다. */
[data-v-af2de004] .page__card {
  background: var(--bg-page) !important;
}
[data-v-af2de004] .tabs-nav {
  background: var(--bg-page) !important;
}

.sj-name[data-v-0080d4d3] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.sj-name__title[data-v-0080d4d3] { font-weight: var(--weight-title); display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.sj-name__desc[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-label);
}
.sj-interval[data-v-0080d4d3] { font-variant-numeric: tabular-nums;
}
.sj-count[data-v-0080d4d3] { margin-left: var(--gap-inline); color: var(--ink-secondary); font-size: var(--size-label);
}
.sj-actions[data-v-0080d4d3] { display: inline-flex; gap: var(--gap-glyph); justify-content: center;
}

/* 실행 중 표시 + 진행바 */
.sj-running[data-v-0080d4d3] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.sj-progress[data-v-0080d4d3] { display: flex; align-items: center; gap: var(--gap-inline);
}
.sj-progress__bar[data-v-0080d4d3] { flex: 1; height: 6px; background: var(--bg-hover); border-radius: var(--radius-pill); overflow: hidden;
}
.sj-progress__fill[data-v-0080d4d3] { height: 100%; background: var(--bg-brand-vivid); border-radius: var(--radius-pill); transition: width 0.3s ease;
}
.sj-progress__label[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-label); white-space: nowrap;
}
.sj-error[data-v-0080d4d3] { display: flex; align-items: center; gap: var(--gap-inline); color: var(--ink-danger); font-size: var(--size-label);
}
.sj-error code[data-v-0080d4d3] { white-space: pre-wrap; word-break: break-all;
}
.sj-edit[data-v-0080d4d3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  /* ⛔ 열려 있는 동안 상자가 안 움직이게 **가장 높은 조합만큼 본문 자리를 잡는다.**
     「실행 방식」이 간격 반복 ↔ 시각 지정으로 갈리고, 시각 지정 안에서 다시 매일/매주/매월/직접
     입력으로 갈린다. 실측 2026-09-04(창 1500×950): 384 · 455 · 455 · 525 · 525 · 450px
     → 525px = 32.8125rem. 안 잡으면 판이 526↔667 로 **142px** 들썩여 저장 단추가 달아난다.
     ⛔ 자리는 «필드»가 아니라 «본문»에 잡는다 — 필드에 잡으면 남는 자리가 그 필드와 다음 필드
     사이에 구멍으로 보이고, 본문에 잡으면 맨 아래 여백으로 모여 눈에 띄지 않는다. */
  min-height: 32.8125rem;  /* css-ignore: 가장 높은 조합의 실측값 — 사다리로 접히지 않는다 */
}
.sj-edit__row[data-v-0080d4d3] { display: flex; align-items: center; gap: var(--gap-inline);
}
.sj-edit__label[data-v-0080d4d3] { font-weight: var(--weight-label);
}
.sj-edit__field[data-v-0080d4d3] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.sj-edit__vu[data-v-0080d4d3] { display: flex; align-items: center; gap: var(--gap-inline);
}
.sj-edit__num[data-v-0080d4d3] { width: 140px;
}
.sj-edit__hint[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-label);
}
.sj-edit__hint--warn[data-v-0080d4d3] { color: var(--ink-danger);
}

/* 회차 보고서 — 라벨 열 + 내용 열, 한 줄에 한 항목. 펼쳤을 때 눈으로 훑어 내려가는 형태. */
.sj-report[data-v-0080d4d3] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
  font-size: var(--size-label);
}
.sj-report__line[data-v-0080d4d3] { display: flex; gap: var(--gap-inline); align-items: baseline;
}
.sj-report__k[data-v-0080d4d3] {
  flex: 0 0 48px;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}
.sj-report__line--warn[data-v-0080d4d3] { color: var(--ink-warning);
}
.sj-report__line--meta[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-meta);
}
.sj-report__note[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-label);
}
.sj-report__steps[data-v-0080d4d3] { display: flex; flex-direction: column; gap: var(--gap-glyph); /* dimensions-ignore — 단계 줄 간 최소 간격 */
}
.sj-step[data-v-0080d4d3] { display: flex; align-items: baseline; gap: var(--gap-inline); flex-wrap: wrap;
}
.sj-step__seq[data-v-0080d4d3] { color: var(--ink-secondary); font-variant-numeric: tabular-nums;
}
.sj-step__name[data-v-0080d4d3] { min-width: 160px;
}
.sj-step__num[data-v-0080d4d3] { color: var(--ink-secondary); font-variant-numeric: tabular-nums;
}
.sj-step__err[data-v-0080d4d3] { color: var(--ink-danger); word-break: break-all;
}

/* 사실(기준·발견·처리·남은) — 라벨은 흐리게, 값은 또렷하게. 한 줄에 여러 개가 이어진다. */
.sj-report__facts[data-v-0080d4d3] { display: flex; flex-wrap: wrap; gap: var(--gap-glyph) var(--gap-stack);
}
.sj-fact[data-v-0080d4d3] { display: inline-flex; align-items: baseline; gap: var(--gap-glyph);
}
.sj-fact__k[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--size-meta);
}
.sj-fact__v[data-v-0080d4d3] { font-variant-numeric: tabular-nums;
}

/* 펼침 표시 — 이 행에 더 볼 것이 있음을 알린다. */
.sj-hist__when[data-v-0080d4d3] { display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.sj-hist__caret[data-v-0080d4d3] { color: var(--ink-secondary); font-size: var(--icon-marker); width: 10px; /* dimensions-ignore — 아이콘 자리 고정(펼침/접힘 흔들림 방지) */
}
/* 결과 칸은 한 줄 고정 — 길면 말줄임(전문은 펼친 보고서와 툴팁에 있다). */
.sj-hist__err[data-v-0080d4d3],

.sj-hist__sum[data-v-0080d4d3] {
  display: block;
  max-width: 100%;
}
.sj-hist__sum[data-v-0080d4d3] { color: var(--ink-secondary);
}
.sj-hist-grid[data-v-0080d4d3] { height: 60vh; display: flex; flex-direction: column;
}
/* 이력 필터 줄 — 키워드(넓게) + 상태·구분 */
.sj-hist-filters[data-v-0080d4d3] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding-bottom: var(--space-snug);
}
.sj-hist-filters[data-v-0080d4d3] > :first-child { flex: 1; min-width: 0;
}
/* ⚠️ 줄바꿈 속성(white-space/word-break)을 여기서 다시 주지 않는다 — 위의 한 줄+말줄임 규칙을 덮어
   행 높이가 들쭉날쭉해진다(2026-08-08 실측). 오류 전문은 툴팁과 펼친 보고서에 있다. */
.sj-hist__err[data-v-0080d4d3] { color: var(--ink-danger); font-size: var(--size-label);
}
.sj-hist__dur[data-v-0080d4d3] { font-variant-numeric: tabular-nums; white-space: nowrap;
}

.ch-name[data-v-377e3678] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.ch-name__title[data-v-377e3678] { font-weight: var(--weight-title); display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.ch-name__addr[data-v-377e3678] {
  color: var(--ink-secondary);
  font-size: var(--size-label);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* align-items 를 주지 않으면 뱃지가 컬럼 폭만큼 늘어나 다른 화면의 상태 뱃지와 달라 보인다. */
.ch-health[data-v-377e3678] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-glyph);
}
/* ⛔ **넘침 처리를 셀에서 박지 않는다**(사용자 지시 2026-08-17). 표의 넘침은 **컬럼 설정**
   (ListColumn.overflow · 설정 모달에서 사람이 고른다)이 정하고, 셀은 그 결정을 덮지 않는다.
   여기서 nowrap+ellipsis 를 박아 두면 기본값(wrap = 접어서 다 보임)이 통째로 무시돼,
   뒤가 다른 이름들이 앞부분만 남아 서로 구분이 안 된다(부품정보 목록에서 실제로 겪었다). */
.ch-health__err[data-v-377e3678] {
  color: var(--ink-danger);
  font-size: var(--size-label);
}
.ch-limits[data-v-377e3678] { display: flex; flex-direction: column; gap: var(--gap-glyph); font-size: var(--size-label);
}
.ch-limits__sub[data-v-377e3678] { color: var(--ink-secondary);
}
.ch-caps[data-v-377e3678] {
  color: var(--ink-secondary);
  font-size: var(--size-label);
  /* 능력 문자열이 길어도 가로 스크롤을 만들지 않는다 — 셀 안에서 줄바꿈한다. */
  overflow-wrap: anywhere;
}
.ch-dash[data-v-377e3678] { color: var(--ink-muted);
}
.ch-actions[data-v-377e3678] { display: inline-flex; gap: var(--gap-glyph); justify-content: center;
}

/* ── 편집 폼 — 다른 관리자 모달(CodeFormModal 등)과 동일한 규약 ── */
.form-group[data-v-377e3678] {
  margin-bottom: var(--gap-stack);
  flex: 1;
}
.form-group--narrow[data-v-377e3678] { max-width: 120px;
}
.form-group label[data-v-377e3678] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-hint[data-v-377e3678] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}
.form-row[data-v-377e3678] {
  display: flex;
  gap: var(--gap-stack);
}
/* 체크박스 묶음 — 정렬·간격은 AppCheckbox 가 소유하고, 여기선 줄 간격과 아래 여백만 준다.
   .form-group 을 쓰지 않는 이유: 그 규약의 `label { display:block }` 이 AppCheckbox 루트(label)를
   덮어써 컴포넌트 레이아웃을 깨뜨린다(컴포넌트 쪽에도 방어를 넣었지만, 애초에 안 겹치는 게 낫다). */
/* ⛔ 「방향」을 SSH↔에이전트로 바꿔도 상자가 안 움직이게 **가장 높은 갈래만큼 자리를 잡는다.**
   SSH 는 접속정보(주소·포트·계정)를 더 받아 에이전트보다 높다.
   실측 2026-09-04(창 1500×950): 등록 SSH 535 / 에이전트 523 · 설정 SSH 578 / 에이전트 566px.
   등록과 설정은 담는 것이 달라(설정은 열쇠·지문 줄이 더 붙는다) 자리도 따로 잡는다 —
   한 값으로 묶으면 등록 화면에 43px 빈자리가 남는다.
   안 잡으면 등록 677↔623(54px) · 설정 720↔628(93px) 로 들썩여 저장 단추가 달아난다. */
.ch-form[data-v-377e3678] {
  /* ⛔ flow-root — 마지막 자식의 아래 여백이 그릇 «밖으로» 새면(여백 상쇄) 자리를 잡아도
     본문이 12px 더 커진다. 실측 2026-09-04: 그릇은 566 로 같은데 본문이 606↔594 였다. */
  display: flow-root;
  min-height: 33.4375rem;                   /* css-ignore: 등록 갈래의 실측 최대(535px) */
}
.ch-form--edit[data-v-377e3678] { min-height: 36.125rem;
}   /* css-ignore: 설정 갈래의 실측 최대(578px) */
.ch-checks[data-v-377e3678] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin-bottom: var(--gap-stack);
}
.info-notice[data-v-377e3678] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-inline);
  padding: var(--space-snug) var(--space-cozy);
  background: var(--bg-page);
  border-left: var(--line-accent) solid var(--ink-muted);
  border-radius: var(--radius-badge);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.info-notice i[data-v-377e3678] { color: var(--ink-muted); flex-shrink: 0;
}
.ch-row-hint[data-v-377e3678] {
  margin-top: calc(var(--gap-inline) * -1);
  margin-bottom: var(--gap-stack);
}
.ch-key[data-v-377e3678] { display: flex; align-items: center; gap: var(--gap-inline); flex-wrap: wrap;
}
.ch-key-input[data-v-377e3678] textarea {
  font-family: var(--font-mono);
  font-size: var(--size-label);
}
.ch-key__fp[data-v-377e3678] {
  margin-top: 0;
  font-family: var(--font-mono);
}
.ch-term[data-v-377e3678] {
  /* 높이만 정해 주고 표시는 TerminalViewer 가 소유한다. */
  height: 46vh;
  display: flex;
  flex-direction: column;
}
.ch-term[data-v-377e3678] .terminal-wrapper { flex: 1; min-height: 0;
}
.ch-term__input[data-v-377e3678] {
  display: flex;
  gap: var(--gap-inline);
  align-items: center;
  margin-top: var(--gap-stack);
}
.ch-term__field[data-v-377e3678] { flex: 1;
}
.ch-term__field[data-v-377e3678] input {
  font-family: var(--font-mono);
}
.ch-pub__key[data-v-377e3678] {
  display: block;
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-snug);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  word-break: break-all;
  white-space: pre-wrap;
}
@media (max-width: 768px) {
.form-row[data-v-377e3678] {
    flex-direction: column;
    gap: 0;
}
.form-group--narrow[data-v-377e3678] { max-width: none;
}
}
.ch-jobs[data-v-377e3678] { display: flex; flex-direction: column; gap: var(--gap-glyph);
}
.ch-jobs__row[data-v-377e3678] { display: flex; align-items: center; gap: var(--gap-inline);
}
.ch-jobs__name[data-v-377e3678] { color: var(--ink-secondary); font-size: var(--size-meta);
}
.ch-jobsform[data-v-377e3678] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.ch-jobsform__hint[data-v-377e3678] { color: var(--ink-secondary); font-size: var(--size-meta); margin: 0;
}
.ch-jobsform__row[data-v-377e3678] { display: flex; align-items: center; gap: var(--gap-inline);
}
.ch-jobsform__over[data-v-377e3678] { color: var(--ink-danger); font-size: var(--size-meta); margin: 0;
}
.ch-runs[data-v-377e3678] { display: flex; flex-direction: column; gap: var(--gap-stack);
}
.ch-runs__sum[data-v-377e3678] { margin: 0; color: var(--ink-secondary); font-size: var(--size-meta);
}
.ch-runs__empty[data-v-377e3678] { margin: 0; color: var(--ink-muted); font-size: var(--size-label);
}
.ch-runs__list[data-v-377e3678] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.ch-runs__row[data-v-377e3678] { display: flex; align-items: center; gap: var(--gap-inline);
}
.ch-runs__name[data-v-377e3678] { font-weight: var(--weight-label);
}
.ch-runs__meta[data-v-377e3678] { color: var(--ink-secondary); font-size: var(--size-meta); flex: 1 1 auto; min-width: 0;
}
.ch-runs__at[data-v-377e3678] { color: var(--ink-muted); font-size: var(--size-meta); flex: 0 0 auto;
}

/* ── 골격·타일·판·안내문은 원본(AdminRetentionConfig)의 값을 그대로 옮겼다. ── */
.asset-mon[data-v-67551075] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  padding: var(--space-roomy) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 헤더는 스크롤해도 붙어 있게 — 배경을 깔지 않으면 내용이 글자 뒤로 비쳐 지나간다. */
.asset-mon__header[data-v-67551075] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  flex-wrap: wrap;
  padding: var(--space-snug) 0;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
}
.asset-mon__lead[data-v-67551075] { display: flex; align-items: baseline; gap: var(--gap-stack); min-width: 0;
}
.asset-mon__title[data-v-67551075] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.asset-mon__sub[data-v-67551075] { font-size: var(--size-label); color: var(--ink-muted);
}
.asset-mon__tools[data-v-67551075] { display: flex; align-items: center; gap: var(--gap-inline); margin-left: auto;
}
.asset-mon__updated[data-v-67551075] {
  height: var(--h-control-md);
  line-height: var(--h-control-md);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.asset-mon__loading[data-v-67551075] { color: var(--ink-secondary); padding: var(--space-band); text-align: center;
}
.panel[data-v-67551075] {
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.panel__title[data-v-67551075] {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.panel__empty[data-v-67551075] {
  color: var(--ink-muted);
  font-size: var(--size-label);
  text-align: center;
  padding: var(--space-wide) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  align-items: center;
  margin: 0;
}
.stat-grid[data-v-67551075] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gap-stack);
}
.stat-card[data-v-67551075] {
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.stat-label[data-v-67551075] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.stat-value[data-v-67551075] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-67551075] { font-size: var(--size-meta); color: var(--ink-muted);
}
.trend-chart[data-v-67551075] { width: 100%;
}
.kind-row[data-v-67551075] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}
.top-list[data-v-67551075] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-inline);
}
.top-list__row[data-v-67551075] { display: flex; align-items: center; gap: var(--gap-inline);
}
.top-list__meta[data-v-67551075] { color: var(--ink-secondary); font-size: var(--size-meta); flex: 1 1 auto; min-width: 0;
}
.top-list__bytes[data-v-67551075] { font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.note[data-v-67551075] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin: 0;
}
/* 아이콘 줄상자를 글줄과 같게 맞춘다 — 안 맞추면 아이콘만 위로 뜬다 */
.note > i[data-v-67551075] { line-height: inherit;
}

/* ── 통계 타일 — 원본(FactorExtractJobsPanel ← AdminParsingJobs)의 값을 그대로 옮겼다.
   ⛔ 여기서 크기·테두리·아이콘 모양을 다시 정하지 않는다. */
.stats-summary[data-v-a82c0d48] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-inline);
}
.stat-card[data-v-a82c0d48] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: var(--pad-tile);
  min-width: 0;
}
.stat-main[data-v-a82c0d48] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.stat-icon[data-v-a82c0d48] {
  width: var(--h-control-lg);
  height: var(--h-control-lg);
  border-radius: var(--radius-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-toolbar);
  color: var(--ink-on-solid);
  flex-shrink: 0;
}
/* ⛔ 타일의 **모든 키**가 면을 가져야 한다 — 하나만 빠지면 그 타일의 아이콘이 면 없이 떠서
   같은 줄에서 혼자 다르게 보인다. */
.stat-icon--total[data-v-a82c0d48]   { background: var(--bg-brand);
}
.stat-icon--trash[data-v-a82c0d48]   { background: var(--bg-indigo);
}
.stat-icon--over[data-v-a82c0d48]    { background: var(--bg-danger);
}
.stat-icon--custom[data-v-a82c0d48]  { background: var(--bg-info);
}
.stat-icon--default[data-v-a82c0d48] { background: var(--bg-purple);
}
.stat-label[data-v-a82c0d48] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-body[data-v-a82c0d48] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  min-width: 0;
}
.stat-value[data-v-a82c0d48] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-none);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel[data-v-a82c0d48] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: var(--line-none);
}

/* ── 사용량 게이지 — 원본(AdminRetentionConfig)의 .usage-bar 를 값까지 그대로 옮겼다.
   트랙(=상한 전체)이 보여야 채워진 정도를 읽을 수 있다. */
.q-usage[data-v-a82c0d48] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.usage-bar[data-v-a82c0d48] {
  position: relative;
  height: var(--h-control-xs);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.usage-bar__fill[data-v-a82c0d48] {
  height: 100%;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-pill);
  transition: width var(--motion-base) ease;
}
.usage-bar__fill--warn[data-v-a82c0d48] { background: var(--ink-warning);
}
.usage-bar__fill--over[data-v-a82c0d48] { background: var(--ink-danger);
}
.q-usage__text[data-v-a82c0d48] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
  font-variant-numeric: tabular-nums;
}
.q-usage__pct[data-v-a82c0d48] { color: var(--ink-muted);
}
.q-quota[data-v-a82c0d48] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); min-width: 0;
}
.q-quota__value[data-v-a82c0d48] { font-variant-numeric: tabular-nums;
}
.q-quota__note[data-v-a82c0d48] { color: var(--ink-secondary); font-size: var(--size-meta); overflow-wrap: anywhere;
}
.q-num[data-v-a82c0d48] { font-variant-numeric: tabular-nums;
}
.note[data-v-a82c0d48] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin: 0;
}
/* 아이콘 줄상자를 글줄과 같게 맞춘다 — 안 맞추면 아이콘만 위로 뜬다 */
.note > i[data-v-a82c0d48] { line-height: inherit;
}
.note--warn[data-v-a82c0d48] { color: var(--ink-warning);
}

/* ── 상한 설정 폼 — 다른 관리자 모달(AdminComputeHosts 등)과 동일한 규약 ── */
/* ⛔ flow-root — 마지막 자식의 아래 여백이 그릇 «밖으로» 새면(여백 상쇄) 본문이 더 커진다. */
.q-form[data-v-a82c0d48] { display: flow-root;
}
.q-form__target[data-v-a82c0d48] {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  /* 한 줄로 못 박는다 — 고른 사람 수가 달라져도 상자 높이가 흔들리지 않게. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-group[data-v-a82c0d48] {
  margin-bottom: var(--gap-stack);
  flex: 1;
}
.form-group label[data-v-a82c0d48] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-hint[data-v-a82c0d48] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}

.dd-name[data-v-43c04deb] { font-weight: var(--weight-title); display: inline-flex; align-items: center; gap: var(--gap-inline);
}
.dd-ver[data-v-43c04deb] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-glyph);
}
.dd-ver__file[data-v-43c04deb] {
  color: var(--ink-secondary);
  font-size: var(--size-label);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.dd-mono[data-v-43c04deb] {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.dd-dash[data-v-43c04deb] { color: var(--ink-muted);
}
/* ListBody 는 형광 값(.highlight-text)을 낱말 안에서 끊지 않는다(keep-all·normal) — 한글 값이 세로로 눌리지 않게.
   그런데 jar 파일명·Maven 좌표·URL 틀은 띄어쓸 자리가 없는 긴 한 덩어리라, 그대로 두면 옆 열로 넘친다
   (실측 2026-09-12: 좌표 `org.postgresql:postgresql:42.7.13` 이 「게이트웨이 적재」 배지 밑으로 파고들었다).
   이 값들만 아무 데서나 끊게 되돌린다 — ListBody 규칙(.list-body__cell.ov-wrap …)보다 한 단 구체적으로. */
.list-body__cell.ov-wrap .dd-ver__file[data-v-43c04deb] .highlight-text,
.list-body__cell.ov-wrap .dd-mono[data-v-43c04deb] .highlight-text {
  overflow-wrap: anywhere;
}

/* ── 추가 모달 — 두 판 중 높은 쪽 기준으로 자리를 잡는다(모달 표준) ── */
.dd-add[data-v-43c04deb] {
  display: flow-root;
  min-height: 34.625rem; /* css-ignore: 가장 높은 조합(Maven 판 + 게이트웨이 끊김 안내)의 실측 554px — Chromium·Firefox 554 · WebKit 553 (2026-09-12) */
}
.dd-add__pane[data-v-43c04deb] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding-top: var(--gap-stack);
}
.dd-notice[data-v-43c04deb] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.dd-pick[data-v-43c04deb] { display: flex; align-items: center; gap: var(--gap-inline);
}
.dd-file-hidden[data-v-43c04deb] { display: none;
}
.dd-edit[data-v-43c04deb] { display: flow-root;
}

/* ── 편집 폼 — 다른 관리자 모달(AdminComputeHosts 등)과 동일한 규약 ── */
.form-group[data-v-43c04deb] {
  margin-bottom: var(--gap-stack);
  flex: 1;
}
.form-group label[data-v-43c04deb] {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-glyph);
}
.form-hint[data-v-43c04deb] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin-top: var(--gap-glyph);
  display: block;
}
.form-row[data-v-43c04deb] {
  display: flex;
  gap: var(--gap-stack);
}

.asset-config[data-v-31174983] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유.
     ⛔ 좌우는 0 이다 — 여백은 탭 바와 목록 골격(ListScreen)이 각자 --page-pad-x 로 갖는다. */
  padding: 0 0 var(--space-band);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.section[data-v-31174983] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.section[data-v-31174983] .data-table-wrapper {
  flex: 1;
  min-height: 0;
}
/* 현황·설정 판은 내용이 길 수 있어 세로 스크롤 허용 */
.section--scroll[data-v-31174983] {
  overflow-y: auto;
  display: block;
}

/* 되돌린 것은 흐리게 — 지우지 않고 남기되 지금 상태가 아님을 보인다 */
.ach__screen[data-v-23a720f3] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
}
.ach__screen i[data-v-23a720f3] {
  color: var(--ink-muted);
  font-size: var(--icon-marker);
}
/* 내용 — 눌러서 자세히를 연다 */
.ach__what[data-v-23a720f3] {
  cursor: pointer;
}
.ach__what[data-v-23a720f3]:hover {
  text-decoration: underline;
}
.ach__undone[data-v-23a720f3] {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.cropper-content[data-v-def4e6a0] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.cropper-description[data-v-def4e6a0] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  text-align: center;
}
.image-wrapper[data-v-def4e6a0] {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--bg-card);
  cursor: move;
}
canvas[data-v-def4e6a0] {
  display: block;
}
.controls[data-v-def4e6a0] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
}
.controls .icon[data-v-def4e6a0] {
  color: var(--ink-secondary);
}
.zoom-slider[data-v-def4e6a0] {
  flex: 1;
  cursor: pointer;
}
.bg-controls[data-v-def4e6a0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-snug);
}
.bg-controls .label[data-v-def4e6a0] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
}
.bg-buttons[data-v-def4e6a0] {
  display: flex;
  gap: var(--gap-stack);
}
.bg-btn[data-v-def4e6a0] {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid var(--line-color);
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion-base), border-color var(--motion-base);
}
.bg-btn.active[data-v-def4e6a0] {
  border-color: var(--ink-brand);
  transform: scale(1.2);
}

/* tokens-ignore-start: 색상 피커 스와치 — 사용자가 직접 고르는 배경색 자체값 */
/* role-ignore: 사용자가 고르는 배경색 견본 그 자체 — 테마를 따라가면 안 되는 자리 */
.bg-white[data-v-def4e6a0] { background: #ffffff;
}
/* role-ignore: 위와 같음 */
.bg-black[data-v-def4e6a0] { background: #000000;
}
.bg-transparent[data-v-def4e6a0] {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-color: #fff;  /* role-ignore: 이미지 편집 캔버스의 고정색 — 테마색이 아니다 */
}
/* tokens-ignore-end */

.camera-container[data-v-e9978d98] {
  width: 100%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 카메라 화면 바탕 — 렌즈 영상이 얹히는 자리라 **검정이 맞다**(테마와 무관).
     theme-ignore: 촬영 화면은 어느 테마에서도 검정 바탕 위에 영상을 얹는다. */
  background: var(--ink-black);
  position: relative;
}
.video-wrapper[data-v-e9978d98] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.camera-video[data-v-e9978d98] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mirrored[data-v-e9978d98] {
  transform: scaleX(-1);
}
.camera-controls[data-v-e9978d98] {
  padding: var(--space-wide);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-backdrop);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 카메라 컨테이너(검정 배경)에서 아이콘 버튼 색 보정 */
.camera-icon-btn.app-btn[data-v-e9978d98] {
  color: var(--ink-on-solid);
  background: var(--bg-active);
  border-radius: var(--radius-pill);
  width: 48px;
  height: 48px;
}
.camera-icon-btn.app-btn[data-v-e9978d98]:hover {
  background: var(--bg-hover);
  color: var(--ink-on-solid);
}
.btn-capture[data-v-e9978d98] {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  border: var(--line-accent) solid var(--bg-paper);
  padding: var(--space-tight);
}
.capture-inner[data-v-e9978d98] {
  width: 100%;
  height: 100%;
  background: var(--bg-paper);
  border-radius: var(--radius-pill);
  transition: transform var(--motion-fast);
}
.btn-capture:active .capture-inner[data-v-e9978d98] {
  transform: scale(0.9);
}

.avatar-grid[data-v-6fd48fec] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: var(--gap-group);
}
.avatar-item[data-v-6fd48fec] {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: var(--line-w-thick) solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: transform var(--motion-base), border-color var(--motion-base);
}
.avatar-item[data-v-6fd48fec]:hover {
  transform: scale(1.1);
  border-color: var(--ink-brand);
}
.avatar-item img[data-v-6fd48fec] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-13377dd9] {
  margin: 0;
}
.page__desc[data-v-13377dd9] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-13377dd9] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-13377dd9],
.page__card > .tab-nav[data-v-13377dd9] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-13377dd9] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-13377dd9] {
    padding: var(--space-snug);
}
}

/* 제목 + 우측 버튼을 한 줄에 */
.section-header--inline[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
}

/* 항목이 많아 화면을 밀지 않도록 높이를 제한하고 안에서 스크롤 */
.newsletter-pref--scroll[data-v-13377dd9] {
  max-height: 320px;
  overflow-y: auto;
}

/* 항목이 여러 줄 이어지므로 행마다 구분선·여백을 둔다 */
.newsletter-pref--scroll .newsletter-pref__row[data-v-13377dd9] {
  padding: var(--space-snug) 0;
  border-bottom: var(--line-strong);
}
.newsletter-pref--scroll .newsletter-pref__row[data-v-13377dd9]:last-child {
  border-bottom: none;
}

/* 툴바 구성 목록 — 차례 바꾸기.
   원본: 손잡이는 TableSettingsModal 의 .tsm-col__handle,
        끌고 놓는 표시는 ListBody 의 .is-dragging / .is-drop-before|after (행 정렬의 선례). */
.toolbar-pref__handle[data-v-13377dd9] {
  display: flex;
  justify-content: center;
  width: 1rem;
  color: var(--ink-muted);
  margin-right: var(--gap-inline);
  cursor: grab;
}

/* ⛔ 이 행은 자식이 «셋»(손잡이·글자·체크)이다 — 부모의 space-between 에 맡기면
   글자가 한가운데로 벌어진다(2026-09-12 사용자 지적). 글자가 남은 폭을 가져간다. */
.toolbar-pref__row .newsletter-pref__text[data-v-13377dd9] {
  flex: 1;
  /* 폭이 남는데 이름과 설명이 위아래로 서던 것 — 나란히 세우고, 좁아지면 접힌다
     (창 폭이 아니라 «판 폭»이 정한다). */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: var(--gap-group);
       column-gap: var(--gap-group);
}
.toolbar-pref__search[data-v-13377dd9] {
  margin-bottom: var(--gap-stack);
}
.toolbar-pref__row.is-dragging[data-v-13377dd9] { opacity: 0.45;
}
.toolbar-pref__row.is-drop-before[data-v-13377dd9],
.toolbar-pref__row.is-drop-after[data-v-13377dd9] {
  position: relative;
  z-index: 1; /* css-ignore: 삽입선을 인접 행 위로 겹치는 로컬 stacking(전역 레이어 아님) */
}
.toolbar-pref__row.is-drop-before[data-v-13377dd9]::before,
.toolbar-pref__row.is-drop-after[data-v-13377dd9]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bg-brand-vivid);
  pointer-events: none;
}
.toolbar-pref__row.is-drop-before[data-v-13377dd9]::before { top: -1px;
}
.toolbar-pref__row.is-drop-after[data-v-13377dd9]::after { bottom: -1px;
}

/* 툴바 구성 목록 — 항목 앞 아이콘 */
.toolbar-pref__icon[data-v-13377dd9] {
  width: 1rem;
  text-align: center;
  color: var(--ink-secondary);
  margin-right: var(--gap-glyph);
}
.page[data-v-13377dd9] {
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page__card[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 모든 탭의 좌우 여백을 1.5rem 으로 통일 (AdminSettingsView 기준).
   admin 자식 컴포넌트는 자체 1.5rem 패딩을 가지므로 .tab-pane--admin 은 무패딩,
   자체 패딩이 없는 탭(프로필/활동/규칙/파싱작업)은 래퍼에서 동일 값으로 패딩. */
.settings-container[data-v-13377dd9] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pad-page-x) var(--pad-page-x) var(--space-band);
}

/* 카탈로그 탭은 자체 padding-bottom (1.5rem) 으로 처리 — settings-container 의 3rem 추가 안 들어가게 */
.settings-container[data-v-13377dd9]:has(> .tab-pane--catalog) {
  padding-bottom: 0;
}

/* 카탈로그 tab-pane 이 viewport 잔여 공간을 채우도록 min-height + flex 컨테이너로
   ─ admin-settings 처럼 pagination 아래 여백이 항상 catalog-config 의 padding-bottom 만큼만 남음 */
.tab-pane--catalog[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.tab-pane--catalog[data-v-13377dd9] > * {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* 탭 네비게이션은 공통 TabNav 컴포넌트가 담당 */

/* 후처리 규칙 탭 — 자식 컴포넌트가 전체 높이 사용 */
.tab-pane--rules[data-v-13377dd9] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ⛔ 여백을 주지 않는다 — 이 판이 품는 것은 ListScreen 이고 그것이 제 여백(--pad-page-x)을
     이미 갖는다. 판이 또 주면 두 겹이 되고, 「탭 판 위 여백」이 다른 168곳(0px)과 갈린다
     (lint:place 2026-09-13). 자식이 제 여백을 갖는 자리의 규약은 .tab-pane--admin 과 같다. */
}
.tab-pane--rules[data-v-13377dd9] > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* 파싱 작업 탭 — 후처리 규칙과 동일 패턴 */
.tab-pane--parsing-jobs[data-v-13377dd9] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ⛔ 여백을 주지 않는다 — 이 판이 품는 것은 ListScreen 이고 그것이 제 여백(--pad-page-x)을
     이미 갖는다. 판이 또 주면 두 겹이 되고, 「탭 판 위 여백」이 다른 168곳(0px)과 갈린다
     (lint:place 2026-09-13). 자식이 제 여백을 갖는 자리의 규약은 .tab-pane--admin 과 같다. */
}
.tab-pane--parsing-jobs[data-v-13377dd9] > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* 권한 기반 admin 탭 — 페인 자체가 잔여 높이 채우고 내부 스크롤
   admin 자식 컴포넌트(AdminSystemMonitoring 등)는 AdminSettingsView 의
   무패딩 .tab-pane 기준으로 자체 패딩을 가짐 → 여기서 패딩을 더하면 이중 패딩.
   AdminSettingsView .tab-pane 과 동일하게 패딩 없이 둔다. */
.tab-pane--admin[data-v-13377dd9] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tab-pane--admin[data-v-13377dd9] > * {
  width: 100%;
}

/* 활동 탭 */
.tab-pane--activity[data-v-13377dd9] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ⛔ 여백을 주지 않는다 — 이 판이 품는 것은 ListScreen 이고 그것이 제 여백(--pad-page-x)을
     이미 갖는다. 판이 또 주면 두 겹이 되고, 「탭 판 위 여백」이 다른 168곳(0px)과 갈린다
     (lint:place 2026-09-13). 자식이 제 여백을 갖는 자리의 규약은 .tab-pane--admin 과 같다. */
}
.tab-pane--activity[data-v-13377dd9] > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* 역할 + 경험치 (읽기 전용) */
.rolesxp-grid[data-v-13377dd9] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-group);
}
.rolesxp-card[data-v-13377dd9] {
  border: var(--line-strong);
  border-radius: var(--radius-float);
  background: var(--bg-field);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rolesxp-card-header[data-v-13377dd9] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-panel);
  background: var(--bg-card);
  border-bottom: var(--line-strong);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.rolesxp-card-header i[data-v-13377dd9] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}
.rolesxp-card-body[data-v-13377dd9] {
  padding: var(--pad-card);
}
.rolesxp-loading[data-v-13377dd9],
.rolesxp-empty[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--ink-muted);
  font-size: var(--size-label);
}
.rolesxp-loading i[data-v-13377dd9] {
  font-size: var(--icon-lead);
  color: var(--ink-brand);
}
.role-tags[data-v-13377dd9] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.xp-list[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.xp-row[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--pad-row-dense);
  border-bottom: var(--line-w) dashed var(--line-color);
}
.xp-row[data-v-13377dd9]:last-child {
  border-bottom: none;
}
.xp-row-left[data-v-13377dd9] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.xp-icon[data-v-13377dd9] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}
.xp-label[data-v-13377dd9] {
  font-size: var(--size-body);
  color: var(--ink-primary);
  font-weight: var(--weight-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xp-row-right[data-v-13377dd9] {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
.xp-count[data-v-13377dd9] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.xp-unit[data-v-13377dd9] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.xp-last[data-v-13377dd9] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-left: var(--gap-inline);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
.xp-row[data-v-13377dd9] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-glyph);
}
.xp-row-right[data-v-13377dd9] {
    width: 100%;
    justify-content: flex-end;
}
}

/* 섹션 */
.settings-section[data-v-13377dd9] {
  margin-bottom: var(--gap-page);
  padding: 0;
  background: transparent;
  border: none;
}
.section-header[data-v-13377dd9] {
  margin-bottom: var(--gap-band);
  padding-bottom: var(--space-roomy);
  border-bottom: var(--line-strong);
}
.section-title[data-v-13377dd9] {
  margin: 0;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.section-title i[data-v-13377dd9] {
  font-size: var(--icon-lead);
  color: var(--ink-brand);
}

/* 뉴스레터 구독 설정 */
.newsletter-pref[data-v-13377dd9] {
  padding: var(--pad-panel);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-control);
}

/* 마케팅 수신 동의 변경 이력 */
.marketing-history[data-v-13377dd9] {
  margin-top: var(--gap-stack);
  padding-top: var(--space-cozy);
  border-top: var(--line-strong);
}
.marketing-history__label[data-v-13377dd9] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}

/* 개인정보·내 권리 */
.privacy-block[data-v-13377dd9] { margin-bottom: var(--gap-group);
}
.privacy-legal[data-v-13377dd9] { display: flex; flex-wrap: wrap; gap: var(--gap-inline);
}
.privacy-legal__link[data-v-13377dd9] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--space-tight) var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-brand);
  text-decoration: none;
  border: var(--line-strong);
  border-radius: var(--radius-control);
}
.privacy-legal__link[data-v-13377dd9]:hover { background: var(--bg-hover);
}
.privacy-legal__link i[data-v-13377dd9] { font-size: var(--icon-label);
}
.privacy-block__label[data-v-13377dd9] {
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.privacy-consents[data-v-13377dd9] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.privacy-consents__item[data-v-13377dd9] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-label);
}
.privacy-consents__state[data-v-13377dd9] { color: var(--ink-secondary);
}
.privacy-consents__date[data-v-13377dd9] { margin-left: auto; color: var(--ink-muted); font-size: var(--size-label);
}
.privacy-consents__empty[data-v-13377dd9] { font-size: var(--size-label); color: var(--ink-muted);
}
.privacy-danger[data-v-13377dd9] {
  border: var(--line-w) solid var(--ink-danger);
  border-radius: var(--radius-control);
  padding: var(--pad-panel);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.privacy-danger__row[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
}
.privacy-danger__text[data-v-13377dd9] { display: flex; flex-direction: column; gap: var(--gap-glyph); min-width: 0;
}
.privacy-danger__label[data-v-13377dd9] { font-size: var(--size-body); font-weight: var(--weight-label); color: var(--ink-primary);
}
.privacy-danger__label--danger[data-v-13377dd9] { color: var(--ink-danger);
}
.privacy-danger__desc[data-v-13377dd9] { font-size: var(--size-label); color: var(--ink-secondary);
}
.privacy-danger__warn[data-v-13377dd9] { color: var(--ink-danger);
}
.newsletter-pref__row[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
}
.newsletter-pref__text[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  min-width: 0;
}
.newsletter-pref__label[data-v-13377dd9] {
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.newsletter-pref__desc[data-v-13377dd9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.newsletter-pref__meta[data-v-13377dd9] {
  font-size: var(--size-meta);
  color: var(--ink-warning);
  margin-top: var(--gap-glyph);
}

/* 프로필 컨텐츠 */
.profile-content[data-v-13377dd9] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-page);
  align-items: start;
}

/* 아바타 섹션 */
.avatar-section[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
  padding: var(--pad-card);
}
.avatar-wrapper[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  position: relative;
}
.avatar-remove-btn[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  position: absolute;
  top: 0;
  right: -10px;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--bg-field);
  border: var(--line-strong);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--motion-base) ease;
  z-index: 20;
}
.avatar-remove-btn[data-v-13377dd9]:hover {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  background: var(--bg-hover);
  color: var(--ink-danger);
  transform: scale(1.1);
}
.avatar-remove-btn i[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  font-size: var(--icon-header);
}
.avatar-container[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  width: 140px;
  height: 140px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: var(--line-accent) solid var(--ink-brand);
  box-shadow: var(--shadow-float);
  transition: all var(--motion-base) ease;
}
.avatar-container[data-v-13377dd9]:hover {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  transform: scale(1.05);
  box-shadow: var(--shadow-float);
}
.avatar-image[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.avatar-placeholder[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-brand) 0%, var(--bg-brand-lift) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-placeholder i[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  font-size: var(--icon-hero);
  color: var(--ink-on-solid);
}
.avatar-actions[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  display: flex;
  gap: var(--gap-stack);
  margin-top: var(--gap-stack);
}
.action-btn[data-v-13377dd9] {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-float);
  border: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-base);
}
.action-btn[data-v-13377dd9]:hover {
  background: var(--bg-hover);
  color: var(--ink-brand);
  border-color: var(--ink-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.action-btn i[data-v-13377dd9] {
  font-size: var(--icon-lead);
}
.avatar-info[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  text-align: center;
}
.avatar-label[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  margin: 0 0 var(--gap-glyph);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.avatar-hint[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 프로필 폼 */
.profile-form[data-v-13377dd9],
.password-content[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.social-user-notice {
&[data-v-13377dd9] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-stack);
  padding: var(--pad-card);
  background: var(--bg-info-soft);
  border-radius: var(--radius-card);
  border-left: var(--line-accent) solid var(--ink-info);
  }
i[data-v-13377dd9] {
    color: var(--ink-info);
    font-size: var(--icon-header);
    flex-shrink: 0;
}
p[data-v-13377dd9] {
    margin: 0;
    color: var(--ink-secondary);
    font-size: var(--size-body);
    line-height: var(--line-normal);
}
}
.form-group[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.form-label[data-v-13377dd9] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.form-label i[data-v-13377dd9] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
}
.form-input[data-v-13377dd9] {
  padding: var(--space-roomy) var(--space-roomy);
  font-size: var(--size-body);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-page);
  color: var(--ink-primary);
  transition: all var(--motion-base) ease;
}
.form-input[data-v-13377dd9]:hover:not(:disabled) {
  border-color: var(--ink-brand);
}
.form-input[data-v-13377dd9]:focus {
  outline: none;
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.form-input[data-v-13377dd9]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-page);
}
.form-input--verified[data-v-13377dd9] {
  border-color: var(--ink-success);
  background: var(--bg-brand-soft);
}
.form-input--verified[data-v-13377dd9]:hover:not(:disabled) {
  border-color: var(--ink-success);
}
.form-input--verified[data-v-13377dd9]:focus {
  border-color: var(--ink-success);
  box-shadow: var(--ring-focus);
}
.form-hint[data-v-13377dd9] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.input-error[data-v-13377dd9] {
  border-color: var(--ink-danger) !important;
}
.text-error[data-v-13377dd9] {
  color: var(--ink-danger) !important;
}
.form-error[data-v-13377dd9] {
  font-size: var(--size-label);
  color: var(--ink-danger);
  margin: 0;
}

/* 버튼 */
.form-actions[data-v-13377dd9] {
  display: flex;
  gap: var(--gap-group);
  margin-top: var(--gap-inline);
}
.form-actions--separated[data-v-13377dd9] {
  justify-content: space-between;
  margin-top: 0;
  padding-top: var(--space-band);
  border-top: var(--line-strong);
}

/* btn-primary/btn-cancel/btn-password → AppButton variants */

/* 반응형 */
@media (max-width: 1024px) {
.profile-content[data-v-13377dd9] {
    grid-template-columns: 1fr;
    gap: var(--gap-page);
}
.avatar-section[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-band);
}
.avatar-info[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    text-align: left;
}
.settings-container[data-v-13377dd9] {
    padding: var(--space-band) var(--space-band) var(--space-wide);
}
}
@media (max-width: 768px) {
.settings-container[data-v-13377dd9] {
    padding: var(--pad-card);
}
.settings-section[data-v-13377dd9] {
    padding: 0;
    margin-bottom: var(--gap-band);
}
.section-header[data-v-13377dd9] {
    margin-bottom: var(--gap-group);
    padding-bottom: var(--space-cozy);
}
.section-title[data-v-13377dd9] {
    font-size: var(--size-title-sm);
}

  /* 아바타: 폰에서는 다시 중앙 정렬 column */
.avatar-section[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    flex-direction: column;
    align-items: center;
    gap: var(--gap-group);
    padding: var(--space-snug) 0;
}
.avatar-info[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    text-align: center;
}
.avatar-container[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    width: 110px;
    height: 110px;
}
.avatar-placeholder i[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    font-size: var(--icon-hero);
}

  /* 폼 액션: 풀폭, 주요 버튼이 위로 */
.form-actions[data-v-13377dd9] {
    flex-direction: column;
    gap: var(--gap-stack);
}
.form-actions--separated[data-v-13377dd9] {
    flex-direction: column-reverse;
    gap: var(--gap-stack);
    padding-top: var(--space-roomy);
}
.form-actions[data-v-13377dd9] .app-btn {
    width: 100%;
    justify-content: center;
}

  /* 이메일 인풋 + 인증 버튼 세로 스택 */
.email-input-row[data-v-13377dd9] {
    flex-direction: column;
    gap: var(--gap-inline);
}
.btn-verify[data-v-13377dd9] {
    width: 100%;
    justify-content: center;
}

  /* 모달: 폰에서 패딩 줄이고 액션 풀폭 */
.modal-body[data-v-13377dd9] {
    padding: 0;
    gap: var(--gap-group);
}
.modal-actions[data-v-13377dd9] {
    flex-direction: column-reverse;
    gap: var(--gap-inline);
}
.form-input--code[data-v-13377dd9] {
    letter-spacing: 0.35rem;
    font-size: var(--size-title-sm);
}
}
@media (max-width: 480px) {
.section-title[data-v-13377dd9] {
    font-size: var(--size-lead);
}
.section-title i[data-v-13377dd9] {
    font-size: var(--icon-header);
}
.settings-container[data-v-13377dd9] {
    padding: var(--space-cozy);
}
.avatar-actions[data-v-13377dd9] {  /* component-ignore: 프로필 사진을 **고르고 바꾸는** 자리다 — UserAvatar 는 uid 로 저장된 아바타를 그리므로, 고르는 중인 파일(objectURL) 미리보기·지우기 단추·안내문을 대신할 수 없다 */
    gap: var(--gap-inline);
}
.action-btn[data-v-13377dd9] {
    width: var(--h-control-lg);
    height: var(--h-control-lg);
}
.action-btn i[data-v-13377dd9] {
    font-size: var(--icon-header);
}
.form-input[data-v-13377dd9] {
    padding: var(--space-cozy) var(--space-roomy);
    font-size: var(--size-body);
}
.form-input--code[data-v-13377dd9] {
    letter-spacing: 0.3rem;
    font-size: var(--size-lead);
}
.modal-body[data-v-13377dd9] {
    padding: 0;
}
.email-verified-mark[data-v-13377dd9] {
    margin-left: 0;
}
}

/* 모달 스타일 */
.modal-title[data-v-13377dd9] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.modal-title i[data-v-13377dd9] {
  font-size: var(--icon-header);
  color: var(--ink-brand);
}
.modal-body[data-v-13377dd9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.modal-actions[data-v-13377dd9] {
  display: flex;
  gap: var(--gap-stack);
  margin-top: var(--gap-inline);
}

/* modal-actions: btn-cancel → AppButton secondary, btn-primary → AppButton primary */
.modal-actions[data-v-13377dd9] .app-btn {
  flex: 1;
  justify-content: center;
}
.general-error[data-v-13377dd9] {
  text-align: center;
  padding: var(--space-cozy);
  background: var(--bg-danger-soft);
  border-radius: var(--radius-card);
}
.confirm-desc[data-v-13377dd9] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-normal);
}

/* 이메일 인증 관련 스타일 */
.email-input-row[data-v-13377dd9] {
  display: flex;
  gap: var(--gap-stack);
}
.email-input-row .form-input[data-v-13377dd9] {
  flex: 1;
}

/* btn-verify → AppButton secondary md (입력과 동일 높이 정렬, layout: flex-shrink) */
.btn-verify[data-v-13377dd9] {
  flex-shrink: 0;
}
.email-verified-mark[data-v-13377dd9] {
  margin-left: var(--gap-inline);
}
.email-verified-mark i[data-v-13377dd9] {
  font-size: var(--icon-label);
}
.email-warning[data-v-13377dd9] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
  padding: var(--space-cozy);
  background: var(--bg-warning-soft);
  border-radius: var(--radius-card);
  border-left: var(--line-accent) solid var(--ink-warning);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-comfortable);
}
.email-warning i[data-v-13377dd9] {
  color: var(--ink-warning);
  font-size: var(--icon-toolbar);
  flex-shrink: 0;
}
.email-code-label-row[data-v-13377dd9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.email-code-timer[data-v-13377dd9] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}
.email-code-timer--warning[data-v-13377dd9] {
  color: var(--ink-warning-hover);
}
.email-code-timer--expired[data-v-13377dd9] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
}
.form-input--code[data-v-13377dd9] {
  letter-spacing: 0.5rem;
  text-align: center;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
}

/* resend-btn → AppButton ghost sm (layout: width+margin) */
.resend-btn[data-v-13377dd9] {
  width: 100%;
  margin-top: var(--gap-inline);
  text-decoration: underline;
}

.appearance[data-v-a9da0d4a] {
  display: flex;
  flex-direction: column;
  /* ⛔ 탭 판 안 블록 사이는 --gap-pane 하나다 — 다른 탭과 어긋나면 탭을 옮길 때 자리가 덜컹인다 */
  gap: var(--gap-pane);
  /* 판이 탭 바와 오른쪽 끝에 붙지 않게 숨 쉴 자리를 준다(사용자 지시 2026-08-29).
     ⛔ 값은 다른 탭과 같은 --page-pad-x 다 — 이 탭만 다르면 탭을 옮길 때 자리가 덜컹인다
        (실측 2026-08-29: 화면 모양 12px vs 나머지 16px). */
  padding: var(--pad-page-x);
}
.appearance__picks[data-v-a9da0d4a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  /* 제목·설명 아래에 가운데로 모은다 */
  justify-content: center;
}

/* 정사각 타일 — 색을 크게 보여 주는 자리라 글자 버튼보다 크다.
   AppButton 의 기본 크기를 덮으므로 두 겹 선택자로 이긴다. */
.appearance__picks .appearance__pick[data-v-a9da0d4a] {
  width: 4.5rem;
  height: 4.5rem;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug);
  border-radius: var(--radius-card);
}
.appearance__picks .appearance__pick--on[data-v-a9da0d4a] {
  border-color: var(--ink-brand);
  box-shadow: var(--ring-focus);
}
.appearance__pick-swatch[data-v-a9da0d4a] {
  /* 색과 **모서리**를 함께 보여 주는 견본 — 라운드는 각 테마 값이 인라인으로 들어온다 */
  width: var(--icon-lead);
  height: var(--icon-lead);
  flex: none;
}
.appearance__picks .appearance__pick[data-v-a9da0d4a] .app-btn__label {
  font-size: var(--size-meta);
  line-height: var(--line-none);
}
.appearance__fields[data-v-a9da0d4a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-group);
  margin-bottom: var(--gap-stack);
}
.appearance__field[data-v-a9da0d4a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.appearance__field-label[data-v-a9da0d4a] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.appearance__field .appearance__font[data-v-a9da0d4a] {
  flex: none;
  width: 12rem;
}
.appearance__swatch[data-v-a9da0d4a] {
  width: var(--icon-marker);
  height: var(--icon-marker);
  border-radius: var(--radius-pill);
  display: inline-block;
}

/* 열 수는 **창 폭이 아니라 이 판의 폭**이 정한다 — 곁막대·탭이 폭을 먹어 창이 1,100px 이어도
   판은 822px 이다. 옛 `@media (max-width: 900px)` 는 기본 규칙보다 위에 적혀 덮여 있었고,
   그래서 640px 까지 줄여도 계속 2열이었다(실측 2026-08-29). */
.appearance__seeds-pane[data-v-a9da0d4a] { container-type: inline-size;
}
.appearance__seeds[data-v-a9da0d4a] {
  /* **2열 고정** — auto-fit 은 넓은 화면에서 3열까지 벌어졌다(실측 1162px 에서 3열). */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: var(--gap-group);
       column-gap: var(--gap-group);
  row-gap: var(--gap-stack);
}

/* 판이 800px 아래면 1열 — 실측 근거: 판 822px 에서 슬라이더가 235px 로 아직 쓸 만하고,
   746px 에서 197px, 542px 에서는 슬라이더가 라벨 아래로 떨어지는 줄바꿈이 11곳 났다. */
@container (max-width: 800px) {
.appearance__seeds[data-v-a9da0d4a] { grid-template-columns: minmax(0, 1fr);
}
}
.appearance__seed[data-v-a9da0d4a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}
.appearance__label[data-v-a9da0d4a] {
  /* 라벨 폭만 고정하면 행끼리 저절로 맞는다 — 격자가 필요 없다 */
  width: 6.5rem;
  flex: none;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

/* 탭 설정은 한 줄에 하나씩 — 씨앗 격자(2열)에 넣으면 라디오가 좁게 눌린다 */
.appearance__rows[data-v-a9da0d4a] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}

/* 미리보기 판 — 좁게 잡아야 「넘칠 때」가 실제로 드러난다 */
/* 설정과 미리보기를 한 줄에 — 좁아지면 미리보기가 아래로 내려간다(사용자 지시 2026-09-02).
   ⛔ 창 폭 기준 미디어쿼리를 새로 두지 않는다. 각자 최소폭을 갖고 `wrap` 으로 저절로 내려간다. */
.appearance__pair[data-v-a9da0d4a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-group);
}
.appearance__pair > .appearance__seed[data-v-a9da0d4a] {
  flex: 1 1 20rem;
  min-width: 0;
}
.appearance__preview[data-v-a9da0d4a] {
  flex: 0 1 auto;
  margin-top: var(--gap-inline);
  border: var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  background: var(--bg-page);
  overflow: hidden;
}

/* 「넘칠 때」는 좁아야 넘친다 · 「남는 자리」는 다 들어가야 늘리기가 보인다 */
.appearance__preview--narrow[data-v-a9da0d4a] { flex-basis: 18rem; max-width: 20rem;
}
.appearance__preview--wide[data-v-a9da0d4a] { flex-basis: 24rem; max-width: 28rem;
}
.appearance__choices[data-v-a9da0d4a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  align-items: center;
}
.appearance__note[data-v-a9da0d4a] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.appearance__slider[data-v-a9da0d4a] {
  /* ⛔ 폭을 묶지 않는다 — 판은 1,162px 인데 슬라이더만 280px 로 잘려 오른쪽이 통째로 비어 있었다
     (사용자 지적 2026-08-29). 라벨과 값이 제 폭을 가져가고, 남는 자리는 전부 슬라이더가 채운다. */
  flex: 1 1 10rem;
  min-width: 0;
}
.appearance__color[data-v-a9da0d4a] {
  flex: none;
  width: 4rem;
  height: var(--h-control-sm);
  padding: 0;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-field);
  cursor: pointer;
  overflow: hidden;
}

/* ⛔ 색 칸 안쪽은 브라우저가 따로 그린다 — 바깥 라운드를 안 따라와서
   모서리를 키우면 네모난 채우기가 삐져나온다(사용자 지적 2026-08-29, Firefox). */
.appearance__color[data-v-a9da0d4a]::-moz-color-swatch {
  border: none;
  border-radius: inherit;
}
.appearance__color[data-v-a9da0d4a]::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
}
.appearance__color[data-v-a9da0d4a]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}
.appearance__font[data-v-a9da0d4a] {
  /* 슬라이더와 같은 자리를 차지한다 — 줄이 어긋나지 않게 */
  flex: 1 1 10rem;
  min-width: 0;
}

/* 글자가 붙는 값(「480px 미만」·「항상 표」)은 3rem 에 넣으면 단어 중간에서 4줄로 쪼개진다.
   그 자리만 제 글자 폭을 갖고 줄바꿈하지 않는다(사용자 지적 2026-09-02). */
.appearance__value--wide[data-v-a9da0d4a] {
  width: auto;
  min-width: 5rem;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.appearance__value[data-v-a9da0d4a] {
  /* 값이 길어져도(1.22 · 16px) 슬라이더 끝이 흔들리지 않게 폭을 못 박는다 */
  flex: none;
  width: 3rem;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.appearance__verdict[data-v-a9da0d4a] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  margin-top: var(--gap-stack);
  padding-top: var(--gap-stack);
  border-top: var(--line-soft);
}
.appearance__verdict-label[data-v-a9da0d4a] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.appearance__code[data-v-a9da0d4a] {
  height: 14rem; /* dimensions-ignore: 코드 편집기 높이 — 여러 줄을 한눈에 보는 자리라 사다리 밖 */
  border: var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.appearance__hint[data-v-a9da0d4a] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}


.jobs-config[data-v-a72c6ecb] {
  /* 위 여백 0 — 서브탭(TabNav variant=sub)이 자체 margin 으로 간격을 소유 */
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 서브탭 본문 — 내부 ListScreen 이 남는 공간을 채우고 자체 스크롤 */
.section[data-v-a72c6ecb] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.section[data-v-a72c6ecb] .list-screen {
  flex: 1;
  min-height: 0;
  padding-top: 0;
}
.page[data-v-80be0f86] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-80be0f86] {
  margin: 0;
}
.page__desc[data-v-80be0f86] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-80be0f86] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-80be0f86],
.page__card > .tab-nav[data-v-80be0f86] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-80be0f86] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-80be0f86] {
    padding: var(--space-snug);
}
}
.page[data-v-80be0f86] {
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4.5rem - 3rem); /* Topbar(~4.5rem) + padding(3rem) */
  overflow: hidden;
}
.page__header[data-v-80be0f86] {
  flex: 0 0 auto;
}
.page__card[data-v-80be0f86] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  height: 0; /* flex item이 부모 높이에 맞추도록 */
  /* 페이지 단위 판 — 다크에서 비워 바탕 글로우가 비치게 (라이트는 면색 유지).
     ⛔ 카드·모달·드롭다운은 이걸 쓰지 않는다 — 바탕 위에 떠야 하므로 불투명이라야 한다. */
  background: var(--bg-page);
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 서브 탭 바도 본문과 같은 세로선에서 — 메인 탭 바 쪽 규칙은 shared.css 소관.
   ⛔ 탭 판 **바로 아래 한 겹**만 잡는다(`> * >`) — 판 안쪽에 또 있는 서브 탭
      (예: 팩터 편집 판)까지 들여쓰면 그 판만 어긋난다. */
.tab-pane[data-v-80be0f86] > * > .tab-nav--sub {
  padding-inline: var(--pad-page-x);
}

/* 서브탭 **본문**도 탭 글자와 같은 세로선에서 시작한다.
   ⛔ 이 규칙이 없으면 **ListScreen 을 쓰지 않는 판**(파싱›모니터링·보관, 추출›모니터링 …)이
      판 끝에 붙는다. 6797b457 이 「여백은 ListScreen 이 각자 갖는다」며 바깥 좌우를 0 으로
      바꿨는데, 그 골격을 쓰지 않는 판에는 그 전제가 성립하지 않았다(사용자 지적 2026-08-29).
      실측(창 1440): 서브탭 글자 248px · ListScreen 화면 236px · 이 판들 **220px**.
   ⛔ 이미 안여백을 갖는 판에 두 겹으로 주지 않도록 `:has(.list-screen)` 인 판은 뺀다. */
.tab-pane[data-v-80be0f86] > * > .section:not(:has(.list-screen)) {
  padding-inline: var(--pad-page-x);
}

/* 탭 컨텐츠 */
.tabs-content[data-v-80be0f86] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tab-pane[data-v-80be0f86] {
  animation: fadeIn-80be0f86 0.3s ease-in-out;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tab-pane--fixed[data-v-80be0f86] {
  overflow: hidden;
}
.tab-pane[data-v-80be0f86] > * {
  width: 100%;
}
.tabs-content[data-v-80be0f86]::-webkit-scrollbar {
  width: 8px;
}
.tabs-content[data-v-80be0f86]::-webkit-scrollbar-track {
  background: var(--bg-field);
  border-radius: var(--radius-badge);
}
.tabs-content[data-v-80be0f86]::-webkit-scrollbar-thumb {
  background: var(--ink-muted);
  border-radius: var(--radius-badge);
  border: var(--line-w-thick) solid var(--bg-field);
}
.tabs-content[data-v-80be0f86]::-webkit-scrollbar-thumb:hover {
  background: var(--bg-brand-vivid);
}
.tab-pane[data-v-80be0f86] {
  animation: fadeIn-80be0f86 0.3s ease-in-out;
}
@keyframes fadeIn-80be0f86 {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@media (max-width: 768px) {
.tab-pane--fixed[data-v-80be0f86] {
    overflow: auto !important;
}
}

.forbidden[data-v-6d20a4e9] {
  text-align: center;
  padding: var(--space-wide) var(--space-roomy);
  min-height: 100vh;
  min-height: var(--vh, 100vh);
  min-height: 100dvh;
  background: var(--bg-page);
}
.forbidden h2[data-v-6d20a4e9] {
  font-size: var(--size-display);
  margin-bottom: var(--gap-group);
  color: var(--ink-primary);
}
.forbidden p[data-v-6d20a4e9] {
  font-size: var(--size-lead);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-page);
}
.forbidden__cta[data-v-6d20a4e9] {
  display: inline-flex;
  margin-top: var(--gap-group);
  /* ⛔ 채워진 브랜드 면은 --bg-brand 다(--bg-brand-vivid 아님) — 다크의 vivid(#10b981)는
     밝아서 흰 글씨가 2.54:1 로 본문 AA(4.5) 미달이었다. 2026-08-29 처방 그대로
     **잉크가 아니라 면을 한 단 깊게** 한다(AppButton primary 와 같은 자리). */
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  padding: var(--space-cozy) var(--space-band);
  border-radius: var(--radius-float);
  text-decoration: none;
  transition: opacity var(--motion-base) ease;
}
.forbidden__cta[data-v-6d20a4e9]:hover {
  opacity: 0.9;
}
.page[data-v-438fb3b2] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  flex: 1 1 auto;
  min-height: 0;
}
.page__header h2[data-v-438fb3b2] {
  margin: 0;
}
.page__desc[data-v-438fb3b2] {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-secondary);
}
.page__card[data-v-438fb3b2] {
  /* 페이지 판도 껍데기다 — 다크에서 비워 바탕이 비치게 한다.
     ⛔ 카드(--card-bg)와 헷갈리지 말 것: 카드는 바탕 '위에 떠 있어야' 하므로 불투명이다. */
  background: var(--bg-page);
  border: var(--line-w) solid var(--line-color);
  border-radius: var(--radius-card);
  padding: var(--space-band);
}

/* 화면 탭 바는 본문과 같은 세로선에서 시작한다 — 글자가 화면 가장자리에 붙지 않게.
   ⛔ 밑줄 띠(border-bottom)는 그대로 끝에서 끝까지 간다(안여백은 테두리 안쪽이므로).
   본문 쪽 여백은 목록 골격(ListScreen)이 이미 --page-pad-x 로 갖고 있어, 두 자리가
   같은 토큰이라야 탭과 본문의 왼쪽 선이 어긋나지 않는다(실측 2026-08-29: 탭 0 / 본문 16). */
.page > .tab-nav[data-v-438fb3b2],
.page__card > .tab-nav[data-v-438fb3b2] {
  padding-inline: var(--pad-page-x);
}
@media (max-width: 768px) {
.page__desc[data-v-438fb3b2] {
    font-size: var(--size-label);
    line-height: var(--line-normal);
    margin-top: var(--gap-glyph);
}
}
@media (max-width: 480px) {
.page__card[data-v-438fb3b2] {
    padding: var(--space-snug);
}
}
.doc-viewer-page[data-v-438fb3b2] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.doc-viewer-card[data-v-438fb3b2],
.page__card.doc-viewer-card[data-v-438fb3b2] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
  border-radius: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden;
}

/* ─── 문서 네비게이션 헤더 ─── */
.doc-nav-header[data-v-438fb3b2] {
  padding: var(--pad-panel);
  border-bottom: var(--line-strong);
  flex-shrink: 0;
  background: var(--bg-page);
}
.doc-nav-header__product-row[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-inline) var(--gap-inline);
  margin-bottom: var(--gap-inline);
}
.doc-nav-header__product[data-v-438fb3b2] {
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  line-height: var(--line-comfortable);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}
.doc-nav-header__doctype[data-v-438fb3b2] {
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-nav-header__doctype-select[data-v-438fb3b2] {
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-snug);
  height: 1.5rem;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
}
.doc-nav-header__doctype-select[data-v-438fb3b2]:hover {
  border-color: var(--ink-brand);
}
.doc-nav-header__doctype-select[data-v-438fb3b2]:focus {
  border-color: var(--ink-brand);
  box-shadow: 0 0 0 var(--line-w) var(--ink-brand);
}
.doc-nav-header__version[data-v-438fb3b2] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-muted);
}
.doc-nav-header__version-nav[data-v-438fb3b2] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  flex-shrink: 0;
}
.doc-nav-header__version-select[data-v-438fb3b2] {
  font-size: var(--size-meta);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  background: var(--bg-page);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
  height: 1.5rem;
  cursor: pointer;
  outline: none;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  min-width: 2.5rem;
}
.doc-nav-header__version-select[data-v-438fb3b2]:hover {
  border-color: var(--ink-brand);
}
.doc-nav-header__version-select[data-v-438fb3b2]:focus {
  border-color: var(--ink-brand);
  box-shadow: 0 0 0 var(--line-w) var(--ink-brand);
}
.doc-nav-header__version-btn[data-v-438fb3b2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--size-meta);
  cursor: pointer;
  padding: 0;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.doc-nav-header__version-btn[data-v-438fb3b2]:hover:not(:disabled) {
  background: var(--bg-page);
  color: var(--ink-primary);
}
.doc-nav-header__version-btn[data-v-438fb3b2]:disabled {
  opacity: 0.3;
  cursor: default;
}
.doc-nav-header__return-btn[data-v-438fb3b2] {
  color: var(--ink-brand);
}
.doc-nav-header__return-btn[data-v-438fb3b2]:hover:not(:disabled) {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
}
.doc-nav-header__compare-btn[data-v-438fb3b2] {
  color: var(--ink-success);
  font-size: var(--size-lead);
}
.doc-nav-header__compare-btn[data-v-438fb3b2]:hover:not(:disabled) {
  background: var(--bg-success);
  color: var(--ink-on-solid);
}
.doc-nav-header__details[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.doc-nav-header__left[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.doc-nav-header__company[data-v-438fb3b2] {
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.doc-nav-header__period[data-v-438fb3b2] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.doc-nav-header__right[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
.doc-nav-header__file-info[data-v-438fb3b2] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ─── 메타편집 진입 ─── */
.doc-nav-header__meta-action[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
.doc-nav-header__meta-face[data-v-438fb3b2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--line-w-thick) solid var(--bg-page);
  border-radius: var(--radius-pill);
  transition: transform var(--motion-fast);
  position: relative;
}
.doc-nav-header__meta-face--mine[data-v-438fb3b2] {
  cursor: pointer;
  border-color: var(--ink-brand);
  box-shadow: 0 0 0 var(--line-w) var(--ink-brand);
}
.doc-nav-header__meta-face--mine[data-v-438fb3b2]:hover {
  transform: scale(1.1);
}

/* 글자는 곁들이는 단(12px)이라 얼굴도 그 짝인 sm(20px) 이다 — 얼굴÷글자 비를 한 벌로 지킨다. */
.doc-nav-header__meta-worker[data-v-438fb3b2] {
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.doc-nav-header__meta-btn[data-v-438fb3b2] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  height: 1.5rem;
  padding: 0 var(--space-snug);
  font-size: var(--size-meta);
  background: transparent;
  color: var(--ink-secondary);
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  cursor: pointer;
  white-space: nowrap;
}
.doc-nav-header__meta-btn[data-v-438fb3b2]:hover {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.doc-nav-header__meta-btn[data-v-438fb3b2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── 문서 뷰어 ─── */
.doc-viewer-container[data-v-438fb3b2] {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: auto;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pdf-viewer-iframe[data-v-438fb3b2] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  display: block;
  margin: 0;
  padding: 0;
}
.onlyoffice-container[data-v-438fb3b2] {
  width: 100%;
  height: 100%;
  display: block;
}
.error-container[data-v-438fb3b2],
.loading-container[data-v-438fb3b2] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
}
.error-content[data-v-438fb3b2],
.loading-content[data-v-438fb3b2] {
  text-align: center;
}
.error-message[data-v-438fb3b2] {
  color: var(--ink-danger);
  font-size: var(--size-body);
  margin-top: var(--gap-inline);
}
.loading-message[data-v-438fb3b2] {
  color: var(--ink-secondary);
  font-size: var(--size-title-sm);
}
.error-title[data-v-438fb3b2] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  margin-bottom: var(--gap-glyph);
}

/* download-button → AppButton primary (layout: margin-top) */
.download-button[data-v-438fb3b2] {
  margin-top: var(--gap-group);
}
.download-only-container[data-v-438fb3b2] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
}
.download-only-content[data-v-438fb3b2] {
  text-align: center;
  max-width: 400px;
}
.download-only-icon[data-v-438fb3b2] {
  font-size: var(--icon-hero);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-group);
}
.download-only-title[data-v-438fb3b2] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  margin-bottom: var(--gap-inline);
}
.download-only-message[data-v-438fb3b2] {
  color: var(--ink-secondary);
  font-size: var(--size-body);
  margin-bottom: var(--gap-band);
  line-height: var(--line-normal);
}
.loading-spinner[data-v-438fb3b2] {
  width: 40px;
  height: 40px;  /* dimensions-ignore: 도는 표시(스피너) 원의 지름이다 — 컨트롤 높이가 아니라 그림 크기다 */
  border-radius: var(--radius-pill);
  border: var(--line-accent) solid var(--line-color);
  border-top-color: var(--ink-brand);
  animation: doc-spinner-438fb3b2 0.8s linear infinite;
  margin: 0 auto var(--gap-group);
}
@keyframes doc-spinner-438fb3b2 {
to {
    transform: rotate(360deg);
}
}
.pdf-loading-overlay[data-v-438fb3b2] {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
.doc-viewer-card[data-v-438fb3b2] {
    border: none;
}
.doc-nav-header[data-v-438fb3b2] {
    padding: var(--space-snug) var(--space-cozy);
}
.doc-nav-header__product[data-v-438fb3b2] {
    font-size: var(--size-label);
    flex-basis: 100%;
    text-align: center;
}
.doc-nav-header__doctype[data-v-438fb3b2] {
    font-size: var(--size-label);
}
  /* 모바일: 부수 정보(파일정보 #id/확장자/페이지/용량)는 생략 — 회사명/날짜/메타생성 액션만 노출 */
.doc-nav-header__file-info[data-v-438fb3b2] {
    display: none;
}
}

.pw-policy[data-v-889f2027] {
  list-style: none;
  margin: var(--gap-inline) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-glyph) var(--gap-stack);
}
.pw-policy__item[data-v-889f2027] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.pw-policy__icon[data-v-889f2027] {
  font-size: var(--icon-marker);
  color: var(--ink-muted);
}
.pw-policy__item--met[data-v-889f2027] {
  color: var(--ink-success);
}
.pw-policy__item--met .pw-policy__icon[data-v-889f2027] {
  color: var(--ink-success);
}
.pw-policy__item--pristine[data-v-889f2027] {
  color: var(--ink-muted);
}
.pw-policy__item--pristine .pw-policy__icon[data-v-889f2027] {
  color: var(--ink-muted);
}

.password-reset[data-v-d5afff8d] {
  width: 100%;
}
.password-reset__step[data-v-d5afff8d] {
  animation: slideIn-d5afff8d 0.3s ease-out;
}
.password-reset__step--success[data-v-d5afff8d] {
  text-align: center;
}
@keyframes slideIn-d5afff8d {
from { opacity: 0; transform: translateY(10px);
}
to { opacity: 1; transform: translateY(0);
}
}
.password-reset__description[data-v-d5afff8d] {
  margin-bottom: var(--gap-band);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-normal);
  text-align: center;
}
.password-reset__form[data-v-d5afff8d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.password-reset__field[data-v-d5afff8d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  text-align: left;
}
.password-reset__label[data-v-d5afff8d] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  font-weight: var(--weight-label);
}
.password-reset__input-wrapper[data-v-d5afff8d] {
  position: relative;
}
.password-reset__input[data-v-d5afff8d] {
  width: 100%;
}
.password-reset__input--code[data-v-d5afff8d] {
  letter-spacing: 0.5rem;
  text-align: center;
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
}

/* router-link로 사용되는 Step4 백 투 로그인 링크용 — AppButton 미사용 */
.password-reset__submit[data-v-d5afff8d] {
  width: 100%;
  padding: var(--space-roomy) var(--space-band);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border: none;
  border-radius: var(--radius-card);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  cursor: pointer;
  transition: all var(--motion-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  text-decoration: none;
}
.password-reset__submit[data-v-d5afff8d]:hover:not(:disabled) {
  filter: brightness(1.05);
}
.password-reset__error[data-v-d5afff8d] {
  color: var(--ink-danger);
  font-size: var(--size-body);
  margin-top: var(--gap-glyph);
}
.password-reset__header[data-v-d5afff8d] {
  text-align: center;
  margin-bottom: var(--gap-band);
}
.password-reset__step-title[data-v-d5afff8d] {
  font-size: var(--size-title);
  font-weight: var(--weight-strong);
  margin: 0 0 var(--gap-inline);
  color: var(--ink-primary);
}
.password-reset__step-desc[data-v-d5afff8d] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
  margin: 0;
}
.password-reset__success-icon[data-v-d5afff8d] {
  font-size: var(--icon-hero);
  color: var(--ink-success);
  margin-bottom: var(--gap-group);
}
.password-reset__label-row[data-v-d5afff8d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.password-reset__timer[data-v-d5afff8d] {
  font-size: var(--size-body);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}
.password-reset__timer--warning[data-v-d5afff8d] {
  color: var(--ink-warning-hover);
}
.password-reset__timer--expired[data-v-d5afff8d] {
  color: var(--ink-danger);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
}

/* Reuse LoginView styles for consistency */
.login[data-v-79135ea5] {
  min-height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-band);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.login__container[data-v-79135ea5] {
  width: 100%;
  max-width: 400px; /* Slightly wider than login for code input */
}
.login__card[data-v-79135ea5] {
  width: 100%;
  background: transparent;
  border: none;
}
.login__header[data-v-79135ea5] {
  text-align: center;
  padding: var(--space-wide) var(--space-wide) var(--space-snug);
}
.login__logo[data-v-79135ea5] {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.login__logo-image[data-v-79135ea5] {
  width: 64px;
  height: 64px;
  /* ⛔ infinite 로 되돌리지 말 것 (2026-08-29 실측).
     상시 도는 애니메이션이 화면에 하나라도 있으면 브라우저가 60fps 렌더 루프를
     계속 돌린다 — 빈 페이지에서 6px 튀는 요소 하나만으로 CPU 20%. 이 힌트는
     처음 몇 초만 보이면 되므로 유한 반복으로 두고, 그 뒤에는 아무것도 돌지 않는다. */
  animation: bounce-79135ea5 2s 5;
  cursor: pointer;
}
@keyframes bounce-79135ea5 {
0%, 20%, 50%, 80%, 100% { transform: translateY(0);
}
40% { transform: translateY(-10px);
}
60% { transform: translateY(-5px);
}
}
.login__content[data-v-79135ea5] {
  padding: var(--space-cozy) var(--space-wide) var(--space-wide);
}
.login__greeting[data-v-79135ea5] {
  margin: 0 0 var(--gap-band);
  color: var(--ink-primary);
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  text-align: center;
}
.login__footer[data-v-79135ea5] {
  margin-top: var(--gap-band);
  padding-top: var(--space-band);
  border-top: var(--line-strong);
  text-align: center;
}
.login__about-link[data-v-79135ea5] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--size-lead);
  transition: all var(--motion-base);
  padding: var(--pad-row);
  border-radius: var(--radius-control);
}
.login__about-link[data-v-79135ea5]:hover {
  color: var(--ink-brand);
  background: var(--bg-field);
}

.login[data-v-45f5edd7] {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-band);
  background: var(--bg-page);
  color: var(--ink-primary);
  overflow-y: auto;
}
.login__container[data-v-45f5edd7] {
  width: 100%;
  max-width: 380px;
}
.login__card[data-v-45f5edd7] {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.login__header[data-v-45f5edd7] {
  text-align: center;
  padding: var(--space-wide) var(--space-wide) var(--space-snug);
}
.login__logo[data-v-45f5edd7] {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.login__logo-image[data-v-45f5edd7] {
  width: 64px;
  height: 64px;
  /* ⛔ infinite 로 되돌리지 말 것 (2026-08-29 실측).
     상시 도는 애니메이션이 화면에 하나라도 있으면 브라우저가 60fps 렌더 루프를
     계속 돌린다 — 빈 페이지에서 6px 튀는 요소 하나만으로 CPU 20%. 이 힌트는
     처음 몇 초만 보이면 되므로 유한 반복으로 두고, 그 뒤에는 아무것도 돌지 않는다. */
  animation: bounce-45f5edd7 2s 5;
}
@keyframes bounce-45f5edd7 {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-10px);
}
60% {
    transform: translateY(-5px);
}
}
.login__content[data-v-45f5edd7] {
  padding: var(--space-cozy) var(--space-wide) var(--space-wide);
}
.login__greeting[data-v-45f5edd7] {
  margin: 0 0 var(--gap-inline);
  color: var(--ink-primary);
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  text-align: center;
}
.login__desc[data-v-45f5edd7] {
  margin: 0 0 var(--gap-page);
  color: var(--ink-secondary);
  font-size: var(--size-label);
  text-align: center;
  line-height: var(--line-normal);
}
.login__form[data-v-45f5edd7] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}
.login__field[data-v-45f5edd7] {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.login__input-group[data-v-45f5edd7] {
  display: flex;
  align-items: stretch;
  border: var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-page);
  overflow: visible;
  transition: border-color var(--motion-base);
}
.login__input-group[data-v-45f5edd7]:focus-within {
  border-color: var(--ink-brand);
}
.login__input-addon[data-v-45f5edd7] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-control);
  background: var(--bg-page);
  border-right: var(--line-strong);
  color: var(--ink-secondary);
  flex-shrink: 0;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.login__input-group:focus-within .login__input-addon[data-v-45f5edd7] {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}
.login__input-wrapper[data-v-45f5edd7] {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: visible;
}
.login__input[data-v-45f5edd7] {
  width: 100%;
  padding: var(--space-roomy) var(--space-cozy);
  border: none;
  background: transparent;
  outline: none;
}
.login__label[data-v-45f5edd7] {
  position: absolute;
  /* 라벨 글자 시작점 = 입력 글자 시작점(--space-cozy). 안여백(--space-tight)만큼 앞으로 뺀다 */
  left: calc(var(--space-cozy) - var(--space-tight));
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-secondary);
  /* 값이 없을 때의 안내 글자는 그 자리에 들어올 입력 글자(AppInput --size-body)와 같은 크기 */
  font-size: var(--size-body);
  pointer-events: none;
  transition: all var(--motion-base);
  /* 떠오른 라벨이 테두리 선을 가리고 서야 한다 — 반투명 베일(--bg-field)이면 선이 글자를 관통해
     읽기 어렵다(사용자 지적 2026-09-12). 떠 있는 것의 불투명 면(--bg-float)으로 덮는다 */
  background: var(--bg-float);
  border-radius: var(--radius-badge);
  padding: 0 var(--space-tight);
  z-index: 1;
  white-space: nowrap;
}
.login__input:focus + .login__label[data-v-45f5edd7],
.login__input--has-value + .login__label[data-v-45f5edd7] {
  top: 0;
  font-size: var(--size-meta);
  color: var(--ink-brand);
}
.login__password-toggle[data-v-45f5edd7] {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  cursor: pointer;
  padding: var(--space-tight);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--motion-base);
}
.login__password-toggle[data-v-45f5edd7]:hover {
  color: var(--ink-primary);
}
.login__password-toggle i[data-v-45f5edd7] {
  font-size: var(--icon-label);
}
.login__message[data-v-45f5edd7] {
  margin: var(--gap-glyph) 0 0;
  padding: var(--space-tight) 0 0;
  text-align: center;
  color: var(--ink-danger);
  font-size: var(--size-body);
  background: transparent;
  border: none;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 카카오 로그인 버튼과 높이를 맞추기 위해 AppButton 기본 md(32px) 대신 동일한 패딩/폰트로 덮어쓴다 */
.login__submit[data-v-45f5edd7] {
  margin-top: var(--gap-inline);
  height: auto;
  padding: var(--space-roomy) var(--space-band);
  font-size: var(--size-lead);
  line-height: var(--line-snug);
}

/* 브라우저 자동완성 배경색 덮어쓰기 */
.login__form input[data-v-45f5edd7]:-webkit-autofill,
.login__form input[data-v-45f5edd7]:-webkit-autofill:hover,
.login__form input[data-v-45f5edd7]:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px var(--bg-page) inset;  /* role-ignore: 그림 효과(헤어라인·글로우·자동완성 가리개) — 선 두께 사다리로 접히지 않는다 */
  -webkit-text-fill-color: var(--ink-primary);
  caret-color: var(--ink-primary);
  -webkit-transition: background-color 9999s ease-out 0s;
  transition: background-color 9999s ease-out 0s;
  border-radius: 0;
}
.login__form input[data-v-45f5edd7]:-webkit-autofill:first-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* 소셜 가입 동의 간주 고지 */
.login__consent[data-v-45f5edd7] {
  margin: var(--gap-stack) 0 0;
  font-size: var(--size-meta);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
  text-align: center;
}
.login__consent-link[data-v-45f5edd7] {
  color: var(--ink-brand);
  text-decoration: none;
}
.login__consent-link[data-v-45f5edd7]:hover {
  text-decoration: underline;
}
.login__signup[data-v-45f5edd7] {
  margin: var(--gap-group) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
  text-align: center;
}
.login__signup-link[data-v-45f5edd7] {
  color: var(--ink-brand);
  text-decoration: none;
  font-weight: var(--weight-label);
}
.login__signup-link[data-v-45f5edd7]:hover {
  text-decoration: underline;
}
.login__footer[data-v-45f5edd7] {
  margin-top: var(--gap-band);
  padding-top: var(--space-band);
  border-top: var(--line-strong);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline);
}

/* 약관 / 개인정보처리방침 푸터 링크 */
.login__legal[data-v-45f5edd7] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--size-meta);
}
.login__legal-link[data-v-45f5edd7] {
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--motion-base);
}
.login__legal-link[data-v-45f5edd7]:hover {
  color: var(--ink-brand);
  text-decoration: underline;
}
.login__legal-sep[data-v-45f5edd7] {
  color: var(--ink-muted);
}
.login__about-link[data-v-45f5edd7] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--size-lead);
  transition: all var(--motion-base);
  padding: var(--pad-row);
  border-radius: var(--radius-control);
}
.login__about-link[data-v-45f5edd7]:hover {
  color: var(--ink-brand);
  background: var(--bg-field);
}
.login__about-link i[data-v-45f5edd7] {
  font-size: var(--icon-toolbar);
}
.login__kakao[data-v-45f5edd7] {
  width: 100%;
  margin-top: var(--gap-stack);
  padding: var(--space-roomy) var(--space-band);
  background: var(--ink-kakao);
  color: var(--ink-black);
  border: none;
  border-radius: var(--radius-card);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  line-height: var(--line-snug);
  cursor: pointer;
  transition: all var(--motion-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}
.login__kakao[data-v-45f5edd7]:hover:not(:disabled) {
  filter: brightness(0.95);
}
.login__kakao[data-v-45f5edd7]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login__actions[data-v-45f5edd7] {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--gap-inline);
  margin-bottom: var(--gap-inline);
}


.callback-container[data-v-3b1335e8] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--bg-field);
  color: var(--ink-primary);
}
.callback-card[data-v-3b1335e8] {
  text-align: center;
  padding: var(--pad-hero);
  background: var(--bg-card);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow-sm);
  max-width: 400px;
  width: 100%;
}
.callback-icon[data-v-3b1335e8] {
  font-size: var(--icon-hero);
  color: var(--ink-kakao);
  margin-bottom: var(--gap-band);
}
.callback-title[data-v-3b1335e8] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  margin-bottom: var(--gap-inline);
}
.callback-desc[data-v-3b1335e8] {
  color: var(--ink-secondary);
}

.login[data-v-bf0653ef] {
  min-height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-band);
  background: var(--bg-page);
  color: var(--ink-primary);
  overflow-y: auto;
}
.login__container[data-v-bf0653ef] { width: 100%; max-width: 420px;
}
.login__card[data-v-bf0653ef] { width: 100%; background: transparent; border: none;
}
.login__header[data-v-bf0653ef] { text-align: center; padding: var(--space-wide) var(--space-wide) var(--space-snug);
}
.login__logo[data-v-bf0653ef] { display: flex; justify-content: center;
}
.login__logo-image[data-v-bf0653ef] { width: 64px; height: 64px; cursor: pointer;
}
.login__content[data-v-bf0653ef] { padding: var(--space-cozy) var(--space-wide) var(--space-wide);
}
.login__greeting[data-v-bf0653ef] {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-primary);
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  text-align: center;
}
.reg__center[data-v-bf0653ef] { text-align: center; padding: var(--space-roomy) 0;
}
.reg__spinner[data-v-bf0653ef] { font-size: var(--icon-lead); color: var(--ink-brand);
}
.reg__icon[data-v-bf0653ef] { font-size: var(--icon-hero); margin-bottom: var(--space-roomy);
}
.reg__icon--ok[data-v-bf0653ef] { color: var(--ink-success);
}
.reg__icon--info[data-v-bf0653ef] { color: var(--ink-info);
}
.reg__icon--warn[data-v-bf0653ef] { color: var(--ink-warning);
}
.reg__muted[data-v-bf0653ef] { color: var(--ink-secondary); font-size: var(--size-lead); line-height: var(--line-relaxed); margin: 0;
}
.reg__intro[data-v-bf0653ef] { text-align: center; margin-bottom: var(--space-band);
}
.reg__invite-banner[data-v-bf0653ef] {
  display: flex;
  gap: var(--gap-stack);
  align-items: flex-start;
  padding: var(--pad-panel);
  margin-bottom: var(--gap-band);
  background: var(--bg-card);
  border: var(--line-strong);
  border-left: var(--line-accent) solid var(--ink-brand);
  border-radius: var(--radius-control);
  text-align: left;
}
.reg__invite-banner__icon[data-v-bf0653ef] { color: var(--ink-brand); font-size: var(--icon-header); flex-shrink: 0;
}
.reg__invite-banner__title[data-v-bf0653ef] { margin: 0 0 var(--gap-glyph); font-weight: var(--weight-title); color: var(--ink-primary);
}
.reg__invite-banner__desc[data-v-bf0653ef] { margin: 0; color: var(--ink-secondary); font-size: var(--size-label); line-height: var(--line-relaxed);
}
.reg__form[data-v-bf0653ef] { display: flex; flex-direction: column; gap: var(--gap-group);
}
.reg__field[data-v-bf0653ef] { display: flex; flex-direction: column; gap: var(--gap-inline);
}
.reg__label[data-v-bf0653ef] { font-size: var(--size-label); font-weight: var(--weight-label); color: var(--ink-secondary);
}
.reg__inline[data-v-bf0653ef] { display: flex; gap: var(--gap-inline); align-items: stretch;
}
.reg__inline-input[data-v-bf0653ef] { flex: 1;
}
.reg__status[data-v-bf0653ef] { margin: 0; font-size: var(--size-label);
}
.reg__status--ok[data-v-bf0653ef] { color: var(--ink-success);
}
.reg__status--err[data-v-bf0653ef] { color: var(--ink-danger);
}
.reg__status--warn[data-v-bf0653ef] { color: var(--ink-warning);
}
.reg__status--hint[data-v-bf0653ef] { color: var(--ink-muted);
}
.reg__consents[data-v-bf0653ef] { display: flex; flex-direction: column; gap: var(--gap-inline); margin-top: var(--gap-glyph);
}
.reg__consent-text[data-v-bf0653ef] { font-size: var(--size-label); color: var(--ink-primary); line-height: var(--line-relaxed);
}
.reg__consent-link[data-v-bf0653ef] { color: var(--ink-brand); text-decoration: underline;
}
.reg__req[data-v-bf0653ef] { color: var(--ink-danger); font-weight: var(--weight-label); margin-right: var(--gap-glyph);
}
.reg__opt[data-v-bf0653ef] { color: var(--ink-secondary); margin-right: var(--gap-glyph);
}
.reg__invite-consent[data-v-bf0653ef] { margin: var(--gap-glyph) 0 0; font-size: var(--size-label); color: var(--ink-secondary); line-height: var(--line-relaxed); text-align: center;
}
.reg__error[data-v-bf0653ef] { color: var(--ink-danger); font-size: var(--size-label);
}
.reg__login-hint[data-v-bf0653ef] { text-align: center; font-size: var(--size-label); color: var(--ink-secondary); margin: var(--gap-inline) 0 0;
}
.reg__resend[data-v-bf0653ef] { margin-top: var(--gap-band);
}
.reg__link-btn[data-v-bf0653ef] {
  display: inline-block;
  margin-top: var(--gap-band);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  text-decoration: none;
  border-radius: var(--radius-control);
  font-weight: var(--weight-label);
}

.login[data-v-071034b4] {
  min-height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-band);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.login__container[data-v-071034b4] { width: 100%; max-width: 400px;
}
.login__card[data-v-071034b4] { width: 100%; background: transparent; border: none;
}
.login__header[data-v-071034b4] { text-align: center; padding: var(--space-wide) var(--space-wide) var(--space-snug);
}
.login__logo[data-v-071034b4] { display: flex; justify-content: center;
}
.login__logo-image[data-v-071034b4] { width: 64px; height: 64px; cursor: pointer;
}
.login__content[data-v-071034b4] { padding: var(--space-cozy) var(--space-wide) var(--space-wide);
}
.login__greeting[data-v-071034b4] {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-primary);
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  text-align: center;
}
.ev__center[data-v-071034b4] { text-align: center;
}
.ev__spinner[data-v-071034b4] { font-size: var(--icon-lead); color: var(--ink-brand); margin-bottom: var(--gap-group);
}
.ev__icon[data-v-071034b4] { font-size: var(--icon-hero); margin-bottom: var(--space-roomy);
}
.ev__icon--ok[data-v-071034b4] { color: var(--ink-success);
}
.ev__icon--warn[data-v-071034b4] { color: var(--ink-warning);
}
.ev__muted[data-v-071034b4] { color: var(--ink-secondary); font-size: var(--size-lead); line-height: var(--line-relaxed); margin: 0;
}
.ev__link-btn[data-v-071034b4] {
  display: inline-block;
  margin-top: var(--gap-band);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  text-decoration: none;
  border-radius: var(--radius-control);
  font-weight: var(--weight-label);
}

/* Container */
.guide[data-v-d4948df9] {
  background: var(--bg-page);
  color: var(--ink-primary);
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Navigation */
.guide-nav[data-v-d4948df9] {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-sticky);
  backdrop-filter: var(--blur-sticky);
  -webkit-backdrop-filter: var(--blur-sticky);
  border-bottom: var(--line-strong);
  transition: box-shadow var(--motion-base);
}
.guide-nav--scrolled[data-v-d4948df9] {
  box-shadow: var(--shadow-sm);
}
.guide-nav__inner[data-v-d4948df9] {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-cozy) var(--space-band);
  display: flex;
  gap: var(--gap-band);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.guide-nav__inner[data-v-d4948df9]::-webkit-scrollbar {
  display: none;
}
.guide-nav__link[data-v-d4948df9] {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  white-space: nowrap;
  padding: var(--space-tight) 0;
  border-bottom: var(--line-w-thick) solid transparent;
  transition: all var(--motion-base);
}
.guide-nav__link[data-v-d4948df9]:hover {
  color: var(--ink-brand);
}
.guide-nav__link--active[data-v-d4948df9] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
  border-bottom-color: var(--ink-brand);
}

/* Section */
.guide-section[data-v-d4948df9] {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide) var(--space-band);
}
/* ⛔ 절마다 배경을 번갈아 깔지 않는다 — 바탕 글로우가 화면 전체에 이어지는데
   몇 개 절에만 면이 깔리면 "왜 이 절만 배경이 다르지"로 읽힌다(2026-08-22 지적).
   절의 구분은 여백과 표제가 한다. */
.guide-section--alt[data-v-d4948df9] {
  background: none;
}
.guide-section--cta[data-v-d4948df9] {
  min-height: 40vh;
  /* ⛔ 마지막 절에만 브랜드색 그라데이션을 깔지 않는다 — 다른 절과 배경이 달라
     "이 페이지만 배경이 다르다"로 읽힌다(2026-08-22 지적). 강조는 버튼이 한다. */
  background: none;
}
.guide-container[data-v-d4948df9] {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
.guide-section__title[data-v-d4948df9] {
  font-size: var(--size-display);
  font-weight: var(--weight-strong);
  margin: 0 0 var(--gap-group);
  color: var(--ink-primary);
  text-align: center;
}
.guide-section__desc[data-v-d4948df9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  text-align: center;
  margin: 0 0 var(--gap-page);
  line-height: var(--line-normal);
}

/* Hero */
.guide-hero[data-v-d4948df9] {
  min-height: 60vh;
  /* ⛔ 표지에 배경을 칠하지 않는다. 예전엔 면색→바탕색 그라데이션이라 다크에서
     '투명 → #050505' 로 아래가 검게 빠졌고, 브랜드색을 옅게 얹었더니 이번엔
     **그냥 초록을 칠한 것처럼** 보였다(2026-08-22 지적).
     바탕 글로우가 화면 전체에 이미 깔려 있으므로 여기는 비워 둔다. */
  background: none;
}
.guide-hero__content[data-v-d4948df9] {
  text-align: center;
}
.guide-hero__title[data-v-d4948df9] {
  font-size: var(--size-display-lg);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
  margin: 0 0 var(--gap-group);
  line-height: var(--line-tight);
}
.guide-hero__intro[data-v-d4948df9] {
  margin-bottom: var(--gap-band);
}
.guide-hero__desc[data-v-d4948df9] {
  font-size: var(--size-title-sm);
  color: var(--ink-secondary);
  margin: 0 auto var(--gap-inline);
  line-height: var(--line-relaxed);
  max-width: 800px;
}
.guide-hero__desc[data-v-d4948df9]:last-of-type {
  margin-bottom: var(--gap-page);
}
.guide-hero__pains[data-v-d4948df9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  align-items: center;
  margin-bottom: var(--gap-band);
}
.guide-hero__pain[data-v-d4948df9] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  max-width: 500px;
  width: 100%;
}
.guide-hero__pain i[data-v-d4948df9] {
  font-size: var(--icon-toolbar);
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.guide-hero__pain p[data-v-d4948df9] {
  font-size: var(--size-lead);
  color: var(--ink-secondary);
  margin: 0;
  line-height: var(--line-normal);
}
.guide-hero__resolve[data-v-d4948df9] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-brand);
  margin: 0 0 var(--gap-page);
}
.guide-hero__scroll[data-v-d4948df9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  margin-top: var(--gap-page);
  color: var(--ink-muted);
  font-size: var(--size-label);
  opacity: 0.6;
  /* ⛔ infinite 로 되돌리지 말 것 (2026-08-29 실측).
     상시 도는 애니메이션이 화면에 하나라도 있으면 브라우저가 60fps 렌더 루프를
     계속 돌린다 — 빈 페이지에서 6px 튀는 요소 하나만으로 CPU 20%. 이 힌트는
     처음 몇 초만 보이면 되므로 유한 반복으로 두고, 그 뒤에는 아무것도 돌지 않는다. */
  animation: guideScrollBounce-d4948df9 2s 6;
}
.guide-hero__scroll i[data-v-d4948df9] {
  font-size: var(--icon-header);
}
@keyframes guideScrollBounce-d4948df9 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(6px);
}
}

/* Buttons */
.guide-btn[data-v-d4948df9] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-cozy) var(--space-wide);
  border-radius: var(--radius-card);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  text-decoration: none;
  transition: all var(--motion-base);
  cursor: pointer;
  border: var(--line-w-thick) solid transparent;
}
.guide-btn i[data-v-d4948df9] {
  font-size: var(--icon-toolbar);
}
.guide-btn--primary[data-v-d4948df9] {
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  border-color: var(--ink-brand);
}
.guide-btn--primary[data-v-d4948df9]:hover {
  background: var(--ink-brand-hover);
  border-color: var(--ink-brand-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.guide-btn--secondary[data-v-d4948df9] {
  background: transparent;
  color: var(--ink-brand);
  border-color: var(--line-color);
}
.guide-btn--secondary[data-v-d4948df9]:hover {
  border-color: var(--ink-brand);
  background: var(--bg-brand-soft);
}

/* Screen Layout */
.guide-layout__title[data-v-d4948df9] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
  margin: 0 0 var(--gap-band);
  text-align: center;
}
.guide-layout__screen[data-v-d4948df9] {
  border: var(--line-w-thick) solid var(--line-color);
  border-radius: var(--radius-float);
  overflow: hidden;
  margin-bottom: var(--gap-group);
}
.guide-layout__topbar[data-v-d4948df9] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--pad-panel);
  background: var(--bg-page);
  border-bottom: var(--line-w-thick) solid var(--line-color);
}
.guide-layout__topbar-icons[data-v-d4948df9] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}
/* 좁은 화면 상단바 맨 왼쪽의 메뉴 버튼 — 사이드바를 여는 자리 */
.guide-layout__menu-btn[data-v-d4948df9] {
  /* .guide-layout__topbar i 가 주는 --font-xl 은 이 네모칸에 넘친다 — 오른쪽 아이콘들과 같은 단으로. */
  font-size: var(--size-title-sm);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
  border: var(--line-w) solid var(--ink-brand);
  border-radius: var(--radius-control);
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-layout__topbar-actions[data-v-d4948df9] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.guide-layout__topbar-actions i[data-v-d4948df9] {
  font-size: var(--icon-toolbar);
  color: var(--ink-secondary);
  background: var(--bg-field);
  border: var(--line-strong);
  border-radius: var(--radius-control);
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guide-layout__body[data-v-d4948df9] {
  display: flex;
  min-height: 120px;
}
.guide-layout__sidebar[data-v-d4948df9] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline);
  padding: var(--pad-panel);
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-page);
  border-right: var(--line-w-thick) solid var(--line-color);
}
.guide-layout__content[data-v-d4948df9] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-stack);
  padding: var(--pad-panel);
  flex: 1;
  background: var(--bg-page);
}
.guide-layout__topbar i[data-v-d4948df9],
.guide-layout__sidebar i[data-v-d4948df9],
.guide-layout__content i[data-v-d4948df9] {
  font-size: var(--icon-label);
  color: var(--ink-brand);
  flex-shrink: 0;
  margin-top: var(--gap-glyph);
}
.guide-layout__topbar strong[data-v-d4948df9],
.guide-layout__sidebar strong[data-v-d4948df9],
.guide-layout__content strong[data-v-d4948df9] {
  display: block;
  font-size: var(--size-body);
  color: var(--ink-primary);
  margin-bottom: var(--gap-glyph);
}
.guide-layout__topbar p[data-v-d4948df9],
.guide-layout__sidebar p[data-v-d4948df9],
.guide-layout__content p[data-v-d4948df9] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  margin: 0;
  line-height: var(--line-normal);
}

/* Permission Notice */
.guide-notice[data-v-d4948df9] {
  padding: 0 var(--space-band);
}
.guide-notice__inner[data-v-d4948df9] {
  max-width: 900px;
  margin: var(--gap-glyph) auto 0;
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-band);
  background: var(--bg-warning-soft);
  border: var(--line-w) solid var(--ink-warning);
  border-radius: var(--radius-card);
  font-size: var(--size-body);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.guide-notice__inner i[data-v-d4948df9] {
  color: var(--ink-warning);
  font-size: var(--icon-label);
  flex-shrink: 0;
}
.guide-notice__inner p[data-v-d4948df9] {
  margin: 0;
}

/* Workflow */
.guide-workflow[data-v-d4948df9] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.guide-workflow__item[data-v-d4948df9] {
  /* 카드 경계 — 판을 비운 뒤 배경으로는 구분되지 않아 실선으로 나눈다
     (사용자 확정 2026-08-22). */
  border: var(--line-strong);
  text-align: center;
  padding: var(--space-band) var(--space-roomy);
  position: relative;
}
.guide-workflow__icon[data-v-d4948df9] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
  display: inline-block;
  margin-bottom: var(--gap-stack);
}
.guide-workflow__title[data-v-d4948df9] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  margin: 0 0 var(--gap-inline);
  color: var(--ink-primary);
}
.guide-workflow__desc[data-v-d4948df9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
  margin: 0;
}
.guide-workflow--independent[data-v-d4948df9] {
  grid-template-columns: repeat(4, 1fr);
}
.guide-workflow--verification[data-v-d4948df9] {
  display: flex;
  justify-content: center;
}
.guide-workflow__arrow[data-v-d4948df9] {
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  /* ⛔ 테두리색(--border-color)을 글자·아이콘 색으로 쓰지 않는다 — 배경과 1.2:1 밖에
     안 나와 사실상 보이지 않았다(실측 2026-08-21: 라이트 1.18 / 다크 1.46).
     연한 글자는 --text-tertiary 가 그 자리다. */
  color: var(--ink-muted);
  font-size: var(--icon-lead);
  z-index: 1;
}
.guide-workflow__arrow i[data-v-d4948df9] {
  font-size: var(--icon-lead);
}

/* Feature Guide */
.guide-feature[data-v-d4948df9] {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.guide-feature__header[data-v-d4948df9] {
  display: flex;
  align-items: center;
  gap: var(--gap-group);
  margin-bottom: var(--gap-band);
}
.guide-feature__icon[data-v-d4948df9] {
  font-size: var(--icon-hero);
  color: var(--ink-brand);
  background: var(--bg-brand-soft);
  padding: var(--space-cozy);
  border-radius: var(--radius-float);
  /* 아이콘 글리프를 박스 정중앙에 배치 (baseline 기준 배치로 우측 하단에 쏠리던 문제 해결) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--line-none);
  flex-shrink: 0;
}
.guide-feature__title[data-v-d4948df9] {
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  margin: 0 0 var(--gap-glyph);
  color: var(--ink-primary);
}
.guide-feature__subtitle[data-v-d4948df9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
  /* 가운데 맞춘 글이라 줄이 자주 넘친다 — 한글이 낱말 한가운데서 끊기지 않게(「고칩 / 니다」). */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.guide-feature__list[data-v-d4948df9] {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap-band);
}
.guide-feature__list li[data-v-d4948df9] {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline);
  font-size: var(--size-lead);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
  /* ⛔ .guide-feature 의 가운데 맞춤을 물려받지 않는다 — 한 줄에 안 들어가는 항목은
     둘째 줄만 가운데로 밀려 ✓ 아래 글줄이 어긋난다(넓은 화면에서 그대로 드러났다). */
  text-align: left;
  /* 한글은 낱말 한가운데서도 줄을 끊는다(「짚 / 어 표시」) — 낱말 단위로 끊는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.guide-feature__list li i[data-v-d4948df9] {
  color: var(--ink-brand);
  font-size: var(--icon-toolbar);
  margin-top: var(--gap-glyph);
  flex-shrink: 0;
}
.guide-feature__tip[data-v-d4948df9] {
  display: flex;
  gap: var(--gap-stack);
  padding: var(--pad-modal);
  background: var(--bg-brand-soft);
  border: var(--line-soft);
  border-radius: var(--radius-card);
  margin-bottom: var(--gap-band);
}
.guide-feature__tip i[data-v-d4948df9] {
  color: var(--ink-brand);
  font-size: var(--icon-label);
  flex-shrink: 0;
  margin-top: var(--gap-glyph);
}
.guide-feature__tip p[data-v-d4948df9] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
  margin: 0;
  /* 항목 목록과 같은 이유 — 아이콘 옆의 글은 왼쪽에서 시작해 왼쪽에서 이어진다. */
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Tips */
.guide-tips[data-v-d4948df9] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-group);
}
.guide-tips__card[data-v-d4948df9] {
  padding: var(--pad-hero);
  background: var(--bg-card);
  border: var(--line-strong);
  border-radius: var(--radius-float);
  text-align: center;
  transition: transform var(--motion-base);
}
.guide-tips__card[data-v-d4948df9]:hover {
  transform: translateY(-4px);
}
.guide-tips__icon[data-v-d4948df9] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
  margin-bottom: var(--gap-stack);
  display: inline-block;
}
.guide-tips__card h3[data-v-d4948df9] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  margin: 0 0 var(--gap-inline);
  color: var(--ink-primary);
}
.guide-tips__card p[data-v-d4948df9] {
  font-size: var(--size-body);
  color: var(--ink-secondary);
  margin: 0;
  line-height: var(--line-normal);
}

/* FAQ */
.guide-faq[data-v-d4948df9] {
  max-width: 700px;
  margin: 0 auto;
}
.guide-faq__item[data-v-d4948df9] {
  border: var(--line-strong);
  border-radius: var(--radius-card);
  margin-bottom: var(--gap-inline);
  overflow: hidden;
  background: var(--bg-card);
}
/* 시각 스타일은 AppButton ghost가 담당 */
.guide-faq__header[data-v-d4948df9] {
  height: auto;
  padding: var(--pad-panel);
}
.guide-faq__header i[data-v-d4948df9] {
  color: var(--ink-brand);
  font-size: var(--icon-header);
}
.guide-faq__question[data-v-d4948df9] {
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  flex: 1;
}
.guide-faq__body[data-v-d4948df9] {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-base) ease-out;
}
.guide-faq__item--open .guide-faq__body[data-v-d4948df9] {
  max-height: 500px;
  transition: max-height var(--motion-base) ease-in;
}
.guide-faq__answer[data-v-d4948df9] {
  padding: 0 var(--space-roomy) var(--space-roomy);
  font-size: var(--size-body);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
  margin: 0;
}

/* Right Side Index */
.guide-index[data-v-d4948df9] {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  z-index: 20;
}
.guide-index__dot[data-v-d4948df9] {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-field);
  transition: all var(--motion-base);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.guide-index__dot[data-v-d4948df9]:hover {
  background: var(--bg-brand-vivid);
  transform: scale(1.3);
}
.guide-index__dot--active[data-v-d4948df9] {
  background: var(--bg-brand-vivid);
  box-shadow: var(--ring-focus);
}
.guide-index__label[data-v-d4948df9] {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  /* 이 라벨은 목차 점 **위에** 떠서 뜬다 — 반투명이면 활성 점의 브랜드색이 비쳐
     글자가 통째로 사라진다(2026-08-22 실측 1.00:1). 떠 있는 것은 불투명이라야 한다. */
  /* surface-ignore: **떠 있는 라벨**이다 — 목차 점 위에 겹쳐 뜨므로 불투명이라야 한다.
     반투명이면 활성 점의 브랜드색이 비쳐 글자가 통째로 사라진다(실측 2026-08-22: 1.00:1). */
  background: var(--bg-float);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  border: var(--line-strong);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base);
}
.guide-index__dot:hover .guide-index__label[data-v-d4948df9] {
  opacity: 1;
}
.guide-index__dot--active .guide-index__label[data-v-d4948df9] {
  color: var(--ink-brand);
  font-weight: var(--weight-title);
}

/* Responsive */
@media (max-width: 768px) {
.guide-index[data-v-d4948df9] {
    display: none;
}
.guide-hero__title[data-v-d4948df9] {
    font-size: var(--size-display);
}
.guide-section[data-v-d4948df9] {
    padding: var(--space-wide) var(--space-roomy);
    min-height: auto;
}
.guide-hero[data-v-d4948df9] {
    min-height: 50vh;
}
.guide-hero__pains[data-v-d4948df9] {
    justify-content: center;
}
.guide-hero__pain[data-v-d4948df9] {
    max-width: 100%;
    flex-direction: column;
    text-align: center;
    gap: var(--gap-stack);
}
.guide-workflow[data-v-d4948df9] {
    grid-template-columns: 1fr;
    gap: var(--gap-inline);
}
.guide-workflow__arrow[data-v-d4948df9] {
    display: none;
}
.guide-layout__topbar[data-v-d4948df9] {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--gap-stack);
}
.guide-layout__topbar-actions[data-v-d4948df9] {
    margin-left: 0;
}
.guide-layout__content[data-v-d4948df9] {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--gap-stack);
}
  /* ⛔ 좁은 화면에서 사이드바를 폭 전체 띠로 눕히지 않는다 — 그 화면에는 붙박이 사이드바가 없다.
     ☰ 를 눌러야 왼쪽에서 나오는 드로어이므로, 콘텐츠 아래에 '떠 있는 판' 으로 그린다. */
.guide-layout__body--drawer[data-v-d4948df9] {
    flex-direction: column-reverse;
    padding: var(--space-cozy);
    padding-top: 0;
    gap: var(--gap-stack);
}
.guide-layout__body--drawer .guide-layout__content[data-v-d4948df9] {
    width: 100%;
    border-radius: var(--radius-control);
}
.guide-layout__body--drawer .guide-layout__sidebar[data-v-d4948df9] {
    width: 78%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-stack);
    /* 왼쪽 가장자리에 붙여 '왼쪽에서 밀려 나온 판' 으로 읽히게 한다 */
    margin-left: calc(-1 * var(--gap-stack));
    border: var(--line-strong);
    border-left: none;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    /* 떠 있는 것이므로 불투명 — 바탕이 비쳐 보이면 '덮고 나온다' 가 안 읽힌다. */
    background: var(--bg-float);
    box-shadow: var(--shadow-float);
}
.guide-feature__header[data-v-d4948df9] {
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.guide-feature__tip[data-v-d4948df9] {
    flex-direction: column;
    align-items: center;
}
.guide-notice__inner[data-v-d4948df9] {
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-top: var(--gap-glyph);
}
.guide-hero__pain[data-v-d4948df9] {
    max-width: 100%;
}
.guide-tips[data-v-d4948df9] {
    grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.guide-nav[data-v-d4948df9] {
    display: none;
}
.guide-hero__title[data-v-d4948df9] {
    font-size: var(--size-title-lg);
}
.guide-section__title[data-v-d4948df9] {
    font-size: var(--size-title-lg);
}
.guide-tips[data-v-d4948df9] {
    grid-template-columns: 1fr;
}
.guide-nav__link[data-v-d4948df9] {
    font-size: var(--size-meta);
}
}

/* 소개 화면 절 리듬 — 값은 그대로 두되 **토큰에서 계산**한다.
   ⛔ 템플릿의 style="" 로 꽂아 두었더니 어느 검사도 못 봤다(실측 2026-09-03). */
.guide-layout__title--section[data-v-d4948df9] {
  margin-top: calc(var(--gap-page) * 1.5);   /* 48px — 절과 절 사이 */
}
.guide-section__desc--tight[data-v-d4948df9] {
  margin-top: calc(var(--gap-stack) * -1);   /* -12px — 제목 바로 밑에 붙인다 */
}

.markdown-viewer[data-v-633b5908] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.markdown-viewer__loading[data-v-633b5908],
.markdown-viewer__error[data-v-633b5908],
.markdown-viewer__empty[data-v-633b5908] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--gap-group);
  color: var(--ink-muted);
}
.markdown-viewer__loading i[data-v-633b5908] {
  font-size: var(--icon-empty);
  color: var(--ink-brand);
}
.markdown-viewer__content[data-v-633b5908] {
  width: 100%;
  height: 100%;
  padding: 0 var(--space-band) var(--space-band) var(--space-band);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-page);
  font-size: var(--size-body); /* 전체 폰트 크기를 약간 작게 */
  /* ⛔ 글꼴을 다시 적지 않는다 — 예전엔 -apple-system 을 Pretendard 앞에 두어
     이 화면만 애플 기본 글꼴로 그려졌다(2026-08-21 실측). 본문 글꼴은 상속받는다. */
}
.markdown-viewer__content[data-v-633b5908] h1,
.markdown-viewer__content[data-v-633b5908] h2,
.markdown-viewer__content[data-v-633b5908] h3,
.markdown-viewer__content[data-v-633b5908] h4,
.markdown-viewer__content[data-v-633b5908] h5,
.markdown-viewer__content[data-v-633b5908] h6 {
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-group);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.markdown-viewer__content[data-v-633b5908] h1 {
  font-size: var(--size-display);
  border-bottom: var(--line-w-thick) solid var(--line-color);
  padding-bottom: var(--space-snug);
}
.markdown-viewer__content[data-v-633b5908] h2 {
  font-size: var(--size-title); /* 1.5rem -> 1.35rem (0.9배) */
  border-bottom: var(--line-strong);
  padding-bottom: var(--space-snug);
}
.markdown-viewer__content[data-v-633b5908] h3 {
  font-size: var(--size-title-sm); /* 1.25rem -> 1.125rem (0.9배) */
}
.markdown-viewer__content[data-v-633b5908] p {
  margin-bottom: var(--gap-group);
  color: var(--ink-primary);
}
.markdown-viewer__content[data-v-633b5908] ul,
.markdown-viewer__content[data-v-633b5908] ol {
  margin-bottom: var(--gap-group);
  padding-left: var(--space-wide);
  color: var(--ink-primary);
}
.markdown-viewer__content[data-v-633b5908] li {
  margin-bottom: var(--gap-inline);
}
.markdown-viewer__content[data-v-633b5908] code {
  background: var(--bg-card);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  font-family: var(--font-mono);
  font-size: var(--font-rel-code);
  color: var(--ink-brand);
}
.markdown-viewer__content[data-v-633b5908] pre {
  background: var(--bg-card);
  padding: var(--pad-card);
  border-radius: var(--radius-card);
  overflow-x: auto;
  margin-bottom: var(--gap-group);
  border: var(--line-strong);
}
.markdown-viewer__content[data-v-633b5908] pre code {
  background: transparent;
  padding: 0;
  color: var(--ink-primary);
}
.markdown-viewer__content[data-v-633b5908] blockquote {
  border-left: var(--line-accent) solid var(--ink-brand);
  padding-left: var(--space-roomy);
  margin-left: 0;
  margin-bottom: var(--gap-group);
  color: var(--ink-secondary);
  font-style: italic;
}
.markdown-viewer__content[data-v-633b5908] table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gap-group);
}
.markdown-viewer__content[data-v-633b5908] th,
.markdown-viewer__content[data-v-633b5908] td {
  border: var(--line-strong);
  padding: var(--space-snug);
  text-align: left;
  color: var(--ink-primary);
}
.markdown-viewer__content[data-v-633b5908] th {
  background: var(--bg-page);
  font-weight: var(--weight-title);
}
.markdown-viewer__content[data-v-633b5908] a {
  color: var(--ink-brand);
  text-decoration: none;
}
.markdown-viewer__content[data-v-633b5908] a:hover {
  text-decoration: underline;
}
.markdown-viewer__content[data-v-633b5908] a:visited {
  color: var(--ink-brand);
}
.markdown-viewer__content[data-v-633b5908] hr {
  border: none;
  border-top: var(--line-strong);
  margin: var(--gap-page) 0;
}
.error-message[data-v-633b5908] {
  color: var(--ink-danger);
  font-size: var(--size-body);
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
.markdown-viewer__content[data-v-633b5908] {
    padding: 0 var(--space-roomy) var(--space-roomy) var(--space-roomy);
}
.markdown-viewer__content[data-v-633b5908] h1 {
    font-size: var(--size-title); /* 1.5rem -> 1.35rem (0.9배) */
}
.markdown-viewer__content[data-v-633b5908] h2 {
    font-size: var(--size-title-sm); /* 1.25rem -> 1.125rem (0.9배) */
}
.markdown-viewer__content[data-v-633b5908] h3 {
    font-size: var(--size-lead);
}
}

.legal[data-v-b75d8853] {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  color: var(--ink-primary);
}
.legal__bar[data-v-b75d8853] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--space-cozy) var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  flex-shrink: 0;
}
.legal__back[data-v-b75d8853] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--size-body);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-control);
  transition: all var(--motion-base);
}
.legal__back[data-v-b75d8853]:hover {
  color: var(--ink-brand);
  background: var(--bg-field);
}
.legal__brand[data-v-b75d8853] {
  font-size: var(--size-lead);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.legal__tabs[data-v-b75d8853] {
  flex-shrink: 0;
  padding: 0 var(--space-band);
  border-bottom: var(--line-strong);
  background: var(--bg-page);
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.legal__head[data-v-b75d8853] {
  flex-shrink: 0;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-band) var(--space-band) var(--space-cozy);
}
.legal__title[data-v-b75d8853] {
  margin: 0;
  font-size: var(--size-title-lg);
  font-weight: var(--weight-strong);
  color: var(--ink-primary);
}
.legal__date[data-v-b75d8853] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.legal__operator[data-v-b75d8853] {
  margin: var(--gap-glyph) 0 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.legal__content[data-v-b75d8853] {
  flex: 1;
  min-height: 0;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* 라이선스 목록 — 자체 스크롤 영역 */
.legal__licenses[data-v-b75d8853] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-band) var(--space-band);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.legal__licenses-intro[data-v-b75d8853] {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--line-relaxed);
  color: var(--ink-secondary);
  padding: var(--pad-panel);
  background: var(--bg-field);
  border-radius: var(--radius-control);
  border-left: var(--line-accent) solid var(--ink-brand);
}
.legal__licenses-empty[data-v-b75d8853] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.legal__licenses-count[data-v-b75d8853] {
  margin: 0;
  font-size: var(--size-label);
  color: var(--ink-muted);
}
.legal__license-group[data-v-b75d8853] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.legal__license-type[data-v-b75d8853] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.legal__license-num[data-v-b75d8853] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.legal__license-items[data-v-b75d8853] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);
}
.legal__license-item[data-v-b75d8853] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  background: var(--bg-field);
  padding: var(--space-tight) var(--space-snug);
  border-radius: var(--radius-badge);
  white-space: nowrap;
}
.legal__license-ver[data-v-b75d8853] {
  color: var(--ink-muted);
}
@media (max-width: 768px) {
.legal__head[data-v-b75d8853] {
    padding: var(--space-roomy) var(--space-roomy) var(--space-snug);
}
.legal__licenses[data-v-b75d8853] {
    padding: 0 var(--space-roomy) var(--space-roomy);
}
}

.not-found[data-v-071430af] {
  text-align: center;
  padding: var(--space-wide) var(--space-roomy);
}
.not-found__cta[data-v-071430af] {
  display: inline-flex;
  margin-top: var(--gap-group);
  /* ⛔ 채워진 브랜드 면은 --bg-brand 다(--bg-brand-vivid 아님) — 다크의 vivid(#10b981)는
     밝아서 흰 글씨가 2.54:1 로 본문 AA(4.5) 미달이었다. 2026-08-29 처방 그대로
     **잉크가 아니라 면을 한 단 깊게** 한다(AppButton primary 와 같은 자리). */
  background: var(--bg-brand);
  color: var(--ink-on-solid);
  padding: var(--space-cozy) var(--space-band);
  border-radius: var(--radius-float);
}

.swatch[data-v-9973ae3b] {
  display: flex;
  flex-direction: column;
  border: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--motion-base);
}
.swatch[data-v-9973ae3b]:hover {
  border-color: var(--ink-brand);
}
.swatch__chip[data-v-9973ae3b] {
  height: 64px;
  border-bottom: var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(45deg, rgba(127, 127, 127, 0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(127, 127, 127, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(127, 127, 127, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(127, 127, 127, 0.18) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.swatch__sample[data-v-9973ae3b] {
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  background: var(--bg-card);
  padding: var(--pad-badge);
  border-radius: var(--radius-badge);
}
.swatch__meta[data-v-9973ae3b] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  padding: var(--space-snug) var(--space-cozy);
}
.swatch__name[data-v-9973ae3b] {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.swatch__value[data-v-9973ae3b] {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.swatch__desc[data-v-9973ae3b] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.swatch__copied[data-v-9973ae3b] {
  font-size: var(--size-meta);
  color: var(--ink-brand);
  font-weight: var(--weight-label);
}

.swatch-grid[data-v-12aea30c] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-stack);
  padding: var(--space-roomy);
  background: var(--bg-page);
  color: var(--ink-primary);
}

.block[data-v-fa6d1282] { padding: var(--space-roomy); background: var(--bg-page); color: var(--ink-primary);
}
.note[data-v-fa6d1282] { font-size: var(--size-meta); color: var(--ink-secondary); margin: var(--gap-stack) 0 0;
}
.note code[data-v-fa6d1282] { font-family: var(--font-mono);
}
.hover-card[data-v-fa6d1282] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-cozy);
  margin-bottom: var(--gap-inline);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  cursor: pointer;
}
.hover-card[data-v-fa6d1282]:hover {
  background: var(--bg-brand-vivid);
  color: var(--ink-inverse);
  transform: translateX(8px);
  border-color: var(--ink-brand);
}
.hover-card code[data-v-fa6d1282] { font-family: var(--font-mono); font-weight: var(--weight-title);
}
.hover-card span[data-v-fa6d1282] { color: var(--ink-muted);
}
.hover-card:hover span[data-v-fa6d1282] { color: var(--ink-inverse); opacity: 0.85;
}
.hover-hint[data-v-fa6d1282] { font-style: italic;
}
.pagepad-wrap[data-v-fa6d1282] {
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.pagepad-page[data-v-fa6d1282] {
  padding: var(--space-roomy) var(--pad-page-x);
  background: var(--bg-field);
}
.pagepad-content[data-v-fa6d1282] {
  background: var(--bg-brand-vivid);
  color: var(--ink-inverse);
  padding: var(--space-roomy);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
}
.pagepad-content code[data-v-fa6d1282] { font-family: var(--font-mono);
}
.shell[data-v-fa6d1282] {
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-page-alt);
}
.shell-topbar[data-v-fa6d1282] {
  height: var(--h-app-header);
  display: flex;
  align-items: center;
  padding: 0 var(--space-roomy);
  background: var(--bg-page);
  border-bottom: 1px solid var(--line-color);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.shell-topbar code[data-v-fa6d1282] { font-family: var(--font-mono); color: var(--ink-primary);
}
.shell-body[data-v-fa6d1282] { display: flex; height: 180px;
}
.shell-sidebar[data-v-fa6d1282] {
  width: 200px;
  border-right: 1px solid var(--line-color);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}
.shell-sidebar-header[data-v-fa6d1282] {
  height: var(--h-app-header);
  display: flex;
  align-items: center;
  padding: 0 var(--space-cozy);
  border-bottom: 1px solid var(--line-color);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.shell-sidebar-content[data-v-fa6d1282] {
  padding: var(--space-cozy);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.shell-main[data-v-fa6d1282] {
  flex: 1;
  padding: var(--space-roomy);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.list-demo[data-v-fa6d1282] {
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-page-alt);
}
.list-row[data-v-fa6d1282] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  height: var(--h-row);
  padding: 0 var(--space-cozy);
  border-bottom: 1px solid var(--line-color-subtle);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.list-row[data-v-fa6d1282]:nth-child(even) { background: var(--bg-subtle);
}
.list-row[data-v-fa6d1282]:last-child { border-bottom: none;
}
.dot[data-v-fa6d1282] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-vivid);
}
.scroll-demo[data-v-fa6d1282] {
  height: 140px;
  overflow-y: auto;
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
}
.scroll-line[data-v-fa6d1282] {
  padding: var(--space-snug) 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--line-color-subtle);
}
.scroll-line[data-v-fa6d1282]:last-child { border-bottom: none;
}
.fixed-grid[data-v-fa6d1282] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-stack);
}
.fixed-swatch[data-v-fa6d1282] {
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--size-meta);
}
.fixed-swatch code[data-v-fa6d1282] { font-family: var(--font-mono); font-weight: var(--weight-title);
}

.grid[data-v-e57a757f] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap-stack);
  padding: var(--space-roomy);
  background: var(--bg-page);
}
.card[data-v-e57a757f] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  background: var(--bg-brand-vivid);
  color: var(--ink-inverse);
  height: 100px;
  padding: var(--space-cozy);
}
.card-name[data-v-e57a757f] { font-family: var(--font-mono); font-size: var(--size-label);
}
.card-px[data-v-e57a757f] { font-size: var(--size-meta); opacity: 0.85;
}
.card-desc[data-v-e57a757f] { font-size: var(--size-meta); opacity: 0.7; margin-top: 4px;
}
.examples[data-v-e57a757f] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-stack);
  padding: var(--space-roomy);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.ex[data-v-e57a757f] {
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  padding: var(--space-cozy) var(--space-roomy);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--size-meta);
}
.ex code[data-v-e57a757f] { font-family: var(--font-mono);
}
.ex.large[data-v-e57a757f] { padding: var(--space-band) var(--space-band);
}
.ex.pill[data-v-e57a757f] { padding: var(--space-snug) var(--space-roomy);
}

.grid[data-v-fc018b5c] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-band);
  padding: var(--space-band);
  background: var(--bg-page);
}
.card[data-v-fc018b5c] {
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-primary);
}
.card-name[data-v-fc018b5c] { font-family: var(--font-mono); font-size: var(--size-label);
}
.card-desc[data-v-fc018b5c] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.rings[data-v-fc018b5c] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
  padding: var(--space-band);
  background: var(--bg-page);
  align-items: flex-start;
}
.ring-btn[data-v-fc018b5c] {
  padding: var(--space-snug) var(--space-roomy);
  border: 1px solid var(--line-color);
  background: var(--bg-page-alt);
  color: var(--ink-primary);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  cursor: pointer;
  font-family: inherit;
}
.ring-btn code[data-v-fc018b5c] { font-family: var(--font-mono);
}
.backdrop-demo[data-v-fc018b5c] {
  padding: var(--space-roomy);
  background: var(--bg-page);
}
.backdrop-bg[data-v-fc018b5c] {
  position: relative;
  height: 240px;
  border-radius: var(--radius-control);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--bg-brand-vivid) 0%, var(--ink-accent-purple) 100%);
}
.backdrop-bg[data-v-fc018b5c]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-backdrop);
  backdrop-filter: var(--blur-backdrop);
}
.backdrop-panel[data-v-fc018b5c] {
  position: absolute;
  inset: var(--space-band);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  padding: var(--space-roomy);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  z-index: 1;
}
.backdrop-panel code[data-v-fc018b5c] { font-family: var(--font-mono);
}
.backdrop-panel span[data-v-fc018b5c] { color: var(--ink-secondary);
}

.bars[data-v-b88d56e6] { padding: var(--space-roomy); background: var(--bg-page); color: var(--ink-primary);
}
.bar-row[data-v-b88d56e6] {
  display: grid;
  grid-template-columns: 220px 60px 100px 1fr;
  align-items: center;
  gap: var(--gap-stack);
  padding: var(--space-snug) 0;
  border-bottom: 1px solid var(--line-color-subtle);
}
.bar-row[data-v-b88d56e6]:last-child { border-bottom: none;
}
.bar-name[data-v-b88d56e6] { font-family: var(--font-mono); font-size: var(--size-label);
}
.bar-px[data-v-b88d56e6] { color: var(--ink-secondary); font-size: var(--size-meta);
}
.bar-rem[data-v-b88d56e6] { color: var(--ink-muted); font-size: var(--size-meta); font-family: var(--font-mono);
}
.bar-wrap[data-v-b88d56e6] { display: flex; align-items: center;
}
.bar[data-v-b88d56e6] {
  height: 12px;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
  min-width: 1px;
}
.control-sample[data-v-b88d56e6] {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}
.cards[data-v-b88d56e6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-stack);
  padding: var(--space-roomy);
  background: var(--bg-page);
}
.card[data-v-b88d56e6] {
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-control);
}
.card-inner[data-v-b88d56e6] {
  background: var(--bg-page-alt);
  border-radius: var(--radius-badge);
  color: var(--ink-primary);
  padding: var(--space-snug);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
}
.gap-stack[data-v-b88d56e6] { padding: var(--space-roomy); background: var(--bg-page); display: flex; flex-direction: column; gap: var(--gap-stack);
}
.gap-row[data-v-b88d56e6] {
  display: flex;
  align-items: center;
  background: var(--bg-page-alt);
  border-radius: var(--radius-control);
  padding: var(--space-snug) var(--space-cozy);
}
.gap-label[data-v-b88d56e6] {
  width: 110px;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.gap-box[data-v-b88d56e6] {
  width: 28px;
  height: 28px;
  background: var(--bg-brand-vivid);
  border-radius: var(--radius-badge);
}

.rows[data-v-dbf17981] {
  padding: var(--space-roomy);
  background: var(--bg-page);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.row[data-v-dbf17981] {
  display: grid;
  grid-template-columns: 220px 60px 1fr;
  gap: var(--gap-stack);
  align-items: center;
  border-bottom: 1px solid var(--line-color-subtle);
  padding-bottom: var(--space-cozy);
}
.row[data-v-dbf17981]:last-child { border-bottom: none; padding-bottom: 0;
}
.row-name[data-v-dbf17981] { font-family: var(--font-mono); font-size: var(--size-label);
}
.row-px[data-v-dbf17981] { color: var(--ink-secondary); font-size: var(--size-meta);
}
.sample[data-v-dbf17981] { color: var(--ink-primary);
}
.weight-sample[data-v-dbf17981] { font-size: var(--size-lead);
}
.lh-grid[data-v-dbf17981] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-stack);
  padding: var(--space-roomy);
  background: var(--bg-page);
  color: var(--ink-primary);
}
.lh-card[data-v-dbf17981] {
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
}
.lh-card p[data-v-dbf17981] { margin: var(--gap-inline) 0 0; font-size: var(--size-meta); color: var(--ink-secondary);
}
.combo[data-v-dbf17981] { padding: var(--space-roomy); background: var(--bg-page);
}
.combo-card[data-v-dbf17981] {
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  padding: var(--space-roomy);
  max-width: 480px;
}
.combo-title[data-v-dbf17981] {
  margin: 0;
  font-size: var(--size-title-sm);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.combo-meta[data-v-dbf17981] {
  margin: var(--gap-glyph) 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.combo-body[data-v-dbf17981] {
  margin: var(--gap-inline) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  line-height: var(--line-normal);
}
.combo-body code[data-v-dbf17981] {
  font-family: var(--font-mono);
  background: var(--bg-field);
  padding: 1px 4px;
  border-radius: var(--radius-badge);
  font-size: var(--size-meta);
}

.stage[data-v-6796727c] {
  position: relative;
  height: 360px;
  margin: var(--gap-group);
  background: var(--bg-page-alt);
  border: 1px dashed var(--line-color);
  border-radius: var(--radius-control);
}
.layer[data-v-6796727c] {
  position: absolute;
  width: 200px;
  padding: var(--space-cozy) var(--space-roomy);
  border-radius: var(--radius-control);
  color: var(--ink-inverse);
  font-size: var(--size-meta);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-md);
}
.layer code[data-v-6796727c] {
  font-family: var(--font-mono);
  font-weight: var(--weight-title);
}
.layer-grid[data-v-6796727c] {
  margin: 0 var(--gap-group) var(--gap-group);
  font-size: var(--size-meta);
  color: var(--ink-primary);
  border: 1px solid var(--line-color-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.layer-grid__row[data-v-6796727c] {
  display: grid;
  grid-template-columns: 220px 80px 1fr;
  gap: var(--gap-stack);
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: 1px solid var(--line-color-subtle);
}
.layer-grid__row[data-v-6796727c]:last-child { border-bottom: none;
}
.layer-grid__head[data-v-6796727c] {
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  background: var(--bg-page-alt);
}
.layer-grid code[data-v-6796727c] {
  font-family: var(--font-mono);
}

.col[data-v-180403b1] { display: flex; flex-direction: column; gap: 1rem; padding: 1rem;
}
.row[data-v-180403b1] { display: flex; gap: var(--gap-inline);
}

.hint[data-v-cb45b876] { font-size: var(--size-meta); color: var(--ink-muted);
}
.hint code[data-v-cb45b876] { font-family: var(--font-mono); color: var(--ink-secondary);
}

.col[data-v-e99fd4c8] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}
.row[data-v-e99fd4c8] { display: flex; gap: var(--space-snug); align-items: center;
}
.hint[data-v-e99fd4c8] { font-size: var(--size-meta); color: var(--ink-muted);
}
.list-row[data-v-e99fd4c8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-snug) var(--space-cozy);
  border-bottom: 1px solid var(--line-color-subtle);
  font-size: var(--size-label);
}
.row-actions[data-v-e99fd4c8] { display: flex; gap: var(--space-tight);
}
.row-label[data-v-e99fd4c8] { color: var(--ink-primary);
}

.row[data-v-a3bb1ac6] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-roomy);
}

.row[data-v-4f8aab49] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-cozy);
  align-items: center;
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.col[data-v-4f8aab49] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.playground[data-v-4f8aab49] {
  padding: var(--space-band);
  
  color: var(--ink-primary);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap[data-v-ff91239d] {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  padding: var(--space-roomy);
  height: 32rem;
  color: var(--ink-primary);
}
.value[data-v-ff91239d] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}
.hint[data-v-ff91239d] { font-size: var(--size-meta); color: var(--ink-muted);
}
.demo-dots[data-v-ff91239d] { display: flex; gap: 3px; padding-top: var(--space-tight); flex-wrap: wrap;
}
.demo-dot[data-v-ff91239d] { width: 6px; height: 6px; border-radius: var(--radius-pill);
}
.demo-count[data-v-ff91239d] { font-size: var(--size-label); font-weight: var(--weight-strong); color: var(--ink-brand);
}

.box[data-v-5a260067] { padding: var(--space-roomy); background: var(--bg-card); border-radius: var(--radius-control);
}
.metrics[data-v-5a260067] { display: flex; gap: var(--space-band); padding: var(--space-roomy); background: var(--bg-card); border-radius: var(--radius-control);
}
.metric[data-v-5a260067] { display: flex; flex-direction: column; align-items: center;
}
.metric__label[data-v-5a260067] { font-size: var(--size-meta); color: var(--ink-muted);
}
.metric__value[data-v-5a260067] { font-size: var(--size-label); font-weight: var(--weight-title); color: var(--ink-primary);
}

.col[data-v-dcaa00a6] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.bulk-row[data-v-dcaa00a6] {
  padding-bottom: var(--space-snug);
  border-bottom: 1px solid var(--line-color-subtle);
}
.checkbox-item[data-v-dcaa00a6] { padding: var(--space-tight) 0;
}

.row[data-v-464eb30a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-roomy);
}
.hint[data-v-464eb30a] { color: var(--ink-secondary); font-size: var(--size-meta); padding: 0 var(--space-roomy);
}

.box[data-v-2b25b40a] {
  padding: var(--space-roomy);
  max-width: 320px;
}
.val[data-v-2b25b40a] {
  margin-top: var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.col[data-v-43869b6d] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  max-width: 520px;
}
.hint[data-v-43869b6d] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.out[data-v-43869b6d] {
  margin: 0;
  padding: var(--space-snug);
  background: var(--bg-field);
  border-radius: var(--radius-xs);
  font-size: var(--size-label);
  white-space: pre-wrap;
}

.col[data-v-8bc43ff6] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.field[data-v-8bc43ff6] { display: flex; flex-direction: column; gap: 4px;
}
.label[data-v-8bc43ff6] { font-size: var(--size-meta); color: var(--ink-secondary);
}
.value[data-v-8bc43ff6] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.wrap[data-v-32f18e72] { max-width: 360px;
}

.col[data-v-032347bd] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.value[data-v-032347bd] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.menu-row[data-v-09c90621] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--pad-card);
}
.menu-note[data-v-09c90621] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.trigger-row[data-v-be49ce31] {
  display: flex;
  gap: var(--space-cozy);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}

.col[data-v-82625241] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.field[data-v-82625241] { display: flex; flex-direction: column; gap: 2px;
}
.value[data-v-82625241] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.trigger-row[data-v-c9ad6487] {
  display: flex;
  gap: var(--space-cozy);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-band);
  color: var(--ink-primary);
}
.pop-body[data-v-c9ad6487] {
  margin: 0;
  font-size: var(--size-label);
  line-height: var(--line-normal);
}

.col[data-v-515862d0] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.group[data-v-515862d0] {
  display: flex;
  gap: var(--space-roomy);
  flex-wrap: wrap;
}
.value[data-v-515862d0] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.col[data-v-6df35a13] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.hint[data-v-6df35a13] { font-size: var(--size-meta); color: var(--ink-muted);
}

.wrap[data-v-5f74783a] { max-width: 640px;
}
.demo[data-v-5f74783a] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}

.col[data-v-0ecd5d78] { display: flex; flex-direction: column; gap: var(--gap-stack); padding: var(--pad-card);
}
.field[data-v-0ecd5d78] { display: flex; align-items: center; gap: var(--gap-inline);
}
.field[data-v-0ecd5d78] .app-slider { max-width: 320px;
}
.value[data-v-0ecd5d78] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.col[data-v-282859c3] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}

.col[data-v-1a57bb97] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.row[data-v-1a57bb97] { display: flex; gap: var(--space-snug); align-items: center;
}
.value[data-v-1a57bb97] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}
.hint[data-v-1a57bb97] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-a50e1d92] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  color: var(--ink-primary);
}
.row[data-v-a50e1d92] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cozy);
  padding: var(--space-tight) 0;
}
.row__name[data-v-a50e1d92] { font-size: var(--size-body);
}

.stage[data-v-44e0744f] {
  padding: var(--space-roomy);
  color: var(--ink-primary);
}

.col[data-v-a1450c16] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary);
}
.value[data-v-a1450c16] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.hint[data-v-b97ec864] { font-size: var(--size-meta); color: var(--ink-muted);
}

.wrap[data-v-fc1445eb] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
}

.wrap[data-v-c369282e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
}
.note[data-v-c369282e] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-relaxed);
}

.wrap[data-v-5f0f06d0] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
}
.note[data-v-5f0f06d0] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-relaxed);
}
.panel[data-v-5f0f06d0] {
  height: 24rem;
}

/* 좁은 판이 어떻게 보이는지 — 상세 안 탭과 비슷한 폭으로 가둔다. */
.narrow[data-v-5f0f06d0] {
  max-width: 36rem;
}

.stage[data-v-1dbd995a] {
  height: 500px;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  display: flex;
}
.stage[data-v-1dbd995a] > * { flex: 1;
}
.hint[data-v-1dbd995a] { font-size: var(--size-meta); color: var(--ink-muted); margin-top: var(--space-snug);
}

.story-note[data-v-a4d93d9e] { padding: var(--space-roomy); display: flex; flex-direction: column; gap: var(--space-cozy);
}
.story-note h3[data-v-a4d93d9e] { margin: 0; font-size: var(--size-lead);
}
.story-note p[data-v-a4d93d9e] { margin: 0; font-size: var(--size-label); color: var(--ink-secondary);
}
.story-note pre[data-v-a4d93d9e] {
  margin: 0; padding: var(--space-cozy);
  background: var(--bg-field); border-radius: var(--radius-control);
  font-size: var(--size-meta); overflow-x: auto;
}
.story-warn[data-v-a4d93d9e] { color: var(--ink-warning);
}
.story-props[data-v-a4d93d9e] { font-size: var(--size-meta); border-collapse: collapse;
}
.story-props th[data-v-a4d93d9e], .story-props td[data-v-a4d93d9e] { padding: var(--space-tight) var(--space-snug); text-align: left; vertical-align: top;
}
.story-props caption[data-v-a4d93d9e] { text-align: left; font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-3ffc7c9c] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}
.frame[data-v-3ffc7c9c] { border: 1px solid var(--line-color); border-radius: var(--radius-control); overflow: hidden;
}
.hint[data-v-3ffc7c9c] { font-size: var(--size-meta); color: var(--ink-muted);
}

.row[data-v-a3de208d] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-roomy);
  padding: var(--space-roomy);
}
.item[data-v-a3de208d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-tight);
}
.cap[data-v-a3de208d] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

.row[data-v-4fde3fef] {
  display: flex;
  align-items: center;
  gap: var(--space-roomy);
  flex-wrap: wrap;
}
.col[data-v-4fde3fef] {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
}
.cell[data-v-4fde3fef] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-tight);
}
.cell em[data-v-4fde3fef] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-style: normal;
}
.line[data-v-4fde3fef] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-snug);
}
.hint[data-v-4fde3fef] {
  margin-top: var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.col[data-v-d4cc1bfd] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
}
.line[data-v-d4cc1bfd] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-cozy);
}
.line em[data-v-d4cc1bfd] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-style: normal;
}
.hint[data-v-d4cc1bfd] {
  margin-top: var(--space-cozy);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.info-block[data-v-ff765b8d] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  color: var(--ink-primary);
}
.info-block h3[data-v-ff765b8d] { margin: 0; font-size: var(--size-lead); font-weight: var(--weight-title);
}
.info-block p[data-v-ff765b8d] { margin: 0; font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-normal);
}
.info-block code[data-v-ff765b8d] { font-family: var(--font-mono); background: var(--bg-field); padding: 1px 4px; border-radius: var(--radius-badge);
}

.row[data-v-8f781b63] { display: flex; gap: var(--space-snug); flex-wrap: wrap;
}
.state-panel[data-v-8f781b63] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.state-panel code[data-v-8f781b63] { font-family: var(--font-mono); color: var(--ink-brand);
}
.hint[data-v-8f781b63] { font-size: var(--size-meta); color: var(--ink-muted);
}
.hint code[data-v-8f781b63] { font-family: var(--font-mono); color: var(--ink-secondary);
}

.hint[data-v-0de93149] { font-size: var(--size-meta); color: var(--ink-muted);
}
.hint code[data-v-0de93149] { font-family: var(--font-mono); color: var(--ink-secondary);
}

.col[data-v-008ae3cc] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  max-width: 520px;
}
.hint[data-v-008ae3cc] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.col[data-v-c99e9bca] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  color: var(--ink-primary);
}
.value[data-v-c99e9bca] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}
.filter-group-demo[data-v-c99e9bca] {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.filter-label[data-v-c99e9bca] {
  padding: 0 var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  border-right: 1px solid var(--line-color);
  display: flex;
  align-items: center;
  height: 100%;
}

.row[data-v-2615ed31] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-roomy);
  padding: var(--space-roomy);
}
.item[data-v-2615ed31] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-tight);
}
.cap[data-v-2615ed31] {
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}

.delete-confirm__message[data-v-7b632884] {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--line-normal);
  color: var(--ink-secondary);
  white-space: pre-line;
}
.delete-confirm__input-group[data-v-7b632884] {
  margin-top: var(--gap-group);
}
.delete-confirm__label[data-v-7b632884] {
  display: block;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-secondary);
  margin-bottom: var(--gap-inline);
}
.delete-confirm__input[data-v-7b632884] {
  width: 100%;
}

.col[data-v-d05d9769] .app-button { align-self: flex-start;
}

.filter-row[data-v-84c4693d] { display: flex; gap: var(--space-snug); flex-wrap: wrap;
}

.col[data-v-5173bcfb] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}
.head[data-v-5173bcfb] {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug) var(--space-cozy);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  background: var(--bg-page);
}
.head__title[data-v-5173bcfb] { flex: 1 1 auto; min-width: 0; font-size: var(--size-label); font-weight: var(--weight-title);
}
.hint[data-v-5173bcfb] { font-size: var(--size-meta); color: var(--ink-muted);
}

.stage[data-v-303fcf37] {
  height: 480px;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.hint[data-v-303fcf37] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-57dd34fd] {
  padding: var(--space-roomy);
  max-width: 360px;
}

.col[data-v-4a2c9815] { display: flex; flex-direction: column; gap: var(--space-cozy);
}
.grid[data-v-4a2c9815] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-snug);
}
.cell[data-v-4a2c9815] {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
.cell__name[data-v-4a2c9815] { font-family: var(--font-mono); font-size: var(--size-meta); color: var(--ink-primary);
}
.rows[data-v-4a2c9815] { display: flex; flex-direction: column; gap: var(--space-snug);
}
.row[data-v-4a2c9815] { display: flex; align-items: center; gap: var(--space-snug); color: var(--ink-primary);
}
.hint[data-v-4a2c9815] { font-size: var(--size-meta); color: var(--ink-muted);
}
.hint code[data-v-4a2c9815] { font-family: var(--font-mono); color: var(--ink-brand);
}

.col[data-v-cad7de84] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary);
}
.value[data-v-cad7de84] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.col[data-v-95833257] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}
.col p[data-v-95833257] { margin: 0; color: var(--ink-secondary); font-size: var(--size-label);
}

.split-container {
  overflow: hidden;
}
.split-container > * {
  min-height: 0;
}
.split-container > .split-resizer {
  flex: 0 0 auto;
}

.split-resizer[data-v-6d1bbc7d] {
  flex-shrink: 0;
  flex: 0 0 8px;
  height: 8px;
  background: var(--bg-field);
  cursor: row-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-base), opacity var(--motion-base), height var(--motion-base);
  z-index: var(--z-splitter);
  overflow: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.split-resizer.compact[data-v-6d1bbc7d] {
  opacity: 1;
  cursor: pointer;
  flex: 0 0 var(--h-control-md);
  height: var(--h-control-md);
  /* ⛔ 접힌 레일에는 면을 깔지 않는다 — 가로로 길어 흰 베일이 **띠**로 보인다(세로 분리대와 같은 이유).
     경계는 위아래 테두리가 만든다. */
  background: var(--bg-page);
  border-top: var(--line-strong);
  border-bottom: var(--line-strong);
}
/* ⛔ **얹힘과 끄는 중을 같게 하지 않는다** — 세로 분리대에서 2026-08-22 에 고친 것과 같은 자리다.
   둘 다 꽉 찬 브랜드색이면 마우스가 스치기만 해도 화면 너비만 한 초록 띠가 깔린다.
   얹힘은 「잡을 수 있다」는 귀띔이니 가운데로 모이는 옅은 빛으로 하고, 손잡이를 또렷하게 해
   어디를 잡는지 알린다. 꽉 찬 브랜드색은 **실제로 끄는 동안**만 쓴다.
   ⚠️ 이 부품만 그 손질에서 빠져 있었다(사용자 지적 2026-09-13). */
.split-resizer[data-v-6d1bbc7d]:hover:not(.compact) {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--bg-brand-soft) 30%,
    var(--bg-brand-mid) 50%,
    var(--bg-brand-soft) 70%,
    transparent 100%
  );
}
.split-resizer:hover:not(.compact) .split-resizer-handle[data-v-6d1bbc7d] {
  background: var(--bg-brand-vivid);
  opacity: 1;
}
/* 끄는 중 — 얹힘과 «같은 모양» 을 더 진하게(모양이 튀지 않게 이어 준다).
   ⛔ `:not(.compact)` 를 빼지 않는다 — 위 얹힘 규칙이 더 구체적이라 이 규칙이 지고,
      끄는 내내 마우스가 분리대 위에 있으므로 강조가 영영 안 나온다. */
.split-resizer.resizing[data-v-6d1bbc7d]:not(.compact) {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--bg-brand-mid) 24%,
    var(--bg-brand-vivid) 50%,
    var(--bg-brand-mid) 76%,
    transparent 100%
  );
}
.split-resizer.compact[data-v-6d1bbc7d]:hover {
  background: var(--bg-hover);
  border-top-color: var(--ink-brand);
  border-bottom-color: var(--ink-brand);
}
.split-resizer-handle[data-v-6d1bbc7d] {
  width: 40px; /* dimensions-ignore: 판을 미는 손잡이 그림의 길이다(두께 3px) — 컨트롤 크기가 아니다 */
  height: 3px; /* dimensions-ignore: 손잡이 그림의 두께 — 세로 분리대의 3px 와 짝이다 */
  background: var(--ink-secondary);
  border-radius: var(--radius-badge);
  opacity: 0.6;
  transition: opacity var(--motion-base), background-color var(--motion-base);
  pointer-events: none;
}
.split-resizer:hover .split-resizer-handle[data-v-6d1bbc7d],
.split-resizer.resizing .split-resizer-handle[data-v-6d1bbc7d] {
  opacity: 1;
}
.split-resizer-label[data-v-6d1bbc7d] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-primary);
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.15em;
  z-index: 5; /* css-ignore: 분리대 안(--z-splitter 스택) 에서의 위아래 순서 — 전역 층이 아니다 */
}
.split-resizer-controls[data-v-6d1bbc7d] {
  position: absolute;
  right: var(--space-cozy);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: var(--gap-glyph);
  z-index: 6; /* css-ignore: 접기 단추가 접힘 라벨 위에 오도록 — 분리대 안에서의 순서다 */
}
/* 왼쪽 정렬 — 오른쪽 끝을 비워 아래 막대의 단추 묶음과 겹쳐 보이지 않게 한다 */
.split-resizer-controls--left[data-v-6d1bbc7d] {
  right: auto;
  left: var(--space-cozy);
}
.resizer-toggle-btn[data-v-6d1bbc7d] {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--line-strong);
  border-radius: var(--radius-badge);
  background: var(--bg-float);
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--size-meta);
  padding: 0;
}
.resizer-toggle-btn[data-v-6d1bbc7d]:hover {
  color: var(--ink-brand);
  border-color: var(--ink-brand);
}

.splitter-stage[data-v-44f43403] {
  width: 100%;
  height: 22rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-page);
  color: var(--ink-primary);
}
.pane[data-v-44f43403] {
  overflow: auto;
  padding: var(--space-roomy);
  font-size: var(--size-body);
}
.pane.top[data-v-44f43403] {
  background: var(--bg-field);
}
.pane h4[data-v-44f43403] {
  margin: 0 0 var(--space-snug);
  font-size: var(--size-body);
  font-weight: var(--weight-title);
}
.pane p[data-v-44f43403] {
  margin: 0 0 var(--space-snug);
}
.hint[data-v-44f43403] {
  color: var(--ink-muted);
}

/* 글로벌 .col 사용 */

.warn[data-v-8b0f64a2] {
  padding: var(--space-roomy);
  background: var(--bg-warning-soft);
  border: 1px solid var(--ink-warning);
  border-radius: var(--radius-control);
  color: var(--ink-primary);
}
.warn h3[data-v-8b0f64a2] { margin: 0 0 var(--space-snug); font-size: var(--size-lead);
}
.warn p[data-v-8b0f64a2] { margin: 0 0 var(--space-snug); font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-normal);
}
.warn code[data-v-8b0f64a2] { font-family: var(--font-mono); background: var(--bg-field); padding: 1px 4px; border-radius: var(--radius-badge);
}

.loading-state[data-v-be22835b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-wide);
  gap: var(--gap-group);
  color: var(--ink-secondary);
}
.spinner[data-v-be22835b] {
  width: 40px;
  height: 40px;  /* dimensions-ignore: 도는 표시(스피너) 원의 지름이다 — 컨트롤 높이가 아니라 그림 크기다 */
  border-radius: var(--radius-pill);
  border: var(--line-accent) solid var(--line-color-subtle);
  border-top-color: var(--ink-brand);
  animation: spin-be22835b 0.8s linear infinite;
}
@keyframes spin-be22835b {
to {
    transform: rotate(360deg);
}
}

.col[data-v-496dbb6c] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}

.col[data-v-b9be7853] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary);
}
.hint[data-v-b9be7853] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-22accd08] {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  padding: var(--space-roomy);
}
.note[data-v-22accd08] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.stage[data-v-498258bb] {
  height: 400px;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.col[data-v-4acf243c] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary); align-items: flex-start;
}
.value[data-v-4acf243c] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}
.hint[data-v-4acf243c] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-255a4008] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary);
}
.value[data-v-255a4008] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}
.filter-group-demo[data-v-255a4008] {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.filter-label[data-v-255a4008] {
  padding: 0 var(--space-snug);
  font-size: var(--size-label);
  color: var(--ink-secondary);
  white-space: nowrap;
  border-right: 1px solid var(--line-color);
  display: flex;
  align-items: center;
  height: 100%;
}

.output[data-v-ddda73d8] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.output pre[data-v-ddda73d8] { margin: var(--space-snug) 0 0; white-space: pre-wrap; word-break: break-all;
}

.ram-list[data-v-2a541089] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.ram-row[data-v-2a541089] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--pad-row);
  background: var(--bg-card);
  border: var(--line-soft);
  border-radius: var(--radius-control);
}
.ram-row--tight[data-v-2a541089] {
  padding: var(--pad-row-dense);
}
.ram-name[data-v-2a541089] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  color: var(--ink-primary);
  font-size: var(--size-body);
}
.ram-tag[data-v-2a541089] {
  color: var(--ink-muted);
  font-size: var(--font-rel-sm);
  font-style: normal;
}
.ram-note[data-v-2a541089] {
  margin-top: var(--gap-stack);
  color: var(--ink-secondary);
  font-size: var(--size-label);
}

.stage[data-v-1906477c] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  align-items: flex-start;
  padding: var(--space-roomy);
  color: var(--ink-primary);
}
.stage__hint[data-v-1906477c] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-muted);
}
.stage__result[data-v-1906477c] {
  margin: 0;
  font-size: var(--size-body);
  color: var(--ink-primary);
}

.col[data-v-fdceb3a9] {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  padding: var(--space-roomy);
}
.note[data-v-fdceb3a9] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
}

.state-panel[data-v-46572f9c] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.state-panel code[data-v-46572f9c] { font-family: var(--font-mono); color: var(--ink-brand);
}
.hint[data-v-46572f9c] { font-size: var(--size-meta); color: var(--ink-muted);
}

.row-set[data-v-18578625] { display: flex; flex-direction: column; gap: var(--space-snug);
}
.cell[data-v-18578625] { display: flex; align-items: center; gap: var(--space-cozy); font-size: var(--size-label); color: var(--ink-secondary);
}
.fake-table-head[data-v-18578625] {
  display: flex;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  background: var(--bg-page-alt);
  overflow: hidden;
}
.fake-th[data-v-18578625] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-cozy);
  border-right: 1px solid var(--line-color);
  cursor: pointer;
  font-size: var(--size-meta);
  font-weight: var(--weight-label);
  color: var(--ink-primary);
}
.fake-th[data-v-18578625]:last-child { border-right: none;
}
.fake-th[data-v-18578625]:hover { background: var(--bg-hover);
}
.state-panel[data-v-18578625] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.state-panel code[data-v-18578625] { font-family: var(--font-mono); color: var(--ink-brand);
}
.hint[data-v-18578625] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-1d7c08ab] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
  
  color: var(--ink-primary);
}
.row[data-v-1d7c08ab] {
  display: flex;
  gap: var(--space-snug);
}
.panel[data-v-1d7c08ab] {
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
}
.panel code[data-v-1d7c08ab] { font-family: var(--font-mono); color: var(--ink-brand);
}

.info[data-v-a506b228] {
  padding: var(--space-roomy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  color: var(--ink-primary);
}
.info h3[data-v-a506b228] { margin: 0 0 var(--space-snug); font-size: var(--size-lead);
}
.info p[data-v-a506b228] { margin: 0 0 var(--space-snug); font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-normal);
}
.info code[data-v-a506b228] { font-family: var(--font-mono); background: var(--bg-field); padding: 1px 4px; border-radius: var(--radius-badge);
}
.info a[data-v-a506b228] { color: var(--ink-brand);
}

.list[data-v-d018b366] {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  padding: var(--space-roomy);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
}

.col.tall[data-v-48964995] { height: 480px;
}
.col.tall[data-v-48964995] .terminal-wrapper { flex: 1; height: 100%;
}
.hint[data-v-48964995] { font-size: var(--size-meta); color: var(--ink-muted);
}

.row[data-v-bae1fbaa] { display: flex; gap: var(--space-snug); flex-wrap: wrap;
}
.state-panel[data-v-bae1fbaa] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.state-panel code[data-v-bae1fbaa] { font-family: var(--font-mono); color: var(--ink-brand);
}
.hint[data-v-bae1fbaa] { font-size: var(--size-meta); color: var(--ink-muted);
}
.fake-toast-stage[data-v-bae1fbaa] { display: flex; flex-direction: column; gap: var(--space-snug); align-items: center;
}
.fake-toast[data-v-bae1fbaa] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-cozy);
  padding: var(--space-cozy) var(--space-roomy);
  background: var(--bg-field);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  min-width: 260px;
  max-width: 90%;
  font-size: var(--size-label);
  color: var(--ink-primary);
}
.fake-toast.success[data-v-bae1fbaa] { border-color: var(--ink-success);
}
.fake-toast.error[data-v-bae1fbaa] { border-color: var(--ink-danger);
}
.fake-toast.warning[data-v-bae1fbaa] { border-color: var(--ink-warning);
}
.fake-toast i[data-v-bae1fbaa] { font-size: var(--size-lead);
}
.fake-toast.success i[data-v-bae1fbaa] { color: var(--ink-success);
}
.fake-toast.error i[data-v-bae1fbaa] { color: var(--ink-danger);
}
.fake-toast.warning i[data-v-bae1fbaa] { color: var(--ink-warning);
}
.fake-toast.info i[data-v-bae1fbaa] { color: var(--ink-brand);
}
.msg[data-v-bae1fbaa] { flex: 1;
}
.close-btn[data-v-bae1fbaa] {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 var(--space-tight);
}
.close-btn[data-v-bae1fbaa]:hover { color: var(--ink-primary);
}
.fade-enter-active[data-v-bae1fbaa], .fade-leave-active[data-v-bae1fbaa] { transition: opacity 0.2s;
}
.fade-enter-from[data-v-bae1fbaa], .fade-leave-to[data-v-bae1fbaa] { opacity: 0;
}

.col[data-v-b59c88e1] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);
}
.note[data-v-b59c88e1] { max-width: 560px; line-height: var(--line-normal);
}
.note h3[data-v-b59c88e1] { margin: 0 0 var(--space-snug);
}
.note p[data-v-b59c88e1] { margin: 0 0 var(--space-snug); color: var(--ink-secondary);
}

.col[data-v-3ca35601] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary); width: 100%;
}
.row[data-v-3ca35601] { display: flex; gap: var(--space-cozy); align-items: center; flex-wrap: wrap;
}
.hint[data-v-3ca35601] { font-size: var(--size-meta); color: var(--ink-muted);
}
.inline[data-v-3ca35601] { display: flex; align-items: center; gap: var(--space-snug); font-size: var(--size-label); color: var(--ink-secondary);
}

.col[data-v-9992726c] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy); color: var(--ink-primary); align-items: flex-start;
}

.col[data-v-b6f87cf9] { display: flex; flex-direction: column; gap: var(--space-cozy); padding: var(--space-roomy);  color: var(--ink-primary);
}
.value[data-v-b6f87cf9] { font-size: var(--size-meta); color: var(--ink-secondary); font-family: var(--font-mono);
}

.col[data-v-fc9c9bd9] { display: flex; flex-direction: column; gap: var(--space-roomy); padding: var(--space-roomy); color: var(--ink-primary); width: 100%;
}
.row[data-v-fc9c9bd9] { display: flex; gap: var(--step-5); align-items: center; flex-wrap: wrap;
}

.wrap[data-v-ce83ce91] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  height: 420px;
  padding: var(--space-cozy);
}
.note[data-v-ce83ce91] {
  font-size: var(--size-label);
  color: var(--ink-secondary);
  margin: 0;
}

.splitter-stage[data-v-a9c76299] {
  width: 100%;
  height: 360px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  margin: var(--space-roomy) 0;
  background: var(--bg-page);
}
.pane[data-v-a9c76299] {
  padding: var(--space-cozy);
  color: var(--ink-primary);
  font-size: var(--size-meta);
  overflow: auto;
  box-sizing: border-box;
  min-width: 0;
}
.pane.left[data-v-a9c76299] { background: var(--bg-page);
}
.pane.right[data-v-a9c76299] { background: var(--bg-page-alt);
}
.pane h4[data-v-a9c76299] { margin: 0 0 var(--space-snug); font-size: var(--size-label); font-weight: var(--weight-title);
}
.pane p[data-v-a9c76299] { margin: 0 0 var(--space-snug); color: var(--ink-secondary);
}
.hint[data-v-a9c76299] { color: var(--ink-muted); font-family: var(--font-mono);
}

/* 분리대 시각 강조 — 8px muted 라 잘 안 보일 수 있음 */
.splitter-stage[data-v-a9c76299] .vertical-split-resizer {
  background: var(--line-color);
}
.splitter-stage[data-v-a9c76299] .vertical-split-resizer:hover,
.splitter-stage[data-v-a9c76299] .vertical-split-resizer.resizing {
  background: var(--bg-brand-vivid);
}
.splitter-stage[data-v-a9c76299] .vertical-split-resizer-handle {
  background: var(--ink-muted);
}

.row[data-v-0c3ff5a4] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug);
}

.row[data-v-85ef5c9f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug);
}

.stage[data-v-c1f1e703] {
  height: 480px;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-page);
  margin: var(--space-roomy);
}
/* 768px 이상 강제 — 테이블 모드 보장 */
.stage-wide[data-v-c1f1e703] { min-width: 1000px;
}
.hint[data-v-c1f1e703] { margin: 0 var(--space-roomy) var(--space-roomy); font-size: var(--size-meta); color: var(--ink-muted);
}
.state-panel[data-v-c1f1e703] {
  margin: 0 var(--space-roomy) var(--space-roomy);
  padding: var(--space-cozy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.state-panel code[data-v-c1f1e703] { font-family: var(--font-mono); color: var(--ink-brand);
}

.hint[data-v-279123fe] { font-size: var(--size-meta); color: var(--ink-muted);
}

.col[data-v-26d91181] { display: flex; flex-direction: column; gap: var(--space-snug); padding: var(--space-cozy);
}
.hint[data-v-26d91181] { font-size: var(--size-meta); color: var(--ink-muted); max-width: 420px;
}

.stage[data-v-851db785] {
  height: 600px;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-page);
  margin: var(--space-roomy);
}

.row[data-v-cb4f0b21] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug);
}

.col[data-v-6c3ee9ed] {
  display: flex;
  flex-direction: column;
  gap: var(--space-cozy);
  padding: var(--space-roomy);
}
.note[data-v-6c3ee9ed] {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--size-label);
}

.info[data-v-b065164a] {
  padding: var(--space-roomy);
  background: var(--bg-page-alt);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-control);
  color: var(--ink-primary);
}
.info h3[data-v-b065164a] { margin: 0 0 var(--space-snug); font-size: var(--size-lead);
}
.info p[data-v-b065164a] { margin: 0 0 var(--space-snug); font-size: var(--size-meta); color: var(--ink-secondary); line-height: var(--line-normal);
}
.info code[data-v-b065164a] { font-family: var(--font-mono); background: var(--bg-field); padding: 1px 4px; border-radius: var(--radius-badge);
}
.info a[data-v-b065164a] { color: var(--ink-brand);
}

.pv-frame[data-v-e3dff38e] {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.vt[data-v-71c278d9] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

.iv[data-v-806e7109] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.iv__zoom[data-v-806e7109] {
  min-width: var(--space-wide);
  text-align: center;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.iv__pane[data-v-806e7109] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background-color: var(--bg-page);
  padding: var(--pad-card);
}
.iv__pane.is-fit[data-v-806e7109] {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.iv__img[data-v-806e7109] {
  display: block;
  margin: 0 auto;
}
.iv__img.is-fit[data-v-806e7109] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.tev[data-v-ad63cb43] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.tev__conn[data-v-ad63cb43] {
  color: var(--ink-warning);
  margin-left: var(--gap-inline);
}
.tev__readonly[data-v-ad63cb43] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.tev__autosave[data-v-ad63cb43] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.tev__autosave--error[data-v-ad63cb43] {
  color: var(--ink-warning);
}
.tev__body[data-v-ad63cb43] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 소스/미리보기 패널 영역 — 한 번에 하나만 보인다(탭 바는 이 위에 온다) */
.tev__panes[data-v-ad63cb43] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.tev__pane[data-v-ad63cb43] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
/*
  탭 바 — 판 위에 선다. ⛔ TabNav 가 전제하는 그 자리라 **밑줄 방향을 뒤집는 덧칠이 없다**
  (하단에 두었던 동안에는 active 표시를 탭 '위'로 옮기는 :deep 규칙 넷이 필요했다 — 2026-09-13 걷었다).
*/
.tev__tabs[data-v-ad63cb43] {
  flex-shrink: 0;
}

.sqp[data-v-2d9823c9] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.sqp__hint[data-v-2d9823c9] {
  margin: 0;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
/* 라벨(이름) + 값 칸 + NULL — DbConnectionForm 의 행과 같은 자리·같은 간격 */
.sqp__field[data-v-2d9823c9] {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
}
.sqp__field[data-v-2d9823c9] > * {
  flex: 0 0 auto;
}
.sqp__field > .sqp__label[data-v-2d9823c9] {
  flex: 0 0 96px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-label);
  color: var(--ink-secondary);
}
/* 값 칸이 남는 자리를 받는다(이름·NULL 은 제 글자만큼) */
.sqp__field > .sqp__value[data-v-2d9823c9] {
  flex: 1 1 auto;
  min-width: 0;
}

.dbq[data-v-a7bc5e94] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* 결과 칸의 머리띠 — 왼쪽에 알림 글, 오른쪽에 단추. 높이는 제 내용만큼(칸을 뺏지 않는다). */
.dbq__bar[data-v-a7bc5e94] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  /* ⛔ 축약은 **창이 아니라 이 막대의 폭**이 정한다 — 이 판은 열기영역의 칸 안에 서고 그 칸은
     중첩 분할된다(창 1680px 인데 막대는 680px 인 자리가 실제로 있다). 같은 화면의 파일 바가
     이미 같은 이유로 판 기준으로 옮겨 갔다(AssetViewerShell 의 `viewer-bar`). */
  container-type: inline-size;
  container-name: sql-bar;
}
/* 대상 DB 가 서는 자리 — 이름이 길면 줄어들고, 구분자가 뒤엣것(알림 글)과 가른다 */
.dbq__target[data-v-a7bc5e94] {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.dbq__sep[data-v-a7bc5e94] {
  flex: 0 0 auto;
  align-self: stretch;
  margin: var(--gap-glyph) 0;
  border-left: var(--line-strong);
}
/* 단추 묶음은 언제나 오른쪽 끝이다 — 자리가 모자라면 왼쪽 글이 «먼저» 줄어든다.
   ⛔ 줄어드는 몫은 밑넓이에 비례한다 — 종전에는 넓은 단추 묶음이 부족분의 대부분을 떠안아
      **대상 DB 이름이 2px 로 찌그러졌다**(실측 2026-09-13, 막대 480px). 이 글들이 먼저 양보한다. */
.dbq__hint[data-v-a7bc5e94],
.dbq__meta[data-v-a7bc5e94] {
  flex: 0 1000 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dbq__acts[data-v-a7bc5e94] {
  margin-left: auto;
  /* 대상 DB 가 이 안에 서므로 이름이 길면 «묶음이» 줄어든다 — 단추는 안 줄고 이름만 줄어든다. */
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
/* ⛔ 고르개의 글자는 접히지 않는다 — 「실제 실행 (ANALYZE)」가 두 줄이 되면서 막대가 41→51px 로
   커졌다(실측 2026-09-13, 막대 680px 이하). 막대는 편집기와 결과 사이의 띠라 높이가 흔들리면
   위아래 칸이 같이 밀린다. */
.dbq__acts[data-v-a7bc5e94] .app-checkbox__label {
  white-space: nowrap;
}
/* 좁은 «막대» ① — 조언을 접는다. 사유(blockedReason)는 접지 않는다: 그것이 이 자리의 본디 몫이다. */
@container sql-bar (max-width: 760px) {
.dbq__hint--tip[data-v-a7bc5e94] {
    display: none;
}
}
/* 좁은 «막대» ② — 단추를 아이콘만으로 줄인다(title 이 이름 몫).
   원본: components/asset/AssetViewerShell.vue 의 `@container viewer-bar` 블록. */
/* 이만큼 좁아지면 한 줄에 못 담는다 — 자르지 말고 **접는다**(실측 2026-09-13: 막대 271px 에서
   단추 하나가 자리 22px 를 받아 10px 삐져나왔다). 체크박스 라벨(「실제 실행 (ANALYZE)」)은
   뜻이 값이라 줄일 수 없고, 단추는 이미 아이콘만 남은 상태다. */
@container sql-bar (max-width: 340px) {
.dbq__bar[data-v-a7bc5e94],
  .dbq__acts[data-v-a7bc5e94] {
    flex-wrap: wrap;
}
}
@container sql-bar (max-width: 560px) {
.dbq__acts[data-v-a7bc5e94] .app-btn .app-btn__label {
    display: none;
}
.dbq__acts[data-v-a7bc5e94] .app-btn {
    padding: 0;
    width: var(--h-control-md);
}
}
.dbq__split[data-v-a7bc5e94] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dbq__editor[data-v-a7bc5e94] {
  flex: none;
  min-height: 0;
  overflow: hidden;
}
.dbq__result[data-v-a7bc5e94] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 탭 아래 한 줄 — 그 문장의 이름과 결과 요약. 탭이 없을 때(문장 하나)도 이름이 여기 선다. */
.dbq__head[data-v-a7bc5e94] {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-color);
  min-width: 0;
}
.dbq__head-name[data-v-a7bc5e94] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-label);
  font-size: var(--size-meta);
  color: var(--ink-primary);
}
.dbq__head-meta[data-v-a7bc5e94] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dbq__table[data-v-a7bc5e94] {
  flex: 1 1 auto;
  min-height: 0;
}
.dbq__log[data-v-a7bc5e94] {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--space-cozy);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink-primary);
}
.dbq__log-danger[data-v-a7bc5e94] {
  color: var(--ink-danger);
}
.dbq__state[data-v-a7bc5e94] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}

.sqlv[data-v-a4b75968] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* 대상 DB 표시 — 파일 바 안에서 이름이 길면 줄어든다(단추는 밀리지 않는다) */
.sqlv__target[data-v-a4b75968] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  font-size: var(--size-meta);
  color: var(--ink-secondary);
}
.sqlv__target-name[data-v-a4b75968] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 막대가 이만큼 좁아지면 대상 DB 를 «단추만» 남긴다 — 이름은 이미 0px 까지 줄어 있고
   로고까지 세우면 단추가 제 칸 밖으로 삐져나온다(실측 2026-09-13: 막대 271px 에서 자리 26px
   인데 로고+단추가 40px). 무엇을 가리키는지는 그 단추의 `title` 이 말해 준다.
   ⛔ 창이 아니라 **막대 폭**이 정한다 — 이 판은 중첩 분할된 칸 안에 서므로(SqlRunPane 의
      `sql-bar` 컨테이너를 그대로 받아 쓴다). */
@container sql-bar (max-width: 340px) {
.sqlv__target[data-v-a4b75968] {
    display: none;
}
}

.oev[data-v-4e85782c] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.oev__readonly[data-v-4e85782c],
.oev__autosave[data-v-4e85782c] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.oev__state[data-v-4e85782c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.oev__state-icon[data-v-4e85782c] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.oev__editor[data-v-4e85782c] {
  flex: 1 1 auto;
  min-height: 0;
}
.oev__editor > div[data-v-4e85782c] {
  width: 100%;
  height: 100%;
}

.ofe[data-v-51c39b7d] {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-badge);
}
/* 드래그 중에는 버튼 주변을 강조해 "여기에 떨구면 됨" 을 알린다 */
.ofe--drag[data-v-51c39b7d] {
  outline: var(--focus-ring-width) dashed var(--ink-brand);
  outline-offset: 2px;
}
.ofe__file[data-v-51c39b7d] {
  display: none;
}
.ofe__notice[data-v-51c39b7d] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ofe__title[data-v-51c39b7d] {
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
  color: var(--ink-primary);
}
.ofe__lead[data-v-51c39b7d] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
  line-height: var(--line-relaxed);
}
.ofe__steps[data-v-51c39b7d] {
  margin: 0;
  padding-left: var(--space-band);
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
  color: var(--ink-primary);
  font-size: var(--size-label);
}
.ofe__actions[data-v-51c39b7d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  margin-top: var(--gap-inline);
}
.ofe__dontshow[data-v-51c39b7d] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
  white-space: nowrap;
}

.hv[data-v-c4b36c01] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.hv__meta[data-v-c4b36c01] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
  margin-right: var(--gap-inline);
}
.hv__zoom[data-v-c4b36c01] {
  /* 확대율 표시 겸 100% 복귀 버튼 — 폭을 고정해 숫자가 바뀌어도 흔들리지 않게 */
  min-width: 3.5em;
}
.hv__state[data-v-c4b36c01] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  flex: 1 1 auto;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.hv__state-icon[data-v-c4b36c01] {
  font-size: var(--icon-lead);
  color: var(--ink-muted);
}
.hv__scroll[data-v-c4b36c01] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
  background: var(--bg-field);
}
.hv__page[data-v-c4b36c01] {
  /* 컨테이너 너비에 맞추고(zoom=1), 확대 시 넘치면 가로 스크롤 */
  width: calc(min(100%, 900px) * var(--hv-zoom, 1));
  flex: 0 0 auto;
  background: var(--bg-paper);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
/* v-html 로 삽입된 SVG 는 scoped 가 닿지 않으므로 :deep 로 맞춘다 */
.hv__page[data-v-c4b36c01] svg {
  width: 100%;
  height: auto;
  display: block;
}

.zev[data-v-7393f3ff] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.zev__readonly[data-v-7393f3ff] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.zev__pending[data-v-7393f3ff] {
  font-size: var(--size-meta);
  color: var(--ink-warning);
  white-space: nowrap;
}
.zev__state[data-v-7393f3ff] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}
.zev__state-danger[data-v-7393f3ff] {
  color: var(--ink-danger);
  font-size: var(--size-title-lg);
}
.zev__body[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
/* 좌우 폭·표시는 분리대 컨트롤이 leftPaneStyle/rightPaneStyle 로 직접 준다 — 여기서 계산하지 않는다 */
.zev__list[data-v-7393f3ff] {
  display: flex;
  flex-direction: column;
}
/* 파일 드래그 중 시각 피드백 — 놓으면 현재 폴더에 추가된다 */
.zev__list--drop[data-v-7393f3ff] {
  outline: var(--focus-ring-width) dashed var(--ink-brand);
  outline-offset: -2px;
}
.zev__nav[data-v-7393f3ff] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.zev__crumbs[data-v-7393f3ff] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  flex-wrap: wrap;
}
.zev__crumb-sep[data-v-7393f3ff] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.zev__search[data-v-7393f3ff] {
  margin-left: auto;
  width: 260px;
}
.zev__table[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-height: 0;
}
.zev__name[data-v-7393f3ff] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.zev__name > i[data-v-7393f3ff] {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.zev__name--dir > i.zev__icon-dir[data-v-7393f3ff] {
  color: var(--ink-warning);
}
.zev__preview[data-v-7393f3ff] {
  display: flex;
  flex-direction: column;
}
.zev__preview-head[data-v-7393f3ff] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  background-color: var(--bg-card);
}
.zev__preview-head > i[data-v-7393f3ff] {
  color: var(--ink-muted);
}
.zev__preview-name[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}
.zev__preview-body[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zev__preview-text[data-v-7393f3ff] {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--space-cozy);
  overflow: auto;
  font-family: var(--font-mono); /* AppBadge --mono 와 동일 스택 */
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink-primary);
}
.zev__preview-image[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--space-cozy);
  background-color: var(--bg-page);
}
.zev__preview-image img[data-v-7393f3ff] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.zev__preview-pdf[data-v-7393f3ff] {
  flex: 1 1 auto;
  border: none;
  width: 100%;
  height: 100%;
}

/* HWP 미리보기 — 자산 HWP 뷰어(.hv__scroll/.hv__page)와 같은 종이 위 문서 표현 */
.zev__preview-hwp[data-v-7393f3ff] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-cozy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-stack);
  background: var(--bg-page);
}
.zev__hwp-page[data-v-7393f3ff] {
  width: 100%;
  flex: 0 0 auto;
  background: var(--bg-paper);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.zev__hwp-page[data-v-7393f3ff] svg {
  width: 100%;
  height: auto;
  display: block;
}
.zev__file-input[data-v-7393f3ff] {
  display: none;
}

/* 좁은 화면 — 분리대의 모바일 탭 모드가 목록↔미리보기 전환을 맡는다(스택 규칙은 공통 CSS) */
@media (max-width: 768px) {
.zev__search[data-v-7393f3ff] {
    width: 100%;
}
}

.rcm-test-result[data-v-d1b8d217] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--size-meta);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcm-test-result--ok[data-v-d1b8d217] {
  color: var(--ink-success);
}
.rcm-test-result--fail[data-v-d1b8d217] {
  color: var(--ink-danger);
}

.rev[data-v-926c5abe] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.rev__readonly[data-v-926c5abe] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.rev__state[data-v-926c5abe] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}
.rev__state-danger[data-v-926c5abe] {
  color: var(--ink-danger);
  font-size: var(--size-title-lg);
}
.rev__body[data-v-926c5abe] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
/* 좌우 폭·표시는 분리대 컨트롤이 leftPaneStyle/rightPaneStyle 로 직접 준다 — 여기서 계산하지 않는다 */
.rev__list[data-v-926c5abe] {
  display: flex;
  flex-direction: column;
}
/* 파일 드래그 중 시각 피드백 — 놓으면 현재 폴더로 업로드된다 */
.rev__list--drop[data-v-926c5abe] {
  outline: var(--focus-ring-width) dashed var(--ink-brand);
  outline-offset: -2px;
}
.rev__nav[data-v-926c5abe] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.rev__crumbs[data-v-926c5abe] {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  min-width: 0;
  flex-wrap: wrap;
}
.rev__crumb-sep[data-v-926c5abe] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.rev__ref[data-v-926c5abe] {
  margin-left: auto;
  flex: 0 0 auto;
}
.rev__ref + .rev__search[data-v-926c5abe] {
  margin-left: 0;
}
.rev__search[data-v-926c5abe] {
  margin-left: auto;
  width: 260px;
}
.rev__table[data-v-926c5abe] {
  flex: 1 1 auto;
  min-height: 0;
}
.rev__name[data-v-926c5abe] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
}
.rev__name > i[data-v-926c5abe] {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.rev__name--dir > i.rev__icon-dir[data-v-926c5abe] {
  color: var(--ink-warning);
}
.rev__actions[data-v-926c5abe] {
  display: inline-flex;
  gap: var(--gap-glyph);
  justify-content: flex-end;
}
.rev__preview[data-v-926c5abe] {
  display: flex;
  flex-direction: column;
}
.rev__preview-head[data-v-926c5abe] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  background-color: var(--bg-card);
}
.rev__preview-head > i[data-v-926c5abe] {
  color: var(--ink-muted);
}
.rev__preview-name[data-v-926c5abe] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--size-label);
  font-weight: var(--weight-title);
}
.rev__preview-body[data-v-926c5abe] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rev__preview-text[data-v-926c5abe] {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--space-cozy);
  overflow: auto;
  font-family: var(--font-mono); /* AppBadge --mono 와 동일 스택 */
  font-size: var(--size-meta);
  line-height: var(--line-relaxed);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink-primary);
}
.rev__preview-image[data-v-926c5abe] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--space-cozy);
  background-color: var(--bg-page);
}
.rev__preview-image img[data-v-926c5abe] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.rev__preview-pdf[data-v-926c5abe] {
  flex: 1 1 auto;
  border: none;
  width: 100%;
  height: 100%;
}

/* HWP 미리보기 — 자산 HWP 뷰어와 같은 종이 위 문서 표현(ZIP 편집기와 동일) */
.rev__preview-hwp[data-v-926c5abe] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-cozy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-stack);
  background: var(--bg-page);
}
.rev__hwp-page[data-v-926c5abe] {
  width: 100%;
  flex: 0 0 auto;
  background: var(--bg-paper);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-badge);
  overflow: hidden;
}
.rev__hwp-page[data-v-926c5abe] svg {
  width: 100%;
  height: auto;
  display: block;
}
.rev__file-input[data-v-926c5abe] {
  display: none;
}
.rev__import[data-v-926c5abe] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}
.rev__import-desc[data-v-926c5abe] {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}
.rev__export[data-v-926c5abe] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-height: 0;
  max-height: 60vh;
}
.rev__export-desc[data-v-926c5abe] {
  margin: 0;
  padding: var(--space-cozy) var(--space-roomy) 0;
  color: var(--ink-secondary);
  font-size: var(--size-label);
}

/* 좁은 화면 — 분리대의 모바일 탭 모드가 목록↔미리보기 전환을 맡는다(스택 규칙은 공통 CSS) */
@media (max-width: 768px) {
.rev__search[data-v-926c5abe] {
    width: 100%;
}
}

.vl[data-v-3fa056de] {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* 이 모달은 껍데기뿐이다 — 모양은 AppModal 과 DbConnectionForm 이 갖는다. */

.dbt[data-v-14218aff] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* 이 판의 머리줄은 **오른쪽 작업판의 탭 줄과 같은 높이**로 선다(사용자 지시 2026-09-13) —
   두 판의 구분선이 같은 자리에 눕고, 그 아래 첫 줄도 같은 자리에서 시작한다.
   ⛔ 어림잡은 높이를 박지 않는다 — 저쪽 줄(TabNav variant="sub")의 셈을 그대로 옮겨 적는다:
     탭 바 위 숨(--gap-inline) + 탭 안여백 위아래(--pad-row-dense 의 세로 = --space-snug)
     + 탭 글자 한 줄(--size-label × --line-tight) + 활성 탭 밑줄(--line-w-thick)
     + 그 밑줄이 바의 선에 겹치라고 둔 자리(--gap-glyph) + 바의 선(--line-w).
   아래 여백은 탭 바의 «아래 숨» 과 같은 --gap-inline 이다. */
.dbt__head[data-v-14218aff] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  min-height: calc(
    var(--gap-inline) + var(--space-snug) * 2 + var(--size-label) * var(--line-tight)
    + var(--line-w-thick) + var(--gap-glyph) + var(--line-w)
  );
  margin-bottom: var(--gap-inline);
  border-bottom: var(--line-strong);
}
.dbt__search[data-v-14218aff] {
  flex: 1 1 auto;
  min-width: 0;
}
.dbt__body[data-v-14218aff] {
  flex: 1 1 auto;
  min-height: 0;
}
.dbt__row[data-v-14218aff] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  width: 100%;
}
.dbt__icon[data-v-14218aff] {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--icon-label);
}
/* 스키마·묶음은 층의 이름이라 개체보다 눈에 먼저 들어와야 한다 */
.dbt__row--schema .dbt__label[data-v-14218aff],
.dbt__row--group .dbt__label[data-v-14218aff] {
  font-weight: var(--weight-title);
}
/* 넘침은 칸이 정한다 — 열에 overflow: 'ellipsis' 를 선언해 두었고, 그 규칙이 자식까지 닿는다 */
.dbt__label[data-v-14218aff] {
  min-width: 0;
}
.dbt__key-icon[data-v-14218aff] {
  flex: none;
  color: var(--ink-warning);
  font-size: var(--icon-marker);
}
.dbt__meta[data-v-14218aff] {
  margin-left: auto;
  padding-left: var(--space-tight);
  flex: none;
  font-size: var(--size-meta);
  color: var(--ink-muted);
  max-width: 50%;
}
.dbt__more[data-v-14218aff] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  color: var(--ink-secondary);
  font-size: var(--size-meta);
}

.dbo[data-v-cd67d692] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.dbo__bar[data-v-cd67d692] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.dbo__meta[data-v-cd67d692] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
/* 바의 오른쪽 끝으로 민다 — ⛔ 이 규칙을 아래 `.dbo__body` 와 한 묶음으로 적지 않는다.
   그러면 단추가 `flex: 1 1 auto` 로 바 전체를 차지하고 `flex-direction: column` 때문에
   아이콘이 글자 위로 올라앉아 바가 통째로 무너진다(실사고 2026-09-13 — 데이터 탭). */
.dbo__bar-end[data-v-cd67d692] {
  margin-left: auto;
}
.dbo__body[data-v-cd67d692] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dbo__table[data-v-cd67d692] {
  flex: 1 1 auto;
  min-height: 0;
}
.dbo__editor[data-v-cd67d692] {
  flex: 1 1 auto;
  min-height: 0;
}
.dbo__state[data-v-cd67d692] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}
.dbo__state-danger[data-v-cd67d692] {
  color: var(--ink-danger);
  font-size: var(--size-title-lg);
}

.dbs[data-v-a2dbdb8a] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.dbs__body[data-v-a2dbdb8a] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dbs__bar[data-v-a2dbdb8a] {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-tight) var(--space-snug);
  border-bottom: var(--line-strong);
  flex-wrap: wrap;
}
.dbs__meta[data-v-a2dbdb8a] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
/* 단추를 오른쪽 끝으로 — 첫 단추가 남은 자리를 전부 밀어낸다(진단 탭). */
.dbs__end[data-v-a2dbdb8a] {
  margin-left: auto;
}

/* 줄 안의 추이 — 값 글자와 같은 줄에 눕는다(제 칸을 가진 타일이 아니다).
   ⛔ 루트의 `.app-chart--spark` 는 곁들이는 자리용이라 폭 50%·흐림이 걸려 있다 — 여기서는
      값 오른쪽의 자리를 못 박고 흐림을 걷는다. */
/* 값 칸 — 로고·값·눈금·스파크라인이 **한 줄**에 선다.
   ⛔ 이 규칙이 없으면 AppChart 의 뿌리가 블록이라 그림이 숫자 아래로 떨어진다(실측 2026-09-13:
      숫자 y=543, 그림 y=562). 줄바꿈도 막는다. */
.dbs__value[data-v-a2dbdb8a] {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--gap-glyph);
  min-width: 0;
  width: 100%;
}
.dbs__scale[data-v-a2dbdb8a] {
  font-size: var(--size-meta);
  color: var(--ink-muted);
}
.dbs__spark[data-v-a2dbdb8a] {
  width: 8rem;
  max-width: 40%;
  opacity: 1;
  flex: none;
}
.dbs__table[data-v-a2dbdb8a] {
  flex: 1 1 auto;
  min-height: 0;
}
.dbs__state[data-v-a2dbdb8a] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}
.dbs__state-danger[data-v-a2dbdb8a] {
  color: var(--ink-danger);
  font-size: var(--size-title-lg);
}

.dbv[data-v-48b2d290] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.dbv__readonly[data-v-48b2d290] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font-size: var(--size-meta);
  color: var(--ink-muted);
}

/* 구획 탭이 셸의 파일 바 «안» 에 서므로 탭 바의 밑줄·면을 눌러 바와 한 몸이 되게 한다 */
.dbv__lead[data-v-48b2d290] {
  border-bottom: none;
  background: transparent;
}
.dbv__lead[data-v-48b2d290] .tab-nav__tab {
  margin-bottom: 0;
}
.dbv__state[data-v-48b2d290] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  color: var(--ink-secondary);
  padding: var(--space-band);
  text-align: center;
}
.dbv__state-danger[data-v-48b2d290] {
  color: var(--ink-danger);
  font-size: var(--size-title-lg);
}
.dbv__body[data-v-48b2d290] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
/* 좌우 폭·표시는 분리대 컨트롤이 leftPaneStyle/rightPaneStyle 로 직접 준다 — 여기서 계산하지 않는다 */
.dbv__nav[data-v-48b2d290] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dbv__work[data-v-48b2d290] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* SQL 구획 — 트리가 없어 판 하나가 폭을 다 쓴다(폭은 분리대가 아니라 구획이 정한다) */
.dbv__work--full[data-v-48b2d290] {
  flex: 1 1 auto;
}
.dbv__work[data-v-48b2d290] >  * {
  flex: 1 1 auto;
  min-height: 0;
}
/* 바깥 탭 줄은 늘어나지 않는다 — 판이 남은 높이를 전부 쓴다.
   ⛔ **선은 줄이 긋는다**(사용자 지적 2026-09-13) — 탭 바가 제 밑줄을 그으면 그 선이 탭 끝에서
      끊겨 [새로고침] 아래가 비어 보였다(실측: 선 719~1574px, 줄은 1700px 까지).
      부모가 그으면 TabNav 가 그것을 보고 제 밑줄을 스스로 접는다(TabNav 의 isFlush). */
.dbv__worktabs[data-v-48b2d290] {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-inline);
  flex: none;
  border-bottom: var(--line-strong);
  /* sub 변종이 갖고 있던 아래 여백을 줄이 가져온다 — 탭의 활성 표시가 이 선 위에 앉도록. */
  margin-bottom: var(--gap-inline);
}
.dbv__worktabs[data-v-48b2d290] >  .tab-nav {
  flex: 1 1 auto;
  min-width: 0;
  /* 아래 여백은 줄이 갖는다(위 참조) — 여기 남기면 활성 표시가 줄의 선에서 8px 떠 버린다. */
  margin-bottom: 0;
}
/* 단추는 탭 이름들과 같은 줄의 오른쪽 끝에 선다 — 벽에 붙이지 않는다(사용자 지적 2026-09-13). */
.dbv__worktabs-end[data-v-48b2d290] {
  flex: none;
  margin-right: var(--space-snug);
  /* ⛔ 줄의 선 위에 «얹지» 않는다(사용자 지적 2026-09-13) — 줄이 선을 긋게 바꾸면서 단추의
     아래 여백까지 같이 걷었더니 단추 바닥이 선과 같은 자리(실측 간격 0px)에 놓여 선이 단추에
     붙어 보였다. 탭의 활성 표시는 `.tab-nav__tab` 의 아래 여백만큼 선에서 떠 있으므로
     (실측 4px = --gap-glyph) 단추도 같은 만큼 띄워 한 줄로 선다. */
  margin-bottom: var(--gap-glyph);
}