@charset "utf-8";

/* ==========================================
   웹진 목록 페이지 CSS
   /usr/skin/board/photothumb_webzine/css/list.css
   ========================================== */

/* CSS Variables */
:root {
    --main-dark-gray: #262B32;
    --main-gray: #6B7278;
    --main-light-gray: #ADB6BD;
    --main-red: #E54837;
    --main-blue: #005EFF;
}

/* Layout */
#webzine_wrap {
    width: 100%;
}

.sec_container {
    max-width: 1596px;
    width: 100%;
    margin: 0 auto;
}

/* ==========================================
   Fixed Post Content Button
   ========================================== */
#fixedPostContent {
    position: fixed;
    bottom: 65px;
    right: 30px;
    padding: 4px;
    background: #fff;
    border-radius: 99px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
    z-index: 999;
    height: 50px;
    width: 152px;
}

#fixedPostContent .post_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#fixedPostContent .icon_mask {
    width: 42px;
    height: 42px;
    margin-right: 4px;
}

#fixedPostContent h2 {
    font-size: 16px;
    color: var(--main-red);
    line-height: 1;
}

#fixedPostContent .icon {
    width: 18px;
    height: 18px;
    margin-left: 3px;
    margin-right: 6px;
}


/* ==========================================
   Now Section (목록)
   ========================================== */
#now .sec_container {
    padding: 60px 0 80px;
}

#now .sec_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

#now .sec_head .tit {
    display: none;
}

#now .sec_head .tit .now {
    display: flex;
}

/* Tab Menu */
#now .tab-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

#now .tab-menu ul li {
    padding: 0 0 6px;
    line-height: 1.5;
    margin: 0 2px;
    position: relative;
    cursor: pointer;
}

#now .tab-menu ul li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    width: 100%;
    background: var(--main-red);
    opacity: 0;
    transition: 0.5s all;
}

#now .tab-menu ul li p {
    color: var(--main-light-gray);
    font-size: 16px;
    display: inline-block;
    font-weight: 700;
    margin: 0 2px;
}

#now .tab-menu ul li.active p {
    color: var(--main-dark-gray);
}

#now .tab-menu ul li.active::before {
    opacity: 1;
}

/* Search Input */
#now .search_input {
    position: relative;
    width: 465px;
}

#now .search_input input {
    width: 100%;
    height: 42px;
    border-radius: 0;
    padding: 9px 0;
    font-size: 16px;
    outline: none;
    border: none;
    border-bottom: 2px solid var(--main-dark-gray);
    font-weight: 700;
    letter-spacing: -0.04em;
}

#now .search_input input::placeholder {
    color: var(--main-dark-gray);
    font-weight: 700;
}

#now .search_input .search_btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   Webzine Board (게시글 목록)
   ========================================== */
#webzineBoard {
    display: flex;
    flex-wrap: wrap;
    gap: 160px 20px;
}

#webzineBoard .board_cont .cont {
    display: block;
    position: relative;
    text-decoration: none;
}

#webzineBoard .board_cont .cont .badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    text-transform: uppercase;
    margin-left: 0;
}

/* PC 레이아웃 타입 */
#webzineBoard .board_cont.verticalSmall {
    width: 303px;
}

#webzineBoard .board_cont.verticalLarge {
    width: 465px;
}

#webzineBoard .board_cont.horizonSmall {
    width: 303px;
}

#webzineBoard .board_cont.horizonLarge {
    width: 465px;
}

/* Thumbnail */
#webzineBoard .thumnail {
    overflow: hidden;
}

#webzineBoard .thumnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.5s all;
}

#webzineBoard .board_cont .cont:hover .thumnail img {
    transform: scale(1.05);
}

/* 세로형 썸네일 */
#webzineBoard .board_cont.verticalSmall .thumnail {
    width: 303px;
    height: 465px;
}

#webzineBoard .board_cont.verticalLarge .thumnail {
    width: 465px;
    height: 624px;
}

/* 가로형 썸네일 */
#webzineBoard .board_cont.horizonSmall .thumnail {
    width: 303px;
    height: 303px;
}

#webzineBoard .board_cont.horizonLarge .thumnail {
    width: 465px;
    height: 465px;
}

/* Info Area */
#webzineBoard .infoarea .info_tit {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--main-dark-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#webzineBoard .infoarea .cata {
    font-size: 16px;
    line-height: 1.5;
    color: var(--main-red);
    font-weight: 700;
}

#webzineBoard .infoarea .hits {
    display: flex;
    justify-content: center;
    gap: 2px;
    line-height: 1.5;
    display: none;
}

#webzineBoard .heart {
    width: 24px;
    height: 24px;
}

#webzineBoard .hitcount {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-dark-gray);
    display: none;
}

#webzineBoard .infoarea .info_desc h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-dark-gray);
    margin-top: 8px;
    word-break: keep-all;
}

#webzineBoard .infoarea .info_desc p {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-light-gray);
}

#webzineBoard .infoarea .info_desc p br {
    display: none;
}

#webzineBoard .infoarea .info_desc p.date{
    display: none;
}
/* No Data */
#webzineBoard .no_data,
.webzine_board .no_data {
    width: 100%;
    text-align: center;
    padding: 100px 0;
    color: var(--main-gray);
    font-size: 16px;
    list-style: none;
}

/* ==========================================
   List Container (JSP용)
   ========================================== */
#webzine_list {
    max-width: 1596px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px 120px;
}

/* Category Tabs */
.category_tabs {
    margin-bottom: 60px;
}

.category_tabs ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category_tabs ul li a {
    display: block;
    padding: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-light-gray);
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}

.category_tabs ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--main-red);
    opacity: 0;
    transition: opacity 0.3s;
}

.category_tabs ul li a:hover,
.category_tabs ul li a.active {
    color: var(--main-dark-gray);
}

.category_tabs ul li a.active::after {
    opacity: 1;
}

/* Search Area (Admin) */
.search_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.search_area .category_filter select,
.search_area .search_box select {
    padding: 8px 12px;
    border: 1px solid var(--main-light-gray);
    font-size: 14px;
    min-width: 100px;
}

.search_area .search_box {
    display: flex;
    gap: 8px;
}

.search_area .search_box input {
    padding: 8px 12px;
    border: 1px solid var(--main-light-gray);
    font-size: 14px;
    width: 200px;
}

.search_area .search_box button {
    padding: 8px 20px;
    background: var(--main-dark-gray);
    color: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.search_area .search_box button:hover {
    background: var(--main-red);
}

/* Button Area */
.btn_area {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn_area .btn_write {
    display: inline-block;
    padding: 12px 40px;
    background: var(--main-dark-gray);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.3s;
}

.btn_area .btn_write:hover {
    background: var(--main-red);
}

/* Webzine Board (JSP용 클래스) */
.webzine_board {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.webzine_board .board_cont {
    position: relative;
}

.webzine_board .board_cont .cont {
    display: block;
    text-decoration: none;
    position: relative;
}

.webzine_board .board_cont.verticalSmall {
    width: 303px;
}

.webzine_board .board_cont.verticalLarge {
    width: 465px;
}

.webzine_board .board_cont.horizonSmall {
    width: 303px;
}

.webzine_board .board_cont.horizonLarge {
    width: 465px;
}

.webzine_board .thumnail {
    overflow: hidden;
    background: #f5f5f5;
}

.webzine_board .thumnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.webzine_board .board_cont .cont:hover .thumnail img {
    transform: scale(1.05);
}

.webzine_board .board_cont.verticalSmall .thumnail {
    width: 303px;
    height: 465px;
}

.webzine_board .board_cont.verticalLarge .thumnail {
    width: 465px;
    height: 624px;
}

.webzine_board .board_cont.horizonSmall .thumnail {
    width: 303px;
    height: 303px;
}

.webzine_board .board_cont.horizonLarge .thumnail {
    width: 465px;
    height: 465px;
}

.webzine_board .infoarea .info_tit {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--main-dark-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.webzine_board .infoarea .cata {
    font-size: 16px;
    line-height: 1.5;
    color: var(--main-red);
    font-weight: 700;
}

.webzine_board .infoarea .hits {
    display: flex;
    align-items: center;
    gap: 2px;
}

.webzine_board .infoarea .hits .heart {
    width: 24px;
    height: 24px;
}

.webzine_board .infoarea .hits .heart img {
    width: 100%;
    height: 100%;
}

.webzine_board .infoarea .hits .hitcount {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-dark-gray);
}

.webzine_board .infoarea .info_desc h3,
.webzine_board .infoarea .info_desc .info_tt {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-dark-gray);
    margin-top: 8px;
    word-break: keep-all;
    line-height: 1.5;
}

.webzine_board .infoarea .info_desc .date {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-light-gray);
    margin-top: 4px;
}

/* ==========================================
   Pagination
   ========================================== */
.now_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 120px;
}

.now_pagination .arrow {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.now_pagination .arrow svg {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.now_pagination .arrow svg path {
    fill: var(--main-light-gray);
    transition: fill 0.3s ease;
}

.now_pagination .arrow:hover svg path {
    fill: var(--main-dark-gray);
}

.now_pagination .page_numbers {
    display: flex;
    align-items: center;
    gap: 18px;
}

.now_pagination .page_num {
    font-size: 24px;
    font-weight: 700;
    color: var(--main-light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1;
}

.now_pagination .page_num:hover {
    color: var(--main-dark-gray);
}

.now_pagination .page_num.active {
    color: var(--main-dark-gray);
}

/* ==========================================
   CMS Pagination (ptBBS:pageOut 태그 출력용)
   ========================================== */
.now_pagination .pagination_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 처음/이전/다음/끝 버튼 (p 태그) */
.now_pagination .pagination_wrap p {
    margin: 0;
    padding: 0;
}

.now_pagination .pagination_wrap p span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--main-light-gray);
    transition: color 0.3s ease;
}

.now_pagination .pagination_wrap p a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.now_pagination .pagination_wrap p a span {
    color: var(--main-light-gray);
}

.now_pagination .pagination_wrap p a:hover span {
    color: var(--main-dark-gray);
}

/* 화살표 아이콘 (CSS로 생성) */
.now_pagination .prev_first span::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.41 7.41L10 6L4 12L10 18L11.41 16.59L6.83 12L11.41 7.41Z' fill='%23ADB6BD'/%3E%3Cpath d='M18.41 7.41L17 6L11 12L17 18L18.41 16.59L13.83 12L18.41 7.41Z' fill='%23ADB6BD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.now_pagination .prev span::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z' fill='%23ADB6BD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.now_pagination .next span::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z' fill='%23ADB6BD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.now_pagination .next_last span::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.59 7.41L7 6L13 12L7 18L5.59 16.59L10.17 12L5.59 7.41Z' fill='%23ADB6BD'/%3E%3Cpath d='M12.59 7.41L14 6L20 12L14 18L12.59 16.59L17.17 12L12.59 7.41Z' fill='%23ADB6BD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* 호버 시 색상 변경 */
.now_pagination .prev_first a:hover span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.41 7.41L10 6L4 12L10 18L11.41 16.59L6.83 12L11.41 7.41Z' fill='%23262B32'/%3E%3Cpath d='M18.41 7.41L17 6L11 12L17 18L18.41 16.59L13.83 12L18.41 7.41Z' fill='%23262B32'/%3E%3C/svg%3E");
}

.now_pagination .prev a:hover span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z' fill='%23262B32'/%3E%3C/svg%3E");
}

.now_pagination .next a:hover span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z' fill='%23262B32'/%3E%3C/svg%3E");
}

.now_pagination .next_last a:hover span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.59 7.41L7 6L13 12L7 18L5.59 16.59L10.17 12L5.59 7.41Z' fill='%23262B32'/%3E%3Cpath d='M12.59 7.41L14 6L20 12L14 18L12.59 16.59L17.17 12L12.59 7.41Z' fill='%23262B32'/%3E%3C/svg%3E");
}

/* 페이지 번호 목록 (ol) */
.now_pagination .pagination_wrap ol {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.now_pagination .pagination_wrap ol li a {
    font-size: 24px;
    font-weight: 700;
    color: var(--main-light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1;
}

.now_pagination .pagination_wrap ol li a:hover {
    color: var(--main-dark-gray);
}

/* 현재 페이지 */
.now_pagination .pagination_wrap ol li a.on {
    color: var(--main-dark-gray);
}

/* blind 클래스 숨김 */
.now_pagination .blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================
   Responsive - 1640px (12개 레이아웃)
   ========================================== */
@media screen and (max-width: 1640px) {
    .sec_container {
        width: 95%;
    }

    #now .sec_container {
        max-width: 1116px;
    }

    #fixedPostContent {
        display: none;
    }
}

/* ==========================================
   Responsive - 1135px (8개 레이아웃, 모바일 타입)
   ========================================== */
@media screen and (max-width: 1135px) {
    #webzineBoard .board_cont {
        width: calc(50% - 10px) !important;
    }

    #webzineBoard .board_cont .thumnail {
        width: 100% !important;
        height: auto !important;
    }

    /* Mobile Type 1: 1 / 1.536 비율 */
    #webzineBoard .board_cont.mobileType1 .thumnail {
        aspect-ratio: 1 / 1.536;
    }

    /* Mobile Type 2: 1 / 1.329 비율 */
    #webzineBoard .board_cont.mobileType2 .thumnail {
        aspect-ratio: 1 / 1.329;
    }

    /* Mobile Type 3: 1 / 1 비율 */
    #webzineBoard .board_cont.mobileType3 .thumnail {
        aspect-ratio: 1 / 1;
    }
}

/* ==========================================
   Responsive - 1080px
   ========================================== */
@media screen and (max-width: 1080px) {
    #now .sec_container {
        padding: 60px 0;
    }

    #now .sec_head {
        display: block;
    }

    #now .sec_head .tit {
        display: block;
        margin: 0 auto;
        margin-bottom: 30px;
        width: 69.897%;
        max-width: 320px;
    }

    #now .search_input {
        display: none;
    }

    .now_pagination {
        margin-top: 60px;
    }

    .now_pagination .page_num {
        font-size: 16px;
        display: block;
        padding: 4px 8px;
    }
}