/* 단계별 그림 가이드(2026-09-27 SNS 연결 가이드) — 계정 화면 SNS 칸의 요약(.gq · .gs-quick)과
   채널 가이드 전체(.gs-full)가 함께 쓴다. 색은 site.css 의 이름(--gold 등) 그대로, 흰 바탕 유지
   (어두운 모드 없음 — 대표 결정 09-25). 휴대폰 먼저: 390 폭에서 가로로 넘치지 않게. */

/* ── 계정 화면: 채널 칸 안에서 접었다 펴는 가이드 ── */
.rowi>.gq{flex-basis:100%;min-width:0}
.gq{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.gq>summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:9px 12px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--gold-strong);-webkit-tap-highlight-color:transparent}
.gq>summary::-webkit-details-marker{display:none}
.gq>summary::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent currentColor;transition:transform .15s}
.gq[open]>summary::before{transform:rotate(90deg)}
.gq[open]>summary{border-bottom:1px solid var(--line-soft)}
.gq>summary:hover .gq-t{text-decoration:underline}
.gq-min{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-raised);border-radius:999px;padding:1px 8px}
.gq-in{padding:12px 12px 14px}
.gq b{font-size:inherit}
.gq-mt{margin:18px 0 6px;font-size:13.5px;font-weight:800;color:#85561a}
.gq-mistakes{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px;line-height:1.55;color:#3a3d37}
.gq-mistakes li::marker{color:#85561a}
.gq-mistakes .link{font-size:13px;white-space:nowrap}
.gq-foot{margin:14px 0 0}
.gs-date{margin:8px 0 0;font-size:12.5px;color:var(--faint)}

/* ── 단계 목록(요약·전체 공용) ── */
.gs-list{list-style:none;margin:0;padding:0;counter-reset:gsn;display:grid;gap:12px}
.guide ol.gs-list{padding:0;gap:0;margin:0 0 12px}
.gs-part{margin:8px 0 -2px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--gold-strong)}
.gs-part:first-child{margin-top:0}
.gs-step{counter-increment:gsn;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:start}
.gs-step::before{content:counter(gsn);grid-row:1 / span 2;width:26px;height:26px;border-radius:50%;background:var(--gold-strong);
  color:#fff;font-size:13px;font-weight:800;line-height:26px;text-align:center}
.gs-body{grid-column:2;min-width:0}
.gs-t{margin:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--text)}
.gs-when{display:inline-block;margin-left:4px;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:0 7px;white-space:nowrap;vertical-align:1px}
.gs-s{margin:3px 0 0;font-size:14px;line-height:1.6;color:#3a3d37}
.gs-body .link{overflow-wrap:anywhere}
.gs-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gs-step>.gs-shots{grid-column:2}
.gs-shot{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-raised);line-height:0;cursor:zoom-in}
.gs-shot:hover{border-color:var(--gold)}
.gs-shot img{display:block;width:100%;height:auto}
/* 요약(계정 화면): 작은 그림 — 누르면 크게. 가로로 긴 그림(동의 칸·연결됨 줄)은 글 폭만큼 */
.gs-quick .gs-shot{width:96px}
.gs-quick .gs-shot.gs-wide{width:min(100%,260px)}
/* 개발 PC 에서만 보이는 빈 그림 자리(운영에서는 그리지 않는다) */
.gs-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:150px;min-height:84px;padding:8px;
  border:1px dashed #c9a24a;background:#fffaf0;color:#7a5a12;font-size:11px;line-height:1.35;text-align:center;cursor:default;overflow-wrap:anywhere}

/* ── 채널 가이드 전체(/guide/<채널>) ── */
.gs-full .gs-part h3{margin:26px 0 2px;font-size:17px;color:var(--text)}
.gs-full .gs-part:first-child h3{margin-top:6px}
.gs-full .gs-part{margin:0}
.gs-full .gs-step{grid-template-columns:30px minmax(0,1fr);padding:16px 0 6px;border-top:1px solid var(--line-soft)}
.gs-full .gs-part+.gs-step{border-top:0}
.gs-full .gs-step::before{width:30px;height:30px;line-height:30px;font-size:14px}
.gs-full .gs-t{font-size:16.5px}
.guide .gs-full .gs-s{font-size:15.5px;margin-top:4px}
.guide .gs-body ul{margin:6px 0 0;padding-left:18px;gap:4px}
.guide .gs-body p,.guide .gs-body li{font-size:15px}
.guide .gs-body p{margin:6px 0 0}
.gs-full .gs-shots{gap:12px;margin-top:10px}
.gs-full .gs-shot,.g-faq .gs-shot{width:min(100%,var(--w,320px))}
.gs-full .gs-missing{width:min(100%,300px)}
.guide .gs-date{margin:-8px 0 16px}
.guide .gs-fix{font-weight:600;color:var(--text)}
/* 긴 주소(instagram.com/accounts/manage_access/ 등)가 휴대폰 폭을 밀어내지 않게 — 격자 칸은 글 길이만큼 넓어진다 */
.g-faq>details.gs-m,.gs-body,.gq-mistakes li{min-width:0;overflow-wrap:anywhere}
.g-faq .gs-shots{margin-top:8px}

/* ── 그림 크게 보기(guide-steps.js) ── */
.gzoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(20,22,19,.92);color:#fff}
.gzoom::backdrop{background:rgba(20,22,19,.92)}
.gzoom-in{box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 12px 20px;cursor:zoom-out}
.gzoom img{display:block;max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto;object-fit:contain;border-radius:6px;background:#fff}
.gzoom-cap{margin:12px 0 0;max-width:720px;font-size:14px;line-height:1.5;text-align:center;color:#f1f1ee}
.gzoom-x{position:fixed;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#262923;font-size:26px;line-height:44px;cursor:pointer}
@media (min-width:640px){.gs-quick .gs-shot{width:112px}.gs-quick .gs-shot.gs-wide{width:min(100%,300px)}}