/* 사용자 앱 하위 화면 · 안내 화면 (매매사업자 안내 H-04)
 * - user-tokens.css · user-home.css 뒤에 읽힙니다(레이아웃 user-app-head 의 stylesheets 로 이 화면에서만).
 * - 토큰만 씁니다. 묶음 머리(SectionHeader)는 user-home.css 의 home-section__head · home-section__title, "준비 중"은 보이는 배지 없이 화면 읽기용 글자(app-visually-hidden)만.
 * - 접두어: 하위 화면 상단 바 app-topbar*, 안내 본문 guide-*.
 * - 근거: 시안 .dtop(상단 바) · .dlg(본문) · .dlt(표) · .dll(목록) · .dlk(밑줄 링크), docs/고비_개발계획서.md 2-3 · 2-6(누르는 영역 48px, 초점 표시). */

/* ---------- 하위 화면 상단 바 (시안 .dtop): "‹ 제목", 높이 44px, 위에 붙음(sticky), 뒤로 아이콘 가운데가 화면 왼쪽 26px ----------
 * 뒤로 누르는 영역은 48 × 48(시안 36px) — 아이콘 위치가 시안과 같도록 좌우 -14px */
.app-header--sub {
  position: sticky;
  top: calc(-1 * max(var(--app-top-min), var(--app-safe-top)) + var(--app-safe-top)); /* 위 8px(시안 .sbar)은 올라가고 바만 남음 */
  z-index: 10;
}

.app-topbar {
  display: grid;
  grid-template-columns: var(--layout-hit-min) minmax(0, 1fr) var(--layout-hit-min);
  min-height: var(--layout-subbar-height);
  margin-inline: -14px;
}

.app-topbar .app-icon-btn {
  margin-block: calc((var(--layout-subbar-height) - var(--layout-hit-min)) / 2);
}

.app-topbar__back {
  justify-self: start;
}

.app-topbar__title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-topbar__end {
  width: var(--layout-hit-min);
}

/* ---------- 안내 본문 ---------- */
.guide {
  display: block;
}

/* 첫 제목(요소 2, 시안 .dlg h2): 20px 굵게, 위 14 · 아래 8 */
.guide-lead {
  margin: var(--space-3_5) 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  word-break: keep-all;
}

/* 문단 (시안 .dlg p): 13.5px, 줄 1.65 */
.guide-text {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm_5);
  line-height: var(--font-leading-relaxed);
  word-break: keep-all;
}

/* ---------- 비교 표 (요소 3, 시안 .dlt): 12.5px, 칸 안쪽 8 / 6px, 모서리 10px. 좁은 화면 · 큰 글자에서는 표만 가로로 넘김(페이지는 넘치지 않음) ----------
 * 시안 표는 border-collapse 표에 overflow hidden + 모서리 10px 이라 바깥 테두리는 잘려 보이지 않고 안쪽 선만 보임 → 감싸는 상자는 테두리 없이 모서리만 */
.guide-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-table);
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs_5);
  line-height: var(--font-leading-compact);
}

.guide-table th,
.guide-table td {
  padding: var(--space-2) var(--space-1_5);
  border: 1px solid var(--color-border-default);
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}

/* 바깥 테두리는 감싸는 상자가 그림 (모서리 둥글게) */
.guide-table tr > :first-child {
  border-left: 0;
}

.guide-table tr > :last-child {
  border-right: 0;
}

.guide-table thead tr:first-child > * {
  border-top: 0;
}

.guide-table tbody tr:last-child > * {
  border-bottom: 0;
}

.guide-table thead th {
  background: var(--color-bg-subtle);
  font-weight: var(--font-weight-bold);
}

.guide-table tbody th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

/* ---------- 점 목록 (요소 4 · 5, 시안 .dll): 13px, 줄 1.7, 왼쪽 18px, 항목 사이 여백 없음 ---------- */
.app .guide-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-loose);
  list-style: disc;
  word-break: keep-all;
}

/* ---------- 밑줄 링크 (요소 7): 시안 .dlk #B11B22 = brand.primary-pressed. 누르는 영역 48px ---------- */
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  min-height: var(--layout-hit-min);
  color: var(--color-brand-primary-pressed);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
}

.app .guide-link {
  color: var(--color-brand-primary-pressed);
}

/* 밑줄은 링크 글자에만 */
.guide-link__text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 시안 v15 (H v0.13 H-04 "본문은 스타일만", 개발계획서 4-1 마지막 줄) — body.app--v15 화면에서만 ----------
 * 상단 바(명조 제목 · 잉크 선)는 공통 부품(public/user-app.css .app--v15 .app-topbar*)이, 섹션 머리(명조 18 · 잉크 선 1.5px)는
 * public/user-home.css 의 .app--v15 .home-section__head 가 바꿈. 여기서는 큰 제목 · 표 · 목록 · 링크만. 바탕은 회색(토큰 --color-bg-page) */
.app--v15 .guide-lead {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.5px;
}

/* 표: 흰 바탕 · 잉크 선(위아래 테두리 잉크, 칸 사이는 회색), 모서리 없음(시안 v15 .dlt) */
.app--v15 .guide-table-wrap {
  border-top: 1px solid var(--color-border-inverse);
  border-bottom: 1px solid var(--color-border-inverse);
  border-radius: 0;
  background: var(--color-bg-surface);
}

.app--v15 .guide-table thead th {
  border-bottom-color: var(--color-border-inverse);
  background: var(--color-bg-surface);
}

.app--v15 .guide-table tbody th {
  color: var(--color-text-primary);
}

/* 밑줄 링크: 잉크(시안 v15 --link = 잉크 — 밑줄로 링크를 구분) */
.app--v15 .guide-link,
.app.app--v15 .guide-link {
  color: var(--color-text-link);
}