@charset "utf-8";

/* ==========================================================================
   사용법 (/guide) 전용 — 허브와 편 페이지가 함께 쓴다(2026-10-14)
   토큰·헤더·버튼·푸터·.cta·.faq 는 style.css 것을 그대로 쓰고, 여기엔 사용법만의 것을 둔다.
   body.gd 아래에서만 동작한다. 클래스 접두사 gd-.
   ========================================================================== */

/* 헤더 — style.css 는 34rem 이하에서 링크를 숨기고 다운로드 버튼만 남긴다.
   이 페이지엔 헤더 버튼이 없고(앱을 이미 깐 사람이 많다) 링크 둘(소개 · 사용법)이 전부라 좁은 화면에서도 둔다. */
@media (max-width: 34rem) {
  .gd .site-header .site-nav a:not(.site-nav__cta) { display: inline; }
}

/* sticky 헤더(60px)에 앵커 도착 지점의 제목이 가리지 않게 */
.gd [id] { scroll-margin-top: 5rem; }

/* --------------------------------------------------------------------------
   1. 머리
   -------------------------------------------------------------------------- */

.gd-head {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.gd-head h1 { letter-spacing: -0.03em; }

.gd-head .lede { margin-top: 0.875rem; }

/* --------------------------------------------------------------------------
   2. 내 상황 고르기 — 위 두 칸이 이 페이지의 첫 행동이다.
   스크롤 없이 두 갈래가 다 보이게 하려는 자리라 목록 앞에 둔다.
   -------------------------------------------------------------------------- */

.gd-pick {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 36rem) {
  .gd-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gd-pick a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.gd-pick a:hover { border-color: var(--primary); background: var(--surface); }

.gd-pick b {
  display: block;
  color: var(--ink);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.gd-pick__text > span {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* 오른쪽 꺾쇠 — 다른 페이지로 간다는 신호(아코디언처럼 보이지 않게) */
.gd-pick a::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border: solid var(--primary);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   3. 갈래 블록 — 제목 · 한 줄 · 순서 목록
   -------------------------------------------------------------------------- */

.gd-block {
  padding-block: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
}

.gd-block h2 { font-size: var(--text-2xl); }

.gd-block__lead {
  max-width: 46ch;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.gd-list {
  counter-reset: gd;
  margin-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}

.gd-list li {
  list-style: none;
  border-bottom: 1px solid var(--line-soft);
}

/* 줄 하나가 통째로 링크다. 번호 · 글 · 꺾쇠 세 칸 */
.gd-list a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 1rem;
  padding: 1.125rem 0.25rem;
  color: var(--ink);
  text-decoration: none;
}

.gd-list a::before {
  counter-increment: gd;
  content: counter(gd);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.gd-list b {
  display: block;
  color: var(--ink);
  font-size: var(--text-base);
  letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease-out);
}

.gd-list__text > span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.gd-list a::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.6rem 0.25rem 0 0;
  border: solid var(--line);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: border-color var(--dur) var(--ease-out);
}

.gd-list a:hover b { color: var(--primary); }
.gd-list a:hover::before { background: var(--primary); color: var(--on-primary); }
.gd-list a:hover::after { border-color: var(--primary); }

/* --------------------------------------------------------------------------
   4. 맺음 한 줄 (영상 안내)
   -------------------------------------------------------------------------- */

.gd-note {
  padding-block: 0 clamp(2.5rem, 1.8rem + 3vw, 4rem);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.gd-note a { color: var(--ink); font-weight: 600; }
.gd-note a:hover { color: var(--primary-deep); }

/* --------------------------------------------------------------------------
   5. 편 페이지 (/guide/{편}) — 첫 사용을 한 걸음씩 따라가는 틀 (2026-10-14 개편)
   빵부스러기 → 제목 · 한 줄 → 이 편이 전체 순서의 어디인지 → 단계(레일에 번호가 이어진다)
   → 완료 지점(다음 한 곳) → 설치 · 문의 한 줄.
   - 막히는 곳은 FAQ 목록으로 모으지 않고 그 단계 밑에 한 줄로 둔다(.gd-step__hint).
   - 앱 화면 위의 링은 탭하거나 채울 바로 그 자리다. 링 위치는 크롭 이미지 기준 퍼센트.
   -------------------------------------------------------------------------- */

.gd-crumb {
  padding-top: 1.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

.gd-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
}

.gd-crumb li { list-style: none; }

.gd-crumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.gd-crumb a { color: var(--muted); text-decoration: none; }
.gd-crumb a:hover { color: var(--ink); text-decoration: underline; }

.gd-head--page { padding-block: 1.25rem clamp(2rem, 1.5rem + 2.5vw, 3rem); }

/* 읽은 만큼 차는 진행 막대 — 헤더 아랫선에 붙는다. 스크롤 연동 애니메이션을 아는 브라우저에서만 보인다 */
.gd-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
}

@supports (animation-timeline: scroll()) {
  .gd-progress {
    animation: gd-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes gd-progress { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .gd-progress { display: none; }
}

/* 전체 순서에서 지금 어디인가 — 가는 길 전체가 한눈에 보이게. 지나온 칸과 지금 칸이 찬다 */
.gd-course { margin-top: 1.75rem; }

.gd-course__name {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gd-course ol {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.gd-course li { list-style: none; }

.gd-course a {
  display: block;
  padding-top: 0.5rem;
  border-top: 3px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.gd-course a:hover { color: var(--ink); }

.gd-course .is-done a,
.gd-course .is-now a { border-top-color: var(--primary); }

.gd-course .is-now a { color: var(--ink); font-weight: 700; }

/* 두 사람의 몫이 한 편에 같이 있을 때(선수 신청 · 회장 승인) 구간 제목 */
.gd-part { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.gd-part h2 { font-size: var(--text-2xl); }
.gd-part .gd-course { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   단계 — 왼쪽 레일에 번호가 줄줄이 이어지고 맨 끝에 완료 지점이 있다
   -------------------------------------------------------------------------- */

.gd-steps {
  --gd-title: var(--text-xl);
  margin-top: 2.5rem;
}

@media (min-width: 48rem) {
  .gd-steps { --gd-title: var(--text-2xl); }
}

.gd-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  list-style: none;
}

@media (min-width: 48rem) {
  .gd-steps > li {
    grid-template-columns: 2rem minmax(0, 1fr) 19rem;
    column-gap: 2rem;
  }
}

/* 레일 — 번호 아래에서 다음 번호 위까지 이어진다 */
.gd-steps > li::before {
  content: "";
  position: absolute;
  top: calc(var(--gd-title) * 1.25 + 0.625rem);
  bottom: 0.5rem;
  left: calc(1rem - 0.5px);
  width: 1px;
  background: var(--line);
}

.gd-step__n {
  grid-column: 1;
  color: var(--ink);
  font-size: var(--gd-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
}

.gd-step__body { grid-column: 2; min-width: 0; }

.gd-step__body :is(h2, h3, h4) {
  font-size: var(--gd-title);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

/* 앱 버튼·칸 이름 — 글 속에서도 화면에 적힌 그 이름으로 보이게 */
.gd-ui {
  padding: 0.04em 0.4em;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.gd-step__do {
  max-width: 42ch;
  margin-top: 0.875rem;
  line-height: 1.7;
}

.gd-step__hint {
  max-width: 46ch;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.gd-step__hint b { color: var(--ink); font-weight: 600; }

/* 앱 화면 조각 — 회색 판 위에 그 단계에서 볼 곳만 잘라 올린다. 링이 짚는 곳이 이 단계의 행동이다 */
.gd-shot {
  grid-column: 2;
  width: min(100%, 19rem);
  margin: 1.5rem 0 0;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 48rem) {
  .gd-steps > li .gd-shot { grid-column: 3; grid-row: 1; margin: 0; }
}

.gd-shot__screen { position: relative; }

.gd-shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(21 27 33 / 0.08), 0 6px 16px rgb(21 27 33 / 0.06);
}

.gd-ring {
  position: absolute;
  border: 2px solid var(--primary);
  border-radius: 12px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   완료 지점 — 레일이 여기서 끝난다. 다음으로 갈 곳은 하나만 크게
   -------------------------------------------------------------------------- */

.gd-steps > li.gd-done { padding-bottom: 0; }
.gd-steps > li.gd-done::before { content: none; }

.gd-done__node {
  display: grid;
  place-items: center;
  grid-column: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}

.gd-done__node svg { width: 1.0625rem; height: 1.0625rem; }

.gd-done h2,
.gd-done h3,
.gd-done h4 {
  font-size: var(--gd-title);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.gd-done .btn { margin-top: 1.5rem; }

.gd-done__later {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

@media (max-width: 30rem) {
  .gd-done .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   설치 · 문의 — 한 줄. 이 페이지의 큰 버튼은 위의 `다음` 하나뿐이다
   -------------------------------------------------------------------------- */

.gd-install {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.gd-install a { white-space: nowrap; }

/* 폰에서는 머리의 점프 버튼 둘을 같은 폭으로 꽉 채운다(손가락으로 누르기 쉽게) */
@media (max-width: 36rem) {
  .gd-head .btn-row .btn { width: 100%; }
}

/* 제목 안의 앱 이름은 칩 테두리를 걷어 가볍게 — 본문 속 칩과 모양을 구분한다 */
.gd-step__body :is(h2, h3, h4) .gd-ui,
.gd-done :is(h2, h3, h4) .gd-ui {
  padding: 0.02em 0.32em;
  border-color: transparent;
}

/* 완료 지점 뒤에 이어지는 `필요할 때 쓰는 것` — 같은 단계 틀을 쓰되 번호를 새로 시작하고, 레일은 마지막 번호에서 끝난다 */
.gd-tail-title {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-2xl);
}

.gd-tail-lead {
  max-width: 46ch;
  margin-top: 0.625rem;
  color: var(--muted);
  line-height: 1.7;
}

.gd-steps--tail > li:last-child { padding-bottom: 0; }
.gd-steps--tail > li:last-child::before { content: none; }