@charset "utf-8";

.contents_page {
    padding: 20px;
    background: #fff;
    color: #333;
    border-radius: 8px;
    margin: 20px 0;
}

.page_header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
}

.page_header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.page_contents {
    line-height: 1.8;
    font-size: 15px;
}

.page_contents img {
    max-width: 100%;
    height: auto;
}

.page_header_img,
.page_footer_img {
    text-align: center;
    margin: 20px 0;
}

.page_header_img img,
.page_footer_img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 다크모드 */
:root[color-theme='dark'] .contents_page {
    background: #2F4F4F;
    color: #90EE90;
}

:root[color-theme='dark'] .page_header {
    border-bottom-color: #3a6363;
}

:root[color-theme='dark'] .page_header h1 {
    color: #90EE90;
}

:root[color-theme='dark'] .page_contents {
    color: #90EE90;
}

:root[color-theme='dark'] .page_contents a {
    color: #7aba7a;
}

:root[color-theme='dark'] .page_contents a:hover {
    color: #c0f0c0;
}

:root[color-theme='dark'] .page_contents table {
    border-color: #3a6363;
}

:root[color-theme='dark'] .page_contents th,
:root[color-theme='dark'] .page_contents td {
    background: #1a3333;
    border-color: #3a6363;
    color: #90EE90;
}

:root[color-theme='dark'] .page_contents blockquote {
    background: #1a3333;
    border-left-color: #5a9f9f;
    color: #7aba7a;
}

:root[color-theme='dark'] .page_contents pre,
:root[color-theme='dark'] .page_contents code {
    background: #1a3333;
    color: #90EE90;
}