/* 가이드 장(guide.html) : 헬프센터 한 장. 짜임은 GitBook · Mintlify 의 공통 꼴을 따른다
   — 가운데 본문 단 + 오른쪽에 붙어 따라오는 「이 페이지」 목차 · 번호 원과 연결선으로 잇는 스테퍼 · 팁 / 메모 콜아웃 · 같은 크기의 그림 틀.
   본문은 두 벌(영문 · 한국어)이고 페이지 언어에 맞는 한 벌만 보인다(blog.css 의 .post-body 와 같은 규칙 · 언어는 lp.js 가 <html lang> 으로 정한다) */

.guide.post-body[lang='ko']{display:none}
:root[lang='ko'] .guide.post-body[lang='en']{display:none}
:root[lang='ko'] .guide.post-body[lang='ko']{display:grid}

/* 바깥 폭 · 좌우 여백은 머리(.nav-in)와 같다 : 본문 왼쪽 선이 로고와, 목차 오른쪽 끝이 다운로드 버튼과 맞는다 · 본문 폭(720)은 그대로 두고 목차와의 거리만 벌어진다 */
.guide{max-width:var(--wrap);margin:0 auto;padding:96px var(--pad) 120px;
  display:grid;grid-template-columns:minmax(0,720px) 200px;column-gap:72px;justify-content:space-between;align-items:start}
.guide-main{min-width:0}

/* 머리 : 작은 갈래 이름 → 제목 → 한 문단 · <p> 로 쓴 자리(갈래 이름 · 리드 · 걸음 제목 · 목차 제목 · 문의 줄)는 .guide 를 앞에 붙여 본문 규칙(.guide p)보다 앞서게 한다 */
.guide .g-eyebrow{margin:0 0 12px;font-size:13px;font-weight:500;color:var(--accent-ink)}
.guide h1{font-family:var(--font-title);font-weight:500;font-size:40px;line-height:1.15;letter-spacing:-.6px;color:var(--ink);margin:0 0 16px}
.guide .g-lead{font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}

/* 절 : 큰 절 사이는 선 하나로 끊는다 */
.guide section{padding-top:56px;margin-top:56px;border-top:1px solid var(--line-soft)}
.guide section:first-of-type{border-top:0;margin-top:24px;padding-top:24px}
.guide h2{font-family:var(--font-title);font-weight:500;font-size:28px;line-height:1.25;letter-spacing:-.4px;color:var(--ink);margin:0 0 20px}
.guide h3{font-weight:600;font-size:19px;line-height:1.4;color:var(--ink);margin:44px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guide p,.guide li{font-size:16px;line-height:28px;color:var(--ink-2)}
.guide p{margin:0 0 20px}
.guide ul{margin:0 0 20px;padding-left:20px}
.guide li{margin:0 0 8px}
.guide strong{font-weight:600;color:var(--ink)}
.g-ui{font-weight:600;color:var(--ink)}   /* 화면에 보이는 이름(버튼 · 단계 · 보기)은 꺾쇠 없이 굵게만(헬프센터 관례) */

/* 스테퍼 : 번호 원(28) + 원 사이를 잇는 세로 선 · 걸음 안의 글과 그림은 원 오른쪽으로 한 단 들여 놓는다 */
.g-steps{list-style:none;counter-reset:step;margin:24px 0 20px;padding:0}
.g-step{position:relative;padding:0 0 40px 48px;margin:0}
.g-step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--bg-white);font-size:13px;font-weight:600;line-height:28px;text-align:center}
.g-step::after{content:'';position:absolute;left:13.5px;top:36px;bottom:8px;width:1px;background:var(--line)}
.g-step:last-child{padding-bottom:8px}
.g-step:last-child::after{display:none}
.guide .g-step-title{font-size:17px;font-weight:600;line-height:28px;color:var(--ink);margin:0 0 8px}
.g-step p:last-child{margin-bottom:0}
/* 작은 스테퍼 : 모달 안 걸음처럼 글 한 줄짜리 */
.g-steps.sm .g-step{padding-bottom:16px;padding-left:40px}
.g-steps.sm .g-step::before{width:24px;height:24px;line-height:24px;font-size:12px;background:var(--bg-chip);color:var(--ink)}
.g-steps.sm .g-step::after{left:11.5px;top:30px;bottom:4px}
.g-steps.sm .g-step p{margin:0;line-height:24px}

/* 콜아웃 : 팁(옅은 파랑) · 메모(옅은 회색) */
.g-callout{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:14px 16px;border-radius:12px;border:1px solid var(--line-soft);background:color-mix(in srgb,var(--ink) 3%,var(--bg-white))}
.g-callout::before{content:'';flex:none;width:16px;height:16px;margin-top:4px;background:var(--ink-3);-webkit-mask:var(--g-ico) center/16px no-repeat;mask:var(--g-ico) center/16px no-repeat;--g-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}   /* 메모 = 동그라미 i */
.g-callout p{margin:0;font-size:15px;line-height:1.65}
.g-callout.tip{background:color-mix(in srgb,var(--accent) 6%,var(--bg-white));border-color:color-mix(in srgb,var(--accent) 22%,var(--bg-white))}
.g-callout.tip::before{background:var(--accent-ink);--g-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E")}   /* 팁 = 전구 */

/* 그림 틀 : 크기는 하나(16:10 회색 면)이고 화면 조각은 그 안 가운데에 띄운다 · 작은 조각은 늘리지 않는다 */
.g-frame{margin:20px 0 24px}   /* 틀 폭 = 그 자리 본문 폭(배너와 같다 : 밖 720 · 스테퍼 안 672) · 높이는 420 하나라 넓은 자리는 회색 바탕만 좌우로 늘어난다 */
.g-frame-box{height:420px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,var(--bg-white));display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.g-frame-box img{display:block;max-width:min(100%,var(--w));max-height:100%;width:auto;height:auto;border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.08)}

/* 표 : 항목 | 설명 꼴(헬프센터 관례) · 머리는 진한 14/600 + 아래 선 · 행은 가는 선 · 첫 칸은 이름이라 굵게 · 바깥 테두리와 면은 없다 */
.g-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:14px;line-height:20px}
.g-table th{text-align:left;font-weight:600;font-size:14px;color:var(--ink);padding:0 16px 8px 0;border-bottom:1px solid var(--line)}
.g-table td{padding:8px 16px 8px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.g-table td:first-child{font-weight:600;color:var(--ink);width:30%}

.guide .g-help{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:15px;color:var(--ink-3)}
.g-help a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 「이 페이지」 목차 : 본문을 따라 내려오고 지금 읽는 절을 진하게 */
.g-toc{position:sticky;top:112px;padding-top:8px}
.guide .g-toc-title{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.g-toc a{display:block;padding:6px 0 6px 12px;border-left:1px solid var(--line-soft);font-size:13px;line-height:1.45;color:var(--ink-3);text-decoration:none}
.g-toc a:hover{color:var(--ink)}
.g-toc a.on{color:var(--ink);border-left-color:var(--ink)}

@media (max-width:1100px){
  .guide{grid-template-columns:minmax(0,720px);column-gap:0}
  .g-toc{display:none}
}
@media (max-width:760px){
  .g-frame-box{height:auto;aspect-ratio:16/10}   /* 좁은 화면은 높이 고정 대신 비율 */
}
@media (max-width:640px){
  .guide{padding:64px var(--pad) 96px}
  .guide h1{font-size:32px}
  .g-frame-box{padding:16px}
  .g-step{padding-left:40px}
}