@charset "UTF-8";
@import url('reset.css');
@import url('fonts.css');

/* common *****************************************************************************************************************************************************************************/
.inner {padding:0 2rem;}

/* header */
header { background: linear-gradient(90deg, #e8e3f4 0%, #faf0f6 100%);}
header .header_box {border-bottom:1px solid #e4dde0; background: linear-gradient(90deg, #e8e3f4 0%, #faf0f6 100%);}
header .header_box .inner {display:flex; align-items:center; justify-content:space-between; height:65px;}
header .header_box .logo_box {border-radius:50px; overflow:hidden;}
header .header_box .logo_box .img_logo {display:block;}
header .header_box .util_box {display:flex; align-items:center;}
header .header_box .util_box span {font-size:16px; font-weight:600;}
header .header_box .util_box span.name {display:flex; align-items:center;}
header .header_box .util_box span.name::before {content:""; margin-right:10px; width:24px; height:24px; background:url("../img/common/ico_user.png") no-repeat 0 0;}
header .header_box .util_box span.name::after {content:""; margin:0 15px; width:1px; height:14px; background-color:#d9c9d0;}
header .menu_box {border-bottom:1px solid #f1f0f5; background-color:#fafafc;}
header .menu_box .inner {display:flex; align-items:center;}
header .menu_box .inner li {position:relative; display:flex; align-items:center; justify-content:center; width:100px; height:45px;}
header .menu_box .inner li.active a {position:relative;}
header .menu_box .inner li.active a::after {content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background-color:#010045;}
header .menu_box .inner li a {display:inline-flex; align-items:center; gap:5px; font-size:15px; color:#7d7d7d; font-weight:600;}
header .menu_box .inner li a::before {content:""; width:16px; height:16px; background:url("../img/common/ico_menu.png") no-repeat 0 0;}
header .menu_box .inner li a.ico1::before {background-position:-16px 0;}
header .menu_box .inner li a.ico2::before {background-position:-16px -16px;}
header .menu_box .inner li.active a {color:#000046; font-weight:700;}
header .menu_box .inner li.active a.ico1::before {background-position:0 0;}
header .menu_box .inner li.active a.ico2::before {background-position:0 -16px;}


.container {padding:2rem; text-align:left;}
.tit_caption {display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; font-size:22px; font-weight:700; color:#000046;}
.data_search_box {display:inline-flex; align-items:center; gap:.5rem;}
.data_search_box .date_box {display:flex; align-items:center; padding:0 0 0 1rem; border:1px solid #aaaaaa; border-radius:5px;}
.data_search_box .date_box span {color:#555; font-weight:600;}
.data_search_box .date_box input {padding:0 3rem 0 0; width:130px; border:0; color:#000; font-weight:600; background:url("../img/common/ico_date.gif") no-repeat right 0; cursor:pointer;}

.panel_box {display:grid; gap:23px;}
/* 좌측 트랙 940px = 테이블 폭 (11열: 고정 745 + 컨텐츠명 195)
   Grid 모드: 테이블이 940에 정확히 fit → overflow 없음, 스크롤바 없음
   Stack 모드에서 고정 cols 압축 방지는 media.css에서 별도 처리
   minmax(0, 1fr): 우측 트랙이 내부 min-content에 끌려 확장되는 것 방지 */
.panel_box.tow {grid-template-columns:940px minmax(0, 1fr);}
.panel_box .part {min-width:0; padding:10px; border:1px solid #ddd; border-radius:10px; background-color:#fafafa;}
.panel_box .part.lt {flex:1;}
.panel_box .part.rt {flex:2;}
.panel_box .part .topic_box {display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;}
.panel_box .part .topic_box .tit {padding-left:5px; font-size:18px; font-weight:700;}
.table_box {border:1px solid #ddd; border-radius:5px; background-color:#fff; overflow:hidden;}
.table_box.wt_scroll {overflow-x:auto;}
/* .table_box.wt_scroll 기본 overflow-x:auto 유지 — 페이지별 컬럼 수/폭에 따라 필요 시 자동 스크롤 */
.table_box .tb1 {table-layout:fixed; width:100%; text-align:left; border-collapse:separate; border-spacing:0;}
/* col width에 padding 포함시켜 실제 렌더 크기 = col width 합. 스크롤 임계 정확화 */
.table_box .tb1 th, .table_box .tb1 td {box-sizing:border-box;}
/* col-title 은 auto 로 두어 남은 공간을 흡수. 다른 고정 col은 명시 px 유지 */
.table_box .tb1 col.col-title {width:auto; min-width:180px;}
.table_box .tb1 thead th,
.table_box .tb1 tbody th,
.table_box .tb1 tbody td {padding:6px; vertical-align:middle; text-align:center;}
.table_box .tb1 thead th {color:#4430bb; font-weight:600; border:1px solid #d8d1eb; border-width:0 0 1px 1px; background-color:#f9f7ff;}
.table_box .tb1 tbody th,
.table_box .tb1 tbody td {position:relative; font-weight:400; border:1px solid #dddddd; border-width:0 0 1px 1px; background-color:#fff;}
.table_box .tb1 tbody th {background-color:#fbfafd;}
.table_box .tb1 thead th:first-child,
.table_box .tb1 tbody th:first-child,
.table_box .tb1 tbody td:first-child {border-left:0;}
.table_box .tb1 tbody tr:last-child th,
.table_box .tb1 tbody tr:last-child td,
.table_box .tb1 tbody th.linbt,
.table_box .tb1 tbody td.linbt {border-bottom:0;}
.table_box .tb1 thead th.lin,
.table_box .tb1 tbody th.lin,
.table_box .tb1 tbody td.lin {border-left:1px solid #d8d1eb;}
.table_box .tb1 tbody td.num {text-align:right;}
.table_box .tb1 tbody tr {cursor:pointer;}
.table_box .tb1.no tbody tr {cursor:auto;}
.table_box .tb1 tbody tr:hover td {background-color:#f7f8ff;}
.table_box .tb1 tbody tr.active td:first-child {border-left:1px solid #5b40f8;}
.table_box .tb1 tbody tr.active td:last-child {border-right:1px solid #5b40f8;}
.table_box .tb1 tbody tr.active td {color:#5b40f8; font-weight:800; border-top:1px solid #5b40f8; border-bottom:1px solid #5b40f8; background-color:#eeecf9;}
.table_box .tb1 tbody tr.active td .btn-tooltip {color:#5b40f8; font-weight:800;}
.table_box .tb1 tbody tr.active td.cred {color:#f1062a;}
.table_box .tb1 tbody tr.active td.cred {color:#f1062a;}
.table_box .tb1 tbody td.allt {text-align:left;}

/* btn common */
.btn_sm {display:inline-flex; align-items:center; justify-content:center; padding:0 1rem; min-width:100px; height:33px; border-radius:5px; color:#fff; font-weight:500; cursor:pointer;}
.btn_util {display:inline-flex; align-items:center; justify-content:center; padding:0 1rem; min-width:100px; height:38px; border-radius:5px; color:#fff; font-weight:500; cursor:pointer;}
.btn_sm.ico1 {gap:5px;}
.btn_sm.ico1::before {content:""; width:17px; height:14px; background:url("../img/sub/ico_btn_more.png") no-repeat 0 0;}
a.btn_sm:link, a.btn_util:link {color:#fff;}
.blue {background-color:#5b40f8; transition:.2s all;}
.blue:hover {background-color:#4b30e6;}
.black {background-color:#000; transition:.2s all;}
.black:hover {background-color:#3b3b3b;}
.green {background-color:#217346; transition:.2s all;}
.green:hover {background-color:#1a6d3f;}

.cred {color:#f1062a;}
/* .csky {color:#188aff}
.cgreen {color:#00b809;}
.cred {color:#f1062a;}
.corange {color:#ff7113;} */

/* .pagination {padding-top:10px; display:flex; align-items:center; justify-content:center; gap:.5rem;}
.pagination .page, 
.pagination .page-btn {display:flex; align-items:center; justify-content:center; min-width:30px; height:30px; font-size:13px; border-radius:50px; cursor:pointer;}
.pagination .page-btn {font-size:18px; font-weight:600; border:1px solid #ccc; }
.pagination .page.active {color:#fff; border-color:#000; background-color:#000;} */


/* tooltip */
.btn-tooltip {display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tooltip {position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:8px 12px; width:500px; color:#fff; font-size:13px; border-radius:6px; background-color:#222; opacity:0; pointer-events:none; transition: 0.2s; z-index:2;}
.btn-tooltip:hover + .tooltip {opacity:1;}

/* a.btn-tooltip — 평상시 주변 텍스트와 동일, 호버 시만 색+밑줄 강조 */
.table_box .tb1 tbody td a.btn-tooltip {color:inherit; font-weight:inherit; text-decoration:none;}
.table_box .tb1 tbody td a.btn-tooltip:hover {color:#5b40f8; text-decoration:underline;}

.pup_wrap {height:100%;}
.pup_wrap .tit_caption {display:flex; align-items:center; justify-content:start; margin-bottom:0; padding:0 2rem; height:65px; border-bottom:1px solid #e4dde0; background: linear-gradient(90deg, #e8e3f4 0%, #faf0f6 100%);}
.pup_wrap .container {padding:2rem; height:calc(100% - 65px);}
.pup_wrap .data_search_box {margin-bottom:15px; width:100%;}
/* 팝업 필터바 검색어 입력창 — 기본은 남은 공간을 flex로 차지. 미디어쿼리에서 explicit width로 override 가능 */
.pup_wrap .data_search_box.view .search_item {flex:1; min-width:0; max-width:320px;}
.pup_wrap .data_search_box.view .search_item input {width:100%;}
/* reset.css의 body text-align:center가 자동완성 리스트까지 전파되는 것 차단 */
.ui-autocomplete, .ui-autocomplete .ui-menu-item-wrapper {text-align:left;}
.pup_wrap .panel_box {display:flex; flex-direction:column; height:calc(100% - 55px); min-height:0; gap:0;}
.pup_wrap .panel_box .part {flex:1; min-height:0; overflow:hidden;}
.pup_wrap .panel_box .table_box {height:100%; min-height:0; overflow-y:auto;}
.pup_wrap .table_box .tb1 thead th {position:sticky; top:0; z-index:2;}
.pup_wrap .table_box .tb1 tfoot th,
.pup_wrap .table_box .tb1 tfoot td {padding:6px; vertical-align:middle; text-align:center; position:sticky; bottom:0; background-color:#efe9fb; font-weight:700; border-top:2px solid #a089d4; z-index:2;}
.pup_wrap .table_box .tb1 tfoot td.num {text-align:right;}
.pup_wrap .table_box .tb1 tbody tr:last-child td {border-bottom:1px solid #ddd;}
.pup_wrap .sel_list_more {flex-shrink:0; align-self:flex-end; margin-top:6px; width:100px;}
.pup_wrap .table_box .tb1 tbody tr:last-child th,
.pup_wrap .table_box .tb1 tbody th.linbt {border-bottom:1px solid #ddd;}
.search_label {position:absolute; left:-99999px; font-size:0; text-indent:-9999px;}
.btn_excel {display:flex; align-items:center; gap:5px; margin-left:auto;}
.btn_excel::before {content:""; width:18px; height:15px; background:url("../img/sub/ico_excel.png") no-repeat 0 0;}
.ui-widget.ui-widget-content {z-index:3 !important;}
.pup_wrap.channel_list .panel_box {height:calc(100% - 55px)}
.pup_wrap.channel_view .panel_box,
.pup_wrap.performance_view .panel_box {height:calc(100% - 155px)}

.channel-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}
.channel-meta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid #d9dcf1;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 100%);
}
.channel-meta-card .meta-label {
    flex-shrink: 0;
    padding-right: 12px;
    border-right: 1px solid #d9dcf1;
    font-size: 16px;
    font-weight: 700;
    color: #6b719f;
    letter-spacing: 0.02em;
}
.channel-meta-card .meta-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: #111a65;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .channel-meta-grid {
        grid-template-columns: 1fr;
    }
}
.content-title-card {
margin: 0 0 16px;
padding: 16px 20px;
border: 1px solid #d9dcf1;
border-radius: 14px;
background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 100%);
/* box-shadow: 0 8px 20px rgba(35, 47, 136, 0.06); */
}
.content-title-card .content-title-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.content-title-card .content-title-label {
flex-shrink: 0;
padding-right: 12px;
border-right: 1px solid #d9dcf1;
font-size: 16px;
font-weight: 700;
color: #6b719f;
letter-spacing: 0.02em;
}
.content-title-card .content-title-text,
.content-title-card .content-title-link {
flex: 1;
min-width: 0;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: #111a65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-title-card .content-title-link {
text-decoration: none;
}
.content-title-card .content-title-link:hover {
text-decoration: underline;
}
.content-title-card .content-title-tags {
display: block;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
font-weight: 600;
color: #6b719f;
word-break: break-word;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 6px 10px;
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}
.pagination a:hover {
    background: #f0f4ff;
    border-color: #a089d4;
}
.pagination .page-num.current {
    background: #7b61ff;
    color: #fff;
    border-color: #7b61ff;
    font-weight: 700;
}
.pagination .page-prev,
.pagination .page-next {
    font-weight: 500;
}
.pagination .page-prev.disabled,
.pagination .page-next.disabled {
    color: #aaa;
    background: #f5f5f5;
    cursor: default;
}
.pagination .page-ellipsis {
    border: none;
    background: transparent;
    color: #888;
    padding: 6px 4px;
}
.pagination .page-count {
    margin-left: 12px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 12px;
}