/* Hallmark · shape: Long Document · genre: modern-minimal · theme: custom, the maker's warm paper carried into a step-by-step guide · job: try · draw: manual
 * hero: a title, one sentence and two actions · nav: the maker's top bar and a numbered contents list · footer: the way back to the maker · imagery: screenshots of the maker itself, the one control to touch outlined in orange · signature: every step shown as the real screen with that control outlined
 * axes: light/sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V3 · weakest: V, a guide is a column of steps and screenshots; the outlined control in each screenshot carries it */
/* Hallmark · waive 59 · shape is Long Document, a step-by-step 사용법 in one reading column · steps sit 64px apart so the next step stays in reach */
/* Hallmark · waive 77 · shape is Long Document · each step such as 주소 넣고 한 번 더 올리기 is a short instruction in one reading column */
/* Hallmark · waive 78 · shape is Long Document · thirteen step heads stay modest so 차례 and the screenshots lead */
/* Hallmark · waive 79 · the space under the title holds the 차례 list of the thirteen steps · the contents list is a nav, read as empty */
/* Hallmark · answered F4 · the maker's buttons, reused as they are: one accent fill for 만들기 시작 */

/* 토큰은 만들기 화면(maker.css)의 것을 그대로 쓰고, 설명서에만 쓰는 것만 더한다 */
:root {
  --color-tip-bg: #eef2f6; --color-tip-ink: #263b52;
  --measure: 44rem; --text-title: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.gd-brand { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.gd-brand:hover { color: var(--color-accent); }
.gd-top-act { margin-left: auto; }

.gd { max-width: var(--measure); margin-inline: auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
.gd h1, .gd h2, .gd h3 { margin: 0; font-weight: 600; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.gd h1 { font-size: var(--text-title); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.gd-lead { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-lg); }
.gd-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }

/* 차례 */
.gd-toc { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-panel); }
.gd-toc h2 { font-size: var(--text-md); }
.gd-toc ol { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); columns: 2 15rem; column-gap: var(--space-xl); }
.gd-toc li { break-inside: avoid; padding: var(--space-3xs) 0; }
.gd-toc a { display: inline-block; padding: var(--space-3xs) 0; }
.gd-toc a:hover { color: var(--color-accent-deep); }

/* 단계 */
.gd-sec { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--top-h) + var(--space-md)); }
.gd-h { display: flex; align-items: center; gap: var(--space-sm); }
.gd-h .step-n { flex: none; background: var(--color-accent); color: var(--color-accent-ink); }
.gd-sec h2 { font-size: var(--text-xl); line-height: 1.35; }
.gd-sec > * + * { margin-top: var(--space-md); }
.gd-sec > .gd-sub { margin-top: var(--space-xl); font-size: var(--text-lg); line-height: 1.4; color: var(--color-ink); }
.gd-sec p, .gd-sec li { color: var(--color-ink-2); }
.gd-sec strong { color: var(--color-ink); font-weight: 600; }
.gd-sec ol, .gd-sec ul { display: grid; gap: var(--space-xs); margin-block: var(--space-md) 0; padding-left: var(--space-lg); }
.gd-sec li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gd-sec a:hover, .gd-foot a:not(.btn):hover { color: var(--color-accent-deep); }

/* 화면 사진 */
.gd-fig { margin: var(--space-lg) 0 0; }
.gd-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-panel); }
.gd-fig-narrow { max-width: 30rem; }
.gd-fig-card { max-width: 17rem; }
.gd-fig figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* 알림 상자 */
.gd-note, .gd-tip { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); }
.gd-sec .gd-note { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.gd-sec .gd-tip { background: var(--color-tip-bg); color: var(--color-tip-ink); }
.gd-sec .gd-note strong, .gd-sec .gd-tip strong { color: inherit; margin-right: var(--space-2xs); }
.gd-tip a, .gd-note a { color: inherit; }

/* 접는 칸 */
.gd-more { border-top: 1px solid var(--color-rule); }
.gd-more:last-child { border-bottom: 1px solid var(--color-rule); }
.gd-more > summary {
  display: flex; align-items: center; gap: var(--space-sm); min-height: var(--control-h); padding: var(--space-xs) 0;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--color-ink);
}
.gd-more > summary::-webkit-details-marker { display: none; }
.gd-more > summary::after { content: ""; flex: none; margin-left: auto; width: 0.5em; height: 0.5em; border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted); transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.gd-more[open] > summary::after { transform: rotate(-135deg); }
.gd-more > summary:hover { color: var(--color-accent); }
.gd-more > :not(summary) { margin: 0 0 var(--space-md); }
.gd-faq .gd-more + .gd-more { margin-top: 0; }

.gd-foot { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }

@media (max-width: 40rem) {
  .gd { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .gd-toc { padding: var(--space-md); }
}