/* ═══════════════════════════════════════════════════════════════════════════
   편집 페이지 이용 가이드 — 전체화면 겹침(새 창·링크 이동이 아니다).
   근거: 바탕화면 guide.zip / export.

   ⚠ 여기만 **편집기 토큰을 따르지 않는다.** 가이드는 편집 화면 위에 잠깐 펼쳐지는
     **다른 지면**이라 핸드오프가 준 종이 톤(오트밀 · 둥근 카드)을 그대로 쓴다.
     대신 값은 전부 `--gd-*` 로 가둬 두어 아래 편집 화면에 새지 않게 한다.
   ⚠ **장을 넘겨 읽는 책이다**(2026-09-29). 한 번에 한 장만 보이고 목차는 늘 곁에 있다.
     통짜 8000px(무엇부터 읽을지 모름)도, 아코디언(여닫는 일이 읽는 일을 가로막음)도 폐기다.
   ⚠ 활자는 핸드오프보다 한 단 작다(본문 15→14 · 넓은 화면 17→15).
   ⚠ 지면 두 벌을 따로 두지 않는다 — **같은 마크업 한 벌**을 560 · 1140px 에서 갈아 세운다.
     넓은 화면의 지시선(SVG)과 라벨 좌표는 핸드오프가 계산해 둔 값을 그대로 박았다
     (폰 300px · 판 700px 기준이라 **글 칸이 700px 보다 좁으면 안 된다** — 지면 폭이 거기서 나왔다).
   ═══════════════════════════════════════════════════════════════════════════ */

.gd{
  --gd-ink:#1e1c19;
  --gd-mid:#3a3632;
  --gd-soft:#5a544d;
  --gd-faint:#8a827a;
  --gd-paper:#fcfcfb;   /* 거의 흰 오프화이트 — 누런 기를 뺐다(#fbfaf7 → 노랑 거의 0) */
  --gd-tint:rgba(110,110,108,.06);   /* 머리 띠·단계 면 — 회색 쪽으로(누런 기 뺌) */
  --gd-line:rgba(30,28,25,.12);
  --gd-line-2:rgba(30,28,25,.1);
  --gd-line-3:rgba(30,28,25,.2);

  /* ── 색은 **잉크 한 색 + 칠하는 면 하나**다(핑크 폐기 · 버터 옐로우 폐기).
     편집 화면이 잉크 한 색인데 가이드만 분홍이면 다른 서비스처럼 보였다.
     ⚠ 그 면은 **글자색이 아니라 바탕색**이다 — 옅어서 글자로 쓰면 종이에 묻힌다.
       칠하는 자리는 **둘뿐**: TIP · 꼭 알아두세요. 늘리면 강조가 강조를 잡아먹는다.
       (머리 띠와 마지막 장 버튼에도 칠해 봤다가 둘 다 걷었다.) */
  /* 영문 제목 — **다크 차콜 한 색**이다(2026-09-29).
     ⚠ 노란 계열은 두 번 시도하고 두 번 걷었다, 되살리지 말 것:
       ① 머리 띠를 통째로 버터로 → 종이가 통째로 노래졌다
       ② 제목을 버터로 채우고 얇은 차콜 획을 둘러 → 그 느낌도 아니었다
     이 자리는 색이 아니라 **글자 모양**이 얼굴이다. 칠은 TIP·노티스 두 면에만 남긴다. */
  --gd-title:#2a2723;
  /* ⚠ 면은 **첫 화면 상품카드와 같은 웜그레이**다(2026-09-30). bridge.css 의 `--lc-card` 와
     같은 값이니 한쪽을 고치면 다른 쪽도 본다 — 두 화면에서 같은 종이로 읽혀야 한다.
     ⚠ 버터 옐로우(09-29)와 옅은 블루그레이(09-30)를 차례로 걷었다. 되살리지 말 것 —
       노랑은 혼자 따뜻해서, 파랑은 이 서비스에 없는 색이라서 겉돌았다. */
  --gd-note:#e9e7e2;                       /* 칠하는 면(TIP · 노티스) */
  /* ⚠ 테두리는 **무채색**이다. 면과 같은 색조로 선을 두르면 둘이 겹쳐
     덩어리가 부풀어 보인다 — 아주 옅은 그레이 한 줄이 면을 또렷하게 세운다. */
  --gd-note-line:rgba(30,28,25,.09);
  --gd-note-ink:#6e6a64;                   /* 그 면 위의 표식(✷ · TIP) — 상품카드의 --lc-muted */

  /* 좌우 여백 — 머리·본문·꼬리가 이 값 하나를 나눠 쓴다. 폭마다 아래에서 다시 준다. */
  --gd-pad:26px;

  position:fixed; inset:0; z-index:80;
  background:#b9b5ae;
}
/* ⚠ display 를 준 요소는 `hidden` 만으로 안 감춰진다(브라우저 기본 [hidden] 이 명시도에서 밀림). */
.gd[hidden]{ display:none; }
body.gd-open{ overflow:hidden; }

/* 스크롤은 겹침 안에서만 — 아래 편집 화면이 따라 움직이면 닫았을 때 자리를 잃는다. */
.gd__scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  /* ⚠ 여닫는 움직임의 원점 — **닫기 ✕ 의 한가운데**다(위 14+20 / 오른쪽 12+20).
     ✕ 의 자리·크기를 바꾸면 이 값도 같이 옮길 것. 넓은 화면 값은 아래 미디어쿼리에 있다. */
  transform-origin:calc(100% - 32px) calc(34px + env(safe-area-inset-top)); }

/* ══════════ 여닫는 움직임 ══════════ ✕ 자리에서 **뻗어 나오고, 다시 빨려 든다**.
   ⚠ 커지고 작아지는 것은 **지면(.gd__scroll)뿐**이다 — ✕ 는 그 밖에 있어야 같이 커지지 않는다.
   ⚠ 닫을 때 곧바로 `hidden` 을 주면 빨려드는 장면이 통째로 잘린다. JS 가 애니메이션이
     끝난 뒤(gdShrink 와 같은 300ms)에 감춘다 — 한쪽 시간을 고치면 다른 쪽도 같이 고칠 것. */
/* ⚠ 여는 연출은 fill-mode 를 `backwards` 로 둔다 — `both` 면 끝난 뒤에도 scale(1)·opacity 가 애니메이션 값으로 붙잡혀 있어,
   그 안의 sticky 목차(.gd-nav)가 실기기(iOS 사파리)에서 스크롤 중 비어 보인다. 끝나면 자연 상태(변형 없음)로 돌아가야 한다.
   닫는 연출(.is-out)은 마지막 모습(투명)을 붙잡아야 하므로 `both` 그대로다. */
.gd.is-in{ animation:gdFadeIn .22s ease backwards; }
.gd.is-in .gd__scroll{ animation:gdGrow .44s var(--e-sheet, cubic-bezier(.32,.72,0,1)) backwards; }
.gd.is-out{ animation:gdFadeOut .3s ease both; }
.gd.is-out .gd__scroll{ animation:gdShrink .3s cubic-bezier(.4,0,.9,.55) both; }
.gd.is-out .gd__x{ opacity:0; transition:opacity .14s; }
@keyframes gdFadeIn { from{ opacity:0 } to{ opacity:1 } }
@keyframes gdFadeOut{ from{ opacity:1 } to{ opacity:0 } }
@keyframes gdGrow{ from{ transform:scale(.05); opacity:0 } 45%{ opacity:1 } to{ transform:scale(1); opacity:1 } }
@keyframes gdShrink{ from{ transform:scale(1); opacity:1 } to{ transform:scale(.05); opacity:0 } }

/* 닫기 — 지면 위에 늘 떠 있는 반투명 유리 원. */
.gd__x{ position:fixed; z-index:4;
  top:calc(14px + env(safe-area-inset-top)); right:12px;
  width:40px; height:40px; display:grid; place-content:center;
  border:1px solid rgba(38,37,34,.10); border-radius:50%;
  background:rgba(251,250,247,.72); color:var(--gd-ink);
  font-size:14px; line-height:1; cursor:pointer; font-family:inherit;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.5); }
.gd__x:hover{ background:rgba(251,250,247,.92); }
.gd__x:active{ opacity:.6; }

/* 지면 — 종이 결은 폭에 맞춰 늘려 깐다(세로로만 반복). */
/* ⚠ 세로 flex 다 — 장이 짧을 때(예: 꼭 알아두세요) 꼬리가 지면 한가운데 떠 있지 않게
   본문(.gd-body)이 남는 높이를 먹고 꼬리를 바닥으로 민다. */
.gd__doc{
  display:flex; flex-direction:column;
  max-width:430px; margin:0 auto; min-height:100%;
  background:var(--gd-paper);   /* 종이 결 없이 깨끗한 오프화이트 */
  color:var(--gd-ink);
  /* ⚠ 두 이름을 다 부른다 — 편집 화면(dashboard.css)은 'Pretendard', 첫 화면(bridge.css)은
     'Pretendard Variable' 로 같은 파일을 등록한다. 하나만 두면 한쪽에서 시스템 글꼴로 빠진다. */
  font-family:'Pretendard','Pretendard Variable',-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-size:14px; line-height:1.6; word-break:keep-all;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35);
  -webkit-font-smoothing:antialiased;
}
.gd__doc img{ display:block; }

/* ── 머리 ── ⚠ 띠는 **회색 tint** 다. 색을 통째로 칠했다가 되돌렸다(2026-09-29) —
   넓은 면에 얹으니 종이가 그 색으로 물들어 보였다. 칠은 TIP·노티스 두 면에만 남긴다. */
.gd-head{ padding:20px var(--gd-pad) 24px; background:var(--gd-tint);
  display:flex; flex-direction:column; gap:14px; }
/* ⚠ 라벨은 로고 **옆**이다(오른쪽 끝이 아니다) — 오른쪽 위는 닫기 ✕ 의 자리라,
   거기 두면 글자가 버튼에 깔려 읽히지 않는다. 오른쪽은 비워 둘 것. */
.gd-head__top{ display:flex; align-items:center; gap:10px; }
.gd-head__logo{ width:34px; height:34px; }
.gd-head__label{ font-size:11.5px; color:var(--gd-faint); }
.gd-head__main{ display:flex; flex-direction:column; gap:10px; }
/* 제목 — 반짝이는 별 + 한글 제목 한 줄(guide.zip export-minimal). 손글씨 PNG(마스크)는 걷었다. */
.gd-head__tt{ display:flex; align-items:center; gap:10px; }
.gd-head__h{ margin:0; font-size:21px; font-weight:500; letter-spacing:-.02em; line-height:1.3; color:var(--gd-title); }
/* 반짝이는 별 — 장 머리 · 머리 제목 · TIP 이 같은 그림을 쓴다(guide/spark.png · 48px 을 줄여 쓴다). */
.gd-spark{ flex:none; display:inline-block; width:14px; height:14px;
  background:url(../guide/spark.png) center/contain no-repeat; }
.gd-head__tt .gd-spark{ width:16px; height:16px; }
.gd-head__lead{ margin: 15px 0 0 0; font-size:13px; line-height:1.3; color:var(--gd-soft); }

/* ══════════ 목차 ══════════ 좁은 화면은 위에 붙는 **밑줄 탭 줄**이다(가로로 민다).
   ⚠ 잉크로 채운 알약은 걷었다(2026-09-29) — 종이 지면 위에서 검은 알약이 혼자 튀어
     "버튼 덩어리"로 읽혔다. 글자와 1px 선만 남긴다. 되살리지 말 것.
   ⚠ 스크롤 막대는 감춘다 — 더 있다는 신호는 잘린 다음 탭이 맡는다. */
.gd-nav{ position:sticky; top:0; z-index:3;
  display:flex; gap:22px; padding:0 var(--gd-pad);
  overflow-x:auto; scrollbar-width:none;
  background:rgba(251,250,247,.94); border-bottom:1px solid var(--gd-line-2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.gd-nav::-webkit-scrollbar{ display:none; }
.gd-nav__b{ flex:none; position:relative; display:inline-flex; align-items:center;
  height:46px; padding:0; margin:0;
  border:0; border-radius:0; background:none;
  font-family:inherit; font-size:13.5px; font-weight:400; letter-spacing:-.012em;
  color:var(--gd-faint); white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:color .18s; }
.gd-nav__b:hover{ color:var(--gd-soft); }
.gd-nav__b.is-on{ color:var(--gd-ink); font-weight:500; }
/* 현재 장 표시 — 띠 아래가 아니라 **글자 바로 밑**에 붙는 1px 선. */
.gd-nav__b.is-on::after{ content:''; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--gd-ink); }
.gd-nav__b:focus{ outline:none; }
.gd-nav__b:focus-visible{ outline:1px solid rgba(30,28,25,.35); outline-offset:-4px; }
/* 번호는 좁은 화면에서 접는다 — 탭이 길어지면 한 줄에 두 개도 안 보인다. */
.gd-nav__n{ display:none; }

/* ══════════ 장(章) ══════════ 한 번에 하나만 보인다.
   ⚠ `display` 로 갈아 끼운다 — `hidden` 속성은 [hidden] 기본 규칙이 명시도에서 밀려 안 듣는다. */
.gd-body{ flex:1 1 auto; }
.gd-pages{ padding:0 var(--gd-pad); }
.gd-pg{ display:none; }
.gd-pg.is-on{ display:block; animation:gdPage .28s var(--e-in, cubic-bezier(.22,.61,.36,1)) both; }
.gd-pg:focus{ outline:none; }
@keyframes gdPage{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.gd-pg__hd{ padding:26px 0 20px; }
/* 장 머리 — 반짝이는 별 + 가로로 눌린 영문 라벨(Before Starting · Screen …), 그 아래 한글 제목.
   영문은 Archive Garamond Pro 를 10 번 템플릿 오프닝처럼 가로 72% 로 누른다(같은 파일 · 저장소 fonts/).
   ⚠ scaleX 는 자리 폭을 줄이지 않는다 — 왼쪽을 축으로 눌러 오른쪽에 빈 자리만 남긴다(줄 끝이라 보이지 않는다). */
@font-face{ font-family:'Archive Garamond Pro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ArchiveGaramondPro.ttf') format('truetype'); }
.gd-pg__mk{ display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-family:'Archive Garamond Pro',serif; font-style:normal; font-size:20px; line-height:1; letter-spacing:-.01em; color:var(--gd-title); }
.gd-pg__mk em{ display:inline-block; font-style:normal; white-space:nowrap; transform:scaleX(.72); transform-origin:0 50%; }
.gd-pg__t{ margin:0; font-size:17px; font-weight:500; line-height:1.45; letter-spacing:-.015em; }
.gd-pg__lead{ margin:8px 0 0; font-size:13.5px; line-height:1.65; color:var(--gd-soft); }

/* 장 끝의 다음 장 — **차례로 읽는 사람의 길**이다. 목차를 못 찾아도 끝까지 읽힌다. */
.gd-next{ display:flex; align-items:center; gap:10px; width:100%;
  margin:28px 0 34px; padding:15px 18px;
  border:1px solid var(--gd-line); border-radius:12px; background:none;
  font-family:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s, background-color .18s; }
.gd-next:hover{ border-color:var(--gd-line-3); background:rgba(255,255,255,.4); }
.gd-next:active{ opacity:.7; }
.gd-next:focus{ outline:none; }
.gd-next:focus-visible{ outline:1px solid rgba(30,28,25,.35); outline-offset:2px; }
.gd-next__l{ flex:none; font-size:10.5px; letter-spacing:.2em; color:var(--gd-faint); }
.gd-next__t{ flex:1 1 auto; font-size:14px; font-weight:500; color:var(--gd-ink); }
/* 화살표는 자산을 늘리지 않으려고 테두리 두 줄을 기울여 그린다. */
.gd-next::after{ content:''; flex:none; width:7px; height:7px; margin-right:2px;
  border-top:1.2px solid var(--gd-faint); border-right:1.2px solid var(--gd-faint);
  transform:rotate(45deg); }
/* ⚠ 마지막 장의 [편집 화면으로 돌아가기]는 **다른 [다음]과 같은 얼굴**이다.
   그 면 색으로 칠해 봤다가 걷었다 — 끝에서 색이 하나 더 나오면 그게 경고처럼 읽힌다. */

/* ── 제작 방법 ── 결제까지 가는 네 걸음(2026-10-13 · 상세페이지 PROCESS 와 같은 얼굴).
   ⚠ 걸음을 **카드로 감싸지 않는다** — 다른 장들이 선으로 끊는 지면이라 여기만 네모가 네 개면
     이 장만 다른 서비스처럼 읽힌다. 나누는 것은 아래 헤어라인 한 줄이다.
   ⚠ 지난 「시작 전 세 가지」(.gd-rule*)는 걷었다 — 되살리지 말 것. */
.gd-proc{ margin:0; padding:0; list-style:none; border-top:1px solid var(--gd-line-3); }
.gd-proc__it{ display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:14px;
  align-items:start; padding:20px 0 24px; border-bottom:1px solid var(--gd-line-2); }
.gd-proc__step{ grid-column:1; grid-row:1; font-size:9.5px; letter-spacing:.2em; color:var(--gd-faint); }
/* 큰 숫자는 이 장의 유일한 큰 활자다 — 제목보다 커도 되는 자리(차례를 읽는 눈금). */
.gd-proc__n{ grid-column:1; grid-row:2; margin-top:22px;
  font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--gd-ink); }
.gd-proc__b{ grid-column:2; grid-row:1 / span 2; min-width:0; }
.gd-proc__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gd-proc__en{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gd-soft); }
.gd-proc__of{ font-size:9.5px; letter-spacing:.2em; color:var(--gd-faint); }
/* 진행선 — 걸음마다 점이 한 칸씩 오른쪽으로 간다(네 걸음이라 1/3 씩). */
.gd-proc__bar{ display:block; position:relative; height:1px; margin:9px 0 13px;
  background:var(--gd-line-3); }
.gd-proc__bar::after{ content:''; position:absolute; top:50%; left:var(--gd-at,0);
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--gd-ink); }
.gd-proc__it:nth-child(1) .gd-proc__bar{ --gd-at:3.5px; }
.gd-proc__it:nth-child(2) .gd-proc__bar{ --gd-at:33.33%; }
.gd-proc__it:nth-child(3) .gd-proc__bar{ --gd-at:66.66%; }
.gd-proc__it:nth-child(4) .gd-proc__bar{ --gd-at:calc(100% - 3.5px); }
.gd-proc__t{ margin:0; font-size:15px; font-weight:500; line-height:1.5; }
.gd-proc__d{ margin:7px 0 0; font-size:13.5px; line-height:1.65; color:var(--gd-soft); }
.gd-proc__note{ margin:11px 0 0; font-size:12.5px; line-height:1.6; color:var(--gd-faint); }
.gd-proc__note::before{ content:'* '; }
/* 한 단계에 안내가 둘이면 둘째는 첫째 바로 아래에 붙는다 */
.gd-proc__note--next{ margin-top:2px; }
/* ── 휴대폰 목업 ── 화면 구멍 좌표는 iphone-15-pro 프레임(1419×2796)에서 잰 값이다.
   ⚠ 캡처(1179×2556)가 그 구멍에 딱 맞으니 비율을 건드리지 말 것. */
.gd-phone{ position:relative; width:210px; margin:0 auto;
  aspect-ratio:1419/2796; filter:drop-shadow(0 18px 24px rgba(30,28,25,.2)); }
.gd-phone__sc{ position:absolute; left:8.457%; top:4.292%; width:83.087%; height:91.416%;
  border-radius:15.3%/7.04%; overflow:hidden; }
.gd-phone__sc img{ width:100%; height:100%; }
.gd-phone__fr{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ── 헤어라인 목록 ── 화면 구성 · 추가 설정 · 입력 항목이 같은 어휘를 쓴다 ── */
.gd-list{ margin-top:24px; display:flex; flex-direction:column;
  border-top:1px solid var(--gd-line-3); }
.gd-list__it{ padding:12px 0; border-bottom:1px solid var(--gd-line-2);
  display:flex; flex-direction:column; gap:3px; }
.gd-list__t{ font-size:14.5px; font-weight:500; }
.gd-list__d{ font-size:13.5px; line-height:1.6; color:var(--gd-soft); }
/* 스탠다드 요금제에서만 쓰는 항목 — 항목명 옆 뱃지(편집 화면 .plan-lock 과 같은 꼴) */
.gd-std{ display:inline-block; margin-left:7px; padding:2px 7px; border-radius:999px; vertical-align:1px;
  font-size:10.5px; font-weight:500; line-height:1.4; letter-spacing:0; color:var(--gd-note-ink); background:var(--gd-note); }

/* 번호가 붙는 목록(입력 항목 01–14) */
.gd-list--num .gd-list__it{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 8px; padding:11px 0; }
.gd-list--num .gd-list__n{ grid-row:1 / span 2; font-size:13px; color:var(--gd-faint); padding-top:2px; }
.gd-list--num .gd-list__t{ font-size:14px; }
.gd-list--num .gd-list__d{ font-size:13px; }

/* 지시선 — 좁은 화면에서는 그리지 않는다(폰 옆에 라벨을 둘 자리가 없다). */
.gd-call__svg{ display:none; }

/* ── 만드는 순서 ── */
.gd-steps{ margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px; }
.gd-step{ padding:15px 16px; background:var(--gd-tint); border-radius:12px;
  display:flex; flex-direction:column; gap:5px; }
.gd-step__n{ font-size:10.5px; letter-spacing:.2em; color:var(--gd-faint); }
.gd-step__t{ font-size:14.5px; font-weight:500; line-height:1.5; }
.gd-step__d{ font-size:13.5px; line-height:1.6; color:var(--gd-soft); }

/* ── 기능별 사용법 ── 한 장 안의 카드 일곱. 여닫지 않는다(한 장이 이미 짧다). */
.gd-tasks{ display:flex; flex-direction:column; gap:8px; }
.gd-task{ border:1px solid var(--gd-line); border-radius:12px; overflow:hidden; }
/* 좁은 화면: [번호 … 자리] 한 줄, 제목은 아래 줄 전체. 넓은 화면에서 order 만 갈아 한 줄로 세운다. */
.gd-task__hd{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:13px 15px; border-bottom:1px solid var(--gd-line-2); }
.gd-task__no{ order:1; font-size:10.5px; letter-spacing:.14em; color:var(--gd-faint); }
.gd-task__w{ order:2; margin-left:auto; flex:none;
  font-size:11px; padding:3px 9px; border-radius:99px;
  background:var(--gd-tint); color:var(--gd-soft); }
.gd-task__t{ order:3; flex:1 0 100%; font-size:14.5px; font-weight:500; line-height:1.45; }
.gd-task__steps{ margin:0; padding:14px 15px; list-style:none;
  display:flex; flex-direction:column; gap:0; }
/* 단계 사이 구분선 — 한 줄씩 또렷이 나뉘게(맨 위 줄은 머리 밑줄이 이미 나눈다). */
.gd-task__steps li{ display:flex; gap:10px; align-items:flex-start; padding:10px 0;
  font-size:13.5px; line-height:1.6; }
.gd-task__steps li b{ flex:none; width:21px; height:21px; border-radius:50%;
  border:1px solid rgba(30,28,25,.3); font-size:11px; font-weight:400;
  display:flex; align-items:center; justify-content:center; }
.gd-task__steps li:first-child{ padding-top:0; }
.gd-task__steps li:last-child{ padding-bottom:0; }
.gd-task__steps li + li{ border-top:1px solid var(--gd-line-2); }
/* TIP — 칠한 면 + 반짝이는 별(글자 딱지 "TIP" 대신). */
.gd-tip{ margin:0 15px 14px; padding:10px 12px; background:var(--gd-note);
  border:1px solid var(--gd-note-line); border-radius:8px;
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.6; color:var(--gd-mid); }
.gd-tip .gd-spark{ width:12px; height:12px; margin-top:4px; }

/* ── 입력 항목 ── */
.gd-items{ display:block; }

/* ── 꼭 알아두세요 ── 면을 칠하는 마지막 자리. */
.gd-notes{ margin:0; padding:16px 18px; list-style:none;
  border:1px solid var(--gd-note-line); border-radius:12px;
  background:var(--gd-note);
  display:flex; flex-direction:column; gap:10px; }
.gd-notes li{ display:flex; gap:9px; align-items:flex-start;
  font-size:13.5px; line-height:1.65; color:var(--gd-mid); }
.gd-notes li::before{ content:'\2737'; flex:none; color:var(--gd-note-ink);
  font-size:12px; line-height:22px; }

/* ── 꼬리 ── */
.gd-foot{ padding:18px var(--gd-pad); background:var(--gd-tint);
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
.gd-foot__logo{ width:28px; height:28px; opacity:.7; flex:none; }
.gd-foot__c{ margin:0; font-size:11px; letter-spacing:.02em; color:var(--gd-faint); text-align:right; }

/* ═══════════ 태블릿(560–1139px) ═══════════ 짜임은 좁은 화면 그대로, 지면만 넓힌다.
   ⚠ 지시선 판(700px)을 세우려면 글 칸이 700 이상이어야 하는데 여기서는 아직 모자란다. */
@media (min-width:560px) and (max-width:1139.98px){
  .gd__doc{ max-width:680px; }
  .gd{ --gd-pad:52px; }
  .gd-pg__hd{ padding:34px 0 24px; }
  .gd-pg__t{ font-size:19px; }
  /* 제작 방법 — STEP 칸이 한 단 넓어진다. */
  .gd-proc__it{ grid-template-columns:80px minmax(0,1fr); column-gap:20px; padding:26px 0 30px; }
  .gd-proc__n{ font-size:36px; }
}

/* ═══════════════ 넓은 화면(1140px↑) ═══════════════ 왼쪽 목차 + 오른쪽 장.
   ⚠ 폭이 이렇게 정해져 있다: 지면 1060 − 좌우 48 − 목차 208 − 사이 52 = **글 칸 704px**.
     지시선 판이 700px 이라 이보다 좁히면 판이 삐져나온다. 숫자를 하나라도 바꾸면 다시 셀 것.
   ⚠ 1140px 이 바닥이다 — 지면 1060 이 창에 닿으면 좌우 배경이 사라져 "꽉 찬" 화면이 된다. */
@media (min-width:1140px){
  .gd__doc{ max-width:1060px; font-size:15px; }
  .gd{ --gd-pad:48px; }

  /* 머리 띠는 본문보다 덜 들인다 — 로고가 글줄에 맞춰 들어오면 띠가 띠로 안 읽힌다. */
  .gd-head{ padding:30px 56px 34px; gap:28px; }
  .gd-head__logo{ width:44px; height:44px; }
  .gd-head__label{ font-size:12px; }
  .gd-head__main{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:32px; }
  .gd-head__h{ font-size:26px; }
  .gd-head__tt .gd-spark{ width:18px; height:18px; }
  .gd-head__lead{ font-size:14px; text-align:right; }

  /* 두 칸 — 목차는 붙박이(sticky)라 어느 장에 있든 전체가 보인다. */
  .gd-body{ display:grid; grid-template-columns:208px minmax(0,1fr); gap:52px;
    padding:0 var(--gd-pad); align-items:start; }

  /* 목차 — 알약을 걷고 **가는 세로줄**로 바꾼다. 현재 장만 잉크로 선다. */
  .gd-nav{ position:sticky; top:28px; z-index:1;
    display:flex; flex-direction:column; gap:0; padding:0; overflow:visible;
    background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .gd-nav__b{ display:grid; grid-template-columns:30px minmax(0,1fr); align-items:baseline;
    width:100%; height:auto; padding:11px 0 11px 15px;
    border:0; border-left:1px solid var(--gd-line-2); border-radius:0;
    background:none; color:var(--gd-soft); font-size:14px; white-space:normal;
    text-align:left;   /* ⚠ button 기본값이 center 라 빼면 목차가 오른쪽에 붙는다 */
    transition:color .18s, border-color .18s; }
  .gd-nav__b:hover{ background:none; color:var(--gd-ink); }
  .gd-nav__b.is-on{ background:none; color:var(--gd-ink); font-weight:500;
    border-left-color:var(--gd-ink); }
  /* ⚠ 여기서는 현재 장을 **왼쪽 선**이 가리킨다 — 좁은 화면의 밑줄은 걷어야
     가로줄이 세로 목록 한가운데 그어진다. */
  .gd-nav__b.is-on::after{ display:none; }
  .gd-nav__n{ display:block; font-size:10.5px; letter-spacing:.14em; color:var(--gd-faint); }
  .gd-nav__b.is-on .gd-nav__n{ color:var(--gd-ink); }

  .gd-pages{ padding:0; min-width:0; }
  .gd-pg__hd{ padding:20px 0 28px; }
  .gd-pg__mk{ font-size:22px; margin-bottom:12px; }
  .gd-pg__t{ font-size:21px; }
  .gd-pg__lead{ margin-top:10px; font-size:14px; line-height:1.7; }

  .gd-next{ margin:36px 0 44px; padding:18px 22px; border-radius:14px; gap:14px; }
  /* [다음]·[돌아가기]는 감춘다 — 붙박이 목차와 ✕ 가 같은 일을 한다.
     버튼이 맡던 아래 여백은 장이 대신 진다. */
  .gd-next{ display:none; }
  .gd-pages{ padding-bottom:64px; }
  .gd-next__l{ font-size:11px; }
  .gd-next__t{ font-size:15px; }

  /* 제작 방법 — STEP 칸이 넓어지고 큰 숫자가 한 단 더 커진다. */
  .gd-proc__it{ grid-template-columns:120px minmax(0,1fr); column-gap:24px; padding:30px 0 34px; }
  .gd-proc__n{ margin-top:25px; font-size:44px; }
  .gd-proc__en{ font-size:11px; }
  .gd-proc__of{ font-size:10.5px; }
  .gd-proc__t{ font-size:17px; }
  .gd-proc__d{ margin-top:9px; font-size:14px; line-height:1.7; }
  .gd-proc__note{ font-size:13px; }

  /* ── 지시선 판 ── 폰은 왼쪽 위 고정, 라벨은 오른쪽에 절대 배치.
     ⚠ 좌표(아래 nth-child)는 핸드오프가 계산한 값 그대로다 — 폭·폰 크기를 바꾸면 전부 다시 잰다. */
  .gd-call{ position:relative; width:700px; margin:0; }
  .gd-call .gd-phone{ position:absolute; left:0; top:0; margin:0;
    filter:drop-shadow(0 24px 30px rgba(30,28,25,.2)); }
  .gd-call__svg{ display:block; position:absolute; left:0; top:0; overflow:visible;
    pointer-events:none; }
  .gd-call__list{ position:relative; margin:0; border:0; }
  .gd-call .gd-list__it{ position:absolute; padding:0; border:0; gap:4px; }
  .gd-call .gd-list__t{ font-size:15px; line-height:22px; }
  .gd-call .gd-list__d{ font-size:14px; }

  /* 화면 구성 — 판 700×600 · 폰 300 */
  .gd-call--screen{ height:600px; }
  .gd-call--screen .gd-phone{ width:300px; }
  .gd-call--screen .gd-list__it{ left:390px; width:310px; }
  .gd-call--screen .gd-list__it:nth-child(1){ top:49px; }
  .gd-call--screen .gd-list__it:nth-child(2){ top:149px; }
  .gd-call--screen .gd-list__it:nth-child(3){ top:229px; }
  .gd-call--screen .gd-list__it:nth-child(4){ top:309px; }
  .gd-call--screen .gd-list__it:nth-child(5){ top:453px; }
  .gd-call--screen .gd-list__it:nth-child(6){ top:533px; }

  /* 추가 설정 — 판 700×520 · 폰 264 */
  .gd-call--more{ height:520px; }
  .gd-call--more .gd-phone{ width:264px; }
  .gd-call--more .gd-list__it{ left:350px; width:350px; }
  .gd-call--more .gd-list__it:nth-child(1){ top:185px; }
  .gd-call--more .gd-list__it:nth-child(2){ top:277px; }
  .gd-call--more .gd-list__it:nth-child(3){ top:369px; }

  /* 만드는 순서 — STEP 라벨이 왼쪽 칸으로 빠진다.
     ⚠ 행 간격(5px)과 열 간격(20px)을 따로 준다 — 한 값으로 묶으면 제목과 설명 사이가
       STEP 라벨 폭만큼 벌어져 두 줄이 남남처럼 보인다. */
  .gd-steps{ gap:10px; }
  .gd-step{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:5px 20px;
    align-items:center; padding:20px 24px; border-radius:14px; }
  .gd-step__n{ grid-row:1 / span 2; align-self:center; font-size:11px; }
  .gd-step__t{ grid-column:2; font-size:15px; }
  .gd-step__d{ grid-column:2; font-size:14px; line-height:1.65; }

  /* 기능별 사용법 — 머리글 한 줄 */
  .gd-tasks{ gap:10px; }
  .gd-task{ border-radius:14px; }
  .gd-task__hd{ flex-wrap:nowrap; gap:14px; padding:16px 22px; }
  .gd-task__no{ font-size:11px; }
  .gd-task__t{ order:2; flex:1 1 auto; font-size:15.5px; }
  .gd-task__w{ order:3; margin-left:0; font-size:12px; padding:4px 11px; }
  .gd-task__steps{ padding:18px 22px; gap:0; }
  .gd-task__steps li{ gap:12px; padding:12px 0; font-size:14.5px; }
  .gd-task__steps li b{ width:22px; height:22px; font-size:11.5px; }
  .gd-tip{ margin:0 22px 18px; padding:12px 15px; font-size:13.5px; }
  .gd-tip b{ font-size:11px; margin-right:8px; }

  /* 입력 항목 — 왼쪽 폰 · 오른쪽 목록 */
  .gd-items{ display:grid; grid-template-columns:240px minmax(0,1fr);
    gap:48px; align-items:start; }
  .gd-items .gd-phone{ width:240px; margin:0;
    filter:drop-shadow(0 24px 30px rgba(30,28,25,.2)); }
  .gd-items .gd-list{ margin-top:0; }
  .gd-list--num .gd-list__it{ grid-template-columns:34px minmax(0,1fr); gap:3px 10px; padding:12px 0; }
  .gd-list--num .gd-list__n{ font-size:14px; }
  .gd-list--num .gd-list__t{ font-size:15px; }
  .gd-list--num .gd-list__d{ font-size:14px; }

  /* 꼭 알아두세요 */
  .gd-notes{ padding:24px 28px; border-radius:14px; gap:14px; }
  .gd-notes li{ gap:12px; font-size:14.5px; line-height:1.7; }
  .gd-notes li::before{ font-size:13px; line-height:25px; }

  /* 꼬리 — 좁은 화면과 같은 한 줄(좌 로고 · 우 저작권). 지면이 넓어진 만큼 안쪽 여백만 키운다. */
  .gd-foot{ padding:18px 56px; }
  .gd-foot__c{ font-size:12.5px; }

  .gd__x{ top:20px; right:20px; width:44px; height:44px; }
  /* ✕ 가 옮겨 갔으니 여닫는 원점도 따라간다(위 20+22 / 오른쪽 20+22). */
  .gd__scroll{ transform-origin:calc(100% - 42px) 42px; }
}

@media (prefers-reduced-motion:reduce){
  .gd.is-in, .gd.is-out,
  .gd.is-in .gd__scroll, .gd.is-out .gd__scroll{ animation:none; }
  .gd-pg.is-on{ animation:none; }
}