/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 개인정보처리방침 화면
 *
 * @file /modules/naddle/coursemos/themes/www/styles/privacy.css
 * @author youlapark (youlapark@naddle.net)
 * @license MIT License
 * @modified 2024. 4. 18.
 */
section[data-role='contents'] {
    padding-top: 80px;
    margin-bottom: 240px;

    > div {
        display: flex;
        flex-direction: column;
        gap: 20px;

        > h4 {
            font: var(--font-head-sm);
            color: var(--color-text-primary);
        }

        > p {
            font: var(--font-paragraph-md);
            color: var(--color-text-tertiary);
        }
    }

    > div.notice {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-top: 64px;

        > p {
            padding: 32px;
            background: var(--color-bg-secondary);
            font: var(--font-paragraph-md);
            color: var(--color-text-tertiary);
        }

        > b {
            text-align: end;
        }
    }
}

section[data-role='articles'] {
    margin-top: calc(var(--section-gap) / 2);
    margin-bottom: var(--section-margin);

    display: flex;
    flex-direction: column;
    gap: 64px;

    > p {
        font: var(--font-paragraph-md);
        color: var(--color-text-tertiary);
    }

    > article {
        display: flex;
        flex-direction: column;
        gap: 20px;

        > h4 {
            font: var(--font-head-sm);
            color: var(--color-text-primary);

            > span {
                font: var(--font-label-2xlg);
            }
        }

        > p {
            font: var(--font-paragraph-md);
            color: var(--color-text-tertiary);
        }

        > ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;

            &.card {
                gap: 20px;
            }

            > li {
                > p {
                    font: var(--font-paragraph-md);
                    color: var(--color-text-tertiary);
                }

                > ul {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    > b {
                        font: var(--font-paragraph-md);
                        color: var(--color-text-secondary);
                    }

                    > li {
                        > b {
                            font: var(--font-paragraph-md);
                            color: var(--color-text-secondary);
                        }

                        > p {
                            display: flex;
                            align-items: center;
                            font: var(--font-paragraph-md);
                            color: var(--color-text-tertiary);
                            margin-left: 0.5lh;

                            &.none::before {
                                content: none;
                            }

                            &::before {
                                display: inline-block;
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                                background: var(--color-fg-secondary);
                                margin-right: 6px;
                                content: ' ';
                            }
                        }
                    }
                }

                > ul.label {
                    gap: 20px;

                    > li {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        > b {
                            font: var(--font-label-md);
                            color: var(--color-text-secondary);
                        }

                        > div {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            padding: 24px 32px;
                            border: 1px solid var(--color-border-secondary);
                            border-radus: 8px;

                            > p {
                                display: flex;
                                align-items: center;
                                font: var(--font-paragraph-md);
                                color: var(--color-text-secondary);

                                &::before {
                                    display: inline-block;
                                    width: 4px;
                                    height: 4px;
                                    border-radius: 50%;
                                    background: var(--color-fg-secondary);
                                    margin-right: 6px;
                                    content: ' ';
                                }
                            }
                        }

                        > div.caution {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;
                            gap: 8px;
                            height: 54px;
                            padding: 0px 16px;
                            border-radius: 4px;
                            background: var(--color-border-quinary);

                            > i {
                                font-size: 24px;
                                color: var(--color-fg-brand-primary);
                            }
                        }

                        > p {
                            list-style: none;
                        }
                    }
                }
            }
        }
    }
}

body[data-color-scheme='dark'],
body[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
    main {
        section[data-role='screen'] {
            &::after {
                display: block;
            }
        }
    }
}