/* 견적요청서 작성 (D-191 · docs/FEATURE_BRIEF.md §3) — 네 단계 진행 표시 · 확인 카드 · 인라인 첨삭 패널.

   ⚠ **여기서 단계를 감추지 않는다.** `.br-step { display:none }`을 기본값으로 두면 brief-write.js가
     죽었을 때(로드 실패·구문 오류·확장 프로그램 차단) 작성 화면이 **영영 안 보이는** 페이지가 된다.
     지금 구조는 반대다: 아무것도 안 하면 [내용 + 질문 + 저장하기]가 펼쳐진 단일 폼이고 그대로
     제출된다(D-134 R2). 감추기는 JS가 `hidden` 속성으로만 하고, 아래 규칙들은 그 `hidden`이
     display에 지지 않게 못박아 둔 것이다(.ip 패널에서 겪은 함정과 같다 — annotate.css:143).
   ⚠ 새 색·모서리·자간을 만들지 않는다. 전부 tokens.css의 값이다.
   ⚠ 진행 바(.qw-progress)·질문 칸(.qw-q*)·단계 전환 애니메이션(.qw-in-*)은 app.css의 것을
     **그대로 재사용**한다 — 같은 부품을 두 벌로 두지 않는다. */

.br-step[hidden], .br-nav[hidden], [data-brief-head][hidden],
[data-brief-submit][hidden], [data-brief-qs][hidden] { display: none; }

/* 단계가 바뀔 때 포커스를 조각에 옮긴다(스크린리더가 전환을 알아채는 유일한 신호). 그 포커스
   링이 카드 전체를 두르면 화면이 껌뻑인 것처럼 보인다 — 시각 표시는 안쪽 컨트롤이 맡는다. */
.br-step:focus { outline: none; }

/* ══ 두 칸 배치 — 좌 컨텍스트 / 우 질문 (D-237) ═══════════════════════════════
   🔴 **넓히는 것이 답이 아니었다.** 개편 전 실측(1920×1080): 좌우 여백은 84px(4.4%)뿐인데
      S3는 스크롤 543px · S4는 612px이 필요했고, 그 화면에서 입력칸은 1802px까지 늘어나
      한 줄 127자였다(`--reading-max` 760px의 2.4배). 남는 것은 가로였고 모자란 것은 세로였다.

   그래서 이 배치가 하는 일은 셋이다:
     ① 질문 위 크롬(제목·리드·진행률 313px)을 **왼쪽 레일로** 옮겨 세로를 번다
     ② 지금까지 고른 답(크럼)을 그 레일에 남겨 둔다 — 옆에 계속 보인다(사용자 지시)
     ③ 질문 칼럼에 상한을 걸어 **고르면 바로 다음**의 가로 이동을 줄인다
        (실측: 1920에서 첫 항목 ↔ 마지막 항목 1448px → 두 열 폭 안으로)

   ⚠ **CSS만으로 선다.** JS가 죽으면 이 화면은 전 단계가 펼쳐진 단일 폼이어야 하는데
     (D-134 R2), 그때 레일에는 `hidden`인 진행률·크럼 대신 제목·리드만 남는다 — 격자는
     그대로 서고 오른쪽에 폼 한 벌이 들어간다. 배치를 JS로 하면 그 화면이 무너진다.
   ⚠ 새 색·그림자·모서리를 만들지 않았다. 여기 있는 것은 격자와 여백뿐이고, 여백은 전부
     tokens.css의 `--s-*`다(8pt 스케일). */

/* 질문 칼럼의 상한. 레일 300 + 간격 32 + 질문 1268(1920에서).
   🔴 상한을 **화면 전체가 아니라 `.iw-opts`에 따로** 건 이유(아래 `.iw-opts`의 max-width):
      가로가 벌 받는 것은 **고르면 바로 넘어가는 단계뿐**이다. S1·S2는 선택 220ms 뒤 다음
      질문으로 넘어가는데 다음 질문의 첫 항목은 늘 맨 왼쪽이라, 열이 늘수록 눈이 그만큼
      되돌아온다(실측: 1920 다섯 열에서 1448px). S3·S4는 자동 진행이 없어 그 벌이 없고,
      오히려 열을 더 깔수록 스크롤이 준다. 그래서 **한 화면에 한 상한**을 걸지 않는다.
   ⚠ 1600은 S3가 세 열로 서는 하한(레일 300 + 간격 32 + 340×3 + 간격 48 = 1220)에 여유를
     둔 값이다. 더 키우면 S3가 네 열이 되어 한 줄에 묻는 것이 너무 많아진다. */
/* ══ 프레임 — 읽는 자리와 쓰는 자리를 **배경색으로** 가른다 (D-243 시안 L-01·L-02·L-03) ══
   개편 전에는 레일과 작성 영역이 같은 흰 바탕이라, 안내문이 입력 카드 안까지 들어와 보였다.
   이제 셋은 물리적으로 다른 판이다: 레일(slate-50) · 작성 영역(흰색) · 액션 바(작성 영역 하단).

   ⚠ 시안의 상단 바(로고 + 나가기)는 **셸 상단바가 이미 하고 있어** 프레임 안에 또 만들지
     않았다. 로고가 두 번 뜨는 화면이 되고, 이 화면만 사이드바를 버리는 것은 이 문서의 범위를
     넘는 결정이다(내비게이션을 없애는 일이다). 프레임 머리에는 제목만 남긴다.
   ⚠ 폭: 시안 1220 + 좌우 여백. `--br-max`는 프레임 바깥 상한이다. */
.br-page {
  --br-rail: 232px;          /* 시안 L-02 — 296에서 줄였다 */
  --br-rail-mini: 62px;      /* 접힘 */
  --br-max: 1300px;
  --br-line: #E5E7EB;        /* 시안 토큰 line */
  --br-fieldline: #D1D5DB;   /* field-line */
  --br-optline: #9CA3AF;     /* optional-line — 점선(선택 입력) */
  --br-hint: #6B7280;        /* text-hint · AA 4.83:1 */
  --br-body: #4B5563;        /* text-body */
  --br-title-c: #111827;     /* text-title */
  --br-b700: #1B5FD1;        /* brand-700 — 흰 배경 위 브랜드 텍스트(소형 글자 AA) */
  --br-b100: #DBEAFE;
  --br-b050: #EFF6FF;
  /* ── 스킨 개편 토큰 (D-308 · 시안 §5 「색 토큰」) ──────────────────────────
     ⚠ 여기 있는 값은 **이 화면 전용**이다. 전역 토큰(tokens.css)을 건드리면 다른 지면이
       같이 바뀐다 — 시안의 대상 화면은 「견적요청서 만들기」 하나다. */
  --br-ground: #F2F7FD;      /* S-01 본문 지면 — 흰 카드가 지면 위에 떠 보이게 */
  --br-dot-main: #2E6BFF;    /* S-02 「문의 내용」 도트 (로고 첫 점과 같은 파랑) */
  --br-dot-side: #0FAE6D;    /* S-02 「세무사에게 묻고 싶은 게 있나요?」 도트 (로고 둘째 점) */
  --br-addline: #1B5FD1;     /* [+ 질문 추가] 글자 — 흰 바탕 텍스트 안전 블루 5.83:1 */
  --br-steprow: #EFF5FF;     /* S-07 활성 스텝 «행» 배경 */
  --br-chipbg: #F2F6FC;      /* S-06 「지금까지 고른 것」 카드 배경 */
  --br-inputline: #D9DEE5;   /* 입력 테두리 · [이전] 외곽선 */
  --br-hint2: #8B95A1;       /* 설명·도움말 텍스트 */
  margin-top: var(--s-lg); max-width: var(--br-max); margin-inline: auto;
}

/* ── S-01 · S-04 · S-05 — 지면 위에 뜬 카드, 버튼은 지면 안에 고정 ─────────────
   🔴 **세 층이 각각 하는 일이 다르다**(시안 §4):
     · 지면(`.br-body`, #F2F7FD) — 카드가 «떠 보이게» 하는 바탕. padding 18/18/16.
     · 카드(흰색) — 남은 높이를 **전부** 차지한다(flex: 1). 그래야 textarea가 창 높이를 따라
       늘고, 짧은 화면에서도 버튼이 카드 밑에 붙어 떠다니지 않는다.
     · 버튼 줄 — `flex: none`. 지면 패딩 «안»에 있어 상단바와 같은 여백 감각이 된다(S-05).
   ⚠ 높이를 물려받으려면 조상이 높이를 알아야 한다 — `.br-page`가 격자라 `min-height: 0`이
     없으면 카드가 내용만큼만 자란다(flex/grid 자식의 기본 min-height는 auto다). */
.br-page .br-body {
  background: var(--br-ground);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
/* 카드는 남은 높이를 먹고, 그 안에서 다시 세로 격자가 된다(§3). */
.br-page .br-body > .br-form { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.br-page .iw-s4 { flex: 1; min-height: 0; }
/* S-05 — 버튼 줄은 늘어나지 않는다.
   ⚠ 배경색은 아래 `.br-nav` 한 곳이 정한다 — 여기서 또 칠하면 «어느 쪽이 이기나»를 두고
     규칙이 둘이 된다(그리고 선택자 문자열이 겹쳐 계약 검사가 엉뚱한 규칙을 집는다). */
.br-page .br-nav { flex: none; }
.br-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--br-b700); }
.br-title {
  margin-top: 6px;
  font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: var(--ls-xl);
  color: var(--br-title-c);
}
.br-alert { border-color: var(--error); color: var(--error); margin-bottom: var(--s-md); }
.br-save { width: 100%; margin-top: var(--s-lg); }

/* 화면에서만 뺀다 — 낭독기에는 그대로 남는다(진행률 progressbar가 이 안에 있다). */
.br-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 1024px) {
  .br-page {
    display: grid; align-items: stretch;
    grid-template-columns: var(--br-rail) minmax(0, 1fr);
    background: var(--surface); border: 1px solid var(--br-line);
    border-radius: var(--r-lg); overflow: hidden;
  }
  /* 레일 — 읽는 자리. 배경색이 경계다(테두리 한 줄로는 같은 판으로 읽힌다). */
  .br-aside {
    position: relative;
    background: var(--grey50); border-right: 1px solid var(--br-line);
    padding: 24px 18px; display: flex; flex-direction: column; gap: 24px;
  }
  /* 작성 영역 — 쓰는 자리. 액션 바를 바닥에 붙이기 위해 세로 격자다. */
  .br-body {
    background: var(--surface); padding: 30px 34px 0;
    display: flex; flex-direction: column; min-height: 620px;
  }
  .br-form { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0; }
  .br-form > .br-step { flex: 1 1 auto; }

  /* 🔴 **접힘은 62px 한 폭뿐이다.** 중간 폭을 두면 그 폭에서 글자가 끊긴다.
        상태는 `<html data-brief-rail="mini">`가 나르고 JS가 localStorage에 남긴다. */
  html[data-brief-rail="mini"] .br-page { grid-template-columns: var(--br-rail-mini) minmax(0, 1fr); }
  html[data-brief-rail="mini"] .br-aside { padding: 24px 0; align-items: center; text-align: center; }
  html[data-brief-rail="mini"] .br-back,
  html[data-brief-rail="mini"] .br-title,
  html[data-brief-rail="mini"] .br-seclabel,
  html[data-brief-rail="mini"] .br-memo,
  /* 🔴 라벨은 `.br-steps i`로 잡는다 — D-307이 줄을 <button>으로 감싸면서 `> li > i`(직계)가
        빗나가 접힘에서 «문의 내용»이 세로로 흘러내렸다(사용자 제보). 접힘은 숫자만 남긴다. */
  html[data-brief-rail="mini"] .br-steps i,
  html[data-brief-rail="mini"] .br-steptext,
  html[data-brief-rail="mini"] [data-brief-intro],
  html[data-brief-rail="mini"] [data-brief-crumbsec] { display: none; }
  /* 숫자만 남은 줄은 가운데 정렬(사용자 지시) — 펼침의 text-align:left·gap을 접힘이 되돌린다. */
  html[data-brief-rail="mini"] .br-stepbtn { justify-content: center; gap: 0; padding: 3px 0; }
  html[data-brief-rail="mini"] .br-railtoggle { position: static; margin-bottom: 4px; }
}
/* 768~1023 — 레일을 강제로 접는다(사용자 설정 무시, 시안 7절). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .br-page { display: grid; grid-template-columns: var(--br-rail-mini) minmax(0, 1fr);
             background: var(--surface); border: 1px solid var(--br-line);
             border-radius: var(--r-lg); overflow: hidden; }
  .br-aside { background: var(--grey50); border-right: 1px solid var(--br-line);
              padding: 24px 0; display: flex; flex-direction: column; gap: 20px;
              align-items: center; text-align: center; }
  .br-back, .br-title, .br-seclabel, .br-memo, .br-steps i, .br-steptext,
  [data-brief-intro], [data-brief-crumbsec] { display: none; }
  .br-stepbtn { justify-content: center; gap: 0; padding: 3px 0; }
  .br-body { background: var(--surface); padding: 24px 20px 0;
             display: flex; flex-direction: column; min-height: 560px; }
  .br-form { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0; }
  .br-form > .br-step { flex: 1 1 auto; }
  .br-railtoggle { display: none !important; }
}
.br-body { container-type: inline-size; container-name: brcol; }
@media (max-width: 767.98px) { .br-form { margin-top: var(--s-lg); } }

/* ── 레일 부품 ─────────────────────────────────────────────── */
.br-railtoggle {
  position: absolute; top: 14px; right: 12px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--br-line); border-radius: 8px; background: var(--surface);
  color: var(--br-hint); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.br-railtoggle:hover { border-color: var(--br-fieldline); color: var(--br-body); }
.br-railtoggle[hidden] { display: none; }
html[data-brief-rail="mini"] .br-railtoggle { width: 30px; height: 30px; }

/* 섹션 레이블 — 레일 안에서 블록을 가르는 유일한 장치다(구분선은 블록 사이에만). */
.br-seclabel {
  font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em;
  color: var(--br-optline); margin-bottom: 10px;
}
.br-railsec { border-top: 1px solid var(--br-line); padding-top: 20px; }
.br-railsec[hidden] { display: none; }
.br-head { border-top: 1px solid var(--br-line); padding-top: 20px; }

/* 안내 메모 — 3px 규선 + 의미 단위 개행(시안 3-G).
   ⚠ `keep-all`이 없으면 232px에서 한글이 어절 중간에 끊긴다. 개행은 마크업이 정한다. */
.br-memo {
  border-left: 3px solid var(--br-fieldline); padding-left: 10px;
  font-size: 12.5px; line-height: 21px; color: var(--br-body);
  word-break: keep-all; overflow-wrap: break-word;
}
.br-memo + .br-memo { margin-top: 14px; }
.br-memo b { font-weight: 600; color: #374151; }

/* (접힘 «N 고름» 배지 .br-railmini*는 D-389에서 은퇴 — 접힌 레일은 단계 숫자만.) */

.br-steptext { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--br-b700); }
.br-hint { margin-top: var(--s-md); }
.br-foot { margin-top: var(--s-lg); }

/* 바 + 숫자 한 줄 (사용자 지시: "진행률(% + 상태바)").
   🔴 숫자 칸은 **폭 고정**이다. 안 그러면 9% → 26% → 100%로 자릿수가 늘 때마다 바가 짧아졌다
      길어지기를 반복해, 진행이 뒤로 가는 것처럼 보인다(숨고도 같은 이유로 라벨 폭을 고정한다).
   🔴 숫자는 **그 자리에서 바뀐다** — 카운트업·롤링 없음(설계명세 v4 §7). 움직이는 것은 바의
      너비뿐이고 그 트랜지션은 app.css `.qw-progress-fill`이 갖고 있다(reduced-motion에서 정지). */
.br-meter { display: flex; align-items: center; gap: var(--s-md); }
.br-meter > .qw-progress { flex: 1; min-width: 0; }
.br-pct {
  flex: 0 0 46px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--primary-pressed);   /* --primary는 흰 배경에서 3.71:1이라 못 쓴다(아래 실측표) */
}

/* 🔴 **세로 트래커**(D-243 시안 T-01). 가로 한 줄이던 것을 세로로 세운다 — 232px 레일에서
      가로로 네 칸을 늘어놓으면 글자가 줄바꿈되어 표가 아니라 문단으로 읽혔다.
      퍼센트가 사라진 자리를 이 트래커 하나가 맡는다(현재 단계 아래 `N개 중 M번째 화면`). */
.br-steps {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0;
  list-style: none; font-size: 12.5px; line-height: 1.5; color: var(--br-hint);
}
.br-steps > li { display: flex; align-items: center; min-height: 30px; }
/* 🔴 **줄 전체가 버튼이다**(D-307). 숫자만 눌리게 하면 22px 과녁이라 손가락으로 못 맞힌다 —
      WCAG 2.5.8(최소 24×24)에도 걸린다. 줄을 통째로 과녁으로 준다.
   ⚠ `text-align: left`를 빠뜨리지 마라 — button의 기본은 center라 라벨이 가운데로 몰린다.
   ⚠ 색·굵기는 li가 정한다(아래 aria-current 규칙). 버튼은 «누를 수 있는 자리»만 만든다. */
.br-stepbtn {
  flex: 1; display: flex; align-items: center; gap: 10px;
  min-height: 30px; padding: 3px 8px; margin: 0; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.br-stepbtn:disabled { cursor: default; }
/* 아직 못 간 단계 — 눌리지 않는다는 것이 커서 말고도 보여야 한다(색만으로 알리지 않기). */
.br-stepbtn:disabled > span { opacity: .55; }
.br-stepbtn:disabled > i { opacity: .6; }
.br-stepbtn:not(:disabled):hover { background: var(--br-steprow); }
.br-stepbtn:focus-visible { outline: 2px solid var(--primary-pressed); outline-offset: 1px; }
/* S-07 — 지금 단계는 «행 전체»가 옅은 파랑 알약이다(숫자 원만 칠하던 것에서 바뀌었다). */
.br-steps > li[aria-current="step"] > .br-stepbtn { background: var(--br-steprow); }
.br-steps > li > span,
.br-stepbtn > span {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--br-line); color: var(--br-hint);
  font-size: 11px; font-weight: 700;
}
/* 지금 단계 — 색만으로 알리지 않는다. JS가 aria-current="step"을 함께 세운다(WCAG 1.4.1).
   🔴 **--primary를 쓰지 않는다**(§7 대비 4.5:1). 이 번호 원은 11px·굵기 700의 **작은 글자**라
      대형 텍스트 예외(3:1)에 들지 못한다. 실측: 흰 글자 위 --primary는 3.71:1, 옅은 파랑
      바탕 위 --primary는 3.31:1로 둘 다 미달이었다. 한 칸 내린 --primary-pressed로 바꾸면
      각각 5.41:1 · 4.81:1이 된다 — 같은 파랑 램프 안이라 화면 인상은 그대로다.
      (인테이크의 다른 자리는 이미 전부 --primary-pressed다. 여기만 남아 있었던 이유는 대비
       검사 쌍 목록에 `.br-steps`가 없어서다 — BriefWriteContractTest에 그 두 쌍을 넣어 뒀다.) */
.br-stepbtn > i { font-style: normal; }   /* 라벨은 항상 버튼 안(D-307) — 직계(> li > i) 형태는 죽은 선택자라 걷었다 */
.br-steps > li[aria-current="step"] { color: var(--br-title-c); font-weight: 700; }
.br-steps > li[aria-current="step"] .br-stepbtn > span { background: var(--primary-pressed); color: #fff; }
/* 지나온 단계는 끝났다는 표시만 — 파란 점이 여러 개 뜨면 지금 어디인지 흐려진다.
   (지금 단계는 진한 바탕, 지나온 단계는 옅은 바탕 — 글자색이 같아도 두 상태는 안 헷갈린다.) */
.br-steps > li[data-done] .br-stepbtn > span { background: var(--primary-light); color: var(--primary-pressed); }

/* 🔴 **액션 바는 카드 밖, 작성 영역 바닥이다**(D-243 시안 L-03·3-E).
      되돌아가기는 왼쪽 끝, 나아가기는 오른쪽 끝 — 방향이 다른 버튼은 자리도 달라야 한다. */
.br-nav [data-brief-prev] { flex: 0 0 auto; color: var(--br-body); padding: 0 20px; }
/* 🔴 `margin-left:auto`가 짝이다. `space-between`만 걸면 [이전]이 감춰진 첫 화면에서
      오른쪽 묶음이 **왼쪽으로 붙는다**(실측: S1에서 [다음]이 왼쪽 끝에 섰다).
      나아가는 버튼은 어느 화면에서나 같은 자리에 있어야 한다. */
.br-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.br-nav .br-skip {
  border: 1px solid var(--br-fieldline); color: var(--br-body); padding: 0 20px;
}
.br-nav [data-brief-next], .br-nav [data-brief-submit] { padding: 0 34px; font-weight: 600; }

/* 🔴 [다음]은 **화면 아래에 붙어 있다.** S1 대분류 9개·S2 중분류 6개가 서면 카드가 화면보다
      길어지고, 그때 [다음]은 스크롤 밖으로 사라진다 — 다 고른 사람이 갈 곳을 못 찾는다.
   ⚠ position:sticky라 자기 자리를 flow에 그대로 차지한다(fixed와 다르다) — 문서 끝에서 아래
     내용을 가리지 않고, 감췄을 때(`.br-nav[hidden]`) 흔적도 남지 않는다.
   ⚠ 배경을 깔지 않으면 밑을 지나가는 카드가 버튼 사이로 비친다. 페이지 바탕색(--background)
     그대로라 새 색이 아니고, 폭은 본문 칼럼과 같아서 좌우로 샐 자리가 없다.
   ⚠ safe-area는 홈 인디케이터가 있는 기기에서 버튼이 가려지는 것을 막는다(0px 폴백). */
.br-nav {
  position: sticky; bottom: 0; z-index: 2;
  padding: var(--s-md) 0 calc(var(--s-md) + env(safe-area-inset-bottom, 0px));
  /* ⚠ 개편 전에는 `--background`(페이지 바탕)였다. 이제 이 줄이 서 있는 곳은 «지면»
     (`.br-body`, #F2F7FD)이라 그 색이어야 밑을 지나가는 카드가 안 비친다(D-308 S-05). */
  background: var(--br-ground);
  justify-content: space-between; align-items: center;
}
/* 🔴 **버튼 줄은 «지면 안»이다**(D-308 S-05, 시안). 개편 전에는 넓은 화면에서 이 줄을
      흰색으로 되칠하고 구분선을 긋고 좌우로 34px씩 빼내(`margin: 0 -34px`) 카드 밑에 붙인
      «액션 바»로 만들었다. 시안은 그 반대다: 버튼은 지면 패딩 안에 그냥 놓여 상단바와 같은
      여백 감각을 갖는다.
   ⚠ **음수 여백 -34px는 반드시 같이 지워야 한다.** 그 값은 옛 `.br-body` 패딩(34px)과 짝인데
     지금 패딩은 18px이라, 남겨 두면 버튼 줄이 지면 밖으로 16px씩 삐져나온다. */
@media (min-width: 768px) {
  .br-nav { margin: 4px 0 0; padding: 8px 0 4px; min-height: 0; }
  .br-nav .btn { min-height: 46px; }
  .br-save { margin: 4px 0 0; padding: 8px 0 4px; }
}
/* ⚠ 좁은 프레임의 음수 여백도 같은 이유로 걷었다(위 주석) — 지면 패딩 안에 놓는다. */

/* 🔴 **넓은 칼럼에서 [다음]은 칼럼 폭을 다 먹지 않는다.** 1045px짜리 파란 띠는 버튼이 아니라
      배너로 읽힌다(실측 스크린샷 — 화면에서 제일 큰 물체가 카드가 아니라 버튼이었다).
      폭을 묶고 오른쪽에 세우면 ① 마지막 선택지에서 눈이 가장 가까운 자리에 서고
      ② 파랑이 화면을 지배하지 않는다.
   ⚠ 좁은 화면(<1080)에서는 예전 그대로 폭을 채운다 — 손가락으로 누르는 화면에서는 넓은 버튼이
     맞다. 여기서 바꾸는 것은 마우스로 쓰는 화면뿐이다.
   ⚠ **이 블록은 위 `[data-brief-next]{flex:1}` 뒤에 와야 한다** — `@media`는 특이도를 올리지
     않아서, 두 칸 배치 블록(파일 위쪽)에 적었더니 나중에 나오는 `flex:1`에 그대로 졌다. */
@media (min-width: 768px) {
  .br-save { width: auto; min-width: 240px; margin-left: auto; display: block; }
}

/* ── 2·3단계 · 인라인 첨삭 패널 ────────────────────────────────
   모달(견적)과 달리 폼 안에 그대로 놓이므로, 카드 한 장처럼 보이게 테두리만 두른다.
   ⚠ display는 주지 않는다 — 주면 조각의 `[hidden]`을 이겨서 **감춘 줄 알았던 패널이 계속
     보인다**(annotate.css의 `.ip[hidden]`이 감추는 유일한 근거다). */
.br-step > .ip {
  margin-top: var(--s-lg); padding: var(--s-xl);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}

/* ── 4단계 · 확인 카드 ──────────────────────────────────────────
   ⚠ <pre>다: 저장될 글은 줄바꿈이 의미를 지니고(원문 뒤에 가이드 답이 한 줄씩 붙는다)
     세무사가 보는 모양 그대로여야 확인이 된다. pre-wrap으로 가로 스크롤은 막는다.
   ⚠ 회색 바탕(--surface-alt) 위에 --text-tertiary를 쓰지 마라(대비 4.2:1, app.css 경고). */
.br-final {
  margin: var(--s-md) 0 0; padding: var(--s-lg); max-height: 46vh; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-secondary);
  font-family: inherit; font-size: 14px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  /* 저장될 글은 여기서 **읽는다** — 칼럼이 1100px여도 한 줄이 그만큼 길면 다음 줄 첫 글자를
     못 찾는다. 폭 상한은 tokens.css의 읽기 폭 토큰 그대로다(새 값을 만들지 않는다). */
  max-width: var(--reading-max);
}
.br-qs { margin-top: var(--s-lg); }
.br-qs ol { margin: var(--s-sm) 0 0; padding-left: var(--s-xl); }
.br-qs li { font-size: 14px; line-height: 1.7; color: var(--text-secondary); padding: 1px 0; }

/* 정리가 붙는지 아닌지를 저장 전에 한 줄로 말해 준다 — [정리 없이 그대로 쓰기]로 온 사람이
   "AI가 정리해 준 줄 알았다"가 되지 않게. */
.br-mode-off { color: var(--text-tertiary); }

/* ══ 견적요청서 고르기·보관함 (D-191 §4 — B3 진입점 전환) ════════════════════════
   ⚠ 라디오 줄 자체는 app.css의 `.qw-opt`를 **그대로 재사용**한다(체크 표시·선택 배경까지).
     여기 있는 것은 그 줄 옆에 [보기]를 붙이는 배치뿐이다 — 같은 부품을 두 벌로 두지 않는다.
   ⚠ 새 색·모서리를 만들지 않는다. 전부 tokens.css 값이다. */

.br-pick { display: flex; flex-direction: column; gap: 8px; }
/* [보기]는 라벨 밖에 선다(라벨 안에 두면 확인하려고 누른 순간 선택이 바뀐다 — 조각 주석 참고).
   그래서 줄을 flex로 잡고 라벨이 남는 폭을 전부 가져간다. */
.br-pick-row { display: flex; align-items: stretch; gap: 8px; }
.br-pick-row > .qw-opt { flex: 1; min-width: 0; }
/* 여기는 **하나만** 고르는 자리다 — app.css의 네모 체크 표시를 동그라미로 바꾼다.
   모양이 체크박스면 "여러 개 고를 수 있나" 싶어 두 번 누르게 된다(체크 아이콘은 그대로 둔다:
   고른 것이 무엇인지 말하는 표시라 라디오에서도 읽힌다). */
.br-pick-row > .qw-opt::before,
.br-pick-row > .qw-opt:has(input:checked)::before { border-radius: var(--r-full); }
.br-pick-view {
  flex: 0 0 auto; align-self: center; padding: 6px 10px;
  font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap;
}
.br-pick-view:hover { text-decoration: underline; }

/* 이미 고른 견적요청서 한 장 — 목록 대신 이것만 남는다(빠른 상담). */
.br-chosen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--primary);
  border-radius: var(--r-lg); background: var(--primary-light);
}
.br-chosen-main { flex: 1; min-width: 180px; }

/* 견적요청서가 없을 때의 유도 카드 — 여기서 끝나면 안 되므로 [만들기]가 주행동이다. */
.br-blank { margin-top: 16px; }

/* 목록 옆 작은 출구. 버튼이 아니라 글자 링크다 — 주행동([보내기])과 무게를 다르게. */
.br-newlink {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.br-newlink:hover { text-decoration: underline; }

/* ══ 보관함 화면 머리 (/briefs — D-241) ══════════════════════════
   🔴 **[만들기]는 폭 100%가 아니다.** 예전에는 `style="width:100%"`라 1440에서 1376px짜리
      파란 띠였고 글자는 112px — **잉크가 8%**였다(실측. 1920에서는 6%). 목록보다 버튼이 커
      보이는 화면이었다. 제목 옆으로 올리고 폭을 글자에 맞춘다.
   ⚠ 좁은 화면(≤640)에서는 예전처럼 폭을 채운다 — 손가락으로 누르는 화면에서는 그게 맞다. */
/* 🔴 이름이 **`.br-listhead`**다 — `.br-head`가 아니다. `.br-head`는 작성 화면(/briefs/new)의
      진행률 상자가 이미 쓰고 있어서, 여기에 같은 이름으로 `display:flex`를 걸었더니
      **작성 화면의 진행 바가 통째로 사라졌다**(실측: `.br-meter`가 58px로 쪼그라들어 바 폭 0).
      두 화면이 같은 CSS 파일을 공유한다 — 새 이름을 지을 때 이 파일을 먼저 grep할 것. */
.br-listhead { display: flex; align-items: flex-start; gap: var(--s-lg); flex-wrap: wrap; }
.br-listhead-txt { flex: 1 1 320px; min-width: 0; }
/* 🔴 제목이 **혼자 24px이었다**(D-704, 실측). `.section > h2`(app.css, 22px)는 «직계»라
   `.br-listhead-txt` 안에 든 이 h2에는 안 걸리고 UA 기본 1.5em(24px)이 떴다 — 그래서 목록만
   상세(22px)보다 두 눈금 컸다. 같은 값을 여기서 한 번 더 못박는다.
   ⚠ `.section > h2`의 `margin-bottom`은 물려받지 않는다 — 이 자리는 `.br-listhead`의 gap이
     간격을 지므로 아래 여백을 0으로 둔다(안 그러면 안내 줄과 두 겹이 된다). */
.br-listhead-txt h2 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: var(--ls-xl); }
/* 안내 한 줄에는 읽기 폭을 건다 — 1440에서 107자, 1920에서 143자까지 늘어나던 자리다(실측).
   카드·격자까지 좁히지는 않는다(D-154) — 상한은 **글 본문에만** 건다는 tokens.css 규칙 그대로.
   ⚠ `.br-lead`도 작성 화면과 공유하는 이름이라 **여기 안에서만** 상한을 건다. */
.br-listhead .br-lead { margin-top: 6px; max-width: var(--reading-max); }
.br-cta { flex: 0 0 auto; margin-top: 4px; }
@media (max-width: 640px) { .br-cta { width: 100%; } }

/* 자동 저장 표시 — 작성 영역 오른쪽 위. 질문과 다투지 않게 작고 흐리다(시안 상단 바 우측). */
.br-autosave {
  text-align: right; font-size: 12px; color: var(--br-hint);
  margin-bottom: 10px; min-height: 18px;
}
.br-autosave[hidden] { display: none; }

.section > .br-alert, .section > .br-notice { margin-top: var(--s-md); }
/* 지운 개수를 말하는 자리. 초록·빨강을 새로 만들지 않고 강조색 테두리만 쓴다. */
.br-notice { border-color: var(--primary); color: var(--primary-pressed); }

/* 빈 상태 — 글자가 20~22자인데 카드가 1835px이던 자리다(실측: 글자가 카드의 13%).
   카드를 화면 폭에 맞추지 말고 **글에 맞춘다**. */
.br-empty {
  margin-top: var(--s-md); max-width: 520px; margin-inline: auto;
  padding: 40px 24px; text-align: center;
}
.br-empty-lead { margin-top: 8px; }
/* 빈 상태의 [만들기] — 목록 화면과 고르기 조각(brief-picker :: blank)이 같이 쓴다. */
.br-empty-cta { margin-top: var(--s-lg); min-width: 200px; }
@media (max-width: 640px) { .br-empty-cta { width: 100%; } }

/* ══ 보관함 관리 — 고르기 + 지우기 + 상담에 쓰기 (D-241) ═════════ */
.br-manage { margin-top: var(--s-lg); }
.br-manage-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap; margin-bottom: var(--s-sm);
}
/* [전체 선택]은 누르는 것이라 48px 규칙을 따른다(글자만 작다고 타깃까지 작아지지 않는다). */
.br-all {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.br-all input { width: 18px; height: 18px; accent-color: var(--primary); }
/* ⚠ author display가 UA의 `[hidden]{display:none}`을 이긴다 — 못을 안 박으면 JS가 없는
     화면에서 눌러도 아무 일 없는 [전체 선택]이 그대로 보인다(.ip 패널과 같은 함정). */
.br-all[hidden] { display: none; }

/* 여럿 고르는 자리라 **네모**다 — 동그라미는 하나만 고르는 자리에 쓴다(.iw-opt 규약).
   고르기 조각(brief-picker)의 행은 진짜 라디오를 그대로 보여 준다(.br-row input).
   ⚠ 여기만 체크박스를 **가상요소로 그린다**: 진짜 체크박스를 쓰면 브라우저마다 크기·색이
     달라 같은 줄의 라디오와 눈에 띄게 어긋난다. 대신 진짜 input은 감추되 접근성 트리에는
     남긴다(opacity:0 — display:none이면 낭독기에서 사라지고 폼에도 안 실린다). */
.br-row-multi { position: relative; padding-left: 16px; }
.br-row-multi input[type="checkbox"] { opacity: 0; width: 20px; height: 20px; flex: none; margin: 0; }
.br-row-multi::before {
  content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.br-row-multi:has(input:checked)::before {
  border-color: var(--primary); background: var(--primary) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.br-row-multi:has(input:checked) { border-color: var(--primary); background: #F7FAFF; }

/* 고른 것으로 하는 일 — **화면 아래에 붙는다**. 30개까지 보관되는 목록이라 아래로 굴러가면
   이 줄이 화면 밖으로 사라진다(고르고 나서 갈 곳을 못 찾는다). sticky라 CSS만으로 서고,
   문서 끝에서는 자기 자리를 그대로 차지해 아래 내용을 가리지 않는다.
   ⚠ 배경을 깔지 않으면 밑을 지나가는 카드가 버튼 사이로 비친다(--background 그대로 쓴다). */
.br-bulk {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap;
  margin-top: var(--s-md); padding: var(--s-md) 0 calc(var(--s-md) + env(safe-area-inset-bottom, 0px));
  background: var(--background); border-top: 1px solid var(--divider);
}
.br-bulk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* 잠긴 버튼도 **왜 잠겼는지**를 옆 문장이 말한다 — 회색 버튼만 남기면 고장으로 읽힌다. */
.br-bulk .btn:disabled { opacity: .45; cursor: not-allowed; }
/* 🔴 좁은 화면에서는 **한 줄에 세 개를 다 넣는다.** `flex:1 1 auto`로 두었더니 세 버튼이
      두 줄로 접혀 sticky 줄이 **150px**를 먹었다(실측 375×812 — 화면의 18%를 상시 가림).
      `flex:1 1 0` + 글자·좌우 여백을 줄이면 343px 안에 한 줄로 선다.
   ⚠ 높이는 줄이지 않는다 — 48px는 손가락 규칙이라 좁은 화면일수록 지켜야 한다. */
@media (max-width: 560px) {
  .br-bulk { align-items: stretch; gap: var(--s-sm); }
  .br-bulk-acts { width: 100%; gap: 6px; flex-wrap: nowrap; }
  .br-bulk-acts .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 13px; }
}

/* ── 보관함 목록 (마이페이지 요약) ───────────────────────────── */
.br-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.br-item { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
/* 마이 안에서는 카드 안의 카드가 되므로 테두리·그림자를 벗긴다(줄로만 보이게). */
.br-item-flat {
  padding: 12px 0; border-radius: 0; box-shadow: none; background: none;
  border: 0; border-top: 1px solid var(--divider);
}
.br-list > .br-item-flat:first-child { border-top: 0; }
.br-item-main { flex: 1; min-width: 180px; display: block; color: inherit; }
.br-item-title { word-break: break-word; }
/* 본문 미리보기는 두 줄까지 — 세 줄이 넘어가면 목록이 아니라 글 모음이 된다. */
.br-item-body {
  margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-tertiary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; white-space: pre-wrap;
}
.br-item-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 삭제는 되돌릴 수 없다(원문이 평문으로 남아 진짜로 지운다) — 색으로 그 무게를 말한다.
   기본 상태에서는 테두리만 물들이고, 누를 때 채운다(오폭을 부르는 빨간 버튼을 만들지 않는다). */
.br-danger { color: var(--error); }
.br-danger:hover { border-color: var(--error); background: var(--surface-alt); }

/* ── 상세 · 보내기 / 지우기 ────────────────────────────────── */
.br-send-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.br-send-actions .btn { flex: 1; min-width: 160px; }
.br-delete { border-color: var(--divider); }

/* ══ 인테이크 S1·S2·S3 (견적 인테이크 설계명세 v4 §3·§7) ══════════════════════
   ⚠ 접근성(§7): 터치 타깃 최소 48×48 · 선택 상태를 **색만으로 알리지 않는다**(테두리 굵기와
     배경을 동반한다, WCAG 1.4.1) · 본문 대비 **4.5:1 이상**.

   🔴 **글자색은 --primary가 아니라 --primary-pressed다.** 실측(대비 계산):
        --primary(#3182F6) 위 --primary-light(#E8F3FF)  = 3.31:1  ✗   ← 고른 옵션·칩 글자
        --primary(#3182F6) 위 --surface(#FFFFFF)        = 3.71:1  ✗   ← 크럼·날짜 모드 전환
        --primary(#3182F6) 위 --surface-alt(#F2F4F6)    = 3.37:1  ✗
        --primary-pressed(#1B64DA) 위 --primary-light   = 4.82:1  ✓
        --primary-pressed(#1B64DA) 위 --surface         = 5.42:1  ✓
        --primary-pressed(#1B64DA) 위 --surface-alt     = 4.91:1  ✓
      파랑은 **테두리·배경**에서 이미 충분히 말하고 있다(--primary 그대로 둔다). 글자만
      한 칸 어둡게 내린다 — 새 색이 아니라 같은 램프 위 기존 토큰이다.
   🔴 색을 내려도 **색만으로 표시하지 않는다**는 규칙은 그대로다 — 선택 상태는 테두리 굵기
      (1.5px → 2.5px) + 배경 + 굵기(700)가 함께 말한다. 아래 규칙에서 그 셋을 지울 것.
   ⚠ 모션(§7): 단계 전환 220ms · 입력칸 펼침 180ms · 선택 피드백 120ms.
     🔴 금액 카운트업·숫자 롤링은 만들지 않는다 — 세금 맥락에서 숫자가 움직이면 불안을 만든다.
     그래서 .iw-kor(한글 병기)에는 transition을 주지 않는다: 값이 바뀌면 **그 자리에 그대로 선다**.
   ⚠ 감추기는 JS가 `hidden`으로만 한다(파일 머리말). 아래 `[hidden]` 규칙은 author display가
     UA의 `[hidden]{display:none}`을 이기는 것을 막는 못이다. */

/* 🔴 `.iw-s4`가 이 목록에 있는 이유: 아래에서 `display:grid`를 준다 — author display는 UA의
      `[hidden]{display:none}`을 **이긴다**. 못을 안 박으면 JS가 감춘 S4가 S1 위에 그대로 남는다
      (.ip 패널·`.iw-date-part`에서 이미 겪은 함정과 같다). */
.iw-step[hidden], .iw-crumbs[hidden], .iw-s4[hidden],
.iw-opt[hidden], .iw-sub[hidden] { display: none; }

/* 🔴 **`min-width: 0`이 없으면 카드가 칼럼 밖으로 삐져나간다.** `<fieldset>`은 브라우저 기본이
      `min-inline-size: min-content`라 **자기 안쪽 내용보다 좁아지지 않는다** — 보통은 안 보이는
      성질인데, 아래 `.iw-opts`에 `max-width: 1100px`을 걸자 바로 터졌다: 1280 화면에서 칼럼은
      892px인데 카드가 **1134px로 자라 화면 오른쪽이 잘렸다**(실측. 3열이 그대로 밖으로 나갔다).
      1440·1920에서는 칼럼이 1100보다 넓거나 좁아 안 걸리고, **딱 그 사이 구간에서만** 터진다.
   ⚠ 이 한 줄을 지우면 같은 사고가 되돌아온다. `.iw-opts`의 상한과 짝이다. */
.iw-step { margin-top: var(--s-md); min-width: 0; }
/* 🔴 **`float`이 없으면 질문이 카드 테두리를 끊는다.** `<legend>`는 기본값이 그냥 블록이
      아니라 **테두리 위에 얹히는** 특수 상자다 — 카드(fieldset)의 윗변에 구멍을 내고 그 자리에
      앉는다. 질문을 16px에서 20px로 키우자 그 구멍이 눈에 띄기 시작했고, 화면에서는 "카드가
      깨졌다"로 읽혔다(실측 1440: legend가 카드와 같은 y=136 — 안쪽 여백을 무시하고 윗변 위).
      `float`을 주면 legend가 보통 블록으로 돌아와 **카드 안쪽**으로 들어오고 테두리가 이어진다.
   ⚠ `width:100%`가 짝이다 — float은 폭이 글자만큼 줄어서, 없으면 뒤 형제가 옆으로 붙는다.
   ⚠ `~ *`로 뒤 형제를 전부 clear한다: float은 부모 높이에 안 잡히므로 안 치우면 부제·선택지가
     질문 위로 겹쳐 올라간다. S1(legend → 부제 → 목록)·S3(눈썹 → legend → 부제 → 칸) 둘 다
     이 한 줄로 선다. */
.iw-step > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; }
.iw-step > legend ~ * { clear: both; }
.iw-eyebrow { margin-bottom: var(--s-xs); }

/* 🔴 **질문이 답보다 커야 한다.** 개편 전 실측: 질문 16px/600 · 선택지 15px/700 —
      답이 질문보다 굵게 보였고, 다섯 층위(12 · 12.5 · 15 · 16 · 22)가 폭 10px 안에 눌려 있었다.
      질문을 20px/700로 올려 층을 벌린다(제목 24 > 질문 20 > 곁라벨 16 > 선택지 16/700 >
      부제 12). 자간은 D-161 스케일에서 19~23px 칸의 값이다 — 새 값을 만들지 않는다.
   ⚠ 이 클래스는 legend(S1·S3)·div(S2 그룹 제목)·label(S4)에 함께 붙는다. 셋이 같은 역할이라
     같은 크기여야 하는데, 예전에는 공통 클래스 `t-label1`(16/600)을 나눠 쓰고 있었다. */
/* 🔴 질문은 **24px**이다(D-243 시안 타입 스케일). 작성 영역이 흰 판 하나가 되면서 카드
      테두리가 사라졌으니, 질문과 선택지를 가르는 것은 이제 크기뿐이다. */
.iw-q {
  font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.015em;
  color: var(--br-title-c);
}
.iw-qsub { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--br-hint); }
/* 세목 eyebrow — 질문 위 한 줄(세법명). 흰 배경 위 브랜드 텍스트는 brand-700이다(AA). */
.iw-eyebrow { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--br-b700); }

/* 🔴 **질문 카드의 테두리를 뺐다**(시안 L-01). 흰 작성 영역 안에 또 흰 카드를 두면 판이
      두 겹으로 보이고, 정작 골라야 할 선택지 카드와 같은 문법이 된다. 카드는 선택지만. */
.iw-step.card {
  border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0;
}

/* 「N개 모두 선택 입력」 배지 — S3 헤더의 안내 문장을 대신한다(시안 5절). */
.iw-optional-badge {
  display: inline-flex; align-items: center; margin-top: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--br-b050); color: var(--br-b700);
  font-size: 12px; font-weight: 600;
}
.iw-optional-badge[hidden] { display: none; }

/* 「고르기 어려우면」 — 격자에서 분리한 출구(시안 3-C).
   ⚠ 점선 + slate-50은 "고를 것"이 아니라 "고를 게 없을 때"라는 뜻이다. 실선 카드와 섞지 마라. */
.iw-escape { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--br-line); }
.iw-escape-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--br-optline);
  margin-bottom: 8px;
}
/* ⚠ 이 블록의 카드 규칙은 **`.iw-opt` 정의 아래**에 있다(파일 뒤쪽). 여기 적으면
     `.iw-escape .iw-opt{…}`가 `.iw-opt{`보다 먼저 나와, 규칙 본문을 문자열로 잘라 보는
     계약 테스트(BriefWriteContractTest)가 **이 블록을 기본 규칙으로 착각한다**(실측: 2건 실패). */
/* 그룹 사이 구분선 — **앞 그룹이 실제로 보일 때만**.
   🔴 `.iw-sub + .iw-sub`만 쓰면 JS가 한 그룹만 펴 놓은 화면에서도 규칙이 걸린다(인접 형제는
      `hidden`이어도 형제다). 실측: 카드 안 첫 줄 위에 **어디에도 안 붙는 가로선**이 뜨고
      위쪽에 36px 빈칸이 생겼다. 앞 형제에 `:not([hidden])`을 걸면 JS 화면에서는 절대 안 걸리고,
      전 그룹이 펼쳐진 폴백 폼(R2)에서는 예전 그대로 그룹마다 선이 선다. */
.iw-sub:not([hidden]) + .iw-sub { margin-top: var(--s-xl); padding-top: var(--s-lg); border-top: 1px solid var(--divider); }

/* 🔴 **S1 아홉 칸이 전부 서 있는 목록이다**(D-236 — [+6개 더 보기] 폐지). 접기가 사라진
      만큼 세로가 길어져서, 칸 높이·간격·열 폭을 전부 다시 쟀다. 아래 두 값이 그 결과다.

   ⚠ 열 최소 폭 **300px**(예전 240px). 240px 열에서는 가장 긴 대분류 문장
     ("집·땅·주식을 팔았거나, 팔려고 해요" — 15px/700에서 **207px**)이 동그라미·여백을 빼고
     남는 175px에 못 들어가 **두 줄로 접혔다**. 한 줄짜리 문장을 두 줄로 접으면 목록을 훑는
     비용이 올라간다(§3 S1 의도 — 모르는 사람은 큰 문장만 읽는다). 207 + 동그라미 22 +
     칸사이 12 + 좌우 패딩 28 + 테두리 3 = **272px**가 한 줄의 하한이고, 300px는 그 위의
     여유값이다(글꼴이 Pretendard로 바뀔 때의 폭 차이를 흡수한다).
   ⚠ `min(100%, 300px)`인 이유: 그냥 `minmax(300px, 1fr)`로 두면 폭이 300px보다 좁은 화면
     (360dp 기기의 카드 안은 294px다)에서 **트랙이 컨테이너를 넘어 가로 스크롤**이 생긴다.
     `min(100%, …)`은 좁을 때 100%로 내려앉아 한 열이 된다 — 실측으로 확인했다.
   ⚠ 간격 8px → 6px. 열 개수를 늘리지 않으면서 열 칸 하나당 벌 수 있는 자리다(10칸 × 2px). */
/* 🔴 **두 열 고정**이다(D-243 시안 C-03). 세 열에서는 열 폭이 좁아 제목이 두 줄로 접혔고,
      아홉 칸이 3×3으로 딱 떨어지지 않아 마지막 줄에 한 칸만 남는 배치가 늘 생겼다.
      두 열이면 제목이 한 줄에 서고, 홀수 개도 마지막 줄이 반쯤 차서 덜 어색하다.
   ⚠ `auto-fill`이 아니라 고정 2열이다 — 개수와 무관하게 열 폭이 같아야 화면이 안 튄다.
     좁은 화면에서는 아래 미디어쿼리가 한 열로 내린다. */
.iw-opts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
  /* 두 열이라 폭 상한은 그 자체로 걸린다 — 고른 뒤 다음 질문 첫 항목까지의 가로 이동이
     한 열 폭(≈540px)을 넘지 않는다(D-237의 1448px 사고가 여기서 끝난다). */
  max-width: 1100px;
}
@media (max-width: 640px) { .iw-opts { grid-template-columns: minmax(0, 1fr); } }
/* 한 줄 = [동그란 표시] + [큰 글씨 / 부제] 두 칸 그리드.
   🔴 **표시(::before)를 붙인 이유**는 둘이다. ① 사용자 지시의 "간단한 버튼식 선택" — 카드만
      있으면 "눌러서 여는 것"으로도 읽히는데, 동그라미가 있으면 "하나 고르는 자리"로 읽힌다.
      ② §7의 "색만으로 알리지 않기"를 **모양**으로 한 겹 더 받친다(테두리 굵기·배경에 더해).
   ⚠ 체크 아이콘은 app.css `.qw-opt::before`와 **같은 data URI**다 — 같은 뜻에 두 가지 모양을
     만들지 않는다. 모서리만 동그랗게(여기는 하나만 고르는 자리, 저기는 네모=여러 개).
   ⚠ 라디오 input은 position:absolute라 그리드 아이템이 아니다(칸을 차지하지 않는다). */
/* 🔴 세로를 **12px 줄였다**(69px → 57px, 실측). S1이 아홉 칸을 전부 펴게 되면서 목록이
      760px → 627px가 됐다(D-236). 줄인 곳은 위아래 패딩(12 → 9)과 두 줄 사이(2 → 0)이고,
      글자 크기는 큰 글씨 15px 그대로다 — 훑는 데 쓰는 글자를 줄이면 목록을 짧게 만든 뜻이 없다.
   ⚠ `min-height: 56px`은 그대로다. 여기서는 안 걸리지만(57px), 부제가 없는 S2의
     [잘 모르겠어요]는 이 값이 없으면 41px로 서서 48×48 규칙(§7)을 깬다. */
/* 🔴 선택 시 테두리가 1px → 2px로 굵어지므로 **padding을 1px 줄인다**(시안 3-C).
      안 그러면 고를 때마다 카드가 2px씩 커져 격자 전체가 흔들린다. */
.iw-opt {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 0; align-content: center; cursor: pointer;
  min-height: 60px;                      /* 48×48 이상 — 손가락으로 누르는 자리다(§7) */
  border: 1px solid var(--br-line); border-radius: var(--r-md);
  padding: 14px 16px; background: var(--surface);
  transition: border-color 120ms ease, background 120ms ease;
}
/* 🔴 안 고른 상태의 테두리는 **--grey500**이다. 이 동그라미는 장식이 아니라 "고를 수 있는
      자리"를 말하는 UI 경계라 WCAG 1.4.11의 3:1이 걸린다. 실측(흰 배경 기준):
        --grey300(#D1D6DB) = 1.48:1 ✗   ← app.css `.qw-opt::before`가 쓰는 값
        --grey400(#B0B8C1) = 2.00:1 ✗
        --grey500(#8B95A1) = 3.04:1 ✓
      app.css의 네모 표시와 값이 갈리는 것은 알고 한 것이다 — 그쪽은 여러 화면이 함께 쓰는
      부품이라 여기서 건드리지 않는다(별도 과제). 모양·체크 아이콘은 그대로 물려받는다. */
.iw-opt::before {
  content: ''; grid-column: 1; grid-row: 1 / -1; align-self: center;
  width: 22px; height: 22px; border-radius: var(--r-full);
  border: 1.5px solid var(--grey500); background: var(--surface);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.iw-opt > .iw-opt-t { grid-column: 2; grid-row: 1; }
.iw-opt > .iw-opt-d { grid-column: 2; grid-row: 2; }
/* 🔴 **마우스가 있는 기기에서만 hover를 켠다.** 손가락으로 고르면 220ms 뒤 다음 화면이
      뜨는데(brief-write.js autoAdvance), 그때 <b>손가락은 그 자리에 그대로</b> 있다. 터치
      브라우저는 마지막으로 누른 지점의 `:hover`를 다음 탭까지 붙들고 있으므로, 새 화면에서
      그 자리에 온 항목이 <b>고르지도 않았는데 파란 테두리</b>를 얻는다(실측: S1 첫 항목을
      탭한 뒤 S2의 '살던 집이에요'가 `:hover`로 파랗게 떴다). 고른 상태(2.5px + 배경 + 체크)와
      다르긴 해도, 방금 무엇을 골랐는지 확인하려고 보는 그 순간에 뜨는 가짜 표시다.
   ⚠ `@media (hover: hover)`는 <b>주 입력장치가 hover를 할 수 있는가</b>를 묻는다 — 터치
     기기에서는 이 블록이 통째로 안 걸리므로 잔상 자체가 생기지 않는다. 마우스에서는 커서가
     실제로 그 위에 있는 것이라 hover가 맞다(그래서 `pointer: fine`까지 걸지 않았다 —
     터치도 되는 노트북에서 마우스 hover까지 죽는다). */
@media (hover: hover) {
  .iw-opt:hover { border-color: var(--primary); }
}
.iw-opt input { position: absolute; opacity: 0; pointer-events: none; }
/* 눌리는 순간의 대답 — 120ms(§7 선택 피드백). 카드가 아주 살짝 눌린다. 이 값은
   prefers-reduced-motion에서 통째로 꺼진다(아래 @media). */
.iw-opt:active { transform: scale(0.985); }
/* 선택 상태 — 색 + **테두리 굵기** + 배경 + **동그라미 안의 체크**. 색각 이상에서도 읽힌다(§7). */
/* ⚠ 패딩이 1px 줄어드는 것은 테두리가 1.5 → 2.5px로 굵어지는 만큼을 되돌려 **칸 높이를
     그대로 두려는** 것이다(고를 때마다 목록이 1px씩 밀리면 아래 칸들이 흔들린다).
     패딩 값을 고칠 때는 이 짝(9/8 · 14/13)을 함께 고쳐야 한다. */
.iw-opt:has(input:checked) {
  border-color: var(--primary); border-width: 2px; padding: 13px 15px;
  background: var(--br-b050);
}
.iw-opt:has(input:checked)::before {
  border-color: var(--primary); background: var(--primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
.iw-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
/* ⚠ `word-break: keep-all` — 한국어는 기본값(normal)에서 <b>음절 단위로</b> 끊긴다.
     한 줄에 안 들어가면 "팔았거나"가 `팔` / `았거나`로 갈리는데, 그건 읽다 멈추게 만든다.
     keep-all은 띄어쓰기에서만 끊는다. 짝인 `overflow-wrap: break-word`가 없으면 띄어쓰기가
     없는 긴 낱말("상가·토지·건물이에요")이 칸을 넘어 <b>글자가 밖으로 샌다</b> — 좁은 화면
     (320dp)에서 실측으로 확인했다. 넘칠 때만 마지막 수단으로 끊게 둔다. */
/* 🔴 15px → **16px**(D-237). 이 줄이 목록을 훑을 때 실제로 읽는 유일한 글자인데, 질문(20px)과
      부제(12px) 사이에서 15px은 부제 쪽에 붙어 보였다. 16px은 D-161의 `--ls-lg` 칸이지만
      자간은 적지 않는다 — body의 -0.2px와 -0.3px 차이가 이 크기에서는 안 읽히고, 여기서만
      값을 찍으면 그게 다시 "제목마다 자간이 다른" 상태의 씨앗이 된다.
   ⚠ **칸 높이는 그대로 56px이다**(실측). 두 줄 합이 19.5+16.8 → 20.8+16.8로 1.3px 늘지만
     위아래 패딩 18을 더해도 55.6이라 `min-height:56px`이 여전히 이긴다 — D-236이 잰 목록
     길이(375폭에서 627px)가 유지된다.
   ⚠ **한 줄 하한도 그대로 300px 안이다**: 가장 긴 문장("집·땅·주식을 팔았거나, 팔려고 해요")의
     ink는 15px에서 207px이었으니 16px에서는 221px이고, 동그라미 22 + 칸사이 12 + 좌우 패딩 28
     + 테두리 3을 더해 **286px** — `.iw-opts`의 열 최소 폭 300px 아래다. 375폭 한 열(309px)에서
     글자에 남는 폭은 244px이라 여기서도 안 접힌다. */
.iw-opt-t {
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--br-title-c);
  word-break: keep-all; overflow-wrap: break-word;
}
.iw-opt:has(input:checked) .iw-opt-t { color: var(--br-b700); font-weight: 700; }
/* 부제 12.5 → 12px · 줄높이 1.5 → 1.4. 세목을 **확인하는** 줄이라 훑는 글자보다 작아도 되고,
   9칸이 전부 서는 목록에서는 이 0.5px가 칸마다 쌓인다(§3 S1 의도 — 큰 글씨가 주인공이다). */
.iw-opt-d { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--br-hint); }
/* 부제도 고른 순간 바탕이 바뀐다 — 흰 바탕에서 4.83:1이던 --br-hint가 옅은 파랑 위에서는
   더 떨어진다(같은 글자가 고르고 나면 안 보이게 되는 셈이다). 브랜드 램프 안에서 한 칸 진하게. */
.iw-opt:has(input:checked) .iw-opt-d { color: var(--br-b700); }
/* ══ 입력 필드 다섯 상태 (D-243 시안 C-01·3-A) ═══════════════════════════════════
   🔴 **회색 fill을 버렸다.** 채워진 바탕은 화면 어디서나 「비활성」 신호인데, 이 화면은 칸이
      여섯 개씩 서는 화면이라 전체가 잠긴 것처럼 보였다(실측 스크린샷). 흰 배경 + 테두리로
      바꾸면 "지금 적을 수 있는 칸"이 되고, 상태는 테두리가 말한다.
   ⚠ 범위를 `.br-page` 안으로 묶는다 — `.input`은 앱 전체가 쓰는 이름이라 여기서 전역을
     바꾸면 예약·리뷰·Q&A 폼이 같이 흔들린다. */
.br-page .input,
.br-page textarea.input {
  height: 48px; border-radius: 8px; padding: 0 14px;
  border: 1px solid var(--br-fieldline); background: var(--surface);
  color: var(--br-title-c); font-size: 15px;
}
.br-page textarea.input { height: auto; padding: 12px 14px; line-height: 1.7; }
.br-page .input::placeholder { color: var(--br-optline); }
.br-page .input:focus, .br-page .input:focus-visible {
  border-color: var(--primary); border-width: 2px; padding: 0 13px;
  outline: none; box-shadow: 0 0 0 3px rgba(49, 130, 246, .20);
}
.br-page textarea.input:focus { padding: 11px 13px; }
/* 값이 들어오면 테두리 한 칸 진하게 — "적었다"가 색으로 남는다(:placeholder-shown의 반대). */
.br-page .input:not(:placeholder-shown):not(:focus) {
  border-color: var(--br-optline); font-weight: 600;
}
.br-page .input:disabled { border-color: var(--br-line); background: #F3F4F6; color: var(--br-optline); }
/* 단위 접미사 — 칸 안쪽 오른쪽. AA 4.83:1. */
.iw-unit { color: var(--br-hint) !important; font-size: 12px !important; }

/* (세그먼트 pill 규칙은 `.iw-chip` 정의 한 곳에 있다 — 여기에 다시 적지 마라.) */

/* 본문 글자 수 — 오른쪽 끝에 숫자만.
   ⚠ 예전에는 왼쪽에 격려 문장(「문장이 어색해도 괜찮아요 …」)이 함께 서서 space-between이었다.
     그 문장을 걷어(D-304, 사용자 지시) 칸이 하나뿐이라 flex-end다 — space-between으로 두면
     혼자 남은 숫자가 **왼쪽에 붙는다.** 문장을 되살리려면 이 값도 같이 되돌려야 한다. */
.iw-count-row { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s-md); }
.iw-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--br-hint); }
.iw-count[data-over] { color: var(--warning-dark); font-weight: 700; }

/* 「고르기 어려우면」 상자 안의 카드 — 점선 + slate-50으로 "고를 게 없을 때"임을 말한다.
   (위 `.iw-escape` 블록에서 여기로 내려온 규칙이다 — 그 자리의 ⚠ 주석 참고.) */
.iw-escape .iw-opt { background: var(--grey50); border-style: dashed; border-color: var(--br-optline); }
.iw-escape .iw-opt:has(input:checked) { border-style: solid; background: var(--br-b050); }

/* [잘 모르겠어요] — 답이지 실패가 아니다. 점선으로 성격만 구분한다(§7 막다른 길 금지). */
.iw-opt-unsure { border-style: dashed; }

/* ⚠ `.iw-more`(= [+ 6개 더 보기])는 **없다**(D-236). S1은 아홉 칸을 접지 않고 전부 편다 —
     되살리려면 명세 §3 목업이 아니라 그 결정을 먼저 읽을 것. */

/* 시간순 유도 — 세 점이 "먼저 → 그다음 → 지금"을 눈으로 말한다(§3 S4). */
/* ⚠ **`.iw-order`(번호 목록)는 걷었다**(D-302). 「1. 먼저 2. 그다음 3. 지금」이 세 칸을
   채워야 하는 양식처럼 읽혔다 — 실제로는 한 칸이다. 요령은 아래 `.iw-tips`가 권유형으로 말한다.

   요령 두 줄 — **지시가 아니라 권유**다. 번호를 매기지 않는 이유가 그것이고,
   그래서 글머리도 점 하나로 조용히 둔다. */
.iw-tips { margin: var(--s-sm) 0 0; padding-left: 1.1em; list-style: disc; }
.iw-tips li { padding: 1px 0; }

/* 최종 검토의 제목 칸 — 정리된 글을 보면서 고치는 자리(D-302). */
.br-titlefield { margin: var(--s-md) 0 var(--s-lg); display: grid; gap: 6px; }

/* ── S4 · 이야기 두 칸 (D-237) ──────────────────────────────────
   🔴 **넓은 칼럼에서는 본론과 곁들이가 나란히 선다.** 개편 전에는 다섯 덩이(본문 · 사정 ·
      제목 · 질문 · 안내)가 세로로 쌓여 1920 화면에서도 612px를 굴려야 끝이 보였는데, 정작
      textarea는 1802px로 늘어나 한 줄 127자였다. 열을 가르면 스크롤이 사라지고 글 쓰는 칸이
      읽기 폭으로 돌아온다 — **같은 픽셀을 가로에서 세로로 환전한 것**이다.
   ⚠ 기준은 뷰포트가 아니라 **이 칼럼의 폭**이다(`@container`). 왼쪽 레일이 있는 화면과 없는
     화면에서 같은 칼럼 폭이면 같은 결과가 나와야 한다 — 뷰포트로 재면 1080~1300 구간에서
     레일에 폭을 뺏긴 칼럼이 두 열로 갈려 본문 칸이 320px까지 좁아진다(실측 전 계산).
   ⚠ 곁 칼럼 하한 300px은 [질문 추가] 줄(칸 + 44px 지우기 버튼)이 안 무너지는 값이다. */
.iw-s4 { display: grid; gap: var(--s-xl); }

/* 🔴 **두 칼럼의 «입력칸 윗변»을 맞춘다**(D-304, 사용자 지시 — 「질문 입력폼은 문의내용
      입력폼 높이부터 시작」). 왼쪽 머리는 라벨 + 요령 두 줄, 오른쪽 머리는 라벨 + 한 줄이라
      그냥 두면 오른쪽 첫 칸이 **한 줄 높이만큼 위**에서 시작한다.

   ⚠ **여백을 손으로 맞추지 않는다.** `margin-top: 21px` 같은 숫자는 요령이 한 줄 늘거나
     글꼴이 바뀌거나 320px에서 라벨이 두 줄로 접히는 순간 곧바로 어긋나고, 어긋나도 아무도
     빨개지지 않는다. 대신 두 칼럼을 `subgrid`로 **같은 두 행**(머리 / 몸)에 세운다 —
     머리 행의 높이는 «둘 중 더 큰 쪽»으로 저절로 정해지고, 몸은 언제나 그 아래에서 시작한다.
   ⚠ subgrid를 모르는 브라우저에서는 이 선언이 통째로 무시되어 **개편 전과 같은 모양**으로
     떨어진다(칸이 어긋날 뿐 아무것도 깨지지 않는다). 이 화면은 이미 `@container`를 쓰므로
     지원 하한이 크게 달라지지 않는다.
   ⚠ 한 열로 접힌 좁은 화면에서는 이 규칙이 아예 걸리지 않는다 — 위아래로 쌓이므로 맞출
     윗변 자체가 없다. 그래서 컨테이너 질의 «안»에만 둔다. */
/* 🔴 **문턱을 860 → 820으로 내렸다**(D-308, 실측 근거).
      개편 전 이 값이면 시안의 기준 해상도 **1440px에서도 한 열**이었다 — 실측: 뷰포트 1440일
      때 이 컨테이너의 안쪽 폭이 835px다(1600 이상에서만 974px로 문턱을 넘었다). 시안 목업은
      1440에서 두 열을 그린다.
   ⚠ 내린 만큼 본론 칼럼이 좁아진다: 835 − 360(곁) − 22(간격) = **453px**. 옛 주석이 경계한
     「본문 칸이 320px까지 좁아지는」 구간(문턱 660 근처)에는 아직 한참 못 미친다.
   ⚠ 더 내리지 마라. 1366에서 컨테이너는 764px이고, 거기서 두 열로 갈리면 본론이 382px가 된다 —
     읽기 폭으로도 쓰기 폭으로도 좁다. 그 화면은 한 열이 맞다. */
@container brcol (min-width: 820px) {
  .iw-s4 {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-rows: auto 1fr;
    column-gap: var(--s-2xl);
    /* 머리와 몸 사이 간격은 `.iw-s4-body`의 margin이 정한다(두 칼럼에 같은 값이 붙는다) —
       여기서 row-gap까지 주면 간격이 두 곳에서 더해진다. */
    row-gap: 0;
  }
  /* 🔴 **2행 → 4행**(D-308 §3, 시안). D-304에서는 «머리 / 몸» 두 행만 맞췄는데, 그러면
        입력 시작선은 맞아도 **설명 줄이 서로 다른 높이**에 선다(왼쪽 요령은 두 줄, 오른쪽
        「선택 · 비워 두셔도 괜찮아요」는 한 줄). 시안이 요구하는 것은 네 층의 정렬이다:
          1행 도트+제목 · 2행 설명 · 3행 입력(1fr) · 4행 푸터
        머리와 몸이 **각각 두 행을 물려받아**(중첩 subgrid) 네 행이 통째로 맞는다. */
  .iw-s4 { grid-template-rows: auto auto 1fr auto; }
  .iw-s4-main, .iw-s4-side { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  .iw-s4-head, .iw-s4-body { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}
/* 머리·몸 두 겹은 **넓은 화면에서만 의미가 있다.** 좁은 화면에서는 그냥 블록이고,
   아래 margin 규칙이 개편 전과 같은 간격을 낸다. */
/* ⚠ 개편 전에는 여기 `margin-top`으로 머리↔몸 간격을 냈다. 4행이 된 지금은 «2행(설명)»의
     `padding-bottom`이 그 간격을 낸다(D-308 §3 표: 「padding 4px 0 10px」) — 두 곳에서
     더하면 좌우 열이 서로 다른 만큼 벌어진다. 좁은 화면(한 열)에서도 같은 규칙이다. */
.iw-s4-body { margin-top: 0; }
/* 3행이 늘어나는 칸이다 — 카드가 창 높이를 따라 커질 때 늘어날 곳은 여기뿐이다(S-04). */
.iw-s4-body > .iw-ta { min-height: 240px; height: 100%; }
.iw-s4-qwrap { display: flex; flex-direction: column; gap: 8px; align-content: start; }
.iw-s4-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
/* 🔴 몸통 첫 요소의 자기 여백은 뗀다 — 안 떼면 두 칼럼이 «각자 다른 위 여백»을 갖는다
      (본문 칸 8px · 질문 목록 12px). 간격은 위 `.iw-s4-body` 한 곳이 정한다. */
/* ⚠ 질문 목록은 이제 `.iw-s4-qwrap` **안**이라 자식 선택자(`>`)가 안 닿는다 — 래퍼가 생긴
     순간 이 규칙이 조용히 빠져 오른쪽 입력칸이 12px 내려갔다(실측). 자손 선택자로 둔다. */
.iw-s4-body > .iw-ta, .iw-s4-body .qw-qlist { margin-top: 0; }
/* S4 칸 이름 — 크기는 `t-label1`에서 온다(옆 칼럼 라벨과 한 소스). 여기서는 줄만 바꾼다. */
.iw-fieldlabel { display: block; }
/* 본문 칸은 곁 칼럼보다 길다 — 시간순으로 적는 글이라 세로가 필요하다(§3 S4). */
/* 🔴 **덩이 안의 리듬을 한 벌로 못 박는다**(D-242 — "정렬되지 않고 복잡해 보인다").
      개편 전 이 구간의 위쪽 간격은 6·8·10·14·20px가 뒤섞여 있었고, 그래서 어디까지가 한
      질문이고 어디부터 다음 질문인지가 눈에 안 잡혔다. 규칙은 이제 하나다:
        라벨 → (부제 4px) → 칸 8px → (안내 8px)  ·  덩이 사이는 24px(아래 .iw-s4-side gap)
   ⚠ 값은 전부 tokens.css의 `--s-*`다. 여기서 새 숫자를 만들면 그게 다음 혼란의 씨앗이다. */
/* 🔴 **`display: flex`를 걷었다**(D-304). 곁 칼럼에 덩이가 셋(덧붙일 말·제목·질문)이던 시절
      세로 flex + 24px gap으로 그 셋을 갈랐는데, D-302로 앞의 둘이 빠져 **덩이가 하나**만
      남았다 — 가를 것이 없다. 게다가 이 줄은 위 `@container` 안의 `display: grid`(subgrid
      정렬)보다 **뒤에 있어 그것을 덮어썼다.** 같은 특이도면 나중 줄이 이긴다.
   ⚠ 덩이를 다시 늘리려거든 gap을 되살리되, 넓은 화면의 subgrid 규칙과 부딪히지 않는지
     먼저 확인하라(그 규칙이 이 요소를 grid로 만든다). */
.iw-blk { margin-top: 0; }
.iw-blk > .iw-qsub { margin-top: var(--s-xs); }
/* 질문 덩이도 같은 덩이다 — 위 여백·구분선을 뗀다(간격은 위 gap 하나가 정한다).
   ⚠ 구분선을 지운 이유: 곁 칼럼 세 덩이 중 하나에만 선이 그어져 있어 그 덩이만 딴 화면에서
     온 것처럼 보였다. 덩이를 가르는 일은 간격이 이미 하고 있다. */
.qw-qsection { margin-top: 0; border-top: 0; padding-top: 0; }
.iw-ta { height: auto; padding: var(--s-md); margin-top: var(--s-sm); }
/* 🔴 **글 쓰는 칸에는 폭 상한을 건다.** 본론 칼럼은 1600 화면에서 880px까지 벌어지는데,
      그 폭이면 한 줄이 60자를 넘어 다음 줄 첫 글자를 눈이 못 찾는다 — 개편 전 1802px(127자)에서
      겪은 것과 같은 문제이고, 열을 나눴다고 없어지는 게 아니다. 값은 tokens.css의 읽기 폭
      토큰 그대로다(새 값을 만들지 않는다 — `.br-final`도 같은 토큰을 쓴다).
   ⚠ 곁 칸(덧붙일 사정, 360px)에는 애초에 안 걸린다. */
.iw-ta-tall { min-height: 200px; max-width: var(--reading-max); }
.iw-note { margin-top: var(--s-sm); }
.iw-blk { margin-top: var(--s-xl); }
.iw-blk-t { display: block; }
.iw-blk-input { margin-top: var(--s-sm); }
/* (질문 덩이의 여백·구분선은 위 D-242 규칙이 정한다 — 여기에 다시 적지 마라.) */
/* "선택 · 견적요청서에 함께 담겨요"는 라벨 뒤에 붙는 조건이지 라벨의 일부가 아니다.
   ⚠ 한 줄로 붙여 두면 좁은 곁 칼럼(300~360px)에서 라벨 중간에 줄이 끊겨 <b>질문이 두 동강</b>
     나 보인다(실측). 아랫줄로 내리고 부제 크기로 낮춘다 — `.iw-qsub`와 같은 자리·같은 역할. */
.qw-qopt { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.5; }

/* ── S3 · 입력칸 ─────────────────────────────────────────────── */
/* 🔴 **넓으면 여러 열이다**(D-237). 다섯 칸이 한 열로 쌓이면 1920에서도 스크롤 363px이
      필요했는데(실측), 그 화면에서 date·money 칸은 1802px로 늘어나 있었다. 열을 나누면
      1920에서 스크롤이 0이 되고 칸 폭도 사람이 적는 값에 맞는 크기로 돌아온다.
   ⚠ 열 최소 폭 340px: 연·월 두 칸 + 단위("년"·"개월")가 한 줄에 서는 하한이다.
   ⚠ `min(100%, …)`은 `.iw-opts`와 같은 이유다 — 그냥 `minmax(340px, 1fr)`이면 카드 안쪽이
     340px보다 좁은 화면(375폭에서 309px)에서 트랙이 컨테이너를 넘어 가로 스크롤이 생긴다.
   ⚠ 칸 사이는 `gap`이 맡는다 — 예전의 `margin-top`은 격자에서 첫 행까지 밀어 올린다. */
.iw-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s-lg) var(--s-2xl); margin-top: var(--s-lg);
  /* 열 사이 세로선 정렬 — 라벨 높이가 갈려도 칸 윗변이 맞도록 각 칸을 위에 붙인다. */
  align-items: start;
}
/* 🔴 `both`를 쓰지 않는다(실측 버그). 칸은 S3가 아직 `hidden`인 동안 만들어지므로 애니메이션이
   시작되지 않는데, fill-mode가 `both`면 시작 전 상태(opacity:0)가 그대로 눌러앉아 **칸이 통째로
   안 보인다**(높이는 있는데 투명해서, 빈 카드로 보인다). fill 없이 두면 평소 상태가 곧 최종
   상태(opacity:1)이고, 애니메이션은 돌 때만 얹힌다 — 안 돌아도 보인다. */
.iw-field { animation: iw-open 180ms ease-out; }
@keyframes iw-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.iw-f-label { display: block; font-size: 14.5px; font-weight: 700; padding: 0; }
/* 🔴 **짧은 답에는 짧은 칸.** 두 열로 깔고 나서도 칸 하나가 500px이라, "몇 명인가요"에 답하는
      숫자 두 자리 옆으로 460px이 비어 보였다(실측 1440). 사람이 적는 값의 길이에 칸을 맞춘다 —
      숫자·기간·날짜만 묶고, 글로 적는 칸(text·select·chips)은 열 폭을 그대로 쓴다.
   ⚠ 상한을 `.iw-field` 안쪽 컨트롤에만 건다: `.iw-num`은 S4·다른 화면에서도 쓰인다.
   ⚠ 360px은 연·월 두 칸(각 170 + 간격 8 + 단위 글자)이 한 줄에 서는 하한이자,
     `.iw-fields` 열 하한 340px과 어긋나지 않는 값이다. */
.iw-field > .iw-num,
.iw-field > .iw-period,
.iw-field > .iw-date { max-width: 360px; }
.iw-f-hint { margin-top: var(--s-xs); }
.iw-field .input, .iw-choice { margin-top: var(--s-sm); }
.iw-field .iw-f-hint { margin-top: var(--s-sm); }
/* 숫자 + 단위 — 단위는 칸 안쪽 오른쪽에 붙는다(§4.1 "숫자 + 단위"). */
.iw-num { position: relative; display: flex; align-items: center; }
.iw-num .input { padding-right: 52px; }
.iw-unit {
  position: absolute; right: 14px; font-size: 14px; color: var(--text-tertiary);
  pointer-events: none;
}
.iw-period { display: flex; gap: var(--s-sm); }
.iw-period .iw-num { flex: 1; }

/* ── 날짜 · 연-월-일 피커 + 연·월만 (§4.1 date "연·월만도 허용") ────────────
   두 칸(연·월)은 period와 같은 배치다 — 같은 모양이 같은 뜻이어야 한다.
   🔴 `[hidden]`을 못박는 이유: 아래 `display:flex`는 author 규칙이라 UA의
      `[hidden]{display:none}`을 **이긴다**. 못을 안 박으면 JS가 감춘 칸이 계속 보이고,
      두 모드가 동시에 떠서 어느 칸이 실제로 실리는지 알 수 없게 된다(.ip 패널과 같은 함정). */
.iw-date-part[hidden] { display: none; }
/* 연 / 월 / 일 — 연도가 넓고 월·일은 좁다(적는 글자 수만큼). 시안 3-B. */
.iw-date-part { display: flex; gap: var(--s-sm); }
.iw-date-part .iw-num { flex: 1 1 0; min-width: 0; }
.iw-date-part .iw-num:first-child { flex: 1.4 1 0; }
/* 「선택 입력」 상태 — 점선이 "비워도 된다"를 말한다(시안 3-A 다섯 상태 중 넷째).
   ⚠ 값이 들어오면 실선으로 돌아온다 — 적은 칸과 안 적은 칸이 한눈에 갈려야 한다. */
.br-page .iw-optional .input { border-style: dashed; }
.br-page .iw-optional .input:not(:placeholder-shown) { border-style: solid; }
/* 모드 전환 — 링크가 아니라 버튼이다(누르면 화면이 바뀐다). 48px 규칙은 §7 그대로. */
.iw-date-toggle {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 2px; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--primary-pressed);
  background: none; border: 0; cursor: pointer;
}
.iw-date-toggle:hover { text-decoration: underline; }
/* 적은 값이 **무엇으로 저장되는지** 말하는 한 줄 (brief-write.js dateNote) — 부분 입력 모드에서만
   뜬다(피커가 주는 값은 늘 완전하다). 금액 한글 병기(.iw-kor)와 같은 자리·같은 역할이다.
   ⚠ 자리를 미리 잡아 둔다: 글이 생겼다 사라졌다 하면 바로 아래 [날짜를 정확히 알아요]가
     타이핑 중에 위아래로 튄다(.iw-kor에 min-height를 준 것과 같은 이유).
   ⚠ 조건을 `:not([hidden]) ~`로 거는 이유: 피커 모드에서까지 자리를 비워 두면 칸 아래에
     쓰지도 않는 빈 줄이 늘 남는다. */
.iw-date-part:not([hidden]) ~ .iw-date-note { min-height: 1.2em; margin-top: var(--s-sm); }
/* 🔴 "지금 그대로는 저장되지 않아요"는 회색으로 적으면 안내가 아니라 장식이 된다.
      --warning-dark(#B35F00)는 흰 배경에서 4.61:1이다. --error(#F04452)는 3.71:1이라
      §7 기준에 못 미친다 — 경고색이라고 골랐다가 못 읽히면 없느니만 못하다.
   ⚠ 색만으로 말하지 않는다: 글 자체가 무엇이 잘못됐고 어떻게 하면 되는지 말한다. */
.iw-date-note[data-iw-unsaved] { color: var(--warning-dark); font-weight: 600; }
/* 🔴 transition 없음 — 금액 한글 병기는 움직이지 않는다(§7). */
.iw-kor { margin-top: var(--s-sm); min-height: 1.2em; }
.iw-choice { border: 0; padding: 0; margin: var(--s-md) 0 0; }
.iw-chips { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm); }
/* 🔴 **pill이다**(D-243 시안 3-D). 입력 칸은 8px 사각, 고르는 컨트롤은 999px 원형 —
      한 화면에 둘이 섞여 서므로 **모양으로** 역할을 가른다. 예전에는 둘 다 사각이라
      "적는 칸"과 "고르는 칸"이 같은 물건으로 보였다. */
.iw-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 0 24px; cursor: pointer;
  border: 1px solid var(--br-fieldline); border-radius: 999px; background: var(--surface);
  font-size: 14px; color: var(--br-body);
  transition: border-color 120ms ease, background 120ms ease;
}
.iw-chip input { position: absolute; opacity: 0; pointer-events: none; }
/* 테두리가 1 → 2px로 굵어지는 만큼 좌우 패딩을 1px 되돌린다 — 칩 폭이 흔들리지 않게. */
.iw-chip:has(input:checked) {
  border-color: var(--primary); border-width: 2px; padding: 0 23px;
  background: var(--br-b050); font-weight: 700; color: var(--br-b700);
}
.iw-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.iw-chip-clear { border-style: dashed; color: var(--br-optline); }

/* 답 요약 크럼 — 쌓인 답이 보이고, 누르면 그 단계로 되돌아간다(§7 뒤로: 모든 단계에서 가능).
   ⚠ 여백이 **아래가 아니라 위**다(D-237). 예전에는 질문 카드 바로 위에 있어서 아래로 띄웠는데,
     왼쪽 레일로 올라간 지금은 위쪽 안내문과 붙는다 — 옛 `margin-bottom`을 그대로 두면 레일
     맨 아래에 쓰지도 않는 10px이 남고 정작 위는 붙어 있다. */
.iw-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-lg); }
/* 크럼도 **누르는 것**이다(그 단계로 되돌아간다) — 48×48 규칙에서 예외가 아니다(§7). */
.iw-crumb {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px;
}
/* [수정]은 --surface-alt 위에 선다 — --primary면 3.37:1이라 못 쓴다(파일 머리말 실측표). */
.iw-crumb i { font-style: normal; color: var(--primary-pressed); font-weight: 700; margin-left: 2px; }
/* 크럼도 자동 진행 뒤 손가락 밑에 들어올 수 있는 자리다 — `.iw-opt:hover`와 같은 이유로
   마우스에서만 켠다(위 @media 주석). */
@media (hover: hover) {
  .iw-crumb:hover { border-color: var(--primary); }
}

/* 단계 전환 220ms(§7) — app.css의 공통 200ms 위에 인테이크 구간만 덮어쓴다. */
.iw-step.qw-in-fwd, .iw-step.qw-in-back { animation-duration: 220ms; }

/* 🔴 전면 정지 — 명세 §7. 움직임만 끄고 **보이기는 그대로** 둔다(both로 끝난 상태에 머물게).
   ⚠ `:active`의 눌림도 여기서 끈다. transition이 없다고 모션이 아닌 게 아니다 — 누를 때마다
     화면이 튀는 것은 그 설정을 켠 사람이 정확히 피하려는 것이다.
   ⚠ **자동 진행의 220ms 지연은 끄지 않는다**(brief-write.js). 그건 움직임이 아니라 "고른 것을
     확인할 시간"이고, 0으로 만들면 화면이 오히려 더 갑자기 바뀐다. */
@media (prefers-reduced-motion: reduce) {
  .iw-step.qw-in-fwd, .iw-step.qw-in-back { animation-duration: 0s; }
  .iw-field { animation-duration: 0s; }
  .iw-opt, .iw-chip { transition: none; }
  .iw-opt::before { transition: none; }
  .iw-opt:active { transform: none; }
}

/* ── 저장된 인테이크 표시 (§5 · §9) ─────────────────────────────
   빈 칸은 지우지 않고 "—"로 보인다 — 줄이 사라지면 그 칸이 있었다는 사실 자체가 안 보인다. */
.iw-view { margin-top: 12px; }
.iw-view-rows { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 6px 12px; margin-top: 10px; }
.iw-view-rows dt { font-size: 13px; color: var(--text-tertiary); }
.iw-view-rows dd { margin: 0; font-size: 14px; color: var(--text-primary); word-break: break-word; }
.iw-view-empty { color: var(--text-tertiary); }

/* ── 견적요청서 고르기 — 행 목록 (D-266 §4) ─────────────────────────────────
   🔴 **격자 카드(D-241)를 행으로 바꿨다.** 카드가 본문 5줄을 안고 있어서 견적요청서마다
      높이가 달랐고, 한 장이 화면 절반을 먹었다. 지금은 «제목 1줄 + 메타 1줄» 72px 행이다.
   ⚠ 그래서 `auto-fill` 격자 규칙도 함께 사라졌다 — 되살리려면 그 주석(D-241 auto-fit 사고)을
     git 이력에서 먼저 읽을 것. 폭이 개수에 따라 3.5배 튀던 함정이 거기 적혀 있었다. */
.br-rows {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; margin-top: 4px;
}
.br-row-wrap { position: relative; display: flex; align-items: stretch; }
.br-row-wrap + .br-row-wrap { border-top: 1px solid var(--divider); }
.br-row {
  flex: 1; min-width: 0;                       /* ← 말줄임의 뿌리. 지우면 아래가 다 무효다 */
  display: flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 12px 60px 12px 16px;   /* 우측은 [보기] 자리 */
  cursor: pointer; background: var(--surface);
  border: 1.5px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.br-row:hover { background: var(--grey50); }
/* 라디오는 보인다(§4 「라디오 20px」) — 카드 시절엔 숨기고 테두리로만 알렸는데,
   행이 되면서 «여러 개 중 하나»라는 것이 라디오 없이는 안 읽힌다. */
.br-row input {
  flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary);
}
/* 선택 상태 — 색만이 아니라 테두리·배경으로도 읽힌다(WCAG 1.4.1). */
.br-row:has(input:checked) { border-color: var(--primary); background: #F7FAFF; }
.br-row:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }

.br-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.br-row-title {
  font-size: 15.5px; font-weight: 700; color: var(--text-primary); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🔴 색을 `#8B95A1`(--grey500)에서 `--text-tertiary`로 올렸다(D-704) — 12.5px 글자인데
   흰 바탕 대비가 **3.04:1**이라 본문 하한(4.5:1)에 못 미쳤다(실측). 지금은 4.62:1이다.
   ⚠ 이 줄에는 날짜·업종·분야·전송 상태가 함께 선다. 색을 다시 내리려거든 그 넷이 전부
     같은 색을 물려받는다는 것을 먼저 볼 것 — 칩들은 자기 색을 따로 갖는다. */
.br-row-meta {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12.5px; color: var(--text-tertiary);
  overflow: hidden; white-space: nowrap;
}
/* 분야 칩 — 리터럴(#EEF4FF/#1B64DA)을 토큰으로 옮겼다(D-704). tokens.css의 상태 칩 틴트
   주석이 「파랑 = --primary-light / --primary-pressed, 4.82:1」로 이미 그 짝을 정해 뒀다 —
   같은 파랑을 두 벌로 들고 있을 이유가 없다(실측 4.90 → 4.82, 눈에 안 보이는 차이). */
.br-row-cat {
  flex: none; background: var(--primary-light); color: var(--primary-pressed); border-radius: 6px;
  padding: 2px 7px; font-weight: 600;
}
/* «지금 상담노트»(D-670) — 홈 띠가 보여 주는 그 장. 분야 칩과 같은 규격, 파란 바탕에 흰 글자로 한 단 세다. */
.br-row-current {
  flex: none; background: var(--primary); color: #fff; border-radius: 6px;
  padding: 2px 7px; font-weight: 700;
}
/* 전송 상태 — 보낸 적이 있으면 그린 틴트, 없으면 회색 외곽선. 색만으로 나누지 않고
   글자 자체가 다르다(「N회 보냄」 / 「아직 안 보냈어요」). */
/* 🔴 초록 리터럴(#EAF9F1/#0F8B5F)이 **4.5:1을 못 넘고 있었다**(실측 3.96:1) — tokens.css의
   상태 칩 틴트가 정확히 이 사고를 막으려고 만들어진 값이다(D-249 주석: 「시안 v1.0은 배경만
   정하고 글자는 원색을 그대로 썼는데 7쌍 중 5쌍이 미달이었다」). 그 토큰으로 옮긴다 → 5.98:1.
   ⚠ 유채색이 파랑 하나가 아닌 것은 예외가 아니라 **승인된 상태 칩 체계**다(D-249 5색).
     그래도 색이 혼자 말하지는 않는다 — 글자 자체가 다르다(「N회 보냄」 / 「아직 안 보냈어요」). */
.br-row-sent {
  flex: none; background: var(--tint-green-bg); color: var(--tint-green-ink); border-radius: 999px;
  padding: 2px 8px; font-weight: 600;
}
.br-row-unsent {
  flex: none; border: 1px solid var(--grey300); color: var(--text-tertiary); border-radius: 999px;
  padding: 1px 8px;
}
/* 🔴 **누르는 자리를 44px로**(D-241에서 얻은 값 유지). 예전 실측 29×23px인데 하필 고르는
      라벨 위에 겹쳐 떠 있어서 빗맞으면 그 행이 선택됐다. 라벨 밖으로 뺀 것은 절반의 대책이고
      나머지 절반이 크기다. 글자는 그대로 두고 padding으로만 넓힌다. */
.br-row-view {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--primary);
}
.br-row-view:hover { text-decoration: underline; }

/* 두 동작 한 행 — 좁은 화면에서는 세로로 쌓고 주 동작을 위로 올린다.
   🔴 **화면 아래에 붙는다**(D-241). 보관함은 30개까지라(BriefRepository.MAX_BRIEFS) 30건이면
      데스크톱에서 이 줄이 문서 y=2100 언저리로 밀렸다 — 다 고르고 나서 **보낼 버튼을 찾으러
      2.6화면을 굴려야** 했다(실측. 모바일은 8.7화면).
   🔴 폭도 반반이 아니다. 예전에는 `1fr 1fr`이라 1280에서 **607px짜리 버튼 두 개**였고,
      "새로 만들기"(부 동작)가 "보내기"(주 동작)와 같은 크기로 서 있었다. 오른쪽으로 몰고
      주 동작만 넓힌다 — .br-nav([다음])와 같은 규칙이다.
   ⚠ 좁은 화면(≤560)에서는 예전처럼 쌓고 폭을 채운다. */
.br-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--background);
}
.br-actions .btn { width: auto; }
.br-actions .btn-primary { min-width: 240px; }
@media (max-width: 560px) {
  .br-actions { flex-direction: column; align-items: stretch; }
  .br-actions .btn { width: 100%; }
  .br-actions .btn-primary { order: -1; min-width: 0; }
}

/* 많을 때 찾는 칸 (D-241) — JS가 켠다. 없으면 이 줄 자체가 안 뜬다(눌러도 아무 일 없는
   장식을 남기지 않는다). 서버로 가는 값이 아니라 화면에서 걸러 보는 것뿐이라 name이 없다. */
.br-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.br-search[hidden] { display: none; }
.br-search .input { flex: 1 1 240px; max-width: 360px; }
/* ⚠ `.br-row-wrap`이 `display:flex`라 author display가 UA의 `[hidden]{display:none}`을
     이긴다 — 못을 안 박으면 걸러 낸 카드가 그대로 남는다(.ip 패널과 같은 함정). */
.br-row-wrap[hidden] { display: none; }
.br-search-empty { padding: 24px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   내 견적 요청 (D-266 §2) — 빈 상태·목록이 **같은 카드**를 쓰고 CTA는 하단 고정
   ══════════════════════════════════════════════════════════════════════════
   🔴 이 블록의 임무는 하나다: **상태가 바뀌어도 [견적 요청하기]가 안 움직인다.**
      카드를 flex column으로 두고 안쪽 내용(.qr-empty / .qs-reqlist)이 남는 자리를 먹게 하면
      (flex:1) 버튼은 언제나 카드 바닥에 남는다. min-height가 그 «남는 자리»를 만든다 —
      430px을 줄이면 빈 상태에서 안내가 버튼에 달라붙는다. */
.qr-title { font-size: 26px; font-weight: 800; letter-spacing: var(--ls-2xl); }
.qr-sub { margin: 6px 0 0; font-size: 15px; color: var(--text-secondary); }

.qr-card {
  margin-top: 14px;
  min-height: 430px;
  display: flex; flex-direction: column;
  padding: 20px;
}

/* 빈 상태 — 남는 자리를 통째로 먹고 가운데 선다. */
.qr-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px;
}
/* 브랜드 두 점 — 심볼의 대각 배치를 그대로 따른다(질문 → 답). */
.qr-dots { display: block; width: 19px; height: 19px; position: relative; margin-bottom: 12px; }
.qr-dots i { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
.qr-dots i:first-child { top: 0; left: 0; background: #93B4FF; }
.qr-dots i:last-child { bottom: 0; right: 0; background: #7FDCB4; }
.qr-empty-t { font-size: 16.5px; font-weight: 600; color: #333D4B; }
.qr-empty-s { font-size: 14px; color: #8B95A1; }

/* 목록(.qs-reqlist)은 D-446부터 quote-split.css의 받은 견적 카드 어휘를 같이 쓴다 —
   행 규격·flex:1(버튼 바닥 고정)은 그쪽에 있다. 여기 있던 .qr-row 어휘는 은퇴했다. */

/* CTA — 카드 안 하단 full width. 상태와 무관하게 이 자리다. */
.qr-cta {
  margin-top: 16px;
  width: 100%; height: 56px;
  border-radius: 12px;
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qr-foot { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); }

@media (max-width: 768px) {
  .qr-card { min-height: 360px; padding: 16px; }
  .qr-title { font-size: 22px; }
}

/* 고르기 카드 헤더 (D-266 §4) — 제목 + 우측 요약을 한 줄에.
   ⚠ 좁아지면 요약이 아래로 내려간다(wrap). 한 줄을 억지로 지키려고 요약을 말줄임하면
     「N개 보관 중」이 잘려 개수가 안 보인다 — 그 숫자가 이 줄의 존재 이유다. */
.br-pickhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.br-pickhead-t { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.br-pickhead-s { margin-left: auto; font-size: 13px; color: #8B95A1; }
@media (max-width: 560px) { .br-pickhead-s { margin-left: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   작성 위저드 다듬기 (D-266 §3) — 중복 컨트롤 · 줄바꿈 · 패널 폭
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 접기 핸들: 레일 «안»이 아니라 경계선 위로 ────────────────────────────
   🔴 예전엔 레일 안쪽 우상단이라, 바로 아래 「← 내 견적요청서」와 화살표 두 개가 붙어 섰다.
      경계선 세로 중앙으로 빼면 «두 판을 여닫는 손잡이»로 읽혀 뒤로가기와 헷갈리지 않는다.
   ⚠ 위 @media 블록의 `position: static`(mini 상태) 규칙보다 **뒤에** 있어야 이긴다.
     파일 앞쪽으로 옮기지 마라 — 접었을 때 핸들이 레일 안으로 돌아간다. */
@media (min-width: 1024px) {
  .br-railtoggle {
    position: absolute; top: 50%; right: -13px; left: auto;
    transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #E5E8EB; background: #fff; color: var(--br-hint);
    box-shadow: 0 1px 4px rgba(17, 31, 40, .12);
    z-index: 3;
  }
  .br-railtoggle svg { transition: transform .18s ease; }
  /* 접힌 상태 — 갈매기를 뒤집어 «펼치기»를 말한다. 글리프를 바꾸지 않고 방향만 돌린다. */
  html[data-brief-rail="mini"] .br-railtoggle {
    position: absolute; top: 50%; right: -13px; margin-bottom: 0;
  }
  html[data-brief-rail="mini"] .br-railtoggle svg { transform: rotate(180deg); }
  /* 레일이 `overflow:hidden`인 판 안에 있으면 핸들이 잘린다 — 판만 보이게 열어 준다. */
  .br-page { overflow: visible; }
  .br-aside { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}

/* ── 패널 폭 288px 고정 (§3) ──────────────────────────────────────────────
   ⚠ 폭이 유동이면 「지금까지 고른 것」 칩의 말줄임 지점이 화면마다 달라져, 어떤 폭에서만
     [수정]이 밀린다. 폭을 못 박고 그 안에서 말줄임을 건다. */
@media (min-width: 1024px) {
  .br-page { grid-template-columns: 288px minmax(0, 1fr); }
}

/* ── 요약 칩 줄바꿈 방지 (§3 「구현 규칙」) ────────────────────────────────
   🔴 이 네 줄이 「수」/「정」 세로 분리를 **구조적으로 불가능**하게 만든다.
      ① 컨테이너 flex + min-width:0  ② 라벨 flex:1 + min-width:0 + ellipsis
      ③ [수정] flex:none + nowrap    ④ 칩 자체도 min-width:0
      ②의 `min-width:0`이 핵심이다 — flex 자식의 기본값은 auto라, 없으면 칸이 내용만큼
      부풀어 말줄임이 영영 안 걸리고 대신 옆 것이 밀려난다. */
.iw-crumb { display: flex; min-width: 0; max-width: 100%; }
.iw-crumb-l {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iw-crumb i { flex: none; white-space: nowrap; }
.iw-crumbs { min-width: 0; }

/* 진행 문구 — 「진행 · 1 / 4 단계」 한 줄. 소제목이 사라진 만큼 위 여백을 되돌린다. */
.br-steptext { margin-top: 0; }
.br-head > .br-steps { margin-top: 0; }

/* ═══ 견적요청서 작성 화면 스킨 개편 (D-308 · 「견적작성_화면개선」 시안) ═══════════
   시안 대상은 **이 화면 하나**다(1단계 기준 · 2~4단계 동일 스킨). 전역 토큰·공통 컴포넌트를
   건드리지 않으려고 규칙을 전부 `.br-page` 아래로 좁혔다 — 같은 클래스를 쓰는 다른 지면이
   같이 바뀌면 시안이 보증하지 않은 화면을 바꾸는 것이다. */

/* ── S-06 · 「지금까지 고른 것」 알약 → 둥근 사각 카드 ────────────────────────
   🔴 알약(999px)은 **한 줄을 전제한 모양**이라 긴 문장이 오면 말줄임밖에 답이 없었고,
      그래서 고른 내용이 «…»로 잘려 무엇을 골랐는지 되짚는 기능이 반쯤 죽어 있었다.
      둥근 사각(11px)은 여러 줄을 받아 **전부 보인다** — 되짚기가 이 칸의 존재 이유다.
   ⚠ [수정]은 오른쪽 «고정»이다(flex:none). 문장이 길어져도 자리를 지켜야 눈이 찾는다. */
.br-page .iw-crumbs { gap: 8px; }
.br-page .iw-crumb {
  align-items: flex-start; min-height: 0;
  background: var(--br-chipbg); border: 0; border-radius: 11px;
  padding: 8px 11px; gap: 8px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--br-body);
}
.br-page .iw-crumb-l {
  /* 🔴 말줄임을 «끈다» — 위 규칙이 건 nowrap/ellipsis를 셋 다 되돌려야 실제로 접힌다.
     ⚠ `word-break: keep-all`은 한글을 어절 단위로 접는다. 없으면 낱말 중간에서 끊긴다. */
  white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all;
}
.br-page .iw-crumb i { color: var(--primary); font-weight: 700; font-size: 11.5px; }
@media (hover: hover) { .br-page .iw-crumb:hover { border-color: transparent; background: #E9F0FA; } }

/* ── S-02 · 섹션 표식: 헤어라인 없이 «앞 도트» ────────────────────────────────
   두 열의 제목이 같은 층이라는 것을 선이 아니라 점으로 말한다. 색이 열을 구분한다
   (문의 내용=파랑 · 질문=그린) — 로고의 두 점과 같은 색이라 화면 안에서 낯설지 않다.
   ⚠ 점은 `flex: none`이라 제목이 두 줄이 되어도 첫 줄에 붙어 있다. */
.br-page .iw-s4-head > .iw-fieldlabel,
.br-page .iw-s4-head > .t-label1 {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 800; color: #191F28;
}
.br-page .iw-s4-head > .iw-fieldlabel::before,
.br-page .iw-s4-head > .t-label1::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px;
  background: var(--br-dot-side);
}
.br-page .iw-s4-main .iw-s4-head > .iw-fieldlabel::before { background: var(--br-dot-main); }
/* 두 열의 «설명 줄»은 같은 크기·같은 여백이다 — 길이가 달라도 아래 입력 시작선은 안 밀린다
   (그 보장은 subgrid가 한다 — D-304). */
/* ⚠ `.qw-qopt`의 옛 규칙(`display:block; margin-top:2px`)은 «라벨 뒤에 붙는 조건»일 때의
     값이다. 이제 이 요소는 격자의 **2행**이라 자기 여백으로 위치를 잡지 않는다 — 남겨 두면
     좌우 설명줄이 2px 어긋난다. */
.br-page .iw-tips,
.br-page .iw-s4-head .qw-qopt {
  font-size: 12.5px; line-height: 1.55; color: var(--br-hint2);
  padding: 4px 0 10px; margin: 0;
}
.br-page .iw-tips { padding-left: 1.1em; }

/* ── 입력칸·[+ 질문 추가] (§4 「입력칸」) ─────────────────────────────────────── */
.br-page .qw-qrow .input { min-height: 40px; border-color: var(--br-inputline); }
.br-page .qw-qadd {
  border: 1.5px dashed #C0CBD8; color: var(--br-addline); font-weight: 600;
}
/* 🔴 글자에 로고 원색(#2E6BFF)을 쓰지 않는다 — 흰 바탕 4.11:1로 AA 미달이다.
      한 칸 내린 #1B5FD1이 5.83:1이라 같은 파랑 인상으로 통과한다(시안 §5 주석과 같은 판단). */

/* ── S-08 · CTA에 은은한 블루 그림자 ───────────────────────────────────────── */
.br-page .br-nav [data-brief-next],
.br-page .br-nav [data-brief-submit],
.br-page .br-save {
  border-radius: 12px; box-shadow: 0 5px 14px rgba(49, 130, 246, .24);
}
.br-page .br-nav [data-brief-prev] {
  border: 1px solid var(--br-inputline); border-radius: 12px; color: #4E5968;
}

/* ── S-03 · 이 화면에서는 상단바 우측을 비운다 ──────────────────────────────────
   🔴 **전역 상단바를 고치지 않는다.** 아바타 메뉴는 알림·프로필 수정·로그아웃의 유일한
      진입로라, 지우면 이 화면 밖의 길이 함께 사라진다. 시안의 대상은 이 화면 하나다.
   ⚠ 그래서 `:has()`로 «이 화면일 때만» 감춘다 — 템플릿을 건드리지 않아 다른 지면의 상단바가
     이 결정에 끌려 들어갈 여지가 없다. `:has()`를 모르는 브라우저에서는 아바타가 그대로
     남는데, 그건 개편 전 모습이라 고장이 아니다.
   ⚠ 자동 저장은 **계속 돈다**(D-244) — 표시만 뺐다. 내용이 남는다는 사실은 단계를 오갈 때
     칸이 그대로인 것으로 직접 보인다. */
body:has(.br-page) .topbar .top-acct,
body:has(.br-page) .topbar .top-avatar { display: none; }
.br-page .br-autosave { display: none; }

/* 업종 칩 (D-675) — 분야 칩 앞에 선다. «무슨 사업»이 «무슨 세금 문제»보다 먼저 읽힌다.
   ⚠ 분야 칩(.br-row-cat, 파랑)과 **다른 축**이라 색을 달리 하지 않고 농도로 가른다 —
     한 줄에 파랑이 둘이면 두 축이 같은 것으로 읽힌다. */
.br-row-ind {
  flex: none; background: var(--grey100); color: var(--grey700); border-radius: 6px;
  padding: 2px 7px; font-weight: 500;
}

/* ══ 상담노트 상세 (/briefs/{id}) — D-704에서 인라인 스타일 24곳을 여기로 옮겼다 ══════
   🔴 인라인을 걷은 것이 «정리»만은 아니다. 그 24곳이 카드 사이 간격을 8·12·14·16·20px로
      제각각 잡고 있어서, 같은 층위의 카드 넷(보내기 · 작성 때 고른 것 · 의뢰 내용 · 지우기)이
      서로 다른 리듬으로 서 있었다. 여기서 한 값(--s-md)으로 묶는다.
   🔴 **이 블록은 파일 맨 끝에 있어야 한다.** `.brd-qs`가 `.qw-qsection`(위쪽, 작성 위저드용)과
      같은 특정도 (0,1,0)이라 «뒤에 오는 쪽»이 이긴다 — 위로 옮기면 질문 구분선이 조용히 사라진다.
   ⚠ `.brd-` 접두는 이 화면 전용이다. 목록·작성 위저드와 이름이 겹치지 않는지 먼저 grep할 것 —
     `.br-back`·`.br-title`은 이미 작성 위저드가 쓰고 있어서 접두를 갈랐다(brief.css 100행). */
.brd-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--primary); }
.brd-title { margin-top: 8px; }
/* 머리 메타 — 날짜 + 전송 상태 칩. 목록 행(.br-row-meta)과 같은 어휘를 쓰되 상세라 한 눈금 크다. */
.brd-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; color: var(--text-tertiary);
}
/* «정리 후 보완함» — 상태가 아니라 사실이라 칩을 씌우지 않는다(목록도 평문이다). */
.brd-edited::before { content: '· '; }

/* 카드 넷의 공통 간격 — 하나로 묶는다(위 머리말). */
.br-send, .brd-edit, .br-delete, .iw-view { margin-top: var(--s-lg); }

/* 카드 안쪽 설명 한 줄 — 제목 바로 아래 6px. 네 자리가 같은 값을 쓴다. */
.brd-lead { margin-top: 6px; }
.brd-iw-t { margin-top: 2px; }

/* 폼 — 라벨 20 / 칸 10 이라는 한 쌍이 세 번 반복된다. */
.brd-label { display: block; margin-top: 20px; }
.brd-field { margin-top: 10px; }
/* ⚠ `.input`은 height 48px 고정이다 — 여러 줄 칸은 그 못을 풀어야 한다(옛 인라인이 하던 일). */
.brd-textarea { height: auto; padding: 12px; }
.brd-count { margin-top: 8px; }
.brd-opt { font-weight: 400; }
.brd-note { margin-top: 14px; }

/* 🔴 `.qw-qsection`(brief.css 위쪽, 작성 위저드용)이 margin-top·border-top·padding-top을 0으로
   건다. 상세에서는 구분선이 있어야 «의뢰 내용»과 «묻고 싶은 것»이 갈린다 — 예전에는 인라인
   스타일이 그 전역 규칙을 이겨서만 선이 살아 있었다.
   ⚠ 이 규칙은 `.qw-qsection`보다 **파일에서 뒤**에 있어야 한다(동점 특정도 (0,1,0)). 위로
     옮기지 마라 — 옮기는 순간 구분선이 조용히 사라진다. */
.brd-qs { margin-top: 20px; border-top: 1px solid var(--divider); padding-top: 16px; }

/* 저장 — 오른쪽으로 몰고 최소폭만 준다(.br-actions와 같은 규칙, D-241의 «폭 100% 띠» 교훈). */
.brd-save { display: flex; justify-content: flex-end; margin-top: 12px; }
.brd-save .btn { min-width: 240px; }
@media (max-width: 560px) {
  .brd-save .btn { width: 100%; min-width: 0; }
}
.brd-delform { margin-top: 10px; }