/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 문의 화면
 *
 * @file /modules/naddle/coursemos/themes/www/styles/inquiry.css
 * @license MIT License
 * @modified 2024. 12. 18.
 */
section[data-role='subtitle'] {
    > h2 {
        font: var(--font-head-sm);
        color: var(--color-text-primary);
    }

    > p {
        font: var(--font-paragraph-md);
        color: var(--color-text-tertiary);
        padding: 20px 0px 64px 0px;
    }
}

section[data-role='cards'] {
    > ul[data-role='lists'] {
        display: flex;
        flex-direction: column;
        gap: 40px;
        list-style: none;

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

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

                &::after {
                    padding-left: 4px;
                    content: '*';
                    font: var(--font-label-xlg);
                    color: var(--color-text-secondary);
                    vertical-align: text-bottom;
                }
            }

            > div[data-role='field'][data-field='input'] {
                > input {
                    height: 64px;
                    padding: 19px;
                    border: 1px solid var(--color-border-secondary);
                    background: var(--color-bg-primary);
                    border-radius: 8px;

                    &::placeholder {
                        font: var(--font-paragraph-md);
                        color: var(--color-text-placeholder);
                    }
                }

                &[data-name='inquiry'] {
                    > input {
                        height: 320px;
                        background: var(--color-bg-primary);
                        padding: 24px;
                        border: 1px solid var(--color-border-secondary);
                        border-radius: 8px;
                    }
                }
            }

            > div[data-role='field'][data-field='textarea'] {
                > textarea {
                    background: var(--color-bg-primary);
                    padding: 24px 16px;
                    border: 1px solid var(--color-border-secondary);
                    border-radius: 4px;
                    height: 320px;
                    resize: none;

                    &::placeholder {
                        font: var(--font-paragraph-md);
                        color: var(--color-text-placeholder);
                    }
                }
            }

            > ul[data-role='category1'] {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                list-style: none;
                gap: 32px;
                row-gap: 16px;

                > li {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    border-radius: 999px;
                    background: var(--color-bg-primary);
                    border: 1px solid var(--color-border-secondary);
                    height: 56px;
                    padding: 0 32px 0px 24px;

                    &:hover {
                        background: var(--color-bg-brand-secondary);
                        color: var(--color-white);
                    }

                    > div[data-role='field'][data-field='radio'] {
                        > label {
                            color: var(--font-paragraph-md);
                            font: var(--color-text-primary);
                        }
                    }
                }
            }

            > ul[data-role='checkbox'] {
                display: flex;
                flex-direction: column;
                list-style: none;

                > li {
                    display: flex;
                    align-items: center;
                    padding: 32px 0px;
                    border-top: 1px solid var(--color-border-secondary);
                    border-bottom: 1px solid var(--color-border-secondary);

                    > div[data-role='field'][data-field='radio'] {
                        > label {
                            display: flex;
                            align-items: center;
                            font: var(--font-paragraph-md);
                            color: var(--color-text-tertiary);
                        }
                    }

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

                        > b {
                            cursor: pointer;
                            color: var(--color-text-secondary);
                        }
                    }
                }
            }
        }
    }
}

section[data-role='submit'] {
    > div[data-role='buttons'] {
        padding: 64px 0px;
    }
}

@container content (width < 480px) {
    section[data-role='subtitle'] {
        > h2 {
            font: var(--font-label-2xlg);
        }

        > p {
            padding: 10px 0px 32px 0px;
        }
    }

    section[data-role='cards'] {
        > ul[data-role='lists'] {
            gap: 20px;

            > li {
                > b {
                    font: var(--font-label-lg);
                }

                > ul[data-role='checkbox'] {
                    > li {
                        align-items: flex-start;
                        gap: 4px;
                        padding: 16px 0px;

                        > div[data-role='field'][data-field='check'] {
                            > label {
                                padding-top: 4px;
                            }
                        }

                        > p {
                            font: var(--font-paragraph-sm);
                        }
                    }
                }
            }
        }
    }

    section[data-role='submit'] {
        > div[data-role='buttons'] {
            padding: 32px 0px;
        }
    }
}