/* 기본 레이아웃 */
#content .inner{padding: 0 16.66%;}
section .main_title{letter-spacing: -0.02em; line-height: 56px; margin-bottom: 20px;}
section .main_title.on{display: none;}
section .sub_text{grid-column: 1; letter-spacing: -0.02em;}

/* 상단 타이틀 */
.top_title{display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 0;}
.top_title h3{font-size: 46px; line-height: 1.2; letter-spacing: -0.02em; color: #29203B;}

/* 검색 폼 */
.top_title form{grid-column: 2; grid-row: 1/2; align-self: center; display: grid; grid-template-columns: 1fr .2fr; column-gap: 12px;}
.top_title form div{display: flex; justify-content: space-between; align-items: center; padding: 9px 3%; box-sizing: border-box; border: 1px solid #DFDFDF; border-radius: 100px;}
.top_title form input{border: none;}
.top_title form .search{width: calc(100% - 40px); font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #242424;}
.top_title form .search_btn1{display: block; width: 24px; height: 24px; background: url(../images/sub06_02_btn_search.png) center no-repeat; background-size: contain; text-indent: -9999px; overflow: hidden; font-size: 0; cursor: pointer;}
.top_title form .search_btn2{display: block; padding: 11px 30px; border-radius: 12px; background: #8556E3; font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #fff; cursor: pointer;}

/* 칼럼 탭 버튼 */
.tab_section{margin-top: 43px;}
.tab_section .tab_buttons{display: flex; gap: 16px;}
.tab_section .tab_button{display: block; min-width: 255px; padding: .5em 1.6em; box-sizing: border-box; border: 1px solid #E5DAFF; border-radius: 8px; background: #F8F4FF; font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: clamp(14px, 1.6vw, 24px); letter-spacing: -0.02em; color: #7435FF; cursor: pointer; transition: background .2s, color .2s, border-color .2s;}
.tab_section .tab_button.active{background: #7435FF; border-color: #7435FF; color: #fff;}

/* 카테고리 탭 */
.tab_section .tab_area ul{display: flex; justify-content: flex-end; gap: 40px;}
.tab_section .tab_area a{display: inline-block; padding: 20px 0; font-weight: 700; font-size: clamp(13px, 1.5vw, 20px); line-height: 1.2; color: #2E1566;}
.tab_section .tab_area a.on{color: #7435FF;}

/* 게시글 목록 */
.list_box{position: relative; margin-top: 12px;}
.list_box .list_title{display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(46, 21, 102, 0.15); border-bottom: 1px solid rgba(46, 21, 102, 0.15);}
.list_box .list_title li{padding: 22px 20px; box-sizing: border-box; font-weight: 500; font-size: 20px; line-height: 1.5; color: #2E1566;}
.list_box .list_title li:nth-child(1){width: 75%; padding-right: 0;}
.list_box .list_content .list_item{display: flex; align-items: center; border-bottom: 1px solid rgba(46, 21, 102, 0.15);}
.list_box .list_content .list_item li{padding: 0 20px; box-sizing: border-box; color: #2E1566;}
.list_box .list_content .list_item li:nth-child(1){width: 75%; padding-right: 0; font-weight: 500; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #8556E3;}
.list_box .list_content .list_item li:nth-child(1) a{display: block; padding: 22px 0; font-weight: 300; font-size: 20px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list_box .list_content .list_item li:nth-child(2){width: 25%; padding-left: 0; text-align: right; font-weight: 250; font-size: 16px; line-height: 22px;}

/* 게시글 뱃지 */
.list_box .list_content .list_item li a span{display: inline-block; margin-right: 12px; padding: 8px; border-width: 1px; border-style: solid; border-radius: 100px; font-weight: 400; font-size: 16px; line-height: 20px;}
.list_box .list_content .list_item li .badge.event span{border-color: #7435FF; color: #7435FF;}
.list_box .list_content .list_item li .badge.notice span{border-color: #FF3535; color: #FF3535;}

/* 페이지네이션 */
.list_box .pagination_box{position: relative; margin-top: 100px; text-align: center;}
.list_box .pagination_box span{display: inline-block; width: 44px; height: 44px; vertical-align: middle; font-family: 'Inter'; font-weight: 300; font-size: 28px; line-height: 44px;}
.list_box .pagination_box span a{display: block;}
.list_box .pagination_box .pagination a{display: block; width: 100%; height: 100%;}
.list_box .pagination_box .pagination.on a{border-radius: 50%; background: rgba(220, 204, 255, 0.42); font-weight: 400; font-size: 32px; color: #8556E3;}
.list_box .pagination_box .front, .list_box .pagination_box .prev, .list_box .pagination_box .next, .list_box .pagination_box .end{background-size: contain; background-repeat: no-repeat; background-position: center; text-indent: -9999px; font-size: 0; color: #fff;}
.list_box .pagination_box .front{background-image: url(../images/sub06_02_btn_double_arrow_left.png);}
.list_box .pagination_box .prev{background-image: url(../images/sub06_02_btn_arrow_left.png);}
.list_box .pagination_box .next{background-image: url(../images/sub06_02_btn_arrow_right.png);}
.list_box .pagination_box .end{background-image: url(../images/sub06_02_btn_double_arrow_right.png);}

/* 글쓰기 버튼 */
.list_box .pagination_box button{position: absolute; top: -80px; right: 0; padding: 11px 32px; border: none; border-radius: 8px; background: #8556E3; font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #FFFFFF; white-space: nowrap; cursor: pointer;}

/* 태블릿 (~1024px) */
@media screen and (max-width:1024px) {
    /* 기본 레이아웃 */
    #content .inner{padding: 0 5%;}
    section .main_title{font-size: 28px; line-height: 36px; margin-bottom: 12px;}
    section .main_title i{display: block;}
    section .sub_text{font-size: 13px; word-break: break-all; text-wrap: balance;}

    /* 상단 타이틀 · 검색 폼 */
    .top_title h3{font-size: 28px;}
    .top_title form div{padding: 6px 3%;}
    .top_title form .search{font-size: 16px; line-height: 22px;}
    .top_title form .search_btn2{padding: 8px 20px; border-radius: 8px; font-size: 14px; line-height: 20px;}

    /* 칼럼 탭 버튼 */
    .tab_section{margin-top: 24px;}
    .tab_section .tab_buttons{gap: 8px;}
    .tab_section .tab_button{flex: 1; min-width: 0;}

    /* 게시글 목록 */
    .list_box .list_title li{padding: 16px 20px; font-size: 18px; line-height: 26px;}
    .list_box .list_content .list_item li:nth-child(1) a{padding: 12px 0; font-size: 16px; line-height: 22px;}
    .list_box .list_content .list_item li:nth-child(1) a.badge{font-weight: 500;}
    .list_box .list_content .list_item li:nth-child(2){line-height: 20px;}
    .list_box .list_content .list_item li a span{padding: 6px 12px; font-size: 14px; line-height: 18px;}

    /* 페이지네이션 · 글쓰기 버튼 */
    .list_box .pagination_box{margin-top: 40px;}
    .list_box .pagination_box span{height: 37px; font-size: 20px;}
    .list_box .pagination_box .pagination{width: 37px;}
    .list_box .pagination_box .pagination a{line-height: 37px;}
    .list_box .pagination_box .pagination.on a{font-size: 18px;}
    .list_box .pagination_box button{display: none;}
}

/* 모바일 (~768px) */
@media screen and (max-width:768px) {
    /* 기본 레이아웃 */
    #wrap{min-width: 375px;}
    #content{position: relative;}
    #content .inner{padding-top: 24px;}

    /* 상단 타이틀 · 검색 폼 */
    .top_title{grid-template-columns: 1fr; margin-bottom: 0;}
    .top_title h3, .top_title .sub_text{display: none;}
    .top_title form{grid-column: 1;}

    /* 칼럼 탭 버튼 */
    .tab_section .tab_buttons li{flex: 1;}
    .tab_section .tab_button{width: 100%;}

    /* 게시글 목록 */
    .list_box .list_title li{padding: 16px 8px; font-size: 16px;}
    .list_box .list_content .list_item li{padding: 0 12px;}
    .list_box .list_content .list_item li:nth-child(2){font-size: 14px;}

    /* 페이지네이션 */
    .list_box .pagination_box{margin-top: 28px;}
    .list_box .pagination_box span{width: 30px; height: 30px;}
    .list_box .pagination_box .pagination{width: 30px;}
    .list_box .pagination_box .pagination:nth-child(n+6){display: none;}
    .list_box .pagination_box .pagination a{line-height: 30px;}
    .list_box .pagination_box .pagination.on a{font-size: 18px;}
}