/* 고객 이용 매뉴얼 — /guide (기획서 X)
 *
 * 색은 전부 시맨틱 토큰만 쓴다. 라이트/다크 전환은 tokens.css 가 세맨틱을 뒤집는 것으로
 * 끝나므로 이 파일에 테마 분기가 없다 — 분기를 넣는 순간 토큰이 바뀔 때 여기만 뒤처진다.
 */

/* 헤더가 sticky 라 header-h 만큼 또 띄우면 여백이 두 배가 된다 (support.css 와 같은 이유).
   `.gio-site main { padding-top: 0 }` 를 이기려면 specificity (0,2,0) 이상이 필요하다. */
.gio-site .guide {
    padding-bottom: var(--gio-space-10, 64px);
}

.guide__container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gio-space-4, 16px);
}

/* ── HERO ──────────────────────────────────── */
.guide-hero {
    background: var(--gio-color-surface);
    border-bottom: 1px solid var(--gio-color-border);
    padding: var(--gio-space-9, 48px) 0 var(--gio-space-8, 40px);
    margin-bottom: var(--gio-space-8, 40px);
}
.guide-hero__eyebrow {
    display: inline-block;
    font-size: var(--gio-text-xs, 12px);
    font-weight: var(--gio-w-semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gio-color-action);
    margin-bottom: var(--gio-space-2, 8px);
}
.guide-hero__title {
    font-size: var(--gio-text-4xl, 36px);
    line-height: var(--gio-text-4xl-lh, 44px);
    letter-spacing: var(--gio-tracking-tight, -0.02em);
    font-weight: var(--gio-w-bold, 700);
    color: var(--gio-color-text-strong);
    margin: 0 0 var(--gio-space-3, 12px);
}
.guide-hero__lede {
    max-width: 62ch;
    color: var(--gio-color-text-muted);
    font-size: var(--gio-text-lg, 18px);
    line-height: var(--gio-text-lg-lh, 28px);
    margin: 0 0 var(--gio-space-6, 24px);
}
.guide-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gio-space-3, 12px);
}

/* ── LAYOUT ────────────────────────────────── */
.guide__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--gio-space-9, 48px);
    align-items: start;
}

/* ── TABLE OF CONTENTS ─────────────────────── */
.guide-toc {
    position: sticky;
    /* sticky 헤더 높이만큼 내려 붙인다 — 0 으로 두면 목차 첫 줄이 헤더 아래로 숨는다. */
    top: calc(var(--gio-header-h, 72px) + var(--gio-space-4, 16px));
    max-height: calc(100vh - var(--gio-header-h, 72px) - var(--gio-space-8, 40px));
    overflow-y: auto;
}
.guide-toc__title {
    font-size: var(--gio-text-xs, 12px);
    font-weight: var(--gio-w-semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gio-color-text-faint);
    margin: 0 0 var(--gio-space-3, 12px);
}
.guide-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
    border-left: 2px solid var(--gio-color-border);
}
.guide-toc__list a {
    display: flex;
    gap: var(--gio-space-2, 8px);
    padding: var(--gio-space-2, 8px) var(--gio-space-3, 12px);
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--gio-color-text-muted);
    font-size: var(--gio-text-sm, 14px);
    line-height: var(--gio-text-sm-lh, 20px);
    text-decoration: none;
    transition: color var(--gio-dur-fast, 120ms) var(--gio-ease-standard),
                border-color var(--gio-dur-fast, 120ms) var(--gio-ease-standard);
}
.guide-toc__list a span {
    color: var(--gio-color-text-faint);
    font-variant-numeric: tabular-nums;
    min-width: 1.4em;
}
.guide-toc__list a:hover {
    color: var(--gio-color-text-link);
    border-left-color: var(--gio-color-action);
}
/* 읽고 있는 절 (guide.js scrollspy).
   굵기만으로 표시하면 항목이 미세하게 흔들려 보이므로 왼쪽 선과 번호 색을 함께 바꾼다. */
.guide-toc__list a.is-active {
    color: var(--gio-color-text-strong);
    font-weight: var(--gio-w-semibold, 600);
    border-left-color: var(--gio-color-action);
}
.guide-toc__list a.is-active span {
    color: var(--gio-color-action);
}

/* ── BODY ──────────────────────────────────── */
.guide-body {
    min-width: 0;
    color: var(--gio-color-text);
    font-size: var(--gio-text-base, 16px);
    line-height: 1.7;
}
.guide-section {
    /* 앵커로 점프했을 때 제목이 sticky 헤더에 가리지 않게 한다. */
    scroll-margin-top: calc(var(--gio-header-h, 72px) + var(--gio-space-4, 16px));
    padding-bottom: var(--gio-space-8, 40px);
    margin-bottom: var(--gio-space-8, 40px);
    border-bottom: 1px solid var(--gio-color-border-muted);
}
.guide-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.guide-body h2 {
    font-size: var(--gio-text-2xl, 24px);
    line-height: var(--gio-text-2xl-lh, 32px);
    font-weight: var(--gio-w-bold, 700);
    letter-spacing: var(--gio-tracking-tight, -0.02em);
    color: var(--gio-color-text-strong);
    margin: 0 0 var(--gio-space-4, 16px);
}
.guide-body h3 {
    font-size: var(--gio-text-lg, 18px);
    font-weight: var(--gio-w-semibold, 600);
    color: var(--gio-color-text-strong);
    margin: var(--gio-space-6, 24px) 0 var(--gio-space-2, 8px);
}
.guide-body h4 {
    font-size: var(--gio-text-base, 16px);
    font-weight: var(--gio-w-semibold, 600);
    color: var(--gio-color-text-strong);
    margin: 0 0 var(--gio-space-2, 8px);
}
.guide-body p {
    margin: 0 0 var(--gio-space-4, 16px);
    max-width: 68ch;
}
.guide-body ul,
.guide-body ol {
    margin: 0 0 var(--gio-space-4, 16px);
    padding-left: var(--gio-space-5, 20px);
    max-width: 68ch;
}
.guide-body li {
    margin-bottom: var(--gio-space-2, 8px);
}
.guide-body a {
    color: var(--gio-color-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── 5단계 요약 ────────────────────────────── */
.guide-flow {
    list-style: none;
    padding: 0;
    counter-reset: guide-flow;
}
.guide-flow li {
    counter-increment: guide-flow;
    position: relative;
    padding-left: var(--gio-space-8, 40px);
    margin-bottom: var(--gio-space-3, 12px);
}
.guide-flow li::before {
    content: counter(guide-flow);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--gio-radius-pill, 9999px);
    background: var(--gio-color-action-soft);
    color: var(--gio-color-action);
    font-size: var(--gio-text-xs, 12px);
    font-weight: var(--gio-w-bold, 700);
}

/* ── 콜아웃 ────────────────────────────────── */
.guide-note {
    background: var(--gio-color-action-soft);
    border-left: 3px solid var(--gio-color-action);
    border-radius: var(--gio-radius-md, 8px);
    padding: var(--gio-space-4, 16px);
    color: var(--gio-color-text);
    font-size: var(--gio-text-sm, 14px);
    line-height: var(--gio-text-sm-lh, 20px);
    max-width: none;
}

/* ── 표 ────────────────────────────────────── */
.guide-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--gio-space-5, 20px);
    border: 1px solid var(--gio-color-border);
    border-radius: var(--gio-radius-lg, 12px);
    background: var(--gio-color-surface);
}
.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gio-text-sm, 14px);
}
.guide-table th,
.guide-table td {
    text-align: left;
    padding: var(--gio-space-3, 12px) var(--gio-space-4, 16px);
    border-bottom: 1px solid var(--gio-color-border-muted);
    vertical-align: top;
}
.guide-table thead th {
    background: var(--gio-color-surface-alt);
    color: var(--gio-color-text-muted);
    font-weight: var(--gio-w-semibold, 600);
    font-size: var(--gio-text-xs, 12px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td {
    border-bottom: 0;
}
.guide-table s {
    color: var(--gio-color-text-faint);
    margin-right: 4px;
}
.guide-table .is-free {
    color: var(--gio-color-success);
    font-weight: var(--gio-w-semibold, 600);
}
.guide-table__tag {
    display: inline-block;
    margin-left: var(--gio-space-2, 8px);
    padding: 1px 8px;
    border-radius: var(--gio-radius-pill, 9999px);
    background: var(--gio-color-bg-subtle);
    color: var(--gio-color-text-muted);
    font-size: var(--gio-text-xs, 12px);
    white-space: nowrap;
}

/* ── 회차 해제 사이클 다이어그램 ───────────── */
.guide-cycle {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gio-space-5, 20px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gio-space-3, 12px);
    max-width: none;
}
.guide-cycle__step {
    position: relative;
    background: var(--gio-color-surface);
    border: 1px solid var(--gio-color-border);
    border-radius: var(--gio-radius-lg, 12px);
    padding: var(--gio-space-4, 16px);
    margin: 0;
}
/* 카드 사이의 진행 화살표 — 마지막 카드 뒤에는 붙이지 않는다.
   z-index 가 필요하다: 화살표는 카드 바깥(gap)에 놓이는데, 다음 카드가 DOM 상 뒤라
   같은 쌓임 순서에서 나중에 그려져 화살표를 덮는다. */
.guide-cycle__step:not(:last-child)::after {
    content: '→';
    position: absolute;
    z-index: 1;
    right: calc(var(--gio-space-3, 12px) * -1);
    top: 50%;
    transform: translate(50%, -50%);
    color: var(--gio-color-text-faint);
    font-size: var(--gio-text-sm, 14px);
    line-height: 1;
}
.guide-cycle__num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-bottom: var(--gio-space-2, 8px);
    border-radius: var(--gio-radius-pill, 9999px);
    background: var(--gio-color-action);
    color: var(--gio-color-text-on-action);
    font-size: var(--gio-text-xs, 12px);
    font-weight: var(--gio-w-bold, 700);
}
.guide-cycle__step strong {
    display: block;
    color: var(--gio-color-text-strong);
    margin-bottom: var(--gio-space-1, 4px);
}
.guide-cycle__step p {
    margin: 0;
    font-size: var(--gio-text-sm, 14px);
    line-height: var(--gio-text-sm-lh, 20px);
    color: var(--gio-color-text-muted);
}

/* 목표 도달 갈래 — 사이클 아래 별도 상자 (260925) */
.guide-cycle-branch {
    margin: 0 0 var(--gio-space-5, 20px);
    padding: var(--gio-space-4, 16px);
    border: 1px solid var(--gio-color-success);
    border-radius: var(--gio-radius-lg, 12px);
    background: var(--gio-color-success-soft);
}
.guide-cycle-branch strong {
    display: block;
    color: var(--gio-color-text-strong);
    margin-bottom: var(--gio-space-1, 4px);
}
.guide-cycle-branch p {
    margin: 0;
    font-size: var(--gio-text-sm, 14px);
    line-height: var(--gio-text-sm-lh, 20px);
    color: var(--gio-color-text-muted);
}

/* ── 칩 (진단 구성 등) ─────────────────────── */
.guide-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gio-space-2, 8px);
    padding: 0;
    max-width: none;
}
.guide-chips li {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--gio-color-border);
    border-radius: var(--gio-radius-pill, 9999px);
    background: var(--gio-color-surface);
    font-size: var(--gio-text-sm, 14px);
    color: var(--gio-color-text);
}

/* ── 2단 카드 (Writing / Speaking 피드백) ──── */
.guide-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gio-space-4, 16px);
    margin-bottom: var(--gio-space-5, 20px);
}
.guide-card {
    background: var(--gio-color-surface);
    border: 1px solid var(--gio-color-border);
    border-radius: var(--gio-radius-lg, 12px);
    padding: var(--gio-space-5, 20px);
}
.guide-card ul {
    margin: 0;
    font-size: var(--gio-text-sm, 14px);
    line-height: var(--gio-text-sm-lh, 20px);
}

/* ── 마무리 CTA ────────────────────────────── */
.guide-cta {
    margin-top: var(--gio-space-7, 32px);
    padding: var(--gio-space-6, 24px);
    border-radius: var(--gio-radius-xl, 16px);
    background: var(--gio-color-surface-alt);
    border: 1px solid var(--gio-color-border);
    text-align: center;
}
.guide-cta p {
    max-width: none;
    margin: 0 0 var(--gio-space-3, 12px);
    font-weight: var(--gio-w-semibold, 600);
    color: var(--gio-color-text-strong);
}

/* ── 반응형 ────────────────────────────────── */
@media (max-width: 1023px) {
    .guide__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gio-space-6, 24px);
    }
    /* 좁은 화면에서는 목차가 본문을 밀어내므로 sticky 를 풀고 카드로 얹는다. */
    .guide-toc {
        position: static;
        max-height: none;
        padding: var(--gio-space-4, 16px);
        border: 1px solid var(--gio-color-border);
        border-radius: var(--gio-radius-lg, 12px);
        background: var(--gio-color-surface);
    }
    .guide-toc__list {
        columns: 2;
        column-gap: var(--gio-space-4, 16px);
        border-left: 0;
    }
    .guide-toc__list a {
        margin-left: 0;
        border-left: 0;
        padding: 4px 0;
    }
    .guide-toc__list a.is-active {
        border-left: 0;
    }
    .guide-cycle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 2열로 접히면 1→2, 3→4 사이에만 화살표가 맞는다. 짝수 카드 뒤 화살표는 줄바꿈
       지점이라 방향이 거짓이 된다. */
    .guide-cycle__step:nth-child(even)::after {
        content: none;
    }
}

@media (max-width: 639px) {
    .guide-hero__title {
        font-size: var(--gio-text-3xl, 30px);
        line-height: var(--gio-text-3xl-lh, 38px);
    }
    .guide-toc__list {
        columns: 1;
    }
    .guide-cycle,
    .guide-cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .guide-cycle__step::after {
        content: none !important;
    }
}