/* 폰트 */
@import url('https://un-static-qa.conects.com/un_static/css/common/font.css');

/* @ css 변수 */
:root{
    --font-no: 'Noto Sans KR', sans-serif;
    --font-su: 'SUIT', sans-serif;
    --font-pr: 'Pretendard', sans-serif;
    
    --white: #fff;
    --black: #000;
    
    --gray-100: #121212;
    --gray-80: #363D48;
    --gray-70: #5C6675;
    --gray-60: #7E8B9A;
    --gray-50: #A4B1C1;
    --gray-40: #C2CAD6;
    --gray-30: #E0E3EB;
    --gray-20: #EDEDF3;
    --gray-10: #F6F6F9;
    --gray-5: #FAFAFC;
    --gray-0: #ffffff;
    
    --bg-primary: #fff;
    --bg-inactive: var(--gray-40);
    --bg-secondary: var(--gray-10);
    --bg-tertiary: var(--gray-20);
    --bg-inverse: var(--gray-100);
    --bg-alternative: var(--gray-5);
    --bg-backdrop: rgba(0, 0, 0, 0.40);
    
    --icon-primary: #7b8a9d;
    --icon-secondary: var(--gray-80);
    --icon-disabled: var(--gray-30); 
    
    --surface-hover: rgba(0, 0, 0, .04);
    --surface-inactive: var(--gray-40);
    
    --brand-primary: #0eba5c;
    --brand-primary-10: #D5F6D6;
    --brand-primary-5: #EAFAEB;
    --brand-secondary: #1FBAFF;
    --brand-secondary-5: #E6E5FF;
    --brand-secondary-10: #CCEFFF;
    --brand-inverse: #0cef67;

    --text-primary: var(--gray-100);
	--text-secondary: var(--gray-70);

    --text-inverse: #fff;
    --text-inactive: #A3B1C2;
    --text-brand: #09af4b;
    --text-negative: #ff4542;

    --stroke-accent: var(--gray-70);
    --stroke-border: var(--gray-30);
    --stroke-divider: var(--gray-20);

    --etc-red-10: #FDE7E7;
    --etc-blue-10: #e7effd;
    --etc-blue-70: #025af6;
    --etc-gradient: linear-gradient(90deg, #2EEA83 -13.29%, #00ECD9 50.75%, #036BFB 117.38%);
    --etc-premium: #6101d9;
}
/* //@ css 변수 */

/* 공통 hover 효과 */
.sp__paging .paging__box a:not(.active):hover::before,
[class*=sp__select--box]:hover::before,
[class*=sp__dropdown--icon]:hover::before,
[class*=sp__dropdown--btn]:hover::before,
[class*=sp__btn--]:hover::before{content: ""; background: rgba(0, 0, 0, .04); position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}

/* @ LEVEL */
[class*=sp__level--wrap]{display: flex; align-items: center; gap: 4px;}
[class*=sp__level--wrap] > span{flex-shrink: 0;}
[class*=sp__level--wrap]::after{display: none;}
[class*=sp__level]:not([class*=--wrap]){display: flex; justify-content: center; align-items: center; min-width: 12px; min-height: 12px; border-radius: 50px; overflow: hidden; position: relative; overflow: hidden;}
[class*=sp__level][class*=--btn]{cursor: pointer;}
[class*=sp__level][class*=--btn]:hover > span{text-decoration: underline;}
[class*=sp__level][class*=--btn]:hover > span{text-decoration: underline;}
[class*=sp__level][class*=--premium]{background: var(--etc-premium);}
[class*=sp__level][class*=--premium]::after{background: #fff; -webkit-mask-image: url('https://un-static-qa.conects.com/gongsoop/img/icon/icon_premium.svg'); mask-image: url('https://un-static-qa.conects.com/gongsoop/img/icon/icon_premium.svg'); width: 6px; height: auto; flex-shrink: 0;}
[class*=sp__level][class*=--admin]::after{background: var(--brand-primary);}
[class*=sp__level][class*=--img]{font-size: 0; line-height: 0; flex-shrink: 0;}
[class*=sp__level][class*=--img]::after{display: none;}
[class*=sp__level][class*=--img] > img{width: 12px; height: 12px;}
/* // @ LEVEL */

/* @ TEXT */
[class*=sp__typo--]{font-family: var(--font-pr); color: var(--text-primary);}
[class*=sp__typo][class*=--normal]{line-height: normal !important;}
[class*=sp__typo--heading]{font-weight: 700;}
[class*=sp__typo--heading30]{font-size: 30px !important; line-height: 34px; letter-spacing: -0.3px;}
[class*=sp__typo--heading24]{font-size: 24px !important; line-height: 34px; letter-spacing: -0.24px;}
[class*=sp__typo--heading22]{font-size: 22px !important; line-height: 29.48px; letter-spacing: 0;}
[class*=sp__typo--heading20]{font-size: 20px !important; line-height: 28.6px; letter-spacing: 0;}
[class*=sp__typo--heading18]{font-size: 18px !important; line-height: 25.74px;; letter-spacing: 0;}
[class*=sp__typo--heading16]{font-size: 16px !important; line-height: 22.88px; letter-spacing: 0;}
[class*=sp__typo--heading14]{font-size: 14px !important; line-height: 19.6px; letter-spacing: -0.14px;}
[class*=sp__typo--heading13]{font-size: 13px !important; line-height: 18.2px; letter-spacing: -0.13px;}
[class*=sp__typo--heading12]{font-size: 12px !important; line-height: 17.16px; letter-spacing: -0.12px;}
[class*=sp__typo--heading11]{font-size: 11px !important; line-height: 15.73px; letter-spacing: -0.11px;}

[class*=sp__typo--title]{font-weight: 600;}
[class*=sp__typo--title16]{font-size: 16px !important; line-height: 24px; letter-spacing: -0.16px;}
[class*=sp__typo--title15]{font-size: 15px !important; line-height: 21px; letter-spacing: -0.15px;}
[class*=sp__typo--title14]{font-size: 14px !important; line-height: 19.6px; letter-spacing: -0.14px;}
[class*=sp__typo--title13]{font-size: 13px !important; line-height: 18.2px; letter-spacing: -0.13px;}
[class*=sp__typo--title12]{font-size: 12px !important; line-height: 17.16px; letter-spacing: -0.12px;}
[class*=sp__typo--title11]{font-size: 11px !important; line-height: 17px; letter-spacing: -0.11px;}

[class*=sp__typo--subtitle]{font-weight: 500;}
[class*=sp__typo--subtitle15]{font-size: 15px !important; line-height: 21px; letter-spacing: -0.15px;}
[class*=sp__typo--subtitle14]{font-size: 14px !important; line-height: 19.6px; letter-spacing: -0.14px;}
[class*=sp__typo--subtitle13]{font-size: 13px !important; line-height: 18.2px; letter-spacing: -0.13px;}
[class*=sp__typo--subtitle12]{font-size: 12px !important; line-height: 17.16px; letter-spacing: -0.12px;}
[class*=sp__typo--subtitle11]{font-size: 11px !important; line-height: 17px; letter-spacing: -0.11px;}

[class*=sp__typo--body]{font-weight: 400;}
[class*=sp__typo--body17]{font-size: 17px !important; line-height: 27px; letter-spacing: -0.34px;}
[class*=sp__typo--body16]{font-size: 16px !important; line-height: 22.4px; letter-spacing: -0.16px;}
[class*=sp__typo--body15]{font-size: 15px !important; line-height: 23px; letter-spacing: -0.3px;}
[class*=sp__typo--body14]{font-size: 14px !important; line-height: 19.6px; letter-spacing: -0.14px;}
[class*=sp__typo--body13]{font-size: 13px !important; line-height: 18.59px; letter-spacing: -0.13px;}
[class*=sp__typo--body12]{font-size: 12px !important; line-height: 17.16px; letter-spacing: -0.12px;}
[class*=sp__typo--body11]{font-size: 11px !important; line-height: 15.73px; letter-spacing: -0.11px;}

[class*=sp__typo--caption]{font-weight: 700;}
[class*=sp__typo--caption12]{font-size: 12px !important; line-height: 17.16px; letter-spacing: -0.12px;}
[class*=sp__typo--caption11]{font-size: 11px !important; line-height: 15.73px; letter-spacing: -0.11px;}

.sp__text--gradient{background: var(--sp-special); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
/* // @ TEXT */

/* paging */
.sp__paging .paging__wrap{text-align: center; margin: 0; padding: 0}
.sp__paging .paging__box{display: flex; justify-content: center; align-items: center; gap: 8px;}
.sp__paging .paging__box :is(a, span){display: flex; justify-content: center; align-items: center; color: var(--text-secondary, #5C6675); min-width: 24px; height: 24px; font-size: 13px; border-radius: var(--border-radius-m, 8px); position: relative; overflow: hidden; padding: 0 9px;}
.sp__paging .paging__box a:has([class*=sp__ico--]){background: var(--bg-alternative); padding: 0;}
.sp__paging .paging__box a:has([class*=sp__ico--]) i::after{width: 12px; height: 24px;}
/* .sp__paging .paging__box a:not(:has([class*=sp__ico--])):hover{background: var(--bg-alternative);} */
.sp__paging .paging__box a.active:not(:has([class*=sp__ico--])){background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600;}
.sp__paging .paging__box a.active:has([class*=sp__ico--]),
.sp__paging .paging__box a [class*=sp__ico--]{display: block; width: 100%; height: 100%;}
.sp__paging .paging__box a [class*=sp__ico--]::after{background-color: var(--gray-70, #5C6675);}

/* label */
[class*=sp__label]{display: inline-flex; align-items: center; flex-shrink: 0; gap: 1px; height: 21px; padding: 0 4px; border-radius: var(--border-radius-s, 4px); font-family: var(--font-pr); letter-spacing: -0.11px;}
[class*=sp__label] i{width: 13px; height: 13px;}
[class*=sp__label]{background: var(--icon-primary); color: #fff;}
[class*=sp__label] i::after{background: #fff;}
[class*=sp__label][class*=--primary]{background: var(--brand-primary-10); color: var(--text-brand);}
[class*=sp__label][class*=--primary] i::after{background: var(--text-brand);}
[class*=sp__label][class*=--tertiary]{background: var(--bg-tertiary); color: var(--text-secondary)}
[class*=sp__label][class*=--tertiary]i::after{background: var(--text-secondary)}
[class*=sp__label][class*=--brand]{background: var(--brand-primary); color: #fff;}
[class*=sp__label][class*=--brand] i::after{background: var(--text-brand);}
[class*=sp__label][class*=--blue]{background: var(--brand-secondary-10); color: var(--brand-secondary);}
[class*=sp__label][class*=--brand2]{background: var(--brand-primary-10, #D5F6D6); color: var(--brand-primary, #0EBA5C);}
[class*=sp__label][class*=--brand2] i::after{background: var(--brand-primary);}
[class*=sp__label][class*=--inverse]{background: var(--bg-inverse); color: #fff;}
[class*=sp__label][class*=--bg]{background: var(--text-brand); color: #fff;}
[class*=sp__label][class*=--bg] i::after{background: #fff;}
[class*=sp__label][class*=--full]{width: 100%; justify-content: center; text-align: center;}
[class*=sp__label][class*=--small]{height: 16px !important; padding: 0 3px;}
[class*=sp__label][class*=--large]{height: 21px !important; padding: 0 4px;}

/* table */
[class*=sp__table] * {font-family: 'Pretendard', sans-serif;box-sizing: border-box;}
[class*=sp__table] .w-70{width: 70px;}
[class*=sp__table] .w-160{width: 70px;}
[class*=sp__table] .center{text-align: center;}
[class*=sp__table] .shrink{flex-shrink: 0;}
[class*=sp__table] table{table-layout: fixed; width: 100%;}
[class*=sp__table] table [class*=sp__typo]{line-height: normal !important;}
[class*=sp__table] table tr th{color: var(--text-secondary); font-size: 13px; font-weight: 400;}
[class*=sp__table] table thead > tr > th{padding: 11px 0; text-align: center; line-height: 18.2px; font-weight: 500;}
[class*=sp__table] table tbody > tr > :is(th, td){border-bottom: 1px solid var(--stroke-divider); padding: 13.5px 8px;}
[class*=sp__table] table tbody > tr.highlight > :is(th, td){padding: 0 8px; height: 44px;}
[class*=sp__table] table tbody > tr > td a > i{width: 16px; height: 16px; flex-shrink: 0;}
[class*=sp__table] table tbody > tr > td a > i::after{background: var(--text-secondary); width: 100%; height: 100%;}
[class*=sp__table] table tbody > tr > td a > .table_txt{flex-shrink: 0; line-height: 11px;}
[class*=sp__table] table tbody > tr > td:has(.table__link){padding-right: 24px;}
[class*=sp__table] table:has(.sp__table--colgroup) colgroup:not(.sp__table--colgroup){display: none;}

/* 게시판 테이블 헤더 */
.sp__table--header{display: flex; align-items: center; height: 52px;}
.sp__table--header > div{display: flex; align-items: center; gap: 6px;}
.sp__table--header .table__header--left .sp__select--box{width: 120px;}
.sp__table--header .table__header--right{margin-left: auto;}
.sp__table--header .table__header--title{display: flex; align-items: center; gap: 4px;}

/* 이벤트 헤더 */
.sp__event--list .sp__table--header{height: auto; padding-bottom: 16px;}

/* 게시판형 테이블 */
.sp__table--list table thead tr > :is(th, td){background: var(--bg-alternative); border-bottom: 1px solid var(--stroke-divider)}
.sp__table--list table tbody tr > td a{display: flex; align-items: center; gap: 3px;}
.sp__table--list table tbody tr > td a [class*='sp__label'] {margin-right: 6px;} 

/* 리스트형 테이블 */
.sp__table--board table:has(thead){border-top: 1px solid var(--stroke-accent);}
.sp__table--board table thead > tr > :is(th, td){border-bottom: 1px solid var(--stroke-divider);}
.sp__table--board table tbody > tr > td a{display: flex; align-items: center;}
.sp__table--board table tbody > tr > td a:hover:not(.no__link) > p{text-decoration: underline; text-underline-position: auto;}
.sp__table--board table tbody > tr > td a.no__link{cursor: text; user-select: text;}
.sp__table--board table tbody > tr.highlight > :is(th, td){background: var(--bg-alternative);}
.sp__table--board table tbody > tr.highlight > th{padding: 11px 8px;}
.sp__table--board table tbody > tr > td .table__type:not([class*=sp__label]){padding-right: 8px;}
.sp__table--board table tbody > tr > td .table__link i.sp__ico--new{margin-left: 4px;}
.sp__table--board table tbody > tr > td .table__link .comment__count{margin-left: 4px;}
.sp__table--board table tbody > tr > td [class*=sp__level--wrap] > span{flex: 0 auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.sp__table--board table tbody > tr > td [class*=sp__level--wrap] > .sp__level--img{flex-shrink: 0;}

/* 카드형 리스트 */
.sp__table--card{display: flex; flex-wrap: wrap; gap: 16px 12px;}
.sp__table--card .card__item{display: block; width: 302px;}
.sp__table--card .card__item .item__thumb{background: var(--bg-secondary); overflow: hidden; aspect-ratio: 302 / 142; border-radius: 8px; width: 100%; height: 142px;}
.sp__table--card .card__item .item__thumb img{object-fit: cover; object-position: center center; width: 100%; height: 100%; max-width: none;}
.sp__table--card .card__item .item__info{display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; font-family: 'Pretendard', sans-serif;}
.sp__table--card .card__item .item__info > strong{display: block; width: 100%; height: 42px; color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 19.6px; letter-spacing: -0.14px;}
.sp__table--card .card__item .item__info > p{display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; letter-spacing: -0.13px;}
.sp__table--card .card__item .item__info > p > span{font-weight: 400;}
.sp__table--card .card__item .item__info > p > span:first-child{font-weight: 600;}

/* 게시판 테이블 푸터 */
.sp__table--footer{display: flex; flex-direction: column; gap: 20px;}
.sp__table--footer .footer__col{display: flex; justify-content: center; align-items: center; position: relative; height: 64px;}
.sp__table--footer .footer__btns{display: flex; align-items: center; gap: 4px; position: absolute; right: 0; top: 0; height: 100%; width: auto;}
.sp__table--footer .footer__btns a{width: 66px;}
.sp__table--footer .footer__search{display: flex; justify-content: center; gap: 8px;}
.sp__table--footer .footer__search .sp__select--box{width: 80px;}