/* Policy Page Styles */

/* Policy List Section */
.policy-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
    min-height: 80vh
}

.policy-container {
    width: 100%;
}

.policy-header {
    margin-bottom: 30px;
    text-align: center;
}

.policy-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
}

.policy-list {
    width: 100%;
}

.policy-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.policy-table thead {
    border-bottom: 2px solid #000000;
}

.policy-table thead th {
    padding: 20px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    text-align: left;
}

.policy-table thead th.col-number {
    width: 80px;
    text-align: center;
}

.policy-table thead th.col-title {
    width: auto;
}

.policy-table thead th.col-date {
    width: 150px;
    text-align: center;
}

.policy-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.policy-table tbody tr:hover {
    background-color: #f8f9fa;
}

.policy-table tbody td {
    padding: 20px 16px;
    font-size: 15px;
    color: #333333;
}

.policy-table tbody td.col-number {
    text-align: center;
    font-weight: 500;
    color: #666666;
}

.policy-table tbody td.col-title {
    font-weight: 400;
}

.policy-table tbody td.col-date {
    text-align: center;
    color: #666666;
}

.policy-link {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.policy-link:hover {
    color: #667eea;
}

.no-policy {
    padding: 100px 24px;
    text-align: center;
}

.no-policy p {
    font-size: 18px;
    color: #666666;
}

/* Policy Detail Section */
.policy-detail-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 24px;
}

.policy-detail-container {
    width: 100%;
}

.policy-detail-header {
    margin-bottom: 40px;
    text-align: center;
}

.policy-category-name {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
}

.policy-article {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
}

.article-header {
    margin-bottom: 30px;
}

.article-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 20px;
}

.article-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666666;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-item strong {
    font-weight: 600;
    color: #333333;
}

.article-divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin: 30px 0;
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    word-break: keep-all;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #000000;
}

.article-content h1 {
    font-size: 28px;
}

.article-content h2 {
    font-size: 24px;
}

.article-content h3 {
    font-size: 20px;
}

.article-content h4 {
    font-size: 18px;
}

.article-content p {
    margin-bottom: 16px;
}

.article-content ul,
.article-content ol {
    margin: 12px 0;
    padding-left: 32px;
}

.article-content li {
    margin-bottom: 8px;
}

/* 한글 순서 커스텀 카운터 스타일 정의 */
@counter-style hangul {
    system: alphabetic;
    symbols: '가' '나' '다' '라' '마' '바' '사' '아' '자' '차' '카' '타' '파' '하';
    suffix: '. ';
}

/* 한글 자음 순서 커스텀 카운터 스타일 정의 */
@counter-style hangul-consonant {
    system: alphabetic;
    symbols: 'ㄱ' 'ㄴ' 'ㄷ' 'ㄹ' 'ㅁ' 'ㅂ' 'ㅅ' 'ㅇ' 'ㅈ' 'ㅊ' 'ㅋ' 'ㅌ' 'ㅍ' 'ㅎ';
    suffix: '. ';
}

/* 한글 순서 (가, 나, 다, 라...) */
.article-content ol.hangul-list {
    list-style-type: hangul;
    padding-left: 32px;
}

/* 한글 자음 순서 (ㄱ, ㄴ, ㄷ, ㄹ...) */
.article-content ol.consonant-list {
    list-style-type: hangul-consonant;
    padding-left: 32px;
}

/* 브라우저 호환성을 위한 폴백 - 한글 */
@supports not (list-style-type: hangul) {
    .article-content ol.hangul-list {
        list-style-type: none;
        counter-reset: hangul-counter;
    }

    .article-content ol.hangul-list>li {
        counter-increment: hangul-counter;
        position: relative;
        padding-left: 8px;
    }

    .article-content ol.hangul-list>li::before {
        position: absolute;
        left: -32px;
        font-weight: 600;
        color: #333;
    }

    .article-content ol.hangul-list>li:nth-child(1)::before {
        content: '가. ';
    }

    .article-content ol.hangul-list>li:nth-child(2)::before {
        content: '나. ';
    }

    .article-content ol.hangul-list>li:nth-child(3)::before {
        content: '다. ';
    }

    .article-content ol.hangul-list>li:nth-child(4)::before {
        content: '라. ';
    }

    .article-content ol.hangul-list>li:nth-child(5)::before {
        content: '마. ';
    }

    .article-content ol.hangul-list>li:nth-child(6)::before {
        content: '바. ';
    }

    .article-content ol.hangul-list>li:nth-child(7)::before {
        content: '사. ';
    }

    .article-content ol.hangul-list>li:nth-child(8)::before {
        content: '아. ';
    }

    .article-content ol.hangul-list>li:nth-child(9)::before {
        content: '자. ';
    }

    .article-content ol.hangul-list>li:nth-child(10)::before {
        content: '차. ';
    }

    .article-content ol.hangul-list>li:nth-child(11)::before {
        content: '카. ';
    }

    .article-content ol.hangul-list>li:nth-child(12)::before {
        content: '타. ';
    }

    .article-content ol.hangul-list>li:nth-child(13)::before {
        content: '파. ';
    }

    .article-content ol.hangul-list>li:nth-child(14)::before {
        content: '하. ';
    }
}

/* 브라우저 호환성을 위한 폴백 - 자음 */
@supports not (list-style-type: hangul-consonant) {
    .article-content ol.consonant-list {
        list-style-type: none;
        counter-reset: consonant-counter;
    }

    .article-content ol.consonant-list>li {
        counter-increment: consonant-counter;
        position: relative;
        padding-left: 8px;
    }

    .article-content ol.consonant-list>li::before {
        position: absolute;
        left: -32px;
        font-weight: 600;
        color: #333;
    }

    .article-content ol.consonant-list>li:nth-child(1)::before {
        content: 'ㄱ. ';
    }

    .article-content ol.consonant-list>li:nth-child(2)::before {
        content: 'ㄴ. ';
    }

    .article-content ol.consonant-list>li:nth-child(3)::before {
        content: 'ㄷ. ';
    }

    .article-content ol.consonant-list>li:nth-child(4)::before {
        content: 'ㄹ. ';
    }

    .article-content ol.consonant-list>li:nth-child(5)::before {
        content: 'ㅁ. ';
    }

    .article-content ol.consonant-list>li:nth-child(6)::before {
        content: 'ㅂ. ';
    }

    .article-content ol.consonant-list>li:nth-child(7)::before {
        content: 'ㅅ. ';
    }

    .article-content ol.consonant-list>li:nth-child(8)::before {
        content: 'ㅇ. ';
    }

    .article-content ol.consonant-list>li:nth-child(9)::before {
        content: 'ㅈ. ';
    }

    .article-content ol.consonant-list>li:nth-child(10)::before {
        content: 'ㅊ. ';
    }

    .article-content ol.consonant-list>li:nth-child(11)::before {
        content: 'ㅋ. ';
    }

    .article-content ol.consonant-list>li:nth-child(12)::before {
        content: 'ㅌ. ';
    }

    .article-content ol.consonant-list>li:nth-child(13)::before {
        content: 'ㅍ. ';
    }

    .article-content ol.consonant-list>li:nth-child(14)::before {
        content: 'ㅎ. ';
    }
}

/* 기본 숫자 리스트 */
.article-content ol {
    list-style-type: decimal;
}

/* 로마 숫자 리스트 */
.article-content ol.roman-list {
    list-style-type: upper-roman;
}

/* 알파벳 리스트 */
.article-content ol.alpha-list {
    list-style-type: lower-alpha;
}

/* 불릿 포인트 변경 */
.article-content ul {
    list-style-type: disc;
}

.article-content ul.circle-list {
    list-style-type: circle;
}

.article-content ul.square-list {
    list-style-type: square;
}

.article-content a {
    color: #667eea;
    text-decoration: underline;
}

.article-content a:hover {
    color: #764ba2;
}

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

.article-content table th,
.article-content table td {
    border: 1px solid #e0e0e0;
    padding: 12px;
    text-align: left;
}

.article-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.article-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background-color: #000000;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-back:hover {
    background-color: #333333;
}

/* Responsive */
@media (max-width: 768px) {

    .policy-section,
    .policy-detail-section {
        padding: 30px 16px;
    }

    .policy-title {
        font-size: 32px;
    }

    .policy-category-name {
        font-size: 28px;
    }

    .policy-table {
        font-size: 14px;
    }

    .policy-table thead th,
    .policy-table tbody td {
        padding: 12px 8px;
    }

    .policy-table thead th.col-number,
    .policy-table tbody td.col-number {
        width: 60px;
    }

    .policy-table thead th.col-date,
    .policy-table tbody td.col-date {
        width: 100px;
        font-size: 13px;
    }

    .policy-article {
        padding: 24px;
    }

    .article-title {
        font-size: 24px;
    }

    .article-meta {
        flex-direction: column;
        gap: 12px;
        font-size: 13px;
    }

    .article-content {
        font-size: 15px;
    }

    .btn-back {
        padding: 10px 24px;
        font-size: 15px;
    }
}

.policy-category {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.policy-category ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.policy-category ul a {
    display: block;
    padding: 12px 24px;
    background: #efefef;
    border-radius: 60px;
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}