/* ═══════════════════════════════════════════════════════════════
   The Kramer · school of art as therapy — 사례개념화 작성·검수 도구
   디자인 기조: 잉크 + 종이. 스크래치보드 로고(흑백 세밀화 + 손글씨)에서
   출발한 아뜰리에/작업노트 톤. 그라데이션·이모지·과대라운딩 배제.
   근거: patterns/korean-smb-light-app-template(단일 액센트·헤어라인·이모지 금지),
         patterns/product-ux-ease-of-use(정보 분리·자동저장 가시화·복구 경로)
   ═══════════════════════════════════════════════════════════════ */

/* 본문·제목·숫자 전부 Pretendard 하나로 통일한다.
   서버가 격리 환경(외부 CDN 차단 가능)이라 폰트 파일을 저장소에 동봉해 로컬에서 서빙한다. */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('assets/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 종이 ── */
  --paper:      #F2EEE4;   /* 페이지 바탕 — 크림 종이 */
  --paper-2:    #E9E3D6;   /* 눌린 면 / 표 헤더 */
  --surface:    #FCFAF5;   /* 카드 — 한 톤 밝은 종이 */
  --write:      #FFFFFF;   /* 입력면 — 쓰는 자리는 가장 밝게 */

  /* ── 잉크 ── */
  --ink:        #17140F;   /* 제목·본문 (따뜻한 먹) */
  --ink-2:      #443E36;   /* 보조 본문 */
  --ink-3:      #6B6357;   /* 캡션·힌트 (AA 4.5:1↑) */
  --ink-4:      #8C8475;   /* 비활성 */

  /* ── 괘선 ── */
  --rule:       #DCD5C6;
  --rule-2:     #C3BAA6;
  --rule-3:     #A79C85;

  /* ── 브랜드 액센트 — 학교 BI 보라 ──────────────────────────
     #5B2A83은 '면'이 아니라 '점'으로 쓴다. 칠하는 색이 아니라 찍는 색:
     핵심 CTA · 포커스 링 · 활성 상태 · 표지 머리띠. 그 외 지면은 잉크+종이.
     대비 실측: #5B2A83 vs 흰 글자 9.98:1 / vs 종이 #F2EEE4 8.53:1 (둘 다 AA 통과) */
  --brand:       #5B2A83;  /* BI 원본값 — 주 CTA 채움색으로 그대로 노출된다 */
  --brand-strong:#46205F;  /* hover */
  --brand-tint:  #F1EBF6;  /* 활성 배경(아주 옅게) */

  /* ── 상태 3색: 검수 결과 전용. 브랜드 보라와 역할이 겹치지 않는다.
     보라 = "지금 여기 / 실행", 상태색 = "검수 판정" ── */
  --pass:       #2C5745;  --pass-bg: #E6EDE8;  --pass-line: #4E7A66;
  --fail:       #96352A;  --fail-bg: #F6E9E5;  --fail-line: #B45244;
  --warn:       #7A5720;  --warn-bg: #F3ECDA;  --warn-line: #A98436;

  /* 하위호환 별칭 (기존 클래스에서 참조) */
  --bg: var(--paper);
  --accent: var(--brand);
  --accent-dark: var(--brand-strong);
  --accent-light: var(--brand-tint);
  --accent-warm: var(--warn);
  --warm-light: var(--warn-bg);
  --success: var(--pass);
  --success-light: var(--pass-bg);
  --danger: var(--fail);
  --border: var(--rule);
  --border-strong: var(--rule-2);
  --ink-soft: var(--ink-2);
  --ink-light: var(--ink-3);

  /* ── 타입 ── */
  --sans: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo',
          'Malgun Gothic', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --appbar-h: 56px;
  --radius: 3px;     /* 종이는 거의 각지게 */
  --radius-s: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* 고정 앱바·양식탭(위)과 액션바(아래)에 가려지지 않게 스크롤 여유를 준다 */
  scroll-padding-top: 120px;
  scroll-padding-bottom: 150px;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  /* 한국어는 어절 단위로 줄바꿈 — '저장·다운로드 / 합니다' 같은 어중 절단 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: var(--brand); text-underline-offset: 3px; }

/* eyebrow 유틸 — uppercase + 넓은 자간은 라틴에서만 성립한다.
   국문에 걸면 자간이 벌어져 깨지므로 같은 줄의 한글은 .eyebrow-ko 로 기본 자간으로 되돌린다. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.5;
}
.eyebrow-ko {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
  font-size: 12px; font-weight: 600;
}
.num { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; }

::selection { background: var(--brand-tint); }

/* ─────────────────────────────────────────────────────────────
   1. 앱바 — 얇은 고정 헤더. 로고가 상주하는 유일한 자리.
   근거: linear/vercel-dashboard 형태 — 작업 화면에서 브랜딩 배너를
   걷어내고 56px 앱바로 축소해 작업 영역을 회복한다.
   ───────────────────────────────────────────────────────────── */
.appbar {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--appbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}
.appbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.appbar-logo { height: 30px; width: auto; display: block; }
.appbar-div { width: 1px; height: 22px; background: var(--rule-2); flex-shrink: 0; }
.appbar-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.appbar-spacer { flex: 1 1 auto; }
.appbar-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* 앱바 안 아이콘 버튼 (탭 타깃 40px↑) */
.tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 10px;
  font: inherit; font-size: 13px; color: var(--ink-2);
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tool-btn:hover { background: var(--paper-2); color: var(--ink); }
.tool-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tool-btn svg { flex-shrink: 0; }

/* 저장 상태 — 긴 폼의 '저장됐나?' 불안을 없애는 상시 표시
   근거: product-ux-ease-of-use §6(Figma/Notion 자동저장) + utm-dashboard(데이터 신선도) */
.savestate {
  display: none; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
  padding: 0 10px 0 4px;
}
.savestate.on { display: inline-flex; }
.savestate .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pass-line); flex-shrink: 0; }
.savestate.saving .dot { background: var(--warn-line); animation: pulse 1s ease-in-out infinite; }
.savestate.error { color: var(--fail); }
.savestate.error .dot { background: var(--fail); animation: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* ─────────────────────────────────────────────────────────────
   2. 표지 — 1·2단계에서만. 브랜드를 제대로 보여주는 자리.
   ───────────────────────────────────────────────────────────── */
.cover { border-top: 3px solid var(--brand); border-bottom: 1px solid var(--rule); background: var(--paper); }
.cover-inner {
  max-width: 920px; margin: 0 auto; padding: 46px 22px 38px;
  display: flex; align-items: flex-start; gap: 34px;
}
.cover-mark { flex-shrink: 0; padding-top: 4px; }
.cover-mark img { height: 74px; width: auto; display: block; }
.cover-body { flex: 1; min-width: 0; }
.cover h1 {
  font-size: 30px; font-weight: 800; line-height: 1.34;
  letter-spacing: -0.025em; color: var(--ink); margin: 8px 0 10px;
}
.cover-lede { font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.cover-org {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────────
   3. 레이아웃
   ───────────────────────────────────────────────────────────── */
.container { max-width: 920px; margin: 0 auto; padding: 26px 22px 96px; }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px; margin-bottom: 20px;
}
.card > h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.muted { color: var(--ink-3); font-size: 13.5px; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 24px 0; }

/* ─────────────────────────────────────────────────────────────
   4. 진행 단계 (1 가이드 → 2 이용권 → 3 작성)
   pill 칩 폐기 → 괘선 위 번호 인덱스
   ───────────────────────────────────────────────────────────── */
.steps-bar {
  display: flex; gap: 0; margin-bottom: 26px;
  border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule);
}
.step-chip {
  display: flex; align-items: baseline; gap: 9px;
  flex: 1 1 0; min-width: 0; padding: 11px 4px 10px;
  font-size: 13px; color: var(--ink-3);
  border-top: 2px solid transparent; margin-top: -1px;
}
.step-chip .n { font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--ink-3); }
.step-chip.done { color: var(--ink-3); }
.step-chip.done .n { color: var(--pass); }
.step-chip.active { color: var(--brand); font-weight: 700; border-top-color: var(--brand); }
.step-chip.active .n { color: var(--brand); }

/* ─────────────────────────────────────────────────────────────
   5. 공지 / 주의
   ───────────────────────────────────────────────────────────── */
.notice {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--ink-2);
}
.notice b { color: var(--ink); font-weight: 700; }
.notice-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.notice-head svg { color: var(--warn); flex-shrink: 0; }

.disclaimer {
  font-size: 12.5px; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule-2);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 8px;
}
.disclaimer b { color: var(--ink); }

/* 접이식 안내 — 장문 배너를 상시 노출하지 않는다(정보 분리) */
.foldout { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--radius); margin-bottom: 14px; }
.foldout > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  min-height: 44px;
}
.foldout > summary::-webkit-details-marker { display: none; }
.foldout > summary .chev { margin-left: auto; color: var(--brand); transition: transform .18s; }
.foldout[open] > summary .chev { transform: rotate(180deg); }
.foldout > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.foldout-body { padding: 2px 18px 16px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--rule); margin-top: -1px; padding-top: 14px; }
.foldout-body ol { margin: 0 0 0 18px; }
.foldout-body li { margin-bottom: 7px; }

/* 비가역 비용 고지 — 항상 보이는 한 줄 (검수 1회 = 이용권 1회) */
.cost-line {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 16px; margin-bottom: 20px;
  background: var(--warn-bg); border: 1px solid #DCCBA1;
  border-radius: var(--radius);
  font-size: 13px; color: #63471A;
}
.cost-line svg { flex-shrink: 0; margin-top: 3px; color: var(--warn); }
.cost-line b { color: #4A340F; }

/* ─────────────────────────────────────────────────────────────
   6. 폼 요소
   ───────────────────────────────────────────────────────────── */
label.field { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink-2); }
input[type=text], input[type=password], textarea, select {
  width: 100%; font-family: inherit; font-size: 14.5px; line-height: 1.7;
  padding: 11px 13px; color: var(--ink);
  background: var(--write);
  border: 1px solid var(--rule-2); border-radius: var(--radius-s);
  margin-bottom: 16px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, textarea:hover { border-color: var(--rule-3); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}
textarea { min-height: 88px; resize: vertical; display: block; }
:disabled { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }

/* 버튼 — 주 버튼은 잉크 채움(브랜드가 흑백이므로 액센트=잉크) */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  min-height: 44px; padding: 11px 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:disabled {
  background: var(--paper-2); color: var(--ink-3); border-color: var(--rule);
  cursor: not-allowed; opacity: 1;
}
.btn-block { width: 100%; }

/* 코드 입력은 문서번호처럼 */
#keyInput { font-family: var(--mono); font-size: 17px; letter-spacing: .08em; text-align: center; padding: 15px 13px; }

/* 이용권 상태 */
.key-state {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; padding: 12px 15px; border-radius: var(--radius);
  margin-bottom: 16px; border: 1px solid;
}
.key-state svg { flex-shrink: 0; margin-top: 3px; }
.key-state.ok { background: var(--pass-bg); color: var(--pass); border-color: #BFD2C6; }
.key-state.err { background: var(--fail-bg); color: var(--fail); border-color: #E0BFB6; }

/* ─────────────────────────────────────────────────────────────
   7. 사례 작업 헤더 · 양식 스텝바 (sticky — 현 위치 상시 표시)
   ───────────────────────────────────────────────────────────── */
.case-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }

.stepper-wrap {
  position: sticky; top: var(--appbar-h); z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
  margin: 0 -22px 20px; padding: 0 22px;
}
/* 탭이 더 있다는 신호(스크롤바 대신 우측 페이드) */
.stepper-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 1px; width: 36px;
  background: linear-gradient(90deg, rgba(242,238,228,0), var(--paper) 72%);
  pointer-events: none;
}
.form-stepper { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.form-stepper::-webkit-scrollbar { height: 0; }
.fstep {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-height: 46px; padding: 6px 15px;
  font-size: 13px; color: var(--ink-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.fstep:hover { color: var(--brand); background: var(--brand-tint); }
.fstep:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fstep .fstep-n {
  font-family: var(--sans); font-size: 15px; line-height: 1;
  color: var(--ink-3); flex-shrink: 0;
  font-variant-numeric: lining-nums;
}
.fstep-t { white-space: nowrap; }
.fstep.active { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); }
.fstep.active .fstep-n { color: var(--brand); }
/* 검수 상태 — 밑줄 색 + 번호 색 (색만으로 전달하지 않도록 aria-label 병행) */
.fstep.done { border-bottom-color: var(--pass-line); }
.fstep.done .fstep-n { color: var(--pass); }
.fstep.bad { border-bottom-color: var(--fail-line); }
.fstep.bad .fstep-n, .fstep.bad { color: var(--fail); }
.fstep.bad.active { color: var(--fail); }

/* ─────────────────────────────────────────────────────────────
   8. 폼 섹션 · 항목
   ───────────────────────────────────────────────────────────── */
.fsection {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 30px 30px 14px; margin-bottom: 18px;
}
.fsection-title {
  font-size: 21px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink);
  margin-bottom: 6px; padding-bottom: 0;
}
.fsection-desc { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }

.fitem { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); position: relative; }
.fitems > .fitem:last-child { border-bottom: 0; margin-bottom: 6px; }
/* 검수 결과는 좌측 잉크선으로 — 카드 배경색을 물들이지 않는다 */
.fitem.pass, .fitem.fail, .fitem.dirty, .fitem.auto { padding-left: 16px; margin-left: -16px; border-left: 2px solid transparent; }
.fitem.pass { border-left-color: var(--pass-line); }
.fitem.fail { border-left-color: var(--fail-line); }
.fitem.dirty { border-left-color: var(--warn-line); }
.fitem.auto { border-left-color: var(--rule-2); }

.fitem-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 3px; }
.fitem-label { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.6; letter-spacing: -0.01em; }
.fitem-label .req { color: var(--fail); margin-left: 2px; font-weight: 700; }
.fitem-label .opt { color: var(--ink-3); font-weight: 400; font-size: 12px; margin-left: 5px; }
/* 힌트는 항목마다 실제로 읽어야 하는 정보다 — 캡션 취급해 작게 두지 않는다 */
.fitem-hint { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.7; }
.fitem-note { font-size: 12.5px; color: var(--warn); margin-bottom: 10px; }
.fitem textarea { min-height: 96px; margin-bottom: 0; }
.fitem textarea.long { min-height: 168px; }
.fitem input[type=text] { margin-bottom: 0; }

/* 배지 — 이 항목이 AI 검수 대상인지 / 자동 계산인지 */
.grade-badge, .auto-badge {
  display: inline-block; vertical-align: 2px; margin-right: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-s); white-space: nowrap;
}
.grade-badge { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-2); }
.auto-badge { color: var(--ink-3); background: transparent; border: 1px dashed var(--rule-2); }

/* 상태 칩 — 아이콘 + 글자 (색만으로 전달하지 않는다) */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: var(--radius); white-space: nowrap; flex-shrink: 0;
  border: 1px solid; line-height: 1.5;
}
.status-chip svg { flex-shrink: 0; }
.status-chip.idle { background: transparent; color: var(--ink-3); border-color: var(--rule-2); }
.status-chip.pass { background: var(--pass-bg); color: var(--pass); border-color: #BFD2C6; }
.status-chip.fail { background: var(--fail-bg); color: var(--fail); border-color: #E0BFB6; }
.status-chip.dirty { background: var(--warn-bg); color: var(--warn); border-color: #DCCBA1; }

/* 항목 피드백 */
.fitem-fb {
  margin-top: 12px; font-size: 13.5px; line-height: 1.7;
  padding: 13px 16px; border-radius: var(--radius); border: 1px solid;
}
.fitem-fb.pass { background: var(--pass-bg); color: var(--pass); border-color: #BFD2C6; }
.fitem-fb.fail { background: var(--fail-bg); color: #7E2C22; border-color: #E0BFB6; }
.fitem-fb.dirty { background: var(--warn-bg); color: #63471A; border-color: #DCCBA1; }
/* 통과했지만 참고할 만한 검토 의견 — 보완을 강요하지 않는 중립 톤 */
.fitem-fb.advice { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); }

/* 안내문(static) */
.fitem.static { padding-left: 0; border-left: none; margin-left: 0; }
.static-text {
  font-size: 13px; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px 18px; line-height: 1.75;
}

/* ── fieldset ── */
.fieldset-grid { display: grid; grid-template-columns: minmax(130px, 28%) 1fr; gap: 10px 16px; align-items: start; }
.fieldset-grid .sub { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 11px; line-height: 1.5; }
.fieldset-grid textarea { margin: 0; min-height: 72px; resize: vertical; }
.fieldset-grid input { margin-bottom: 0; }
.fieldset-grid .fs-subhead {
  grid-column: 1 / -1; font-weight: 700; color: var(--ink); font-size: 13px;
  margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}

/* ── 체크리스트 / 라디오 ── */
.checklist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chk-group { flex-basis: 100%; font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }
.chk, .rad {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 13px;
  font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--write); cursor: pointer; user-select: none;
}
.chk:hover, .rad:hover { border-color: var(--rule-3); }
.chk input, .rad input { width: auto; margin: 0; accent-color: var(--brand); }
.chk:has(input:checked), .rad:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint); color: var(--brand); font-weight: 700;
}
.chk:has(input:focus-visible), .rad:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 앞 체크 항목에 딸린 직접 입력칸 — 어느 항목에 딸린 칸인지 보이게 들여쓰고 세로선을 준다 */
.write-in { flex-basis: 100%; max-width: 460px; font-size: 13.5px; padding: 9px 12px; margin: 2px 0 2px 18px; border-left: 3px solid var(--rule-2); }
.write-in::placeholder { color: var(--ink-3); }
.etc-wrap { flex-basis: 100%; margin-top: 4px; }
.etc-in { max-width: 480px; }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
textarea.detail { margin-top: 10px; }

/* ── 위험문항 Y/N ── */
.yesno { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.yn-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.yn-q { font-size: 13.5px; flex: 1; color: var(--ink-2); }
.yn-opts { display: flex; gap: 6px; flex-shrink: 0; }
.yn-opts .rad { padding: 6px 13px; font-size: 12.5px; min-height: 36px; }
.yn-detail { margin: 10px 0 4px; }

/* ── 표 ── */
.ftable-wrap { overflow-x: auto; border: 1px solid var(--rule-2); border-radius: var(--radius); }
.ftable { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 460px; }
.ftable th {
  background: var(--paper-2); color: var(--ink-2);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule); white-space: nowrap;
}
.ftable th:last-child { border-right: 0; }
.ftable td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 0; }
.ftable td:last-child { border-right: 0; }
.ftable tr:last-child td { border-bottom: 0; }
.ftable td:last-child { text-align: center; width: 38px; }
.ftable td input, .ftable td textarea {
  border: none !important; border-radius: 0; padding: 10px; font-size: 13.5px;
  background: var(--write); margin: 0;
}
.ftable td textarea { min-height: 68px; width: 100%; resize: vertical; }
.ftable td input:focus, .ftable td textarea:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
/* 읽기 전용(자동) 셀 — 한 문단이 통째로 들어올 수 있으니 왼쪽·위 정렬로 읽히게 둔다.
   가운데 정렬이면 검사 해석처럼 긴 글이 가운데로 몰려 읽기 어렵다. */
.ftable td.ro-cell { padding: 10px; font-size: 13px; background: var(--paper-2); color: var(--ink-2); font-weight: 600; text-align: left; vertical-align: top; }
.ftable td { vertical-align: top; }
.ftable td.ck-cell { text-align: center; vertical-align: middle; }
.ftable td.ck-cell input { width: auto; accent-color: var(--brand); }
.ftable td.im-cell { padding: 7px; text-align: center; white-space: normal; background: var(--write); }
.ftable-empty { text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 16px; }
.row-rm {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
}
.row-rm:hover { background: var(--fail-bg); color: var(--fail); }
.row-rm:focus-visible { outline: 2px solid var(--brand); }
.row-add { margin-top: 10px; min-height: 38px; padding: 8px 15px; font-size: 13px; }

/* 이미지 */
.im-thumb-wrap { display: inline-block; position: relative; margin: 4px; }
.im-thumb { max-width: 84px; max-height: 84px; border: 1px solid var(--rule-2); vertical-align: middle; display: block; }
.im-thumb-wrap .im-rm {
  position: absolute; top: -7px; right: -7px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--paper);
  border-radius: 50%; width: 20px; height: 20px; padding: 0; margin: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.im-up {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 9px 13px; font-size: 12.5px; color: var(--ink-2);
  border: 1px dashed var(--rule-3); border-radius: var(--radius); cursor: pointer;
  background: var(--surface);
}
.im-up:hover { border-color: var(--brand); color: var(--brand); }

/* 자동(파생) 항목 — 사용자가 못 쓰는 칸임을 질감으로 구분 */
textarea.derived {
  background: var(--paper-2); color: var(--ink-2); cursor: default;
  min-height: 76px; border-style: dashed;
}
.fitem.auto .ftable td input, .fitem.auto .ftable td textarea { background: var(--paper-2); }
.derived-fields { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.df-row { display: flex; gap: 14px; background: var(--paper-2); padding: 11px 14px; }
.df-label { flex: 0 0 140px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.df-val { flex: 1; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.derived-empty {
  font-size: 12.5px; color: var(--ink-3); background: var(--paper-2);
  border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 14px 16px;
}

/* ─────────────────────────────────────────────────────────────
   9. 페이지 이동
   ───────────────────────────────────────────────────────────── */
.page-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 20px 0 8px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.page-nav .btn { min-height: 42px; padding: 9px 16px; font-size: 13.5px; }
#pageLabel { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); letter-spacing: .04em; }

/* 양식 이동 차단 경고 — 다음 양식으로 넘어가기 전 누락 항목 안내 */
.page-block {
  margin-top: 20px; padding: 14px 16px;
  background: var(--fail-bg); border: 1px solid var(--fail-line);
  border-left: 3px solid var(--fail); border-radius: var(--radius);
  font-size: 13.5px; color: var(--fail);
}
.page-block b { font-weight: 700; }
.page-block .pb-list { margin: 6px 0 4px; color: var(--ink-2); font-size: 13px; }
.page-block .gate-link { color: var(--fail); }

/* 선택 항목의 '해당 없음' — 비워두고 지나치지 않게 명시적으로 누르는 자리 */
.na-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 10px; padding: 5px 10px 5px 8px;
  font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--paper); cursor: pointer; user-select: none;
}
.na-toggle:hover { border-color: var(--rule-3); }
.na-toggle input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.na-toggle:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.fitem.na-on .na-toggle { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); font-weight: 600; }
.fitem.na-on .fitem-field { opacity: .45; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   10. 하단 액션 바
   ───────────────────────────────────────────────────────────── */
.action-bar {
  position: sticky; bottom: 0; z-index: 35;
  background: var(--surface);
  border: 1px solid var(--rule-2); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -1px 0 var(--rule-2), 0 -10px 24px rgba(23,20,15,.055);
  padding: 14px 20px; margin-top: 10px;
}
.action-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.action-row .muted { font-size: 13px; color: var(--ink-2); }
#gateInfo { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; line-height: 1.9; }
#gateInfo b { color: var(--ink); font-weight: 700; }
#gateInfo .num { font-size: 14px; }
.gate-link {
  color: var(--brand); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; font-weight: 700; background: none; border: 0;
  font: inherit; font-size: 13px; padding: 4px 0;
}
.gate-link:hover { color: var(--brand-strong); }
.gate-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 구분자는 글자가 아니라 괘선으로 — 저대비 문자('·')를 화면에 두지 않는다 */
.gate-sep {
  display: inline-block; font-size: 0; line-height: 0;
  width: 1px; height: 11px; margin: 0 10px;
  background: var(--rule-3); vertical-align: -1px;
}
.action-btns { display: flex; gap: 10px; margin-left: auto; }

.inspect-summary {
  border-radius: var(--radius); border: 1px solid;
  padding: 14px 17px; font-size: 13.5px; margin-bottom: 12px;
}
.inspect-summary.ok { background: var(--pass-bg); color: var(--pass); border-color: #BFD2C6; }
.inspect-summary.warn { background: var(--warn-bg); color: #63471A; border-color: #DCCBA1; }
.inspect-summary.err { background: var(--fail-bg); color: var(--fail); border-color: #E0BFB6; }
.isum-head { font-weight: 700; margin-bottom: 5px; display: flex; align-items: flex-start; gap: 8px; }
.isum-head svg { flex-shrink: 0; margin-top: 3px; }
.inspect-summary .isum-body { color: var(--ink-2); font-weight: 400; line-height: 1.7; }
/* 위기 신호 경고 — 검수 총평은 없앴지만 이것만은 눈에 띄어야 한다. */
.inspect-summary .isum-alert {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--fail-bg); border: 1px solid var(--fail-line);
  color: #7E2C22; font-weight: 600; line-height: 1.65;
}

.submit-result {
  border-radius: var(--radius); padding: 18px 20px; font-size: 14px; margin-bottom: 12px;
  background: var(--pass-bg); border: 1px solid #BFD2C6; color: var(--ink-2);
}
.submit-result b { color: var(--pass); }
.submit-result .btn { margin-top: 14px; }

/* ─────────────────────────────────────────────────────────────
   11. 진행률 게이지
   ───────────────────────────────────────────────────────────── */
.gauge { max-width: 520px; margin: 0 auto; }
.action-bar .gauge { margin: 0 0 12px; max-width: none; }
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.gauge-head #gaugeMsg { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.gauge-head #gaugePct { font-family: var(--sans); font-size: 21px; font-weight: 400; color: var(--brand); font-variant-numeric: tabular-nums lining-nums; }
.gauge-track { height: 6px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 0; overflow: hidden; }
.gauge-fill { height: 100%; width: 0%; background: var(--brand); transition: width .4s ease; }

/* ─────────────────────────────────────────────────────────────
   12. 로딩 / 토스트 / 오버레이
   ───────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--rule-2); border-top-color: var(--ink);
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
.btn-primary .spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box { padding: 40px 8px; color: var(--ink-3); text-align: center; font-size: 13.5px; }
.loading-box .spinner { width: 24px; height: 24px; display: block; margin: 0 auto 14px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 13px 20px;
  border-radius: var(--radius); font-size: 13.5px; z-index: 90;
  box-shadow: 0 8px 24px rgba(23,20,15,.28);
}

.back-link {
  font-size: 13px; color: var(--ink-3); background: none; border: 0; cursor: pointer;
  padding: 6px 0; margin-bottom: 16px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
}
.back-link:hover { color: var(--brand); }
.back-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.back-link:disabled { opacity: .4; cursor: not-allowed; }

.overlay {
  position: fixed; inset: 0; background: rgba(23,20,15,.42);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.overlay-box {
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius);
  width: 100%; max-width: 540px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(23,20,15,.32);
}
.overlay-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule);
}
.overlay-head b { font-size: 15px; letter-spacing: -0.01em; }
.ov-close {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  width: 36px; height: 36px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
}
.ov-close:hover { background: var(--paper-2); color: var(--ink); }
.ov-close:focus-visible { outline: 2px solid var(--brand); }
.overlay-body { padding: 22px; font-size: 14px; color: var(--ink-2); line-height: 1.75; }
.overlay-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; flex-wrap: wrap; }

.archive-list { overflow-y: auto; padding: 6px; }
.arc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid transparent; border-bottom: 1px solid var(--rule);
}
.arc-item:last-child { border-bottom: 1px solid transparent; }
.arc-item:hover { background: var(--brand-tint); border-color: var(--brand); }
.arc-item .muted { font-size: 12.5px; margin-top: 3px; }
.arc-main { flex: 1; min-width: 0; cursor: pointer; }
.arc-main:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-s); }
/* 삭제는 되돌릴 수 없다 — 행을 여는 동작과 눈에 띄게 분리하고, 색에만 의존하지 않도록 이름을 준다. */
.arc-del {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: var(--radius-s);
}
.arc-del:hover { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.arc-del:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.arc-badge {
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  background: transparent; border: 1px solid var(--rule-2);
  border-radius: var(--radius-s); padding: 2px 7px; margin-left: 7px;
}
.arc-badge.sub { color: var(--pass); border-color: #BFD2C6; background: var(--pass-bg); }

/* 확인 모달 — 되돌릴 수 없는 행동(이용권 차감) 전 게이트 */
.confirm-cost {
  display: flex; gap: 12px; padding: 14px 16px; margin: 4px 0 2px;
  background: var(--warn-bg); border: 1px solid #DCCBA1; border-radius: var(--radius);
  font-size: 13.5px; color: #63471A;
}
.confirm-cost svg { flex-shrink: 0; margin-top: 3px; color: var(--warn); }
.confirm-cost b { color: #4A340F; }

/* 확인 모달 — 되돌릴 수 없는 행동(사례 삭제) 전 게이트 */
.confirm-danger {
  display: flex; gap: 12px; padding: 14px 16px; margin: 4px 0 2px;
  background: var(--fail-bg); border: 1px solid #E0BFB6; border-radius: var(--radius);
  font-size: 13.5px; color: #7E2C22;
}
.confirm-danger svg { flex-shrink: 0; margin-top: 3px; color: var(--danger); }
.confirm-danger b { color: #5C1F17; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

.how-list { margin: 0 0 4px 20px; padding: 0; font-size: 14px; color: var(--ink-2); }
.how-list li { margin-bottom: 9px; padding-left: 4px; }
.how-list b { color: var(--ink); }

.hidden { display: none !important; }

/* 스크린리더 전용 — 색·위치로만 전달되는 상태를 글자로도 준다.
   position:absolute를 쓰지 않는다: 가로 스크롤 컨테이너(양식 탭) 안에서
   위치 기준 조상을 잘못 잡으면 페이지 전체에 가로 스크롤을 만든다(실측 538px). */
.sr-only {
  display: inline-block; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; vertical-align: baseline;
}

/* ─────────────────────────────────────────────────────────────
   13. 관리자 화면
   ───────────────────────────────────────────────────────────── */
.key-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.key-table th, .key-table td { border-bottom: 1px solid var(--rule); padding: 11px 9px; text-align: left; }
.key-table th { color: var(--ink-3); font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.key-code { font-family: var(--mono); font-weight: 700; color: var(--ink); cursor: pointer; }
.pill { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-s); border: 1px solid; }
.pill.on { background: var(--pass-bg); color: var(--pass); border-color: #BFD2C6; }
.pill.off { background: var(--fail-bg); color: var(--fail); border-color: #E0BFB6; }
.mini { font-size: 12.5px; min-height: 36px; padding: 6px 12px; }

/* ─────────────────────────────────────────────────────────────
   14. 반응형
   태블릿 ≤880 : 표지 세로 적층 · 섹션 여백 축소
   모바일 ≤620 : 양식 탭 라벨 유지(번호만 남기지 않는다) · 액션바 2줄 ·
                 페이지 이동 버튼 균등 분할 · 표지 로고 축소
   ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .cover-inner { flex-direction: column; gap: 20px; padding: 32px 20px 28px; }
  .cover-mark img { height: 58px; }
  .cover h1 { font-size: 26px; margin-top: 4px; }
  .fsection { padding: 24px 22px 12px; }
  .container { padding: 22px 20px 90px; }
  .stepper-wrap { margin-left: -20px; margin-right: -20px; padding: 0 20px; }
}

@media (max-width: 620px) {
  :root { --appbar-h: 52px; }
  body { font-size: 15px; }
  .appbar { padding: 7px 14px; gap: 10px; }
  .appbar-logo { height: 26px; }
  .appbar-title { display: none; }
  .appbar-div { display: none; }
  .tool-btn { padding: 8px; min-width: 40px; justify-content: center; }
  /* 아이콘만 남기되 display:none 은 쓰지 않는다 — 접근가능 이름이 사라져
     "Links do not have a discernible name"가 된다. 시각적으로만 클리핑한다. */
  .tool-btn .tool-label {
    width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  /* 저장 상태는 모바일에서 오히려 더 중요하다 — 점만 남기지 않고 글자를 유지한다.
     대신 '· 방금' 같은 꼬리는 잘라 폭을 확보(app.js setSaveState가 짧은 문구를 넣는다). */
  .savestate { padding: 0 2px 0 0; font-size: 11.5px; }
  .savestate .save-label { max-width: 8em; overflow: hidden; text-overflow: ellipsis; }

  .container { padding: 18px 14px 96px; }
  .cover-inner { padding: 26px 14px 22px; }
  .cover h1 { font-size: 23px; }
  .cover-lede { font-size: 14.5px; }
  .card { padding: 20px 16px; }
  .fsection { padding: 20px 16px 10px; }
  .fsection-title { font-size: 18px; }
  .fsection-desc { margin-bottom: 20px; padding-bottom: 16px; }

  .steps-bar { margin-bottom: 20px; }
  .step-chip { font-size: 12px; gap: 6px; padding: 10px 2px 9px; }

  .stepper-wrap { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  /* 번호만 남기면 방향감각을 잃는다 → 라벨 유지, 폭만 제한 */
  .fstep { padding: 6px 11px; font-size: 12.5px; }
  .fstep-t { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; }

  .fitem { padding-bottom: 22px; margin-bottom: 22px; }
  .fitem-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fitem textarea { min-height: 120px; }
  .fitem textarea.long { min-height: 190px; }

  .fieldset-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .fieldset-grid .sub { padding-top: 10px; }
  .fieldset-grid .fs-subhead { margin-top: 14px; }

  .yn-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .yn-opts { justify-content: stretch; }
  .yn-opts .rad { flex: 1; justify-content: center; min-height: 42px; }

  .page-nav { gap: 8px; }
  .page-nav .btn { flex: 1; padding: 9px 8px; }
  #pageLabel { display: none; }

  .action-bar { padding: 12px 14px; margin-left: -14px; margin-right: -14px; border-radius: 0; border-left: 0; border-right: 0; }
  .action-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .action-row .muted { text-align: center; font-size: 12.5px; line-height: 1.6; }
  .action-btns { width: 100%; margin-left: 0; }
  .action-btns .btn { flex: 1; }

  .overlay { padding: 0; align-items: flex-end; }
  .overlay-box { max-width: none; max-height: 88vh; border-radius: var(--radius) var(--radius) 0 0; }
  .overlay-foot { flex-direction: column-reverse; }
  .overlay-foot .btn { width: 100%; }

  .df-row { flex-direction: column; gap: 3px; }
  .df-label { flex: none; }
}

/* 접근성 — 모션 축소 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 고대비 모드 */
@media (prefers-contrast: more) {
  :root { --rule: #9A907C; --rule-2: #7D7360; --ink-3: #4A443A; --ink-4: #5C554A; }
}

/* 인쇄 */
@media print {
  .appbar, .action-bar, .page-nav, .stepper-wrap, .steps-bar, .overlay { display: none !important; }
  body { background: #fff; }
  .fsection, .card { border-color: #999; break-inside: avoid; }
}