/* 세무 Q&A — 목록·상세·작성·수정 전용 (v1.0 개편: L-01~06 · D-01~04 · W-01~04).
   제목·질문·UI는 본문 서체(typography.css --font-sans, D-890), 답변 본문만 세리프 — 서체는 tokens.css의 --serif-read 하나를
   본다(D-735, Q-316. 세무시선 본문과 같은 토큰이다). 색은 §8 토큰을 리터럴로 쓴다
   (채택 남색 #14243D 등은 공용 tokens.css에 없다 — 이 지면 고유색이라 여기 둔다).
   🔴 글자 크기·행간·굵기·자간은 **토큰만** 쓴다(타이포그래피 C3 묶음 2, D-891 타입 스케일 — QnaTypeScaleContractTest):
      var(--fs-*)·var(--lh-*)·var(--fw-*)·var(--ls-*). 숫자 px·소수점·700 이상·고정 음수 자간을 다시 적지 마라.
      예외 셋뿐 — «Q.» 모노그램(.qna-qm·.qna-qm-lg, Georgia·D-370·D-373) · 세리프 원문·답변 본문(--serif-read, D-735)
      · 자문 서신 머리표의 넓은 자간 .16em(.qna-ans-mark·.qna-ans-fee-l·.qna-paid-eyebrow, D-522·D-527). 줄마다 typo-lint: ignore로 표시. */

/* ══════════════════════════════════════════════════════════════ 목록(qna-board) */
.qna-board-sec { max-width: var(--page-max); margin-inline: auto; }
.qna-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qna-head-actions { display: flex; align-items: center; gap: var(--s-sm); }
/* 360 제목 줄바꿈 방지(D-963) — 제목은 한 줄, 480 아래에선 컨트롤 줄(쪽·검색·질문하기)이 제목 아래로 내려간다. */
.qna-board-head h2 { white-space: nowrap; word-break: keep-all; }
@media (max-width: 479px) {
  .qna-board-head { flex-wrap: wrap; row-gap: 10px; }
  .qna-board-head h2 { flex: 0 0 100%; }
  .qna-head-actions { flex: 1 1 100%; justify-content: space-between; }
  .qna-head-actions .qna-pgr { margin-right: auto; }
}

/* ── 돋보기 접이 검색 (D-369) — <details> 팝오버. 전폭 검색 줄(78px)을 0px로.
   ⚠ summary의 기본 ▸ 마커는 두 벌 다 꺼야 한다(표준 list-style + WebKit 전용). */
.qna-fold { position: relative; }
.qna-fold-btn {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); cursor: pointer; list-style: none;
}
.qna-fold-btn::-webkit-details-marker { display: none; }
.qna-fold[open] > .qna-fold-btn { border-color: var(--primary); color: var(--primary); }
.qna-fold-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: min(420px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(17, 31, 40, .12); padding: 10px;
}

/* 검색 폼 — 접이 팬 안에서 인풋+버튼 한 줄.
   🔴 칸 모양(흰 바탕 · 1px #D1D6DB · 10px · 포커스 링)은 전역 `.input`이 준다(D-880 P-076 3-(가) «검색 칸도 흰 칸»,
      3차 정리 X1). 옛 회색 채움(surface-alt)·투명 테두리를 되살리지 마라 — 채운 바탕은 어디서나 «잠김» 신호다.
      여기는 크기만(높이·줄 안 폭) 정한다. */
.qna-search { display: flex; gap: var(--s-sm); }
.qna-search-input { flex: 1; min-width: 0; height: 44px; }
.qna-search-btn {
  height: 44px; padding: 0 var(--s-lg); border-radius: 10px; background: var(--primary); color: var(--text-on-fill);
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); border: none; cursor: pointer; flex: none;
}
.qna-search-btn:hover { background: var(--primary-pressed); }

/* 툴바 — 분야 레일(또는 모바일 드롭다운)과 정렬 select가 한 줄(D-369).
   정렬 세그 3칸(.qna-seg, 54px 한 줄)은 이 select로 격하되며 규칙째 지웠다 —
   «조각과 CSS는 항상 함께 고친다»(D-358 각주). */
/* 레일 줄은 레일의 것이다(D-583) — 페이징은 머리 줄(검색 옆)로 이사했다:
   레일 페이드·[›] 더보기와 화살표가 한 줄에 몰려 겹쳐 보였다(사용자 지적). */
.qna-toolbar { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.qna-toolbar .qna-rail-wrap { flex: 1; min-width: 0; margin-bottom: 0; }
.qna-pgr { flex: none; display: flex; align-items: center; gap: var(--s-xs); }
.qna-pgr-n {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); font-variant-numeric: tabular-nums;
  margin-right: var(--s-xs); white-space: nowrap;   /* «1 / 3»의 사이는 일반 공백이다 — &nbsp;(U+00A0)는 라운드에 없어 Pretendard를 더 받았다 */
}
.qna-pgr-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface);
  line-height: 1; color: var(--text-secondary);   /* 안쪽은 선 아이콘(line-icons :: prev/next) — 글자 크기 없음 */
}
.qna-pgr-btn:hover { border-color: var(--grey300); }
.qna-pgr-btn.off { color: var(--grey300); background: var(--grey50); pointer-events: none; }

/* 분야 레일 — 한 줄 overflow-x + 우측 페이드 + [분야 더 보기] 버튼(안쪽은 선 아이콘 — fragments/line-icons :: next). */
.qna-rail-wrap { position: relative; margin-bottom: 6px; }
.qna-rail {
  display: flex; gap: 7px; overflow-x: auto; scroll-behavior: smooth;
  padding: 2px 48px 2px 0; scrollbar-width: none;
}
.qna-rail::-webkit-scrollbar { display: none; }
.qna-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-md); flex: none;
  border-radius: var(--r-full); background: var(--surface-alt); border: 1px solid transparent;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); color: var(--text-secondary);   /* flex:none이라 줄바꿈이 없다 — nowrap은 걷었다(§3-4) */
}
.qna-chip.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary-pressed); font-weight: var(--fw-semibold); }
/* 우측 페이드(44px) — 레일이 더 있음을 알린다. 끝까지 스크롤하면 JS가 data-rail-end로 끈다. */
.qna-rail-wrap::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%); transition: opacity .15s ease;
}
.qna-rail-wrap[data-rail-end]::after { opacity: 0; }
.qna-rail-next {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); line-height: 1; cursor: pointer;   /* 안쪽은 선 아이콘 — 글자 크기 없음 */
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
/* 🔴 감추는 요소엔 못을 박는다 — author display:flex가 UA [hidden]{display:none}을 이기므로. */
.qna-rail-next[hidden] { display: none; }

/* 분야 드롭다운(모바일) — 기본은 숨김, 좁은 화면에서만 켠다.
   칸 모양은 전역 `.input`(select에 붙임 — 3차 정리 X1). 여기는 크기만 — 바탕·테두리를 다시 칠하지 마라. */
.qna-cat-select { display: none; gap: var(--s-sm); margin-bottom: 6px; }
.qna-cat-select select { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-md); }

/* 검색 피드백 — 검색 중일 때만 뜬다(D-369). */
.qna-count { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s-sm) 0 var(--s-md); font-size: var(--fs-body2); line-height: var(--lh-body2); }
/* 검색어가 공백 없이 길면(주소·긴 문장) flex 항목의 최소 폭이 그 낱말 폭이 되어 화면 밖으로 민다 — 줄여서 끊는다(K17). */
.qna-count > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.qna-count-clear { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }

/* 빈 상태는 app.css `.empty` 부품이 맡는다(P-079 1-(나), 3차 정리 X4) — 옛 .qna-empty를 걷었다. */

/* ══ Q 컴팩트 행 (D-370, 2차 시안 03) — 2열 카드 그리드는 이 목록으로 대체됐다.
   .qna-card*·.qna-pill* 규칙은 마크업과 함께 지웠다(«조각과 CSS는 항상 함께», D-358 각주). */
.qna-qcl { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
/* 행 여백은 사다리 실측으로 고른 값이다(D-554) — 14는 답답하고 19는 행 수를 깎는다. */
.qna-qc { display: flex; align-items: center; gap: 14px; padding: 17px var(--s-lg); min-width: 0; }
/* 360 이하 폰은 행 사이 간격을 12로(사용자 결정 2026-10-09 11차 V3 ⓐ «작은 다듬기» ⑥) — 360에서 긴 분야(«과세예고통지·세무조사·조세불복»)가
   첫 줄을 혼자 써도 글 칸(184.2px — 희망 세무사 얼굴 세 장일 때)이 글자 폭(185.1px)보다 1px 모자라 끝 한 글자가 «…»였다(D-909 «다음 묶음 후보»).
   간격 둘(Q 글자 ↔ 글 · 글 ↔ 얼굴)에서 2px씩 = 글 칸 +4px. 분야 칸 하한(min(5em, 글자 폭) — 4차 A1-1)과 뒤 조각 규칙(5차 N1)은 그대로다.
   320·344는 이 간격으로도 글 칸이 13~37px 모자라 지금처럼 끝이 «…»다(A1-1이 받아들인 말줄임 — 320 «과세예고통지·세무…»). */
@media (max-width: 360px) {
  .qna-qc { gap: var(--s-md); }
}
.qna-qc + .qna-qc { border-top: 1px solid var(--grey100); }
.qna-qc:hover { background: var(--grey50); }

/* Q. 모노그램 — 세리프는 이 글자 하나뿐이다(지면 개성). 본문 서체에 섞지 마라.
   ⚠ 타이포그래피 C3 묶음 2 예외: Georgia·22px은 그대로(D-370 «그대로»). 굵기만 토큰 600 — Georgia는 Regular·Bold 두 벌이라
     600도 800도 같은 Bold 얼굴로 그려진다(CSS 서체 매칭: 500 초과는 위쪽부터) — 보이는 것은 같고 «700+ 굵기» 집계만 0이 된다.
   🔴 **읽음 표시는 :visited가 한다**(D-370, 사용자 지시: 읽은 글은 Q 색이 바뀐다) —
      JS·저장소 없이 브라우저 방문 기록이 원장이다. 안 읽음 파랑 → 읽음 grey400.
   ⚠ :visited에는 색 계열 속성만 허용된다(브라우저 프라이버시 제약) — 크기·굵기·투명도로
     구분하려 하지 마라, 조용히 무시된다. getComputedStyle도 이 색을 일부러 속인다 —
     검증은 픽셀(스크린샷)로만 된다. */
.qna-qm {
  flex: none; font-size: 22px; font-weight: var(--fw-semibold); line-height: 1; color: var(--primary);   /* typo-lint: ignore — «Q.» 크기 D-370 그대로 */
  font-family: Georgia, "Times New Roman", serif;   /* typo-lint: ignore — «Q.» 세리프 모노그램(D-370·D-373) */
}
.qna-qc:visited .qna-qm { color: var(--grey400); }
/* 읽음 흐림 확장(D-554, 사용자 확정 A안) — 볼드가 사라진 뒤 Q 색만으로는 약해서
   제목·부제·분야·상태까지 함께 바랜다. 🔴 :visited는 색 계열만 허용하므로 전부 color다 —
   굵기·투명도를 얹으려 하지 마라(조용히 무시된다). 읽은 행의 굵기가 그대로인 것은 정상이다.
   상태 라벨(.qna-st-in 안)만 바래고 우측 「희망 N명」은 남긴다 — 사실 정보는 산다. */
.qna-qc:visited .qna-qc-title { color: var(--grey500); }
.qna-qc:visited .qna-qc-sub { color: var(--grey400); }
.qna-qc:visited .qna-qc-cat { color: var(--tint-blue-line); }
.qna-qc:visited .qna-st-in .qna-hope { color: var(--grey400); }
/* :visited가 침묵하는 환경(임베디드 브라우저·기록 삭제)의 이중 덮개 — qna.js가 단다.
   🔴 위 :visited 묶음과 **같은 색**이어야 한다 — 한쪽만 고치면 환경에 따라 반쪽이 된다. */
.qna-qc.is-read .qna-qm { color: var(--grey400); }
.qna-qc.is-read .qna-qc-title { color: var(--grey500); }
.qna-qc.is-read .qna-qc-sub { color: var(--grey400); }
.qna-qc.is-read .qna-qc-cat { color: var(--tint-blue-line); }
.qna-qc.is-read .qna-st-in .qna-hope { color: var(--grey400); }

.qna-qc-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.qna-qc-title {
  /* 굵기 위계(D-555→557, 사용자 확정) — 제목 500 > 분야 500(색이 가른다) > 보조 400.
     D-551의 «전부 400»은 400이 번져 보인다는 지적으로 이 두 자리만 완화됐다.
     600도 반려됐다(D-557에서 500으로 한 단 더) — 되올리지 마라. */
  font-size: var(--fs-heading); font-weight: var(--fw-medium); color: var(--text-primary); line-height: var(--lh-heading);   /* 500 = 사용자 결정 D-557(400/600 규칙의 예외 하나) */
  /* 🔴 두 줄까지(타이포그래피 C3 묶음 2) — 한 줄 말줄임은 라운드 서체에서 «법인 전환을 하면 4대보험은…»이 잘렸다(D-890 검토).
     글자를 줄이지 않고 줄 수로 푼다. 세 줄째부터만 말줄임. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all;
}
.qna-qc-sub {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--grey500); margin-top: var(--s-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 🔴 분야 칸(.qna-qc-cat)이 «있는» 부제 줄만 플렉스다(2026-10-07 1차 리뷰 UX-1) — 긴 분야 이름(«과세예고통지·세무조사·조세불복»)이
     닉네임·날짜(세무사 판은 상태 낱말까지)를 줄 밖으로 밀어냈다. 남는 자리가 모자라면 먼저 줄어드는 것은 분야 칸이다.
     이 마크업(b.qna-qc-cat + span)은 목록 두 곳(/qna · /mypage/questions)이다.
   · /mypage/questions는 «답변 N건» 조각(span.qna-qc-ans)이 날짜 조각과 따로라(사용자 결정 2026-10-08 N1) 분야 칸이 없는 줄도 플렉스다 —
     블록 한 줄이면 «2026.10.02 · 답변 12건»이 320 «비공개» 칩 줄에서 «답변 1…»로 잘린다. 조각이 모두 요소라 말줄임은 조각마다 닿는다.
   ⚠ 글자만 든 부제(/qna/my «내 Q&A 활동» — qna-my.html이 «{분야} · M.d» 한 덩어리를 th:text로 싣는다)는 위 블록 규칙 그대로다
     (한 줄 · 끝 말줄임). 그 줄까지 플렉스로 두면 글자가 익명 플렉스 항목이 되어 text-overflow가 닿지 않고 «…» 없이 잘렸다
     (2026-10-07 3차 리뷰 R3-01 — 320 «과세예고통지·세무조사·조»). 분야 칸이 없는 /qna 줄(분야 빈 글)도 블록 그대로다. */
.qna-qc-sub:has(> .qna-qc-cat), .qna-qc-sub:has(> .qna-qc-ans) { display: flex; flex-wrap: wrap; min-width: 0; }
/* 분야 칸 최소 폭 = 약 다섯 글자(사용자 결정 2026-10-08 A1-1) — 폰 320·360에서 분야가 «과.»·«과..»까지 줄었다. 이제 «과세예고…»까지는 읽힌다.
     · 하한은 min(5em, 자기 글자 폭)이다 — 짧은 이름(«법인세»·«양도소득세»)은 제 폭 그대로라 뒤에 빈칸이 생기지 않는다. 그래서 하한을 min-width 숫자가
       아니라 «자동 최소 폭»으로 건다: width(5em)는 플렉스 기준 폭(0)에 안 쓰이고 자동 최소 폭의 «지정 크기 제안»으로만 쓰여, 하한 = min(5em, 글자 폭).
       자동 최소 폭은 스크롤 상자(overflow: hidden)에서는 0이 되므로 overflow: clip을 쓴다(말줄임은 그대로 — clip을 모르는 옛 브라우저는
       앞의 hidden으로 내려가 하한 없이 옛 모양).
     · 5em(13px에서 65px) — «과세예고…»가 61.1px(셈톡 산스 500 · 자간 0.025em, dev 실측 2026-10-08)이라 다섯 글자 자리가 선다(4.7em이면 1px 안쪽이라 뺐다).
     · 하한 위로는 남는 자리만큼(자기 글자 폭까지) 자란다. 뒤 조각은 줄지 않고 다음 줄로 가므로(아래), [분야 하한 + 뒤 조각]이 한 줄에 안 들면
       분야 칸이 첫 줄을 혼자 쓰며 제 글자 폭까지 자라고(320 144px · 360 184px) 닉네임·날짜는 둘째 줄에 다 보인다.
       ⚠ 360은 줄 폭 184.2px이 «과세예고통지·세무조사·조세불복» 글자 폭 185.1px보다 1px 모자라 끝 한 글자가 «…»로 접혔다(dev 실측 2026-10-08) —
         분야 칸 규칙은 그대로 두고 360 이하 행 간격(위 .qna-qc 12px)으로 줄 폭을 188.2px로 넓혀 풀었다(11차 V3 ⓐ ⑥). 분야 칸 안 줄바꿈은 하지 않는다. */
.qna-qc-sub > .qna-qc-cat {
  flex: 1 1 0; width: 5em; max-width: max-content; min-width: auto;
  overflow: hidden; overflow: clip; text-overflow: ellipsis;
}
/* 뒤 조각(« · 닉네임 · 날짜» · « · 상태» · « · 날짜 · 답변 N건»)은 잘리지 않고 다음 줄로 간다(사용자 결정 2026-10-08 N1 «날짜·«답변 N건»이
   잘리지 않게 줄 바꾸기»). 기준 폭이 제 글자 폭(flex-basis auto)이라 줄 가르기가 이 조각을 통째로 드는 줄에만 세운다 —
   [분야 하한 + 조각 글자 폭]이 한 줄에 안 들면 조각이 다음 줄로 가고(flex-wrap), 분야 칸 옆에서 줄어들지 않는다.
   상태 조각(« · 마감» — 세무사 판)도 같다. 그래서 폰에서는 줄 수가 는다 — 짧은 분야 줄도 희망 세무사 얼굴·상태 낱말이 있으면 두세 줄이다
   (dev 실측 2026-10-08: 세무사 판 320은 10줄 모두 2~3줄 · 360은 1줄 3 · 2줄 6 · 3줄 1 · 390은 1줄 6 · 2줄 4, 긴 분야(세무조사 필터)는 320 3줄 ·
   360·390 2줄 / 의뢰인 판 320은 10줄 중 6줄이 2줄 · 360은 2줄이 2줄 · 390은 모두 한 줄). 줄 수가 느는 것은 정상이다. 분야를 0까지 줄여
   한 줄을 지키던 옛 모양(3차)은 분야가 «법…»·«…»로 사라져 A1-1이 걷었다 — 줄 수를 줄이려고 분야 하한이나 뒤 조각 폭을 깎지 마라.
   white-space: pre — 플렉스 칸 맨 앞의 « · » 앞 공백이 접히지 않게(조각 글자는 줄바꿈 없는 한 줄이다 — qna-board.html .qna-st-in 주석).
   /mypage/questions는 날짜와 «답변 N건»이 조각 둘이라(N1) 320 «비공개» 칩 줄에서도 «답변 N건»이 통째로 다음 줄로 간다. 말줄임은
   조각 하나가 혼자서도 한 줄보다 넓을 때의 안전판이다(2026-10-07 3차 리뷰 UX-A3-2 — 이제 실측 폭 320~390에서는 걸리지 않는다).
   ⚠ 이 조각에 기준 폭(예: flex: 99 1 5em)이나 width·max-width를 주지 마라 — 기준 폭이 글자 폭보다 작으면 줄 가르기가 그 폭으로 자리를 잡아,
     짧은 분야 줄에서도 날짜가 «2…»·«20…»까지, «내 질문»의 «답변 N건»이 잘렸다(4차 A1-1 구현 — 세무사 판 320 9줄·360 7줄, 사용자 결정 2026-10-08 N1로 걷음). */
.qna-qc-sub:has(> .qna-qc-cat) > span, .qna-qc-sub:has(> .qna-qc-ans) > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.qna-qc-right { display: flex; align-items: center; gap: var(--s-sm); flex: none; }
.qna-qc-faces { display: flex; align-items: center; }
.qna-hope { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); font-weight: var(--fw-regular); color: var(--primary-pressed); white-space: nowrap; }
.qna-hope-gray { color: var(--grey500); font-weight: var(--fw-regular); }

/* 페이지네이션 — 36px 정사각, 현재 페이지 솔리드. */
.qna-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--s-2xl); flex-wrap: wrap; }
.qna-page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--s-sm);
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); color: var(--text-secondary);
}
.qna-page:hover { border-color: var(--grey300); }
.qna-page.on { background: var(--primary); border-color: var(--primary); color: var(--text-on-fill); }
/* 이전·다음 쪽 — 안쪽은 선 아이콘(fragments/line-icons, 3차 정리 통합 — 옛 글자 ‹ ›). 36px 칸·누름 영역은 .qna-page 그대로. */
.qna-page-arrow { padding: 0; }
.qna-page-off { color: var(--grey300); background: var(--grey50); }

/* ══════════════════════════════════════════════════════════════ 상세(qna-post) */
.qna-post-sec { max-width: var(--page-max); margin-inline: auto; }

/* 질문 카드 — 여백을 넉넉히(D-377, 사용자 지시 «가독성이 더 중요»). 본문은 500자 상한이라
   길어야 한 화면 남짓 — 스크롤 걱정보다 숨 쉴 공간이 값지다.
   🔴 **세로 여백은 가로의 1.5배다**(32 : 48 = 2 : 3, D-506 사용자 지시). 30/28은 카드가
      «상자»로 읽히던 값이고, 48은 «지면»으로 읽히는 값이다 — 본문 16.5px/30px에 걸맞은 틀.
      ⚠ 위아래를 같은 48로 두는 것이 핵심이다: 아래 끝의 마지막 잉크는 메타 한 줄(12px 회색)이라
        시각적으로 물러나므로, 여기서 아래를 줄이면 «부족하다»가 그대로 되돌아온다.
      ⚠ 본문과 메타 사이(.qna-question-meta의 margin-top)는 이 틀과 **짝이다**. 틀만 키우고
        그 사이를 20px로 두면 메타가 본문에 붙어 카드 아래가 아래로 쏠려 보인다. */
.qna-question {
  border-radius: 14px; padding: 48px var(--s-3xl);
  /* 🔴 윗변 띠는 **테두리**다(D-507 C5) — 덧대는 요소가 아니라 테두리라서 둥근 모서리에서
     저절로 잘린다(overflow:hidden도, 별도 span도 필요 없다).
     ⚠ 색은 **파랑 하나**다(D-509) — 분야마다 다른 색을 넣지 마라.
     ⚠ 위 여백(48px)은 이미 3px을 흡수할 만큼 넉넉하다 — 패딩을 줄이며 이 줄만 남기지 마라. */
  border-top: 3px solid var(--primary);
}
.qna-question-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-md); }
/* (은퇴) .qna-owner-actions — [수정][삭제] 두 버튼을 나란히 두던 자리. D-501에서 점 세 개
   메뉴(.qna-own)가 대체했다. 되살리려거든 «자주 쓰는 것과 되돌릴 수 없는 것이 같은 무게로
   카드 머리를 차지한다»는 지적부터 반박해야 한다. */

/* ══ 작성자 메뉴 — 점 세 개 (D-501, 사용자 확정 O2) ═══════════════════════════
   🔴 <details>라 스크립트 없이 열린다. 바깥 클릭으로 닫는 것만 JS가 얹는다(점진 보강). */
.qna-own { position: relative; flex: none; }
.qna-own > summary { list-style: none; cursor: pointer; }
.qna-own > summary::-webkit-details-marker { display: none; }
/* 🔴 **테두리 상자를 걷었다**(D-507, 사용자 지시 «무조건 개선»). 예전엔 34px 테두리 상자라
   카테고리 칩과 **같은 무게**로 카드 머리를 차지하고 제목보다 먼저 눈에 들었다 — 작성자
   본인만 쓰는 기능인데 모두에게 가장 먼저 보이던 셈이다. 점만 남기고 배경은 hover·open에만.
   ⚠ 보이는 크기는 줄었지만 **누를 수 있는 넓이는 34px 그대로**다. 여기서 width/height를
     더 줄이지 마라 — 손가락으로 못 누른다. */
.qna-own-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.qna-own-btn:hover { background: var(--grey100); }
.qna-own > summary:focus-visible .qna-own-btn,
.qna-own > summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 10px;
}
.qna-own-btn i { width: 3px; height: 3px; border-radius: 50%; background: var(--grey500); }
.qna-own[open] .qna-own-btn { background: var(--grey100); border-color: var(--grey300); }

.qna-own-pop {
  position: absolute; right: 0; top: 40px; z-index: 20;
  width: 168px; padding: var(--s-xs);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-float);
}
.qna-own-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: var(--s-sm) var(--s-md); border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); color: var(--grey800);
  text-align: left;
}
.qna-own-item:hover { background: var(--grey50); }
.qna-own-item.is-danger { color: var(--tint-red-ink); }
.qna-own-item.is-danger:hover { background: var(--tint-red-bg); }
.qna-own-pop form { margin: 0; border-top: 1px solid var(--divider); }
/* 삭제를 막는 사정 한 줄(D-884) — [삭제하기] 자리. 누르는 것이 아니라 읽는 글이라 버튼 모양·빨강을 쓰지 않는다. */
.qna-own-note {
  margin: 0; padding: var(--s-sm) var(--s-md); border-top: 1px solid var(--divider);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--grey600); word-break: keep-all;
}
/* 지울 수 없는 질문자에게 다른 길(D-888, Q-418 P4) — 사실 한 줄(.qna-own-note) 바로 아래에 붙는 한 묶음이라 사이 선을 다시 긋지 않는다. */
.qna-own-alt { padding: 0 0 2px; }
/* 🔴 줄 길이 고르기(Q-418 2차 C3) — 1280 작성자 메뉴(168px)에서 «대신 비공개로 돌릴 수 / 있어요.»처럼 «있어요.»만 혼자 남던 것을
   어절 줄바꿈(keep-all) 위에 balance로 두 줄 길이를 맞춘다(«대신 비공개로 / 돌릴 수 있어요.»). 지원하지 않는 브라우저는 지금 모양 그대로다. */
.qna-own-alt-t {
  margin: 0; padding: 0 var(--s-md) var(--s-xs);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--grey600); word-break: keep-all; text-wrap: balance;
}
.qna-own-pop .qna-own-alt form { border-top: 0; }
/* 🔴 줄 길이 고르기(Q-418 3차 S3) — 마이 «내 질문» 머리 부제(mypage-questions.html)가 390에서 «… 다시 열 / 수 있어요.»처럼 «수 있어요.»만
   혼자 남던 것을 어절 줄바꿈(keep-all) 위에 balance로 줄 길이를 맞춘다. 그 부제 하나에만 건다 — 전역 .pg-sub(app.css)는 그대로다.
   지원하지 않는 브라우저는 어절 줄바꿈만 된다. */
.qna-myq-sub { word-break: keep-all; text-wrap: balance; }
.qna-own-ic { display: inline-flex; flex: none; }
/* «비공개» 표식(Q-418) — 분야 칩(파랑)과 같은 모양, 색만 회색: 상태를 알리는 낱말이지 분류가 아니다. */
.qna-private-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold);
  color: var(--grey700); background: var(--grey100);
}
/* 볼 수 없는 사람의 안내 화면(qna-private.html, Q-418) — 세무시선 안내(.sisun-gone)와 같은 모양. */
.qna-gone-sec { max-width: var(--reading-max); margin-inline: auto; }
.qna-gone { text-align: center; padding: 48px var(--s-2xl); display: flex; flex-direction: column; align-items: center; gap: var(--s-md); }
.qna-gone-mark { color: var(--text-tertiary); }
.qna-gone-title { margin: var(--s-xs) 0 var(--s-sm); font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); word-break: keep-all; }
/* 비로그인에게만 서는 로그인 안내 한 줄(Q-418 2차 C2) — 제목 아래, [로그인] 위. */
.qna-gone-sub { margin: -4px 0 var(--s-xs); font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); word-break: keep-all; }
.btn-xs { height: 34px; padding: 0 var(--s-md); font-size: var(--fs-label2); line-height: var(--lh-label2); }
/* ⚠ 삭제 실행 버튼 셋만 #DC2626을 지킨다(P-070 (가) 결정 — CrossShapeI1Test가 셋으로 못박음). 나머지 오류 빨강은 --error. */
.qna-danger { color: #DC2626; }
.qna-danger:hover { border-color: #DC2626; }
.qna-question-title { margin: var(--s-lg) 0 18px; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); color: var(--text-primary); word-break: keep-all; }
/* 세리프 Q. — 목록 행(.qna-qm)과 같은 얼굴, 제목 크기에 맞춰 한 치수 크게(D-373).
   제목이 title1 토큰(24 · ≥768 28)이 되어 «한 치수 크게»도 토큰에서 따라온다(+2px). 굵기는 .qna-qm과 같은 사정(600 = Georgia Bold). */
.qna-qm-lg {
  font-family: Georgia, "Times New Roman", serif; font-weight: var(--fw-semibold); font-size: calc(var(--fs-title1) + 2px);   /* typo-lint: ignore — «Q.» 세리프 모노그램(D-373) */
  color: var(--primary); margin-right: 10px;
}
.qna-question-body {
  /* D-495 — 오른쪽을 좁혀 생긴 폭을 **가독성으로 돌려준다**(사용자 지시).
     16.5px/30px는 15.5px/28px보다 한 단계 크고, 줄 간격 비율은 1.82로 넉넉하다.
     ⚠ max-width 66ch를 **지워서는 안 된다** — 넓어진 칼럼에서 줄이 길어지면 눈이 다음 줄
       머리를 못 찾는다. 폭이 늘어난 만큼 글자를 키우는 것이지, 줄을 늘리는 게 아니다. */
  font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-secondary); white-space: pre-line;
  max-width: 66ch;
  word-break: keep-all;   /* 낱말 중간에서 끊기지 않게 — 한글 본문의 기본 */
}
/* 🔴 우측 정렬(D-507, 사용자 지시). 좌측이면 본문 마지막 줄과 같은 기둥에 서서 문장이
   한 줄 더 이어지는 것처럼 읽힌다. 「수정됨」 각주는 같은 줄에 이어 붙는다. */
.qna-question-meta {
  margin-top: 26px; color: var(--text-tertiary);
  display: flex; justify-content: flex-end; align-items: baseline; gap: 5px;
  flex-wrap: wrap;
}
/* 좁은 화면에선 48px 틀이 과하다 — 카드 폭이 화면 전체라 여백만 한 화면을 먹는다.
   비율(2:3)은 그대로 두고 눈금만 내린다: 20 : 30. */
@media (max-width: 560px) {
  .qna-question { padding: 30px var(--s-xl); }
  .qna-question-meta { margin-top: var(--s-xl); }
}

/* 답변 헤더 + 채택 게이지(2칸). */
.qna-answers-head { display: flex; align-items: center; justify-content: space-between; margin: var(--s-2xl) 0 var(--s-md); }

/* 답변 본문(명조) — «읽는 글» 세리프는 tokens.css의 --serif-read 하나에서 온다(D-735, Q-316).
   세무시선 본문도 같은 토큰을 본다. 폴백('Apple SD Gothic Neo', serif)은 토큰 안에 있으니
   여기에 서체 이름을 다시 적지 마라(§10의 «로드 실패해도 안 깨진다»는 토큰이 지킨다).
   🔴 글자색은 --text-primary #191F28(D-879, P-042 — 옛 #1F2937은 회색 눈금 밖). 세무시선 본문
      (sisun.css .sisun-body)과 같은 값이다 — 두 «읽는 글» 지면을 한쪽만 바꾸지 마라. */
.qna-answer-body {
  font-family: var(--serif-read);
  font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-primary); white-space: pre-line;   /* 세리프도 크기·행간은 body1 토큰(16/28) — 서체만 예외(D-735) */
}

/* 세무사 명함. */
.qna-tax-card {
  display: flex; align-items: center; gap: var(--s-md); margin-top: 18px; padding-top: var(--s-lg);
  border-top: 1px solid var(--grey100); flex-wrap: wrap;
}
.qna-tax-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover;
  display: flex; align-items: center; justify-content: center; }
.qna-tax-avatar-empty { background: var(--primary-light); color: var(--primary); font-weight: var(--fw-semibold); }
.qna-tax-id { min-width: 0; flex: 1; }
.qna-tax-actions { display: flex; gap: var(--s-sm); margin-left: auto; }

/* 채택/나머지 구분선. */
.qna-divider { display: flex; align-items: center; gap: var(--s-md); margin: var(--s-xl) 0 var(--s-md); color: var(--text-tertiary); font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); }
.qna-divider::before, .qna-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* 미채택 답변 카드. */
.qna-others { display: flex; flex-direction: column; gap: var(--s-md); }
.qna-answer { display: flex; flex-direction: column; gap: 10px; }

/* 답변 작성 폼(세무사). */
.qna-write-answer { margin-top: var(--s-lg); }
.qna-answer-textarea { min-height: 160px; padding: var(--s-md); font-size: var(--fs-body1); line-height: var(--lh-body1); resize: vertical; }
.qna-answer-submit { display: flex; justify-content: flex-end; margin-top: var(--s-md); }

.qna-disclaimer { margin-top: var(--s-lg); color: var(--text-tertiary); }

/* ── 채택/삭제/비공개 확인 대화 ──
   🔴 `margin: auto`를 다시 못박는다(Q-418 2차 C1, 실측) — app.css 리셋(`* { margin:0 }`)이 UA의 `dialog:modal { margin:auto }`를
      지워 확인 대화가 화면 왼쪽 위에 붙어 떴다. sisun.css·profile.css·mine.css와 같은 처방. */
.qna-modal {
  margin: auto;
  width: min(380px, calc(100vw - 32px)); padding: 0; border: none; border-radius: var(--r-lg);
  box-shadow: var(--shadow-float); background: var(--surface); color: var(--text-primary);
}
.qna-modal::backdrop { background: rgba(17,31,40,.45); }
.qna-modal-inner { display: flex; flex-direction: column; gap: var(--s-md); padding: 22px; }
.qna-modal-title { font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); }
.qna-modal-text { font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); margin: 0; }
.qna-modal-actions { display: flex; justify-content: flex-end; gap: var(--s-sm); margin-top: 2px; }
.qna-danger-btn { background: #DC2626; color: var(--text-on-fill); }
.qna-danger-btn:hover { filter: brightness(.92); }

/* ══════════════════════════════════════════════════════════════ 상세 3분할 (D-367) */
/* 🔴 왼쪽 «글»(2/3) · 오른쪽 «사람»(1/3). 성격이 다른 둘을 한 줄로 쌓아 두면 답변을 보려고
      세무사 카드 여러 장을 지나쳐야 한다.
   ⚠ DOM은 «글 먼저»다 — 좁은 화면에서 질문이 위에 오고, 크롤러도 질문을 먼저 읽는다.
     오른쪽 배치는 순전히 CSS가 한다. */
.qna-split {
  display: grid;
  /* D-495(사용자 지시) — 오른쪽을 **좁혔다**: 2fr/1fr·최소 300px → 글 쪽이 더 넓어지도록
     고정 폭 상한(clamp)으로 바꿨다. 오른쪽은 세무사 이름·사진·[상담신청]뿐이라 300px 넘게
     받을 이유가 없고, 남는 폭은 전부 읽는 쪽으로 간다.
     ⚠ 하한 236px은 «이름 한 줄 + 버튼»이 안 접히는 값이다(그 아래로 내리면 카드가 두 줄이 된다). */
  grid-template-columns: minmax(0, 1fr) clamp(236px, 22%, 272px);
  gap: var(--s-3xl);
  align-items: start;
}
.qna-main { min-width: 0; }

/* 오른쪽 — **페이지 흐름 그대로**(D-377, 사용자 지시). D-367의 sticky+내부 스크롤 상자를
   걷었다: 목록은 아래로 쭉 나열되고 페이지 스크롤로 본다. [다른 세무사 보기]도 함께 은퇴 —
   오른쪽에는 사람 목록 하나만 산다. */
.qna-side {
  display: flex; flex-direction: column; gap: var(--s-md);
  min-width: 0;
}
/* 제목 밴드 높이 = 왼쪽 상태칩 밴드(D-379) — 칩(label2 행간 20 + 2×5 = 30px)+아래 여백(10px) = 40px에서
   .qna-side의 gap 12px를 뺀 28px(C3 묶음 2에서 토큰 행간으로 다시 셈). 이렇게 맞춰야 질문 카드 상단과 목록 상자 상단이
   한 줄에 선다(사용자 지적: 시작 높이 불일치). 칩 크기를 바꾸면 여기도 함께. */
.qna-side-head { flex: none; display: flex; align-items: center; min-height: 28px; }
/* ⚠ 칼럼이 좁아졌다(D-495) — 제목·빈 안내가 낱말 중간에서 끊기면(«없어/요») 읽다 걸린다. */
.qna-side-head h2 { margin: 0; word-break: keep-all; }   /* 행간은 .t-title3 토큰(26px)이 준다 */
.qna-side-scroll {
  display: flex; flex-direction: column; gap: 10px;
}

/* 오른쪽 세무사 — 카드 여러 장 대신 **상자 하나 + 구분선 행**(D-373, 목록과 같은 문법).
   테두리가 행마다 반복되지 않아 좁은 칼럼이 조용해진다. */
.qna-side-list {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden;
}
.qna-side .qna-wish {
  padding: var(--s-md);
  display: flex; align-items: center; gap: 10px;
}
.qna-side .qna-wish + .qna-wish { border-top: 1px solid var(--grey100); }
/* 질문하기 P2(2026-10-11) — 칼럼이 236~272px라 사진 44 + [상담신청] 79를 빼면 글자 칸이 76px뿐이었다: «하늘세무사사무소»가 «하늘세무사사/무소»로
   꺾이고 «상호 · 지역» 2줄 클램프도 세 줄째를 잘랐다(6폭 점검 1024~1440). 본체 기준 폭 175(사진 44 + 글자 ≥121)를 주면 좁은 칼럼에서
   [상담신청]이 둘째 줄 오른쪽으로 내려가고(flex-wrap), 폰(<900, 칼럼이 본문 폭)에서는 그대로 한 줄이다. */
.qna-side .qna-wish { flex-wrap: wrap; row-gap: var(--s-sm); }
.qna-side .qna-wish-main { flex: 1 1 175px; }
.qna-side .qna-wish-chat { margin-left: auto; }
/* 행 본체 = 프로필 링크(D-374). 큰 CTA 두 개 대신, 상담 입구는 우측 [채팅상담] 하나다. */
.qna-wish-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.qna-wish-main:hover .t-label2 { color: var(--primary-pressed); }
.qna-wish-main .qna-tax-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* [상담신청] — 행보다 낮게(D-375 «버튼이 너무 커», D-377에서 카피 변경). btn 기본 line-height가
   행 높이와 어긋나 위로 떠 보였다 — align-self·inline-flex 중앙 정렬로 못 박는다. */
.qna-wish-chat {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 var(--s-md); font-size: var(--fs-label2); border-radius: var(--r-sm); line-height: 1;
}
/* 서브줄(상호 · 지역)은 두 줄까지(타이포그래피 C3 묶음 2) — 한 줄 말줄임은 데스크톱 좁은 칼럼(236~272px)에서
   «○○ 세무회계 · 서울 강남» 넷이 늘 잘렸다(AUDIT §2). 글자를 줄이지 않고 줄 수로 푼다. pitch 줄은 D-375에서 뺐다(행은 사람 식별까지만). */
.qna-wish-main .qna-tax-id .st-caption1 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all;
}
.qna-side .qna-wish-form { padding: 14px; }

/* 뒤로 가기 «세무 Q&A» — 글 위(D-377). 모양은 전역 뒤로 가기 한 부품(.pg-back, D-880 P-074 — 3차 정리 X2)이다.
   이 상자는 자리(아래 여백)와 qna.js initBackLink의 손잡이(`.qna-back a` — 목록 2쪽·분야에서 왔으면 history.back)만 맡는다.
   ⚠ `.qna-back a`에 색·크기를 다시 주지 마라 — 명시도(0,1,1)가 .pg-back(0,1,0)을 이겨 부품이 깨진다. */
.qna-back { margin-bottom: 10px; }
/* 질문하기 쓰기·전달 확인의 뒤로 가기 자리(D-974 — 탭 줄 대신). 모양은 .pg-back 그대로, 이 상자는 아래 여백만. */
/* (.qnw-back은 흐름 머리 한 벌의 .flow-back으로 옮겼다 — app.css, D-976 S2) */

/* ── 상태 칩 — 글 위에 작게. 카드가 아니다(사용자 지시). ───────────────────────── */
.qna-state {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px; padding: 5px 11px 5px 9px;
  border-radius: var(--r-full); background: var(--surface-alt);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--text-secondary);
}
.qna-state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex: none; }
/* 지원 게이지(D-374) — minJoin칸 중 지원 수만큼 점등. 「모으는 중」이라는 말 대신 지표가 말한다. */
.qna-join-dots { display: inline-flex; gap: 3px; align-items: center; }
.qna-join-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey300); }
.qna-join-dots i.on { background: var(--primary); }
/* 색이 상태를 말한다 — 모으는 중은 조용히, 작성 중은 «지금 일어나는 일»이라 파랑,
   마감은 «끝났다»라 회색으로 되돌린다. */
.qna-state[data-state="writing"] { background: var(--primary-light); color: var(--primary-pressed); }
.qna-state[data-state="writing"] .qna-state-dot { background: var(--primary); }
.qna-state[data-state="closed"] { background: var(--surface-alt); color: var(--text-secondary); }

/* ── 세무시선 추천 (D-380 · D-428) — 질문 아래·답변 위, **3장이 한 행**(사용자 지시).
   ⚠ D-381의 «2장»은 D-428에서 뒤집혔다 — 크게 2장이 아니라 작게 3장이 한 줄로 선다.
     그래서 캡션도 이 지면에서만 눌러 줄인다(다른 지면의 .sisun-pop은 그대로). */
/* 위아래 카드 구획과 한 호흡 띄운다(D-568, 사용자 지적 — 붙어 보임). 아래 여백이 0이라
   원문·답변 폼이 레일에 붙었다. 대칭 32px — 섹션 경계는 괘선이 아니라 여백이 진다. */
.qna-sisun { margin: var(--s-3xl) 0; }
.qna-sisun-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-md); }
.qna-sisun-head h2 { margin: 0; }
.qna-sisun-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-sm); }
/* 굵기 600 — sisun.css의 바탕 700을 Q&A 안에서만 내린다(사용자 2026-10-03 «카드 문구 600 지금», 세무시선 묶음 5 전). */
.qna-sisun .sisun-pop-cap { padding: var(--s-sm) var(--s-md); min-height: 48px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); }

/* ── 답변 스레드 — 댓글 형식(사용자 지시). 카드 여러 장이 아니라 한 흐름이다. ───── */
.qna-thread { margin-top: 28px; display: flex; flex-direction: column; gap: 0; }
.qna-thread-head { margin-bottom: var(--s-xs); }
.qna-thread-head h2 { margin: 0; }
/* 상자+구분선 행 — 목록(.qna-qcl)과 같은 문법(D-373). */
.qna-thread-list {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden; margin-top: 10px;
}
.qna-comment {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--s-md);
  padding: var(--s-lg); border-top: 1px solid var(--grey100);
}
.qna-comment:first-of-type { border-top: 0; }
.qna-comment-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
}
.qna-comment-body { /* 비용 카드가 오른쪽 끝으로 가려면 본문이 세로 흐름이어야 한다 */
  display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.qna-comment-who { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.qna-comment .qna-answer-body { margin: 0; }
.qna-comment .qna-answer-locked { margin: 2px 0 0; }

/* 좁은 화면 — 한 열로 쌓는다. 오른쪽 목록은 질문 아래로 내려오고 붙박이를 푼다.
   ⚠ sticky·max-height를 함께 풀어야 한다. 하나만 풀면 목록이 짧은 창 안에 갇힌다. */
@media (max-width: 900px) {
  .qna-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-2xl); }
  .qna-side { position: static; max-height: none; }
  .qna-side-scroll { overflow-y: visible; max-height: none; }
}

/* ══════════════════════════════════════════════════════════════ 작성/수정(qna-write · qna-edit) */

/* 🔴 **여기는 --page-max를 쓰지 않는다**(D-365) — tokens.css의 «좁게 두는 자리» 목록에 있다.
      이유는 취향이 아니라 **실측**이다: 500자를 쓰는 칸의 높이는 폭에 **반비례**한다.
      Pretendard 15px/1.75에서 500자가 차지하는 높이(D-365 당시 실측 — 지금 서체 SemTalk Sans Round는 약 9% 넓어 줄이 조금 더 는다) —
        칼럼  680px → 210px (한 줄 63자)
        칼럼  760px → 184px (한 줄 71자)
        칼럼 1500px → **105px** (한 줄 125자)
      전폭으로 두면 500자가 105px밖에 안 돼 «칸이 작아 보인다»가 되고, 한 줄 125자는 쓰다가
      다음 줄 첫 글자를 못 찾는다. 그래서 이 화면만 문서 폭으로 잡는다.
   ⚠ 값을 바꾸려거든 위 표를 다시 재라. 폭을 넓히면 칸은 «커지는» 게 아니라 낮아진다. */
.qna-write-sec { max-width: 820px; margin-inline: auto; }

/* 문서 판 — 흰 종이 한 장. 격자가 아니라 위에서 아래로 흐른다. */
.qna-doc {
  display: flex; flex-direction: column; gap: 0;
  padding: 26px 28px 0;
}

/* ── 분야 (분절) ─────────────────────────────────────────────────────────── */
.qna-doc-ask { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.qna-doc-cap {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);
  color: var(--text-tertiary); margin-bottom: 9px;
}
.qna-cats { display: flex; flex-wrap: wrap; gap: 6px; }
/* 라디오를 감춘다 — 접근성을 위해 display:none 대신 **화면 밖으로** 보낸다(포커스가 살아 있어야
   키보드로 고를 수 있다). */
.qna-cat > input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.qna-cat > span {
  display: inline-block; cursor: pointer;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 6px 13px; background: var(--surface);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.qna-cat > input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--text-on-fill); }
.qna-cat > input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.qna-cat > span:hover { border-color: var(--primary); color: var(--primary); }
.qna-cat > input:checked + span:hover { color: var(--text-on-fill); }
@media (prefers-reduced-motion: reduce) { .qna-cat > span { transition: none; } }

/* ── 문서 (제목·본문) ────────────────────────────────────────────────────── */
.qna-doc-page { padding: var(--s-xl) 0 0; display: flex; flex-direction: column; }

/* 🔴 테두리도 배경도 없다. 이 화면의 «특색»이 전부 여기서 나온다 — 되돌려 회색 면을 씌우면
      1차 진단의 「회색이 지배한다」로 그대로 돌아간다. */
.qna-doc-title,
.qna-doc-text {
  width: 100%; border: 0; background: transparent; padding: 0;
  color: var(--text-primary); font-family: inherit;
}
.qna-doc-title:focus, .qna-doc-text:focus { outline: none; }

.qna-doc-title {
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22);
}
/* 제목 자동 줄바꿈(D-974 Q4) — 자동 높이 textarea(전달 확인 .qna-final-title · 글쓰기 .ed-title과 같은 문법). 손잡이·스크롤바 없이
   field-sizing이 되는 브라우저는 CSS만으로, 나머지는 qna.js(initOneLine)가 scrollHeight로 맞춘다. 값은 한 줄이다. */
textarea.qna-doc-title {
  display: block; resize: none; overflow: hidden; min-height: 0; field-sizing: content;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* ⚠ placeholder를 너무 흐리게 두면 «빈 문서»가 아니라 «고장난 화면»으로 읽힌다.
   --text-tertiary보다 한 단계만 옅게 잡는다(대비 3:1 언저리). */
.qna-doc-title::placeholder { color: var(--grey400); }
.qna-doc-text::placeholder { color: var(--grey400); }

.qna-doc-rule { height: 1px; background: var(--border); margin: var(--s-lg) 0; }

/* 🔴 **열 줄이 보이는 높이**(D-486, 사용자 지시). body1 토큰 16px/28px × 10줄 = 280px(옛 15px/1.75 = 262.5 → 264).
      옛 근거(500자가 스크롤 없이 = 184px, D-365)는 본문 상한이 300자로 내려가며(D-482)
      의미를 잃었지만, 280px은 그 값보다도 크므로 옛 계약도 함께 지킨다.
      상한 296px은 큰 모니터에서 칸이 열한 줄을 넘지 않게 잡는 값이고, 30vh는 노트북에서
      화면을 넘지 않게 하는 값이다 — 셋 다 근거가 다르니 하나만 고치지 마라.
   ⚠ `overflow-y: auto`가 아니라 그냥 두면 내용이 넘칠 때 브라우저가 스크롤을 붙인다.
     500자 상한이 서버·화면 양쪽에 있으므로 그 일은 일어나지 않는다. */
.qna-doc-text {
  min-height: clamp(280px, 30vh, 296px);
  font-size: var(--fs-body1); line-height: var(--lh-body1); resize: none;
}
/* 오류 — 문서에는 빨간 테두리를 두를 자리가 없다. 밑줄로 짚고 말은 하단 상태줄이 한다. */
.qna-doc-title.is-err { box-shadow: 0 2px 0 -1px var(--error); }
.qna-doc-text.is-err { box-shadow: 0 1px 0 0 var(--error); }

/* ── 하단 상태줄 ─────────────────────────────────────────────────────────── */
/* 🔴 라벨을 걷어낸 대가로 생긴 자리다. 글자수·오류·제출이 여기 모인다.
      ⚠ 카드 좌우 패딩을 음수 마진으로 되밀어 **판의 끝까지** 선을 긋는다 — 안 그러면
        구분선이 가운데 떠 «바닥»으로 안 읽힌다. */
.qna-doc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  margin: var(--s-xl) -28px 0; padding: 13px 28px;
  border-top: 1px solid var(--border);
}
.qna-doc-status { min-width: 0; }
.qna-doc-count {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.qna-doc-count i { font-style: normal; margin: 0 5px; opacity: .6; }
.qna-doc-err { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--error); font-weight: var(--fw-semibold); }
.qna-doc-actions { display: flex; gap: var(--s-sm); flex: none; }

/* 좁은 화면 — 상태줄이 두 줄로 접힌다(버튼이 글자수를 밀어내지 않게). */
@media (max-width: 520px) {
  .qna-doc { padding: var(--s-xl) 18px 0; }
  .qna-doc-bar { margin: 18px -18px 0; padding: var(--s-md) 18px; flex-wrap: wrap; }
  .qna-doc-actions { width: 100%; justify-content: flex-end; }
}

/* ── 수정 화면(qna-edit)·상세의 남은 폼 조각 ─────────────────────────────────
   🔴 **작성 화면(qna-write)은 D-365에서 문서 캔버스로 갈아탔지만 수정 화면은 그대로다.**
      아래 규칙들을 작성 화면과 함께 지우면 수정 화면이 통째로 깨진다 — 실제로 한 번 지웠다가
      «지운 클래스를 아직 쓰는 템플릿» 검사에서 걸렸다.
   ⚠ 수정 화면도 문서 캔버스로 옮길 거라면 그때 이 블록을 **함께** 걷어라.
     지금은 두 화면이 다른 얼굴이라는 것을 알고 두는 것이다(수정은 본문 추가만 가능한
     다른 성격의 화면이다 — QnaController 주석 참고). */
.qna-write-form { display: flex; flex-direction: column; gap: var(--s-lg); }
.qna-field { display: flex; flex-direction: column; gap: 6px; }
.qna-field-label { display: flex; align-items: baseline; justify-content: space-between; }
.qna-counter { color: var(--text-tertiary); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); font-variant-numeric: tabular-nums; }
/* 인라인 오류 — 칸 테두리 1.5px 빨강 + 아래 한 줄.
   🔴 오류 빨강은 --error 토큰 하나다(D-880, P-070 (가)) — 옛 #DC2626을 되살리지 마라. 이 파일의 #DC2626 셋
      (.qna-danger·.qna-danger-btn)은 오류가 아니라 삭제 **실행 버튼**이라 그대로다. */
.qna-input-err { border: 1.5px solid var(--error) !important; background: var(--surface) !important; }
.qna-field-err { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--error); }
.qna-field-note { color: var(--text-tertiary); }
.qna-write-body textarea { min-height: clamp(200px, 34vh, 380px); padding: 14px; font-size: var(--fs-body1); line-height: var(--lh-body1); resize: vertical; }
.qna-write-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-sm); margin-top: var(--s-xs); }

.qna-existing-body {
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); white-space: pre-line;
  padding: var(--s-md); border-radius: 10px; background: var(--grey50); border: 1px solid var(--border);
  max-height: 220px; overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════ 반응형 */
/* 폼이 두 칸으로 서기엔 좁아지는 지점 — 한 줄씩 쌓는다(가로가 좁으면 라벨과 칸이 붙어 버린다). */
@media (max-width: 860px) {
  .qna-write-form { grid-template-columns: minmax(0, 1fr); }
}
/* 390px 모바일 — 분야는 레일 대신 드롭다운(L-04). */
@media (max-width: 460px) {
  .qna-rail-wrap { display: none; }
  .qna-cat-select { display: flex; flex: 1; min-width: 0; margin-bottom: 0; }
  /* 사진은 좁은 화면에도 산다(D-557) — 「희망 N명」 문구가 사라져 사진이 유일한 신호다.
     문구가 있던 시절엔 우측이 132px이라 접었지만, 사진만은 52px이라 제목이 안 죽는다. */
  /* 접이 팬 — 좁은 화면에선 가로만 뷰포트에 고정한다. right:-52px 같은 리터럴 오프셋은
     [질문하기] 버튼 폭에 기대는 값이라 실측에서 좌측 23px이 밖으로 나갔다.
     🔴 fixed + top:auto — 세로는 «폼이 흐름상 있었을 자리»(버튼 아래)에 남고 가로만
        뷰포트 기준이 된다. top에 값을 주지 마라 — 상단바 높이에 결합된다. */
  .qna-fold-panel { position: fixed; left: 16px; right: 16px; width: auto; top: auto; }
  .qna-tax-actions { margin-left: 0; width: 100%; }
  .qna-tax-actions .btn { flex: 1; justify-content: center; }
}

/* 상담 희망 세무사 사진 (D-357→D-370) — 이제 Q 컴팩트 행의 우측에 산다(최대 3장,
   +N 배지는 없앴다 — 수는 옆의 「희망 N명」이 말한다).
   ⚠ 겹치기는 음수 마진, 첫 장만 :first-child로 되돌린다 — 안 그러면 줄이 왼쪽으로 민다. */
.qna-face {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); margin-left: -8px; flex: none; background: var(--grey100);
}
.qna-face:first-child { margin-left: 0; }

/* 🔴 채택 관련 규칙(.qna-adopted*·.qna-gauge·.qna-adopt*·.qna-unadopt·채택 대화)은 **지웠다**(D-358).
   D-357에서 마크업·라우트·저장소 쓰기를 없애면서 CSS만 남겨 뒀는데, 이 저장소의 규칙은
   «조각과 CSS는 항상 함께 고친다»다 — 남겨 두면 다음 사람이 «쓰이는 클래스»로 착각한다.
   되살릴 일이 생기면 템플릿·라우트·저장소·렌더 테스트를 함께 되돌려라. */

/* 🔴 상담 희망 «카드» 규칙(.qna-wishes·.qna-wish 기본형·.qna-wish-badge·.qna-wish-cta·
   .qna-wish-pitch 기본형·.qna-answer-top)은 **지웠다**(D-374) — 사이드가 상자+행으로 바뀌며
   마크업이 사라졌다. 행의 규칙은 위 «오른쪽 세무사» 구역(.qna-side …)에 있다. */

/* 세무사용 희망 등록/취소 (D-377→D-380) — 상태 칩 줄 우측 끝, 칩과 같은 29px.
   본문 하단 전폭 버튼은 «너무 커서» 은퇴했다(사용자 지시). */
.qna-state-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qna-state-row .qna-state { margin-bottom: 0; }
.qna-wish-cta-main { display: flex; align-items: center; gap: var(--s-sm); flex: none; }
.qna-wish-btn { height: 30px; padding: 0 var(--s-md); font-size: var(--fs-label2); font-weight: var(--fw-semibold); border-radius: var(--r-full); }   /* 30 = 상태 칩 높이(label2 20 + 5×2) */

/* 보조 동선 — 특정인에게 고정하지 않는 길이라 목록 아래에 조용히 둔다. */
.qna-more-tax { margin: 14px 0 var(--s-xs); }

/* 작성 화면의 지면 성격 고지 — 제출 전에 «여기가 무엇인지»를 말하는 줄(D-357). */
.qna-write-lead {
  margin: 0 0 var(--s-lg); padding: var(--s-md) 14px;
  background: var(--surface-alt); border-radius: var(--r-md); line-height: var(--lh-body2);
}

/* ── 세무인 확정 · 답변 열람 (D-361 → D-590) ──────────────────────────────────
   🔴 잠긴 답변의 **원문은 HTML에 없다** — 이 원칙은 그대로다. D-590부터 잠긴 자리에
      «대역 텍스트»(서버 QnaVeil이 원문의 형태만 남기고 전부 치환한 헛글자)가 실리고,
      블러는 그 대역에만 건다. 블러를 꺼도 나오는 것은 무의미 대역뿐이다.
      **원문에 filter: blur()를 거는 것은 여전히 금지** — 그건 글자를 실어 보낸 뒤
      눈만 가리는 것이고, 개발자도구 한 번이면 전부 읽힌다. */
.qna-stage { margin: 18px 0 var(--s-sm); }
.qna-stage-card { padding: 14px var(--s-lg); }
.qna-stage-card p { margin: 6px 0 0; }
.qna-stage-card form { margin-top: var(--s-md); }

.qna-unlock { margin-top: 18px; }
.qna-answer-card { padding: var(--s-lg); margin-bottom: 10px; }
.qna-answer-body {
  margin: var(--s-md) 0 0; line-height: var(--lh-body1); white-space: pre-wrap; overflow-wrap: break-word;
}
.qna-mine-badge { background: var(--primary-light); color: var(--primary); }

/* 잠긴 답변 — «대역 블러» (D-590, 사용자 확정 Q-213).
   블러가 걸리는 글자는 서버가 만든 무의미 대역뿐이다(원문 미노출은 위 원칙 그대로) —
   이 블러는 보안 장치가 아니라 «진짜 글처럼 보이는» 질감이다. 본문(.qna-answer-body)과
   같은 조판을 입어야 열림/잠김이 같은 글로 읽힌다.
   🔴 강도 3px는 사용자 확정(Q-213 — 처음 2px 지시 후 실물을 보고 3px로 조정) — 권고 4px보다
      글자 윤곽이 살아 있는 쪽. 대역의 무의미함이 비쳐 보인다는 지적이 오면 4px가 처방이다
      (D-590 덱 3쪽의 3/4/5px 비교 참조).
   (은퇴) .qna-lock-blur — D-373 자리표시 «문장» 블러. 대역이 그 자리를 물려받았다. */
.qna-answer-locked { position: relative; margin: var(--s-xs) 0 0; }
.qna-preview-lead, .qna-preview-tail {
  margin: var(--s-md) 0 0; font-size: var(--fs-body1); line-height: var(--lh-body1);
  white-space: pre-wrap; overflow-wrap: break-word;
}
/* D-1057 — 유료 구간 표시(.qna-paywall, JSON-LD cssSelector)는 틀만 남는다. 안의 대역 블러(.qna-veil)와 흐린 수수료가
   «글이 있다 · 견적이 있다»를 말한다(옛 회색 상자 안내문 «열람한 뒤에 볼 수 있어요»는 걷었다 — 사용자 지시 2026-10-24). */
.qna-paywall { margin: 0; }
.qna-veil {
  margin: var(--s-md) 0 0; font-size: var(--fs-body1); line-height: var(--lh-body1); white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--text-secondary);
  filter: blur(3px); user-select: none; pointer-events: none;
}
/* 긴 답변(12줄 초과)만 접는다 — 하단 페이드가 «더 있다»를 말한다. 짧은 답변에 페이드를
   걸면 멀쩡한 끝 줄이 사라진 것처럼 보이므로 is-long은 서버가 분량으로 가른다(480자).
   ⚠ 답변 상한이 1,000자가 된 뒤에도(D-677 ⑧) **이 값은 그대로다** — 여기서 재는 것은 «상한»이
     아니라 «한 화면에 두어도 되는 길이»이고, 그 길이는 상한과 무관하게 12줄이다. */
.qna-veil.is-long {
  max-height: 315px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
}
/* 채택 배지·버튼 (D-375) — 초록 계열 «응답이 왔다» 톤. 게이지·코멘트는 안 돌아왔다. */
.qna-adopted-badge {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); padding: 2px var(--s-sm); border-radius: var(--r-sm);
  color: var(--tint-green-ink); background: var(--tint-green-bg);
  border: 1px solid var(--tint-green-line);
}
.qna-adopt-row { margin-top: var(--s-sm); }

/* 잠금 표식 — 글자 없는 자물쇠 하나(D-374). 결제 문구는 열람 줄 «한 곳»만 말한다. */
/* 🔴 자물쇠는 이제 **목록 아래 요약 줄 한 곳**에만 산다(사용자 지시) — 잠긴 행 가운데
   띄우던 옛 원형 배지(position:absolute)는 은퇴했다. 되살리면 «1인당 결제»로 읽힌다.
   ⚠ 절대배치를 남겨 두면 요약 줄의 자물쇠가 답변 카드 위로 떠오른다(실측 사고). */
.qna-lock-ic { display: inline-flex; align-items: center; color: var(--text-tertiary); }

.qna-unlock-cta { margin-top: 14px; }

/* 답변 폼 — T3 «파랑 한 점»(D-565·566, 사용자 확정). 파란 면을 걷은 순백 카드.
   글이 주인공이라(D-565 공통) 쓰기 활자가 이 화면 최대(16px)다. 파랑은 마감 필·포커스 링·
   버튼뿐 — 면으로 되돌리지 마라(«기본색 배경이 가독성을 죽인다»는 지적으로 걷었다). */
.qna-answer-form { background: var(--surface); border-color: var(--divider); padding: var(--s-xl); border-radius: 18px; }
.qna-ans-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qna-ans-due {
  background: var(--primary-light); color: var(--primary-pressed); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
  border-radius: var(--r-full); padding: 5px var(--s-md); flex: none; font-variant-numeric: tabular-nums;   /* 알약은 nowrap 대신 flex:none(§3-4) */
}
.qna-answer-input {
  background: var(--surface); width: 100%; resize: vertical; line-height: var(--lh-body1);
  /* 10줄(D-677 — 상한이 500 → 1,000자가 되며 7줄로는 절반도 안 보인다):
     body1 토큰 16px/28px × 10 = 280px + 패딩 28px = 308px(옛 16 × 1.75와 같은 값). 그 위로는 resize 손잡이에 맡긴다
     (칸을 상한에 맞춰 키우면 화면 한 장을 통째로 먹는다 — D-566에서 겪은 쪽이다). */
  min-height: 308px; font-size: var(--fs-body1); padding: 14px var(--s-lg); color: var(--text-primary);
  border: 1.5px solid var(--border); border-radius: 14px; letter-spacing: var(--ls-14);
}
.qna-answer-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49, 130, 246, .12); }
.qna-answer-count {
  text-align: right; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.qna-answer-count.near { color: var(--warning-dark); font-weight: var(--fw-semibold); }   /* 글자용 주황은 --warning-dark(흰 5.36:1) — --warning은 별·배지 계열 */

/* 전체 열람 줄 (D-362) — 결제는 카드마다가 아니라 여기 한 번이다. */
.qna-unlock-bar {
  margin-top: 6px; padding: var(--s-lg);
  background: var(--surface-alt); border-radius: var(--r-md);
}
.qna-unlock-bar .btn { width: 100%; }
.qna-unlock-note { margin: 10px 0 0; }

/* ══ 열람 상품 팝업 (D-425) — details 기반: JS 없이 열리고 닫힌다 ══════════ */
/* 토스 시트 (D-427 A안) — 모바일은 하단 시트, 넓은 화면은 가운데 카드 폴백.
   상품은 라디오로 고르고 **금액이 결제 버튼 위에 산다** — 전환·강조는 :has()이고,
   미지원이면 강조만 죽지 결제는 라디오 값 그대로 간다(서버가 plan을 읽는다). */
.qna-plans { position: relative; }
/* 🔴 summary는 .btn을 입는데 display를 inline-block으로 덮으면 .btn의 flex 가운데
   정렬이 죽어 글자가 왼쪽 위로 흐른다(D-428 사용자 지적) — .btn과 같은 flex로 산다. */
.qna-plans > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.qna-plans > summary::-webkit-details-marker { display: none; }
.qna-plans[open] .qna-plans-pop {
  position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: flex-end; justify-content: center; background: rgba(15, 20, 30, .5);
  padding: 0;
}
.qna-plans-card {
  background: var(--surface); border-radius: 24px 24px 0 0; width: min(480px, 100%);
  padding: 10px var(--s-xl) 18px; box-shadow: 0 -18px 48px rgba(10, 14, 20, .28);
}
@media (min-width: 640px) {
  .qna-plans[open] .qna-plans-pop { align-items: center; padding: var(--s-lg); }
  .qna-plans-card { border-radius: 24px; width: min(420px, 100%); padding: var(--s-xl); }
  .qna-sheet-grab { display: none; }
}
.qna-sheet-grab {
  display: block; width: 44px; height: 5px; border-radius: 3px;
  background: var(--grey200); margin: var(--s-xs) auto 14px;
}
.qna-plans-title { display: block; font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); margin-bottom: 2px; }
.qna-plans-sub { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin: 0 0 14px; }
.qna-plan {
  position: relative; display: flex; align-items: center; gap: var(--s-md); cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: 14px var(--s-lg); margin-bottom: 10px;
}
.qna-plan-in { position: absolute; opacity: 0; pointer-events: none; }
.qna-plan-radio {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--grey300); background: var(--surface);
}
.qna-plan:has(.qna-plan-in:checked) { border-color: var(--primary); background: var(--primary-light); }
.qna-plan:has(.qna-plan-in:checked) .qna-plan-radio { border: 7px solid var(--primary); }
.qna-plan:has(.qna-plan-in:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.qna-plan-body { flex: 1; min-width: 0; }
.qna-plan-name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
.qna-plan-reco {
  font-style: normal; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); color: var(--text-on-fill);
  background: var(--primary); border-radius: 6px; padding: 0 var(--s-sm);
  flex: none;
}
.qna-plan-desc { display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-secondary); margin-top: 2px; }
.qna-plan-price { flex: none; text-align: right; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.qna-plan-price s { display: block; color: var(--text-tertiary); font-weight: var(--fw-regular); font-size: var(--fs-caption1); }
.qna-plans-note { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin: 2px 2px var(--s-md); }
.qna-sheet-cta {
  display: block; width: 100%; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--primary); color: var(--text-on-fill); font: inherit; font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold);
  padding: 15px 0; text-align: center; font-variant-numeric: tabular-nums;
}
.qna-sheet-cta:hover { background: var(--primary-pressed); }
/* 금액 전환 — 기본은 결합(기본 checked)의 금액, 단품을 고르면 바뀐다. */
.qna-cta-solo { display: none; }
.qna-sheet-form:has(.qna-plan-in[value="solo"]:checked) .qna-cta-solo { display: inline; }
.qna-sheet-form:has(.qna-plan-in[value="solo"]:checked) .qna-cta-bundle { display: none; }

/* ── 채팅상담권 카드 (D-425 · D-427) — 만료 칩은 웜 틴트, 행에 아바타·사무소 ── */
.qna-credit { margin-top: var(--s-md); }
.qna-credit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); }
.qna-credit-list { list-style: none; margin: 0; padding: 0; }
.qna-credit-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--divider);
}
.qna-credit-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: var(--grey100);
}
.qna-credit-ava-t {
  display: grid; place-items: center; font-size: var(--fs-caption1); font-weight: var(--fw-semibold);
  color: var(--grey700); background: var(--primary-light);
}
.qna-credit-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qna-credit-who small { color: var(--text-tertiary); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); }
.qna-credit-tax { font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--text-primary); text-decoration: none; }
.qna-credit-tax:hover { color: var(--primary); }

/* ── 차액 산식 (D-427, B안 접붙이기) — «왜 20,000원만 내는가»를 카드가 증명 ── */
.qna-up-calc {
  border: 1px solid var(--border); border-radius: 14px; padding: var(--s-md) var(--s-lg);
  background: var(--grey50); margin-bottom: var(--s-md); font-variant-numeric: tabular-nums;
}
.qna-up-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-secondary); padding: 3px 0;
}
.qna-up-row b { font-weight: var(--fw-semibold); color: var(--text-primary); }
.qna-up-dash { border-top: 1.5px dashed var(--grey300); margin: var(--s-sm) 0; }
.qna-up-total { color: var(--text-tertiary); }
.qna-up-total b { font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-weight: var(--fw-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--primary); }   /* 금액 강조 = num-lg + 고정폭 숫자(§3-3) */
.qna-up-cta { font-size: var(--fs-label1); line-height: var(--lh-label1); padding: 13px 0; }   /* 22 + 26 = 48 → label1 */

/* ── Q&A 자문위원 카드 (D-425) ── */
.qna-advisor-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qna-advisor-body { flex: 1; min-width: 0; }
.qna-advisor-badge {
  display: inline-block; margin-left: 6px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
  color: var(--tint-green-ink); background: var(--tint-green-bg); border-radius: 6px; padding: 2px var(--s-sm);
}
.qna-advisor-note { margin: 0 0 var(--s-sm); color: var(--text-tertiary); }
.qna-advisor-note.off a { font-weight: var(--fw-semibold); }

/* 답변 폼의 상담 제안(D-465) — 체크 한 줄, 제출 버튼 위. */
.qna-consult-ck { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular);
  color: var(--text-secondary); margin: var(--s-sm) 0 2px; cursor: pointer; }
.qna-consult-ck input { width: 15px; height: 15px; accent-color: var(--primary); }
.qna-consult-done { color: var(--tint-green-ink); font-weight: var(--fw-semibold); margin: var(--s-sm) 0 2px; }


/* ══ D-482 — 상담노트 첨부 질문·정제 확인 단계 ══ */
.qna-briefs { display: flex; flex-direction: column; gap: 6px; }
.qna-brief-row { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 13px; cursor: pointer; }
.qna-brief-row:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.qna-brief-row input { accent-color: var(--primary); }
.qna-brief-t { font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (은퇴) .qna-confirm-* — 옛 «이렇게 게시돼요» 파란 강조 카드. D-489의 타이포 헤더형이
   대체했다(.qna-final-*). 파란 면 강조는 «바뀐 글»에 시선을 몰아 거부감을 키우던 부분이다. */
.qna-confirm-guards { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.qna-guard { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); color: var(--tint-green-ink); background: var(--tint-green-bg);
  border-radius: var(--r-full); padding: 3px 10px; }

/* ── D-482 Phase 2 — 답변 폼의 예상 상담비용 입력 ── */
/* 바닥 한 줄(D-567) — 카운터가 왼끝, 비용·제출이 오른끝. 입력폼 양 모서리와 맞는다. */
.qna-ans-foot{display:flex;align-items:center;gap:10px;margin-top:var(--s-md)}
.qna-ans-foot .qna-answer-count{margin:0 auto 0 0;text-align:left}
.qna-fee-row{display:flex;align-items:center;gap:var(--s-sm)}
.qna-fee-row .t-label2{white-space:nowrap}  /* 좁은 폭에서 「예상 상/담비용」으로 접히면 안 된다 */
.qna-fee-row .input{max-width:130px;font-variant-numeric:tabular-nums;text-align:right;padding:9px var(--s-md)}
  /* 흰 면·헤어라인은 전역 .input이 든다(D-880, P-076 — D-565 «글 곁 회색 금지»가 전역이 됐다). */

/* ── D-482 Phase 3 — refined 결제 시트: 선택한 상품의 금액만 CTA에 선다(:has, 무JS) ── */
.qna-cta-rbasic, .qna-cta-rphone { display: none; }
.qna-sheet-form:has(.qna-plan-in[value="rbasic"]:checked) .qna-cta-rbasic { display: inline; }
.qna-sheet-form:has(.qna-plan-in[value="rbasic"]:checked) .qna-cta-rchat,
.qna-sheet-form:has(.qna-plan-in[value="rbasic"]:checked) .qna-cta-rphone { display: none; }
.qna-sheet-form:has(.qna-plan-in[value="rphone"]:checked) .qna-cta-rphone { display: inline; }
.qna-sheet-form:has(.qna-plan-in[value="rphone"]:checked) .qna-cta-rchat,
.qna-sheet-form:has(.qna-plan-in[value="rphone"]:checked) .qna-cta-rbasic { display: none; }
.qna-fee-line { color: var(--primary); margin: 2px 0 0; font-variant-numeric: tabular-nums }

/* ══ D-482 보강 (사용자 지시 5·6·7) ══════════════════════════════════════════
   ⑤ 자물쇠는 목록 아래 한 곳만 · ⑥ 정가 병기 · ⑦ 채택 우측 상단 + 비용 강조 카드 */

/* ⑦ 채택 — 이름 줄 오른쪽 끝. 파란 외곽선이라 «고르는 행동»이 회색 링크로 묻히지 않는다. */
.qna-adopt-top { margin-left: auto; display: flex; }
.qna-adopt-btn {
  border: 1px solid var(--primary); background: var(--surface); color: var(--primary);
  font-size: var(--fs-label2); font-weight: var(--fw-semibold); line-height: 1; padding: 7px var(--s-md); border-radius: var(--r-full);
  cursor: pointer; flex: none; transition: background .12s, color .12s;   /* nowrap 대신 flex:none(§3-4) */
}
.qna-adopt-btn:hover { background: var(--primary); color: var(--text-on-fill); }

/* ⑦ 예상 상담비용 — 한 줄 캡션이 아니라 카드. 의뢰인이 가장 오래 보는 값이다. */
.qna-fee-card {
  display: inline-flex; align-items: baseline; gap: var(--s-sm); margin-top: 10px;
  margin-left: auto;   /* 우측 정렬(사용자 지시) — 여러 답변의 금액을 세로로 훑기 쉽다 */
  padding: var(--s-sm) var(--s-lg); border-radius: 10px;
  background: var(--primary-light);
  border: 1px solid var(--tint-blue-line);
}
.qna-fee-card .fc-label { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--grey700); }
.qna-fee-card .fc-amt { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--primary-pressed); font-weight: var(--fw-semibold); }
.qna-fee-card .fc-amt b { font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-weight: var(--fw-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums;
  margin-right: 1px; }   /* 금액 강조 = num-lg + 고정폭 숫자(§3-3) */

/* (은퇴, D-590) ⑤ 잠긴 행의 자리표시 «막대»(.qna-skel, D-516)와 컨테이너 전체 페이드
   (사용자 확정 B1) — 대역 블러(.qna-veil, 위 정의)가 그 자리를 물려받았다. 막대 시절의
   전면 페이드를 대역에 되살리지 마라: 진짜 글처럼 보이는 것이 이 지면의 목적이라, 바래는
   것은 긴 답변(is-long)의 하단뿐이어야 한다. 분량 연동(Q-162)은 대역 길이가 그대로 잇는다. */

/* ⑤ 잠금 표시 — 목록 아래 한 곳. */
.qna-lock-summary { display: flex; align-items: center; gap: 6px; margin: 0 0 9px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--grey600); }
.qna-lock-summary .qna-lock-ic { display: inline-flex; color: var(--grey500); }

/* ⑥ 정가 병기 — 취소선 + 차액 한 줄. «할인» 낱말은 쓰지 않는다(P5·D-186). */
.qna-plan-price s { display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin-bottom: 1px; }
/* 절감 비율 배지 — 초록 글씨 한 줄(옛 .qna-plan-save)은 은퇴했다(사용자 지시).
   가격 블록 위에 **붉은 필**로 얹어 «얼마나 싼가»가 금액과 한 덩어리로 읽히게 한다. */
.qna-plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; }
.qna-off {
  display: inline-block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);
  color: var(--text-on-fill); background: var(--error);
  border-radius: var(--r-full); padding: 1px var(--s-sm); margin-bottom: 3px;
}
.qna-now { font-size: var(--fs-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); }

/* 세무사 답변 수정(D-572) — 하단 토글(summary)을 걷었다. 수정 폼은 기본 숨김이고
   진입로는 내 답변 카드의 [답변 수정하기] 앵커 하나다: :target이 무JS 경로,
   is-open은 qna.js 보강. 작성 모드(is-write)는 늘 보인다.
   ⚠ details로 되돌리지 마라 — 닫힌 details는 앵커로 열 수 없다(그래서 div가 됐다). */
.qna-answer-form.is-edit { display: none; }
.qna-answer-form.is-edit:target, .qna-answer-form.is-edit.is-open { display: block; }

/* ══ 채택 답변 — 남색 머리띠 복원 (사용자 지시) ═════════════════════════════
   D-358에서 지운 옛 디자인(#14243D 머리띠 + 금색 체크)을 사용자 지시로 되살렸다.
   초록 배지 하나로는 «질문자가 고른 답»이라는 무게가 안 났고, 목록 가운데 파묻혔다.
   ⚠ 정렬에서도 채택이 최우선이라 이 카드는 항상 첫 행이다(QnaRepository.answerViews). */
.qna-adopted-band {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; margin-top: 2px;
  background: var(--advice-ink); color: var(--text-on-fill); border-radius: var(--r-md) var(--r-md) 0 0;
}
.qna-adopted-check { display: inline-flex; color: #E3C77B; flex: none; }   /* 채택 서신 금박(D-522·D-527 팔레트) — 토큰 없음, 예외로 둔다(--warning·--rating-star는 뜻이 다르다) */
.qna-adopted-label { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); }
/* 머리띠에 이어 붙는 본문 — 위 모서리를 각지게 이어 한 덩어리로 보이게. */
.qna-comment.is-adopted {
  border: 1.5px solid var(--advice-ink); border-top: none; border-radius: 0 0 13px 13px;
  padding: var(--s-lg) var(--s-lg) 15px; margin-bottom: var(--s-xs); background: var(--surface);
}


/* 정제 확인 화면의 보증 배지 — 체크(✓) 글리프 대신 CSS 도형으로 그린다. */
.qna-guard { display: inline-flex; align-items: center; gap: 5px; }
.qna-guard::before {
  content: ""; width: 12px; height: 7px; flex: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
/* 🔴 상품 행의 «열람 30,000 + 상담 33,000 → 20,000» 내역 줄(.qna-plan-break)은 **걷었다**
   (사용자 지시) — 배지·정가·실제가 셋이면 충분하고, 한 줄이 더 붙으면 시트가 계산서로 읽힌다.
   되살릴 일이 생기면 템플릿(qna-post 상품 라벨)과 함께 되돌려라. */
/* 배지가 가격 열을 넓히므로 설명 열이 좁아진다 — 상품 본문에 최소 폭을 준다. */
.qna-plan-body { min-width: 0; flex: 1; }


/* ══ 작성된 상담노트 판 — «컨텍스트 헤더 + 슬랩» (D-486, 사용자 확정 ②-1 / ⓐ안) ═══════
   화면 ①의 히어로와 **같은 얼굴**을 쓴다(.hero-note). 다른 것은 안에 담기는 것뿐이다.
   🔴 **글자를 옅게 쓰지 마라.** 첫 시안에서 요약 세 줄과 하단 고지를 회색으로 두었더니
      「흐릿해서 안 읽힌다」는 지적을 받았다(사용자). 파란 판 위에서는 흰 배경보다 대비가
      더 떨어진다 — 값은 --text-primary, 라벨은 --text-tertiary, 고지는 --grey700이다.
      한 단계라도 옅게 되돌리면 같은 문제가 그대로 돌아온다. */
.qna-note-panel { margin-bottom: 10px; }
.qna-note-body { padding: 17px var(--s-xl) var(--s-lg); }

.qna-notes { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.qna-note { display: block; cursor: pointer; }
/* 라디오는 **화면 밖으로** 보낸다 — display:none이면 키보드 초점이 사라져 고를 수 없다. */
.qna-note input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qna-note-card {
  display: block; border: 1px solid transparent; border-radius: var(--r-md); padding: 7px 11px;
}
.qna-note:hover .qna-note-card { background: rgba(255, 255, 255, .55); }
.qna-note-head { display: flex; align-items: baseline; gap: 10px; }
.qna-note-t {
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--text-primary); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qna-note-when {
  margin-left: auto; flex: none;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}

/* 고른 것만 흰 슬랩으로 펼쳐진다 — 형제 결합자라 개수 제한이 없다. */
.qna-note-kv { display: none; }
.qna-note input:checked ~ .qna-note-card {
  background: var(--surface); border-color: var(--tint-blue-line); padding: var(--s-md) 13px;
  box-shadow: 0 1px 2px rgba(17, 31, 40, .04);
}
.qna-note input:checked ~ .qna-note-card .qna-note-kv {
  display: grid; grid-template-columns: 78px 1fr; gap: 7px 10px; margin-top: 10px;
}
.qna-note input:focus-visible ~ .qna-note-card {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.qna-note-k {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);
  color: var(--text-tertiary);
}
/* ⚠ 두 줄까지만 보인다. 본문은 2,000자까지라 서버에서 자르면 문장 중간에서 끊긴다 —
     자르는 대신 **접는다**(늘려 보고 싶으면 [보기]로 상담노트 상세를 열면 된다).

   🔴 **명조를 쓰지 마라**(D-499, 사용자 지시). D-487에서 여기에 Noto Serif KR을 씌웠다가
      걷었다 — 이 화면은 **쓰는 화면**이고, 한 판 안에서 라벨은 고딕·값은 명조로 갈리니
      «다른 데서 가져다 붙인 것»처럼 보였다. 값이 «내가 적어 둔 것»이라는 구분은 서체가 아니라
      **판(파란 슬랩)과 라벨**이 이미 하고 있다.
   ⚠ 명조는 **읽는 화면의 원문**에만 남아 있다 — 전달 확인의 원문 접힘(D-490)과 게시글 상세의
     작성자 스트립·세무사용 원문(D-492). 그쪽은 게시본과 원문을 나란히 놓는 자리라 얼굴을 가른다.
   ⚠ 크기는 13px/500 그대로다(D-487의 실측 — caption1 크기 + 500 굵기) — 파란 바탕에서 12.5px/400은 흐리게 읽힌다. */
.qna-note-v {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); font-weight: var(--fw-regular);
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: keep-all;
}
.qna-note-foot {
  margin: 10px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);
  color: var(--grey700); word-break: keep-all;
}

@media (max-width: 560px) {
  .qna-note-body { padding: var(--s-lg) var(--s-lg) 14px; }
  .qna-note input:checked ~ .qna-note-card .qna-note-kv { grid-template-columns: 70px 1fr; }
}


/* ══ 전달 확인 — 타이포 헤더형 (D-489, 사용자 확정) ═══════════════════════════
   🔴 **테두리 있는 물건은 미리보기 카드 하나**다. 다이어그램·배지·겹 카드를 다시 들이면
      «구조가 어렵게 보인다»(사용자 지적)로 돌아간다. 구조 설명은 헤드라인 두 줄이 전부다. */
.qna-final-hero {
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
  word-break: keep-all; color: var(--text-primary);
}
.qna-final-hero em { font-style: normal; color: var(--primary); }

/* 미리보기 — 목록 카드와 같은 얼굴. 여기가 «게시될 실물»이라는 걸 생김새가 말한다. */
.qna-final-post {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 15px 17px; margin-top: 14px;
}
.qna-final-cat {
  display: inline-flex; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--primary-pressed);
  background: var(--primary-light); border-radius: var(--r-full); padding: 3px 9px;
}
.qna-final-title {
  font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); margin-top: 9px;
}
.qna-final-body {
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--grey800); margin: 7px 0 0;
  word-break: keep-all;
}
.qna-final-meta {
  display: flex; gap: 6px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin-top: 9px;
}

/* 캡션 — 걷어낸 항목. 카드가 아니라 조용한 한 줄이다. */
.qna-final-cap {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  margin-top: var(--s-md); font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary);
}
.qna-final-cap i { font-style: normal; color: var(--grey300); }

/* 원문 접힘 — 취소선 없이, 명조로. «보존된 내 글»의 얼굴(D-487·D-489). */
.qna-final-raw { margin-top: 13px; border-top: 1px solid var(--divider); padding-top: var(--s-md); }
.qna-final-raw > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); color: var(--primary);
}
.qna-final-raw > summary::-webkit-details-marker { display: none; }
.qna-final-raw > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
}
.qna-final-raw[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qna-final-raw-t {
  font-family: var(--serif-read); font-weight: var(--fw-semibold);
  font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-14); margin-top: 11px;
}
.qna-final-raw-b {
  font-family: var(--serif-read); font-weight: var(--fw-regular);
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--grey800);
  margin: 7px 0 0; word-break: keep-all;
}
.qna-final-raw-cap {
  margin: 10px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary);
  word-break: keep-all;
}

/* 버튼 — 🔴 **같은 폭**(사용자 지시: 크기 차이가 심해 정돈되지 않았다). 위계는 색이 만든다. */
.qna-final-actions { display: flex; gap: var(--s-sm); margin-top: var(--s-lg); }
.qna-final-actions > .btn { flex: 1; justify-content: center; }


/* 질문 원문 (D-489) — 세무사 화면. 상담노트 상자(.qna-brief-full — D-530에서 annotate.css로
   이사했다)와 같은 결로 앉되,
   본문은 명조다(«의뢰인이 쓴 글»의 얼굴, D-487). */
.qna-source {
  border: 1px solid var(--tint-blue-line); background: var(--surface-tint);
  border-radius: 13px; padding: 14px var(--s-lg); margin-bottom: 10px;
}
/* 질문 원문·전달 확인·내 원문 블록(D-487~490)의 세리프도 --serif-read(나눔명조) 하나다(D-743, Q-326 확정).
   예전엔 자체 호스팅 Noto Serif KR(124조각·3.4MB)을 따로 물었다 — «읽는 글은 나눔명조 하나»(design.md §1)와
   충돌해 걷었다. 굵기 토큰 600(--fw-semibold)은 나눔명조 실물 Bold 700으로 그려진다(CSS 매칭: 500 초과는 위쪽부터, 그리고
   typography.css가 font-synthesis: none이라 가짜 굵기는 어디서도 안 만들어진다) — 400은 --fw-regular. */
.qna-source-t {
  font-family: var(--serif-read); font-weight: var(--fw-semibold);
  font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-14); margin-top: 9px;
}
.qna-source-b {
  font-family: var(--serif-read); font-weight: var(--fw-regular);
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--grey800);
  margin: 6px 0 0; word-break: keep-all;
}


/* ══ 정제 중 로딩 — 히어로 노트형 (D-491, 사용자 확정 L5) ═════════════════════
   판은 화면 ①의 얼굴(.hero-note) 그대로다 — 기다림조차 같은 얼굴이 이 안의 요지.
   ⚠ hidden이 기본이고 JS가 세운다(점진 보강). 서버 렌더에는 절대 보이면 안 된다. */
.qna-refining {
  position: fixed; inset: 0; z-index: 80;
  background: var(--shell-bg);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-xl);
}
.qna-refining[hidden] { display: none; }
.qna-refining-panel { width: min(680px, 100%); }

/* 진행 바 — 차오르되 **끝까지 가지 않는다**(약 88%에서 멈춘 채 흐른다). 100%를 찍고
   기다리게 하면 «다 됐다더니 왜 안 넘어가»가 된다 — 완료 단정 금지는 바에도 적용된다. */
.qna-refining-bar {
  margin-top: 18px; max-width: 300px;
  height: 5px; border-radius: var(--r-full); background: var(--primary-light); overflow: hidden;
}
.qna-refining-bar i {
  display: block; height: 100%; width: 0; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--primary), var(--tint-blue-line));
  animation: qna-refining-fill 7s cubic-bezier(.25, .6, .35, 1) forwards;
}
@keyframes qna-refining-fill { from { width: 4%; } to { width: 88%; } }

/* 진행 줄 — 문구가 교대할 때 톡 튀지 않게. */
.qna-refining [data-qna-refining-now] { transition: opacity .25s; }
/* D-994 — 늦을 때 여는 안내 + [다시 보내기][글로 돌아가기]. hidden이 기본(JS가 45초 뒤에 연다). */
.qna-refining-slow[hidden] { display: none; }
.qna-refining-slow-act { display: flex; gap: var(--s-sm); margin-top: var(--s-md); flex-wrap: wrap; }
.qna-refining-slow-act .btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .qna-refining-bar i { animation: none; width: 60%; }
}


/* ══ 작성자 스트립 — 게시 후 «이건 공개용 요약본» (D-492, 사용자 확정 A안) ══════
   질문 카드 **안**, 작성일 아래 각주. 작성자에게만 보인다(템플릿 th:if).
   🔴 카드를 새로 만들지 않는다 — 점선 한 줄로 «이 글에 붙는 말»임을 보인다.
      상자로 키우면 내 글 위에 안내가 얹힌 꼴이 되어 매번 잔소리로 읽힌다(B안을 뺀 이유). */
.qna-mine { margin-top: var(--s-md); padding-top: 11px; border-top: 1px dashed var(--divider); }
.qna-mine > summary { list-style: none; cursor: pointer; }
.qna-mine > summary::-webkit-details-marker { display: none; }
.qna-mine-line {
  display: flex; align-items: baseline; gap: var(--s-sm);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--grey700); word-break: keep-all;
}
.qna-mine-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; transform: translateY(2px);
  background: var(--primary-light); color: var(--primary-pressed);
}
.qna-mine-txt b { color: var(--text-primary); font-weight: var(--fw-semibold); }
/* ⚠ 좁은 화면에서도 <br>이 만든 두 줄을 지킨다 — 낱말 중간에서 다시 갈리면 세 줄이 된다. */
.qna-mine-txt { word-break: keep-all; }
.qna-mine-go {
  margin-left: 0; flex: none;   /* 설명 두 줄을 걷어(질문하기 P1) 손잡이가 줄의 첫 글자다 */
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--primary);
}
/* 열리면 «접기»로 — 글자 크기 0 대신 글자를 투명하게 접고(폭 0) 가상요소가 대신 선다(크기는 토큰 하나). */
.qna-mine[open] .qna-mine-go::after { content: "접기"; }
.qna-mine[open] .qna-mine-go { font-size: 0; }   /* typo-lint: ignore — «보기» 글자를 접는 관용구(폭 0), 보이는 글자 «접기»는 ::after가 토큰 크기로 */
.qna-mine[open] .qna-mine-go::after { font-size: var(--fs-label2); }
.qna-mine > summary:focus-visible .qna-mine-line {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}

/* 펼친 원문 — 명조·취소선 없이(전달 확인 화면과 같은 문법, D-490). */
.qna-mine-raw { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--divider); }
.qna-mine-raw-t {
  font-family: var(--serif-read); font-weight: var(--fw-semibold);
  font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-14);
}
.qna-mine-raw-b {
  font-family: var(--serif-read); font-weight: var(--fw-regular);
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--grey800);
  margin: 6px 0 0; word-break: keep-all;
}
.qna-mine-raw-cap {
  margin: 9px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary);
  word-break: keep-all;
}

@media (max-width: 560px) {
  /* 좁으면 [보기]가 문장을 밀어낸다 — 아래 줄로 내린다. */
  .qna-mine-line { flex-wrap: wrap; }
  .qna-mine-go { margin-left: 0; }
}


/* 수정됨 각주 (D-494) — 작성일 옆에 한 톤 더 옅게. 배지로 키우지 마라:
   «고쳤다»는 사실은 다툼을 막는 각주이지 강조할 상태가 아니다. */
.qna-edited { margin-left: 5px; color: var(--text-disabled); }


/* ══ 수정 화면 — 두 갈래를 띠로 가른다 (D-495, 사용자 지시) ═══════════════════
   이 화면은 성격이 다른 두 글을 손댄다: 게시판 공개용 요약본 / 답변 세무사에게만 가는 원문.
   🔴 **띠가 이 화면의 뼈대다.** 걷어내면 「내용」과 「원문 내용」이 그냥 칸 두 개로 보이고,
      사용자는 자기가 무엇을 공개하고 무엇을 감추는지 모른 채 고치게 된다. */
/* (은퇴) .qna-edit-band/-who/-cap — 두 갈래를 «띠»로 가르던 방식(E1). D-496에서 **탭**(E3)이
   대체했다: 한 번에 한 글만 고치게 해 «지금 무엇을 고치는가»가 늘 분명하다. */

/* 원문 칸 — 명조로. 상세·전달 확인과 같은 문법(D-487·D-490): «내가 쓴 글»의 얼굴. */
/* 🔴 **수정 화면의 두 탭은 같은 서체다**(사용자 지시). 명조를 쓰지 마라.
   상세·전달 확인에서 원문을 명조로 두는 것은 «읽는 화면»이라 게시본과 얼굴을 갈라 놓는 것이지만,
   여기는 **쓰는 화면**이다 — 탭을 오갈 때마다 글꼴이 바뀌면 같은 폼이 두 벌처럼 보인다.
   구분은 서체가 아니라 **탭**이 이미 하고 있다. */
.qna-edit-raw { line-height: var(--lh-body1); word-break: keep-all; }
/* 요약본 칸 — 300자짜리 글에 14행은 과했다(사용자 지적). 여덟 줄이면 넉넉하다. */
/* 🔴 .qna-write-body textarea의 min-height(200~380px)를 **여기서 덮는다.** 그 값은 본문 상한이
   4,000자이던 시절의 것이라, 300자짜리 요약본에 쓰면 칸의 3/4가 빈 채로 남는다(사용자 지적).
   14.5px × 1.8 × 8줄 ≈ 209px. 원문은 2,000자라 더 길게(10줄) 준다. */
/* (은퇴) .qna-edit-sum / .qna-edit-raw — 라벨 폼 시절의 칸 높이. D-502에서 두 판이
   **문서 캔버스**(.qna-doc-*)로 바뀌며 작성 화면의 높이 규칙을 그대로 쓴다. */

/* ══ 수정 화면 = 문서 캔버스 (D-502, 사용자 확정 W2) ═══════════════════════════
   🔴 **작성 화면과 같은 클래스를 쓴다**(.qna-doc-*). 여기서 새 이름을 만들면 두 화면이
      다시 갈라지고, 한쪽만 고쳐지는 사고가 그렇게 시작된다. 아래는 «수정 화면에만
      필요한 차이»뿐이다.
   ⚠ 카드 자체가 .qna-doc라 좌우 패딩(28px)이 이미 있다 — 탭·안내 줄은 그 안에 산다. */
.qna-edit-form .qna-tabs { margin-bottom: var(--s-md); }
.qna-edit-form .qna-tab-note { margin: -4px 0 var(--s-xs); }
.qna-edit-form .qna-doc-ask { padding-top: var(--s-xs); }
/* 원문 판 — 2,000자까지라 조금 더 길게. 요약본 판은 작성 화면 값(264px)을 그대로 쓴다. */
.qna-doc-text-raw { min-height: clamp(300px, 34vh, 360px); }

/* (은퇴) .qna-edit-note2 — 「저장하면 수정됨과 시각이 함께 보여요」 예고. 사용자 지시로 걷었다(D-496). */

/* ══ 수정 화면 탭 (D-496, 사용자 확정 E3) ═══════════════════════════════════
   🔴 **스크립트 없이 돈다.** 라디오 두 개가 폼의 첫 자식이고, 형제 결합자로 판을 가른다.
      라디오를 옮기거나 판을 다른 부모로 넣으면 «~»가 끊겨 두 판이 함께 보인다.
   ⚠ 라디오는 화면 밖으로 보낸다(display:none이면 키보드 초점이 사라진다). */
.qna-tab-r { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qna-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--border); margin-bottom: 14px; }
.qna-tab {
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); padding: 10px 2px; margin-right: 22px; cursor: pointer;   /* 탭 = label1(§3-4) */
  color: var(--text-tertiary); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
#qna-tab-a:checked ~ .qna-tabs [for="qna-tab-a"],
#qna-tab-b:checked ~ .qna-tabs [for="qna-tab-b"] {
  color: var(--text-primary); border-bottom-color: var(--text-primary);
}
#qna-tab-a:focus-visible ~ .qna-tabs [for="qna-tab-a"],
#qna-tab-b:focus-visible ~ .qna-tabs [for="qna-tab-b"] {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}
/* 안내 한 줄 — 고르는 탭에 따라 갈린다. */
.qna-tab-note { margin: -6px 0 14px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); word-break: keep-all; }
.qna-tab-note, .qna-pane { display: none; }
#qna-tab-a:checked ~ .qna-tab-note.a,
#qna-tab-b:checked ~ .qna-tab-note.b { display: block; }
#qna-tab-a:checked ~ .qna-pane.a,
#qna-tab-b:checked ~ .qna-pane.b { display: block; }
/* 탭이 없는 글(원문 없음) — 라디오가 아예 안 그려지므로 판 하나를 그냥 편다. */
.qna-edit-form:not(:has(.qna-tab-r)) .qna-pane { display: block; }

/* ══ 답변 대기판 (D-506, 사용자 확정 «N1 웨이팅 보드 + N6 인물 줄») ═══════════════════
   링이 «얼마나 더»를, 얼굴 줄이 «누가 붙었나»를 말한다. 오른쪽 「상담 가능한 세무사」 칸이
   하던 말을 글 위로 끌어온 자리라, 둘 중 하나를 떼면 개편 이전으로 돌아간다(D-505 요구 ①③). */
.qna-wait {
  border: 1px solid var(--tint-blue-line);
  background: var(--surface-tint);
  border-radius: var(--r-lg); padding: var(--s-xl) 22px; margin-bottom: var(--s-md);
}
.qna-wait-top { display: flex; align-items: center; gap: var(--s-xl); }
.qna-wait-ring { position: relative; width: 132px; height: 132px; flex: none; }
/* ⚠ rotate(-90deg) — 링은 12시에서 시작한다. 지우면 3시에서 시작해 «남은 시간»으로 안 읽힌다. */
.qna-wait-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qna-wait-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.qna-wait-num {
  font-size: var(--fs-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-36); line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.qna-wait-num i { font-style: normal; font-size: var(--fs-heading); }
.qna-wait-cap { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
.qna-wait-say { min-width: 0; }
.qna-wait-head {
  margin: 0; font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
  color: var(--text-primary); word-break: keep-all;
}
.qna-wait-head em { font-style: normal; color: var(--primary); }
.qna-wait-lead {
  margin: var(--s-sm) 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2);
  color: var(--grey700); word-break: keep-all;
}
.qna-wait-lead b { color: var(--text-primary); }
.qna-wait-note { margin: 10px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
.qna-wait-note b { color: var(--grey700); }

/* 인물 줄 — 이름·상호가 붙는다. 익명 겹침 스택(38px)으로 되돌리지 마라: 이 줄이 있는
   이유가 «누가 붙었나»를 읽히게 하는 것이다(D-505 요구 ③, N6에서 온 부분). */
.qna-wait-people {
  display: flex; gap: 14px; align-items: flex-start;
  border-top: 1px solid var(--tint-blue-line);
  margin-top: var(--s-lg); padding-top: 15px;
}
/* 칸 폭 76(옛 66) — 이름·상호가 caption2 12px(옛 11.5·10px)이 되며 «검수세무회계»(70px)가 잘렸다 → 글자가 아니라 폭으로(C3 묶음 2). 얼굴 56은 그대로. */
/* 질문하기 P2(2026-10-11) — 폭은 글자 폭만큼 76~120: P1 §4에서 캡션이 13px이 되며 «문정원 세무사»(79px)·«하늘세무사사무소»(101px)가 76px 칸에서 잘렸다.
   120을 넘는 상호만 말줄임이 남는다(5명 × 120 + 간격 = 656px, 본문 칸 안). 폰은 아래 560 규칙대로 옆으로 민다. */
.qna-wait-f { width: auto; min-width: 76px; max-width: 120px; flex: none; text-align: center; color: inherit; text-decoration: none; }
.qna-wait-f img, .qna-wait-ava-empty {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto; background: var(--grey100);
}
.qna-wait-ava-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-weight: var(--fw-semibold); font-size: var(--fs-title2);
}
.qna-wait-f b {
  display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); margin-top: 6px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-wait-f span {
  display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-wait-f:hover b { color: var(--primary); }
.qna-wait-rest {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grey100); color: var(--grey600); font-size: var(--fs-caption1); font-weight: var(--fw-semibold);
}
@media (max-width: 560px) {
  .qna-wait { padding: 18px var(--s-lg); }
  .qna-wait-top { gap: 14px; }
  .qna-wait-ring { width: 104px; height: 104px; }
  /* 얼굴은 줄이지 않는다 — 줄이면 이 줄의 존재 이유가 사라진다. 넘치면 옆으로 민다. */
  .qna-wait-people { gap: 10px; overflow-x: auto; }
}

/* ══ 분야 칩·띠 — 파랑 한 색 (D-509, 사용자 지시) ══════════════════════════════════
   🔴 **분야마다 다른 색을 주지 마라.** D-508에서 9종 고유색(«분류 색상형»)을 넣었다가
      D-509에서 사용자가 되돌렸다 — 서비스가 파랑 한 색으로 도는데 목록이 무지개가 되면
      «신호등 파랑»(D-069~078)이 흐려진다. 되살리려거든 그 지적부터 반박해야 한다.
   ⚠ 색이 분류를 나르지 않으므로 칩의 **글자가 유일한 정보**다 — 글자를 빼고 색만 남기지 마라.
   ⚠ 형태(틴트 칩·윗변 띠·우측 정렬 메타·테두리 없는 점 세 개)는 D-507 C5 그대로다.
      되돌린 것은 «색이 여러 개»라는 점 하나뿐이다. */
.qna-cat-chip {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--r-full);   /* label2 행간 20 + 2×5 = 30 — 홈 .qna-home-cat과 같은 키(HomeTypeScaleContractTest) */
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold);
  color: var(--primary-pressed); background: var(--primary-light);
}
/* 목록 — 분야 낱말만 파랑. 닉네임·날짜는 회색 그대로다(한 줄에 색이 셋이면 소란하다). */
/* 분야 = 파랑 + Medium(D-555). b 태그라 명시가 없으면 기본 굵기(700)로 돌아간다. */
.qna-qc-cat { font-weight: var(--fw-medium); color: var(--primary-pressed); }   /* 500 = D-555(제목과 같은 무게) — 예외 */

/* ⚠ D-660에서 «지면형»(.qna-plans-inline)을 걷었다 — 상품 3종이 다시 버튼이 여는 시트
   (.qna-plans-pop)로 돌아갔다. 앱이 버튼인데 웹만 펼쳐져 두 지면이 다른 물건으로 보였다.
   죽은 규칙을 남기면 다음 사람이 «둘 중 어느 쪽이 사나»를 못 가리므로 함께 지운다. */
/* 🔴 「답변 1개 미리보기」 — 열린 한 건이 **맛보기**임을 말한다(D-513).
   ⚠ 색을 회색으로 낮추지 마라: 이 배지가 «왜 하나만 보이나»에 답하는 유일한 장치다. */
.qna-peek {
  /* ⚠ margin-left:auto — 이름 줄(.qna-comment-who) 오른쪽 끝으로 민다. [채택하기]가 함께
     뜨면 그 버튼도 auto라 둘이 나란히 오른쪽에 붙는다(배지가 앞). */
  margin-left: auto;
  display: inline-flex; align-items: center; flex: none;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
  color: var(--primary-pressed); background: var(--primary-light);
  border-radius: var(--r-full); padding: var(--s-xs) var(--s-md);
}

/* ══ 무응답 마감 — 접속 중인 세무사 (D-518, 사용자 확정 N5 «사람으로») ═══════════════
   🔴 예전에는 이 자리가 「세무사를 직접 찾아보시겠어요?」라는 **회색 글씨 한 줄**이었다 —
      물음을 던져 놓고 누를 것이 없었다. 지금 상담 가능한 사람을 세워 다음 걸음을 준다.
   ⚠ [다시 올리기] 버튼을 여기 붙이지 마라(사용자 지시) — 같은 조건의 되풀이는 두 번째 실패를
     더 아프게 하고 게시판에 같은 질문을 쌓는다.
   ⚠ 행 문법은 오른쪽 목록(.qna-wish)과 같은 얼굴이다 — 새 이름을 만들면 두 목록이 갈라진다. */
.qna-noans {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: var(--s-2xl);
}
.qna-noans-t { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); color: var(--text-primary); }
.qna-noans-lead {
  margin: var(--s-sm) 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2);
  color: var(--grey700); word-break: keep-all;
}
.qna-noans-lead b { color: var(--text-primary); }
.qna-noans-list { margin-top: 15px; }
.qna-noans-row {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md) 0; border-top: 1px solid var(--divider);
}
.qna-noans-row:first-child { border-top: 0; }
.qna-noans-main { display: flex; align-items: center; gap: var(--s-md); min-width: 0; flex: 1; color: inherit; }
.qna-noans-cta { flex: none; margin-left: auto; }
.qna-noans-more {
  display: block; margin-top: 15px; padding: var(--s-md); text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--grey800);
}
.qna-noans-more:hover { background: var(--grey50); }
@media (max-width: 560px) {
  .qna-noans { padding: 18px var(--s-lg); }
  /* 좁은 화면에서 이름과 버튼이 서로 밀지 않게 — 버튼을 아래로 내리지 않고 이름을 줄인다. */
  .qna-noans-main .qna-tax-id { min-width: 0; }
}

/* 무응답 마감 — 답변 자리를 세무시선 **위로** 올린다(D-518).
   🔴 마크업을 옮기지 않고 order로 바꾼다: 마크업을 옮기면 답변이 있는 글에서도 순서가 뒤집힌다.
   ⚠ order를 안 준 형제들(상태줄·질문 카드)은 0이라 자동으로 맨 앞이다 — 그대로 두면 된다. */
.qna-main.is-thread-first { display: flex; flex-direction: column; }
.qna-main.is-thread-first .qna-thread { order: 1; }
.qna-main.is-thread-first .qna-sisun { order: 2; }

/* ══ 답변 카드 — «자문 서신» (D-522, 사용자 확정) ═══════════════════════════════════
   🔴 이 지면의 문법은 «채팅 앱 카드»가 아니라 **문서**다. 되돌리려거든 D-521의 진단부터
      읽어라 — 틴트 칩·채워진 파란 버튼·둥근 16px·좁은 여백이 «전문직 자문»으로 안 읽혔다.
   바꾼 지렛대 다섯: ①본문 명조 ②여백 ③상자 대신 선 ④채워진 버튼 대신 밑줄 링크 ⑤모서리 4px.
   ⚠ 색은 전부 tokens.css의 --advice-* 를 본다. 여기에 색 코드를 직접 적지 마라. */
.qna-ans {
  background: var(--surface);
  border: 1px solid var(--border);
  /* 🔴 border-color(단축)를 border-left-color **뒤에** 쓰면 네 변을 모두 덮어 **레일 색이 죽는다**.
     시안 제작 중 실제로 겪었고 확대해서야 보였다 — 순서를 바꾸지 마라. */
  border-left: 3px solid var(--advice-rail);
  border-radius: 0 4px 4px 0;
  padding: var(--s-3xl) 40px var(--s-2xl);
  margin-top: var(--s-lg);
}
.qna-ans:first-of-type { margin-top: 0; }
/* 채택 — 레일이 굵고 진하다 + 배지 + 아래와 벌어진 여백.
   ⚠ **채택이 없는 글이 훨씬 흔하다**(선택이다) — 그때는 이 규칙이 통째로 안 붙어
     네 카드가 똑같이 선다. 첫 답변이 «채택된 것처럼» 보이면 안 된다(Q-167). */
.qna-ans.is-adopted {
  border-color: var(--advice-line);
  border-left-width: 5px;
  border-left-color: var(--advice-ink);
  margin-bottom: 30px;
}
.qna-ans-mark {
  display: inline-flex; align-items: center;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: .16em;   /* typo-lint: ignore — 자문 서신 머리표의 넓은 자간(D-522), 크기·굵기는 caption2 */
  color: var(--advice-ink); border: 1px solid var(--advice-line);
  border-radius: 2px; padding: var(--s-xs) var(--s-md); margin-bottom: var(--s-2xl);
}
/* 잠긴 행 — 서명할 글이 없으니 이름이 위에 선다(결제 전에는 «누가 썼나»가 유일한 단서다). */
.qna-ans-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* 🔴 본문 명조 — D-497(「명조는 읽는 화면에」)의 취지 그대로다. 답변은 읽는 글이다.
   ⚠ 15px 아래로 내리지 마라 — 명조는 작아지면 흐려진다.
   🔴 서체는 --serif-read 토큰이다(D-735, Q-316). 여기엔 예전에 폴백 없는
      `'Nanum Myeongjo', serif`가 적혀 있어서, 같은 답변 본문이 위쪽 .qna-answer-body와
      **다른 폴백 사슬**을 갖고 있었다(웹폰트가 안 내려오면 한글이 시스템 세리프로 주저앉는다).
      토큰으로 모아 두 규칙의 폴백이 갈릴 수 없게 했다 — 서체 이름을 다시 적지 마라.
   🔴 글자색 --text-primary #191F28(D-879, P-042) — qna-post.html의 답변 본문은 **이 규칙이 이긴다**
      (위 .qna-answer-body보다 구체적). 옛 #333D4B(grey800)는 design.md §1 회색 눈금 밖이었고, 위 규칙만
      고치면 화면은 그대로다. 세무시선 본문(sisun.css .sisun-body)과 같은 값 — 한쪽만 바꾸지 마라. */
.qna-ans .qna-answer-body {
  font-family: var(--serif-read);
  font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-primary);   /* 세리프 본문 = body1 16/28(§3-3 «읽는 글») */
  margin: 0; max-width: 62ch; word-break: keep-all; white-space: pre-line;
}
/* 서명 줄 — 사진·이름이 왼쪽, 금액이 오른쪽 끝.
   🔴 금액이 **서명 옆**에 서야 «이 사람의 값»으로 읽힌다. 본문과 떨어진 칩으로 되돌리면
      «상품 가격표»가 된다(D-520에서 칩을 걷은 이유다). */
.qna-ans-sign {
  display: flex; align-items: flex-end; gap: var(--s-md); flex-wrap: wrap;
  margin-top: 28px; border-top: 1px solid var(--divider); padding-top: var(--s-xl);
}
.qna-ans-who { display: flex; align-items: center; gap: var(--s-md); color: inherit; min-width: 0; }
.qna-ans-who:hover .qna-ans-nm { color: var(--advice-ink); }
.qna-ans-pic {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-title3);
}
.qna-ans-nm { display: block; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); }
.qna-ans-of { display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); margin-top: 3px; }
.qna-ans-fee { margin-left: auto; text-align: right; flex: none; }
/* D-1057 — 금액을 못 보는 자리의 흐린 견적: 칸 이름은 또렷이, 숫자(고정 헛숫자 000,000)만 흐린다. 대역과 같은 3px(Q-213). */
.qna-ans-fee.is-veiled .qna-ans-fee-n { filter: blur(3px); user-select: none; pointer-events: none; }
/* 잠긴 행은 서명 줄이 없다 — 대역 아래 왼쪽에 한 덩어리로 선다. */
.qna-ans-fee.is-locked { margin: var(--s-md) 0 0; text-align: left; }
.qna-ans-fee-l { display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: .16em; color: var(--text-disabled); }   /* typo-lint: ignore — 자문 서신 머리표 자간(D-522) */
.qna-ans-fee-n {
  display: block; margin-top: 5px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); font-weight: var(--fw-semibold); color: var(--grey600);
  font-variant-numeric: tabular-nums;
}
/* ⚠ 고정폭 숫자여야 여러 답변의 금액이 세로로 맞는다 — 이 줄을 지우면 자릿수가 널뛴다. */
.qna-ans-fee-n b {
  font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-weight: var(--fw-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--advice-ink);
  margin-right: 3px;
}
/* 행동 줄 — 상담은 **세무사마다** 둔다(사용자 확정: 여럿과 상담할 수 있다). */
/* ⚠ `align-items: center`가 아니라 `flex-start`다(D-708). 채택 접이가 열리면 이 줄의 높이가
   200px 넘게 늘어나는데, 가운데 정렬이면 [이 세무사와 상담하기]가 **허공 한가운데** 뜬다
   (실측). 접이가 닫힌 평소 모습은 셋 다 한 줄짜리라 달라지는 것이 없다.
   ⚠ `flex-wrap`을 준다 — 열린 접이가 폭을 다 먹으면 상담 링크가 다음 줄로 내려간다. */
.qna-ans-act { display: flex; align-items: flex-start; gap: var(--s-md); margin-top: 18px; flex-wrap: wrap; }
.qna-ans-sp { flex: 1; }
.qna-ans-go {
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--advice-ink);
  border-bottom: 1px solid var(--advice-line); padding-bottom: 2px;
}
.qna-ans-go:hover { border-bottom-color: var(--advice-ink); }
.qna-ans-adopt {
  font-family: inherit; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); cursor: pointer;
  color: var(--grey700); background: none; border: 1px solid var(--border);
  border-radius: 3px; padding: var(--s-sm) 14px;
}
.qna-ans-adopt:hover { border-color: var(--advice-ink); color: var(--advice-ink); }
/* ══ 채택 + 한마디 (D-708) ══════════════════════════════════════════════════════
   채택은 접이 안에서 일어난다 — 머리(summary)가 옛 버튼 자리를 그대로 잇고, 열면 한마디
   칸이 나온다. JS 없이 도는 것이 이 구조를 고른 이유다.
   ⚠ `summary`의 기본 삼각형을 지운다(list-style). 지우지 않으면 버튼 안에 마커가 박힌다. */
.qna-adopt { display: inline-block; }
.qna-adopt > summary { display: inline-block; list-style: none; }
.qna-adopt > summary::-webkit-details-marker { display: none; }
.qna-adopt[open] > summary { border-color: var(--advice-ink); color: var(--advice-ink); }
.qna-adopt form {
  margin-top: 10px; padding: 14px; width: min(420px, 100%);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--grey50);
}
.qna-adopt-l { display: block; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--text-primary); }
.qna-adopt-h { margin: var(--s-xs) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary);
  word-break: keep-all; }   /* 「보여\A0요」로 낱말이 갈리던 자리 */
.qna-adopt-h b { font-weight: var(--fw-semibold); color: var(--text-secondary); }
/* ⚠ 16px다 — 그 아래면 iOS가 칸을 누를 때 화면을 자동 확대한다(design.md). */
.qna-adopt-t {
  display: block; width: 100%; margin-top: var(--s-sm); padding: 10px var(--s-md);
  font-family: inherit; font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-primary);
  border: 1px solid var(--grey300); border-radius: var(--r-md); background: var(--surface);
  resize: vertical;
}
.qna-adopt-t:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.qna-adopt-act {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
/* 되돌릴 수 없다는 사실은 **글자**가 말한다 — 빨강을 쓰지 않는다(design.md). */
.qna-adopt-warn { flex: 1 1 160px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
.qna-adopt-act .btn { flex: 0 0 auto; }

/* ── 채택된 답변에 붙는 «질문자 한마디» ──────────────────────────────────────────
   🔴 이 행의 나머지는 전부 세무사의 것이다. 라벨 + 왼쪽 레일 + 따옴표 셋이 함께
      «다른 사람의 말»이라고 말한다 — 색 하나에 기대지 않는다(흑백에서도 성립).
   ⚠ 레일 색으로 `--advice-rail`(세무사 답변의 문서 톤, D-522)을 쓰지 마라 — 축이 섞인다.
      여기는 서비스 파랑 계열 농도로 간다. #D1D6DB 흰 바탕 대비 1.46:1은 비텍스트 하한에
      못 미치므로 레일은 `--primary`(3.07:1)를 쓴다.
   ⚠ 따옴표는 가상요소다 — 글자로 박으면 낭독기가 문장 사이에 읽어 넣는다. */
.qna-adopt-say {
  margin: 10px 0 0; padding: 10px 0 10px 14px;
  border-left: 3px solid var(--primary);
}
.qna-adopt-say-l {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); color: var(--primary-pressed);
}
.qna-adopt-say-b {
  margin: var(--s-xs) 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary);
  word-break: keep-all;
}
.qna-adopt-say-b::before { content: '\201C'; margin-right: 1px; }
.qna-adopt-say-b::after  { content: '\201D'; margin-left: 1px; }
/* 잠긴 행의 자리표시 막대는 그대로 쓴다(D-516) — 카드만 바뀌었지 규칙은 안 바뀌었다. */
.qna-ans .qna-answer-locked { margin-top: 0; }
@media (max-width: 560px) {
  .qna-ans { padding: var(--s-2xl) var(--s-xl) var(--s-xl); }
  /* 좁은 화면에선 금액이 서명 아래로 내려간다 — 왼쪽 정렬로 붙여 «떠 있는 값»이 안 되게. */
  .qna-ans-fee { margin-left: 58px; text-align: left; width: calc(100% - 58px); }   /* 100% + 왼쪽 58이면 58px 넘친다(질문하기 P2 6폭 점검) */
}

/* ══ 결제 확인 화면 (D-527, 사용자 확정 R5) ═══════════════════════════════════════
   🔴 결제 직후는 **글을 꼼꼼히 읽는 순간이 아니다** — 문장을 짧게 끊고 한 줄에 하나만 말한다.
   ⚠ 금액·유효기간은 각주 크기다. 키우면 «영수증»이 되는데, 이 화면은 확인이지 영수가 아니다. */
.qna-paid-sec { max-width: 640px; margin-inline: auto; }
.qna-paid {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 56px 40px 44px; text-align: center;
}
.qna-paid-eyebrow {
  display: inline-block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: .16em;   /* typo-lint: ignore — 자문 서신 머리표 자간(D-527) */
  color: var(--advice-ink);
}
.qna-paid-title {
  margin: var(--s-md) 0 0; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22);
  color: var(--text-primary); word-break: keep-all;
}
/* 문장마다 제 줄을 갖는다 — 이어 붙이면 결제 직후에 아무도 안 읽는다. */
.qna-paid-line {
  margin: 10px 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2);
  color: var(--grey700); word-break: keep-all;
}
.qna-paid-line:first-of-type { margin-top: var(--s-lg); }
.qna-paid-line b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.qna-paid-act { display: flex; gap: 9px; justify-content: center; margin-top: 28px; }
.qna-paid-go {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); color: var(--text-on-fill); background: var(--advice-ink);
  border-radius: 4px; padding: 13px var(--s-2xl);   /* 22 + 26 = 48 → label1 */
}
.qna-paid-go:hover { filter: brightness(.9); }
.qna-paid-go2 {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); color: var(--advice-ink); background: var(--surface);
  border: 1px solid var(--advice-line); border-radius: 4px; padding: var(--s-md) var(--s-xl);
}
.qna-paid-foot { margin: var(--s-xl) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
@media (max-width: 560px) {
  .qna-paid { padding: 40px 22px 34px; }
  /* 좁은 화면에선 버튼을 세로로 — 나란히 두면 둘 다 눌리기 어려워진다. */
  .qna-paid-act { flex-direction: column; }
}

/* ══ 요약본 손보기 (D-537) ════════════════════════════════════════════════════
   미리보기 안에서 그대로 고친다 — 고치는 자리와 결과가 보이는 자리를 가르지 않는다.
   ⚠ 평소에는 **입력칸처럼 보이지 않는다**(테두리·배경 없음). 미리보기의 조판을 그대로
     유지해야 «올라갈 모습»으로 읽힌다. 누르면 그때 테두리가 선다. */
.qna-final-edit {
  display: block; width: 100%; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; font: inherit; color: inherit; letter-spacing: inherit;
  padding: 3px 6px; margin-left: -6px; resize: vertical;
}
.qna-final-edit:hover { border-color: var(--border); }
.qna-final-edit:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
}
textarea.qna-final-body.qna-final-edit { line-height: inherit; min-height: 62px; }
.qna-final-editcap {
  margin: var(--s-sm) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary);
  word-break: keep-all;
}
/* 오류 빨강은 --error 토큰 하나(D-880 P-070 (가), 3차 후속 K03) — 로그인 두 문구(.login-error)처럼 채움 없는 글자다.
   옛 분홍 상자(#FDECEC 위 #C0242F)를 걷었다: 토큰 빨강 #F04452를 그 채움에 얹으면 3.25:1로 흰 바탕보다 낮다. */
.qna-final-err {
  margin: 9px 0 0; padding: 0;
  background: none; color: var(--error); font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13);
  word-break: keep-all;
}

/* ── 세무사 시점 상태 (D-550 → D-551에서 자리 이동) ─────────────────
   우측 셀은 의뢰인과 완전히 같고(사진·희망 N명), 상태는 **부제줄 날짜 우측**에 선다
   (사용자 지시). 색 문법은 .qna-hope 두 톤 그대로 — 파랑 = 움직일 수 있음, 회색 = 끝남.
   ⚠ 새 색·기호·볼드를 들이지 마라(D-549·551). */
.qna-st-in { white-space: nowrap; }

/* ── R 원형 대기판 — 세무사 시점 (D-562) ───────────────────────────
   판·링·머리는 의뢰인 대기판 클래스를 그대로 입는다. 여기 있는 것은 아랫줄(참여 현황)뿐. */
.qna-wait-who {
  display: flex; align-items: center; gap: 9px; margin: 10px 0 0;
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--grey700);
}
.qna-wait-who b { font-weight: var(--fw-regular); color: var(--text-primary); }
.qna-wait-tax .qna-wait-lead b { font-weight: var(--fw-regular); color: var(--primary-pressed); }
.qna-wait-fc { display: flex; flex: none; }
.qna-wait-fc img {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover;
}
.qna-wait-fc img + img { margin-left: -8px; }

/* ── B5 시트 — 마감 후 내 답변 (D-577) ─────────────────────────────
   운명이 카드 머리 한 줄로 선다(두 상태 모두 파란 문구 — 사용자 지시).
   시트는 테두리 대신 부양 그림자(T1 문법). */
.qna-ans.is-mine-final {
  background: var(--surface); border: 0; border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(25, 31, 40, .04), 0 8px 28px rgba(25, 31, 40, .07);
}
.qna-ans-fate {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); font-weight: var(--fw-regular); color: var(--primary-pressed);
  padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--grey100);
}

/* ── 내 Q&A 활동 (D-581, A4) — 원시 카운트 셋 + 최근 목록 ────────── */
.qna-my-stats { display: flex; gap: 10px; margin-bottom: var(--s-md); }
.qna-my-stat {
  flex: 1; background: var(--surface); border: 1px solid var(--grey200);
  border-radius: var(--r-md); padding: 13px 15px;
}
.qna-my-stat b {
  display: block; font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-weight: var(--fw-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.qna-my-stat i { font-style: normal; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--grey500); }

/* ── 목록 상단 내 활동 (D-582 → D-585 S2 호흡형) — 기존 영역 불변 ──────────
   내 차례가 있을 때만 카드(.qna-my-strip), 없으면 글줄(.qna-my-slim)로 줄어든다.
   수 나열 셋은 걷었다(사용자 확정) — 이번 달 답변·공개 선정은 /qna/my가 말한다. */
.qna-my-strip {
  display: flex; align-items: center; gap: var(--s-md);
  background: var(--surface); border: 1px solid var(--grey200); border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg); margin-bottom: var(--s-md);
}
.qna-my-turn { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; }
.qna-my-turn b {
  font-weight: var(--fw-semibold); color: var(--primary-pressed); font-variant-numeric: tabular-nums;
}
.qna-my-hint {
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--grey500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.qna-my-slim, .qna-my-q {
  display: flex; align-items: center; gap: 10px; padding: 2px 2px; margin-bottom: 10px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--grey500);
}
/* 의뢰인 «내 질문 N»(질문하기 P1) — 수만 600·본문색, 나머지는 세무사 글줄과 같다. */
.qna-my-q b { font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.qna-my-more { margin-left: auto; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--primary-pressed); white-space: nowrap; }
/* 질문하기 P2(2026-10-11) — 폰(≤599)에서 힌트 한 줄 말줄임(«희망 신청을 하고 아…») 대신 둘째 줄로 내려 다 보인다. [바로 가기]는 첫 줄 오른쪽 그대로. */
@media (max-width: 599px) {
  .qna-my-strip { flex-wrap: wrap; row-gap: var(--s-xs); }
  .qna-my-hint { flex: 1 0 100%; order: 3; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ══ 질문하기 1단계 — 상담노트 고르기 (D-677 ⑨) ═══════════════════════════════
   🔴 **고르는 화면이라 목록이 주인공이다.** 작성 폼(qna-write-sec)이 문서 폭(820)을 쓰는 것과
      달리 여기는 690으로 좁힌다 — design.md의 목록 기준 폭이고, 한 줄이 길어질수록 «어느
      노트인가»를 훑기 어려워진다.
   ⚠ 굵기 위계: 화면 머리만 700, 항목 제목 500, 보조 400(design.md). 항목 제목을 700으로
     올리면 목록 전체가 제목의 줄이 되어 훑기가 안 된다. */
.qnp { max-width: 690px; margin-inline: auto; }
.qnp-head { margin-bottom: 18px; }
/* 🔴 배너 제목(23px/700 · ≤560에서 21px)보다 **한 단 크게** 잡는다. 화면 머리가 구역 머리보다
   작으면 위계가 뒤집힌다 — 위계는 색이 아니라 크기·굵기로 세운다(design.md §위계).
   ⚠ 배너가 목록 아래라 둘이 나란히 비교되지는 않지만, 뒤집힌 사실 자체는 남는다. */
.qnp-title {
  margin: 0; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); color: var(--text-primary);
}
.qnp-lead {
  margin: 7px 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular);
  color: var(--text-secondary); word-break: keep-all;
}

/* 새로 만드는 길 — 목록 «위»의 히어로 배너(D-677, 사용자 지시 «기존 배너디자인 복구»).
   🔴 이 서비스에서 «상담노트를 만들자»고 말하는 얼굴은 D-485의 히어로 하나다. 여기 전용
      줄·카드를 새로 그리지 마라 — 같은 말을 두 가지 모양으로 하게 된다.
   ⚠ 배너 자체의 규칙은 app.css의 .hero-note*가 갖는다. 여기서는 목록과의 간격만 잡는다. */
.qnp-make { margin-bottom: var(--s-lg); }  /* 간격 눈금(4/8/12/16/20/24/32) 안에서 — tokens.css */

.qnp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.qnp-item {
  display: block; padding: var(--s-lg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  /* 🔴 <b>움직이는 것은 transform·그림자·테두리색뿐이다</b> — 폭·여백·글자 크기를 건드리면
     되돌아온 카드가 한 픽셀 어긋나 보이고, 목록 전체가 함께 다시 배치된다(reflow).
     transform은 배치를 다시 계산하지 않으므로 옆 카드가 밀리지 않는다. */
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

/* 손이 얹힌 카드 — «살짝» 커지고 테두리가 서고 그림자가 한 겹 뜬다(사용자 지시).
   🔴 배율은 <b>1.012</b>다. 390 화면에서 카드 폭이 358px이니 커지는 양은 좌우 각 2.1px —
      `.main`의 좌우 패딩(16px) 안에 들어가 <b>가로 스크롤이 생기지 않는다</b>(실측).
      1.03쯤 주면 글자가 다시 래스터되며 한순간 흐려 보인다 — «살짝»의 상한이 여기다.
   🔴 유채색은 브랜드 파랑 하나다(design.md L33). 이 지면의 다른 파랑(「지금 상담노트」 글자)은
      가만히 있고, 이 테두리는 <b>커서 아래에서만</b> 나타났다 사라지므로 둘이 겹쳐 읽히지 않는다.
   ⚠ 키보드에는 hover가 없다 — `:focus-visible`에 <b>같은 상태</b>를 준다. 한쪽만 주면
     탭으로 넘기는 사람에게는 어느 카드에 서 있는지 보이지 않는다.
   ⚠ `@media (hover: hover)`로 감싸지 않았다. 손가락으로 누르면 그 탭이 곧 이동이라 남는
     hover가 화면에 머무는 시간이 «이동 중»뿐이고, 그동안은 오히려 <b>무엇을 눌렀는지</b>를
     보여 준다. 감싸려면 선언 한 벌을 복제해야 하는데, 그 복제가 언젠가 한쪽만 늙는다. */
.qnp-item:hover,
.qnp-item:focus-visible {
  transform: scale(1.012);
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(49, 130, 246, .10);
  outline: none;   /* 테두리·그림자가 초점 표시를 대신한다(윤곽선이 겹쳐 두 겹이 되지 않게) */
}
/* 누르는 순간에는 <b>도로 들어간다</b> — brief.css의 `.iw-opt:active`(0.985)와 같은 문법이다.
   커지기만 하고 눌리지 않으면 «눌렀다»는 손맛이 없다. */
.qnp-item:active { transform: scale(0.995); }

/* 🔴 움직임을 줄여 달라고 한 사람에게는 <b>움직이지 않는다</b>(WCAG 2.3.3).
   ⚠ 테두리·그림자는 남긴다 — 그것까지 지우면 «어느 카드에 손이 얹혔는지»를 잃는다.
     끄는 것은 «움직임»이지 «표시»가 아니다. */
@media (prefers-reduced-motion: reduce) {
  .qnp-item { transition: border-color 140ms ease, box-shadow 140ms ease; }
  .qnp-item:hover,
  .qnp-item:focus-visible,
  .qnp-item:active { transform: none; }
}
.qnp-item-t {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-heading); font-weight: var(--fw-semibold); line-height: var(--lh-heading);
  color: var(--text-primary); letter-spacing: var(--ls-14);
  overflow: hidden; word-break: keep-all;   /* 한 줄 말줄임(«…시작해도 »)은 360·390에서 늘 잘렸다 → 2줄 클램프(질문하기 P2, 타이포 C3 묶음 2 규칙) */
}
/* 메타 줄 — 항목 사이 구분은 가운뎃점 하나다(기호를 늘리면 상태 배열이 된다). */
.qnp-item-m {
  display: block; margin-top: 5px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); font-weight: var(--fw-regular);
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.qnp-item-m > span + span::before { content: " · "; }
.qnp-cur { color: var(--primary); }
/* 본문 두 줄 — 자르지 않고 접는다(문장 중간에서 끊기면 뜻이 바뀐다). */
.qnp-item-b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular);
  color: var(--text-secondary); word-break: keep-all;
}

@media (max-width: 560px) {
  .qnp-item { padding: 14px 15px; }
}

/* 2단계의 «선택한 상담노트» — 라디오가 없으므로 펼침을 직접 켠다(D-677 ⑨).
   ⚠ `input:checked ~ .qna-note-card` 규칙과 **같은 모양**이어야 한다. 갈라지면 고르기 화면에서
     본 카드와 확인 화면의 카드가 다른 물건처럼 보인다.
   호버/포커스 시 줄임(2줄)을 풀어 카드 **안**에서 전문을 읽게 한다 — 검은 오버레이 팁은 쓰지 않는다. */
.qnw-picked { cursor: default; }
.qnw-picked .qna-note-card {
  background: var(--surface); border-color: var(--tint-blue-line); padding: var(--s-md) 13px;
  box-shadow: 0 1px 2px rgba(17, 31, 40, .04);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.qnw-picked .qna-note-kv {
  display: grid; grid-template-columns: 78px 1fr; gap: 7px 10px; margin-top: 10px;
}
.qnw-picked:hover .qna-note-card,
.qnw-picked:focus-within .qna-note-card {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(17, 31, 40, .08);
}
/* 기본 2줄 → 호버/포커스 시 카드 안에서 전문(길면 스크롤).
   🔴 white-space: pre-line — 상담노트에 저장된 \n을 살린다. 없으면 한 덩어리로 붙어
      날짜·질문 번호가 읽히지 않는다(운영 실측). pre-wrap이 아니라 pre-line인 이유:
      연속 공백은 접고 줄바꿈만 살린다(프로필 intro와 같은 계약). */
.qnw-picked:hover .qna-note-v,
.qnw-picked:focus-within .qna-note-v {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  max-height: 280px;
  overflow: auto;
  padding-right: var(--s-xs);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.qnw-picked:hover .qna-note-k,
.qnw-picked:focus-within .qna-note-k {
  align-self: start;
  padding-top: 1px;
}
.qnw-picked:hover .qna-note-kv,
.qnw-picked:focus-within .qna-note-kv {
  gap: 10px var(--s-md);
}
.qnw-repick { margin-left: auto; flex: none; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--primary); white-space: nowrap; }

@media (max-width: 560px) {
  .qnw-picked .qna-note-kv { grid-template-columns: 70px 1fr; }
  .qnw-picked:hover .qna-note-v,
  .qnw-picked:focus-within .qna-note-v { max-height: 220px; }
}



/* ══ D-836 B · Split Desk — 세무사 답변 작업대 (overflow 수정) ═══════════ */
.qna-tax-desk{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin:var(--s-lg) 0 var(--s-sm);
  width:100%;
  max-width:100%;
}
.qna-case-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  position:sticky;
  top:12px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}
.qna-case-h{
  margin:0 0 10px;
  font-size:var(--fs-caption1);
  line-height:var(--lh-caption1);
  font-weight:var(--fw-regular);
  color:var(--text-tertiary);
  letter-spacing:var(--ls-13);
}
.qna-case-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--s-xs);
  padding:10px 0;
  border-bottom:1px solid var(--grey100);
  min-width:0;
}
.qna-case-row:last-of-type{border-bottom:0}
.qna-case-row .qna-case-k{
  color:var(--text-tertiary);
  font-size:var(--fs-caption1);
  font-weight:var(--fw-regular);
  line-height:var(--lh-caption1);
  letter-spacing:var(--ls-13);
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.qna-case-row .qna-case-v{
  color:var(--text-primary);
  font-size:var(--fs-body2);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-body2);
  text-align:left;
  overflow-wrap:anywhere;
  word-break:keep-all;
}

.qna-tax-desk-main{
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
  overflow:hidden;
}
.qna-desk-ai{min-width:0;max-width:100%;overflow:hidden}
.qna-desk-ai .intake-card{margin:0;max-width:100%;overflow:hidden;box-sizing:border-box}
.qna-desk-pub{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px var(--s-lg);
  min-width:0;
}
.qna-desk-q{
  font-size:var(--fs-title3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-18);
  line-height:var(--lh-title3);
  margin:var(--s-sm) 0 6px;
  color:var(--text-primary);
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.qna-desk-q span:first-child{color:var(--primary);margin-right:var(--s-xs)}
.qna-desk-meta{display:flex;gap:var(--s-sm);flex-wrap:wrap}
.qna-desk-fold{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  min-width:0;
}
.qna-desk-fold>summary{
  list-style:none;
  cursor:pointer;
  padding:13px var(--s-lg);
  font-size:var(--fs-label2);
  line-height:var(--lh-label2);
  font-weight:var(--fw-semibold);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-md);
  background:var(--grey50);
  user-select:none;
}
.qna-desk-fold>summary::-webkit-details-marker{display:none}
/* 펼침 표시 — ▾·▴ 글리프는 라운드 서체에 없어 Pretendard를 더 받았다(D-892 검토) → 글자 «펼치기/접기» + SVG 쐐기(배경, 파랑 #3182F6 = --primary). */
.qna-desk-fold>summary::after{
  content:"펼치기";
  flex:none;
  font-size:var(--fs-label2);
  line-height:var(--lh-label2);
  font-weight:var(--fw-semibold);
  color:var(--primary);
  padding-right:14px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5l3.5 3.5 3.5-3.5' fill='none' stroke='%233182F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 10px no-repeat;
}
.qna-desk-fold[open]>summary::after{content:"접기";background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 6.5l3.5-3.5 3.5 3.5' fill='none' stroke='%233182F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.qna-desk-fold-cap{margin:0 0 6px;font-weight:var(--fw-semibold)}
.qna-desk-fold-b{
  padding:var(--s-md) var(--s-lg) var(--s-lg);
  border-top:1px solid var(--border);
  min-width:0;
}
.qna-desk-fold-b .qna-source-t,
.qna-desk-fold-b .qna-source-b{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:keep-all;
  white-space:pre-wrap;
}
.qna-tax-desk .qna-answer-form{margin:0;min-width:0;max-width:100%}
.qna-ans-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:var(--s-md);
  flex-wrap:wrap;
}
.qna-ans-foot .qna-answer-count{
  margin:0;
  margin-right:auto;
  text-align:left;
  font-size:var(--fs-caption1);
  line-height:var(--lh-caption1);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-13);
  color:var(--text-tertiary);
}
.qna-ans-foot .qna-answer-count.near{color:var(--warning-dark)}
.qna-ans-foot .qna-answer-count.over{color:var(--error);font-weight:var(--fw-semibold)}
.qna-ans-foot .btn{
  height:48px;
  padding:0 22px;
  border-radius:var(--r-md);
  font-size:var(--fs-label1);
  line-height:var(--lh-label1);
  font-weight:var(--fw-semibold);
  min-width:120px;   /* «답변 등록»·«수정 저장» 네 자 — nowrap 대신 최소 폭 + 좌우 여백(§3-4) */
  flex:none;
}
@media (max-width:900px){
  .qna-tax-desk{grid-template-columns:1fr}
  .qna-case-card{position:static}
}


/* ══ D-836c — AI·원문을 B 시안 톤에 맞춤 ════════════════════════════════ */
.qna-desk-ai{position:relative}
.qna-ai-h{
  font-size:var(--fs-caption1);line-height:var(--lh-caption1);font-weight:var(--fw-semibold);color:var(--primary-pressed);
  letter-spacing:var(--ls-13);margin:0 0 var(--s-sm);
}
.qna-desk-ai .intake-card{
  background:var(--surface) !important;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px;
  margin:0;
}
.qna-desk-ai .intake-head{display:none}
/* AI 고지(«…세무 자문이 아니며, 정확한 판단은 세무사 상담에서 확정돼요.»)는 작업대에서도 **보인다**(3차 정리, 사용자 답 ④ —
   D-836c가 B 시안 톤에 맞춘다며 여기서 display:none으로 가렸던 것을 뒤집었다). 모양은 채팅방·예약 상세 카드와 같은
   annotate.css .intake-disclaimer 그대로다(12px·3차 잉크·위 12px) — 여기서 다시 칠하거나 숨기지 마라(Q&A 작업대 고지 시험). */
.qna-desk-ai .intake-summary{
  font-size:var(--fs-title3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-18);line-height:var(--lh-title3);
  color:var(--text-primary);margin:0 0 var(--s-xs);
}
.qna-desk-ai .intake-num{display:none}
.qna-desk-ai .intake-h{
  font-size:var(--fs-caption1);line-height:var(--lh-caption1);letter-spacing:var(--ls-13);font-weight:var(--fw-semibold);color:var(--text-tertiary);
  margin:14px 0 6px;
}
.qna-desk-ai .intake-sec li{
  font-size:var(--fs-body2);line-height:var(--lh-body2);color:var(--text-secondary);margin:5px 0;
}
.qna-desk-ai .intake-qtag{
  display:inline-block;font-size:var(--fs-caption1);line-height:var(--lh-caption1);font-weight:var(--fw-semibold);letter-spacing:var(--ls-13);
  padding:2px var(--s-sm);border-radius:6px;background:var(--primary-light);color:var(--primary-pressed);
  margin-left:6px;vertical-align:1px;
}
.qna-desk-ai .intake-sec-gap{
  background:var(--primary-light);border-radius:14px;padding:14px var(--s-lg);margin-top:14px;
}
.qna-desk-ai .intake-sec-gap .intake-h{color:var(--primary-pressed);margin-top:0}
.qna-desk-fold:not([open])>.qna-desk-fold-b{display:none}

/* D-836d — 원문·상담노트 가독성: 제목 위계 + 본문 확대 (desk fold만) */
.qna-desk-fold>summary{
  font-size:var(--fs-title3);
  line-height:var(--lh-title3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-18);
  padding:15px var(--s-lg);
}
.qna-desk-fold-cap{
  margin:0 0 var(--s-sm);
  font-size:var(--fs-heading) !important;
  font-weight:var(--fw-semibold) !important;
  letter-spacing:var(--ls-14);
  color:var(--text-primary) !important;
  line-height:var(--lh-heading);
}
.qna-desk-fold-b .qna-source-t{
  font-size:var(--fs-title3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-18);
  line-height:var(--lh-title3);
  margin-top:var(--s-xs);
  color:var(--text-primary);
}
.qna-desk-fold-b .qna-source-b{
  font-size:var(--fs-body1);
  line-height:var(--lh-body1);
  font-weight:var(--fw-regular);
  margin-top:var(--s-sm);
  color:var(--grey800);
}
.qna-desk-q{
  font-size:var(--fs-title2);
  line-height:var(--lh-title2);
}
.qna-case-row.side-by-side{
  flex-direction:row;justify-content:space-between;align-items:flex-start;gap:10px;
}
.qna-case-row.side-by-side .qna-case-k{flex:0 1 42%;max-width:42%}
.qna-case-row.side-by-side .qna-case-v{flex:1;text-align:right}

/* ══ D-836e — 세무사 상세 전폭 활용 ═══════════════════════════════════════
   세무사(taxSolo)에게는 오른쪽 «상담 가능 세무사» 레일(.qna-side)을 안 그린다(D-562).
   그런데 .qna-split 은 여전히 2열(글 + clamp 236~272px)이라 **빈 오른쪽 트랙**이 남아
   본문이 자주 개행되고 우측이 허전해 보였다. 레일이 없을 때는 1열로 풀고,
   작업용 본문 폭(66ch 독서 한도)도 풀어 카드 안쪽까지 쓴다. 의뢰인(레일 있음)은 그대로. */
.qna-split:not(:has(> .qna-side)){
  grid-template-columns:minmax(0,1fr);
}
.qna-split:not(:has(> .qna-side)) .qna-question-body{
  max-width:none;
}
.qna-split:not(:has(> .qna-side)) .qna-question{
  padding-left:36px;
  padding-right:36px;
}
.qna-split:not(:has(> .qna-side)) .qna-tax-desk{
  width:100%;
}
@media (max-width:1100px){
  .qna-tax-desk{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:14px}
}


/* ══ D-837 — Split Desk polish (케이스|AI 쌍 · 여백 · 상태 중복은 HTML) ════════ */
.qna-tax-desk{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
  margin:var(--s-lg) 0 var(--s-sm);
  width:100%;
  max-width:100%;
}
.qna-tax-desk-top{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
  width:100%;
  min-width:0;
}
.qna-tax-desk-top:not(:has(> .qna-desk-ai)){
  grid-template-columns:minmax(0,300px);
}
.qna-tax-desk-rest{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
  min-width:0;
  width:100%;
}
.qna-tax-desk .qna-case-card{
  position:static; /* 위 쌍만 쓰므로 sticky 불필요 — 높이 맞춤 우선 */
  height:100%;
  padding:18px var(--s-xl) var(--s-lg);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
.qna-tax-desk .qna-case-h{
  margin:0 0 var(--s-md);
  font-size:var(--fs-caption1);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-13);
  line-height:var(--lh-caption1);
  min-height:var(--lh-caption1);
  color:var(--text-tertiary);
}
.qna-desk-ai{
  height:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px var(--s-xl) var(--s-lg); /* 케이스 카드와 같은 안쪽 여백 */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.qna-desk-ai .qna-ai-h{
  margin:0 0 var(--s-md);
  font-size:var(--fs-caption1);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-13);
  line-height:var(--lh-caption1);
  min-height:var(--lh-caption1);
  color:var(--primary-pressed);
}
.qna-desk-ai .intake-card{
  flex:1;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  max-width:100%;
  overflow:hidden;
}
.qna-desk-ai .intake-summary{
  margin-top:0;
}
.qna-desk-ai .intake-sec-gap{
  padding:14px 18px; /* 좌측 몰림 완화 */
  margin-top:14px;
}
.qna-desk-ai .intake-sec ul.intake-gaps,
.qna-desk-ai .intake-gaps{
  list-style:none !important;
  padding-left:0 !important;
}
.qna-desk-ai .intake-gaps > li::before{
  content:'· ';
  color:var(--primary);
  font-weight:var(--fw-semibold);
}
@media (max-width:900px){
  .qna-tax-desk-top{grid-template-columns:1fr}
}
/* 🔴 900.02~1100만(질문하기 P2, 2026-10-11) — 옛 (max-width:1100px)이 위 900 규칙 뒤에 와서 폰에서도 두 열이 됐고,
   AI 첨삭 칸이 360에서 52px·390에서 82px로 눌려 «AI 첨삭 요약 [펼치기]»가 세로로 흘렀다(6폭 점검). */
@media (min-width:900.02px) and (max-width:1100px){
  .qna-tax-desk-top{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:14px}
}


/* ══ D-838 — 원문·상담노트 좌우 병치(기본 펼침) · 타이포 +2 · 흰 답변폼 ════════
   시안 B 대비 폰트를 두 단계 키움. 좌=상담노트(그린), 우=질문원문(블루).
   D-838b — 원문·상담노트 패널 본문만 한 단계 하향 (캡·제목·본문). */
.qna-desk-fold>summary{
  font-size:var(--fs-title2);
  line-height:var(--lh-title2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-18);
  padding:var(--s-lg) 18px;
}
.qna-desk-fold-b.qna-desk-fold-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0;
  border-top:1px solid var(--border);
}
.qna-desk-fold-b.qna-desk-fold-split:not(:has(> .qna-fold-pane + .qna-fold-pane)){
  grid-template-columns:1fr; /* 한쪽만 있으면 전폭 */
}
.qna-fold-pane{
  padding:18px var(--s-xl) 22px;
  min-width:0;
  box-sizing:border-box;
}
.qna-fold-pane + .qna-fold-pane{
  border-left:1px solid var(--border);
}
.qna-fold-pane.is-note{
  background:var(--tint-green-bg);
}
.qna-fold-pane.is-src{
  background:var(--surface-tint);
}
.qna-fold-pane .qna-desk-fold-cap{
  margin:0 0 10px;
  font-size:var(--fs-heading) !important;
  font-weight:var(--fw-semibold) !important;
  letter-spacing:var(--ls-14);
  line-height:var(--lh-heading);
  display:flex;
  align-items:center;
  gap:7px;
}
.qna-fold-pane.is-note .qna-desk-fold-cap{color:var(--tint-green-ink) !important}
.qna-fold-pane.is-src .qna-desk-fold-cap{color:var(--primary-pressed) !important}
.qna-fold-pane .qna-desk-fold-cap::before{
  content:"";
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
.qna-fold-pane .qna-source-t{
  font-size:var(--fs-title2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-18);
  line-height:var(--lh-title2);
  margin:0 0 var(--s-md);
  color:var(--text-primary);
  overflow-wrap:anywhere;
  word-break:keep-all;
}
/* 작업대 질문 원문 = title3 크기(18) · body1 행간(28) · 400 — D-838 +2 뜻 유지(사용자 2026-10-03 «추천대로, 작업대 18»).
   세무사가 원문을 크게 읽는 자리라 «읽는 글» body1(16)보다 한 치수 위 토큰을 쓰고, 행간은 읽는 글 그대로(28 = 4px 리듬).
   서체는 위 .qna-source-b의 var(--serif-read)(나눔명조) 그대로 — 여기서 다시 적지 마라. 자간은 크기 곡선(17~20px = --ls-18).
   옛 값 19px/1.78(≈33.8px)은 타입 스케일 밖이라 가장 가까운 토큰으로(QnaTypeScaleContractTest). */
.qna-fold-pane .qna-source-b{
  font-size:var(--fs-title3);
  line-height:var(--lh-body1);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-18);
  margin:0;
  color:var(--grey800);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
/* 데스크 작업 영역 타이포도 한 단계 맞춤(시안 «전체적으로») — 토큰 한 단 위로(C3 묶음 2) */
.qna-desk-ai .intake-summary{font-size:var(--fs-title2);line-height:var(--lh-title2)}
.qna-desk-ai .intake-h{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-14)}
.qna-desk-ai .intake-sec li{font-size:var(--fs-body1);line-height:var(--lh-body1)}
.qna-desk-ai .qna-ai-h{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-14);min-height:var(--lh-heading)}
.qna-tax-desk .qna-case-h{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-14);min-height:var(--lh-heading)}
.qna-tax-desk .qna-case-row .qna-case-k{font-size:var(--fs-body2);line-height:var(--lh-body2);letter-spacing:var(--ls-14)}
.qna-tax-desk .qna-case-row .qna-case-v{font-size:var(--fs-heading);line-height:var(--lh-heading)}
/* 케이스 카드 «한눈 요약»(2026-10-06 사용자 결정) — 제목 아래 한 줄. 글자는 마크업의 .st-body2·.st-semibold, 여기는 배치만.
   줄은 항목 사이(가운뎃점 뒤 공백)에서만 바뀐다 — 항목은 nowrap이라 «2019년 / 3월»처럼 갈라지지 않는다. */
.qna-case-glance{margin:0;padding:0 0 10px;border-bottom:1px solid var(--divider);color:var(--text-primary)}
.qna-case-glance-i{white-space:nowrap}
.qna-desk-q{font-size:var(--fs-title2);line-height:var(--lh-title2)}
.qna-desk-pub .qna-desk-meta{font-size:var(--fs-body2);line-height:var(--lh-body2)}
/* 답변 폼 — 카드·입력칸 모두 흰색 (app.css .input의 surface-alt 회색 덮기) */
.qna-tax-desk .qna-answer-form,
.qna-answer-form.is-write,
.qna-answer-form{
  background:var(--surface) !important;
}
.qna-tax-desk .qna-answer-input,
.qna-answer-form .qna-answer-input{
  background:var(--surface) !important;   /* 크기·행간·높이는 위 .qna-answer-input(body1 · 308px) 하나 — 여기서 다시 적지 마라 */
}
.qna-ans-head .t-label1{font-size:var(--fs-title3);line-height:var(--lh-title3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-18)}
.qna-ans-due{font-size:var(--fs-caption1);line-height:var(--lh-caption1);letter-spacing:var(--ls-13)}
@media (max-width:900px){
  .qna-desk-fold-b.qna-desk-fold-split{grid-template-columns:1fr}
  .qna-fold-pane + .qna-fold-pane{border-left:0;border-top:1px solid var(--border)}
}


/* ══ 질문하기 P1 (사용자 승인 2026-10-11 — P0 검토 /tmp/semtalk-ask-p0.md ①~⑧) ═══════════════════════
   글자 13px↑ · 400/600 · 토큰 색만(§4 정리와 같은 규칙). 단계 표시(.qna-steps)는 app.css — brief-new(brief.css)도 그린다. */

/* ⑤ 2단계 «선택한 상담노트» 띠 — 옛 히어로 판(≈360px) 대신 한 줄. 펼치면(details) 요약 줄과 공개 범위 고지. */
.qnw-note {
  container-type: inline-size; container-name: qnwnote;   /* 아래 @container — 좁으면 제목을 둘째 줄로(질문하기 P2) */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-lg);
  padding: var(--s-md) var(--s-lg); margin-bottom: var(--s-lg);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.qnw-note-d { flex: 1 1 260px; min-width: 0; }
.qnw-note-d[open] { flex-basis: 100%; }
.qnw-note-sum {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s-sm); min-width: 0;
  font-size: var(--fs-label2); line-height: var(--lh-label2); color: var(--text-secondary);
}
.qnw-note-sum::-webkit-details-marker { display: none; }
.qnw-note-k { flex: none; }
.qnw-note-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text-primary); }
.qnw-note-when { flex: none; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.qnw-note-open { flex: none; display: inline-flex; align-items: center; gap: var(--s-xs); font-weight: var(--fw-semibold); color: var(--primary); }
.qnw-note-open::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.qnw-note-d[open] .qnw-note-open::after { transform: rotate(-135deg) translateY(2px); }
.qnw-note-body { margin-top: var(--s-md); padding-top: var(--s-md); border-top: 1px solid var(--divider); }
.qnw-note-body .qna-note-foot { margin: var(--s-sm) 0 0; }
/* 질문하기 P2(2026-10-11) — 360·390에서 «선택한 상담노트 · 제목 · 날짜 · 내용» 한 줄이 제목에 50·80px만 남겨 «스마…»였다.
   칸이 479px 아래면 머리말·날짜·[내용]이 첫 줄, 제목은 둘째 줄 전체(2줄 클램프). 그 위는 한 줄 그대로. */
@container qnwnote (max-width: 479px) {
  .qnw-note-sum { flex-wrap: wrap; }
  .qnw-note-t { order: 9; flex: 1 0 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; }
  .qnw-note-when { margin-left: auto; }
}
/* 초안 캡션(작은 것 ⑤) */
.qna-doc-draft { margin: 0 0 var(--s-sm); font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); word-break: keep-all; }
/* ⑤ 분야 칩 — 900 미만은 한 줄 가로 스크롤, 고른 칩이 맨 앞(order). PC는 두 줄 그대로.
   🔴 contain: paint — 모바일 레이아웃 뷰포트가 nowrap 줄의 폭(≈780px)으로 넓어져 상단바가 깨지던 것(실측). */
@media (max-width: 899px) {
  .qna-cats { flex-wrap: nowrap; overflow-x: auto; width: 0; min-width: 100%; contain: paint; scrollbar-width: none; padding-bottom: 2px; }
  .qna-cats::-webkit-scrollbar { display: none; }
  .qna-cat { flex: none; }
  .qna-cat:has(> input:checked) { order: -1; }
}

/* ② 전달 확인 — 사실 두 줄(24시간 · 30분 + 알림). 금액 줄은 두지 않는다(사용자 지정). */
.qna-final-next { margin-top: var(--s-lg); padding: var(--s-md) var(--s-lg); border-radius: var(--r-md); background: var(--primary-light); color: var(--text-primary); }
.qna-final-next p { margin: 0; font-size: var(--fs-label2); line-height: var(--lh-label2); word-break: keep-all; }
.qna-final-next p + p { margin-top: var(--s-xs); }
.qna-final-next-t { font-weight: var(--fw-semibold); }
/* 미리보기 잘림(작은 것 ①) — 제목은 줄바꿈되는 칸, 본문은 내용만큼(field-sizing 되는 브라우저). */
textarea.qna-final-title.qna-final-edit { resize: none; overflow: hidden; min-height: 0; field-sizing: content; white-space: pre-wrap; }
textarea.qna-final-body.qna-final-edit { field-sizing: content; }

/* ⑦ 세무사 R 대기판 — 판 안의 큰 버튼 하나(설명문 없음, 사용자 지정). */
.qna-wait-cta { margin: var(--s-md) 0 0; }
.qna-wish-big { width: 100%; height: 48px; font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); border-radius: var(--r-md); }

/* ③ 잠긴 답이 남아 있을 때의 채택 캡션 */
.qna-adopt-locked { align-self: center; }

/* 대기판 링 색 — 인라인 hex 대신 토큰 */
.qna-ring-track { stroke: var(--primary-light); }
.qna-ring-fill { stroke: var(--primary); }

/* ⑥ 작업대 — AI 첨삭 접이(details). PC는 펼침 그대로(D-838), 900 미만은 qna.js가 접고 summary가 «펼치기/접기»를 단다. */
details.qna-desk-ai > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
details.qna-desk-ai > summary::-webkit-details-marker { display: none; }
details.qna-desk-ai:not([open]) > summary { margin: 0; min-height: 0; }
@media (max-width: 899px) {
  details.qna-desk-ai > summary::after {
    content: "펼치기"; flex: none; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--primary); padding-right: 14px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5l3.5 3.5 3.5-3.5' fill='none' stroke='%233182F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 10px no-repeat;
  }
  details.qna-desk-ai[open] > summary::after { content: "접기"; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 6.5l3.5-3.5 3.5 3.5' fill='none' stroke='%233182F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
/* ⑥ 900 미만 하단 고정 «답변 쓰기» 바 — 폼이 보이면 qna.js가 감춘다(hidden). PC는 없다. */
.qna-desk-jump { display: none; }
@media (max-width: 899px) {
  .qna-desk-jump {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--s-md);
    padding: var(--s-md) var(--s-lg) calc(var(--s-md) + env(safe-area-inset-bottom));
    background: var(--surface); box-shadow: 0 -1px 0 var(--border);
  }
  .qna-desk-jump[hidden] { display: none; }
  .qna-desk-jump > span { flex: 1; min-width: 0; font-size: var(--fs-label2); line-height: var(--lh-label2); color: var(--text-secondary); }
  .qna-desk-jump .btn { flex: none; }
  .qna-tax-desk { padding-bottom: 72px; }
}

/* ══ D-947 — 세무사 시점 폰 정리(세무사 화면 개선 앱 레인 1번 → 터미널, 사용자 승인 2026-10-11) ══════════════════
   ① 상태 칩은 한 덩어리 — 버튼과 나란히 못 서면 줄이 바뀐다(옛 390에서 «답변 세무사 모집 / 중 · 제출 23시간 / 남음» 세 줄).
   ② 목록 줄의 세무사 상태는 폰에서 제 줄(옛 «· 답변 희망 가능»이 줄머리 «·»로 남았다).
   ③ 답변 폼 바닥 — 폰에서 예상 수수료가 제 줄 전폭(옛 78px 칸 + «원»).
   ④ 내 답변 카드의 «55,000원»은 한 덩어리.
   ⑤ 폰에서 케이스 카드는 전폭(옛 300px 상한이 폰에도 걸려 오른쪽이 비었다). */
.qna-st-br { display: none; }
.qna-state-row { flex-wrap: wrap; row-gap: var(--s-sm); }
.qna-state-row .qna-state { white-space: nowrap; max-width: 100%; }
.qna-ans-fee-n { white-space: nowrap; }
@media (max-width: 600px) {
  /* 줄 상태는 제 줄 — 빈 칸 하나가 줄을 바꾼다(부제 줄 조각에는 폭·기준 폭을 주지 않는다, N1). */
  .qna-st-br { display: block; flex-basis: 100%; height: 0; }
  .qna-st-in .qna-st-sep { display: none; }
  .qna-ans-foot .qna-fee-row { order: -1; flex-basis: 100%; }
  .qna-ans-foot .qna-fee-row .input { max-width: none; flex: 1 1 auto; }
  .qna-tax-desk-top, .qna-tax-desk-top:not(:has(> .qna-desk-ai)) { grid-template-columns: minmax(0, 1fr); }
}

/* ══ D-975 — 메인 3종 손질 2주차(사용자 승인 2026-10-17) ═══════════════════════════════════════════════
   글자는 토큰만 · 굵기 400/600 · 색은 토큰 · 움직임 없음(design.md §7 — S4 화면 전환 모션은 승인 안 됨). */

/* Q5 분야 접기 — 노트에서 가져온 분야면 한 줄(값 · «상담노트에서 골랐어요» · [바꾸기]). 누르면 칩 아홉이 펼쳐진다(details). 누름 높이 44(§4). */
.qna-cat-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-xs) var(--s-sm);
  min-height: 44px; padding: 11px 0; margin: -11px 0 0; border-radius: var(--r-sm);
}
.qna-cat-fold > summary::-webkit-details-marker { display: none; }
.qna-cat-fold > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qna-cat-fold-v { font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); color: var(--text-primary); }
.qna-cat-fold-k { font-size: var(--fs-label2); line-height: var(--lh-label2); color: var(--text-tertiary); }
.qna-cat-fold-k[hidden] { display: none; }
.qna-cat-fold-a, .qna-cat-fold-c {
  margin-left: auto; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--primary);
}
.qna-cat-fold-c { display: none; }
.qna-cat-fold[open] .qna-cat-fold-a { display: none; }
.qna-cat-fold[open] .qna-cat-fold-c { display: inline; }
.qna-cat-fold > .qna-cats { margin-top: var(--s-xs); }

/* Q3 · S5 하단 고정 줄 — 쓰기의 상태줄(.qna-doc-bar)과 전달 확인의 버튼 줄(.qna-final-actions)이 화면 바닥에 붙어 따라온다.
   position: sticky라 카드(지면) 끝에 닿으면 제자리다 — PC는 «카드 바닥에 붙어 따라오고», 내용이 짧으면 원래 자리 그대로.
   바탕 흰 면 + 위 가는 줄(지도 상세 바닥 버튼 · 답변 바 .qna-desk-jump와 같은 문법). 노치 기기 안전 영역(§6).
   🔴 고정 줄이 초점 링·입력 칸을 가리지 않게 문서에 scroll-padding-bottom(design.md §4 «가리는 sticky 금지») — 값은 줄 높이 + 여유. */
.qna-doc-bar {
  position: sticky; bottom: 0; z-index: 5; background: var(--surface);
  padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
  border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg);
}
html:has(.qna-doc-bar) { scroll-padding-bottom: 88px; }
.qna-final-actions {
  position: sticky; bottom: 0; z-index: 5; background: var(--surface);
  margin-top: var(--s-xl); padding: var(--s-md) 0 calc(var(--s-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
html:has(.qna-final-actions) { scroll-padding-bottom: 96px; }
@media (max-width: 520px) {
  /* 폰 — 글자 수 한 줄 위, 그 아래 [돌아가기][문의하기] 반반 54px(.act-pair와 같은 값 — design.md §4 · D-880 P-073). */
  .qna-doc-bar { flex-direction: column; align-items: stretch; gap: var(--s-sm); padding-top: 10px; padding-bottom: calc(var(--s-md) + env(safe-area-inset-bottom, 0px)); }
  .qna-doc-actions { width: 100%; }
  .qna-doc-actions > .btn { flex: 1 1 0; min-width: 0; height: 54px; font-size: var(--fs-label1); line-height: var(--lh-label1); }
  html:has(.qna-doc-bar) { scroll-padding-bottom: 128px; }
  /* 전달 확인 — 화면 끝까지(본문 좌우 16px을 되민다). */
  .qna-final-actions { margin-inline: -16px; padding-inline: var(--s-lg); }
  html:has(.qna-final-actions) { scroll-padding-bottom: 104px; }
}

/* Q6 전달 확인 테두리 한 겹 — 바깥 카드 틀을 걷었다(흰 지면). 테두리 있는 물건은 미리보기 카드(.qna-final-post) 하나(D-489).
   «전달하면 이렇게 돼요»는 파란 면 대신 가는 줄 위 두 줄. 여백은 8px 리듬. */
.qna-final { padding: var(--s-xs) 0 0; }
.qna-final-next { margin-top: var(--s-lg); padding: 14px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--divider); }

/* 질문 공개 범위. 비공개를 고르면 검색 노출 안내는 숨긴다. */
.qna-vis {
  margin: var(--s-lg) 0 0; padding: 14px 14px var(--s-md); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
}
.qna-vis-k { font-weight: var(--fw-semibold); font-size: var(--fs-body2); line-height: var(--lh-body2); margin-bottom: var(--s-sm); }
.qna-vis-opt { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-lg); font-weight: var(--fw-semibold); font-size: var(--fs-body2); line-height: var(--lh-body2); }
.qna-public-notice {
  margin: var(--s-md) 0 0; padding: var(--s-md) 14px; border-radius: var(--r-md);
  background: #fff4df; border: 1px solid #e7c98a; color: #6a4b12;
  font-weight: var(--fw-semibold); font-size: var(--fs-body1); line-height: var(--lh-body1);
}
.qna-vis:has(input[value="private"]:checked) .qna-public-notice { display: none; }
/* 비공개를 고를 때만. 쓰기 화면(.qna-vis 안)에서는 기본 숨김, 확인 화면은 서버가 비공개일 때만 그린다. */
.qna-private-preview {
  margin: var(--s-md) 0 0; padding: var(--s-md) 14px; border-radius: var(--r-md);
  background: #fff4df; border: 1px solid #e7c98a; color: #6a4b12;
  font-weight: var(--fw-semibold); font-size: var(--fs-body1); line-height: var(--lh-body1);
}
.qna-vis .qna-private-preview { display: none; }
.qna-vis:has(input[value="private"]:checked) .qna-private-preview { display: block; }
.qna-private-note { margin: var(--s-md) 0 0; color: var(--text-secondary); font-size: var(--fs-body2); line-height: var(--lh-body2); }