/* Shared long-form article layout. Keep every guide inside .tt-article-page. */
.tt-article-page {
    width: min(calc(100% - 32px), 1320px);
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 42px) 16px 72px !important;
    box-sizing: border-box;
}

html[data-layout="horizontal"] #ttSpaContent > .tt-article-page.container.py-4 {
    display: block !important;
    width: min(calc(100% - 32px), 1320px) !important;
    min-width: 0 !important;
    max-width: 1320px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 42px) 16px 72px !important;
    transform: none !important;
    overflow: visible !important;
}

.tt-article-page .tt-article-detail {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px);
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

html[data-layout="horizontal"] .tt-article-page .tt-article-detail {
    width: 100% !important;
    max-width: 1080px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.tt-article-page .tt-article-detail h1 {
    max-width: 920px;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.18;
    text-wrap: balance;
}

.tt-article-page .tt-article-detail h2 {
    scroll-margin-top: 92px;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.35;
}

.tt-article-page .tt-article-detail h3 {
    scroll-margin-top: 92px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.45;
}

.tt-article-page .tt-article-detail p,
.tt-article-page .tt-article-detail li {
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.85;
}

.tt-article-page .tt-article-detail ul,
.tt-article-page .tt-article-detail ol {
    margin: 14px 0 24px;
    padding-left: 1.45rem;
}

.tt-article-page .tt-article-detail img,
.tt-article-page .tt-article-detail video,
.tt-article-page .tt-article-detail iframe {
    display: block;
    max-width: 100%;
    margin: 24px auto;
    border-radius: 16px;
}

.tt-article-page .tt-article-detail img,
.tt-article-page .tt-article-detail video {
    height: auto;
}

.tt-article-page .tt-article-detail iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.tt-article-page .tt-article-detail table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
}

.tt-article-page .tt-article-detail th,
.tt-article-page .tt-article-detail td {
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, .25);
    text-align: left;
    vertical-align: top;
}

html[data-layout="horizontal"] body:has(.tt-article-page) #ttSpaContent {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

body:has(.tt-article-page) .main-header .logo-text {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .tt-article-page {
        width: 100%;
        max-width: 100%;
        padding: 14px 10px 48px !important;
    }

    .tt-article-page .tt-article-detail {
        max-width: 100%;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .tt-article-page .tt-article-detail h1 {
        font-size: clamp(26px, 8vw, 34px);
    }

    .tt-article-page .tt-article-detail table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    body:has(.tt-article-page) .main-header .logo-text {
        font-size: clamp(18px, 2.2vw, 24px) !important;
    }

    .tt-article-page {
        width: min(calc(100% - 24px), 1120px);
        padding: 22px 12px 56px !important;
    }

    .tt-article-page .tt-article-detail {
        max-width: 980px;
        padding: clamp(28px, 4vw, 42px);
    }

    html[data-layout="horizontal"] #ttSpaContent > .tt-article-page.container.py-4 {
        width: min(calc(100% - 24px), 1120px) !important;
        max-width: 1120px !important;
        padding: 22px 12px 56px !important;
    }

    html[data-layout="horizontal"] .tt-article-page .tt-article-detail {
        max-width: 980px !important;
    }
}