/* 세무 Q&A — 목록·상세·작성·수정 전용 (v1.0 개편: L-01~06 · D-01~04 · W-01~04).
   질문·UI는 Pretendard, 답변 본문만 Nanum Myeongjo(§4·§6). 색은 §8 토큰을 리터럴로 쓴다
   (채택 남색 #14243D 등은 공용 tokens.css에 없다 — 이 지면 고유색이라 여기 둔다). */

/* ══════════════════════════════════════════════════════════════ 목록(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: 8px; }

/* ── 돋보기 접이 검색 (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: 12px;
  box-shadow: 0 8px 24px rgba(17, 31, 40, .12); padding: 10px;
}

/* 검색 폼 — 접이 팬 안에서 인풋+버튼 한 줄. */
.qna-search { display: flex; gap: 8px; }
.qna-search-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px;
  background: var(--surface-alt); border: 1px solid transparent; font-size: 15px; color: var(--text-primary);
}
.qna-search-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.qna-search-btn {
  height: 44px; padding: 0 16px; border-radius: 10px; background: var(--primary); color: #fff;
  font-size: 14.5px; font-weight: 700; 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: 8px; margin-bottom: 8px; }
.qna-toolbar .qna-rail-wrap { flex: 1; min-width: 0; margin-bottom: 0; }
.qna-pgr { flex: none; display: flex; align-items: center; gap: 4px; }
.qna-pgr-n {
  font-size: 12.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
  margin-right: 4px; white-space: nowrap;
}
.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);
  font-size: 17px; line-height: 1; color: var(--text-secondary);
}
.qna-pgr-btn:hover { border-color: var(--grey300); }
.qna-pgr-btn.off { color: var(--grey300); background: var(--grey50); pointer-events: none; }

/* 분야 레일 — 한 줄 overflow-x + 우측 페이드 + › 버튼. */
.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: 34px; padding: 0 14px; flex: none;
  border-radius: var(--r-full); background: var(--surface-alt); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.qna-chip.on { background: #EFF6FF; border-color: var(--primary); color: #1B5FD1; font-weight: 700; }
/* 우측 페이드(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), #fff 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: #fff; color: var(--text-secondary); font-size: 20px; 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; }

/* 분야 드롭다운(모바일) — 기본은 숨김, 좁은 화면에서만 켠다. */
.qna-cat-select { display: none; gap: 8px; margin-bottom: 6px; }
.qna-cat-select select {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--r-md);
  background: var(--surface-alt); border: 1px solid transparent; font-size: 15px; color: var(--text-primary);
}

/* 검색 피드백 — 검색 중일 때만 뜬다(D-369). */
.qna-count { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 12px; font-size: 13.5px; }
.qna-count-clear { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }

.qna-empty { text-align: center; color: var(--text-tertiary); padding: 40px 20px; }

/* ══ Q 컴팩트 행 (D-370, 2차 시안 03) — 2열 카드 그리드는 이 목록으로 대체됐다.
   .qna-card*·.qna-pill* 규칙은 마크업과 함께 지웠다(«조각과 CSS는 항상 함께», D-358 각주). */
.qna-qcl { border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; overflow: hidden; }
/* 행 여백은 사다리 실측으로 고른 값이다(D-554) — 14는 답답하고 19는 행 수를 깎는다. */
.qna-qc { display: flex; align-items: center; gap: 14px; padding: 17px 16px; min-width: 0; }
.qna-qc + .qna-qc { border-top: 1px solid #F2F4F6; }
.qna-qc:hover { background: var(--grey50); }

/* Q. 모노그램 — 세리프는 이 글자 하나뿐이다(지면 개성). 본문 서체에 섞지 마라.
   🔴 **읽음 표시는 :visited가 한다**(D-370, 사용자 지시: 읽은 글은 Q 색이 바뀐다) —
      JS·저장소 없이 브라우저 방문 기록이 원장이다. 안 읽음 파랑 → 읽음 grey400.
   ⚠ :visited에는 색 계열 속성만 허용된다(브라우저 프라이버시 제약) — 크기·굵기·투명도로
     구분하려 하지 마라, 조용히 무시된다. getComputedStyle도 이 색을 일부러 속인다 —
     검증은 픽셀(스크린샷)로만 된다. */
.qna-qm {
  flex: none; font-size: 22px; font-weight: 800; line-height: 1; color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
}
.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: #A9C6EE; }
.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: #A9C6EE; }
.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: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-qc-sub {
  font-size: 12.5px; color: var(--grey500); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-qc-right { display: flex; align-items: center; gap: 8px; flex: none; }
.qna-qc-faces { display: flex; align-items: center; }
.qna-hope { font-size: 12.5px; font-weight: 400; color: #1B5FD1; white-space: nowrap; }
.qna-hope-gray { color: var(--grey500); font-weight: 400; }

/* 페이지네이션 — 36px 정사각, 현재 페이지 솔리드. */
.qna-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.qna-page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.qna-page:hover { border-color: var(--grey300); }
.qna-page.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.qna-page-arrow { font-size: 18px; }
.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 32px;
  /* 🔴 윗변 띠는 **테두리**다(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: 12px; }
/* (은퇴) .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, #3182f6); outline-offset: 2px; border-radius: 10px;
}
.qna-own-btn i { width: 3px; height: 3px; border-radius: 50%; background: var(--grey500, #8B95A1); }
.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: 5px;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-float);
}
.qna-own-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 11px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--grey800, #333D4B);
  text-align: left;
}
.qna-own-item:hover { background: var(--grey50); }
.qna-own-item.is-danger { color: #C22636; }
.qna-own-item.is-danger:hover { background: #FDECEE; }
.qna-own-pop form { margin: 0; border-top: 1px solid var(--divider); }
.qna-own-ic { display: inline-flex; flex: none; }
.btn-xs { height: 34px; padding: 0 12px; font-size: 13px; }
.qna-danger { color: #DC2626; }
.qna-danger:hover { border-color: #DC2626; }
.qna-question-title { margin: 16px 0 18px; font-size: 24px; line-height: 36px; font-weight: 700;
  letter-spacing: var(--ls-xl); color: var(--text-primary); word-break: keep-all; }
/* 세리프 Q. — 목록 행(.qna-qm)과 같은 얼굴, 제목 크기에 맞춰 한 치수 크게(D-373). */
.qna-qm-lg {
  font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: 26px;
  color: var(--primary); margin-right: 10px;
}
.qna-question-body {
  /* D-495 — 오른쪽을 좁혀 생긴 폭을 **가독성으로 돌려준다**(사용자 지시).
     16.5px/30px는 15.5px/28px보다 한 단계 크고, 줄 간격 비율은 1.82로 넉넉하다.
     ⚠ max-width 66ch를 **지워서는 안 된다** — 넓어진 칼럼에서 줄이 길어지면 눈이 다음 줄
       머리를 못 찾는다. 폭이 늘어난 만큼 글자를 키우는 것이지, 줄을 늘리는 게 아니다. */
  font-size: 16.5px; line-height: 30px; 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 20px; }
  .qna-question-meta { margin-top: 20px; }
}

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

/* 답변 본문(명조). 로드 실패 시 폴백 서체로도 레이아웃이 안 깨진다(§10). */
.qna-answer-body {
  font-family: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  font-size: 16.5px; line-height: 31px; color: #1F2937; white-space: pre-line;
}

/* 세무사 명함. */
.qna-tax-card {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #F3F4F6; 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: 700; }
.qna-tax-id { min-width: 0; flex: 1; }
.qna-tax-actions { display: flex; gap: 8px; margin-left: auto; }

/* 채택/나머지 구분선. */
.qna-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color: var(--text-tertiary); font-size: 13px; }
.qna-divider::before, .qna-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }

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

/* 답변 작성 폼(세무사). */
.qna-write-answer { margin-top: 16px; }
.qna-answer-textarea { min-height: 160px; padding: 12px; line-height: 1.6; resize: vertical; }
.qna-answer-submit { display: flex; justify-content: flex-end; margin-top: 12px; }

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

/* ── 채택/삭제 확인 대화 ── */
.qna-modal {
  width: min(380px, calc(100vw - 32px)); padding: 0; border: none; border-radius: 16px;
  box-shadow: var(--shadow-float); background: #fff; color: var(--text-primary);
}
.qna-modal::backdrop { background: rgba(17,31,40,.45); }
.qna-modal-inner { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.qna-modal-title { font-size: 17px; font-weight: 700; letter-spacing: var(--ls-lg); }
.qna-modal-text { font-size: 14px; color: var(--text-secondary); margin: 0; }
.qna-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.qna-danger-btn { background: #DC2626; color: #fff; }
.qna-danger-btn:hover { background: #b91c1c; }

/* ══════════════════════════════════════════════════════════════ 상세 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: 32px;
  align-items: start;
}
.qna-main { min-width: 0; }

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

/* 오른쪽 세무사 — 카드 여러 장 대신 **상자 하나 + 구분선 행**(D-373, 목록과 같은 문법).
   테두리가 행마다 반복되지 않아 좁은 칼럼이 조용해진다. */
.qna-side-list {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden;
}
.qna-side .qna-wish {
  padding: 12px 13px;
  display: flex; align-items: center; gap: 10px;
}
.qna-side .qna-wish + .qna-wish { border-top: 1px solid var(--grey100); }
/* 행 본체 = 프로필 링크(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: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; line-height: 1;
}
/* 서브줄(상호 · 지역)은 한 줄로 끊는다 — pitch 줄은 D-375에서 뺐다(행은 사람 식별까지만). */
.qna-wish-main .qna-tax-id .t-caption2 {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-side .qna-wish-form { padding: 14px; }

/* 「← 목록으로」 — 글 위(D-377). */
.qna-back { margin-bottom: 10px; }
.qna-back a { color: var(--text-tertiary); font-size: 13.5px; }
.qna-back a:hover { color: var(--text-secondary); }

/* ── 상태 칩 — 글 위에 작게. 카드가 아니다(사용자 지시). ───────────────────────── */
.qna-state {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px; padding: 5px 11px 5px 9px;
  border-radius: 999px; background: var(--surface-alt);
  font-size: 12.5px; font-weight: 600; 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: 32px 0; }
.qna-sisun-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.qna-sisun-head h2 { margin: 0; }
.qna-sisun-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qna-sisun .sisun-pop-cap { padding: 8px 10px; min-height: 48px; font-size: 12px; line-height: 1.4; }

/* ── 답변 스레드 — 댓글 형식(사용자 지시). 카드 여러 장이 아니라 한 흐름이다. ───── */
.qna-thread { margin-top: 28px; display: flex; flex-direction: column; gap: 0; }
.qna-thread-head { margin-bottom: 4px; }
.qna-thread-head h2 { margin: 0; }
/* 상자+구분선 행 — 목록(.qna-qcl)과 같은 문법(D-373). */
.qna-thread-list {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden; margin-top: 10px;
}
.qna-comment {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px;
  padding: 16px; 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: 24px; }
  .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자가 차지하는 높이 —
        칼럼  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: 12px; font-weight: 700; letter-spacing: .04em;
  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: 13px; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
  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: #fff; }
.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: #fff; }
@media (prefers-reduced-motion: reduce) { .qna-cat > span { transition: none; } }

/* ── 문서 (제목·본문) ────────────────────────────────────────────────────── */
.qna-doc-page { padding: 20px 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: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35;
}
/* ⚠ placeholder를 너무 흐리게 두면 «빈 문서»가 아니라 «고장난 화면»으로 읽힌다.
   --text-tertiary보다 한 단계만 옅게 잡는다(대비 3:1 언저리). */
.qna-doc-title::placeholder { color: #B6BEC8; }
.qna-doc-text::placeholder { color: #B6BEC8; }

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

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

/* ── 하단 상태줄 ─────────────────────────────────────────────────────────── */
/* 🔴 라벨을 걷어낸 대가로 생긴 자리다. 글자수·오류·제출이 여기 모인다.
      ⚠ 카드 좌우 패딩을 음수 마진으로 되밀어 **판의 끝까지** 선을 긋는다 — 안 그러면
        구분선이 가운데 떠 «바닥»으로 안 읽힌다. */
.qna-doc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px -28px 0; padding: 13px 28px;
  border-top: 1px solid var(--border);
}
.qna-doc-status { min-width: 0; }
.qna-doc-count {
  font-size: 12.5px; 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: 12.5px; color: #DC2626; font-weight: 600; }
.qna-doc-actions { display: flex; gap: 8px; flex: none; }

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

/* ── 수정 화면(qna-edit)·상세의 남은 폼 조각 ─────────────────────────────────
   🔴 **작성 화면(qna-write)은 D-365에서 문서 캔버스로 갈아탔지만 수정 화면은 그대로다.**
      아래 규칙들을 작성 화면과 함께 지우면 수정 화면이 통째로 깨진다 — 실제로 한 번 지웠다가
      «지운 클래스를 아직 쓰는 템플릿» 검사에서 걸렸다.
   ⚠ 수정 화면도 문서 캔버스로 옮길 거라면 그때 이 블록을 **함께** 걷어라.
     지금은 두 화면이 다른 얼굴이라는 것을 알고 두는 것이다(수정은 본문 추가만 가능한
     다른 성격의 화면이다 — QnaController 주석 참고). */
.qna-write-form { display: flex; flex-direction: column; gap: 16px; }
.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: 11.5px; font-variant-numeric: tabular-nums; }
/* 인라인 오류 — 칸 테두리 1.5px 빨강 + 아래 한 줄. */
.qna-input-err { border: 1.5px solid #DC2626 !important; background: #fff !important; }
.qna-field-err { font-size: 12px; color: #DC2626; }
.qna-field-note { color: var(--text-tertiary); }
.qna-write-body textarea { min-height: clamp(200px, 34vh, 380px); padding: 14px; line-height: 1.6; resize: vertical; }
.qna-write-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.qna-edit-note { margin: 6px 0 14px; }
.qna-existing-body {
  font-size: 14px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line;
  padding: 12px; 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-question-title { font-size: 21px; line-height: 30px; }
  .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: 8px; flex: none; }
.qna-wish-btn { height: 29px; padding: 0 12px; font-size: 12.5px; font-weight: 700; border-radius: 999px; }

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

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

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

.qna-unlock { margin-top: 18px; }
.qna-answer-card { padding: 16px; margin-bottom: 10px; }
.qna-answer-body {
  margin: 12px 0 0; line-height: 1.75; white-space: pre-wrap; word-break: 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: 4px 0 0; }
.qna-veil {
  margin: 12px 0 0; line-height: 1.75; white-space: pre-wrap; word-break: 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: 12px; font-weight: 700; padding: 2px 8px; 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: 8px; }

/* 잠금 표식 — 글자 없는 자물쇠 하나(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: #EEF1F4; padding: 20px; border-radius: 18px; }
.qna-ans-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qna-ans-due {
  background: #EAF3FF; color: var(--primary-pressed); font-size: 12px; font-weight: 500;
  border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.qna-answer-input {
  background: var(--surface); width: 100%; resize: vertical; line-height: 1.75;
  /* 10줄(D-677 — 상한이 500 → 1,000자가 되며 7줄로는 절반도 안 보인다):
     16px × 1.75 × 10 = 280px + 패딩 28px = 308px. 그 위로는 resize 손잡이에 맡긴다
     (칸을 상한에 맞춰 키우면 화면 한 장을 통째로 먹는다 — D-566에서 겪은 쪽이다). */
  min-height: 308px; font-size: 16px; padding: 14px 16px; color: var(--text-primary);
  border: 1.5px solid var(--border); border-radius: 14px; letter-spacing: -.01em;
}
.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: 11.5px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.qna-answer-count.near { color: #B4690E; font-weight: 500; }

/* 전체 열람 줄 (D-362) — 결제는 카드마다가 아니라 여기 한 번이다. */
.qna-unlock-bar {
  margin-top: 6px; padding: 16px;
  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 20px 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: 16px; }
  .qna-plans-card { border-radius: 24px; width: min(420px, 100%); padding: 20px; }
  .qna-sheet-grab { display: none; }
}
.qna-sheet-grab {
  display: block; width: 44px; height: 5px; border-radius: 3px;
  background: var(--grey200); margin: 4px auto 14px;
}
.qna-plans-title { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.01em; margin-bottom: 2px; }
.qna-plans-sub { font-size: 12.5px; color: var(--text-tertiary); margin: 0 0 14px; }
.qna-plan {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface);
  padding: 14px 16px; 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: 15px; font-weight: 800; }
.qna-plan-reco {
  font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff;
  background: var(--primary); border-radius: 6px; padding: 1.5px 7px;
  white-space: nowrap; flex: none;
}
.qna-plan-desc { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.qna-plan-price { flex: none; text-align: right; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qna-plan-price s { display: block; color: var(--text-tertiary); font-weight: 600; font-size: 12px; }
.qna-plans-note { font-size: 11.5px; color: var(--text-tertiary); margin: 2px 2px 12px; }
.qna-sheet-cta {
  display: block; width: 100%; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--primary); color: #fff; font: inherit; font-size: 16px; font-weight: 800;
  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: 12px; }
.qna-credit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.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: 12px; font-weight: 800;
  color: var(--grey700); background: linear-gradient(135deg, #DCE7F5, #B9CCE8);
}
.qna-credit-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qna-credit-who small { color: var(--text-tertiary); font-size: 11px; font-weight: 500; }
.qna-credit-tax { font-size: 13.5px; font-weight: 700; 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: 12px 16px;
  background: var(--grey50); margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.qna-up-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-secondary); padding: 3px 0;
}
.qna-up-row b { font-weight: 800; color: var(--text-primary); }
.qna-up-dash { border-top: 1.5px dashed var(--grey300); margin: 8px 0; }
.qna-up-total { color: var(--text-tertiary); }
.qna-up-total b { font-size: 19px; font-weight: 900; color: var(--primary); }
.qna-up-cta { font-size: 14.5px; padding: 13px 0; }

/* ── 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: 11px; font-weight: 800;
  color: #157A47; background: #E7F6EC; border-radius: 6px; padding: 2px 8px;
}
.qna-advisor-note { margin: 0 0 8px; color: var(--text-tertiary); }
.qna-advisor-note.off a { font-weight: 700; }

/* 답변 폼의 상담 제안(D-465) — 체크 한 줄, 제출 버튼 위. */
.qna-consult-ck { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--text-secondary); font-weight: 700; margin: 8px 0 2px; cursor: pointer; }
.qna-consult-ck input { width: 15px; height: 15px; accent-color: var(--primary); }
.qna-consult-done { color: var(--tint-green-ink, #1B7A55); font-weight: 800; margin: 8px 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: 13.5px; font-weight: 700; 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: 11.5px; font-weight: 800; color: #1B7A55; background: #E7F5EE;
  border-radius: 999px; padding: 3px 10px; }

/* ── D-482 Phase 2 — 답변 폼의 예상 상담비용 입력 ── */
/* 바닥 한 줄(D-567) — 카운터가 왼끝, 비용·제출이 오른끝. 입력폼 양 모서리와 맞는다. */
.qna-ans-foot{display:flex;align-items:center;gap:10px;margin-top:12px}
.qna-ans-foot .qna-answer-count{margin:0 auto 0 0;text-align:left}
.qna-fee-row{display:flex;align-items:center;gap:8px}
.qna-fee-row .t-label2{white-space:nowrap}  /* 좁은 폭에서 「예상 상/담비용」으로 접히면 안 된다 */
.qna-fee-row .input{max-width:130px;font-variant-numeric:tabular-nums;text-align:right;
  background:var(--surface);border:1px solid var(--grey200);padding:9px 12px}
  /* 전역 .input의 회색 면을 걷는다(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(--c-primary, #3182f6); 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, #3182f6); background: #fff; color: var(--primary, #3182f6);
  font-size: 12px; font-weight: 700; line-height: 1; padding: 7px 12px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.qna-adopt-btn:hover { background: var(--primary, #3182f6); color: #fff; }

/* ⑦ 예상 상담비용 — 한 줄 캡션이 아니라 카드. 의뢰인이 가장 오래 보는 값이다. */
.qna-fee-card {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px;
  margin-left: auto;   /* 우측 정렬(사용자 지시) — 여러 답변의 금액을 세로로 훑기 쉽다 */
  padding: 9px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
  border: 1px solid #dbe8ff;
}
.qna-fee-card .fc-label { font-size: 11.5px; font-weight: 600; color: #4e5968; letter-spacing: -.01em; }
.qna-fee-card .fc-amt { font-size: 13px; color: #1b64da; font-weight: 600; }
.qna-fee-card .fc-amt b { font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-right: 1px; }

/* (은퇴, 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: 12.5px; color: #6b7684; }
.qna-lock-summary .qna-lock-ic { display: inline-flex; color: #8b95a1; }

/* ⑥ 정가 병기 — 취소선 + 차액 한 줄. «할인» 낱말은 쓰지 않는다(P5·D-186). */
.qna-plan-price s { display: block; font-size: 11.5px; font-weight: 500; color: #b0b8c1; 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: 11px; font-weight: 800; letter-spacing: -.01em;
  color: #fff; background: linear-gradient(135deg, #ff5a5f 0%, #f0353b 100%);
  border-radius: 999px; padding: 3px 8px; margin-bottom: 3px;
}
.qna-now { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

/* 세무사 답변 수정(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: #14243D; color: #fff; border-radius: 12px 12px 0 0;
}
.qna-adopted-check { display: inline-flex; color: #E3C77B; flex: none; }
.qna-adopted-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
/* 머리띠에 이어 붙는 본문 — 위 모서리를 각지게 이어 한 덩어리로 보이게. */
.qna-comment.is-adopted {
  border: 1.5px solid #14243D; border-top: none; border-radius: 0 0 13px 13px;
  padding: 16px 16px 15px; margin-bottom: 4px; background: #fff;
}


/* 정제 확인 화면의 보증 배지 — 체크(✓) 글리프 대신 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 20px 16px; }

.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: 12px; 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: 13px; font-weight: 700; letter-spacing: var(--ls-md, -.2px);
  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: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}

/* 고른 것만 흰 슬랩으로 펼쳐진다 — 형제 결합자라 개수 제한이 없다. */
.qna-note-kv { display: none; }
.qna-note input:checked ~ .qna-note-card {
  background: var(--surface, #fff); border-color: #DBE8FF; padding: 12px 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, #3182f6); outline-offset: 2px;
}
.qna-note-k {
  font-size: 12px; font-weight: 700; line-height: 1.6;
  color: var(--text-tertiary, #6B7684);
}
/* ⚠ 두 줄까지만 보인다. 본문은 2,000자까지라 서버에서 자르면 문장 중간에서 끊긴다 —
     자르는 대신 **접는다**(늘려 보고 싶으면 [보기]로 상담노트 상세를 열면 된다).

   🔴 **명조를 쓰지 마라**(D-499, 사용자 지시). D-487에서 여기에 Noto Serif KR을 씌웠다가
      걷었다 — 이 화면은 **쓰는 화면**이고, 한 판 안에서 라벨은 고딕·값은 명조로 갈리니
      «다른 데서 가져다 붙인 것»처럼 보였다. 값이 «내가 적어 둔 것»이라는 구분은 서체가 아니라
      **판(파란 슬랩)과 라벨**이 이미 하고 있다.
   ⚠ 명조는 **읽는 화면의 원문**에만 남아 있다 — 전달 확인의 원문 접힘(D-490)과 게시글 상세의
     작성자 스트립·세무사용 원문(D-492). 그쪽은 게시본과 원문을 나란히 놓는 자리라 얼굴을 가른다.
   ⚠ 크기는 13px/500 그대로다(D-487의 실측) — 파란 바탕에서 12.5px/400은 흐리게 읽힌다. */
.qna-note-v {
  font-size: 13px; font-weight: 500; line-height: 1.7;
  color: var(--text-primary, #191F28);
  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: 12px; line-height: 1.6;
  color: var(--grey700, #4E5968); word-break: keep-all;
}

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


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

/* 미리보기 — 목록 카드와 같은 얼굴. 여기가 «게시될 실물»이라는 걸 생김새가 말한다. */
.qna-final-post {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface, #fff);
  padding: 15px 17px; margin-top: 14px;
}
.qna-final-cat {
  display: inline-flex; font-size: 11px; font-weight: 700; color: var(--primary-pressed, #1B64DA);
  background: var(--primary-light, #E8F3FF); border-radius: 999px; padding: 3px 9px;
}
.qna-final-title {
  font-size: 16px; font-weight: 800; letter-spacing: var(--ls-lg, -.3px); margin-top: 9px;
}
.qna-final-body {
  font-size: 13px; line-height: 1.8; color: var(--grey800, #333D4B); margin: 7px 0 0;
  word-break: keep-all;
}
.qna-final-meta {
  display: flex; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); margin-top: 9px;
}

/* 캡션 — 걷어낸 항목. 카드가 아니라 조용한 한 줄이다. */
.qna-final-cap {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  margin-top: 12px; font-size: 12.5px; color: var(--text-tertiary);
}
.qna-final-cap i { font-style: normal; color: var(--grey300, #D1D6DB); }

/* 원문 접힘 — 취소선 없이, 명조로. «보존된 내 글»의 얼굴(D-487·D-489). */
.qna-final-raw { margin-top: 13px; border-top: 1px solid var(--divider); padding-top: 12px; }
.qna-final-raw > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--primary, #3182f6);
}
.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: 'Noto Serif KR', 'Pretendard', serif; font-weight: 600;
  font-size: 14.5px; letter-spacing: -.01em; margin-top: 11px;
}
.qna-final-raw-b {
  font-family: 'Noto Serif KR', 'Pretendard', serif; font-weight: 500;
  font-size: 13px; line-height: 1.85; color: var(--grey800, #333D4B);
  margin: 7px 0 0; word-break: keep-all;
}
.qna-final-raw-cap {
  margin: 10px 0 0; font-size: 12px; line-height: 1.65; color: var(--text-tertiary);
  word-break: keep-all;
}

/* 버튼 — 🔴 **같은 폭**(사용자 지시: 크기 차이가 심해 정돈되지 않았다). 위계는 색이 만든다. */
.qna-final-actions { display: flex; gap: 8px; margin-top: 16px; }
.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, #BFDBFE); background: var(--surface-tint, #F8FBFF);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 10px;
}
.qna-source-t {
  font-family: 'Noto Serif KR', 'Pretendard', serif; font-weight: 600;
  font-size: 14.5px; letter-spacing: -.01em; margin-top: 9px;
}
.qna-source-b {
  font-family: 'Noto Serif KR', 'Pretendard', serif; font-weight: 500;
  font-size: 13px; line-height: 1.85; color: var(--grey800, #333D4B);
  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, #F7F8FA);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.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: 999px; background: rgba(49, 130, 246, .14); overflow: hidden;
}
.qna-refining-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #3182F6, #7AB1FF);
  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; }

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


/* ══ 작성자 스트립 — 게시 후 «이건 공개용 요약본» (D-492, 사용자 확정 A안) ══════
   질문 카드 **안**, 작성일 아래 각주. 작성자에게만 보인다(템플릿 th:if).
   🔴 카드를 새로 만들지 않는다 — 점선 한 줄로 «이 글에 붙는 말»임을 보인다.
      상자로 키우면 내 글 위에 안내가 얹힌 꼴이 되어 매번 잔소리로 읽힌다(B안을 뺀 이유). */
.qna-mine { margin-top: 12px; 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: 8px;
  font-size: 12.5px; line-height: 1.65; color: var(--grey700, #4E5968); 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, #E8F3FF); color: var(--primary-pressed, #1B64DA);
}
.qna-mine-txt b { color: var(--text-primary); font-weight: 700; }
/* ⚠ 좁은 화면에서도 <br>이 만든 두 줄을 지킨다 — 낱말 중간에서 다시 갈리면 세 줄이 된다. */
.qna-mine-txt { word-break: keep-all; }
.qna-mine-go {
  margin-left: auto; flex: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--primary, #3182f6);
}
.qna-mine[open] .qna-mine-go::after { content: " 접기"; }
.qna-mine[open] .qna-mine-go { font-size: 0; }
.qna-mine[open] .qna-mine-go::after { font-size: 12.5px; }
.qna-mine > summary:focus-visible .qna-mine-line {
  outline: 2px solid var(--primary, #3182f6); 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: 'Noto Serif KR', 'Pretendard', serif; font-weight: 600;
  font-size: 14px; letter-spacing: -.01em;
}
.qna-mine-raw-b {
  font-family: 'Noto Serif KR', 'Pretendard', serif; font-weight: 500;
  font-size: 12.5px; line-height: 1.85; color: var(--grey800, #333D4B);
  margin: 6px 0 0; word-break: keep-all;
}
.qna-mine-raw-cap {
  margin: 9px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
  word-break: keep-all;
}

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


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


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

/* 원문 칸 — 명조로. 상세·전달 확인과 같은 문법(D-487·D-490): «내가 쓴 글»의 얼굴. */
/* 🔴 **수정 화면의 두 탭은 같은 서체다**(사용자 지시). 명조를 쓰지 마라.
   상세·전달 확인에서 원문을 명조로 두는 것은 «읽는 화면»이라 게시본과 얼굴을 갈라 놓는 것이지만,
   여기는 **쓰는 화면**이다 — 탭을 오갈 때마다 글꼴이 바뀌면 같은 폼이 두 벌처럼 보인다.
   구분은 서체가 아니라 **탭**이 이미 하고 있다. */
.qna-edit-raw { line-height: 1.85; 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: 12px; }
.qna-edit-form .qna-tab-note { margin: -4px 0 4px; }
.qna-edit-form .qna-doc-ask { padding-top: 4px; }
/* 원문 판 — 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: 13.5px; font-weight: 700; padding: 10px 2px; margin-right: 22px; cursor: pointer;
  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, #3182f6); outline-offset: 3px; border-radius: 6px;
}
/* 안내 한 줄 — 고르는 탭에 따라 갈린다. */
.qna-tab-note { margin: -6px 0 14px; font-size: 12.5px; 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, #D7E6FF);
  background: var(--surface-tint, #F4F8FF);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 12px;
}
.qna-wait-top { display: flex; align-items: center; gap: 20px; }
.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: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--text-primary);
}
.qna-wait-num i { font-style: normal; font-size: 15px; }
.qna-wait-cap { font-size: 11.5px; color: var(--text-tertiary); }
.qna-wait-say { min-width: 0; }
.qna-wait-head {
  margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text-primary); word-break: keep-all;
}
.qna-wait-head em { font-style: normal; color: var(--primary); }
.qna-wait-lead {
  margin: 8px 0 0; font-size: 13px; line-height: 1.7;
  color: var(--grey700); word-break: keep-all;
}
.qna-wait-lead b { color: var(--text-primary); }
.qna-wait-note { margin: 10px 0 0; font-size: 12px; 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, #D7E6FF);
  margin-top: 16px; padding-top: 15px;
}
.qna-wait-f { width: 66px; 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: 700; font-size: 20px;
}
.qna-wait-f b {
  display: block; font-size: 11.5px; font-weight: 700; margin-top: 6px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qna-wait-f span {
  display: block; font-size: 10px; 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: 12px; font-weight: 800;
}
@media (max-width: 560px) {
  .qna-wait { padding: 18px 16px; }
  .qna-wait-top { gap: 14px; }
  .qna-wait-ring { width: 104px; height: 104px; }
  .qna-wait-num { font-size: 24px; }
  .qna-wait-head { font-size: 17px; }
  /* 얼굴은 줄이지 않는다 — 줄이면 이 줄의 존재 이유가 사라진다. 넘치면 옆으로 민다. */
  .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: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--primary-pressed); background: var(--primary-light);
}
/* 목록 — 분야 낱말만 파랑. 닉네임·날짜는 회색 그대로다(한 줄에 색이 셋이면 소란하다). */
/* 분야 = 파랑 + Medium(D-555). b 태그라 명시가 없으면 기본 굵기(700)로 돌아간다. */
.qna-qc-cat { font-weight: 500; color: var(--primary-pressed); }

/* ⚠ 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: 11.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--primary-pressed); background: var(--primary-light);
  border-radius: 999px; padding: 5px 11px;
}

/* ══ 무응답 마감 — 접속 중인 세무사 (D-518, 사용자 확정 N5 «사람으로») ═══════════════
   🔴 예전에는 이 자리가 「세무사를 직접 찾아보시겠어요?」라는 **회색 글씨 한 줄**이었다 —
      물음을 던져 놓고 누를 것이 없었다. 지금 상담 가능한 사람을 세워 다음 걸음을 준다.
   ⚠ [다시 올리기] 버튼을 여기 붙이지 마라(사용자 지시) — 같은 조건의 되풀이는 두 번째 실패를
     더 아프게 하고 게시판에 같은 질문을 쌓는다.
   ⚠ 행 문법은 오른쪽 목록(.qna-wish)과 같은 얼굴이다 — 새 이름을 만들면 두 목록이 갈라진다. */
.qna-noans {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff);
  padding: 22px 24px;
}
.qna-noans-t { font-size: 18px; font-weight: 800; letter-spacing: -.025em; color: var(--text-primary); }
.qna-noans-lead {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.72;
  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: 11px;
  padding: 11px 0; border-top: 1px solid var(--divider);
}
.qna-noans-row:first-child { border-top: 0; }
.qna-noans-main { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; color: inherit; }
.qna-noans-cta { flex: none; margin-left: auto; }
.qna-noans-more {
  display: block; margin-top: 15px; padding: 12px; text-align: center;
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--grey800);
}
.qna-noans-more:hover { background: var(--grey50); }
@media (max-width: 560px) {
  .qna-noans { padding: 18px 16px; }
  /* 좁은 화면에서 이름과 버튼이 서로 밀지 않게 — 버튼을 아래로 내리지 않고 이름을 줄인다. */
  .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, #fff);
  border: 1px solid #E8EBEF;
  /* 🔴 border-color(단축)를 border-left-color **뒤에** 쓰면 네 변을 모두 덮어 **레일 색이 죽는다**.
     시안 제작 중 실제로 겪었고 확대해서야 보였다 — 순서를 바꾸지 마라. */
  border-left: 3px solid var(--advice-rail);
  border-radius: 0 4px 4px 0;
  padding: 34px 38px 26px;
  margin-top: 14px;
}
.qna-ans:first-of-type { margin-top: 0; }
/* 채택 — 레일이 굵고 진하다 + 배지 + 아래와 벌어진 여백.
   ⚠ **채택이 없는 글이 훨씬 흔하다**(선택이다) — 그때는 이 규칙이 통째로 안 붙어
     네 카드가 똑같이 선다. 첫 답변이 «채택된 것처럼» 보이면 안 된다(Q-167). */
.qna-ans.is-adopted {
  border-color: #D6DEE9;
  border-left-width: 5px;
  border-left-color: var(--advice-ink);
  margin-bottom: 30px;
}
.qna-ans-mark {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--advice-ink); border: 1px solid var(--advice-line);
  border-radius: 2px; padding: 6px 11px; margin-bottom: 22px;
}
/* 잠긴 행 — 서명할 글이 없으니 이름이 위에 선다(결제 전에는 «누가 썼나»가 유일한 단서다). */
.qna-ans-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* 🔴 본문 명조 — D-497(「명조는 읽는 화면에」)의 취지 그대로다. 답변은 읽는 글이다.
   ⚠ 15px 아래로 내리지 마라 — 명조는 작아지면 흐려진다. */
.qna-ans .qna-answer-body {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 16.5px; line-height: 1.95; color: #333D4B;
  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: 12px; flex-wrap: wrap;
  margin-top: 28px; border-top: 1px solid #EDF0F3; padding-top: 20px;
}
.qna-ans-who { display: flex; align-items: center; gap: 12px; 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: 17px;
}
.qna-ans-nm { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.qna-ans-of { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.qna-ans-fee { margin-left: auto; text-align: right; flex: none; }
.qna-ans-fee-l { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #A0A8B2; }
.qna-ans-fee-n {
  display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--grey600);
  font-variant-numeric: tabular-nums;
}
/* ⚠ 고정폭 숫자여야 여러 답변의 금액이 세로로 맞는다 — 이 줄을 지우면 자릿수가 널뛴다. */
.qna-ans-fee-n b {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em; 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: 12px; margin-top: 18px; flex-wrap: wrap; }
.qna-ans-sp { flex: 1; }
.qna-ans-go {
  font-size: 13px; font-weight: 700; 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: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--grey700); background: none; border: 1px solid var(--border);
  border-radius: 3px; padding: 8px 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: 13.5px; font-weight: 700; color: var(--text-primary); }
.qna-adopt-h { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary);
  word-break: keep-all; }   /* 「보여\A0요」로 낱말이 갈리던 자리 */
.qna-adopt-h b { font-weight: 700; color: var(--text-secondary); }
/* ⚠ 16px다 — 그 아래면 iOS가 칸을 누를 때 화면을 자동 확대한다(design.md). */
.qna-adopt-t {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 16px; line-height: 1.55; 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: 12px; line-height: 1.5; 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: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--primary-pressed);
}
.qna-adopt-say-b {
  margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; 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: 24px 20px 20px; }
  .qna-ans .qna-answer-body { font-size: 16px; }
  /* 좁은 화면에선 금액이 서명 아래로 내려간다 — 왼쪽 정렬로 붙여 «떠 있는 값»이 안 되게. */
  .qna-ans-fee { margin-left: 58px; text-align: left; width: 100%; }
}

/* ══ 결제 확인 화면 (D-527, 사용자 확정 R5) ═══════════════════════════════════════
   🔴 결제 직후는 **글을 꼼꼼히 읽는 순간이 아니다** — 문장을 짧게 끊고 한 줄에 하나만 말한다.
   ⚠ 금액·유효기간은 각주 크기다. 키우면 «영수증»이 되는데, 이 화면은 확인이지 영수가 아니다. */
.qna-paid-sec { max-width: 640px; margin-inline: auto; }
.qna-paid {
  background: var(--surface, #fff); border: 1px solid #E8EBEF; border-radius: 4px;
  padding: 56px 40px 44px; text-align: center;
}
.qna-paid-eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--advice-ink);
}
.qna-paid-title {
  margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text-primary); word-break: keep-all;
}
/* 문장마다 제 줄을 갖는다 — 이어 붙이면 결제 직후에 아무도 안 읽는다. */
.qna-paid-line {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.75;
  color: var(--grey700); word-break: keep-all;
}
.qna-paid-line:first-of-type { margin-top: 16px; }
.qna-paid-line b { color: var(--text-primary); font-weight: 700; }
.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: 14px; font-weight: 800; color: #fff; background: var(--advice-ink);
  border-radius: 4px; padding: 13px 24px;
}
.qna-paid-go:hover { background: #16305A; }
.qna-paid-go2 {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--advice-ink); background: var(--surface, #fff);
  border: 1px solid var(--advice-line); border-radius: 4px; padding: 12px 20px;
}
.qna-paid-foot { margin: 20px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
@media (max-width: 560px) {
  .qna-paid { padding: 40px 22px 34px; }
  .qna-paid-title { font-size: 22px; }
  /* 좁은 화면에선 버튼을 세로로 — 나란히 두면 둘 다 눌리기 어려워진다. */
  .qna-paid-act { flex-direction: column; }
}

/* ══ 요약본 손보기 (D-537) ════════════════════════════════════════════════════
   미리보기 안에서 그대로 고친다 — 고치는 자리와 결과가 보이는 자리를 가르지 않는다.
   ⚠ 평소에는 **입력칸처럼 보이지 않는다**(테두리·배경 없음). 미리보기의 조판을 그대로
     유지해야 «올라갈 모습»으로 읽힌다. 누르면 그때 테두리가 선다. */
.qna-final-edit {
  display: block; width: 100%; border: 1px solid transparent; border-radius: 8px;
  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: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-tertiary);
  word-break: keep-all;
}
.qna-final-err {
  margin: 9px 0 0; padding: 10px 12px; border-radius: 9px;
  background: #FDECEC; color: #C0242F; font-size: 12.5px; line-height: 1.6;
  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: 13.5px; color: var(--grey700); line-height: 1.6;
}
.qna-wait-who b { font-weight: 500; color: var(--text-primary); }
.qna-wait-tax .qna-wait-lead b { font-weight: 500; 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 #fff; 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: 20px;
  box-shadow: 0 1px 2px rgba(25, 31, 40, .04), 0 8px 28px rgba(25, 31, 40, .07);
}
.qna-ans-fate {
  font-size: 13px; font-weight: 500; 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: 12px; }
.qna-my-stat {
  flex: 1; background: var(--surface); border: 1px solid var(--grey200);
  border-radius: 12px; padding: 13px 15px;
}
.qna-my-stat b {
  display: block; font-size: 19px; font-weight: 500; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.qna-my-stat i { font-style: normal; font-size: 11.5px; 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: 12px;
  background: var(--surface); border: 1px solid var(--grey200); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 12px;
}
.qna-my-turn { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.qna-my-turn b {
  font-weight: 500; color: var(--primary-pressed); font-variant-numeric: tabular-nums;
}
.qna-my-hint {
  font-size: 12.5px; color: var(--grey500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.qna-my-slim {
  display: flex; align-items: center; gap: 10px; padding: 2px 2px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--grey500);
}
.qna-my-more { margin-left: auto; font-size: 12.5px; color: var(--primary-pressed); white-space: nowrap; }

/* ══ 질문하기 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: 26px; font-weight: 700; line-height: 1.35;
  letter-spacing: var(--ls-lg, -.4px); color: var(--text-primary);
}
.qnp-lead {
  margin: 7px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.65;
  color: var(--text-secondary); word-break: keep-all;
}

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

.qnp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qnp-item {
  display: block; padding: 15px 17px; text-decoration: none;
  background: var(--surface, #fff); 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, #3182f6);
  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: block; font-size: 15.5px; font-weight: 500; line-height: 1.45;
  color: var(--text-primary); letter-spacing: var(--ls-md, -.2px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 메타 줄 — 항목 사이 구분은 가운뎃점 하나다(기호를 늘리면 상태 배열이 된다). */
.qnp-item-m {
  display: block; margin-top: 5px; font-size: 12px; font-weight: 400;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.qnp-item-m > span + span::before { content: " · "; }
.qnp-cur { color: var(--primary, #3182f6); }
/* 본문 두 줄 — 자르지 않고 접는다(문장 중간에서 끊기면 뜻이 바뀐다). */
.qnp-item-b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font-size: 13px; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary); word-break: keep-all;
}

@media (max-width: 560px) {
  .qnp-title { font-size: 23px; }   /* ≤560의 배너 제목 21px보다 위 */
  .qnp-item { padding: 14px 15px; }
}

/* 2단계의 «선택한 상담노트» — 라디오가 없으므로 펼침을 직접 켠다(D-677 ⑨).
   ⚠ `input:checked ~ .qna-note-card` 규칙과 **같은 모양**이어야 한다. 갈라지면 고르기 화면에서
     본 카드와 확인 화면의 카드가 다른 물건처럼 보인다. */
.qnw-picked { cursor: default; }
.qnw-picked .qna-note-card {
  background: var(--surface, #fff); border-color: #DBE8FF; padding: 12px 13px;
  box-shadow: 0 1px 2px rgba(17, 31, 40, .04);
}
.qnw-picked .qna-note-kv {
  display: grid; grid-template-columns: 78px 1fr; gap: 7px 10px; margin-top: 10px;
}
.qnw-repick { margin-left: 6px; color: var(--primary, #3182f6); white-space: nowrap; }

@media (max-width: 560px) {
  .qnw-picked .qna-note-kv { grid-template-columns: 70px 1fr; }
}