/* 앱 공용 조각 (#145 4단계) - 여러 쪽이 같이 쓰는 앱만의 모양: 쪽 머리 크기, 패널·수치, 개체 유형 배지, 알림 띠,
 * 파고드는 카드 스택(#nw-modal-*), 확인 창, 타이핑·스피너·진행 체크, 문서 조각, 대화 세션 바, 말풀이(.nw-tip) 등.
 * 예전 legacy-demo.css·legacy-plain.css 를 합쳤다. 층 순서: tokens → base → app → components(쪽 <style> 은 층 밖).
 * 새로 만드는 쪽은 components.css 의 ui- 컴포넌트를 먼저 쓴다 - 여기 이름(.panel·.stat)을 새로 늘리지 않는다.
 */
@layer app {
  .eyebrow { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); letter-spacing: 0; text-transform: none; }
  /* 쪽 제목은 한 크기(22/700) - 쪽마다 따로 키우던 것(1.2~1.7rem)을 맞춘다(#145 2단계). 새 쪽은 ui.page_head 를 쓴다 */
  .wrap h1:not(.ui-page-head__title) { font-size: var(--fs-2xl) !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.3; }

  .wrap { padding-top: 32px; padding-bottom: 80px; flex: 1 0 auto; }   /* 폭·좌우 여백은 base.css */
  .wrap.full {
    max-width: none; padding: 0; position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  /* .panel·.card 는 공용 카드(ui-card ui-card--pad)로 옮겼다(#180) */
  .row { display: flex; gap: 8px; align-items: center; }

  .stat-grid { display: flex; gap: 30px; flex-wrap: wrap; }
  .stat { min-width: 90px; }
  .stat .n { font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
  .stat .l { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }

  .type-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 500;
    padding: 2px 7px; border-radius: var(--r-sm); letter-spacing: .01em; white-space: nowrap;
  }
  .type-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
  /* 유형 색은 --tc 하나로 - 유형마다의 값(.type-<이름>{--tc})은 틀이 이 공간의 유형으로 만들어 넣는다(_base_demo, #166).
     모르는 유형(지운 새 유형 등)은 회색 */
  .type-badge, .rel-node { color: var(--tc, var(--t-other)); background: color-mix(in srgb, var(--tc, var(--t-other)) 14%, transparent); }

  .flash { background: var(--accent-soft); border: 1px solid var(--border-strong); border-radius: var(--r-md);
           padding: 10px 14px; margin-bottom: 16px; font-size: var(--fs-md); }
  sup.cite a { text-decoration: none; color: var(--accent); font-weight: 600; }

  /* ── 말풍선형 모달(출처 드릴다운 공용) — 카드 스택 ──
     드릴다운(관계→문서→개체→...)할 때마다 새 패널이 오른쪽 위(활성)에 쌓이고, 이전
     패널들은 왼쪽으로 밀려나며 흐려진다("내가 거쳐온 depth"가 그대로 보이도록). 뒤로
     가면 맨 위 패널이 사라지고 바로 이전 패널이 다시 오른쪽/선명하게 돌아온다. */
  #nw-modal-backdrop {
    position: fixed; inset: 0; z-index: 200; background: var(--scrim); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: flex-end; padding: 4vh 4vw;
    animation: nw-fade .18s ease;
  }
  #nw-modal-backdrop.open { display: flex; }
  @keyframes nw-fade { from { opacity: 0; } to { opacity: 1; } }
  #nw-modal-stack { position: relative; width: min(640px, 100%); height: 92vh; }
  #nw-modal-stack.wide { width: min(1100px, 96vw); }
  #nw-modal-stack.wide3 { width: min(1500px, 98vw); }
  .nw-modal-panel {
    position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    padding: 0; transform-origin: right center;
    transition: transform .28s cubic-bezier(.2,.9,.3,1.1), opacity .28s ease, filter .28s ease;
  }
  .nw-modal-panel.depth-0 { transform: translateX(0) scale(1); opacity: 1; filter: none; z-index: 10; pointer-events: auto; }
  .nw-modal-panel.depth-1 { transform: translateX(-140px) scale(.94); opacity: .65; filter: blur(.5px) brightness(.8); z-index: 9; pointer-events: none; }
  .nw-modal-panel.depth-2 { transform: translateX(-250px) scale(.88); opacity: .4; filter: blur(1px) brightness(.65); z-index: 8; pointer-events: none; }
  .nw-modal-panel.depth-3 { transform: translateX(-340px) scale(.82); opacity: .22; filter: blur(1.5px) brightness(.5); z-index: 7; pointer-events: none; }
  /* 말풍선 꼬리 — 뒤 배경(그래프/채팅)과 시각적으로 이어지는 느낌(맨 앞 패널에만) */
  .nw-modal-panel.depth-0::before {
    content: ''; position: absolute; left: -9px; top: 42px; width: 18px; height: 18px;
    background: var(--surface); border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
    transform: rotate(45deg); border-radius: 0 0 0 4px;
  }
  .nw-modal-panel .nw-modal-close {
    position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 5;
    background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-muted);
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: var(--fs-lg);
  }
  .nw-modal-panel .nw-modal-close:hover { color: var(--text); }
  .nw-modal-panel .nw-modal-back {
    position: sticky; top: 14px; float: left; margin: 14px 0 0 14px; z-index: 5;
    background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-muted);
    padding: 6px 13px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-xs); font-weight: 700;
  }
  .nw-modal-panel .nw-modal-back:hover { color: var(--text); border-color: var(--accent); }

  /* ── 확인 모달(공용) — 삭제 등 되돌릴 수 없는 액션 전 브라우저 native confirm() 대신 ── */
  #nw-confirm-backdrop {
    position: fixed; inset: 0; z-index: 220; background: var(--scrim); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; padding: 20px; animation: nw-fade .15s ease;
  }
  #nw-confirm-backdrop.open { display: flex; }
  #nw-confirm-panel {
    width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sh-3);
    animation: nw-pop .18s cubic-bezier(.2,.9,.3,1.3);
  }
  #nw-confirm-message { font-size: var(--fs-md); line-height: 1.6; color: var(--text); margin: 0 0 18px; }
  .nw-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

  /* ── 타이핑 인디케이터(챗봇 "생각 중" 등 어디서든 재사용) ── */
  .nw-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
  .nw-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    animation: nw-typing-bounce 1.1s infinite ease-in-out;
  }
  .nw-typing span:nth-child(2) { animation-delay: .15s; }
  .nw-typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes nw-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

  /* ── 회전 스피너(생성·저장 등 긴 대기 작업 어디서든 재사용) ── */
  .nw-spinner-row { display: inline-flex; align-items: center; gap: 9px; }
  .nw-spinner { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
                border: 2px solid var(--border-strong); border-top-color: var(--accent);
                animation: nw-spin .7s linear infinite; }
  @keyframes nw-spin { to { transform: rotate(360deg); } }

  /* ── 체크리스트형 진행 표시(초록 체크 + 스피너) — 기획서 생성, AI 에이전트 실시간
     진행상황 등 여러 단계를 거치는 긴 작업 어디서든 재사용 ── */
  .progress-steps { display: flex; flex-direction: column; gap: 7px; }
  .progress-step { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-md); color: var(--text-muted); }
  .progress-step.done { color: var(--text); }
  .progress-check {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 15px; height: 15px; border-radius: 50%; background: var(--t-tech); color: var(--on-accent);
    font-size: 10px; font-weight: 700; line-height: 1; margin-top: 2px;
  }
  .progress-check.fail { background: var(--t-problem); }

  /* ── 카드/행 진입 리베얼(홈 통계·목록 등 재사용) ── */
  .nw-reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
  .nw-reveal-in { opacity: 1; transform: none; }
  .nw-modal-body { padding: 0 0 20px; }
  .nw-modal-body .modal-loading { padding: 80px 20px; text-align: center; color: var(--text-muted); }

  /* ── 클라이언트 데이터를 그대로 보여주는 상세 패널 콘텐츠(NWModal.openHtml() 용) ──
     AI 에이전트 trace 상세, 관계유형 실제 관계 인스턴스, 기획서 후보 상세 등에서 공용. */
  .nwp-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 4px; padding: 20px 24px 0; }
  .nwp-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 16px; padding: 0 24px; }
  .nwp-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
              padding: 10px 14px; margin: 0 24px 8px; font-size: var(--fs-md);
              display: flex; flex-wrap: wrap; gap: 4px 18px; }
  /* 필드 하나가 길면(줄바꿈 있음, 문장, JSON 등) 그 필드만 줄 전체를 차지하고, 나머지
     짧은 스칼라 값들(id·건수 등)은 옆으로 나란히 배치 — 전부 한 줄씩 쌓으면 스크롤이
     불필요하게 길어져서. */
  .nwp-item .kv { display: flex; flex-direction: column; gap: 2px; }
  .nwp-item .kv.wide { flex-basis: 100%; }
  .nwp-item .k { color: var(--text-subtle); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
  .nwp-item .v { color: var(--text); line-height: 1.6; }
  .nwp-item .v a { color: var(--accent); }
  .nwp-actions { padding: 4px 24px 4px; }

  /* ── 리스크 챗봇 답변 마크다운(공용) — 데모용 답변이라 h1~h3 를 실제로 크게 키우면
     과해 보여서, 헤딩도 본문과 같은 크기에 굵게만 처리해 "정돈된 문단"처럼 보이게 한다. ── */
  .risk-answer { font-size: var(--fs-md); line-height: 1.7; }
  .risk-answer h1, .risk-answer h2, .risk-answer h3 { font-size: 1em; font-weight: 700; color: var(--text); margin: 12px 0 4px; }
  .risk-answer h1:first-child, .risk-answer h2:first-child, .risk-answer h3:first-child { margin-top: 0; }
  .risk-answer p { margin: 0 0 10px; }
  .risk-answer p:last-child { margin-bottom: 0; }
  .risk-answer strong { color: var(--text); font-weight: 700; }
  .risk-answer ul, .risk-answer ol { margin: 4px 0 10px; padding-left: 20px; }
  .risk-answer li { margin-bottom: 3px; }
  .risk-answer blockquote { margin: 8px 0; padding: 4px 12px; border-left: 2px solid var(--border-strong); color: var(--text-muted); }

  /* ── 스트리밍 타자기 조각 페이드인(NWTypewriter 공용) ── */
  .tw-chunk { opacity: 0; filter: blur(3px); transform: translateY(2px);
              transition: opacity .4s ease-out, filter .4s ease-out, transform .4s ease-out; }
  .tw-chunk.tw-in { opacity: 1; filter: blur(0); transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .tw-chunk { opacity: 1; filter: none; transition: none; }
  }

  /* ── "?" 정보버튼(공용) — 후보 카드·관점 선택 등에서 상세/투명성 정보를 우측 패널로
     열 때 재사용. 체크박스·셀렉트 등 클릭 대상 옆에 작게 붙인다. ── */
  .info-btn {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; padding: 0;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-subtle);
    font-size: var(--fs-xs); font-weight: 700; box-shadow: none; line-height: 1;
  }
  .info-btn:hover { color: var(--t-industry); border-color: var(--t-industry); box-shadow: none; }

  /* ── 공용 hover 툴팁(.nw-tip, 공용) — 유사도·심각도·부하지수 같은 산출된 수치 옆에
     붙여 "이 숫자가 어떻게 계산됐는지"를 보여줄 때 재사용. 브라우저 기본 title 툴팁은
     스타일을 못 건드리고 밋밋해서(예전엔 그걸 썼음) 순수 CSS(attr(data-tip))로 직접
     그린다 — 새 JS 배선 없이 data-tip="..." 만 붙이면 어디서든 씀. 줄바꿈이 필요하면
     data-tip 안에 실제 개행(또는 &#10;)을 넣으면 white-space:pre-line 이 살려준다.
     오른쪽 정렬(우측 상단 배지 옆에 자주 붙으므로 오른쪽으로 벗어나지 않게 오른쪽
     끝을 기준으로 왼쪽으로 펼쳐짐) — 모달 패널이 overflow-x:hidden 이라 왼쪽 벗어남만
     신경 쓰면 됨. */
  /* ⚠ cursor:help 를 일부러 안 씀 — 이건 브라우저/OS 가 마우스 포인터 옆에 그리는
     네이티브 커서 아이콘(대부분 물음표 모양)이라, DOM 에 아무 텍스트도 안 남기고
     스크린샷에도 안 찍히면서 화면엔 "?"가 보이는 상태가 됨(실제 겪은 버그 —
     .bar-seg 에 cursor:help 를 넣었다가 "안 보이는데 사장님한텐 물음표가 보인다"는
     신고를 받고서야 원인을 찾음). 이 컴포넌트 자체가 이미 hover 시 시각적 반응(배지
     강조색 등)을 갖고 있어 별도 커서 힌트 없이도 "눌러볼 만한 것"임이 드러난다. */
  .nw-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .nw-tip::after {
    content: attr(data-tip); position: absolute; top: 100%; right: 0; margin-top: 7px;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    font-size: var(--fs-xs); font-weight: 400; line-height: 1.55; white-space: pre-line; text-align: left;
    padding: 9px 11px; border-radius: var(--r-md); width: max-content; max-width: 240px;
    box-shadow: var(--sh-2); z-index: 60; pointer-events: none;
    opacity: 0; transform: translateY(-4px); transition: opacity .12s ease-out, transform .12s ease-out;
  }
  .nw-tip:hover::after, .nw-tip:focus-visible::after { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .nw-tip::after { transition: none; } }
  /* 트리거가 화면/패널의 왼쪽 가장자리에 가까워 기본값(오른쪽 정렬, 왼쪽으로 펼침)이면
     뷰포트·모달 밖으로 잘리는 자리에서 씀 — 왼쪽 정렬(오른쪽으로 펼침)로 뒤집는다. */
  .nw-tip.nw-tip-left::after { right: auto; left: 0; }

  /* window.NWFloatTip 용 — .nw-tip::after 와 같은 톤(같은 색·테두리·그림자)이지만
     position:fixed 로 body 바로 아래에 붙여 SVG 등 어디서든 마우스 좌표로 옮길 수 있다. */
  .nw-float-tip {
    position: fixed; z-index: 200; pointer-events: none; transform: translate(-50%, -100%);
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    font-size: var(--fs-xs); font-weight: 400; line-height: 1.55; white-space: pre-line; text-align: left;
    padding: 8px 11px; border-radius: var(--r-md); max-width: 240px; width: max-content;
    box-shadow: var(--sh-2);
    opacity: 0; transition: opacity .1s ease-out;
  }
  .nw-float-tip.show { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .nw-float-tip { transition: none; } }

  /* ── 대화 세션 바(RAG 챗봇·AI 에이전트 공용) — 새 세션 시작 + 최근 세션 목록.
     세션 전환은 SPA 부분교체가 아니라 그냥 새 URL(?session=id)로 이동 — 이 앱
     전체가 서버 렌더 우선이라 이 편이 더 단순하고 견고함. ── */
  .session-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
  .session-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  /* .session-list 의 display:flex 는 author 스타일이라 브라우저 기본 [hidden]{display:
     none}(user-agent 스타일)보다 우선순위가 높다 — origin 이 다르면 명시도(specificity)
     와 무관하게 author 가 항상 이긴다. 그래서 hidden 속성을 줘도 "이전 세션 더보기"
     목록이 처음부터 그냥 보이고 있었다(실제 버그, 리포트로 확인). [hidden] 을 다시
     author 스타일로 명시해서 되찾는다. */
  .session-list-more[hidden] { display: none; }
  .session-item {
    display: inline-flex; align-items: center; gap: 2px; max-width: 340px;
    padding: 3px 4px 3px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-muted); font-size: var(--fs-sm);
  }
  /* 이름만 줄임표로 자른다 - '(현재 세션)'·날짜는 줄어들지 않고 온전히 보인다(#352). a 는 말풀이를 띄우므로 넘침을 자르지 않는다 */
  .session-item a { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; color: inherit; text-decoration: none;
    max-width: 300px; min-width: 0; padding: 3px 0; justify-content: flex-start; }
  .session-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .session-now, .session-date { flex: 0 0 auto; }
  .session-item:hover { border-color: var(--border-strong); color: var(--text); }
  .session-now { color: var(--accent); font-weight: 600; }
  .session-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); }
  .session-limit[hidden] { display: none; }
  .session-limit.is-full { border-color: var(--accent); color: var(--text); }
  .session-date { color: var(--text-muted); font-size: var(--fs-xs); }
  .session-item.active { border-color: var(--accent); color: var(--text);
                          background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
  .session-delete {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; padding: 0; margin-left: 2px;
    background: none; border: none; box-shadow: none; color: var(--text-subtle); font-size: var(--fs-lg);
    line-height: 1; cursor: pointer;
  }
  .session-delete:hover { background: var(--border-strong); color: var(--t-problem); }
  .session-more-toggle {
    background: none; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 12px;
    font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; box-shadow: none;
  }
  .session-more-toggle:hover { background: var(--border-strong); color: var(--text); }

  /* ── 문서 프래그먼트 공통 ── */
  .doc-frag { font-size: var(--fs-md); }
  .doc-frag-header { padding: 20px 24px 14px; }
  .doc-type-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-md); margin-bottom: 10px;
  }
  .doc-frag h2 { font-size: var(--fs-xl); margin: 0 0 4px; line-height: 1.4; }
  .doc-frag-meta { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }

  /* 이메일 */
  .doc-email .doc-type-tag { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  .email-fields { background: var(--surface-2); border-radius: var(--r-lg); padding: 12px 16px; margin: 10px 24px; font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
  .email-fields div { padding: 2px 0; }
  .email-fields b { color: var(--text); font-weight: 600; margin-right: 6px; }
  .email-thread-strip { display: flex; gap: 6px; overflow-x: auto; padding: 0 24px 14px; }
  .email-thread-strip button {
    background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 6px 11px; font-size: var(--fs-xs); white-space: nowrap; flex-shrink: 0; font-weight: 500;
  }
  .email-thread-strip button:hover, .email-thread-strip button.active { border-color: var(--accent); color: var(--text); }
  .email-body {
    margin: 0 24px; padding: 18px 20px; background: var(--surface-2); border-radius: var(--r-lg);
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: var(--fs-md); border-left: 3px solid var(--accent);
  }

  /* 메신저 */
  .doc-messenger .doc-type-tag { background: color-mix(in srgb, var(--t-tech) 12%, transparent); color: var(--t-tech); }
  .messenger-channel { padding: 0 24px 14px; color: var(--text-muted); font-size: var(--fs-md); font-weight: 600; }
  .messenger-log { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
  .msg-bubble { max-width: 82%; }
  .msg-bubble.self { align-self: flex-end; text-align: right; }
  .msg-speaker { font-size: var(--fs-xs); font-weight: 700; margin-bottom: 3px; color: var(--speaker-color, var(--text-muted)); }
  .msg-time { color: var(--text-subtle); font-weight: 400; margin-left: 6px; }
  .msg-text {
    display: inline-block; text-align: left; background: var(--surface-2); padding: 9px 13px; border-radius: var(--r-lg);
    font-size: var(--fs-md); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--speaker-color, transparent) 25%, transparent);
  }

  /* 보고서 */
  .doc-report .doc-type-tag { background: color-mix(in srgb, var(--t-org) 12%, transparent); color: var(--t-org); }
  .report-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 24px 16px;
                    font-size: var(--fs-sm); color: var(--text-muted); background: var(--surface-2); padding: 12px 16px; border-radius: var(--r-lg); }
  .report-fields b { color: var(--text); }
  .report-blocks { padding: 0 24px; display: flex; flex-direction: column; gap: 14px; }
  .report-block-label { font-size: var(--fs-xs); font-weight: 700; color: var(--t-org); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .report-block-text { font-size: var(--fs-md); line-height: 1.75; white-space: pre-wrap; color: var(--text); }

  /* 정식 문서(제안서·최종보고서·산출물) */
  .doc-formal { position: relative; }
  .doc-formal .doc-type-tag { background: color-mix(in srgb, var(--t-industry) 12%, transparent); color: var(--t-industry); }
  .formal-seal {
    position: absolute; top: 18px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid var(--t-industry); color: var(--t-industry); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-xs); opacity: .5; transform: rotate(-8deg);
  }
  .formal-sections { padding: 6px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
  .formal-section { display: flex; gap: 14px; }
  .formal-section .sec-num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-md); background: var(--surface-2);
    color: var(--t-industry); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-md);
  }
  .formal-section h3 { margin: 2px 0 6px; font-size: var(--fs-md); }
  .formal-section p { margin: 0; font-size: var(--fs-md); line-height: 1.75; color: var(--text-muted); white-space: pre-wrap; }

  /* 일반 폴백 */
  .doc-generic .doc-type-tag { background: var(--surface-2); color: var(--text-muted); }
  .generic-body { margin: 0 24px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: var(--fs-md); }
  /* 긴 문서 쪽 이동(#285) */
  .doc-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 24px; padding: 8px 10px; border: 1px solid var(--border);
               border-radius: var(--r-md); background: var(--bg-subtle); font-size: var(--fs-sm); }
  .doc-pager__btn { padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
                    text-decoration: none; cursor: pointer; }
  .doc-pager__btn:hover { border-color: var(--accent); color: var(--accent); }
  .doc-pager__btn.is-off { opacity: .4; cursor: default; pointer-events: none; }
  .doc-pager__now { color: var(--text-muted); } .doc-pager__now b { color: var(--text); }
  .doc-pager__jump { margin-left: auto; max-width: 220px; padding: 5px 8px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
                     background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
  #doc-body { scroll-margin-top: 80px; }
  /* 그래프 줌 잠금(#206) - 도구 막대 안 */
  .zoom-lock { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--border);
               border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); color: var(--text); cursor: pointer; white-space: nowrap; }
  .zoom-lock input { margin: 0; width: auto; }
  /* 텍스트·마크다운 보기 바꾸기(#205) */
  .doc-view-switch { display: inline-flex; gap: 2px; margin: 0 24px 14px; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
  .doc-view-switch button { border: 0; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); padding: 5px 12px; border-radius: var(--r-sm); cursor: pointer; }
  .doc-view-switch button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-1); }
  .doc-md { margin: 0 24px; line-height: 1.75; font-size: var(--fs-md); overflow-wrap: anywhere; }
  /* 서식 있는 글(문서 md 보기 #205 · AI 답 #223) - 표·코드·소제목·인용은 한 규칙. 답(.ans)은 말풍선 안이라 여백만 다르다 */
  :is(.doc-md, .msg.assistant) :is(h1, h2, h3, h4) { margin: 1.2em 0 .5em; line-height: 1.35; }
  .doc-md h1 { font-size: var(--fs-xl); } .doc-md h2 { font-size: var(--fs-lg); } .doc-md h3 { font-size: var(--fs-md); }
  .msg.assistant :is(h1, h2, h3, h4) { font-size: var(--fs-md); margin: 1em 0 .4em; }
  .msg.assistant > :first-child, .msg.assistant .ans > :first-child { margin-top: 0; }
  :is(.doc-md, .msg.assistant) table { border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; max-width: 100%; font-size: var(--fs-sm); }
  :is(.doc-md, .msg.assistant) :is(th, td) { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
  :is(.doc-md, .msg.assistant) :is(th, td)[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
  :is(.doc-md, .msg.assistant) :is(th, td)[align="center"] { text-align: center; }
  :is(.doc-md, .msg.assistant) th { background: var(--surface-2); }
  :is(.doc-md, .msg.assistant) code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); }
  :is(.doc-md, .msg.assistant) pre { background: var(--surface-2); padding: 12px; border-radius: var(--r-md); overflow-x: auto; line-height: 1.45; }
  :is(.doc-md, .msg.assistant) pre code { background: none; padding: 0; }
  :is(.doc-md, .msg.assistant) blockquote { margin: 10px 0; padding: 4px 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
  .msg.assistant:has(table, .nw-chart, .nw-mermaid, pre) { max-width: min(860px, 100%); }   /* 표·그림이 있는 답은 넓게 */
  /* 차트(#223, services/charts.py) - 색은 계열마다 토큰 */
  .nw-chart { margin: 12px 0; padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .nw-chart__title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; }
  .nw-chart__src { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-subtle); text-align: right; }
  /* 보완 필요(#303) - 한 건마다 주황색 상자 */
  .nw-todo { display: flex; gap: 10px; align-items: baseline; margin: 10px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
             border-left: 4px solid var(--warning); border-radius: var(--r-md); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); line-height: 1.6; }
  .nw-todo > b { flex-shrink: 0; color: var(--warning); font-size: var(--fs-sm); white-space: nowrap; }
  .nw-todo > span { color: var(--text); }
  .nw-chart svg { display: block; width: 100%; height: auto; max-height: 340px; }
  .nw-chart .nwc-grid { stroke: var(--border); stroke-width: 1; }
  .nw-chart text { font-size: 12px; fill: var(--text-muted); font-family: inherit; }
  .nw-chart .nwc-val { fill: var(--text); font-weight: 600; font-size: 11px; }
  .nw-chart .nwc-label { fill: var(--text); }
  .nw-chart :is(.nwc-s0) { fill: var(--t-c2); stroke: var(--t-c2); } .nw-chart :is(.nwc-s1) { fill: var(--t-c1); stroke: var(--t-c1); }
  .nw-chart :is(.nwc-s2) { fill: var(--t-c3); stroke: var(--t-c3); } .nw-chart :is(.nwc-s3) { fill: var(--t-c4); stroke: var(--t-c4); }
  .nw-chart :is(.nwc-s4) { fill: var(--t-c5); stroke: var(--t-c5); } .nw-chart :is(.nwc-s5) { fill: var(--t-c6); stroke: var(--t-c6); }
  .nw-chart :is(.nwc-s6) { fill: var(--t-c7); stroke: var(--t-c7); } .nw-chart :is(.nwc-s7) { fill: var(--t-c8); stroke: var(--t-c8); }
  .nw-chart .nwc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
  .nw-chart .nwc-ring { fill: none; }
  .nw-chart rect, .nw-chart path { stroke: none; }
  .nw-chart tspan.nwc-dot { stroke: none; }
  .nw-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
  .nw-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .nw-chart__legend i.nwc-s0 { background: var(--t-c2); } .nw-chart__legend i.nwc-s1 { background: var(--t-c1); }
  .nw-chart__legend i.nwc-s2 { background: var(--t-c3); } .nw-chart__legend i.nwc-s3 { background: var(--t-c4); }
  /* 도식(#223, ui.js NW.diagrams 가 Mermaid 로 그린다). 그리기 전·실패하면 원문 고정폭 */
  pre.nw-mermaid { white-space: pre; }
  pre.nw-mermaid[data-drawn] { background: var(--surface); border: 1px solid var(--border); text-align: center; white-space: normal; font-family: inherit; }
  pre.nw-mermaid svg { max-width: 100%; height: auto; }
  .ans-drawing { color: var(--text-muted); font-size: var(--fs-sm); }

  /* 개체 요약(wiki_entity) */
  .doc-entity .doc-type-tag { background: var(--surface-2); color: var(--text); }
  .entity-summary { margin: 0 24px 16px; font-size: var(--fs-md); line-height: 1.8; color: var(--text); }
  .rel-list { padding: 0 24px; display: flex; flex-direction: column; gap: 2px; }
  .rel-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
  .rel-row .pred { color: var(--text-muted); font-size: var(--fs-xs); }

  /* 프로젝트 종합(wiki_synthesis) */
  .doc-synthesis .doc-type-tag { background: color-mix(in srgb, var(--t-org) 12%, transparent); color: var(--t-org); }
  .synthesis-body { margin: 0 24px 10px; font-size: var(--fs-md); line-height: 1.8; }
  .synthesis-body h2 { font-size: var(--fs-lg); color: var(--t-org); margin: 16px 0 6px; }
  .synthesis-body p { margin: 0 0 10px; }
  .synthesis-body ul { padding-left: 20px; }

  .doc-frag-footer { padding: 16px 24px 4px; border-top: 1px solid var(--border); margin-top: 18px; }
  /* ⚠ .doc-item(근거 문서 목록, _entity_fragment.html·demo_proposal_detail.html 등
     여러 페이지가 열 수 있는 공용 모달 프래그먼트에서 씀)이 원래 demo_graph.html
     페이지 전용 <style> 안에만 있었음 — 그 페이지 CSS 가 안 실려있는 다른 화면(리스크
     패널, 챗봇 출처, 기획서 상세 등)에서 열리면 호버 배경·클릭 커서가 통째로 빠져서
     "클릭되는데 마우스 올려도 아무 반응 없음"이 됐음(실측 확인). 공용 프래그먼트가
     쓰는 스타일은 전부 여기(모든 페이지가 상속하는 베이스)에 있어야 함. */
  .doc-item { display: block; padding: 9px 10px; border-radius: var(--r-md); font-size: var(--fs-sm);
              margin-bottom: 4px; background: var(--surface-2); cursor: pointer; }
  .doc-item:hover { background: var(--border-strong); text-decoration: none; }
  .doc-item .doc-meta { color: var(--text-muted); font-size: var(--fs-xs); }
  /* ⚠ .section-label 도 .doc-item 과 같은 이유로 여기 있어야 함 — 원래 demo_graph.html·
     demo_orgchart.html 안에 `.side-panel .section-label`로 스코프된 채로만 있었는데,
     _entity_fragment.html의 "연결된 관계" 헤더는 공용 모달(.nw-modal-body) 안에서
     렌더되고 .side-panel 안에서는 절대 안 열려서 그 스코프 선택자가 아예 매치되지 않았음
     — 그 페이지 CSS 유무와 무관하게 항상 스타일이 빠진 상태였음. */
  .section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
                    color: var(--text-subtle); margin: 20px 0 8px; font-weight: 700; }

  /* ── 대화 화면(질의응답·AI 에이전트 공용, #166) - 두 쪽이 따로 적던 것을 합쳤다 ── */
  .chat-log { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; min-height: 200px; }
  .msg { max-width: 80%; padding: 12px 16px; border-radius: var(--r-lg); font-size: var(--fs-md); line-height: 1.7;
         scroll-margin-bottom: 84px; }            /* 답이 자라날 때 고정된 입력창 뒤로 마지막 줄이 가려지지 않게 */
  .msg.user { align-self: flex-end; background: var(--accent-soft); color: var(--text); font-weight: 500; }
  .msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
  .msg.assistant p { margin: 0 0 10px; }
  .msg.assistant p:last-child { margin-bottom: 0; }
  .msg.assistant ul, .msg.assistant ol { margin: 0 0 10px; padding-left: 20px; }
  .msg.assistant li { margin-bottom: 3px; }
  .msg.assistant strong { color: var(--text); }
  .chat-input-row { display: flex; gap: 8px; position: sticky; bottom: 20px; background: var(--surface); padding: 8px; margin: 0 -8px;
                    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
  .chat-input-row input { flex: 1; }
  /* 잠긴 입력창(#354) - 세션 상한에 닿았거나 보낼 수 없을 때 흐리게 */
  .chat-input-row input:disabled, .chat-input-row button:disabled { opacity: .45; cursor: not-allowed; }
  .chat-input-row input:disabled { background: var(--surface-2); }
  .empty-hint .eg { max-width: 100%; white-space: normal; text-align: left; }

/* ── 단순 틀(_base_admin: 로그인·가입·계정·관리자)에만 - body.plain ── */
.plain .wrap { padding-top: 40px; }
.plain header.top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.plain header.top h1 { font-size: var(--fs-xl); margin: 0; font-weight: 700; }
.plain header.top .sub { color: var(--text-muted); font-size: var(--fs-md); margin-top: 4px; }
.plain label { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin: 12px 0 4px; }
.plain table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.plain th, .plain td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.plain th { color: var(--text-muted); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; }
/* 관리자·단순 틀의 작은 도우미(#168) - 태그마다 style 로 적던 것 */
.plain .ui-card--pad h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.plain .num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; } .wrap-any { overflow-wrap: anywhere; } .w-full { width: 100%; }
.text-muted { color: var(--text-muted); } .xs { font-size: var(--fs-xs); } .text-danger { color: var(--danger); }
button.sm { min-height: var(--ctl-sm); padding: 0 10px; font-size: var(--fs-xs); }
.row--end { align-items: flex-end; flex-wrap: wrap; } .row--stretch { align-items: stretch; flex-wrap: wrap; }
.grow-300 { flex: 1; min-width: 300px; } .grow-2 { flex: 2; min-width: 200px; } .grow-160 { flex: 1; min-width: 160px; }
.pill { display: inline-block; padding: 2px 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; }
.pill.active { background: color-mix(in srgb, var(--t-tech) 12%, transparent); color: var(--success); }
.pill.pending { background: color-mix(in srgb, var(--t-org) 12%, transparent); color: var(--warning); }
.pill.expired { background: var(--surface-2); color: var(--text-muted); }
.pill.revoked { background: var(--danger-soft); color: var(--danger); }
.modal-backdrop { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 50; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-backdrop.open { display: flex; }
.modal-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 24px; max-width: 420px; width: 92%; }
.modal-panel.wide { max-width: 680px; }
.modal-panel .modal-scroll { max-height: 50vh; overflow-y: auto; }
.modal-panel h2 { font-size: var(--fs-lg); margin: 0 0 10px; }
.modal-panel .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* 구글 로그인 단추(#14) - Google Identity "Sign in with Google" 브랜딩 규칙(라이트·다크 두 벌 색은 tokens.css --gsi-*).
   색을 바꾸거나 로고를 단색으로 만들지 않는다(규칙 위반). 올리면 글자색 8% 덮개, 누르면 12%, 키보드 초점은 파란 테두리 */
.gsi-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px;
  background: var(--gsi-bg); color: var(--gsi-fg); border: 1px solid var(--gsi-border); border-radius: 20px;
  font: 500 14px/20px Roboto, "Noto Sans KR", system-ui, sans-serif; letter-spacing: .25px; text-decoration: none; cursor: pointer; overflow: hidden;
  transition: background-color .218s, border-color .218s, box-shadow .218s; }
.gsi-btn::before { content: ""; position: absolute; inset: 0; background: var(--gsi-fg); opacity: 0; transition: opacity .218s; }
.gsi-btn:hover::before { opacity: .08; }
.gsi-btn:hover { box-shadow: var(--sh-1); text-decoration: none; }
.gsi-btn:active::before { opacity: .12; }
.gsi-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); border-color: var(--accent); }
.gsi-btn svg { width: 20px; height: 20px; flex: none; position: relative; }
.gsi-btn span { position: relative; }

/* 폴더 범위 고르기(#184·#192) - 질의응답·AI 에이전트·제안서 공용, templates/_scope_picker.html */
.scope-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.scope-picker label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--text); }
.scope-picker select { width: auto; max-width: 100%; min-height: var(--ctl-sm); padding-top: 2px; padding-bottom: 2px; font-size: var(--fs-sm); }

/* 양식 고르기(#149·#208, templates/_template_picker.html) - 수동 제안서·슬라이드 만들기 공용 */
  .mp-tpls { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .mp-tpl { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; cursor: pointer; background: var(--surface); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
  .mp-tpl:hover { border-color: var(--border-strong); }
  .mp-tpl input { position: absolute; opacity: 0; }
  .mp-tpl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
  .mp-tpl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .mp-tpl .thumb { aspect-ratio: 16 / 9; background: var(--surface-2); display: grid; place-items: center; color: var(--text-subtle); }
  .mp-tpl .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mp-tpl .meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
  .mp-tpl .meta b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-tpl .meta small { font-size: var(--fs-xs); color: var(--text-subtle); }

/* 슬라이드 만드는 방식·미리보기(#211) - 제안서 화면 */
.slide-mode { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.slide-mode button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-muted); font-size: var(--fs-sm);
                     padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; }
.slide-mode button small { font-size: var(--fs-xs); color: var(--accent); }
.slide-mode button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-1); }
.slides-plan-wrap { margin-top: 14px; }
.slides-plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-subtle); }
.slides-plan h3 { margin: 0 0 10px; font-size: var(--fs-md); } .slides-plan h3 small { color: var(--text-subtle); font-weight: 400; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.plan-grid figure { margin: 0; } .plan-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--paper); display: block; }
.plan-grid figcaption { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 3px; }
.plan-map ol { margin: 0; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.9; }
.plan-map li b { margin-right: 6px; } .plan-map li em { font-style: normal; color: var(--text-subtle); font-size: var(--fs-xs); margin-left: 4px; }
.plan-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 10px 0 0; line-height: 1.6; }
.plan-note--warn { color: var(--warning); font-size: var(--fs-sm); }
@media (max-width: 899px) { .slides-plan { grid-template-columns: minmax(0, 1fr); } }
/* ── 질의응답·AI 도우미 대화 화면 공용(#216 - 두 쪽이 같은 규칙을 따로 갖고 있었다) ── */
  .sources { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
  .suggest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .suggest-chips .eg { display: inline-block; padding: 6px 12px; background: var(--surface-2);
                        border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-xs); cursor: pointer; }
  .suggest-chips .eg:hover { background: var(--border-strong); }
  .empty-hint { color: var(--text-muted); font-size: var(--fs-md); text-align: center; padding: 60px 20px; }
  .empty-hint .eg { display: inline-block; margin: 4px 6px; padding: 6px 12px; background: var(--surface-2);
                    border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer; }
  .empty-hint .eg:hover { background: var(--border-strong); }

/* ── 지식그래프·조직도 그래프 화면 공용(#216 - 두 쪽이 같은 규칙을 따로 갖고 있었다) ── */
  .graph-shell { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
  .legend-stats { position: absolute; bottom: 16px; left: 16px; z-index: 10;
                  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
                  padding: 10px 16px; backdrop-filter: blur(12px); font-size: var(--fs-xs); color: var(--text-muted); }
  .legend-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
  .side-panel.open { right: 0; }
  .side-panel .panel-btn-row { position: sticky; top: -24px; background: color-mix(in srgb, var(--surface) 94%, transparent); margin: -24px -22px 0; padding: 14px 18px; display: flex; justify-content: space-between; z-index: 5; }
  .side-panel .icon-btn { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-muted);
                           border-radius: var(--r-md); padding: 5px 12px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
  .side-panel .icon-btn:hover { color: var(--text); }
  .side-panel h2 { font-size: var(--fs-xl); margin: 20px 0 6px; }
  .node-label { fill: var(--text); font-size: 11px; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }

/* ── 근거 보기 판(#226, static/js/evidence.js · _evidence.html) ─────────────────────────────────────────
 * 화면 아래(기본)나 오른쪽에 붙는다. 열리면 쪽에 그만큼 여백을 줘 대화가 가려지지 않는다. 카드 색(--ev-c)은 출처 번호마다 */
  .ev-sources { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
  .ev-sources__head { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
  .ev-sources__head .ui-btn { margin-left: auto; }
  .ev-sources ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
  .ev-sources li a { display: flex; align-items: baseline; gap: 6px; color: var(--text); padding: 5px 8px; border-radius: var(--r-md);
    border-left: 3px solid var(--ev-c, var(--border)); background: color-mix(in srgb, var(--ev-c, var(--accent)) 6%, transparent); text-decoration: none; }
  .ev-sources li a:hover { background: color-mix(in srgb, var(--ev-c, var(--accent)) 14%, transparent); }
  .ev-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full);
    background: var(--ev-c, var(--accent)); color: var(--surface); font-size: 11px; font-weight: 800; flex-shrink: 0; }
  [data-ev-host] sup.cite a { color: var(--ev-c, var(--accent)); background: color-mix(in srgb, var(--ev-c, var(--accent)) 14%, transparent);
    border-radius: 4px; padding: 0 3px; }
  .ev-via { margin-left: auto; flex-shrink: 0; padding: 1px 7px; border-radius: var(--r-full); border: 1px solid var(--border-strong);
    color: var(--text-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
  .ev-links { margin-top: 10px; }
  .ev-links ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .ev-links li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); max-width: 100%; }
  .ev-links li a { display: inline; padding: 0; border-left: 0; background: none; color: var(--text); font-weight: 600; text-decoration: none; word-break: keep-all; overflow-wrap: break-word; }
  .ev-links li a:hover { background: none; color: var(--accent); text-decoration: underline; }
  .ev-links__p { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
  .ev-links__p::before { content: '→ '; }
  .ev-links__p::after { content: ' →'; }
  .ev-asked { display: inline-block; margin-left: 6px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

  .ev-dock { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: var(--ev-size, 44vh); display: flex; flex-direction: column;
    background: var(--bg); border-top: 1px solid var(--border-strong); box-shadow: var(--sh-3); }
  .ev-dock[hidden] { display: none; }
  .ev-dock--right { left: auto; top: var(--topbar-h, 56px); width: var(--ev-size, 44vw); height: auto; border-top: 0; border-left: 1px solid var(--border-strong);
    box-shadow: var(--sh-3); }
  .ev-dock.is-min { height: auto; }
  .ev-dock.is-min .ev-cards { display: none; }
  .ev-dock__grip { position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: row-resize; touch-action: none; }
  .ev-dock--right .ev-dock__grip { top: 0; bottom: 0; left: -4px; right: auto; width: 8px; height: auto; cursor: col-resize; }
  .ev-dock__grip:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
  .ev-dock__bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: var(--fs-sm); }
  .ev-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--r-full); background: var(--surface-2); font-size: 11px; font-weight: 700; }
  .ev-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .ev-seg button { all: unset; cursor: pointer; padding: 3px 10px; font-size: var(--fs-xs); color: var(--text-muted); }
  .ev-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  .ev-ask { flex: 1; display: flex; gap: 6px; min-width: 220px; }
  .ev-ask input { flex: 1; min-height: var(--ctl-sm); padding: 4px 10px; font-size: var(--fs-sm); }
  .ev-cards { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px 14px; overflow-x: auto; }
  .ev-card { flex: 1 0 340px; max-width: 640px; min-height: 0; display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--border); border-top: 3px solid var(--ev-c); border-radius: var(--r-lg); box-shadow: var(--sh-1, none);
    transition: box-shadow var(--dur-2), transform var(--dur-2); }
  .ev-card.is-active { box-shadow: 0 0 0 1px var(--ev-c), var(--sh-2); }
  .ev-card.ev-flash-card { transform: translateY(-3px); }
  .ev-card__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .ev-card__head .ev-num { background: var(--ev-c); }
  .ev-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .ev-card__title b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ev-card__title small { color: var(--text-muted); font-size: var(--fs-xs); }
  .ev-card__tools { display: flex; align-items: center; gap: 4px; }
  .ev-icon-btn { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-md); color: var(--text-muted); font-size: 13px; }
  .ev-icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .ev-icon-btn:disabled { opacity: .35; cursor: default; }
  .ev-icon-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
  .ev-crumbs { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-subtle); overflow-x: auto; white-space: nowrap; }
  .ev-crumbs[hidden] { display: none; }
  .ev-crumbs button { all: unset; cursor: pointer; color: var(--text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .ev-crumbs button[aria-current] { color: var(--text); font-weight: 700; }
  .ev-card__body { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 14px; font-size: var(--fs-sm); }
  .ev-card__body .doc-frag { border: 0; padding: 8px 0; background: none; }
  .ev-loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); padding: 16px 0; }
  .ev-empty { color: var(--text-muted); padding: 16px 0; }
  /* 웹 출처 미리보기(#303) */
  .ev-web h3 { margin: 0 0 4px; font-size: var(--fs-lg); line-height: 1.4; }
  .ev-web__meta { margin: 0 0 12px; color: var(--text-subtle); font-size: var(--fs-sm); }
  .ev-web__sum { margin: 0 0 12px; line-height: 1.7; }
  .ev-web__note { margin: 0 0 12px; color: var(--text-muted); font-size: var(--fs-sm); }
  mark.ev-mark { background: color-mix(in srgb, var(--ev-c, var(--ev-mark)) 25%, var(--ev-mark)); color: inherit; border-radius: 2px; padding: 1px 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev-c, var(--ev-mark)) 50%, transparent); }
  .ev-flash mark.ev-mark { animation: ev-pulse 1.4s ease-out; }
  /* 각주 문장에 맞는 줄은 진하게, 조각의 나머지는 옅게(#232) */
  .ev-has-key mark.ev-mark { background: color-mix(in srgb, var(--ev-mark) 35%, transparent); box-shadow: none; }
  .ev-has-key span.ev-key { background: var(--ev-mark); border-radius: 2px; font-weight: 600;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-c, var(--ev-mark)) 70%, transparent); }
  @keyframes ev-pulse { 0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-c, var(--ev-mark)) 55%, transparent); } 100% { box-shadow: 0 0 0 1px transparent; } }
  @media (prefers-reduced-motion: reduce) { .ev-flash mark.ev-mark { animation: none; } .ev-card { transition: none; } }
  .ev-page__nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; color: var(--text-muted); font-size: var(--fs-xs); }
  .ev-page__nav button { all: unset; cursor: pointer; padding: 0 8px; font-size: var(--fs-lg); }
  .ev-page img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  /* 겹쳐 보기 - 머리만 탭처럼 나란히, 고른 카드 본문만 */
  .ev-cards--stack { flex-wrap: wrap; align-content: flex-start; gap: 6px; }
  .ev-cards--stack .ev-card { flex: 0 1 auto; max-width: 260px; border-top-width: 3px; }
  .ev-cards--stack .ev-card .ev-crumbs, .ev-cards--stack .ev-card .ev-card__body { display: none; }
  .ev-cards--stack .ev-card.is-active { order: 99; flex: 1 0 100%; max-width: none; height: calc(100% - 52px); }
  .ev-cards--stack .ev-card.is-active .ev-card__body { display: block; }
  .ev-cards--stack .ev-card.is-active .ev-crumbs:not([hidden]) { display: flex; }
  /* 판이 열리면 쪽에 여백 - 대화·입력칸이 가려지지 않게 */
  body.ev-open:not(.ev-right) { padding-bottom: var(--ev-size, 44vh); }
  /* 오른쪽 판 - 본문 자리만 좁힌다(상단 막대는 그대로 넓게) */
  body.ev-open.ev-right [data-page-main], body.ev-open.ev-right .ui-footer { width: auto; margin-right: var(--ev-size, 44vw); max-width: none; padding-right: var(--sp-6); }
  .ev-dock--right .ev-cards:not(.ev-cards--stack) { flex-direction: column; overflow: hidden auto; }   /* 세로로 긴 판 - 카드를 위아래로 */
  .ev-dock--right .ev-cards:not(.ev-cards--stack) .ev-card { flex: 1 0 46%; max-width: none; }
  body.ev-open:not(.ev-right) .chat-input-row { bottom: calc(var(--ev-size, 44vh) + 12px); }
  @media (max-width: 760px) {
    .ev-dock--right { width: 100%; left: 0; top: auto; height: 60vh; border-left: 0; border-top: 1px solid var(--border-strong); }
    body.ev-open.ev-right { padding-bottom: 60vh; }
    body.ev-open.ev-right [data-page-main], body.ev-open.ev-right .ui-footer { margin-right: 0; }
    .ev-card { flex-basis: 86vw; }
    .ev-ask { order: 9; flex-basis: 100%; }
  }
  /* 답을 업무로(#250) */
  .answer-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .answer-actions .ui-btn { color: var(--text-muted); }
}
/* AI 로 새로 디자인 - 틀 고르기(#260) */
.ai-style { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ai-style label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
                  background: var(--surface); font-size: var(--fs-sm); cursor: pointer; }
.ai-style label:has(input:checked) { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ai-style small { font-size: var(--fs-xs); color: var(--accent); }
.ai-art { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: var(--fs-sm); cursor: pointer; }
.ai-art small { color: var(--text-subtle); font-size: var(--fs-xs); }

/* 보관한 공간(#338·#354) - 읽기 전용이라 실행 버튼을 누를 수 없는 상태로 보인다(서버도 변경 요청을 막는다).
   결제 화면(data-billing-page)은 보관 중에도 해지·변경할 수 있어 그대로 둔다 */
body:has([data-archived-banner]):not(:has([data-billing-page])) [data-page-main] :is(.ui-btn--primary, button[type=submit], .chat-input-row, [data-drop]) {
  opacity: .45; pointer-events: none; cursor: not-allowed; }