/* 문제 알리기 — 시트(public/bug-report.js, 바탕은 safety.css의 .sf-sheet 문법)와 페이지 두 장(/help/report · /help/reports, 계정 흐름 카드 위).
   흰 종이, 잉크 모노크롬, 새 색·그림자 없음. 입력칸에 포커스 효과 없음(캐럿만), 단추·고르기만 focus-visible. 한국어는 어절 단위로 끊는다 */

/* ── 시트 ── */
.br-sheet .sf-body > .br-seg:first-child, .br-sheet .sf-body > .br-unread + .br-seg { margin-top: 4px; }
.br-sheet .br-unread { margin: 0 0 14px; }
.br-sheet .br-unread a { color: var(--sf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sf-line-3); }
/* 종류 — 두 칸 세그먼트(고르면 흰 칸) */
.br-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; min-width: 0; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--sf-wash, var(--wash-2)); }
.br-opt { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--sf-ink-2, var(--ink-2)); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, color 120ms ease; }
.br-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.br-opt:has(input:checked) { background: #fff; color: var(--sf-ink, var(--ink)); box-shadow: 0 0 0 .5px var(--sf-line-2, var(--line-2)), 0 1px 2px rgba(23, 21, 15, .06); }
.br-opt:has(input:focus-visible) { outline: 2px solid var(--sf-ink, var(--ink)); outline-offset: 1px; }
.br-sheet .br-ta { min-height: 112px; max-height: 280px; }
.br-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--sf-ink-3); }
.br-count.is-over { color: var(--sf-danger); }
/* 사진 — 고르기 단추 · 미리보기(작은 그림 · 크기 · 빼기) */
.br-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.br-pick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px dashed var(--sf-line-3); border-radius: 12px; background: #fff; color: var(--sf-ink-2); font-weight: 500; font-size: 14px; cursor: pointer; }
.br-pick svg { width: 18px; height: 18px; }
.br-pick[aria-busy="true"] { opacity: .6; pointer-events: none; }
.br-pick:focus-visible, .br-drop:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.br-prev { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--sf-line); border-radius: 14px; }
.br-img { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--sf-canvas); }
.br-pt { flex: 1 1 auto; min-width: 0; display: grid; font-weight: 500; font-size: 14px; }
.br-size { font-weight: 400; font-size: 12px; color: var(--sf-ink-3); }
.br-drop { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sf-wash); color: var(--sf-ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.br-cap { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--sf-ink-3, var(--ink-3)); }
/* 함께 보내는 것 — 실제 값을 글자로 */
.br-with { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--sf-canvas, var(--canvas-2)); font-size: 12px; line-height: 1.55; color: var(--sf-ink-2, var(--ink-2)); }
.br-with a { color: var(--sf-ink, var(--ink)); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--sf-line-3, var(--line-3)); }
.br-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; word-break: break-all; }
.br-sheet a.sf-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.br-sheet .sf-btn:disabled { opacity: .6; cursor: default; }
/* 보낸 뒤 */
.br-done .sf-body { padding-top: 32px; text-align: center; }
.br-done .sf-title { margin: 16px 0 0; }
.br-done-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sf-canvas); color: var(--sf-ink); }
.br-done-ic svg { width: 28px; height: 28px; }
@media (min-width: 700px) { .br-sheet { width: min(480px, calc(100vw - 32px)); } }
@media (max-width: 699px) { .br-done .sf-body { padding-top: 24px; } }

/* ── 페이지 — /help/report(자바스크립트 없을 때·로그인하지 않은 사람) ── */
body.x-help .br-form { text-align: left; }
body.x-help .br-form .br-seg { margin-bottom: var(--s-6, 24px); background: var(--wash-2); }
body.x-help .br-form .br-cap { margin-top: 6px; }
body.x-help .br-filein { display: block; width: 100%; font: 400 var(--t-footnote, 14px)/1.4 var(--font); color: var(--ink-2); }
body.x-help .br-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body.x-help .br-form .br-with { margin: 0 0 var(--s-5, 20px); background: var(--canvas-2, #f5f4f2); }
body.x-help .auth-help { margin-top: var(--s-3, 12px); }

/* ── 페이지 — /help/reports(내가 알린 문제) ── */
body.x-help .br-new { margin-top: var(--s-2, 8px); }
body.x-help .br-ok { margin-bottom: var(--s-4, 16px); padding: 10px 14px; border-radius: var(--r-md, 12px); background: var(--wash-2); font: 500 var(--t-ui, 15px)/1.5 var(--font); color: var(--ink); text-align: left; }
.br-list { list-style: none; margin: var(--s-7, 28px) 0 0; padding: 0; text-align: left; }
.br-item { padding: var(--s-5, 20px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.br-item:target { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--r-md, 12px); background: var(--wash-2); }
.br-item:target .br-reply { background: var(--paper, #fff); } /* 알림에서 온 제보 — 답장 칸이 바탕에 묻히지 않게 */
.br-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-meta { font: 400 var(--t-footnote, 14px)/1.4 var(--font); color: var(--ink-3); }
.br-st { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--wash-2); font: 600 12px/1 var(--font); color: var(--ink-2); white-space: nowrap; }
.br-st.is-new { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.br-st.is-done { background: var(--ink); color: #fff; }
.br-body { margin-top: 8px; font: 400 var(--t-ui, 15px)/1.6 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.br-reply { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md, 12px); background: var(--canvas-2, #f5f4f2); }
.br-rh { font: 600 12px/1.4 var(--font); color: var(--ink-2); }
.br-rt { margin-top: 4px; font: 400 var(--t-ui, 15px)/1.6 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.br-empty { margin-top: var(--s-7, 28px); font: 400 var(--t-ui, 15px)/1.5 var(--font); color: var(--ink-3); }
.br-foot { margin-top: var(--s-6, 24px); font: 400 var(--t-footnote, 14px)/1.5 var(--font); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .br-opt { transition: none; } }