/* =============================================================================
 * 서명전에 — iOS Screens
 * ========================================================================== */

/* ---------- Onboarding ---------- */
/* Safe Area: 노치 영역이 존재하면 sa-top 아래에 10px만 여백.                       */
.onb {
  position: absolute; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: max(54px, calc(var(--sa-top, 0px) + 10px));
  padding-bottom: max(34px, var(--sa-bottom, 0px));
  z-index: 50;
}
.onb__skip {
  position: absolute;
  top: max(54px, calc(var(--sa-top, 0px) + 10px));
  right: 12px;
  min-height: 44px; padding: 0 12px;
  border: 0; background: transparent;
  color: var(--ios-blue);
  font-family: inherit; font-size: var(--fs-body);
  cursor: pointer; z-index: 2;
}
.onb__body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 12px 32px 0;
  align-items: center; text-align: center;
  justify-content: center;
}
.onb__art {
  width: 100%; max-width: 280px; aspect-ratio: 1;
  margin-bottom: 32px;
  display: grid; place-items: center;
}
.onb__title {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--label);
  margin: 0 0 12px;
  text-wrap: balance;
}
.onb__body-text {
  font-size: var(--fs-body);
  line-height: 1.42;
  color: var(--label-secondary);
  opacity: 0.85;
  margin: 0;
  max-width: 300px;
  text-wrap: pretty;
}
.onb__footer {
  padding: 0 20px 8px;
  display: flex; flex-direction: column; gap: 16px;
  align-items: center;
}
.onb__dots {
  display: flex; gap: 6px;
}
.onb__dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--fill-2);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.onb__dot.is-active { width: 18px; background: var(--brand); }

/* ---------- Home Tab ---------- */
.home-hero {
  margin: 8px 20px 16px;
  padding: 20px;
  background: var(--brand);
  border-radius: var(--r-xl);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.home-hero__eyebrow {
  font-size: var(--fs-footnote);
  opacity: 0.8;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.home-hero__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0 0 14px;
  text-wrap: balance;
}
.home-hero__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-subhead);
  opacity: 0.92;
}
.home-hero__meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: 0.5;
}
.home-hero__cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: var(--fs-subhead);
  font-weight: var(--w-headline);
  backdrop-filter: blur(10px);
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.home-quickrow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 20px 24px;
}
.home-quick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  background: var(--bg-2);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--label);
  font-family: inherit;
}
.home-quick:active { background: var(--fill-3); }
.home-quick__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
}
.home-quick__label {
  font-size: var(--fs-caption1);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  word-break: keep-all;
}

/* 2-column large variant */
.home-quickrow--2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Stack variant — 2-column 그리드에 마지막 행을 풀폭으로 깔 때 사용.
   기존엔 별도 .home-quickrow + 음수 마진 hack 으로 붙였지만, span 모디파이어로
   동일 컨테이너 안에 두면 grid gap 이 자동으로 줄을 맞춰준다 (정렬감 ↑). */
.home-quickrow--stack { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-quick--span { grid-column: 1 / -1; }
.home-quick--lg {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 14px;
  min-height: 68px;       /* 2줄 텍스트 기준 높이 통일 — 행마다 들쭉날쭉 방지 */
  text-align: left;
}
.home-quick--lg .home-quick__icon {
  width: 40px; height: 40px; border-radius: 11px;
  flex-shrink: 0;
}
.home-quick__body {
  display: flex; flex-direction: column; gap: 2px;
  /* min-width:0 + flex:1 1 auto 가 함께 있어야 자식 텍스트의 ellipsis 가 카드
     경계 밖으로 튀어나가지 않는다. (이전엔 min-width:0 만 있어 우측으로 overflow) */
  flex: 1 1 auto;
  min-width: 0;
}
.home-quick--lg .home-quick__label {
  font-size: var(--fs-subhead);
  font-weight: var(--w-headline);
  letter-spacing: -0.02em;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-quick__sub {
  /* 11px / opacity 0.6 은 너무 흐려서 두 줄짜리 카드 안에서 라벨과 시각적
     계층이 무너졌다. 12px / 0.72 로 살짝 키워 가독성 + 정렬감 확보. */
  font-size: 12px;
  line-height: 1.3;
  color: var(--label-secondary); opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section header (plain) */
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 8px;
}
.section-h__title {
  font-size: var(--fs-title3);
  font-weight: var(--w-title);
  letter-spacing: -0.02em;
  color: var(--label);
  margin: 0;
  white-space: nowrap;
  word-break: keep-all;
}
.section-h__link {
  font-size: var(--fs-subhead);
  color: var(--ios-blue);
  font-weight: 400;
  border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 0 6px;
  white-space: nowrap;
  word-break: keep-all;
}

/* Recent analyses — empty state */
.recent-empty {
  margin: 4px 20px 20px;
  padding: 22px 18px 24px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px dashed var(--separator);
  text-align: center;
}
.recent-empty__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--label);
  margin-bottom: 4px;
}
.recent-empty__sub {
  font-size: 13px;
  color: var(--label-secondary);
  opacity: 0.7;
  line-height: 1.45;
}

/* Recent analyses list */
.recent-list { margin: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.recent {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  border: 0; width: 100%;
  font-family: inherit; text-align: left;
  color: var(--label);
}
.recent:active { background: var(--fill-3); }
.recent__thumb {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.recent__thumb--warn { background: var(--warn-soft); color: var(--warn); }
.recent__thumb--alert { background: var(--alert-soft); color: var(--alert); }
.recent__thumb--safe { background: var(--safe-soft); color: var(--safe); }
.recent__body { flex: 1; min-width: 0; }
.recent__title {
  font-size: var(--fs-body);
  font-weight: var(--w-headline);
  letter-spacing: -0.015em;
  color: var(--label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-footnote);
  color: var(--label-secondary); opacity: 0.65;
  margin-top: 2px;
}
.recent__dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--label-secondary); opacity: 0.5; }
.recent__chev { color: var(--label-secondary); opacity: 0.3; }

/* Credit card (home) */
.credit-card {
  margin: 0 20px 20px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.credit-card__left {
  display: flex; flex-direction: column; gap: 2px;
}
.credit-card__label {
  font-size: var(--fs-footnote);
  color: var(--label-secondary); opacity: 0.65;
}
.credit-card__value {
  font-family: var(--font-num);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.credit-card__unit {
  font-family: var(--font-text);
  font-size: 14px; font-weight: 500; color: var(--label-secondary); opacity: 0.7;
  margin-left: 2px;
}

/* ---------- Analyzing (fullscreen) ---------- */
/* Safe Area 준수: 분석 중 풀스크린에서도 노치·홈 인디케이터 영역을 피해요.         */
.analyzing {
  position: absolute; inset: 0;
  padding-top: max(54px, calc(var(--sa-top, 0px) + 10px));
  padding-bottom: max(34px, var(--sa-bottom, 0px));
  background: var(--bg);
  display: flex; flex-direction: column;
  z-index: 60;
}
.analyzing__cancel {
  position: absolute;
  top: max(54px, calc(var(--sa-top, 0px) + 10px));
  right: 12px;
  min-height: 44px; padding: 0 12px;
  white-space: nowrap; word-break: keep-all;
  border: 0; background: transparent;
  color: var(--ios-blue);
  font-family: inherit; font-size: var(--fs-body);
  cursor: pointer; z-index: 2;
}
.analyzing__body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 32px;
  text-align: center;
}
.analyzing__ring {
  width: 140px; height: 140px;
  margin-bottom: 32px;
  position: relative;
}
.analyzing__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--label);
  margin: 0 0 8px;
  white-space: nowrap; word-break: keep-all;
}
.analyzing__step {
  font-size: var(--fs-body);
  color: var(--label-secondary);
  opacity: 0.85;
  margin: 0 0 24px;
  white-space: nowrap; word-break: keep-all;
}
.analyzing__steps {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
  width: 100%; max-width: 280px;
}
.analyzing__step-row {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-subhead);
  color: var(--label-secondary);
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  white-space: nowrap; word-break: keep-all;
}
.analyzing__step-row.is-done { opacity: 1; color: var(--label); }
.analyzing__step-row.is-active { opacity: 1; color: var(--label); font-weight: var(--w-headline); }
.analyzing__step-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill-2); color: var(--label-secondary);
  flex-shrink: 0;
}
.analyzing__step-row.is-done .analyzing__step-icon { background: var(--safe); color: #fff; }
.analyzing__step-row.is-active .analyzing__step-icon { background: var(--brand); color: #fff; }

/* ---------- Result (iOS) ----------
 * Hero 배너는 "위험 신호"를 전달하면서도 장문 요약이 읽히도록 설계.
 * 이전 버전: 전체 배경을 var(--alert)로 채워 시각적 피로가 심했음.
 * 이번 버전: 본문은 화이트 카드 + 좌측에 굵은 컬러 스트라이프 + 큰 숫자만
 * 컬러로 강조. 본문 텍스트는 짙은 잉크색으로 가독성 확보.
 */
.res-hero {
  margin: 10px 20px 20px;
  padding: 20px 20px 18px;
  /* 본문 가독성을 위해 흰 카드. 톤은 좌측 스트라이프 + 숫자 컬러로 전달. */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(10, 12, 20, 0.04));
}
/* 좌측 컬러 스트라이프 — 위험 톤을 살짝만 신호 */
.res-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--brand);
}
.res-hero--warn::before  { background: var(--warn); }
.res-hero--alert::before { background: var(--alert); }
.res-hero--safe::before  { background: var(--safe); }

/* 카드 안쪽에 은은한 컬러 틴트(3~6%) 깔아서 "톤"은 전달 */
.res-hero--alert {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--alert) 6%, var(--surface)) 0%,
    var(--surface) 120px);
}
.res-hero--warn {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warn) 6%, var(--surface)) 0%,
    var(--surface) 120px);
}
.res-hero--safe {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--safe) 6%, var(--surface)) 0%,
    var(--surface) 120px);
}

.res-hero__type {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  white-space: nowrap;
  word-break: keep-all;
}
.res-hero__count {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  row-gap: 2px;
}
.res-hero__count-n {
  font-family: var(--font-num);
  font-size: 56px; font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* 숫자에만 컬러 — 위험 신호는 여기서 강하게 */
  color: var(--brand);
}
.res-hero--alert .res-hero__count-n { color: var(--alert); }
.res-hero--warn  .res-hero__count-n { color: var(--warn); }
.res-hero--safe  .res-hero__count-n { color: var(--safe); }

.res-hero__count-unit {
  font-family: var(--font-text);
  font-size: 20px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
  word-break: keep-all;
}

/* ── Hero count parts ─────────────────────────────────────────────────────
   "X건의 법 위반 조항 및 Y건의 불공정 조항" 같이 두 part 가 같이 나올 때
   사용. flex-wrap 이 켜져 있으므로 화면이 좁으면 두 번째 part 가 자연스럽게
   다음 줄로 흘러간다. 두 숫자 모두 .res-hero__count-n 의 56px 그대로 —
   시각 위계 통일 (사용자 요청).
   ─────────────────────────────────────────────────────────────────────── */
.res-hero__count-part {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.res-hero__count-part--secondary {
  /* 두 번째 줄로 떨어졌을 때 자연스러운 들여쓰기 없음 + 줄간격 살짝 */
  margin-top: 2px;
}
/* .res-hero__count-and 는 더 이상 사용 안 함 (콤마로 대체) — 잔여 selector
   는 안전하게 남겨두지만 새 마크업엔 등장하지 않음. */
.res-hero__count-and { display: none; }
.res-hero__desc {
  font-size: var(--fs-subhead);
  color: var(--ink-subtle, var(--label));
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
  word-break: keep-all;
  /* 짧은 문장을 줄마다 살짝 띄워 읽기 편하게 */
  white-space: pre-wrap;
}
.res-hero__verdict {
  margin-top: 16px;
  padding: 10px 4px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  background: var(--surface-soft);
  border: 1px solid var(--separator);
  border-radius: 12px;
}
.res-hero__verdict-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 4px;
}
.res-hero__verdict-n {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.res-hero__verdict-label {
  font-size: var(--fs-caption2, 11px);
  color: var(--label-secondary);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  word-break: keep-all;
}
.res-hero__verdict-sep {
  width: 1px;
  background: var(--separator);
  justify-self: center;
  align-self: stretch;
  margin: 4px 0;
}
.res-hero__chips {
  margin-top: 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
/* 개별 칩은 TDS Badge 컴포넌트(Badge.jsx)가 렌더링 */

/* Issue card */
.issue-list { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.issue {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  text-align: left;
  border: 0; width: 100%;
  font-family: inherit; color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.issue::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent;
}
.issue--high::before { background: var(--alert); }
.issue--mid::before  { background: var(--warn); }
.issue--low::before  { background: var(--safe); opacity: 0.7; }
.issue:active { background: var(--fill-3); }
.issue__sev {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  align-self: flex-start;
}
.issue__sev--high { background: var(--alert-soft); color: var(--alert); }
.issue__sev--mid { background: var(--warn-soft); color: var(--warn); }
.issue__sev--low { background: var(--safe-soft); color: var(--safe); }
.issue__body { min-width: 0; }
.issue__titlerow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 2px;
}
.issue__title {
  flex: 1;
  font-size: var(--fs-callout);
  font-weight: var(--w-headline);
  letter-spacing: -0.015em;
  color: var(--label);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all;
}
/* .issue__badge: 카드 안 Badge 의 positioning 보조 (시각 속성은 Badge 가 담당) */
.issue__badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}
.issue__sevlabel--high { color: var(--alert); font-weight: 600; opacity: 1; }
.issue__sevlabel--mid  { color: var(--warn);  font-weight: 600; opacity: 1; }
.issue__sevlabel--low  { color: var(--safe);  font-weight: 600; opacity: 0.9; }
.issue__preview {
  font-size: var(--fs-footnote);
  line-height: 1.45;
  color: var(--label-secondary);
  margin: 4px 0 6px;
  text-wrap: pretty;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.issue__meta {
  font-size: var(--fs-footnote);
  color: var(--label-secondary); opacity: 0.7;
  display: flex; align-items: center; gap: 6px;
}
.issue__meta-dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--label-secondary); opacity: 0.5; }
.issue__chev { color: var(--label-secondary); opacity: 0.3; align-self: center; }

/* Quick stats */
.res-stats {
  margin: 0 20px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.res-stat {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 14px 10px;
  text-align: center;
  position: relative;
  transition: background 180ms ease;
}
.res-stat--alert {
  background: var(--alert-soft);
}
.res-stat--warn {
  background: var(--warn-soft);
}
.res-stat__val {
  font-family: var(--font-num);
  font-size: 26px; font-weight: 700;
  color: var(--label);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.res-stat--alert .res-stat__val { color: var(--alert); }
.res-stat--warn  .res-stat__val { color: var(--warn); }
.res-stat__label {
  font-size: var(--fs-caption1);
  color: var(--label-secondary);
  opacity: 0.75;
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.res-stat--alert .res-stat__label { color: var(--alert); opacity: 0.85; }
.res-stat--warn  .res-stat__label { color: var(--warn); opacity: 0.85; }

/* ---------- Issue detail (sheet) ---------- */
.issue-detail { padding: 4px 0 0; }
.issue-detail__sev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption1);
  font-weight: var(--w-headline);
  margin-bottom: 12px;
}
.issue-detail__title {
  font-size: var(--fs-title2);
  font-weight: var(--w-title);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--label);
  margin: 0 0 10px;
  text-wrap: balance;
}
.issue-detail__desc {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--label-secondary);
  margin: 0 0 18px;
  text-wrap: pretty;
  white-space: pre-line; /* 문단 구분 */
}
/* reason(설명) — 회색 한 덩어리 → 본문(진한 primary) + '한 줄로' 콜아웃으로 쪼갠 형태.
 * 아래쪽 스텝/근거법령 블록과 간격을 맞추려고 margin-bottom 은 기존 __desc 와 동일하게 유지. */
.issue-detail__reason {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--label);          /* 회색 → 본문 primary 로 승격 (가독성 ↑) */
  text-wrap: pretty;
  white-space: pre-line;
  letter-spacing: -0.01em;
}
.reason-tldr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
}
.reason-tldr__icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  color: var(--brand);
  margin-top: 2px;
}
.reason-tldr__content { min-width: 0; }
.reason-tldr__label {
  display: inline-block;
  font-size: var(--fs-footnote);
  font-weight: var(--w-headline);
  color: var(--brand);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.reason-tldr__text {
  margin: 0;
  font-size: var(--fs-callout);
  line-height: 1.5;
  color: var(--label);
  font-weight: 500;
  text-wrap: pretty;
}
.quote {
  background: var(--fill-3);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: var(--fs-callout);
  line-height: 1.45;
  color: var(--label);
  position: relative;
  margin: 0 0 14px; /* 발췌 → 설명 순서. 아래 설명과 붙임 */
}
.quote__label {
  font-size: var(--fs-footnote);
  color: var(--label-secondary); opacity: 0.7;
  margin-bottom: 6px;
  font-weight: 500;
}
.quote__body { display: inline; }
.quote__mark { color: var(--brand); font-weight: var(--w-headline); }
.quote__ellipsis {
  color: var(--label-secondary);
  opacity: 0.55;
  margin: 0 2px;
  letter-spacing: 0.02em;
}
.quote__hl {
  background: var(--alert-soft, #ffeeee);
  color: var(--alert-ink, #d22030);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: var(--w-headline);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.steps { margin-bottom: 18px; }
.steps__title {
  font-size: var(--fs-footnote);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--label-secondary); opacity: 0.6;
  font-weight: 500;
  margin: 0 0 10px;
}
.step {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--separator);
}
.step:last-child { border-bottom: 0; }
.step__num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-caption1); font-weight: var(--w-headline);
  display: grid; place-items: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.step__text {
  font-size: var(--fs-callout);
  line-height: 1.4;
  color: var(--label);
  margin: 0;
}

/* ---------- Document reader ---------- */
.doc-reader {
  padding: 16px 20px 32px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--label);
}
.doc-reader h2 {
  font-size: var(--fs-title3);
  font-weight: var(--w-title);
  letter-spacing: -0.02em;
  margin: 24px 0 12px;
}
.doc-reader p { margin: 0 0 14px; text-wrap: pretty; }
.doc-reader mark {
  background: var(--alert-soft);
  color: var(--alert);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 500;
  cursor: pointer;
}
.doc-reader mark.m-warn { background: var(--warn-soft); color: var(--warn); }

/* Sticky floating issue pill in reader */
.reader-pill {
  position: sticky;
  bottom: 12px;
  margin: 0 20px;
  background: rgba(28,28,30,0.9);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  cursor: pointer; border: 0;
  font-family: inherit;
  font-size: var(--fs-subhead);
  justify-content: space-between;
}
.reader-pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px;
  background: var(--alert);
  color: #fff;
  font-size: var(--fs-caption1); font-weight: var(--w-headline);
  font-variant-numeric: tabular-nums;
}

/* ---------- Account / Settings ---------- */
.acct-header {
  padding: 8px 20px 16px;
  display: flex; align-items: center; gap: 12px;
}
.acct-header__avatar {
  width: 56px; height: 56px;
  border-radius: 28px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
}
.acct-header__name {
  font-size: var(--fs-title3);
  font-weight: var(--w-title);
  letter-spacing: -0.02em;
  color: var(--label);
  margin: 0;
}
.acct-header__email {
  font-size: var(--fs-subhead);
  color: var(--label-secondary); opacity: 0.7;
  margin-top: 2px;
}

/* ---------- Empty / permission state ---------- */
.permission {
  padding: 40px 32px 20px;
  text-align: center;
}
.permission__art {
  width: 88px; height: 88px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
}
.permission__title {
  font-size: var(--fs-title3);
  font-weight: var(--w-title);
  letter-spacing: -0.02em;
  color: var(--label);
  margin: 0 0 8px;
}
.permission__body {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.75;
  line-height: 1.45;
  text-wrap: pretty;
}