/* 가이드 목록 전용. 소개 페이지와 같은 읽기 폭·색·크기를 쓰고 개별 가이드에는 닿지 않는다. */
.guide-index {
    padding: 0 clamp(20px, 5vw, 40px) 36px;
    color: var(--jb-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.guide-index h1,
.guide-index h2 {
    margin: 0;
    font-family: var(--font-read);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.035em;
}
.guide-index h1 { font-size: clamp(28px, 5vw, 34px); }
.guide-index h2 { font-size: clamp(22px, 3.5vw, 25px); }
.gi-opening { padding-block: 28px 22px; }
.gi-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gi-welcome img { display: block; width: clamp(96px, 22vw, 124px); height: auto; flex: 0 0 auto; }
.gi-opening p {
    margin: 18px 0 0;
    font: 400 clamp(18px, 2.7vw, 20px)/1.75 var(--font-read);
    color: var(--jb-ink-soft);
}
.gi-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    border-block: 1px solid var(--jb-line-2);
}
.gi-jump a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    color: var(--jb-wood-deep);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gi-section { padding-block: 30px 22px; }
.gi-section + .gi-section { border-top: 1px solid var(--jb-line-2); }
.gi-topics,
.gi-services { padding: 0; margin: 14px 0 0; list-style: none; scroll-margin-top: 24px; }
.gi-topics li + li,
.gi-services li + li { border-top: 1px solid var(--jb-line-3); }
.gi-topics a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding-block: 18px;
    color: inherit;
    text-decoration: none;
}
.gi-topics h3,
.gi-services h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.55; }
.gi-topics p,
.gi-services p { margin: 0; color: var(--jb-ink-soft); font-size: 15px; line-height: 1.75; }
.gi-topics a > span { font-size: 26px; color: var(--jb-wood); text-align: right; }
.gi-intro { margin: 12px 0 0; color: var(--jb-ink-soft); font-size: 16px; line-height: 1.75; }
.gi-services a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding-block: 16px;
    color: inherit;
    text-decoration: none;
}
.gi-services img { display: block; width: 64px; height: 64px; object-fit: contain; }
.gi-next { padding-top: 28px; border-top: 1px solid var(--jb-line-2); }
.gi-next p { margin: 14px 0 20px; color: var(--jb-ink-soft); font-size: 16px; line-height: 1.8; }
.gi-button {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1.5px solid var(--jb-wood-deep);
    border-radius: 14px;
    background: var(--jb-paper-2);
    color: var(--jb-ink);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}
.gi-button:hover { background: var(--jb-paper-3); }
.gi-story-link { display: flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 6px; font-size: 15px; color: var(--jb-ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.gi-topics a:hover h3,
.gi-services a:hover h3 { color: var(--jb-wood-deep); text-decoration: underline; text-underline-offset: 4px; }
.guide-index a:focus-visible { outline: 3px solid var(--jb-el-water); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 560px) {
    .gi-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
    .gi-services li:nth-child(2) { border-top: 0; }
    .gi-services a { height: 100%; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .gi-services img { width: 48px; height: 48px; }
}
@media (max-width: 359px) {
    .gi-jump { column-gap: 16px; }
    .gi-welcome { gap: 12px; }
    .gi-services a { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
    .gi-services img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.guide-index) { scroll-behavior: auto; }
}