/* guide page tokens */
:root {
    --color-text-step: #e86a43;
    --color-line: #e8bd9b;
}


/* =========================================
           版面佈局 (Layout - BEM)
           ========================================= */

.guide-page {
    width: 100%;
    overflow: hidden;
}


/* --- Header 區塊 (上方介紹與貓咪圓圖) --- */

.guide-header {
    /* background-color: var(--color-bg-top); */
    padding: 60px 5% 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}

.guide-header__content {
    max-width: 500px;
}

.guide-header__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.guide-header__subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.guide-header__text p {
    font-size: 1rem;
    margin-bottom: 16px;
    color:var(--text-sub);
}

.guide-header__visual {
    position: relative;
    width: 420px;
    height: 420px;
}


/* --- 波浪分隔線 (使用提供的幾何插圖) --- */

.guide-divider {
    width: 100%;
    /* background-color: var(--color-bg-top); */
    display: flex;
}

.guide-divider img {
    width: 100%;
    object-fit: cover;
    margin-top:-120px;
    margin-bottom: -2px;
    /* 消除圖片下緣間隙 */

}


/* --- 規則內容區塊 (下方三欄式 Grid) --- */

.guide-content {
    /* background-color: var(--color-bg-light); */
    padding: 40px 5% 80px;
    margin-top: 60px;
}

.rule-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 50px;
    align-items: start;
}


/* --- 規則卡片 --- */

.rule-card {
    display: flex;
    flex-direction: column;
}

.rule-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.rule-card__title-img {
    height: 32px;
    /* 統一標題圖片高度 */
    width: auto;
}

.rule-card__title-text {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rule-card__step {
    color: var(--color-text-step);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.rule-card__step span {
    font-size: 1.8rem;
}

.rule-card__intro {
    font-size: 1rem;
    margin-bottom: 16px;
    color: var(--text-sub);
}

.rule-card__list li {
    position: relative;
    padding-left: 14px;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--text-sub);
}


/* 自訂列表圓點 */

.rule-card__list li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: var(--color-text-main);
}


/* --- 底部標語 --- */

.guide-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 80px;
    /* background-color: var(--color-bg-light); */
}

.guide-footer__paw {
    width: 60px;
    margin-bottom: 15px;
}

.guide-footer__slogan {
    max-width: 600px;
}


/* =========================================
           響應式設計 (RWD)
           ========================================= */

@media (max-width: 992px) {
    .rule-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 平板改為雙欄 */
    }
    .rule-mascot {
        grid-column: span 2;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .guide-header {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
        gap: 40px;
    }
    .rule-grid {
        grid-template-columns: 1fr;
        /* 手機改為單欄 */
    }
    .rule-mascot {
        grid-column: span 1;
    }
    .guide-footer__slogan {
    max-width: 450px;   
    }

}