[hidden] { 
    display: none !important; 
}

html { 
    scroll-behavior: smooth; 
}

.lg-page { 
    background: #FFFFFF; 
    padding: 36px 0 64px; 
}

.lg { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

.lg-tabs { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    width: fit-content; 
    max-width: 100%; 
    padding: 5px; 
    border-radius: 999px; 
    background: #F4F6F8; 
}

.lg-tab { 
    display: inline-flex; 
    align-items: center; 
    min-height: 44px; 
    padding: 0 18px; 
    border-radius: 999px; 
    font-size: 15px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.lg-tab:hover { 
    color: #1E3A5F; 
    background: #EBEFF3; 
}

.lg-tab.is-active { 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.lg-title { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(32px, 4vw, 46px); 
    font-weight: 500; 
    line-height: 1.1; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.lg-meta { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px 20px; 
    margin: 10px 0 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.lg-meta a { 
    font-weight: 600; 
    color: #B85C0A; 
}

.lg-layout { 
    display: grid; 
    grid-template-columns: 280px minmax(0, 760px); 
    gap: 56px; 
    align-items: start; 
}

.lg-toc { 
    position: sticky; 
    top: 20px; 
    padding: 12px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
}

.lg-toc__title { 
    margin: 4px 12px 8px; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: .8px; 
    text-transform: uppercase; 
    color: #8A97A6; 
}

.lg-toc ol { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    counter-reset: toc; 
}

.lg-toc li { 
    counter-increment: toc; 
}

.lg-toc a { 
    display: flex; 
    gap: 10px; 
    padding: 8px 12px; 
    border-radius: 10px; 
    font-size: 14px; 
    line-height: 1.4; 
    color: #3D4E61; 
    text-decoration: none; 
}

.lg-toc a::before { 
    content: counter(toc) '.'; 
    min-width: 22px; 
    color: #8A97A6; 
    font-weight: 600; 
}

.lg-toc a:hover { 
    background: #F4F6F8; 
}

.lg-toc a.is-active { 
    background: #F4F6F8; 
    color: #1E3A5F; 
    font-weight: 600; 
}

.lg-toc a.is-active::before { 
    color: #B85C0A; 
}

.lg-article { 
    min-width: 0; 
}

.lg-article h2 { 
    margin: 36px 0 10px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 24px; 
    font-weight: 500; 
    color: #1E3A5F; 
    scroll-margin-top: 20px; 
}

.lg-article h3 { 
    margin: 20px 0 6px; 
    font-size: 16px; 
    font-weight: 600; 
}

.lg-article p, .lg-article ul { 
    margin: 0 0 12px; 
    font-size: 16px; 
    line-height: 1.75; 
    color: #2C3B4D; 
}

.lg-article ul { 
    padding-left: 22px; 
}

.lg-article a { 
    color: #1E3A5F; 
    font-weight: 500; 
}

.lg-summary { 
    padding: 20px 24px; 
    border: 1px solid #CFE0F2; 
    border-radius: 18px; 
    background: #F4F8FC; 
}

.lg-summary__title { 
    margin: 0 0 8px !important; 
    font-weight: 600; 
    color: #1E3A5F !important; 
}

.lg-summary ul { 
    margin: 0 !important; 
    font-size: 15px !important; 
    line-height: 1.6 !important; 
}

.lg-summary li { 
    margin-bottom: 6px; 
}

.lg-summary__note { 
    margin: 10px 0 0 !important; 
    font-size: 13px !important; 
    color: #5B6B7D !important; 
}

.lg-todo { 
    padding: 1px 5px; 
    border-radius: 4px; 
    background: #FFF1B8; 
    color: #6B4E00; 
}

.lg-link { 
    padding: 0; 
    border: 0; 
    background: none; 
    font: inherit; 
    font-weight: 600; 
    color: #B85C0A; 
    text-decoration: underline; 
    cursor: pointer; 
}

@media (max-width: 960px) {
    .lg-layout { 
        grid-template-columns: 1fr; 
        gap: 24px; 
    }

    .lg-toc { 
        position: static; 
    }
}