/* CySuperStore — 안내/문서 페이지 TYPOGRAPHY (고정 기준).
 *
 * 운영자 지시(2026-09-29): "폰트를 더 크게 하고 고정해라". 이 파일이 그 기준의 유일한 정의처다.
 * 한 페이지에 하드코딩하지 않는다 — 다른 안내/문서 페이지에도 `.guide-page` + `.guide-prose`
 * (+ 필요하면 `.guide-toc`, `.guide-stickybar`)를 붙이면 같은 크기와 같은 고정 동작이 적용된다.
 *
 * 고정 값(줄이지 말 것):
 *   본문 23px / 줄간격 1.85 / 대제목 40px / 섹션 제목 34px / 소제목 25px / 코드 18px
 *   읽기 폭 68ch(약 760~820px) / 터치 타겟 44px 이상 / 모바일 390px 오버플로 0
 *
 * 팔레트는 기존 토큰을 그대로 쓴다: #101923(다크 네이비) · #0f766e/#14b8a6(틸) ·
 * 중립 배경(--cy-bg) · 라디우스 4~10px · 글래스모피즘 없음.
 * 자바스크립트 의존 없음: 스티키/앵커/고정 버튼은 전부 CSS(position: sticky / fixed)와
 * 순수 `<a href="#id">` 링크만 쓴다.
 */

:root {
  /* ---- 고정 타이포 스케일 (다른 문서 페이지에서도 이 토큰만 쓰면 된다) ---- */
  --guide-fs-body: 23px;
  --guide-lh-body: 1.85;
  --guide-fs-title: 40px;
  --guide-fs-h2: 34px;
  --guide-fs-h3: 25px;
  --guide-fs-code: 18px;
  --guide-lh-code: 1.75;
  --guide-fs-meta: 17px;
  --guide-measure: 68ch;          /* 읽기 폭: 한 줄 60~70자 수준 */
  --guide-touch: 44px;            /* 최소 터치 타겟 */
  --guide-space: 26px;

  /* ---- 기존 팔레트 (새 색을 만들지 않는다) ---- */
  --guide-ink: var(--cy-text, #16202c);
  --guide-ink-strong: #101923;    /* 다크 네이비 */
  --guide-muted: #4b5563;         /* 본문 회색도 WCAG AA 이상으로 진하게 */
  --guide-brand: #0f766e;
  --guide-brand-soft: #14b8a6;
  --guide-line: var(--cy-border, #e3e6ea);
  --guide-surface: var(--cy-surface, #ffffff);
  --guide-surface-alt: #f2f6f5;
  --guide-radius: 8px;
  --guide-radius-sm: 6px;
}

/* ---------- 페이지 골격 ---------- */
.guide-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 30px;
  align-items: start;
  padding-bottom: 96px; /* 고정 '맨 위로' 버튼이 마지막 줄을 가리지 않게 */
}
.guide-page__main { min-width: 0; }

/* ---------- 고정(sticky) 섹션 이동 바 ----------
   앱 상단바(.cy-topbar, sticky top:0, 높이 실측 55.4px 데스크톱 / 69.8px 모바일) 바로 아래에 붙는다.
   grid 로 배치한다: [제목 | 섹션 칩(가로 스크롤) | 맨 위로] 한 줄.
   (flex-wrap 로 두면 칩 줄이 다음 줄로 밀려 바가 204px 까지 커지는 문제가 실측되어 grid 로 고정했다.) */
.guide-stickybar {
  position: sticky;
  top: 58px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 26px;
  padding: 10px 14px;
  background: var(--guide-surface);
  border: 1px solid var(--guide-line);
  border-left: 6px solid var(--guide-brand);
  border-radius: var(--guide-radius);
  box-shadow: 0 2px 6px rgba(16, 25, 35, .10);
}
.guide-stickybar__title {
  font-size: var(--guide-fs-meta);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--guide-ink-strong);
  white-space: nowrap;
}
.guide-stickybar__links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;           /* 칩이 많으면 이 줄만 가로 스크롤 (페이지는 안 밀림) */
  padding-bottom: 2px;
}
.guide-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--guide-touch);      /* 고정 높이: 터치 타겟 44px */
  padding: 0 14px;
  font-size: var(--guide-fs-meta);
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
  color: var(--guide-brand);
  background: var(--guide-surface-alt);
  border: 1px solid var(--guide-line);
  border-radius: 999px;
}
.guide-chip:hover, .guide-chip:focus-visible {
  color: #ffffff;
  background: var(--guide-brand);
  border-color: var(--guide-brand);
}
.guide-toplink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--guide-touch);
  padding: 0 16px;
  font-size: var(--guide-fs-meta);
  font-weight: 800;
  text-decoration: none;
  color: #ffffff;
  background: var(--guide-ink-strong);
  border-radius: 999px;
}
.guide-toplink:hover, .guide-toplink:focus-visible { background: var(--guide-brand); }

/* 화면 우하단에 계속 떠 있는 '맨 위로' (자바스크립트 없음) */
.guide-toplink--float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  box-shadow: 0 3px 10px rgba(16, 25, 35, .28);
}

/* ---------- 고정(sticky) 목차 사이드바 (데스크톱) ---------- */
.guide-toc {
  position: sticky;
  top: 58px;
  align-self: start;
  background: var(--guide-surface);
  border: 1px solid var(--guide-line);
  border-radius: var(--guide-radius);
  padding: 16px 16px 18px;
  box-shadow: var(--cy-shadow, 0 1px 2px rgba(16, 24, 40, .06));
  max-height: calc(100vh - 84px);
  overflow-y: auto;
}
.guide-toc__head {
  margin: 0 0 10px;
  font-size: var(--guide-fs-meta);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--guide-brand);
}
.guide-toc__list { margin: 0; padding: 0; list-style: none; }
.guide-toc__list li { margin: 0 0 2px; }
.guide-toc__link {
  display: block;
  min-height: var(--guide-touch);
  padding: 9px 10px;
  font-size: var(--guide-fs-meta);
  line-height: 1.5;
  color: var(--guide-ink);
  text-decoration: none;
  border-radius: var(--guide-radius-sm);
}
.guide-toc__link:hover, .guide-toc__link:focus-visible {
  background: var(--guide-surface-alt);
  color: var(--guide-brand);
}
.guide-toc__link--sub { padding-left: 22px; font-size: 16px; color: var(--guide-muted); }

/* ---------- 본문 타이포 (.guide-prose — 재사용 클래스) ---------- */
.guide-prose {
  max-width: var(--guide-measure);
  font-size: var(--guide-fs-body);
  line-height: var(--guide-lh-body);
  color: var(--guide-ink);
}
.guide-prose > * + * { margin-top: 1.05em; }
.guide-prose p { margin: 0 0 1.05em; }
.guide-prose h2 {
  margin: 1.7em 0 .55em;
  font-size: var(--guide-fs-h2);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--guide-ink-strong);
  scroll-margin-top: 138px; /* 스티키 바에 제목이 가리지 않게 (상단 58 + 바 높이 ≈ 66 + 여유) */
  padding-top: .35em;
  border-top: 2px solid var(--guide-line);
}
.guide-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.guide-prose h3 {
  margin: 1.5em 0 .45em;
  font-size: var(--guide-fs-h3);
  line-height: 1.4;
  color: var(--guide-brand);
  scroll-margin-top: 138px;
}
.guide-prose h4 {
  margin: 1.3em 0 .35em;
  font-size: 21px;
  line-height: 1.45;
  color: var(--guide-ink-strong);
}
.guide-prose a { color: var(--guide-brand); text-decoration: underline; text-underline-offset: 3px; }
.guide-prose strong { color: var(--guide-ink-strong); }
.guide-prose ul, .guide-prose ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.guide-prose li { margin: .4em 0; }
.guide-prose li > ul, .guide-prose li > ol { margin: .35em 0; }
.guide-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "NanumGothicCoding", monospace;
  font-size: var(--guide-fs-code);
  background: var(--guide-surface-alt);
  border: 1px solid var(--guide-line);
  border-radius: 4px;
  padding: 1px 6px;
  /* 긴 경로/URL 같은 끊을 수 없는 토큰이 본문을 밀어내지 않게 (390px 오버플로 0) */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.guide-prose pre {
  margin: 0 0 1.2em;
  padding: 18px 20px;
  font-size: var(--guide-fs-code);
  line-height: var(--guide-lh-code);
  background: var(--guide-ink-strong);
  color: #e8f1f0;
  border-radius: var(--guide-radius);
  overflow-x: auto;            /* 넓은 명령만 이 블록 안에서 스크롤 — 페이지는 밀리지 않는다 */
  max-width: 100%;
}
.guide-prose pre code {
  font-size: var(--guide-fs-code);
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  overflow-wrap: normal;   /* pre 안에서는 접지 않는다 — 블록 자체가 스크롤한다 */
  word-break: normal;
  white-space: pre;
}
/* 코드 블록은 본문 폭보다 넓게 쓴다(명령을 자주 줄이지 않도록) */
.guide-prose--wide code, .guide-prose--wide pre { max-width: 100%; }
.guide-wide { max-width: 900px; }

/* 표: 모바일에서는 표만 가로 스크롤(페이지 오버플로 금지) */
.guide-tablewrap { max-width: 100%; overflow-x: auto; margin: 0 0 1.3em; }
.guide-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 19px;
  line-height: 1.65;
  background: var(--guide-surface);
  border: 1px solid var(--guide-line);
  border-radius: var(--guide-radius);
}
.guide-prose th, .guide-prose td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--guide-line);
}
.guide-prose thead th {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--guide-brand);
  background: var(--guide-surface-alt);
  white-space: nowrap;
}
.guide-prose tbody tr:last-child td { border-bottom: 0; }

.guide-prose blockquote {
  margin: 0 0 1.2em;
  padding: 14px 18px;
  border-left: 6px solid var(--guide-brand-soft);
  background: var(--guide-surface-alt);
  border-radius: 0 var(--guide-radius) var(--guide-radius) 0;
  color: var(--guide-ink);
}
.guide-prose blockquote p:last-child { margin-bottom: 0; }

/* 강조 상자 */
.guide-callout {
  max-width: var(--guide-measure);
  margin: 0 0 1.4em;
  padding: 16px 20px;
  border: 1px solid var(--guide-line);
  border-left: 6px solid var(--guide-brand);
  border-radius: var(--guide-radius);
  background: var(--guide-surface);
  font-size: 20px;
  line-height: 1.7;
}
.guide-callout--warn { border-left-color: #b7791f; background: #fdf8ee; }
.guide-callout--stop { border-left-color: #c0392b; background: #fdf1f0; }
.guide-callout__title {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--guide-ink-strong);
  margin-bottom: 6px;
}

/* 상태 배지(읽기 전용 요약) */
.guide-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--guide-touch);
  padding: 8px 16px;
  font-size: var(--guide-fs-meta);
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid var(--guide-line);
  background: var(--guide-surface);
}
.guide-badge--closed { color: #c0392b; background: #fdf1f0; border-color: #f0c7c3; }
.guide-badge--open { color: #1c9c62; background: #e7f6ee; border-color: #bfe6d2; }
.guide-badge--info { color: var(--guide-brand); background: var(--guide-surface-alt); }

/* 리드 문단 (문서 첫 문단) */
.guide-lead {
  font-size: 25px;
  line-height: 1.65;
  color: var(--guide-ink-strong);
  border-left: 6px solid var(--guide-brand-soft);
  padding-left: 18px;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1150px) {
  /* 목차는 사이드바가 아니라 본문 위 블록으로 (스티키 바는 그대로 고정) */
  .guide-page { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; max-height: none; }
}

/* 전역 미세 조정(실측 2026-09-29): 390px 에서 공용 상단바(.cy-topbar)의 내용 폭이 390.6px 이라
   모든 페이지(apex 포함)에 1px 가로 스크롤이 생긴다. 좁은 화면에서 좌우 패딩을 24px -> 18px 로
   줄여 12px 을 확보한다 — 줄바꿈/높이 변화 없음, 다른 페이지에도 이득. */
@media (max-width: 700px) {
  /* 명시도: cysuperstore.css 의 `.cy-topbar { padding: 12px 24px }` 보다 세야 한다
     (파일 로드 순서상 automation_guide.css 가 먼저 로드되므로 동일 명시도로는 진다). */
  body.cy-body .cy-topbar { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 700px) {
  /* 390px: 큰 글씨를 살짝 줄이되 데스크톱보다 작아 보이지 않게 (20~21px) */
  :root {
    --guide-fs-body: 21px;
    --guide-lh-body: 1.78;
    --guide-fs-title: 33px;
    --guide-fs-h2: 28px;
    --guide-fs-h3: 23px;
    --guide-fs-code: 17px;
    --guide-fs-meta: 16px;
    --guide-measure: 100%;
  }
  /* 모바일: 1행 = [목차 제목 | 맨 위로], 2행 = 섹션 칩(가로 스크롤) */
  .guide-stickybar {
    top: 74px;                     /* 앱 상단바 실측 69.8px 바로 아래 */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title top" "links links";
    padding: 8px 10px;
    gap: 6px 8px;
  }
  .guide-stickybar__title { grid-area: title; font-size: 15px; }
  .guide-stickybar__links {
    grid-area: links;              /* 칩 줄은 아래 전체 폭 */
    -webkit-overflow-scrolling: touch;
  }
  .guide-stickybar > .guide-toplink { grid-area: top; justify-self: end; }
  .guide-toplink--float { right: 12px; bottom: 12px; }
  .guide-prose table { font-size: 17px; }
  /* 상단 74 + 바 높이(≈104) + 여유 = 제목이 바에 가리지 않는다 */
  .guide-prose h2 { scroll-margin-top: 196px; }
  .guide-prose h3 { scroll-margin-top: 196px; }
  .guide-prose pre { font-size: 16px; padding: 14px 16px; }
}