/*
 * 상생마켓 홈페이지 — 이용 가이드 페이지(guide.html) 전용 스타일
 * 소스: 디자인 확정본 05-guide-pc.html / 05-guide-mobile.html의 <style> 블록 중
 * 이 페이지에서만 쓰는 규칙만 이식했다.
 * 헤더·푸터·버튼·섹션 폭은 main.css를 그대로 재사용한다.
 *
 * 목차는 폭에 따라 두 모습이다(하나의 마크업으로 처리):
 *   PC   — 좌측 230px sticky 사이드바, 그룹은 펼친 상태
 *   모바일 — 화면 폭을 채우는 세로 아코디언(STEP 1/2), 그룹은 접힌 상태(기획서 §4.11)
 * 초기 펼침/접힘이 폭에 따라 다르므로 CSS만으로는 불가능하다 — main.js가 <details>의 open을 세팅한다.
 *
 * 확정본은 숨긴 checkbox + label로 아코디언을 만들었는데 그 구조는 키보드 포커스를 받지 못해
 * 키보드만으로는 목차를 펼칠 수 없다. 시각 결과는 그대로 두고 마크업만 네이티브
 * <details>/<summary>로 바꿨다(이 사이트가 FAQ에서 이미 쓰는 패턴).
 *
 * 브레이크포인트는 확정본의 900px 단일이 아니라 main.css 기준(980/620)을 따른다 — download.css와 같은 이유.
 */

/* ── 본문 레이아웃 ── */
.wrap { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 60px; padding-top: 8px; padding-bottom: 96px }

/* ── 목차 ── */
.toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 150px); overflow: auto; padding-right: 8px }
.tochead { display: none }                 /* 모바일에서만 노출 */
.tocgrp { margin-bottom: 16px }

/* 그룹 머리글 — PC에서는 확정본의 .tocg(연회색 알약) 모양이 된다 */
.tocghead {
  display: flex; align-items: center; gap: 10px;
  background: #F2F5F2; border: 1px solid #E7ECE7; border-radius: 10px;
  padding: 11px 14px; margin-bottom: 6px;
  font-size: 15.5px; font-weight: 800; color: var(--color-text); letter-spacing: -.02em;
  cursor: pointer; list-style: none; transition: background-color .2s ease;
}
.tocghead::-webkit-details-marker { display: none }
.tocghead:hover { background: #EAF3EB }
.tocgtag, .tocgcount { display: none }     /* STEP 배지·개수는 모바일에서만 */
.tocgtitle { flex: 1 }

/* 펼침/접힘 화살표 — 확정본 그대로(펼침 ▾ / 접힘 ▸) */
.cv2 {
  width: 7px; height: 7px; flex: none; margin-top: -3px;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.tocgrp:not([open]) .cv2 { transform: rotate(-45deg); margin-top: 0 }

.toc a { display: block; font-size: 15px; color: var(--color-text-muted); line-height: 1.5; padding: 8px 0; font-weight: 500; transition: color .18s ease }
.toc a:hover { color: var(--color-primary) }
/* 지금 보고 있는 항목 — main.js의 bindSectionSpy가 토글한다(확정본에 없던 보강:
   21개짜리 스크롤 페이지에서 현재 위치를 알 수 없으면 목차가 제 역할을 못 한다) */
.pg .toc a.cur { color: var(--color-primary); font-weight: 700 }

/* ── 항목 섹션 ── */
.gsec { padding: 46px 0; border-top: 1px solid #EFF2EF; scroll-margin-top: 104px }
.gsec:first-child { border-top: 0; padding-top: 8px }
.gnum { font-size: 13.5px; font-weight: 800; color: var(--color-primary); letter-spacing: .06em; display: block; margin-bottom: 8px }
/* 05는 항목 제목이 24px(main.css 기본)보다 큰 27px이다 — 확정본 값 */
.gsec .h-sm { font-size: 27px; line-height: 1.3 }
.glead { font-size: 16.5px; color: #4A524C; line-height: 1.85; margin-top: 12px; max-width: 760px }

/* 스크린샷 박스 — 한 섹션에 여러 장이 세로로 쌓인다 */
.shot {
  margin-top: 26px; background: #F2F5F2; border: 1px solid #E7ECE7; border-radius: var(--radius-card);
  padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* 확정본은 인라인 max-width(760·860·900px)를 두고 CSS에서 !important로 760px로 덮어써
   인라인이 실제로는 죽어 있었다 — 렌더 결과(760px 상한)만 그대로 두고 죽은 선언은 걷어냈다. */
.shot img {
  width: auto; height: auto; max-width: min(100%, 760px); display: block;
  border-radius: 10px; border: 1px solid #E0E6E0; background: #fff; box-shadow: 0 12px 30px rgba(20,40,26,.12);
}

/* ── 단계 목록 ── */
.glist { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 20px }
.glist li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start }
.gi {
  width: 28px; height: 28px; border-radius: 100px; background: #EAF3EB; color: var(--color-primary);
  font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.gt { font-size: 17.5px; font-weight: 800; letter-spacing: -.03em; line-height: 1.5 }
.gd { font-size: 16px; color: #4A524C; line-height: 1.85; margin-top: 6px }
.gd b { color: var(--color-text) }

.tip { margin-top: 24px; background: #F7FAF7; border: 1px solid #DCEBDF; border-radius: 12px; padding: 18px 22px; font-size: 15.5px; color: #3E4741; line-height: 1.8 }
.tip b { color: var(--color-primary) }

/* ══ 태블릿+폰 — 목차가 세로 아코디언으로 바뀐다 ══ */
@media (max-width: 980px) {
  .wrap { grid-template-columns: minmax(0,1fr); gap: 20px; padding-bottom: 64px }

  /* 목차는 본문 위에 놓이는 전폭 밴드가 된다 — 좌우로 .sec 패딩만큼 흘려보낸다 */
  .toc { position: static; max-height: none; overflow: visible; padding-right: 0 }
  .tocwrap { background: #FAFBFA; border-bottom: 8px solid #F5F7F5; margin: 0 -32px; padding: 18px 32px 20px }
  .tochead { display: block; font-size: 13px; font-weight: 800; color: var(--color-text); margin-bottom: 12px }
  .tochead span { color: var(--color-text-muted); font-weight: 600 }

  .tocgrp { margin-bottom: 0; border: 1px solid #E3E8E3; border-radius: 14px; background: #fff; overflow: hidden }
  .tocgrp + .tocgrp { margin-top: 10px }

  .tocghead { background: #fff; border: 0; border-radius: 0; margin-bottom: 0; padding: 14px 16px; min-height: 44px; font-size: 15px }
  .tocghead:hover { background: #FAFBFA }
  .tocgtag {
    display: block; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--color-primary);
    border-radius: 6px; padding: 4px 8px; letter-spacing: .02em; flex: none;
  }
  .tocgcount { display: block; font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; flex: none }

  .cv2 { width: 8px; height: 8px; margin: 0 0 0 2px; transform: rotate(45deg) }
  .tocgrp:not([open]) .cv2 { transform: rotate(-135deg); margin-top: 0 }

  .tocitems { border-top: 1px solid #EFF2EF }
  .toc .tocitems a {
    display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: #3E4741;
    padding: 13px 16px; border-bottom: 1px solid #F5F7F5; min-height: 46px;
  }
  .toc .tocitems a:last-child { border-bottom: 0 }
  .toc .tocitems a::before { content: ''; width: 5px; height: 5px; border-radius: 100px; background: #CFE3D3; flex: none }

  .gsec { padding: 36px 0 }
  .gsec .h-sm { font-size: 23px }
  .glead { font-size: 16px }
  .gt { font-size: 17px }
  .gd { font-size: 15.5px }
  .shot { padding: 14px; border-radius: 12px; gap: 16px; margin-top: 20px }
  .shot img { width: 100%; max-width: 100% }
  .glist li { grid-template-columns: 26px 1fr; gap: 12px }
  .gi { width: 26px; height: 26px; font-size: 13px }
  .hero-sub { font-size: 16px }
}

/* ══ 폰 폭 — 05-guide-mobile.html 확정본 수치 ══ */
@media (max-width: 620px) {
  .tocwrap { margin: 0 -20px; padding: 18px 20px 20px }

  .gsec { padding: 32px 0; scroll-margin-top: 108px }
  .gsec:first-child { padding-top: 4px }
  .gnum { font-size: 12.5px; letter-spacing: .05em }
  .gsec .h-sm { font-size: 18.5px }
  .glead { font-size: 14px; line-height: 1.8; margin-top: 10px }
  .shot { margin-top: 18px; gap: 14px }
  .shot img { border-radius: 8px; box-shadow: 0 8px 20px rgba(20,40,26,.1) }
  .glist { margin-top: 20px; gap: 16px }
  .gt { font-size: 15px }
  .gd { font-size: 13.5px; line-height: 1.75; margin-top: 5px }
  .tip { margin-top: 18px; padding: 14px 16px; font-size: 13.5px; line-height: 1.75 }
  .hero-sub { font-size: 14.5px }
}