/**
 * 이 파일은 루틴 콘텐츠 기본 템플릿의 일부입니다. (https://www.rootin.co.kr)
 *
 * 아티클 목록 컨텍스트 스타일
 *
 * @file /modules/rootin/content/templates/default/styles/article.css
 * @author krkim <krkim@naddle.com>
 * @license MIT License
 * @modified 2026. 8. 13.
 */
body[data-frame='site'] {
    div.pagination {
        display: flex;
        justify-content: center;

        ul {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border: 1px solid var(--rootin-border);
            border-radius: 8px;
            color: var(--rootin-text);
            background: var(--color-bg-primary);
            font-size: 15px;
            font-weight: 800;
            text-decoration: none;
        }

        li.active a {
            color: var(--color-text-white);
            border-color: var(--color-text-brand-primary);
            background: var(--color-text-brand-primary);
        }

        li.disabled a {
            color: var(--rootin-text-soft);
            pointer-events: none;
            opacity: 0.45;
        }
    }

    section[data-role='rootin-article-list'] {
        margin: 0 auto;
        padding: 34px 0 86px;

        a {
            text-decoration: none;
        }

        header[data-role='article-list-head'] {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-bottom: 16px;
        }

        header[data-role='article-list-head'] > div:first-child {
            margin-right: auto;
        }

        header[data-section='articles'] {
            justify-content: flex-end;
            margin-top: 12px;
            margin-bottom: 18px;

            div[data-role='article-list-title'] {
                gap: 10px;

                h2 {
                    display: inline-flex;
                    align-items: center;
                    gap: 5px;
                    color: var(--rootin-text-soft);
                    font-size: 15px;
                }
            }
        }

        div[data-role='article-list-title'] {
            display: flex;
            align-items: center;
            gap: 12px;

            > span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: none;
                width: 34px;
                height: 34px;
                border-radius: 50%;
                color: var(--color-text-white);
                background: color-mix(in srgb, var(--rootin-primary) 52%, var(--rootin-accent));
                font-weight: 900;
                line-height: 1;
            }

            h2 {
                margin: 0;
                color: var(--rootin-text);
                font-size: 25px;
                font-weight: 900;
                line-height: 1.25;
            }

            p {
                margin: 7px 0 0;
                color: var(--rootin-text-soft);
                font-size: 15px;
                font-weight: 700;
            }
        }

        section[data-role='keyword-section'] {
            margin-bottom: 24px;
        }

        ul[data-role='keywords'] {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 18px;
            padding: 0;
            list-style: none;

            a {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                min-height: 46px;
                padding: 0 20px;
                border: 1px solid var(--rootin-border);
                border-radius: 24px;
                color: var(--rootin-text-muted);
                background: var(--color-bg-primary);
                font-size: 15px;
                font-weight: 800;

                &.selected,
                &:hover {
                    color: var(--color-text-brand-primary);
                    border-color: color-mix(in srgb, var(--color-text-brand-primary) 42%, var(--rootin-border));
                    background: color-mix(in srgb, var(--color-text-brand-primary) 9%, var(--color-bg-primary));
                }
            }
        }

        p[data-role='article-total'] {
            margin: 0;
            color: var(--rootin-text-soft);
            font-size: 15px;
            font-weight: 700;
        }

        ul[data-role='article-list-items'] {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 34px;
            row-gap: 28px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a[data-role='article-list-item'] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 160px;
            gap: 18px;
            align-items: center;
            min-height: 120px;
            color: inherit;
        }

        div[data-role='tags'] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;

            > span {
                display: inline-flex;
                align-items: center;
                min-height: 30px;
                padding: 0 16px;
                border-radius: 18px;
                color: var(--color-text-brand-primary);
                background: color-mix(in srgb, var(--color-text-brand-primary) 8%, var(--color-bg-primary));
                font-size: 13px;
                font-weight: 900;
                line-height: 1;
            }
        }

        h3 {
            margin: 0 0 10px;
            color: var(--rootin-text);
            font-size: 18px;
            font-weight: 900;
            line-height: 1.35;
        }

        a[data-role='article-list-item']:hover h3 {
            color: var(--color-text-brand-primary);
        }

        p {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--rootin-text-soft);
            font-size: 14px;
            font-weight: 700;

            > b {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                color: var(--rootin-text);
                font-weight: 900;
            }

            > span::before {
                content: '• ';
            }
        }

        em[data-role='thumbnail'] {
            display: block;
            aspect-ratio: 16 / 9;
            border-radius: 8px;
            overflow: hidden;
            background: var(--rootin-primary);

            > img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        [data-role='rootin-article-series'] {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 40px;

            h2 {
                margin: 0;
                font-size: 24px;
                font-weight: 700;
                line-height: 145%;
            }

            p {
                margin: 0;
                color: var(#64748B);
                font-size: 16px;
                font-weight: 400;
                line-height: 150%;
            }
        }

    }

    section[data-role='rootin-article-view'] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 36px;
        width: var(--rootin-container-width);
        margin: 0 auto;
        padding: 8px 0 86px;

        a {
            color: inherit;
            text-decoration: none;
        }

        div[data-role='article-view-main'] {
            min-width: 0;
        }

        a[data-role='article-back'] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin-bottom: 14px;
            color: var(--rootin-text);

            > i {
                font-size: 24px;
            }
        }

        figure[data-role='article-cover'] {
            margin: 0 0 24px;
            overflow: hidden;
            background: var(--rootin-primary);

            > img {
                display: block;
                width: 100%;
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }
        }

        header[data-role='article-view-head'] {
            position: relative;
            padding-bottom: 28px;
            border-bottom: 1px solid var(--rootin-border);

            h2 {
                margin: 0 0 12px;
                color: var(--rootin-text);
                font-size: 28px;
                font-weight: 900;
                line-height: 1.35;
            }

            > p {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 0;
                color: var(--rootin-text-soft);
                font-size: 14px;
                font-weight: 700;

                > b {
                    color: var(--rootin-text);
                    font-weight: 900;
                }

                > span::before {
                    content: '| ';
                    color: var(--rootin-border);
                }
            }
        }

        div[data-role='article-actions'] {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 18px;

            > button {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                height: 36px;
                padding: 0 15px;
                border: 1px solid var(--rootin-border);
                border-radius: 18px;
                color: var(--rootin-text-soft);
                background: var(--color-bg-primary);
                font-size: 13px;
                font-weight: 800;
                cursor: pointer;
            }
        }

        div[data-role='tags'] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;

            > span {
                display: inline-flex;
                align-items: center;
                min-height: 30px;
                padding: 0 16px;
                border-radius: 18px;
                color: var(--color-text-brand-primary);
                background: color-mix(in srgb, var(--color-text-brand-primary) 8%, var(--color-bg-primary));
                font-size: 13px;
                font-weight: 900;
            }
        }

        p[data-role='article-notice'] {
            margin: 30px 0;
            color: var(--rootin-text-soft);
            font-size: 13px;
            font-weight: 700;
            text-align: center;
        }

        article[data-role='article-content'] {
            color: var(--rootin-text);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.8;

            h3 {
                margin: 34px 0 14px;
                padding: 10px 14px;
                border-radius: 8px;
                color: var(--color-text-white);
                background: var(--color-text-brand-primary);
                font-size: 20px;
                font-weight: 900;
                line-height: 1.35;
            }

            p {
                margin: 0 0 18px;
            }

            figure {
                margin: 28px 0;

                > img {
                    display: block;
                    max-width: 100%;
                    border-radius: 12px;
                }
            }
        }

        footer[data-role='article-view-foot'] {
            margin-top: 48px;
        }

        section[data-role='article-reactions'] {
            margin-top: 28px;

            > h3 {
                margin: 0 0 14px;
                color: var(--rootin-text);
                font-size: 20px;
                font-weight: 900;
            }

            > button {
                height: 36px;
                margin-right: 8px;
                padding: 0 14px;
                border: 1px solid var(--rootin-border);
                border-radius: 18px;
                color: var(--rootin-text-soft);
                background: var(--color-bg-primary);
                font-weight: 800;
            }
        }

        section[data-role='article-comments'] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 70px;
            gap: 10px;
            margin-top: 16px;

            > textarea {
                min-height: 92px;
                padding: 16px;
                border: 1px solid var(--rootin-border);
                border-radius: 12px;
                resize: vertical;
            }

            > button {
                align-self: stretch;
                border: 0;
                border-radius: 12px;
                color: var(--color-text-white);
                background: var(--color-text-brand-primary);
                font-weight: 900;
            }
        }

        aside[data-role='article-view-aside'] {
            position: sticky;
            top: 116px;
            align-self: start;
            padding: 22px;
            border-radius: 24px;
            background: var(--color-bg-secondary);

            > h3 {
                margin: 0 0 18px;
                color: var(--rootin-text);
                font-size: 18px;
                font-weight: 900;
            }

            > ol {
                display: flex;
                flex-direction: column;
                gap: 18px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            a {
                display: grid;
                grid-template-columns: 30px minmax(0, 1fr);
                gap: 10px;
                align-items: start;
            }

            b {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                border-radius: 6px;
                color: var(--color-text-white);
                background: var(--color-text-brand-primary);
                font-weight: 900;
            }

            img {
                grid-column: 2;
                display: block;
                width: 100%;
                aspect-ratio: 16 / 9;
                border-radius: 8px;
                object-fit: cover;
            }

            strong {
                grid-column: 2;
                color: var(--rootin-text);
                font-size: 14px;
                font-weight: 900;
                line-height: 1.45;
            }
        }
    }

    section[data-role='rootin-collection-view'] {
        width: var(--rootin-container-width);
        margin: 0;
        padding: 0;

        a {
            color: inherit;
            text-decoration: none;
        }

        header[data-role='collection-view-nav'] {
            margin-bottom: 10px;

            > a {
                align-items: center;
                gap: 12px;
                color: var(--rootin-text);
                font-size: 18px;
                font-weight: 900;
            }

            > b {
                align-items: center;
                gap: 12px;
                color: var(--rootin-text);
                font-size: 18px;
                font-weight: 900;
            }
        }

        section[data-role='collection-view-hero'] {
            display: grid;
            grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
            gap: 36px;
            align-items: center;
            margin-bottom: 30px;

            > img {
                display: block;
                width: 100%;
                aspect-ratio: 16 / 10;
                object-fit: cover;
                background: var(--rootin-primary);
            }

            h2 {
                margin: 0 0 16px;
                color: var(--rootin-text);
                font-size: 32px;
                font-weight: 900;
                line-height: 1.25;
            }

            p {
                margin: 0;
                color: var(--rootin-text-soft);
                font-size: 17px;
                font-weight: 700;
                line-height: 1.8;
            }
        }

        section[data-role='collection-view-articles'] {
            > h3 {
                margin: 0 0 24px;
                color: var(--rootin-text);
                font-size: 18px;
                font-weight: 900;

                > b {
                    color: var(--color-text-brand-primary);
                }
            }

            > ul {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 34px;
                row-gap: 28px;
                margin: 0;
                padding: 0;
                list-style: none;
            }
        }

        a[data-role='article-list-item'] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 160px;
            gap: 18px;
            align-items: center;
            min-height: 120px;
        }

        div[data-role='tags'] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;

            > span {
                display: inline-flex;
                align-items: center;
                min-height: 30px;
                padding: 0 16px;
                border-radius: 18px;
                color: var(--color-text-brand-primary);
                background: color-mix(in srgb, var(--color-text-brand-primary) 8%, var(--color-bg-primary));
                font-size: 13px;
                font-weight: 900;
                line-height: 1;
            }
        }

        h4 {
            margin: 0 0 10px;
            color: var(--rootin-text);
            font-size: 18px;
            font-weight: 900;
            line-height: 1.35;
        }

        a[data-role='article-list-item']:hover h4 {
            color: var(--color-text-brand-primary);
        }

        p {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--rootin-text-soft);
            font-size: 14px;
            font-weight: 700;

            > b {
                color: var(--rootin-text);
                font-weight: 900;
            }

            > span::before {
                content: '• ';
            }
        }

        em[data-role='thumbnail'] {
            display: block;
            aspect-ratio: 16 / 9;
            border-radius: 8px;
            overflow: hidden;
            background: var(--rootin-primary);

            > img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        div[data-role='article-pagination'] {
            margin-top: 44px;
        }
    }
}

@media (max-width: 860px) {
    body[data-frame='site'] div.pagination ul {
        gap: 7px;
    }

    body[data-frame='site'] section[data-role='rootin-article-list'] {
        width: min(calc(100% - 32px), var(--rootin-container-width));
        padding: 24px 0 56px;

        div[data-role='article-list-title'] {
            align-items: flex-start;

            h2 {
                font-size: 21px;
            }

            p {
                font-size: 14px;
            }
        }

        ul[data-role='keywords'] {
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }

            a {
                min-height: 40px;
                padding: 0 16px;
                white-space: nowrap;
            }
        }

        header[data-section='articles'] {
            margin-top: 0;
            align-items: flex-start;
        }

        ul[data-role='article-list-items'] {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        a[data-role='article-list-item'] {
            grid-template-columns: minmax(0, 1fr) 116px;
            gap: 16px;
            min-height: 104px;
        }

        div[data-role='tags'] > span {
            min-height: 27px;
            padding: 0 12px;
            font-size: 12px;
        }

        h3 {
            font-size: 16px;
        }

        p {
            flex-wrap: wrap;
            font-size: 13px;
        }

    }

    body[data-frame='site'] section[data-role='rootin-collection-view'] {
        width: min(calc(100% - 32px), var(--rootin-container-width));
        padding: 24px 0 56px;

        header[data-role='collection-view-nav'] > a {
            font-size: 16px;
        }

        section[data-role='collection-view-hero'] {
            grid-template-columns: 1fr;
            gap: 20px;

            h2 {
                font-size: 24px;
            }
        }

        section[data-role='collection-view-articles'] > ul {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        a[data-role='article-list-item'] {
            grid-template-columns: minmax(0, 1fr) 116px;
            gap: 16px;
            min-height: 104px;
        }

        h4 {
            font-size: 16px;
        }
    }

    body[data-frame='site'] section[data-role='rootin-article-view'] {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(calc(100% - 32px), var(--rootin-container-width));
        padding: 0 0 56px;

        header[data-role='article-view-head'] h2 {
            font-size: 23px;
        }

        article[data-role='article-content'] {
            font-size: 15px;

            h3 {
                font-size: 18px;
            }
        }

        section[data-role='article-comments'] {
            grid-template-columns: 1fr;

            > button {
                height: 42px;
            }
        }

        aside[data-role='article-view-aside'] {
            position: static;
        }
    }
}