/* /resource/www/css/sub.css */

/* =========================================
   Global Sub-page Layout & Components
   ========================================= */

/* Removed: .container, .full-width-box, background utilities, padding utilities, margin utilities - Moved to layout.css and component.css */

/******************** pagination (IEUM Premium Standard) ********************/
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
    width: 100%;
}

.pagination-wrap a, 
.pagination-wrap strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 4px;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    color: #757575;
    background-color: transparent;
    border: none;
    transition: all 0.2s ease-in-out;
}

/* Active State (Current Page) */
.pagination-wrap strong {
    background-color: #000 !important;
    color: #fff !important;
    font-weight: 700;
}

/* Hover State */
.pagination-wrap a:hover {
    color: #000;
    background-color: #F0F0F0;
}

/* Arrow buttons */
.pagination-wrap a.paging-btn {
    width: 38px;
    padding: 0;
}

.pagination-wrap .paging-btn::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.pagination-wrap a.paging-btn:hover::before {
    opacity: 1;
}

/* SVG Icons (Black Style) */
.pagination-wrap .paging-btn.first::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E"); 
}
.pagination-wrap .paging-btn.prev { margin-right: 15px; }
.pagination-wrap .paging-btn.prev::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); 
}
.pagination-wrap .paging-btn.next { margin-left: 15px; }
.pagination-wrap .paging-btn.next::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); 
}
.pagination-wrap .paging-btn.last::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E"); 
}

/* Hidden text for accessibility */
.pagination-wrap .hide { 
    overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); 
}

/* Mobile responsive */
@media only screen and (max-width: 767px) {
    .pagination-wrap { gap: 4px; margin-top: 40px; }
    .pagination-wrap a, 
    .pagination-wrap strong {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .pagination-wrap .paging-btn.prev { margin-right: 5px; }
    .pagination-wrap .paging-btn.next { margin-left: 5px; }
}

/* Styles extracted from nav.jsp */
/* Sub Header Styles (Scoped) */
.sub-header-wrap {
    padding: 40px 0 0;
    background-color: #fff;
}
.sub-header-wrap .inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Label */
.top-label {
    font-size: 18px;
    font-weight: 500;
    color: #442c93; /* Purple */
    margin-bottom: 12px;
}

/* Header Main Row */
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 25px;
}

/* Clean up for Simple Types */
.layout-type2 .header-main,
.layout-type3 .header-main {
    border-bottom: none; /* or keep consistent */
}

/* Main Title */
.page-tit {
    font-size: 42px; /* Large */
    font-weight: 700; /* Bold */
    color: #000;
    margin: 0;
    line-height: 1.2;
}

/* Breadcrumb */
.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-list > li {
    position: relative;
    padding-left: 10px;
    margin-left: 10px;
}
.breadcrumb-list > li:first-child {
    padding-left: 0;
    margin-left: 0;
}
.breadcrumb-list > li:not(:first-child)::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: url('/resource/www/images/common/zum.png') no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Breadcrumb Dropdowns (Screen Switch Buttons) */
.depth-select {
    position: relative;
}
.btn-depth {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #000;
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
}
.btn-depth::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
}
.btn-depth.current {
    color: #442c93;
    font-weight: 700;
}
.depth-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; 
    left: 0; 
    min-width: 160px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 4px;
    padding: 8px 0;
}
.depth-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.depth-list li a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}
.depth-list li a:hover,
.depth-list li.active a {
    color: #442c93;
    background: #f5f3ff;
    font-weight: 600;
}

/* Common Tab Navigation (2nd Depth) */
.art-tab-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.art-tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0 50px 50px 50px;
}

.art-tab-item.active {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 17px 26px 16px 27px;
    background-color: #000;
    color: #fff !important;
    border: none;
}

.art-tab-item.default {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 16px 25px 17px;
    border: solid 1px #d0d0d0;
    background-color: #fff;
    color: #000 !important;
}

.art-tab-item:hover {
    opacity: 0.8;
}

/* Functional Area */
.header-func-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1440px) {
    /* Large Left Margin removal or adjustment if needed */
}


/* Responsive */
@media (max-width: 1024px) {
    .header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .page-tit {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .sub-header-wrap {
        padding: 20px 0 0;
    }
    .header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 15px;
    }
    .page-tit {
        font-size: 26px; /* 서브 타이틀 폰트 크기 모바일에 맞게 축소 */
    }
    .breadcrumb-wrap {
        display: none; /* 모바일에서 경로(브레드크럼) 숨김 처리 */
    }
    .art-tab-group {
        gap: 8px; /* 탭 간격 축소 */
    }
    .art-tab-item {
        height: 40px;
        font-size: 14px;
        border-radius: 0 50px 50px 50px;
    }
    .art-tab-item.active {
        padding: 10px 18px;
        margin-bottom: 20px;
    }
    .art-tab-item.default {
        padding: 9px 17px;
        margin-bottom: 20px;
    }
}

/* =========================================
   High Contrast Mode (Sub Header)
   ========================================= */
body.high-contrast .sub-header-wrap {
    background-color: #000 !important;
    border-bottom: 1px solid #fff;
}

body.high-contrast .top-label {
    color: #ffff00 !important; /* Yellow for 강조 */
}

body.high-contrast .page-tit {
    color: #fff !important;
}

body.high-contrast .btn-depth {
    color: #fff !important;
}

body.high-contrast .btn-depth.current {
    color: #ffff00 !important;
}

body.high-contrast .breadcrumb-list > li:not(:first-child)::before {
    background-color: #fff;
    mask-image: url('/resource/www/images/common/zum.png');
    -webkit-mask-image: url('/resource/www/images/common/zum.png');
    mask-size: contain;
    mask-repeat: no-repeat;
}

body.high-contrast .home a img {
    filter: brightness(0) invert(1);
}

body.high-contrast .depth-list {
    background-color: #000 !important;
    border: 1px solid #fff !important;
}

body.high-contrast .depth-list li a {
    color: #ccc !important;
}

body.high-contrast .depth-list li a:hover,
body.high-contrast .depth-list li.active a {
    color: #fff !important;
    background-color: #333 !important;
}

body.high-contrast .art-tab-item.default {
    background-color: #000 !important;
    border-color: #fff !important;
    color: #fff !important;
}

body.high-contrast .art-tab-item.active {
    background-color: #ffff00 !important;
    color: #000 !important;
}

/* Styles extracted from nav.jsp */
/* Sub Header Styles (Scoped) */
.sub-header-wrap {
    padding: 40px 0 0;
    background-color: #fff;
}
.sub-header-wrap .inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Label */
.top-label {
    font-size: 18px;
    font-weight: 500;
    color: #442c93; /* Purple */
    margin-bottom: 12px;
}

/* Header Main Row */
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 25px;
}

/* Clean up for Simple Types */
.layout-type2 .header-main,
.layout-type3 .header-main {
    border-bottom: none; /* or keep consistent */
}

/* Main Title */
.page-tit {
    font-size: 42px; /* Large */
    font-weight: 700; /* Bold */
    color: #000;
    margin: 0;
    line-height: 1.2;
}

/* Breadcrumb */
.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-list > li {
    position: relative;
    padding-left: 10px;
    margin-left: 10px;
}
.breadcrumb-list > li:first-child {
    padding-left: 0;
    margin-left: 0;
}
.breadcrumb-list > li:not(:first-child)::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: url('/resource/www/images/common/zum.png') no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Breadcrumb Dropdowns (Screen Switch Buttons) */
.depth-select {
    position: relative;
}
.btn-depth {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #000;
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
}
.btn-depth::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
}
.btn-depth.current {
    color: #442c93;
    font-weight: 700;
}
.depth-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; 
    left: 0; 
    min-width: 160px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 4px;
    padding: 8px 0;
}
.depth-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.depth-list li a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}
.depth-list li a:hover,
.depth-list li.active a {
    color: #442c93;
    background: #f5f3ff;
    font-weight: 600;
}

/* Common Tab Navigation (2nd Depth) */
.art-tab-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.art-tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0 50px 50px 50px;
}

.art-tab-item.active {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 17px 26px 16px 27px;
    background-color: #000;
    color: #fff !important;
    border: none;
}

.art-tab-item.default {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 16px 25px 17px;
    border: solid 1px #d0d0d0;
    background-color: #fff;
    color: #000 !important;
}

.art-tab-item:hover {
    opacity: 0.8;
}

/* Functional Area */
.header-func-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1440px) {
    /* Large Left Margin removal or adjustment if needed */
}


/* Responsive */
@media (max-width: 1024px) {
    .header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .page-tit {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .sub-header-wrap {
        padding: 20px 0 0;
    }
    .header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 15px;
    }
    .page-tit {
        font-size: 26px; /* 서브 타이틀 폰트 크기 모바일에 맞게 축소 */
    }
    .breadcrumb-wrap {
        display: none; /* 모바일에서 경로(브레드크럼) 숨김 처리 */
    }
    .art-tab-group {
        gap: 8px; /* 탭 간격 축소 */
    }
    .art-tab-item {
        height: 40px;
        font-size: 14px;
        border-radius: 0 50px 50px 50px;
    }
    .art-tab-item.active {
        padding: 10px 18px;
        margin-bottom: 20px;
    }
    .art-tab-item.default {
        padding: 9px 17px;
        margin-bottom: 20px;
    }
}

/* =========================================
   High Contrast Mode (Sub Header)
   ========================================= */
body.high-contrast .sub-header-wrap {
    background-color: #000 !important;
    border-bottom: 1px solid #fff;
}

body.high-contrast .top-label {
    color: #ffff00 !important; /* Yellow for 강조 */
}

body.high-contrast .page-tit {
    color: #fff !important;
}

body.high-contrast .btn-depth {
    color: #fff !important;
}

body.high-contrast .btn-depth.current {
    color: #ffff00 !important;
}

body.high-contrast .breadcrumb-list > li:not(:first-child)::before {
    background-color: #fff;
    mask-image: url('/resource/www/images/common/zum.png');
    -webkit-mask-image: url('/resource/www/images/common/zum.png');
    mask-size: contain;
    mask-repeat: no-repeat;
}

body.high-contrast .home a img {
    filter: brightness(0) invert(1);
}

body.high-contrast .depth-list {
    background-color: #000 !important;
    border: 1px solid #fff !important;
}

body.high-contrast .depth-list li a {
    color: #ccc !important;
}

body.high-contrast .depth-list li a:hover,
body.high-contrast .depth-list li.active a {
    color: #fff !important;
    background-color: #333 !important;
}

body.high-contrast .art-tab-item.default {
    background-color: #000 !important;
    border-color: #fff !important;
    color: #fff !important;
}

body.high-contrast .art-tab-item.active {
    background-color: #ffff00 !important;
    color: #000 !important;
}