/* style.css — 연락처 손쉽게 추가
 * 모바일 우선(NF1) · 노년층 배려 큰 글씨·큰 터치영역(NF4)
 * 모든 색/간격/크기는 tokens.css의 토큰만 참조합니다. 인라인 값 금지.
 */

/* ---------- 기반 ---------- */

html, body {
  margin: 0;
  /* clip이어야 sticky/fixed 자손이 살아남습니다. hidden 쓰지 말 것. */
  overflow-x: clip;
}

* { box-sizing: border-box; }

/* hidden 속성은 UA 스타일시트의 display:none으로 걸리는데, 클래스에 display를 주면
 * 특이성에서 밀려 무시됩니다(.mapgrid{display:grid}가 [hidden]을 이겨버림).
 * 화면 전환·접기가 전부 hidden에 걸려 있으므로 전역으로 못 박습니다. */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-12);
}

/* 스크린리더 전용 — 파일 input을 숨기면서도 포커스는 받게 한다 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ic {
  width: 1.25em; height: 1.25em;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
  vertical-align: -.18em;
}

/* ---------- 상단바 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: -.02em;
  min-width: 0;
}
.brand .ic { color: var(--accent); width: 20px; height: 20px; }
.lockchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-1) var(--ease-out);
}
.lockchip .ic { width: 15px; height: 15px; color: var(--ok); }
.lockchip:hover { color: var(--text-1); }
.lockchip:active { opacity: .7; }
.lockchip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lockchip[aria-expanded="true"] { color: var(--accent-ink); }

/* ---------- 개인정보 처리 요약 ---------- */

.privacy {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.privacy-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}
.privacy-lead b { color: var(--text-1); }
.privacy-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}
.privacy-list li { margin-bottom: var(--space-2); }
.privacy-list li:last-child { margin-bottom: 0; }
.privacy-list b { color: var(--text-1); }

/* ---------- 진행 표시 ---------- */

.progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.pstep { flex: none; }
.plabel {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}
.pstep[aria-current="step"] .plabel { color: var(--accent-ink); }
.pbar {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line);
  transition: background-color var(--dur-3) var(--ease-out);
}
.pbar.is-done { background: var(--accent); }

/* ---------- 제목 ---------- */

.lead {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: var(--lh-tight);
  text-wrap: balance;
  /* 긴 이메일·URL이 제목에 섞여도 뷰포트를 밀지 않도록 */
  overflow-wrap: anywhere;
  min-width: 0;
}
.lead-sm { font-size: var(--text-xl); }
/* 화면 전환 시 제목으로 포커스를 옮겨 스크린리더가 따라오게 하는데,
 * 제목은 조작 대상이 아니므로 시각적 링은 띄우지 않는다. */
[tabindex="-1"]:focus { outline: none; }
.desc {
  margin: 0 0 var(--space-5);
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
}
.count { color: var(--text-3); font-size: var(--text-base); font-weight: 700; }
.count b { color: var(--accent-ink); }

.hint {
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  margin: var(--space-3) 0 0;
}
.hint b { color: var(--text-2); font-weight: 700; }

.footnote {
  color: var(--text-3);
  font-size: var(--text-xs);
  text-align: center;
  line-height: var(--lh-loose);
  margin: var(--space-6) 0 0;
}

/* 상태 메시지 — 빈 상태에서도 자리를 잡아 두어야 나타날 때 화면이 밀리지 않는다 */
.status {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: var(--space-3) 0 0;
  min-height: 1.5em;
  line-height: var(--lh-normal);
}
.status:empty { min-height: 0; margin: 0; }
.status.is-ok { color: var(--ok); font-weight: 700; }
.status.is-warn { color: var(--danger-ink); font-weight: 700; }

/* ---------- 사진 히어로 ---------- */

.hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--accent-fill);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.hero:hover { background: var(--accent-fill-hover); }
.hero:active { transform: translateY(1px); }
/* hero는 <label>(파일 선택)과 <button>(화면 이동) 양쪽에 쓰인다. 버튼 기본 스타일을 지운다. */
button.hero { border: 0; font-family: inherit; text-align: left; }
.hero:focus-within,
.hero:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.hero-ic {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--accent-fill);
  display: grid; place-items: center;
  flex: none;
}
.hero-ic .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.hero-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-title { font-size: var(--text-lg); font-weight: 800; letter-spacing: -.02em; }
.hero-desc { font-size: var(--text-sm); font-weight: 500; }
.hero-go { margin-left: auto; flex: none; }
.hero-go .ic { width: 22px; height: 22px; }

/* 다크모드에서는 채움색이 밝아지므로 컬러 글로우를 끈다(어두운 면 위 글로우는 금물) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { box-shadow: none; }
  :root:not([data-theme="light"]) .hero-ic { background: var(--surface-1); color: var(--accent); }
}
:root[data-theme="dark"] .hero { box-shadow: none; }
:root[data-theme="dark"] .hero-ic { background: var(--surface-1); color: var(--accent); }

/* ---------- 구분선 ---------- */

/* 홈 화면 설치 유도 카드 — 설치 가능할 때만 나타난다(ui.js) */
.installcard {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.installcard-t {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-1);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- 방법 선택 행 ---------- */

.rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-4);
  border: 0;
  background: var(--surface-1);
  color: var(--text-1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.mrow:hover { background: var(--surface-2); }
.mrow:active { background: var(--surface-3); }
.mrow:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.mrow-ic {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  display: grid; place-items: center;
  flex: none;
}
.mrow-ic .ic { width: 20px; height: 20px; }
.mrow-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mrow-title { font-weight: 700; font-size: var(--text-base); }
.mrow-desc { font-size: var(--text-xs); color: var(--text-3); font-weight: 500; }
.mrow-go { margin-left: auto; flex: none; color: var(--text-4); }
.mrow-go .ic { width: 20px; height: 20px; }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -.02em;
  /* 클릭 가능한 글자는 절대 두 줄로 접히지 않는다 */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:active { transform: none; }

.btn-primary {
  /* 19px 볼드 = WCAG 큰글씨 기준. 채움색은 --accent-fill(대비 5.4:1) */
  font-size: var(--text-lg);
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-fill-hover); }

.btn-sub {
  background: var(--surface-2);
  color: var(--text-1);
}
.btn-sub:hover:not(:disabled) { background: var(--surface-3); }

.btn-mini {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  background: var(--surface-1);
  color: var(--accent-ink);
}
.btn-mini:hover:not(:disabled) { background: var(--surface-2); }

.btn-block { width: 100%; }
.btn-grow { flex: 1; }
.btn-icon { padding: var(--space-3); min-width: var(--tap); }
.btn-icon .ic { width: 20px; height: 20px; }

.btnrow {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
/* 30명짜리 목록에서 하단 버튼을 찾아 스크롤하지 않도록 붙여 둔다.
 * 페이지 상단에 sticky 요소가 없으므로 top 충돌 없음. */
.btnrow-sticky {
  position: sticky;
  bottom: 0;
  padding: var(--space-3) 0 var(--space-4);
  background: linear-gradient(to bottom, transparent, var(--bg) var(--space-3));
  z-index: 2;
}

.textbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.textbtn:hover { color: var(--accent-fill-hover); }
.textbtn:active { opacity: .7; }
.textbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.textbtn .ic { width: 16px; height: 16px; }
.textbtn-block { width: 100%; justify-content: flex-start; margin-top: var(--space-2); }

/* ---------- 입력 필드 ----------
 * 상태 전환에 border-width를 쓰지 않습니다(레이아웃이 흔들림).
 * 포커스는 outline으로 — 배경색만 바뀌는 표시는 눈에 띄지 않습니다.
 */

textarea, input, select {
  font-family: inherit;
  color: var(--text-1);
  background: var(--surface-1);
}
textarea, .inputrow input, .field select {
  width: 100%;
  min-height: var(--tap);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  transition: border-color var(--dur-2) var(--ease-out);
}
textarea {
  min-height: 160px;
  line-height: var(--lh-loose);
  resize: vertical;
  font-variant-numeric: tabular-nums;
}
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* :focus-visible 미지원 브라우저 폴백 */
textarea:focus, input:focus, select:focus { border-color: var(--accent); }

.inputrow {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  align-items: stretch;
}
.inputrow input { flex: 1; min-width: 0; }
.inputrow .btn { flex: none; }

/* ---------- 드롭존 ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-8) var(--space-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone:active { background: var(--surface-3); }
.dropzone:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dz-ic {
  width: 48px; height: 48px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--accent-ink);
  display: grid; place-items: center;
}
.dz-ic .ic { width: 24px; height: 24px; }
.dz-t { font-weight: 700; font-size: var(--text-base); }
.dz-d { color: var(--text-3); font-size: var(--text-xs); }

/* ---------- 열 매핑 ---------- */

.mapgrid {
  display: grid;
  /* minmax(0,·)이어야 긴 옵션 텍스트가 트랙을 밀지 않는다 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 700; color: var(--text-2); }
.field select {
  appearance: none;
  padding-right: var(--space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.tablescroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
  -webkit-overflow-scrolling: touch;
}
table.preview {
  border-collapse: collapse;
  font-size: var(--text-xs);
  white-space: nowrap;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
table.preview th, table.preview td {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
table.preview th {
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 700;
}
table.preview th.is-mapped { color: var(--accent-ink); background: var(--accent-tint); }
table.preview td.is-dropped { color: var(--text-4); }
table.preview tr:last-child td { border-bottom: 0; }

/* ---------- 사람 카드 ---------- */

.plist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/* 하단 고정 버튼이 마지막 카드를 영구히 가리지 않도록 자리를 비워 둔다 */
#confirmList { padding-bottom: var(--space-2); }
.person {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}
.person-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--on-accent);
  background: var(--accent-fill);
}
.person-name {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: -.02em;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  min-height: var(--tap);
}
.person-del {
  flex: none;
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 0;
  background: none;
  color: var(--text-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.person-del .ic { width: 19px; height: 19px; }
.person-del:hover { color: var(--danger-ink); background: var(--danger-tint); }
.person-del:active { transform: scale(.94); }
.person-del:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

.fields { padding: 0 var(--space-4); display: flex; flex-direction: column; }
.frow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--line-soft);
  min-height: 48px;
}

/* 칩·토글은 카드 밀도를 지키려고 시각 크기를 작게 두되,
 * 실제 누르는 영역은 44px로 넓힙니다(가짜 여백이 아니라 진짜 히트 영역). */
.frow-type, .chip { position: relative; }
.frow-type::after, .chip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: var(--tap);
  transform: translateY(-50%);
}
.frow-ic { flex: none; width: 22px; color: var(--text-3); display: grid; place-items: center; }
.frow-ic .ic { width: 18px; height: 18px; }
.frow-type {
  flex: none;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.frow-type:hover { background: var(--surface-3); }
.frow-type:active { transform: scale(.96); }
.frow-type:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.frow-label {
  flex: none;
  width: 48px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
}
.frow-value {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font-size: var(--text-base);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  /* 번호를 고치려고 누를 때 옆 칸을 잘못 짚지 않도록 바닥선을 지킵니다 */
  min-height: var(--tap);
  font-variant-numeric: tabular-nums;
}
.person-name:focus-visible, .frow-value:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -1px;
  background: var(--surface-2);
}
.person-name:focus, .frow-value:focus { background: var(--surface-2); }

.frow-flag {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.frow-flag.is-warn { color: var(--warn-ink); background: var(--warn-tint); }
.frow-flag.is-info { color: var(--text-2); background: var(--surface-2); }

.person-empty {
  color: var(--text-3);
  font-size: var(--text-sm);
  padding: var(--space-2) 0 var(--space-3);
}

.addfields {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.chip .ic { width: 14px; height: 14px; }
.chip:hover { background: var(--accent-tint); color: var(--accent-ink); }
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 기기 선택 탭 ---------- */

.segmented {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-2);
  border-radius: 14px;
  margin-bottom: var(--space-5);
}
.seg-btn {
  flex: 1;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.seg-btn[aria-selected="true"] {
  background: var(--surface-1);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
.seg-btn:active { transform: scale(.98); }
.seg-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 단계 안내 ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--text-1);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: var(--text-sm);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.steps li b { color: var(--accent-ink); font-weight: 700; }
.step-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.step-note b { color: var(--text-2); }

.guide-badge {
  display: block;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--lh-normal);
}
/* 두 번째 방법 — 대안이라는 게 보이되 눈에 덜 띄게 */
.guide-badge-alt {
  margin-top: var(--space-6);
  background: var(--surface-2);
  color: var(--text-2);
}

/* ---------- OCR 배너 ---------- */

.ocrbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.ocrbar > .ic { color: var(--accent-ink); width: 20px; height: 20px; flex: none; }
.ocrbar-t {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-ink);
  line-height: var(--lh-normal);
}
/* 어느 인식기가 돌았는지 — 문제 보고용 표시라 눈에 띄지 않게 둔다 */
.ocrbar-engine {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-3);
}

/* ---------- 서버 전송 동의 ----------
 * 개인정보가 기기 밖으로 나가는 유일한 지점이라, 눈에 띄게 두고 문구를 길게 둔다.
 * 여기서 대충 넘기게 만들면 고지의 의미가 없다.
 */

.consent {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: var(--space-4);
  margin-top: var(--space-3);
}
.consent-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text-1);
}
.consent-body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}
.consent-body b { color: var(--text-1); }
.consent-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}
.consent-list li { margin-bottom: var(--space-1); }
.consent-list b { color: var(--text-1); }

/* ---------- 전달 계층 ---------- */

.tier {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-3);
  background: var(--surface-1);
}
.tier-lead { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier-h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.tier-n { font-weight: 800; font-size: var(--text-md); letter-spacing: -.02em; }
.tier-d { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 var(--space-3); line-height: var(--lh-loose); }
.badge {
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.badge-hot { background: var(--accent-fill); color: var(--on-accent); }

.linkbox {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.linkbox code {
  /* min-width:0이 없으면 flex 항목이 콘텐츠 실폭으로 고정돼 320px에서 가로 스크롤이 생긴다 */
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linkbox .btn { flex: none; }

/* ---------- QR ---------- */

.qrgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.qr-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  background: var(--surface-1);
  min-width: 0;
}
.qr-box { display: flex; justify-content: center; }
.qr-box svg { width: 100%; height: auto; max-width: 140px; }
.qr-name { font-weight: 700; font-size: var(--text-sm); margin-top: var(--space-2); overflow-wrap: anywhere; }
.qr-num { color: var(--text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.qr-partial { color: var(--warn-ink); font-size: var(--text-xs); font-weight: 700; margin-top: var(--space-1); }

.empty {
  color: var(--text-3);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-6) 0;
}

/* ---------- 모션 축소 ----------
 * CSS transition뿐 아니라 JS의 smooth scroll도 이 설정을 읽어 꺼집니다(ui.js).
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .chip:active, .frow-type:active, .person-del:active, .hero:active { transform: none; }
}

/* ---------- 인쇄 (QR 시트) ---------- */

@media print {
  body { background: #fff; color: #000; }
  .topbar, .progress, .btnrow, .status, .tier-h, .tier-d, .footnote,
  .linkbox, .inputrow, .ocrbar, .desc, #shareResult { display: none !important; }
  .screen[hidden] { display: none !important; }
  .tier { border: 0; padding: 0; margin: 0; }
  .tier-lead { box-shadow: none; }
  .qrgrid { grid-template-columns: repeat(3, 1fr); gap: 10mm 6mm; }
  .qr-item { break-inside: avoid; border: 1px solid #ccc; }
  .app { max-width: none; padding: 0; }
}