/* 견적 첨삭 (D-131) — 작성 화면의 첨삭 버튼·결과 카드, 세무사 회신함의 정리 카드.
   app.css의 토큰(--surface/--border/--primary…) 위에 얹는 보조 스타일만 둔다. */

/* ── 작성 화면 ─────────────────────────────────────────── */
.annotate-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.annotate-result { margin-top: 12px; }

.annotate-loading {
  padding: 16px; text-align: center; font-size: 14px; color: var(--text-tertiary);
  border: 1px dashed var(--border); border-radius: var(--r-md);
}

/* 안내 한 줄 — 실패·짧은 입력·호출 제한. 결과 카드와 구분되게 얇게 둔다. */
.annotate-note {
  padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.6;
  background: var(--surface-alt); color: var(--text-secondary);
}
.annotate-note-warn {
  background: #FFF4F5; color: #B3261E; border: 1px solid #F5C2C7;
}
.annotate-note ul { margin: 6px 0 0; padding-left: 18px; }

.annotate-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: 16px; margin-top: 10px;
}
/* 폼 모드임을 밝히는 배지 — 세무사·사용자가 출처를 알 수 있어야 한다(검토서 D-7). */
.annotate-mode {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-tertiary);
  background: var(--surface-alt); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.annotate-summary { font-size: 16px; font-weight: 700; line-height: 1.45; }
.annotate-situation {
  margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary);
}

.annotate-sec { margin-top: 16px; }
.annotate-h {
  font-size: 13px; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: -.1px; margin-bottom: 6px;
}
.annotate-sec ul { margin: 0; padding-left: 18px; }
.annotate-sec li { font-size: 14px; line-height: 1.7; }

/* 질문 목록 — 항목마다 [질문에 넣기] 버튼이 붙는다. */
.annotate-qs { list-style: none; padding-left: 0 !important; }
.annotate-qs li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.annotate-qs li:last-child { border-bottom: 0; }
.annotate-qs li > span { flex: 1; min-width: 180px; }
.annotate-tag {
  font-size: 11px; font-style: normal; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 999px; padding: 2px 7px;
}
.annotate-use {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: none; border: 1px solid var(--primary); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.annotate-use:disabled { color: var(--text-tertiary); border-color: var(--border); cursor: default; }

/* 고정 고지 — 자문이 아님을 결과마다 밝힌다(FR-7). 흐리게 두되 지우지 않는다. */
.annotate-disclaimer {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--text-tertiary);
}

/* ── 세무사 회신함 (W7) ────────────────────────────────── */
/* 원문이 기준 문서이고 정리는 그 위에 얹힌 보조다(검토서 D-2 권고) — 그래서 정리 카드는
   원문보다 약한 배경으로 두고, 제목에 '정리'임을 밝힌다. */
.brief-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); padding: 14px 16px; margin-top: 12px;
}
.brief-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 8px;
}
.brief-badge {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  background: var(--primary-light); color: var(--primary);
}
.brief-badge-book { background: #E7F8F1; color: #059862; }
.brief-badge-form { background: var(--surface); color: var(--text-tertiary); border: 1px solid var(--border); }
.brief-summary { font-size: 15px; font-weight: 700; line-height: 1.45; }
.brief-situation { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.brief-sec { margin-top: 12px; }
.brief-sec ul { margin: 4px 0 0; padding-left: 18px; }
.brief-sec li { font-size: 13.5px; line-height: 1.65; }
.brief-disclaimer {
  margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--text-tertiary);
}

@media (max-width: 768px) {
  .annotate-qs li > span { min-width: 100%; }
}

/* ── [본문에 넣기] · 폼 모드 안내 (조사 반영) ─────────────── */
/* 부족한 정보 채우기는 이 기능에서 실효가 가장 큰 자리다 — 읽고 끝나는 목록이 아니라
   눌러서 본문이 채워지는 동작이라, 배경을 줘서 다른 목록과 구분한다. */
.annotate-sec-fill {
  background: var(--primary-light); border-radius: var(--r-md);
  padding: 12px 14px; margin-top: 16px;
}
.annotate-sec-fill .annotate-h { color: var(--primary); }
ul.annotate-fills { list-style: none; padding-left: 0 !important; margin: 0; }
ul.annotate-fills li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0;
}
ul.annotate-fills li > span { flex: 1; min-width: 160px; font-size: 14px; line-height: 1.55; }
.annotate-fill-all {
  margin-top: 8px; width: 100%; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--primary); border: 0; border-radius: var(--r-sm);
  padding: 9px 12px; cursor: pointer;
}
.annotate-fill-all:disabled { background: var(--border); color: var(--text-tertiary); cursor: default; }

/* 폼 모드에서 요약이 비는 이유 — 말해 주지 않으면 "정리를 안 해줬다"로 읽힌다. */
.annotate-formnote {
  margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-secondary);
}

/* 세무사 카드의 접히는 구역(조사 ③) — 기한·서류는 길어서 기본은 닫아 둔다. */
.brief-fold > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--text-tertiary); display: flex; align-items: center; gap: 5px;
}
.brief-fold > summary::-webkit-details-marker { display: none; }
.brief-fold > summary::before { content: '▸'; font-size: 10px; }
.brief-fold[open] > summary::before { content: '▾'; }

/* ══ 2단계 미리보기 (D-184 §3.1.1) ══════════════════════════════
   좌 = AI 가이드(읽기 전용) · 우 = 원문 편집기(쓰기). 시선이 왼쪽을 읽고 오른쪽에 쓰도록
   두 칸을 나란히 둔다. 좁은 화면에서는 **가이드가 위, 편집기가 아래**로 쌓인다 —
   순서를 뒤집으면 "무엇을 더 적어야 하는지"를 못 보고 쓰게 된다. */
/* ⚠ 이 조각은 `hidden` 속성으로 여닫는다 — 여기에 display를 주면 UA의 `[hidden]{display:none}`을
   이겨서 **감춘 줄 알았던 패널이 계속 보인다**(profile.css의 .fold-btn에서 이미 겪은 함정).
   그래서 display는 주지 않고, 혹시 다른 규칙이 끼어들어도 지도록 [hidden]을 못박는다. */
.ip[hidden] { display: none; }
.ip-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.ip-title { font-size: 18px; font-weight: 700; line-height: 1.4; }
.ip-lead {
  margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary);
}
.ip-back {
  background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary);
}

.ip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* ── 좌: 가이드 ── */
.ip-guide {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); padding: 14px 16px;
  max-height: 62vh; overflow-y: auto;
}
/* .ip-loading의 실제 규칙은 파일 아래 '정리 중 표시' 블록에 있다(D-186 애니메이션).
   여기 있던 정적 스타일은 지웠다 — 같은 선택자를 두 곳에 두면 나중 것이 이겨 헷갈린다. */
.ip-note-box {
  padding: 12px 14px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border); font-size: 14px; line-height: 1.65; color: var(--text-secondary);
}
.ip-warn {
  padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 12px;
  background: #FFF4F5; color: #B3261E; border: 1px solid #F5C2C7;
  font-size: 13.5px; line-height: 1.6;
}
.ip-warn ul { margin: 6px 0 0; padding-left: 18px; }
.ip-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-tertiary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.ip-summary { font-size: 15px; font-weight: 700; line-height: 1.5; }

.ip-sec { margin-top: 14px; }
.ip-h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary);
}
.ip-h > i { font-style: normal; color: var(--primary); }
.ip-sec ul, .ip-sec ol { margin: 0; padding-left: 18px; }
.ip-sec ul { list-style: disc; }                 /* 전역 리셋과 무관하게 불렛을 보이게(D-206) */
.ip-sec li { font-size: 13.5px; line-height: 1.7; margin: 3px 0; }
/* "- " 접두 세부 항목 — 하위 불렛(◦)로 한 단 들여 계층을 보인다(D-206).
   ⚠ list-style은 전역 리셋·마커 상속에 눌려 실기기에서 안 보였다(D-208 라이브 실측) —
   ::before로 마커를 직접 그린다(결정적). */
.ip-sub { list-style: none; position: relative; margin-left: 16px; color: var(--text-secondary); }
.ip-sub::before { content: '◦'; position: absolute; left: -14px; }
.ip-time > li > b { font-weight: 700; color: var(--text-primary); }
.ip-qs > li { padding: 2px 0; }
.ip-tag {
  margin-left: 6px; font-size: 11px; font-style: normal; font-weight: 700;
  color: var(--primary); background: var(--primary-light); border-radius: 999px; padding: 2px 7px;
}

/* ⚠ 추가 정보 가이드(.ip-gaps·.ip-gap-l)와 [본문에 넣기] 버튼(.ip-fill·.ip-fill-all) 규칙은
   여기 있었지만 지웠다 — 가이드는 **오른쪽 편집기 안의 입력칸**(.ip-fillbox, 아래)으로 옮겼고
   버튼은 D-186에서 제거됐다. 안 쓰는 선택자를 남겨 두면 다음 사람이 살아 있는 줄 안다. */

.ip-fold { margin-top: 12px; }
.ip-fold > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--text-tertiary); display: flex; align-items: center; gap: 5px;
}
.ip-fold > summary::-webkit-details-marker { display: none; }
.ip-fold > summary::before { content: '▸'; font-size: 10px; }
.ip-fold[open] > summary::before { content: '▾'; }
.ip-fold ul { margin: 6px 0 0; padding-left: 18px; }
.ip-fold li { font-size: 13px; line-height: 1.65; color: var(--text-secondary); }

.ip-disclaimer {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--text-tertiary);
}

/* ── 우: 편집기 ── */
.ip-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.ip-editor {
  width: 100%; height: auto; min-height: 240px; padding: 12px; margin-top: 8px;
  font-size: 14px; line-height: 1.7; resize: vertical;
}

/* ── 우: 추가 정보 칸 (사용자 지시 — 파란 가이드 글씨 + 그 자리 입력) ──────────────
   왼쪽 목록으로 두던 gaps를 편집기 바로 아래로 옮겼다. 눈이 왼쪽을 읽고 오른쪽으로 건너와
   옮겨 적는 동선이 실제로는 대부분 그냥 넘어가서다. 본문(textarea) 바로 밑에 붙여 **글의
   연장**처럼 보이게 하고, 배경으로 "여기는 내가 쓴 원문이 아니라 안내"임을 구분한다.
   ⚠ 파란색은 거들 뿐이다 — 각 줄이 진짜 <label>이라 색을 못 봐도 무엇을 적는 칸인지 안다
     (WCAG 1.4.1 색에만 의존 금지). */
.ip-fillbox {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--primary-light);
  /* --primary(#3182F6)를 옅게 깐 테두리. 토큰에 저채도 파랑이 없어 알파로 만든다. */
  border: 1px solid rgba(49, 130, 246, .25);
}
/* [hidden]을 못박는다 — .ip 패널에서 겪은 함정(display를 주면 UA 규칙을 이겨 계속 보인다). */
.ip-fillbox[hidden] { display: none; }
.ip-fill-h { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.ip-fill-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.ip-fill-l {
  flex: 0 1 auto; max-width: 45%; font-size: 13.5px; font-weight: 700; line-height: 1.5;
  color: var(--primary); word-break: keep-all;
}
/* 칸처럼 보이는 상자가 아니라 **밑줄**만 둔다 — 파란 안내 글 옆에 이어 쓰는 느낌이라야
   "내 글에 덧붙인다"로 읽힌다. */
.ip-fill-i {
  flex: 1 1 120px; min-width: 0; background: var(--surface);
  border: 0; border-bottom: 1px solid rgba(49, 130, 246, .45); border-radius: 0;
  padding: 6px 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
}
.ip-fill-i::placeholder { color: var(--text-tertiary); }
.ip-fill-i:focus { outline: none; border-bottom-color: var(--primary); }
.ip-fill-x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 12px; line-height: 1; color: var(--text-tertiary);
}
.ip-fill-x:hover { color: var(--text-secondary); }
.ip-fill-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ip-fill-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

.ip-count { margin-top: 4px; text-align: right; font-size: 12px; color: var(--text-tertiary); }

/* 보낼 내용 미리보기 — 글자 수 줄 자체가 여닫이 손잡이다(요소를 새로 늘리지 않는다).
   ⚠ 본문은 <pre>다: 조립된 글은 줄바꿈이 의미를 지니고(원문 뒤에 가이드 줄이 한 줄씩 붙는다)
     세무사가 보는 모양 그대로여야 확인이 된다. 대신 pre-wrap으로 가로 스크롤은 막는다.
   ⚠ 회색 바탕(--surface-alt) 위에 --text-tertiary를 쓰지 마라(대비 4.2:1, app.css 경고). */
.ip-final { margin-top: 4px; }
.ip-final > summary { cursor: pointer; list-style: none; }
.ip-final > summary::-webkit-details-marker { display: none; }
.ip-final > summary::after { content: ' ▸'; }
.ip-final[open] > summary::after { content: ' ▾'; }
.ip-final > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ip-final-body {
  margin: 6px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-secondary);
  font-family: inherit; font-size: 13px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.ip-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ip-actions .btn { width: 100%; }
.ip-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin-top: 10px;
}
.ip-redo {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: underline;
}
.ip-redo:disabled { color: var(--text-tertiary); cursor: default; }
.ip-note { font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }

/* ── 예약 모달 안의 인테이크 (D-184 §3.3) ──
   모달을 갈아엎지 않는다 — 기존 단계(상품→날짜→시간) 뒤에 '상담 내용' 칸이 붙고, 미리보기가
   열릴 때만 본문·결제줄을 감춘 자리에 두 칸이 들어선다. */
.bw-memo {
  width: 100%; height: auto; min-height: 84px; padding: 10px 12px;
  font-size: 14px; line-height: 1.6; resize: vertical;
}
/* 미리보기가 열린 동안만 넓힌다(JS가 붙였다 뗀다) — 480px에 두 칸을 넣으면 편집기가 못 쓴다.
   .bk-modal 단일 클래스보다 특정도가 높아 파일 순서와 무관하게 이긴다. */
.bk-modal.ip-wide { width: min(920px, calc(100vw - 32px)); }
.bk-modal .ip { padding: 8px 22px 20px; }
.bk-modal .ip-guide { max-height: min(48vh, 420px); }
.bk-modal .ip-editor { min-height: 180px; }

/* 모달로 띄우는 진입점(견적·빠른 상담) — 예약은 기존 bk-modal 안에서 단계로 바뀐다.
   ⚠ **가운데 정렬을 명시해야 한다.** <dialog>는 UA 기본 스타일의 `margin:auto`로 저절로
     가운데 오는데, app.css의 전역 리셋(`*{margin:0}`)이 그걸 덮어써서 **좌측 상단에 붙는다**
     (사용자 지적, D-186). inset:0 + margin:auto로 두 축을 명시적으로 가운데 놓는다. */
.ip-modal {
  position: fixed; inset: 0; margin: auto;
  width: min(920px, 94vw); max-height: 90vh; overflow: auto; border: 0;
  border-radius: var(--r-lg, 16px); padding: 20px; background: var(--surface); color: var(--text-primary);
}
.ip-modal::backdrop { background: rgba(0, 0, 0, .45); }

/* ── 정리 중 표시 (D-186, 사용자 지시) ──────────────────────────────────
   정적인 "쓰신 내용을 읽고 있어요…" 한 줄만 두면 **멈춘 것처럼 보여** 이탈한다.
   실제로 도는 중임을 두 가지로 보인다: ① 점 세 개가 차례로 뛴다 ② 결과가 들어올 자리에
   스켈레톤 줄이 흐른다(무엇이 채워질지 미리 보여 주는 효과도 있다).
   ⚠ prefers-reduced-motion에서는 애니메이션을 끄고 정적으로 둔다(WCAG 2.3.3). */
.ip-loading { padding: 6px 0 10px; }
.ip-loading-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-secondary);
}
.ip-dots { display: inline-flex; gap: 3px; }
.ip-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
  animation: ip-bounce 1.2s infinite ease-in-out both;
}
.ip-dots i:nth-child(2) { animation-delay: .16s; }
.ip-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ip-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.ip-skel { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
/* ⚠ 색은 **토큰이 아니라 반투명 검정**으로 잡는다. 처음에 var(--surface-alt)로 만들었더니
   가이드 칸 배경이 같은 토큰이라 스켈레톤이 배경에 묻혀 아무것도 안 보였다(실측).
   반투명이면 어떤 배경 위에서도 대비가 생긴다. */
.ip-skel span {
  display: block; height: 11px; border-radius: 5px;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, .07) 25%, rgba(15, 23, 42, .15) 37%, rgba(15, 23, 42, .07) 63%);
  background-size: 400% 100%;
  animation: ip-shimmer 1.4s ease-in-out infinite;
}
.ip-skel span:nth-child(3n)   { width: 62%; }
.ip-skel span:nth-child(3n+2) { width: 84%; }
@keyframes ip-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-dots i, .ip-skel span { animation: none; }
  .ip-dots i { opacity: .6; }
}

@media (max-width: 860px) {
  .ip-cols { grid-template-columns: 1fr; }
  .ip-guide { max-height: none; }
  .ip-editor { min-height: 180px; }
}
/* 좁은 화면에서는 라벨을 윗줄로 올린다 — 한 줄에 밀어 넣으면 '사업자등록일' 같은 긴 라벨이
   입력칸을 두세 글자로 눌러 버린다. */
@media (max-width: 520px) {
  .ip-fill-row { flex-wrap: wrap; }
  .ip-fill-l { flex: 1 1 100%; max-width: none; }
}

/* ── 인테이크 카드 (T3) ────────────────────────────────── */
/* 4단 카드(D-184 §5) — templates/fragments/intake-card.html 한 조각이 세 곳(견적 회신함·예약
   상세·채팅방)에서 쓰인다. 위쪽 .brief-* 는 견적 전용 옛 카드라 건드리지 않고, 여기에만 얹는다.
   원문이 기준이고 정리는 보조라(D-136) 카드는 본문보다 약한 배경으로 한 단 물러나 있는다. */
.intake-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); padding: 14px 16px; margin-top: 12px;
}
.intake-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 8px;
}

/* 정리 후 본문이 보완된 경우(§3.1.2) — 감추지 않고 눈에 띄게 알린다. 경고가 아니라 안내라
   오류색(빨강) 대신 주의색(호박)을 쓴다. */
/* .intake-stale(노란 «정리 후 보완» 상자)는 D-540에서 마크업과 함께 걷었다 — 규칙도 지운다.
   ⚠ quote-inbox.css의 `.qd-ai .intake-stale` 선택자는 이제 아무것도 안 맞는다(무해). */


.intake-summary { font-size: 15px; font-weight: 700; line-height: 1.45; }
.intake-situation { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }

.intake-sec { margin-top: 12px; }
.intake-h {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: -.1px; margin-bottom: 6px;
}
/* ①②③④ — 네 칸이 늘 같은 순서로 보여야 훑는 눈이 자리를 외운다. */
.intake-num { color: var(--primary); font-size: 13px; font-weight: 800; }
.intake-sec ul, .intake-sec ol { margin: 4px 0 0; padding-left: 18px; }
.intake-sec ul { list-style: disc; }             /* 전역 리셋과 무관하게 불렛을 보이게(D-206) */
.intake-sec li { font-size: 13.5px; line-height: 1.65; margin: 3px 0; }
/* "- " 접두 세부 항목 — 하위 불렛(◦)로 한 단 들여 계층을 보인다(D-206 · 마커는 D-208 방식). */
.intake-sub { list-style: none; position: relative; margin-left: 16px; color: var(--text-secondary); }
.intake-sub::before { content: '◦'; position: absolute; left: -14px; }

/* 시간흐름 — 시점 표현은 원문 그대로라 길이가 제각각이다. 칩으로 묶어 사건과 구분한다. */
.intake-timeline .intake-when {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap;
}

/* 의뢰인이 실제로 쓴 질문 — AI 제안과 무게가 다르다. */
.intake-qtag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* 안 적힌 정보 — 견적·상담 판단에 가장 먼저 필요한 칸이라(D-136 조사 ④) 배경을 줘서
   다른 목록과 구분한다. */
.intake-sec-gap {
  background: var(--primary-light); border-radius: var(--r-md); padding: 10px 12px;
}
.intake-sec-gap .intake-h { color: var(--primary); }
.intake-gaps { list-style: none; padding-left: 0 !important; }
.intake-gaps > li { padding: 3px 0; }
.intake-gaps > li::before { content: '· '; color: var(--primary); font-weight: 700; }
.intake-hint { display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* 기한·서류·원문 접기 — .brief-fold와 같은 모양이되 카드가 독립적으로 살도록 따로 둔다. */
.intake-fold > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--text-tertiary); display: flex; align-items: center; gap: 5px;
}
.intake-fold > summary::-webkit-details-marker { display: none; }
.intake-fold > summary::before { content: '▸'; font-size: 10px; }
.intake-fold[open] > summary::before { content: '▾'; }
/* 원문은 의뢰인이 쓴 그대로다 — 줄바꿈을 살리고 긴 단어도 카드를 밀지 않게 자른다. */
.intake-rawtext {
  margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.intake-disclaimer { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }

/* 구조화된 4단이 없을 때(구버전 메시지·텍스트만 온 경우)의 본문 — 줄바꿈을 살린다. */
.intake-plain {
  margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 채팅방 카드 — 말풍선 자리에 들어가므로 폭만 다르고 나머지는 같다(단일 소스 유지). */
.msg-row .intake-card { margin-top: 0; max-width: 560px; width: 100%; background: var(--surface); }
.msg-row.intake-msg { display: block; }

/* ── 추천 제목 칩 (D-207 → D-302) — 최종 검토(4단계) 제목 입력칸 바로 아래 ──
   ⚠ 자리가 «정리 화면 편집기 위»에서 «제목 칸 아래»로 옮겨졌다. 칩이 꽂힐 칸과 같은
     화면에 있어야 눌렀을 때 무엇이 변했는지 보인다. */
.ip-title-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.ip-title-sugg-label { font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.ip-title-chip {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--primary);
}
.ip-title-chip:hover { background: var(--surface-alt); }

/* 견적요청서 제목 — 세무사 카드 위 (D-207) */
.intake-req-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; margin: 12px 0 2px; }

/* 편집 안내 (D-208)
   ⚠ `.ip-title-wrap`·`.ip-title-field`는 걷었다(D-302) — 정리 화면에 제목 칸을 하나 더
     만들던 규칙인데, 제목 칸 자체가 4단계로 옮겨져 «같은 것을 고치는 두 번째 칸»이 됐다. */
.ip-edit-guide {
  margin: 10px 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.ip-edit-guide-h { font-size: 12.5px; font-weight: 800; color: var(--text-tertiary); margin-bottom: 4px; }
.ip-edit-guide ul { margin: 0; padding-left: 16px; }
.ip-edit-guide li { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 2px 0; }

/* ── 출처 배지 · 의뢰인이 고른 내용 표 (견적 인테이크 설계명세 v4 §9) ──────────
   세무사 화면에는 성격이 다른 넷이 함께 뜬다. 섞여 보이면 **AI가 추측한 금액**과
   **의뢰인이 적은 금액**을 같은 무게로 읽게 되고, 견적은 대개 그 한 줄에서 갈린다.
     ✓ 고름·입력 .src-pick  의뢰인이 칸에 답한 값(fragments/intake-answers)
     ✎ 직접 씀   .src-own   의뢰인이 쓴 원문(pro-quotes.html)
     (✧ AI 판독 .src-ai 는 D-541에서 걷었다 — 출처는 제목 「의뢰 내용 (AI 정리)」가 말한다)
     ▤ 템플릿    위 .brief-badge-form('규칙 기본 안내')이 그대로 맡는다 — 세 곳에 이미
                 배선돼 있어 클래스를 갈면 채팅 카드와 갈린다.

   🔴 **파랑(var(--primary))을 쓰지 않는다**(§9). 토스 블루와 보라(AI)는 적록색약에서
      ΔE 4.0까지 좁혀져 두 출처가 같은 색으로 보인다 — 배지가 있는데 구분이 안 되는 것이
      배지가 없는 것보다 나쁘다(있다고 믿고 안 읽는다).
   · 색만으로 알리지 않는다 — 배지마다 글자(고름·입력 / 직접 씀)가 함께 있다.
   · 대비는 넷 다 본문 기준 4.5:1 이상이다(§7 접근성). */
.src-badge {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  border-radius: 999px; padding: 2px 8px;
}
.src-pick { background: #E3F5EE; color: #0E7A5F; }   /* 4.72:1 */
.src-own  { background: #ECEFF3; color: #46525F; }   /* 6.73:1 */
/* .src-ai(보라, ✧ AI 판독)는 D-541에서 호출부와 함께 걷었다 — 규칙도 지운다. */

/* 원문 위 배지 한 줄 — 카드 밖이라 여백만 준다. */
.iq-src-line { margin-top: 10px; }

/* 의뢰인이 고른 내용 표 — AI 카드(.intake-card, 회색 배경)와 **다른 껍데기**여야 한다.
   같은 배경을 쓰면 배지를 달아도 한 덩어리로 읽힌다. 아주 옅은 초록 바탕 + 왼쪽 띠로 가른다
   (흰 카드 위에 흰 상자를 얹으면 테두리 1px만 남아 블록으로 안 읽힌다).
   ⚠ 배경은 배지 색과 같은 계열이되 훨씬 옅다 — 값 글자와 4.5:1을 지켜야 한다(§7). */
.iq-answers {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-left: 3px solid #0E7A5F;
  border-radius: var(--r-md); background: #F7FCFA;
}
.iq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.iq-head-t { font-size: 13px; font-weight: 700; color: var(--text-tertiary); }
.iq-what { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.iq-what-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.iq-what-s { font-size: 12.5px; color: var(--text-tertiary); }

/* 라벨/값 두 칸. 세무사는 이 표를 **훑는다** — 값이 라벨보다 굵어야 눈이 값 열을 탄다. */
.iq-rows {
  display: grid; grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 6px 12px; margin: 10px 0 0;
}
.iq-rows dt { font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
.iq-rows dd {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--text-primary); word-break: break-word;
}
/* 안 적은 칸 — 지우지 않고 "—"로 남긴다(§9). 값처럼 굵으면 적힌 것으로 오독한다. */
.iq-blank { color: var(--text-tertiary); font-weight: 400; }
.iq-none, .iq-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary); }

/* 좁은 화면에서는 두 칸이 서로를 밀어낸다 — 라벨을 값 위로 올린다. */
@media (max-width: 420px) {
  .iq-rows { grid-template-columns: 1fr; gap: 2px; }
  .iq-rows dd { margin-bottom: 6px; }
}

/* ══ 상담노트 전문 상자 (D-530 — qna.css에서 이사) ═══════════════════════════════
   fragments/brief-card.html이 쓴다. Q&A 답변 화면과 **예약 상세** 둘 다 부르므로 한쪽
   화면 전용 시트(qna.css)에 두면 다른 쪽에서 맨 텍스트로 뜬다.
   ⚠ 클래스명은 옮기면서 바꾸지 않았다 — 바꾸면 이사인지 재작성인지 알 수 없어진다.
   ⚠ `.qna-` 접두가 남아 있는 것은 의도다. qna.css를 뒤지는 사람이 이름으로 여기를 찾는다. */
/* 상세 — 세무사에게만 보이는 상담노트 전체 카드 */
.qna-brief-full { border: 1px dashed var(--primary); border-radius: 13px; padding: 15px 17px;
  margin-top: 14px; background: var(--surface); }
.qna-brief-full .bf-cap { font-size: 11.5px; font-weight: 800; color: var(--primary-pressed); }
.qna-brief-full .bf-t { font-size: 14.5px; font-weight: 800; margin-top: 4px; }
.qna-brief-full .bf-body { font-size: 13px; color: var(--text-secondary); line-height: 1.7;
  margin-top: 8px; white-space: pre-line; }

/* 상담노트 캡션 아이콘 — 이모지(📎) 대신 선 아이콘(사용자 지시: 이모지 전면 제외). */
.bf-cap { display: flex; align-items: center; gap: 6px; }
.bf-ic { display: inline-flex; color: currentColor; }