/* ===== 고객 센터 > 이용 가이드 (/Support/Guide) =====
 * site.css 토큰·패턴을 그대로 따른다.
 *   사이드바 = .vendor-sidebar / .vendor-item (왼쪽 3px 강조선)
 *   표       = .data-table (+ .g-table 로 문서용 왼쪽 정렬·촘촘한 행)
 *   카드     = .profile-card 색 (bg-card · 12px 라운드)
 *   배지     = .status-badge / .badge-*,  확대 보기 = .screenshot-overlay
 * Bootstrap 클래스(.card .badge .lead 등)와 부딪히지 않게 전부 g- 접두사.
 * 상단 .top-nav 가 56px sticky 이므로 sticky 요소는 top 72px(56 + 여백 16). */

/* ── 제목줄 ── */
.g-title { color: var(--text-primary); font-weight: 700; margin: 0; }
.g-title-desc { color: var(--text-muted); font-size: 0.78rem; margin-top: 3px; }
.g-side-toggle { display: none; margin-left: auto; cursor: pointer; }

/* ── 3단 배치: 카테고리 | 본문 | 이 페이지 목차 ── */
.g-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 210px;
    gap: 16px;
    align-items: start;
}

/* ── 좌측 카테고리 (vendor-sidebar 모양) ── */
.g-side {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.g-side-head { padding: 12px; border-bottom: 1px solid var(--border-color); }
.g-side-head .search-input { width: 100%; }
.g-side-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 10px; }

.g-side-home,
.g-cat-head,
.g-page-link { border-left: 3px solid transparent; transition: background 0.12s, border-color 0.12s, color 0.12s; }

.g-side-home {
    display: block;
    padding: 9px 14px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
}
.g-side-home:hover { background: var(--bg-hover); color: var(--text-primary); }
.g-side-home.active { background: var(--bg-hover); border-left-color: var(--accent-blue); color: var(--accent-blue); }

.g-cat-head { display: flex; align-items: center; }
.g-cat-head:hover { background: var(--bg-hover); }
.g-cat-head.active { background: var(--bg-hover); border-left-color: var(--accent-blue); }
.g-cat-head a {
    flex: 1;
    min-width: 0;
    padding: 9px 4px 9px 14px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
}
.g-cat-head.active a { color: var(--accent-blue); }
.g-cat-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.g-cat-toggle::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
.g-cat.open .g-cat-toggle::before { transform: rotate(45deg); }
.g-cat-toggle:hover { color: var(--text-primary); }
.g-cat-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }

.g-cat-pages { display: none; list-style: none; margin: 0 0 6px; padding: 0; }
.g-cat.open .g-cat-pages { display: block; }
.g-page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 24px;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.45;
}
.g-page-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.g-page-link.active { background: var(--bg-hover); border-left-color: var(--accent-blue); color: var(--accent-blue); font-weight: 600; }
.g-page-num { flex: none; min-width: 2.3em; opacity: 0.8; font-variant-numeric: tabular-nums; }
.g-page-text { min-width: 0; }
.g-video-mark { margin-left: auto; flex: none; font-size: 0.72rem; opacity: 0.8; }
/* 본문 작성 여부 점 — 초록 = 본문 있음, 회색 = 작성 중 */
.g-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--border-color); }
.g-dot.is-done { background: var(--accent-green); }
.g-side-empty { margin: 0; padding: 16px 14px; color: var(--text-muted); font-size: 0.82rem; }

/* ── 본문 영역 ── */
.g-main { min-width: 0; }

.g-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 0.78rem; }
.g-crumbs a,
.g-crumbs .is-current {
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
}
.g-crumbs a:hover { color: var(--text-primary); border-color: var(--text-muted); }
.g-crumbs .is-current { background: rgba(74, 144, 217, 0.15); border-color: rgba(74, 144, 217, 0.35); color: var(--accent-blue); }
.g-crumb-sep { color: var(--text-muted); }

.g-doc {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 28px 32px 32px;
}
.g-doc h1 { margin: 0 0 8px; color: var(--text-primary); font-size: 1.6rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.g-doc h2 {
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 700;
    scroll-margin-top: 80px;
}
.g-doc h3 { margin: 22px 0 8px; color: var(--text-primary); font-size: 0.98rem; font-weight: 700; scroll-margin-top: 80px; }
.g-doc p,
.g-doc li { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.8; }
.g-doc p { margin: 0 0 10px; }
.g-doc ul,
.g-doc ol { margin: 4px 0 12px; padding-left: 20px; }
.g-doc li + li { margin-top: 2px; }
.g-doc strong { color: var(--text-primary); font-weight: 600; }
.g-doc a { color: var(--accent-blue); }
.g-doc a:hover { text-decoration: underline; }
.g-doc .g-lead { margin: 0 0 20px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; }
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; }

/* 화면 속 버튼·메뉴 이름 */
.g-ui {
    display: inline-block;
    margin: 0 1px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.65;
    white-space: nowrap;
}

/* ── 단계 블록 ── */
.g-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 18px 0; }
.g-step + .g-step { border-top: 1px dashed var(--border-color); }
.g-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.2);
    color: var(--accent-blue);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.g-step-title { align-self: center; color: var(--text-primary); font-size: 0.98rem; font-weight: 700; }
.g-step-body { grid-column: 2; margin-top: 8px; }
.g-step-body > :last-child { margin-bottom: 0; }

/* ── 스크린샷 ── */
.g-shot { margin: 10px 0 6px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--bg-tertiary); }
.g-shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.g-shot figcaption { padding: 8px 12px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.78rem; }
.g-shot.is-tall { max-width: 280px; }
/* 부분 확대 캡처: 원래 크기 이하로만(늘려서 흐려지지 않게) */
.g-shot.is-fit { width: fit-content; max-width: 100%; }
.g-shot.is-fit img { width: auto; max-width: 100%; }
/* 휴대폰 화면 캡처(2배 해상도) */
.g-shot.is-phone { max-width: 320px; }
.g-shot.is-placeholder { border-style: dashed; }
.g-shot-ph {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    text-align: center;
    background: repeating-linear-gradient(135deg, var(--bg-tertiary) 0 14px, var(--bg-secondary) 14px 28px);
}
.g-shot.is-tall .g-shot-ph { aspect-ratio: 9 / 16; }
.g-shot.is-wide .g-shot-ph { aspect-ratio: 21 / 9; }
.g-ph-id { color: var(--accent-blue); font-size: 0.72rem; font-weight: 700; }
.g-ph-what { color: var(--text-primary); font-size: 0.86rem; font-weight: 600; }
.g-ph-how { color: var(--text-muted); font-size: 0.76rem; }
.g-shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin: 10px 0 6px; }
.g-shot-grid .g-shot { margin: 0; }
.g-shot-grid .g-shot-ph { aspect-ratio: 4 / 3; }
.g-shot-grid .g-shot.is-tall .g-shot-ph { aspect-ratio: 9 / 16; }
.g-shot-label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; }
.g-doc .g-shot-cap { margin: 6px 0 10px; color: var(--text-muted); font-size: 0.8rem; }

/* ── 동영상 ── */
.g-video { margin: 0 0 22px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: #07080b; }
.g-video video { display: block; width: 100%; }
.g-video.is-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.84rem;
    text-align: center;
}
.g-video-play { width: 52px; height: 52px; border: 2px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.g-video-play::before { content: ''; margin-left: 4px; border-left: 14px solid var(--border-color); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }

/* ── 참고 · 팁 · 주의 ── */
.g-callout {
    margin: 14px 0;
    padding: 12px 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.87rem;
    line-height: 1.75;
}
.g-callout-title { display: block; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; }
.g-note { background: rgba(74, 144, 217, 0.08); border-color: rgba(74, 144, 217, 0.3); border-left-color: var(--accent-blue); }
.g-note .g-callout-title { color: var(--accent-blue); }
.g-tip { background: rgba(92, 184, 92, 0.08); border-color: rgba(92, 184, 92, 0.3); border-left-color: var(--accent-green); }
.g-tip .g-callout-title { color: var(--accent-green); }
.g-warn { background: rgba(232, 150, 75, 0.08); border-color: rgba(232, 150, 75, 0.3); border-left-color: var(--accent-orange); }
.g-warn .g-callout-title { color: var(--accent-orange); }

/* ── 표 (data-table 위에 문서용 보정) ── */
.g-table-wrap { margin: 10px 0 16px; }
.g-table thead th { text-align: left; text-transform: none; letter-spacing: 0; padding: 11px 14px; }
.g-table tbody td { text-align: left; vertical-align: top; padding: 11px 14px; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.65; }
.g-table tbody td:first-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }

/* ── 홈 · 카테고리 카드 ── */
.g-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.g-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.15s, background 0.15s;
}
.g-doc a.g-card:hover { background: var(--bg-hover); border-color: var(--accent-blue); text-decoration: none; }
.g-card-title { display: flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; }
.g-card:hover .g-card-title { color: var(--accent-blue); }
.g-card-desc { color: var(--text-muted); font-size: 0.8rem; line-height: 1.55; }
.g-card-meta { margin-top: auto; padding-top: 6px; color: var(--accent-blue); font-size: 0.74rem; font-weight: 600; }

.g-start { margin: 4px 0 8px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; }
.g-doc .g-start h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 0.98rem; }
.g-start-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.g-doc .g-start-flow a {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
}
.g-doc .g-start-flow a:hover { border-color: var(--accent-blue); color: var(--accent-blue); text-decoration: none; }
.g-start-arrow { color: var(--text-muted); }

/* ── 이전 / 다음 · 도움말 ── */
.g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.g-pager a { display: block; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; transition: border-color 0.15s; }
.g-pager a:hover { border-color: var(--accent-blue); }
.g-pager small { display: block; color: var(--text-muted); font-size: 0.74rem; }
.g-pager strong { color: var(--accent-blue); font-size: 0.9rem; font-weight: 600; }
.g-pager .is-next { grid-column: 2; text-align: right; }
.g-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.g-help-links { display: flex; flex-wrap: wrap; gap: 16px; }
.g-help-links a { color: var(--accent-blue); font-weight: 600; }
.g-help-links a:hover { text-decoration: underline; }

/* ── 우측 이 페이지 목차 ── */
.g-toc { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
.g-toc-title { margin: 2px 0 8px 12px; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }
.g-toc a {
    display: block;
    padding: 4px 10px;
    border-left: 2px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.g-toc a.is-sub { padding-left: 20px; }
.g-toc a:hover { color: var(--text-primary); }
.g-toc a.active { border-left-color: var(--accent-blue); color: var(--accent-blue); }

/* ── 반응형 ── */
@media (max-width: 1280px) {
    .g-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .g-toc { display: none; }
}
@media (max-width: 900px) {
    .g-layout { grid-template-columns: minmax(0, 1fr); }
    .g-side-toggle { display: inline-flex; }
    .g-side { position: static; max-height: none; display: none; }
    .g-layout.side-open .g-side { display: flex; }
    .g-side-nav { max-height: 60vh; }
    .g-doc { padding: 20px 16px 24px; }
    .g-doc h1 { font-size: 1.35rem; }
    .g-shot-grid { grid-template-columns: minmax(0, 1fr); }
    .g-pager { grid-template-columns: minmax(0, 1fr); }
    .g-pager .is-next { grid-column: 1; }
}