/* =============================================================================
   ZZAPS — 가이드 전용 스타일

   이 파일은 /guide 화면에서만 읽는다.
   모든 선택자를 body.zz-guide-page 아래로 가둔다. 공통 app.css 와 다른 화면은
   건드리지 않는다. (약관 화면 zzaps-legal.css 와 같은 규칙이다)

   색은 공통 테마 변수를 읽기만 한다. 여기서 색을 새로 정하면 앱 테마가 바뀔 때
   이 화면만 옛 색으로 남는다.

   폭은 앱 컨테이너(--zz-app-w = 430px)를 그대로 따른다. 긴 글이라고 넓히지 않는다.
   전 기기 모바일 UI 가 이 서비스의 정책이다.
   ============================================================================= */

.zz-guide-page {
    /* 긴 글을 읽는 화면이라 공통 15px 보다 조금 키운다 */
    --zg-fs: 15.5px;
    --zg-lh: 1.78;
}

.zz-guide-page .zz-guide {
    padding: 4px var(--shell-pad) 8px;
}

/* -----------------------------------------------------------------------------
   1. 경로 · 머리글
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-dim);
}
.zz-guide-page .zz-guide-crumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.zz-guide-page .zz-guide-crumb a:hover {
    color: var(--text);
}
.zz-guide-page .zz-guide-crumb .sep {
    color: var(--text-dim);
}

.zz-guide-page .zz-guide-head {
    padding: 12px 0 18px;
    border-bottom: 1px solid var(--border);
}

.zz-guide-page .zz-guide-kicker {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .02em;
}

.zz-guide-page .zz-guide-head h1 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.32;
    word-break: keep-all;
}

.zz-guide-page .zz-guide-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
    word-break: keep-all;
}

/* 마지막 갱신 — 정보 문서라 언제 쓴 글인지 밝힌다 */
.zz-guide-page .zz-guide-stamp {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   2. 핵심 요약
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-summary {
    margin: 18px 0 0;
    padding: 14px 15px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
}
.zz-guide-page .zz-guide-summary p {
    margin: 0;
    font-size: 14px;
    line-height: 1.72;
    color: var(--text);
    word-break: keep-all;
}

/* -----------------------------------------------------------------------------
   3. 목차
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-toc {
    margin: 18px 0 0;
    padding: 14px 15px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}
.zz-guide-page .zz-guide-toc-title {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}
.zz-guide-page .zz-guide-toc ol {
    margin: 0;
    padding-left: 18px;
}
.zz-guide-page .zz-guide-toc li {
    margin: 5px 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.zz-guide-page .zz-guide-toc a {
    color: var(--text-muted);
    text-decoration: none;
}
.zz-guide-page .zz-guide-toc a:hover {
    color: var(--text);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   4. 본문
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-body {
    padding: 6px 0 0;
    font-size: var(--zg-fs);
    line-height: var(--zg-lh);
    color: var(--text);
}

.zz-guide-page .zz-guide-body section {
    padding: 22px 0 0;
    /* 목차에서 눌러 왔을 때 제목이 상단 헤더에 가리지 않게 한다 */
    scroll-margin-top: calc(var(--header-h) + 12px);
}

.zz-guide-page .zz-guide-body h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
}

.zz-guide-page .zz-guide-body p {
    margin: 0 0 12px;
    word-break: keep-all;
}
.zz-guide-page .zz-guide-body p:last-child {
    margin-bottom: 0;
}

.zz-guide-page .zz-guide-body ul {
    margin: 0 0 12px;
    padding-left: 18px;
}
.zz-guide-page .zz-guide-body li {
    margin: 6px 0;
    word-break: keep-all;
}
.zz-guide-page .zz-guide-body li::marker {
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   5. 자주 묻는 질문
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-faq {
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
}
.zz-guide-page .zz-guide-faq h2 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
}

.zz-guide-page .zz-guide-qa {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-soft);
}
.zz-guide-page .zz-guide-qa:last-child {
    border-bottom: 0;
}
.zz-guide-page .zz-guide-q {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}
.zz-guide-page .zz-guide-a {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    word-break: keep-all;
}

/* -----------------------------------------------------------------------------
   6. 이어지는 길 (관련 가이드 · 같은 구간 · 매물)
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-links {
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
}
.zz-guide-page .zz-guide-links + .zz-guide-links {
    margin-top: 20px;
    padding-top: 18px;
}
.zz-guide-page .zz-guide-links-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.zz-guide-page .zz-guide-cards {
    display: grid;
    gap: 8px;
}

.zz-guide-page .zz-guide-card {
    display: block;
    padding: 13px 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
}
.zz-guide-page .zz-guide-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.zz-guide-page .zz-guide-card-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
}
.zz-guide-page .zz-guide-card-desc {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    word-break: keep-all;

    /* 카드 높이를 고르게 유지한다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 이름만 나열하는 자리 (같은 구간의 다른 가이드 · 구간 이동) */
.zz-guide-page .zz-guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.zz-guide-page .zz-guide-chip {
    padding: 7px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.zz-guide-page .zz-guide-chip:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

/* 이 브랜드 매물 보러 가기 — 정보에서 서비스로 넘어가는 유일한 자리 */
.zz-guide-page .zz-guide-cta {
    display: block;
    margin: 22px 0 0;
    padding: 14px;
    background: var(--primary-dim);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    text-align: center;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.zz-guide-page .zz-guide-cta:hover {
    background: rgba(229, 72, 77, .2);
}

/* -----------------------------------------------------------------------------
   7. 참고 링크 (바깥 사이트)

   본문 흐름과 분명히 구분되게 낮은 채도로 둔다. 광고 블록처럼 크게 만들지 않는다.
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-ref {
    margin: 20px 0 0;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}
.zz-guide-page .zz-guide-ref-title {
    margin: 0 0 5px;
    font-size: 12px;
    color: var(--text-dim);
}
.zz-guide-page .zz-guide-ref a {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
    text-decoration: none;
    word-break: keep-all;
}
.zz-guide-page .zz-guide-ref a:hover {
    color: var(--text);
    text-decoration: underline;
}
.zz-guide-page .zz-guide-ref-host {
    margin-left: 4px;
    font-size: 12px;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   8. 허브 (구간 목록)
   -------------------------------------------------------------------------- */

.zz-guide-page .zz-guide-sec {
    margin: 26px 0 0;
}
.zz-guide-page .zz-guide-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
}
.zz-guide-page .zz-guide-sec-head h2 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 800;
}
.zz-guide-page .zz-guide-sec-more {
    flex: none;
    font-size: 12.5px;
    color: var(--primary);
    text-decoration: none;
}
.zz-guide-page .zz-guide-sec-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    word-break: keep-all;
}

/* 구간에 담긴 개수 */
.zz-guide-page .zz-guide-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
}

/* 목록이 비었을 때 */
.zz-guide-page .zz-guide-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-dim);
}