/* =============================================================================
 * 서명전에 — 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 ---------- */
/* G-13 라운드 25 v9 (사용자 피드백): 웹 랜딩 (smje.co.kr) CSS 그대로 복사.
   진짜 원인: .scroll--plain 이 var(--surface) 흰 배경으로 deco 를 덮고 있었음.
   .home-scroll 을 투명 처리 + deco 위치/크기/색은 웹과 정확 동일. */
.home-app {
  background: var(--bg-card, #fff);
  position: relative;
  overflow: hidden;
}
.home-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.home-deco--brand {
  top: -120px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft, #E7EFFF) 0%, transparent 70%);
}
.home-deco--accent {
  top: 120px; left: -100px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft, #FFF5D6) 0%, transparent 70%);
}
.home-app .navbar {
  background: transparent;
  position: relative;
  z-index: 2;
}
.home-app .navbar.navbar--scrolled {
  background: var(--bg-card, #fff);
}
/* 가장 중요 — .scroll 배경 투명해야 deco 가 보임 */
.home-app .home-scroll {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* G-13 라운드 25 v5 (사용자 요청): 웹 랜딩 (smje.co.kr) 과 동일한 톤.
   진한 인디고 카드 → 흰 배경 + 인디고 chip + 검정 헤드라인 + 인디고 CTA. */
.home-hero {
  margin: 8px 20px 16px;
  padding: 4px 4px 8px;
  background: transparent;
  border-radius: 22px;
  color: var(--label, #191F28);
  position: relative;
  overflow: visible;
  box-shadow: none;
}
.home-hero::before, .home-hero::after { display: none; }
.home-hero__eyebrow {
  /* chip — 인디고 soft 배경 + 인디고 ink 글자 + shield 아이콘 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-soft, #E7EFFF);
  color: var(--brand-ink, #1850BE);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.home-hero__title {
  /* 검정 헤드라인 + 강조 부분만 인디고 (JSX 에서 span.home-hero__accent 처리) */
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.20;
  margin: 0 0 14px;
  color: var(--label, #191F28);
}
.home-hero__title .home-hero__accent { color: var(--brand, #2D6FF0); }
.home-hero__sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--label-secondary, #4E5968);
  line-height: 1.55;
  margin: 0 0 22px;
}
.home-hero__meta {
  /* 두 항목을 세로로 쌓는다. 한 줄에 다 들어가는 짧은 라벨이라 자동 줄바꿈
     걱정 없고, 위→아래 시선 흐름이 hero CTA 까지 자연스럽게 이어짐. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-subhead);
  opacity: 0.92;
  line-height: 1.35;
}
.home-hero__meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: 0.5;
}
.home-hero__cta {
  /* G-13 라운드 25 v5: 웹 랜딩과 동일 — 인디고 솔리드 + 흰 글자 + brand glow. */
  margin-top: 4px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--brand, #2D6FF0);
  color: #fff;
  padding: 18px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  word-break: keep-all;
  box-shadow: 0 8px 24px rgba(45, 111, 240, 0.32);
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), background 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.home-hero__cta:hover { background: var(--brand-hover, #1E5FE0); }
.home-hero__cta:active { transform: scale(0.98); }

/* 법적 자문 회피 디스클레이머 (G-13 R26, Phase 0).
   CTA 바로 아래에 작게 — 강조하지 않되 항상 보이는 위치. 변호사법 109조
   reject 사유 회피용. 결과 화면에도 동일 문구 노출. */
.home-hero__disclaimer {
  margin: 14px 0 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--label-secondary);
  opacity: 0.72;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.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 이 자동으로 줄을 맞춰준다 (정렬감 ↑). */
/* 좁은 폰 폭에서 2-col 그리드로 두면 두 번째 카드의 부제 ("갤러리나 PDF에서 고르기")
   가 짤려서, 한 줄로 풀로 깐다. 텍스트 잘림 방지 + 시선 흐름이 위→아래로 자연스러움. */
.home-quickrow--stack { grid-template-columns: 1fr; gap: 10px; }
.home-quick--span { grid-column: 1 / -1; }
.home-quick--lg {
  /* 카드 자체를 키워 어포던스 강화. padding 18px / min-height 76px 로 한 톤 큼.
     아이콘 48px, 라벨 fs-callout(약 16px), 부제 13px 로 계층도 또렷해짐. */
  flex-direction: row; align-items: center; gap: 14px;
  padding: 18px 16px;
  min-height: 76px;
  text-align: left;
}
.home-quick--lg .home-quick__icon {
  width: 48px; height: 48px; border-radius: 13px;
  flex-shrink: 0;
}
.home-quick--lg .home-quick__icon svg {
  width: 26px; height: 26px;
}
.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-callout);     /* 한 단계 키움 (subhead → callout) */
  font-weight: var(--w-headline);
  letter-spacing: -0.02em;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-quick__sub {
  font-size: 13px;
  line-height: 1.3;
  color: var(--label-secondary); opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section header (plain).
   G-13 (3차): 결과 화면의 inset-group__header 와 톤을 맞추되, 한 단계 큼
   (callout → headline). 섹션 간 가로선으로 시각적 구분. */
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 10px;
  margin-top: 14px;
  border-top: 0.5px solid var(--separator);
}
.section-h:first-of-type {
  border-top: 0;
  margin-top: 0;
}
.section-h__title {
  font-size: var(--fs-headline);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--label);
  margin: 0;
  text-transform: uppercase;
  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 {
  /* 토스 미니앱 네이티브 헤더(좌측 < / 우측 X) 와 겹치지 않도록 위치를 충분히 위로.
     이전 (54px) 은 native header 한참 아래라 시선 흐름상 동떨어져 있었음.
     20px 로 끌어올려 화면 우측 상단 안전영역 바로 아래 자리잡게. */
  position: absolute;
  top: max(20px, calc(var(--sa-top, 0px) + 6px));
  right: 12px;
  min-height: 36px; padding: 0 10px;
  white-space: nowrap; word-break: keep-all;
  border: 0; background: transparent;
  color: var(--ios-blue);
  font-family: inherit; font-size: var(--fs-callout);
  font-weight: 500;
  cursor: pointer; z-index: 2;
}
.analyzing__body {
  /* G-13 라운드 25 v3: ring 110px + 모든 spacing 더 압축 — 한 화면 안에 다 보이게. */
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 8px 24px 4px;
  text-align: center;
  overflow-y: auto;
}
.analyzing__ring {
  width: 110px; height: 110px;
  margin: 4px 0 10px;
  position: relative;
  flex-shrink: 0;
}
.analyzing__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--label);
  margin: 0 0 6px;
  white-space: nowrap; word-break: keep-all;
}
.analyzing__step {
  font-size: 14px;
  color: var(--label-secondary);
  opacity: 0.85;
  margin: 0 0 14px;  /* 24 → 14 */
  white-space: nowrap; word-break: keep-all;
}
.analyzing__steps {
  display: flex; flex-direction: column; gap: 2px;  /* G-13 라운드 25 v3: 4→2 더 압축 */
  align-items: flex-start;
  width: 100%; max-width: 280px;
}
.analyzing__step-row {
  font-size: 13.5px !important;
}
.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 {
  /* G-13 라운드 25 v4: 웹 share-page (smje.co.kr/s/<token>) 와 시각 통일.
     세로 그라데이션 → 흰색 페이드, padding 28/22, radius 28 (r-2xl). */
  margin: 10px 20px 22px;
  padding: 28px 22px 26px;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
.res-hero::before { display: none; }

/* 톤별 부드러운 세로 그라데이션 — 흰색으로 페이드 (웹과 동일) */
.res-hero--alert {
  background: linear-gradient(180deg, #FFE9EB 0%, #fff 80%);
}
.res-hero--warn {
  background: linear-gradient(180deg, #FFF1DC 0%, #fff 80%);
}
.res-hero--safe {
  background: linear-gradient(180deg, #DEF7EC 0%, #fff 80%);
}

.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 {
  /* 4개 카운터 (법위반·불공정·협상대상·총이슈) — 1px 구분자 3개로 grid 7-track. */
  margin-top: 16px;
  padding: 10px 4px;
  display: grid;
  grid-template-columns: 1fr 1px 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 ---------- */
/* G-13 라운드 25 디자인 핸드오프: 프로필 카드 — 브랜드 그라데이션 */
.acct-header {
  margin: 8px 20px 16px;
  padding: 22px 20px;
  background: linear-gradient(135deg, #2D6FF0 0%, #1F55C4 100%);
  color: #fff;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(45, 111, 240, 0.25);
  display: flex; align-items: center; gap: 14px;
}
.acct-header::before {
  content: ""; position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.acct-header > * { position: relative; z-index: 1; }
.acct-header__avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}
.acct-header__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.acct-header__email {
  font-size: 12px;
  color: #fff; opacity: 0.85;
  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;
}