/*
 QA 보드 화면 스타일 (#909, ADR-0131) — 앱(bnsone)의 디자인을 «값만» 옮겨 온 보드 전용 파일.
 ★보드는 앱과 따로 빌드돼(이미지 빌드 컨텍스트 = qa-board/) 앱의 src/shared/ui·globals.css 를 못 쓴다. 그래서 값을 여기에 복사해 두고,
   원본이 바뀌면 사람이 다시 대조한다. 정본 = docs/05_UIUX/design-tokens.md (확정 디자인 Design/ComponentGuide*.dc.html).
 ★기준 판: main 802a7f52 (2026-10-27). 색·글자·모양 줄 번호는 design-tokens.md 의 «색»·«글자»·«모양» 절.
 ★이 파일은 layout.tsx 와 안내 화면(src/lib/web.ts noticePage — 공통 틀 밖의 별도 HTML)이 같이 쓴다. 정적 파일이라 주소가 고정이다(/board.css).
 ★문서에 없는 값은 만들지 않았다. 벗어난 곳은 그 자리에 이유를 적었다. 벗어난 곳 한눈에(전부 «읽기 쉬움» 때문 — 휴대폰·야외 화면이 주 사용처):
   ①입력칸 글자 16px(문서 13px) — 아이폰 사파리가 16px 미만 칸에서 화면을 멋대로 확대한다.
   ②위험(danger) 표시 글자색 --danger-ink #b3373c — 문서의 #e5484d(배지 글자)·#c0454b(경고 사유)가 분홍 바탕에서 명암 대비 3.43·4.38 이라 작은 글자 기준 4.5 에 못 미친다(계산: 5.21).
   ③필드 라벨·도움말·제목 아래 설명·빈 상태 글자색 --ink-sub #5a5a63(문서 라벨 #8b8b94 3.38 · 캡션 #9a9aa2 2.79 — 흰 바탕에서 읽기 어렵다). 도움말은 12px/500(문서 11px/400).
*/
@import url("/fonts/pretendard/pretendard.css");

:root {
  /* 색 — design-tokens.md «색» */
  --primary: #3a2f8c;
  --primary-soft: #edeafb;
  --primary-line: #d9d2f5; /* 정정 입력 강조 테두리 */
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --danger-line: #f6c3c3; /* 반려 버튼 테두리 */
  --danger-ink: #b3373c; /* 위험 표시 «글자»(경고 문구·배지·빨간 테두리 버튼) — 문서 값보다 진하게, 위 머리말 ② */
  --success: #16a34a;
  --success-soft: #e7f8ed;
  --success-text: #15803d;
  --amber: #b45309; /* 주황 배지 글자 */
  --amber-soft: #fdf3e8;
  --ink: #18181b;
  --ink-sub: #5a5a63;
  --label: #8b8b94;
  --caption: #9a9aa2;
  --line: #ececef; /* 입력 테두리 */
  --muted: #f4f4f6; /* 읽기전용·비활성·회색 배지 배경 */
  --disabled-ink: #c7c7ce;
  --page: #f7f7f9;
  --card: #ffffff;
  /* 모양 — «모양» 절 */
  --radius-card: 16px;
  --radius-row: 14px;
  --radius-field: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 2px 8px rgba(24, 24, 27, 0.05);
  --shadow-row: 0 1px 2px rgba(24, 24, 27, 0.04);
  /* 글자 — «글자» 절. 글꼴 = Pretendard(앱처럼 파일을 직접 준다), 못 불러오면 맥·윈도우 기본 한글 글꼴. */
  --font-sans: "Pretendard Variable", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px; /* 본문 13px·500 */
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; } /* H1 */
h2 { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.4; } /* H2 */
p { margin: 0; }

a { color: var(--primary); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 눈에 보이는 초점 — 키보드·보조기기로 다니는 사람이 지금 어디인지 알게 */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 화면 틀 ─────────────────────────────────────────── */
.page { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 16px; }
.page--wide { max-width: 720px; }
.page--narrow { max-width: 400px; }
.page-head { display: grid; gap: 6px; }
.page-back { font-size: 12px; }
.page-desc { color: var(--ink-sub); font-size: 12.5px; overflow-wrap: anywhere; } /* 제목 아래 설명 12.5px — 색은 문서의 라벨 색 대신 ink-sub(머리말 ③) */

/* ── 카드·목록 ───────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 14px 16px; display: grid; gap: 10px; } /* 폰 안쪽 여백 14×16 */
@media (min-width: 640px) { .card { padding: 18px 22px; } } /* 공통 Card 18×22 */
.card-title { font-size: 14px; font-weight: 800; }
.card form + form { border-top: 1px solid var(--muted); padding-top: 12px; } /* 한 카드 안의 양식이 둘 이상이면 선으로 나눈다 */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row-card { background: var(--card); border-radius: var(--radius-row); box-shadow: var(--shadow-row); padding: 12px 16px; display: grid; gap: 4px; }
.row-link { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.row-link:hover { color: var(--primary); }
.meta { color: var(--ink-sub); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.stack { display: grid; gap: 8px; }
.split { display: flex; gap: 8px; }
.split > * { flex: 1; min-width: 0; }
.wrap { overflow-wrap: anywhere; white-space: pre-wrap; }

/* ── 배지 — 모양은 알약. 색은 QA 상태별로 src/ui/tones.ts 한 곳에서 정한다 ───────── */
.badge { display: inline-block; border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 700; line-height: 1.5; }
.badge--primary { background: var(--primary-soft); color: var(--primary); }
.badge--success { background: var(--success-soft); color: var(--success-text); }
.badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge--amber { background: var(--amber-soft); color: var(--amber); }
.badge--gray { background: var(--muted); color: var(--ink-sub); }

/* ── 입력 ────────────────────────────────────────────── */
.field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-sub); } /* 필드 라벨 12px·700 */
.field-hint { font-size: 12px; font-weight: 500; color: var(--ink-sub); }
/* ★입력 글자 16px — 문서의 13px 이 아니다. 아이폰 사파리는 16px 미만 칸에 들어가면 화면을 멋대로 확대해 폼이 틀어진다(휴대폰이 주 사용처). */
.input, .textarea, .select { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-field); padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 500; }
.textarea { resize: vertical; }
.input::file-selector-button { margin-right: 10px; border: 0; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: var(--caption); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.choices legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ink-sub); }
.choice { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--muted); font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.choice:has(input:checked) { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-line); color: var(--primary); }
.choice input { margin: 0; accent-color: var(--primary); }

/* ── 버튼 — 알약형·14px·700 ───────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 24px; border: 0; border-radius: var(--radius-pill); background: var(--muted); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--soft { background: var(--primary-soft); color: var(--primary); }
.btn--danger-outline { background: #fff; color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-line); }
.btn--small { min-height: 36px; padding: 8px 16px; font-size: 12px; }
.btn--block { width: 100%; }
.btn:disabled { background: var(--muted); color: var(--disabled-ink); cursor: not-allowed; }

/* ── 안내·오류 ───────────────────────────────────────── */
.alert { background: var(--danger-soft); color: var(--danger-ink); border-radius: var(--radius-field); padding: 12px 16px; font-size: 12.5px; font-weight: 700; }
.note { background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-field); padding: 8px 12px; font-size: 12.5px; font-weight: 700; }
.empty { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px 16px; text-align: center; color: var(--ink-sub); font-size: 12.5px; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; background: var(--muted); border-radius: var(--radius-field); padding: 10px 12px; }

/* ── 펼침(신고하기·고치기) ───────────────────────────── */
.fold { border-radius: var(--radius-row); background: var(--page); padding: 0 12px; }
.fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 800; color: var(--primary); }
.fold[open] { padding-bottom: 12px; }
.fold[open] > summary { margin-bottom: 8px; }

/* ── 단계 카드 ───────────────────────────────────────── */
.step { scroll-margin-top: 12px; }
.step-title { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.photos { display: grid; gap: 12px; }
.photos a { display: grid; gap: 4px; }
.photos img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-field); }
.deleted { opacity: 0.6; }
.deleted .badge { text-decoration: line-through; } /* 지운 기록은 상태 글자(배지)에 취소선 — 옛 판의 <b> 취소선 */