@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, strong, sub, sup, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, embed, input, select, textarea, button {margin:0;padding:0;font-family: "Pretendard Variable", Pretendard, sans-serif;}
body {background: #F5F7FC; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 12px; letter-spacing: 0.01em;}
input, button, textarea {font-family: "Pretendard Variable", Pretendard, sans-serif;}
select {font-size:1em;}
code, pre {font-size:1em; font-family: "Pretendard Variable", Pretendard, sans-serif;}
address, em, cite {font-style:normal;}
img {border:0 none;}
hr {display:none;}
table {border-collapse:separate;border-spacing:0;}
caption, .hd {width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
th, td {vertical-align:top;text-align:left;font-weight:normal;}
li {list-style-type:none;}
form {margin:0;padding:0;}
fieldset {border:0 none;}
legend, .hd {position: absolute;border:0px;width: 1px;height: 1px;clip: rect(1px, 1px, 1px ,1px);clip-path:inset(50%);overflow: hidden;}
label, button {cursor:pointer;}
button {overflow:visible;border:none;background:none;background:transparent;font-family:inherit;white-space:nowrap;vertical-align:top;text-decoration:none;}
button::-moz-focus-inner {border:0;padding:0;}
a {text-decoration:none;cursor:pointer;}
img{vertical-align: top}
input:focus,select:focus,textarea:focus,button:focus{outline: none;}
input::placeholder {color: #667792 !important;}
input::-webkit-input-placeholder {color: #667792 !important;}
input:-ms-input-placeholder {color: #667792 !important;}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding-right: 8px; padding-left: 8px;}
.row {margin-right: -8px; margin-left: -8px;}
.card, .card-box {background: #FFF; box-shadow: 0 2px 2px 0 rgba(95, 111, 151, 0.05), 0 2px 6px 0 rgba(116, 145, 217, 0.16); margin-bottom: 16px; padding: 16px; border-radius: 16px;}

.logo-select__trigger {width: 100%; height: 36px; padding: 0 12px; border: 1px solid #dae1ed; border-radius: 8px; background: #fff; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #2b394f;}
.logo-select__trigger i {margin-left: auto; color: #667792;}
.logo-select__menu {position: absolute; top: calc(100% + 6px); left: 0; right: 0; border: 1px solid #dae1ed; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08); display: none; overflow: hidden; z-index: 10;}
.logo-select.is-open .logo-select__menu {display: block;}
.logo-select__option {width: 100%; padding: 8px 12px; border: none; background: #fff; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 14px; color: #2b394f;}
.logo-select__option:hover {background: #f5f7fb;}
/* 광고주 로고 — width 26px 기준 (QA). 트리거·드롭다운 동일. */
.logo-select__trigger > img, .logo-select__option > img {width: 26px; height: auto; flex: 0 0 auto;}

:root { --gradient: linear-gradient(90deg, #06B6D4 0%, #8B5CF6 100%)}

.slimScrollDiv {padding: 12px;}

.left-side-menu {top: 0; width: 220px; border-right: 1px solid #E4EAF5; background: #FBFDFF; backdrop-filter: blur(12px); transition: none;}
.left-side-menu {padding: 0;}

.logo-box {position: relative; height: auto; padding: 20px 12px 4px; background-color: transparent; width: 220px; z-index: 9;}
.logo-box .logo {text-align: left; padding-left: 4px; font-size: 20px; font-weight: 700; line-height: 18px; letter-spacing: 0.05em;}
.logo-box .logo em {font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; color: #131F30; vertical-align: 1px;}
/* 구분선을 로고와 광고주 선택창 사이로 이동 (로고 → 선 → 광고주 선택).
   logo-select 는 logo-box 좌우 패딩(12px) 안쪽이라, 선은 ::before 로 -12px 확장해 사이드바 폭 전체(패딩 밖)로 그린다. */
.logo-box .logo-select {margin-top: 20px; padding-top: 16px; position: relative; width: 100%;}
.logo-box .logo-select::before {content: ''; position: absolute; top: 0; left: -12px; right: -12px; border-top: 1px solid #EBF0FA;}
.logo-box .name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-wrap: normal;}
.button-menu-mobile {position: absolute; top: 20px; right: 12px; padding: 0; line-height: 0; background-color: transparent; border: none; z-index: 1;}

body.enlarged {min-height: auto;}
.enlarged .slimScrollDiv {padding: 12px 10px;}
.enlarged .content-page {margin-left: 55px !important;}
.enlarged .logo-box {width: 55px !important; padding: 18px 10px 12px; margin-bottom: 12px; transition: none;}
.enlarged .logo-box .logo {padding: 0;}
.enlarged .logo-box .logo-select {margin-top: 18px; padding-top: 0;}
.enlarged .logo-box .logo-select::before {display: none;}
/* (닫힘 트리거 우측 흰색 마스크 제거 — 로고 가운데 정렬 시 우측이 잘려 쏠려 보이던 문제) */
.enlarged .left-side-menu {position: fixed; width: 55px !important;}
.enlarged .left-side-menu #sidebar-menu>ul>li>a {min-height: 34px; padding: 0 9px; text-align: center;}
.enlarged .left-side-menu #sidebar-menu>ul>li:hover>a {width: auto; color: #667792;}
.enlarged .left-side-menu #sidebar-menu>ul>li:hover>a.active {color: #fff;}
.enlarged .left-side-menu #sidebar-menu>ul>li>a svg {margin: 0;}
.enlarged .left-side-menu .profile-wrap {padding: 0;}
.enlarged .left-side-menu .profile-wrap .chacha-profile {padding: 12px 3.5px; gap: 0; justify-content: center;}
.enlarged .left-side-menu .profile-wrap .chacha-profile__info,
.enlarged .left-side-menu .profile-wrap .chacha-profile__logout {display: none;}
.enlarged .logo-select__trigger {padding: 0; justify-content: center;}
.enlarged .logo-select>button>.name, .enlarged .logo-select .mdi-chevron-down {display:none;}
.enlarged .logo-select__menu {left: 40px; top: 0; width: 196px;}

.enlarged .button-menu-mobile {opacity: 0; right: auto; left: 50%; width: 34px; transform: translateX(-50%);}
.enlarged .logo-box .logo:hover .logo-sm {opacity: 0;}
.enlarged .logo-box .logo:hover .button-menu-mobile {opacity: 1;}

.content-page {margin-top: 0; margin-left: 220px; padding: 0 24px 50px;}
.page-title-box {background-color: transparent; box-shadow: none; margin: 0 -27px;}
.page-title-box .page-title {display: inline-block; margin-bottom: 4px; background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 22px; font-weight: 700; line-height: 30px; }
.page-title-box .page-title-right {display: block !important; margin-top: 3px; color: #667792;}

/* ===== 공통 페이지 헤더 (sticky) — 전 페이지 공통 (공지사항 헤더 기준으로 통일) ===== */
/* 헤더 높이 60px (QA). 사이드바 구분선(로고 아래, 행 59~60)과 하단 보더를 같은 행에 맞춰 정렬. 제목은 수직 중앙. */
.geo-header {position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
    margin: 0 -36px 20px; padding: 8px 36px; min-height: 60px; background: #FBFDFF; border-bottom: 1px solid #E4EAF5; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.geo-header__title h1 {margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 25px;
    background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.geo-header__title p {margin: 0; font-size: 12px; line-height: 16px; color: #475569;}
.geo-header__title .js-last-update:not(:empty)::before {content: "|"; margin: 0 6px; color: #CBD5E1;}
.geo-header__actions {display: flex; align-items: center; gap: 8px;}
.geo-header__actions .btn {white-space: nowrap;}
.geo-header__logo {display: block;}
/* 설정 페이지는 .content 가 680px 중앙정렬 — 헤더도 그 컬럼 폭에 맞춰 풀블리드 */
.content-page#setting .geo-header {margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px;}

#sidebar-menu {overflow-y: auto; width: 100%; max-height: calc(100% - 220px);}
#sidebar-menu>ul>li {margin-bottom: 4px;}
#sidebar-menu>ul>li>a {align-content: center; padding: 10px 12px; font-size: 14px; font-weight: 600; color:#667792; border-radius: 8px;}
#sidebar-menu>ul>li>a.active {font-weight: 700; color: #fff; border-radius: 8px; background: var(--gradient);}
#sidebar-menu>ul>li>a svg {margin-right: 5px;}
#sidebar-menu>ul>li>a:hover svg path {fill: #3bafda;}
#sidebar-menu>ul>li.menu-title {margin: 12px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #909CB4;}
.enlarged #sidebar-menu>ul>li.menu-title {visibility: hidden; height: 8px; overflow: hidden;}
#sidebar-menu>ul>li>a.active svg path {fill: #fff;}

.profile-wrap {position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box;}
/* 사내 공통 프로필 컴포넌트(chacha-profile)가 스타일을 소유한다.
   상단 구분선/패딩/이름·부서 텍스트/로그아웃 버튼 전부 컴포넌트(css/assets/chacha-profile) 담당.
   여기서는 사이드바 폭에 맞춰 좌우 여백만 조정. */
.profile-wrap .chacha-profile {--cp-padding: 14px 16px;}

.footer {padding: 16px; left: 220px; color: #909CB4; text-align: center; background-color: transparent;}

.popup-overlay {position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9999;}
    .popup-overlay .popup-modal {background: #ffffff; border-radius: 12px; padding: 16px; position: relative; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);}
    .popup-overlay .popup-text {margin: 0 0 20px; padding-right: 30px; font-size: 14px; font-weight: 700; line-height: 18px; color: #2B394F;}
    .popup-overlay .popup-actions {display: flex; justify-content: flex-end;}
    .popup-overlay .popup-confirm {height: 28px; padding: 0 12px; border: none; border-radius: 6px; background: var(--gradient); color: #fff; font-size: 12px; font-weight: 700;}
    .popup-overlay .popup-close {position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: none; background: transparent; color: #1f2a44; font-size: 22px; line-height: 28px; cursor: pointer;}

/* 공통 CSS */
.card>h3 {margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #2b394f; line-height: 18px; letter-spacing: -0.28px;}
    .card>h3 span {display: block; padding-top: 3px; font-size: 12px; font-weight: normal; color: #667792; line-height: 16px; letter-spacing: -0.24px;}
    .card>h3 .custom-select {float: right; margin-top: -3px; width: 70px; height: 26px; padding: 0 1.9rem 0 .9rem; border-radius: 8px; font-size: 12px; line-height: 26px;}
.custom-select {border-radius: 8px; background: #fff url('/images/icn_select_arrow.png') no-repeat right .4rem center;}

.insight-chip {margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 9999px; font-size: 10px;}
    .insight-chip.up {background: rgba(52, 211, 153, 0.3); color: #25966d;}
    .insight-chip.down {background: rgba(255, 138, 138, 0.3); color: #ff0000;}

.custom_select #select-question {width: 260px;}
.custom_select #select-platform {width: 100px;}
.custom_select .selected {width: 128px; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667792' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
  padding-right: 32px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.custom-select:disabled,
.custom_select.disabled .selected {border: 1px solid #DAE1ED; background: #EBF0FA url('/images/icn_select_arrow.png') no-repeat right .4rem center; color: #2B394F; pointer-events: none;}
.custom_select .options {overflow:auto;display: none; position: absolute; width: calc(100% - 10px); height: auto; max-height: 300px; list-style: none; margin: 4px 0 0; padding: 0; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 14px; z-index: 20;}
.custom_select .options .option {position: relative; cursor: pointer;}
.custom_select .options .option:hover {background: #FAFCFF;}
.custom_select .options .option input {visibility: hidden; position: absolute; text-indent: -999em;}
.custom_select .options .option label {width: 100%; padding: 6px 12px; font-weight: normal;}
.custom_select .options .option input:checked {background: #eaf4ff;}
.custom_select .options .option input + label>i {display: none; vertical-align: middle;}
.custom_select .options .option input:checked + label {padding-left: 32px;}
.custom_select .options .option input:checked + label>i {display: inline-block; margin-left: -20px; color: #22A5BF;}
.custom_select_single .options .option input[value=""] + label {padding-left: 12px;}
.custom_select_single .options .option input[value=""] + label>i {display: none;}

.select2-results .select2-results__option {position: relative;}
.select2-results .btn-option {position: absolute; right: 12px; top: 50%; transform: translateY(-50%);}
.select2-container--default .select2-selection--single .select2-selection__placeholder {font-size: 14px; color: #667792;}
.select2-container .select2-selection--single .select2-selection__arrow {display: none;}
.select2-container .select2-selection--single .select2-selection__rendered {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667792' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;}
.select2-container--default .select2-search--dropdown {display: none;}
.select2-container--default .select2-search--dropdown .select2-search__field {padding: 8px 12px; border-radius: 8px;}
.select2-container--default .custom-option>span {color: #2B394F;}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #FAFCFF !important; color: #2B394F !important;}
.select2-container--default .select2-results>.select2-results__options {max-height: 240px;}

.select2-selection {display:none !important;}
.select2-dropdown {overflow: hidden; margin-top: -11px; border-radius: 8px !important; border: 1px solid #e1e9ee !important; box-shadow: none;}
.select2-results__options::-webkit-scrollbar {width: 7px; height: 7px;}
.select2-results__options::-webkit-scrollbar-track {background: #fff; border-radius: 10px;}
.select2-results__options::-webkit-scrollbar-thumb {background: #ddd; border-radius: 10px;}
.select2-results__options::-webkit-scrollbar-thumb:hover {background: #888;}

.custom-tags-box .custom-tags {padding: 4px 4px 4px 8px; border-radius: 6px; background: #DAE1ED; font-size: 12px; color: #2B394F;}
.custom-tags-box .custom-tags .custom-x i {font-size: 16px; color: #fff; vertical-align: middle;}
.custom-select2-box {display: flex; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667792' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;}
.custom-select2-box #custom-select2-input {width: 100%; padding-right: 20px; border: 0; background: transparent;}
.custom-select2-box .custom-select2-input {width: 100%; padding-right: 20px; border: 0; background: transparent;}

.custom-option-menu {display: none; position: fixed; right: 0; top: 0; width: 216px; padding: 8px 12px; background: #fff; border-radius: 8px; border: 1px solid #DAE1ED; z-index: 9999;}
.custom-option-menu.on {display: block;}
.custom-option-menu>li {align-content: center; margin-bottom: 8px; font-size: 12px; color: #2B394F;}
.custom-option-menu>li:last-child {margin-bottom: 0;}
.custom-option-menu>li input {border-radius: 8px; border: 1px solid #DAE1ED;}
.custom-option-menu>li button {width: 100%; text-align: left;}
.custom-option-menu>li button i {margin-right: 12px; font-size: 14px;}

.form-control {border-radius: 8px !important; border: 1px solid #DAE1ED; font-size: 14px; color: #667792;}

/* row-gap 으로 줄바꿈 간격(5px)을 주고, col margin-top 은 제거 → 첫 줄이 위로 안 밀려
   헤더~첫 콘텐츠 간격이 다른 페이지(카드/배너)와 동일하게 맞는다. */
.searchbox {margin: 16px -8px; row-gap: 5px;}
    .searchbox .col-auto {padding-right: 0;}
    .searchbox input {padding-left: 34px; color: #2B394F;}
    .searchbox i {font-size: 17px; color: #667792; vertical-align: -2px; z-index: 9;}
    .searchbox .btn .fa-plus {color: #fff;}  /* 등록버튼 '+' 아이콘 흰색 (위 .searchbox i 회색 규칙 상쇄, 페이지별 통일) */
    .searchbox .custom-select.wide {min-width: 320px; justify-content: space-between;}
    .btn[class*="btn-reset"] {padding: 0 4px; background: transparent; font-weight: 500; font-size: 12px; color: #909CB4;}
    .btn[class*="btn-reset"] i {color: #909CB4;}
    .searchbox .insight-note {margin-left: auto; font-size: 10px; color: #667792;}
    .searchbox .datepicker_wrap i {position: absolute; left: 12px; top: 7px;}
    .datepicker-separator {margin: 0 6px; color: #667792; font-size: 13px; line-height: 30px;}
    .searchbox>h3 {font-weight: bold; font-size: 16px;}

    /* ===== 1440px 폭에서도 필터가 한 줄에 유지되도록 — 검색 input이 남는 공간을 흡수 =====
       고정폭 필터(날짜/셀렉트/버튼)는 그대로 두고, 텍스트 검색창만 유연하게 만들어
       필터 개수가 많은 페이지(인사이트 상세 등)에서도 다운로드/등록 버튼이 다음 줄로 밀리지 않게 한다. */
    .searchbox .search {flex: 1 1 0; min-width: 0; max-width: 420px;}
    .searchbox .search > .input-group {width: 100%;}
    .searchbox .search .form-control {min-width: 0 !important;}
    /* 우측 액션(등록/다운로드/세그먼트 탭)이 absolute 로 겹쳐 배치된 페이지는
       검색창이 전체 폭으로 늘어나면 그 액션과 겹치므로 유연화에서 제외하고 고정폭 유지. */
    #contents .searchbox .search,
    #product-monitoring .searchbox .search,
    #product-trends .searchbox .search {flex: 0 1 auto; min-width: 0;}
    #contents .searchbox .search .form-control,
    #product-monitoring .searchbox .search .form-control,
    #product-trends .searchbox .search .form-control {min-width: 260px !important;}

    .search input {padding-left: 34px; color: #2B394F;}
    .search i {position: absolute; left: 12px; top: 6px; font-size: 17px; color: #667792; vertical-align: -2px; z-index: 9;}

.daterangepicker .drp-buttons .btn {line-height: normal;}

.input-group.datepicker_wrap {max-width: 150px;}
#crawl-error .input-group.datepicker_wrap {max-width: none;}
/* 주차 선택 캘린더 */
.weekpicker-calendar .calendar-table tbody tr:hover td.available:not(.off) {
  background-color: #e4ecfb;
  border-radius: 0;
}
.weekpicker-calendar .calendar-table td.in-range {
  border-radius: 0;
}
.weekpicker-calendar .calendar-table td.week {
  font-size: 10px;
  color: #98a6ad;
}

.btn {min-width: 45px; height: 36px; line-height: 36px; padding: 0 12px; border: none; border-radius: 8px; background: #DAE1ED; color: #667792; font-size: 14px; font-weight: 700;}
.btn svg {margin-right: 2px; vertical-align: -2px;}
.btn i {margin-right: 2px;}
.btn.btn-primary {background: var(--gradient); color: #fff; box-shadow: 0 10px 15px -3px rgba(6,182,212,.25), 0 4px 6px -4px rgba(6,182,212,.25);}
.btn[class*="search"] {border: 1px solid #b6d6fd; background: #cee3fd; font-weight: 600; color: #3f7ecc;}
.btn.btn-add {background: #CEE3FD; border: 1px solid #B6D6FD; font-size: 12px; color: #3F7ECC;}
.btn.btn-remove {background: #FFE6E6; border: 1px solid rgba(255,176,176,.6); font-size: 12px; color: #FF3333;}
.btn.btn-remove:focus {box-shadow: 0 0 0 .15rem rgba(255,176,176,.25);}
.btn:disabled {background: #DAE1ED; border: 0; color: #B1BAC9; pointer-events: none; box-shadow: none;}

/* 대시보드 CSS */
.card>h3 {display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; color: #2B394F;}
.card>h3>.custom_select {}
.card>h3>.custom_select .selected {width: 80px; height: 30px; padding: 4px 12px;}
.card>h3>.custom_select .options {width: calc(100% - 16px);}

.insight-banner {padding: 12px 16px; margin-top: 0; gap: 12px; border-radius: 12px; background: linear-gradient(90deg, #e8fcff 0%, #ebe3ff 100%); border: none; box-shadow: 0 4px 13px 0 rgba(7, 132, 151, 0.20);}
    .insight-banner>div {gap: 12px;}
    .insight-banner .title {margin: 0 0 3px; font-size: 14px; line-height: 18px; letter-spacing: -0.28px; background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
    .insight-banner .title strong {font-weight: 800;}
    .insight-banner .text {margin: 0; font-size: 10px; color: #667792; line-height: 14px; letter-spacing: -0.2px;}

.insight-card {}
    .card h3 {font-weight: normal; font-size: 12px; color: #505f77; line-height: 16px; letter-spacing: -0.24px;}
    .summarybox .card>div {display: flex; justify-content: space-between; align-items: center;}
    .card div.text {width: calc(100% - 70px); font-size: 24px; font-weight: 700; color: #18263f; line-height: 32px;}
    .card div.text em {margin-left: 4px; font-size: 14px; color: #505f77; font-weight: normal; line-height: 18px; font-style: normal;}
    .insight-card .insight-chip {margin-top: 9px; }

.insight-chart.top20 {overflow-y: auto;}
.insight-chart.top20 .top-item {margin-bottom: 20px;}
.insight-chart.top20 .top-item:last-child {margin-bottom: 0;}
.insight-chart.top20 .top-item label {position: relative; padding-left: 12px; font-weight: 700;}
.insight-chart.top20 .top-item label::before {position: absolute; left: 0; top: 50%; content: ''; width: 8px; height: 8px; background: #22D3EE; border-radius: 50%; transform: translateY(-50%);}
.insight-chart.top20 .top-item .background {overflow: hidden; height: 6px; margin-top: 12px; border-radius: 100px; background: #DAE1ED;}
.insight-chart.top20 .top-item .progress {height: 6px; background: #22D3EE;}
/* 데이터 없음 안내 — TOP20/도메인 영역 세로 가운데 정렬 */
.insight-chart .chart-empty {display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; color: rgba(51,65,85,.5); font-weight: 600; font-size: 14px;}
/* 언급 상위 도메인 — TOP20(시안)과 구분되는 바이올렛 포인트 */
#domain-top .top-item label::before {background: #8B5CF6;}
#domain-top .top-item .progress {background: #8B5CF6;}
#insight .row-chart-box .chart-box .pie-wrap {width: 50%;}
.pie-legend {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding-top: 8px;}
.pie-legend-item {display: flex; align-items: center; gap: 4px; font-size: 11px; color: #505F77; cursor: pointer; user-select: none;}
.pie-legend-item:hover {color: #2B394F;}
.pie-legend-item.is-off {opacity: 0.35;}
.pie-legend-item i {width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;}

#insight .card {height: calc(100% - 16px);}
#insight .table-wrap {min-height: 200px; padding-bottom: 0;}
#insight .table col {min-width: 100px;}
#insight .table td,
#insight .table th {padding: .45rem .85rem;}
#insight .row-chart-box h3 {margin-bottom: 3px; font-weight: bold; font-size: 14px; color: #2B394F;}
#insight .row-chart-box h3 + span {margin-bottom: 16px; color: #667792;}
#insight .row-chart-box h3 + div {margin-top: 13px;}
#insight .row-chart-box .col-5 {flex: 0 0 37.5%; max-width: 37.5%;}
#insight .row-chart-box .col-2 {flex: 0 0 25%; max-width: 25%;}
#insight .row-chart-box .col-7 {flex: 0 0 62.5%; max-width: 62.5%;}
#insight .row-chart-box .col-9 {flex: 0 0 75%; max-width: 75%;}
#insight .row-chart-box .chart-box {display: flex;}
#insight .row-chart-box .chart-box>div {width: 50%;}

#insight input[name="chk-toggle"] + label {font-size: 12px;}

#insight .table-top5 tbody tr td {position: relative; font-weight: 600;}
#insight .table-top5 tbody tr:nth-child(1) td:nth-child(1) {padding-left: calc(.85rem + 18px); color: #0069EB;}
#insight .table-top5 tbody tr:nth-child(1) td:nth-child(1)::before {position: absolute; left: .85rem; top: 50%; content: ''; width: 14px; height: 14px; background: url('/images/icn_contents_most.png') center no-repeat; background-size: 100%; transform: translateY(-50%);}
/* 데이터 없음 — Top5 안내 문구: 1행째 '최다 인용' 메달 아이콘/파란색/좌측 패딩 무효화 + 세로 가운데 정렬 (메달 규칙보다 뒤에 위치해야 우선 적용됨) */
#insight .table-top5 tbody tr:nth-child(1) td.no-data {height: 150px; padding-left: .85rem; vertical-align: middle; text-align: center; color: rgba(51,65,85,.5);}
#insight .table-top5 tbody tr:nth-child(1) td.no-data::before {display: none;}
#insight .table-top5 tbody tr td a.btn-newWindow {display: inline-block; width: 14px; height: 14px; margin-left: 4px; background: url('/images/icn_newWindow.png') center no-repeat; background-size: 100%; vertical-align: middle;}

/* insight top20 tooltip */
.custom-tooltip {
  position: absolute;
  background: #FFF;
  color: #666;
  padding: 6px 12px;
  border-radius: 4px;
  border: solid 1px #60A5FA;
  font-size: 13px;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-weight:600;
  font-size:14px;
}
.custom-tooltip span{
  font-weight:900;
  margin-left:10px;
}

/* AEO chips */
.aeo-chip-row {display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;}
.aeo-chip-row>em {font-size: 10px; color: #505F77; line-height: 21px;}
.aeo-chip {padding: 3px 8px; margin-bottom: 4px; border-radius: 9999px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: -0.24px;}
.aeo-chip:last-child {margin-bottom: 0;}
.aeo-chip--green {background: rgba(52,211,153,.3); color: #25966D;}
.aeo-chip--blue {background: rgba(96,165,250,.3); color: #3F7ECC;}
.aeo-chip--cyan {background: rgba(34,211,238,.3); color: #137483;}
.aeo-chip--purple {background: rgba(152,126,228,.3); color: #5C4C8A;}
.aeo-chip--error {position: relative; padding-left: 18px; background: rgba(255,138,138,.3); color: #FF0000;}
.aeo-chip--error::before {position: absolute; left: 4px; top: 50%; content: ''; width: 12px; height: 12px; background: url('/images/icn_error.png') no-repeat; transform: translateY(-50%);}

.platform-chip-gpt{background: rgba(24,38,63,.3); color: #18263F;}
.platform-chip-gemini{background: linear-gradient(to right, rgba(6,182,212,0.3), rgba(139,92,246,0.3)); color: #3F7ECC;}
.platform-chip-gemini .text{background: linear-gradient(90deg, #06B6D4, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.platform-chip-google-ai{background: rgba(96,165,250,.3); color: #3F7ECC;}
.platform-chip-naver-ai{background: rgba(37,150,109,.3); color: #25966D;}
span[class*="platform-chip"] {display: inline-block; padding: 3px 8px; border-radius: 9999px; font-weight: 600;}
.modal span[class*="platform-chip"] {font-size: 10px;}

span[class*="level-chip"] {display: inline-block; width: 50px; padding: 3px; border-radius: 6px; text-align: center; font-weight: 500; font-size: 12px;}
.level-chip-3 {background: rgba(86,161,255,.1); border: 1px solid rgba(86,161,255,.25); color: #2D7FE4;}
.level-chip-2 {background: rgba(237,163,38,.17); border: 1px solid rgba(247,213,155,.3); color: #E08C00;}
.level-chip-1 {background: rgba(254,43,43,.1); border: 1px solid rgba(254,43,43,.14); color: #FE2B2B;}

.aeo-status {color: #FF3333;}      /* 기본(수집실패 '9') — 빨강 */
.aeo-status1 {color: #3F7ECC;}     /* 수집완료 '1' — 파랑 */
.aeo-status0 {color: #F39C12;}     /* 수집중 '0'(진행중) — 주황 (단계/라운드 진행중과 톤 통일) */
.aeo-status2 {color: #909CB4;}     /* 수집중지 '2'(비활성) — 회색 */
.aeo-status-reason {margin-top: 6px; font-size: 11px; line-height: 1.3; color: #9AA3B2;}  /* 수집실패 '9' 사유(error_label) — 연한 회색, 상태 텍스트와 간격 */

/* loading */
.list-loading {display: none; position: absolute; left: 50%; top: calc(50vh - 140px); transform: translateX(-50%);}
.loading .list-loading {display: block;}

/* table */
.table-wrap {position: relative; overflow: hidden; min-height: calc(100vh - 190px); padding: 0; padding-bottom: 62px; border-radius: 16px; border: 1px solid #DAE1ED; background: #FAFCFF; box-shadow: 0 2px 2px 0 rgba(95,111,151,.05), 0 2px 6px 0 rgba(116,145,217,.16);}
#question .table-wrap {min-height: calc(100vh - 208px);}
.table-responsive {height: 100%;}
.table thead {}
.table thead th {border: 0; border-bottom: 1px solid #DAE1ED; background: #EBF0FA; color: #667792;}
.table thead th .btn-table-sort {width: 12px; height: 12px; background: url('/images/icn_sort.png') center no-repeat; background-size: 100%; vertical-align: -2px;}
.table tbody td {border-top: 0; border-bottom: 1px solid #EBF0FA; align-content: center; color: #2B394F;}
.table tbody td.td-platform .aeo-chip {font-size: 12px;}
.table tbody td.td-question>span {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;}
.table tbody td.td-citation li>span {display: inline-block; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%;}
.table tbody td.td-citation li.citation-very-high>span {background: #76B2FD;}
.table tbody td.td-citation li.citation-high>span {background: #F3C476;}
.table tbody td.td-citation li.citation-low>span {background: #F37676;}
.table tbody td.td-citation li.citation-collected {color: #909CB4; font-size: 11px;}
.table tbody td.td-time>ul {margin-top: 8px;}
.table tbody td.td-time>ul>li {display: inline-block; margin-right: 8px; color: #505F77;}
.table tbody td.td-time>ul>li:last-child {margin-right: 0;}
.table tbody td.td-time>ul>li:last-child {margin-bottom: 0;}
.table tbody td.td-time>ul>li span {text-align: center; font-size: 10px;}
.table tbody td.td-time>ul>li span[class*="time"] {min-width: 45px;}
.table tbody td.td-time>ul>li span img {width: 16px;}
.table tbody td.td-time a {width: 100%; height: 100%;}
.table tbody td.td-time a i {color: #505F77;}
.table tbody td.no-data {border-bottom: 0; text-align: center;}
.table-bottom {position: absolute; left: 0; bottom: 0; width: 100%; align-items: center; justify-content: space-between; padding: 16px; margin: 0;}
.pagination .page-item .page-link {width: 28px; height: 28px; padding: 0; margin: 0 2px !important; border-radius: 8px !important; border: 1px solid #DAE1ED; background: #F5F7FC; font-weight: 600; text-align: center; color: #667792; line-height: 28px;}
.pagination .page-item.active .page-link {border: 0; background: linear-gradient(to right, #06B6D4, #8B5CF6); color: #fff;}
.pagination .page-item i {font-size: 16px; color: #667792;}

input[name="chk-toggle"] {visibility: hidden; position: absolute; left: -999em; width: 0; height: 0;}
input[name="chk-toggle"] + label {position: relative; padding-left: 36px; color: #505F77;}
input[name="chk-toggle"] + label::before {position: absolute; left: 0; top: 50%; content: ''; width: 30px; height: 14px; border-radius: 7.5px; background: #505F77; transform: translateY(-50%);}
input[name="chk-toggle"] + label::after {position: absolute; left: 0; top: 50%; content: ''; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #505F77; background: #fff; transform: translateY(-50%); box-shadow: 0 2px 6px 0 rgba(0,0,0,.25); transition: all .2s ease;}
input[name="chk-toggle"]:checked + label {color: #22A5BF;}
input[name="chk-toggle"]:checked + label::before {background: #1FC0D9;}
input[name="chk-toggle"]:checked + label::after {left: 11px; border: 1px solid #1FC0D9;}
.table input[name="chk-toggle"] + label {padding-left: 30px;}
.table input[name="chk-toggle"] + label::before {width: 24px; height: 12px;}
.table input[name="chk-toggle"] + label::after {width: 16px; height: 16px;}
.table input[name="chk-toggle"]:checked + label::after {left: 9px;}

.table input[name="chk-user"] {visibility: hidden; position: absolute; left: -999em; width: 0; height: 0;}
.table input[name="chk-user"] + label {width: 16px; height: 16px; border-radius: 4px; border: 1px solid #505F77; line-height: 16px; vertical-align: -3px;}
.table input[name="chk-user"] + label i {display: none; font-size: 13px; color: #fff; vertical-align: middle;}
.table input[name="chk-user"]:checked + label {background: #5796E4; border: 1px solid #5796E4;}
.table input[name="chk-user"]:checked + label i {display: block;}

/* layer */
.pop {position: absolute; top:0; left: 0; width: 100%; height: 100%; display: none; z-index: 9999;}
.pop .bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11,21,36,.5); filter: alpha(opacity=50); z-index: -1}

.pop .close {position: absolute; top: 13px; right: 13px; font-weight: bold; opacity: 1; z-index: 1;}
.pop .close i::before {font-weight: 600 !important; font-size: 24px; color: #2B394F;}

.pop .btnarea {display: flex; justify-content: center; text-align: center; flex-wrap: nowrap; padding: 30px 0 20px; margin-bottom: 0;}
.pop .btnarea a {display: flex; min-width: 45px; padding: 6px; justify-content: center; align-items: center; margin: 0 5px; border-radius: 6px; font-weight: 600; font-size: 12px;}
.pop .btnarea .common_ac {margin-left: 8px; color: #fff; background:  linear-gradient(to right, #06B6D4, #8B5CF6); box-shadow: 0 10px 15px -3px rgba(6,182,212,.25), 0 4px 6px -4px rgba(6,182,212,.25);}

.pop a:hover {color: #4541E8;}

.common_modal {display: none;}
.common_modal .modal_content {position: fixed; top: 50%; left: calc(50% + 110px); text-align: left; color: #2B394F; transform: translate(-50%, -50%); min-width: 320px; padding: 16px; height: auto;
  background: #FAFCFF; border-radius: 12px; box-shadow: 0 4px 34px 0 rgba(16,30,71,.2); box-sizing: border-box; z-index: 9999;}
.enlarged .common_modal .modal_content {left: calc(50% + 27.5px);}
  .common_modal dl.info_txt {margin-bottom: 0;}
  .common_modal dl.info_txt dt {padding-bottom: 4px; padding-right: 20px; font-weight: bold; font-size: 14px; color: #2B394F;}
  .common_modal dl.info_txt dd {padding-bottom: 12px; font-weight: normal; color: #667792; line-height: 1.4;}
  .common_modal dl.info_txt dd li {list-style: disc; margin-left: 15px;}
  .common_modal dl.info_txt dd.co {margin-top: 8px; padding: 8px 0 0; border-top:1px solid #E1E1E1;}

  .common_modal .btnarea {padding: 0; justify-content: end;}
  .common_modal .btnarea a {margin: 0;}

  /* AlertLayer(#layer-alert) — 메시지를 가운데 정렬하고 X 아이콘과 간격 확보 */
  #layer-alert .modal_content {text-align: center; padding: 30px 24px 18px;}
  #layer-alert dl.info_txt dt {padding-right: 0; text-align: center;}
  #layer-alert dl.info_txt dd {text-align: center;}
  #layer-alert .btnarea {justify-content: center; padding-top: 6px;}


.toast_pop {position: fixed; display: none; width: max-content; max-width: min(90vw, 460px); padding: 12px 16px; left: calc(50% + 110px); top: 100px; font-size: 14px; font-weight: 700; color: #fff; transform: translateX(-50%); border-radius: 12px; background: linear-gradient(277deg, #1A1C26 -55.72%, #303860 176.05%); box-shadow: 0 4px 20px 0 rgba(93, 83, 101, 0.30), 4px 7px 25px 0 rgba(119, 74, 153, 0.20); z-index: 9999;}
.enlarged .toast_pop {left: calc(50% + 27.5px);}
  .toast_pop .modal_content {display: flex; justify-content: space-between; align-items: center; gap: 16px;}
    .toast_pop .modal_content>p {display: flex; align-items: center; min-width: 0; margin: 0;}
    .toast_pop .modal_content>p>img {margin-right: 7px; flex-shrink: 0;}
    .toast_pop .modal_content>a {color:#fff;}
    .toast_pop .close {opacity: 1;}

/* modal */
.modal {padding-left: 220px !important;}
.enlarged .modal {padding-left: 55px !important;}
.modal .modal-bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(11,21,36,.5);}
.modal .modal-header .close {padding: .8rem 1rem; font-weight: normal; font-size: 24px; color: #2B394F; opacity: 1;}
.modal .modal-content {background: #FAFCFF; border-radius: 12px;}
.modal .modal-content .modal-header {padding-right: 0; border-bottom: 0;}
.modal .modal-content .modal-header h4 {font-weight: bold; font-size: 14px; color: #2B394F;}
.modal .modal-content .form-group {margin-bottom: 6px;}
.modal .modal-content .col-form-label {font-weight: normal; color: #667792; cursor: auto;}
.modal .modal-content input {max-height: 36px; color: #2A384E;}
.modal .modal-content input[readonly] {color: #667792;}
.modal .modal-content textarea {color: #2A384E; resize: none;}
.modal .modal-content textarea[readonly] {background: #F5F7FC;}
.modal .modal-tab {overflow: hidden; width: 100%; padding: 4px; background: #F5F7FC; border-radius: 100px;}
.modal .modal-tab button {float: left; display: inline-block; width: 50%; min-height: 32px; border-radius: 100px; font-weight: 500; font-size: 12px; color: #38526B;}
.modal .modal-tab button.active {background: #fff; box-shadow: 0 0 5px 0 #CCD8F6; font-weight: 500; color: #16222E;}
.modal .table-wrap {min-height: auto; padding-bottom: 48px; box-shadow: none; font-size: 14px;}
.modal .table-wrap .table tbody tr:last-child td {border-bottom: 0;}
.modal .table-wrap .list-loading {top: 70%; transform: translate(-50%, -50%);}
.modal .table-wrap .table-bottom {padding: 10px; font-size: 11px;}
.modal-backdrop {display: none;}
#advertiser #modal-reg .modal-content .modal-body {overflow-y: auto; max-height: calc(100vh - 170px);}
#advertiser #modal-user {z-index: 99999;}
#advertiser #modal-user .modal-bg {opacity: 0;}
#advertiser #modal-user.show .modal-bg {opacity: 1; transition: all .3s linear;}
#advertiser #modal-user.show + #modal-reg .modal-bg {opacity: 0; transition: all .3s linear;}
#advertiser #modal-user .table-responsive {overflow-y: auto; max-height: calc(100vh - 220px); background: linear-gradient(to bottom, #EBF0FA, #fff);}
#advertiser #modal-user .table {min-height: 120px;}
#advertiser #modal-user .table thead th {position: sticky; top: 0;}
#advertiser #modal-user .table {background: #fff;}
.table-responsive::-webkit-scrollbar {width: 7px; height: 7px;}
.table-responsive::-webkit-scrollbar-track {background: #fff; margin: 49px 0 10px;}
.table-responsive::-webkit-scrollbar-thumb {background: #ddd; border-radius: 10px;}
.table-responsive::-webkit-scrollbar-thumb:hover {background: #888;}

#contents #modal-detail .modal-dialog {max-width: 720px;}
#modal-detail .modal-contents {display: none;}
#modal-detail .modal-contents.modal-contents1 {display: block;}
#modal-detail .contents-time>ul {margin-top: 8px;}
#modal-detail .contents-time>ul>li {background: #F5F7FC; padding: 5px 8px; margin-bottom: 8px; color: #505F77;}
#modal-detail .contents-time>ul>li:last-child {margin-bottom: 0;}
#modal-detail .contents-time>ul>li .time-row {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#modal-detail .contents-time>ul>li span {text-align: center; font-size: 10px;}
#modal-detail .contents-time>ul>li span[class*="time"] {min-width: 45px;}
#modal-detail .contents-time>ul>li .time-row>p {flex: 1;}
#modal-detail .contents-time a {padding: 2px 8px; border-radius: 6px; background: #DAE1ED;}
#modal-detail .contents-time a i {color: #505F77;}
/* 수집건 3단계(원문수집/언급분석/인용분석) 상태 점 */
#modal-detail .contents-time>ul>li .step-row {display: flex; gap: 14px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #DAE1ED;}
#modal-detail .contents-time .step {display: inline-flex; align-items: center; gap: 4px; font-size: 10px; white-space: nowrap; color: #B0B8C8;}
#modal-detail .contents-time .step .dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 1.5px solid #C5CCD8;}
#modal-detail .contents-time .step.is-done {color: #2B394F;}
#modal-detail .contents-time .step.is-done .dot {background: #2BB673; border-color: #2BB673;}
#modal-detail .contents-time .step.is-progress {color: #2B394F;}
#modal-detail .contents-time .step.is-progress .dot {background: linear-gradient(90deg, #F3A93C 0 50%, #fff 50% 100%); border-color: #F3A93C;}
#modal-detail .contents-time .step.is-fail {color: #FF3333;}
#modal-detail .contents-time .step.is-fail .dot {background: #FF3333; border-color: #FF3333;}

#modal-detail .modal-contents2 .btn-reset-modal {position: absolute; left: 323px; top: 0;}
#modal-detail .modal-contents2 .datepicker_wrap input {padding-left: 36px;}
#modal-detail .modal-contents2 .datepicker_wrap>i {position: absolute; left: 13px; top: 50%; font-size: 16px; z-index: 10; transform: translateY(-50%);}
#modal-detail .modal-contents2 .card {padding: 12px; border: 0; box-shadow: 0 2px 10px 0 rgba(222, 227, 238, .8), 0 0 1px 1px rgba(222, 227, 238, .1);}
#modal-detail .modal-contents2 .card h5 {margin-bottom: 9px; font-weight: bold; font-size: 12px; color: #2A384E;}
#modal-detail .modal-contents2 .card h5>em {font-weight: 500;}
#modal-detail .modal-contents2 .card h5>span {display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%;}
#modal-detail .modal-contents2 .card:nth-child(1) h5>span {background: #76B2FD;}
#modal-detail .modal-contents2 .card:nth-child(2) h5>span {background: #F3C476;}
#modal-detail .modal-contents2 .card ul {}
#modal-detail .modal-contents2 .card ul>li {margin-bottom: 8px; padding: 8px; background: #F5F7FC; border-radius: 12px;}
#modal-detail .modal-contents2 .card ul>li:last-child {margin-bottom: 0;}
#modal-detail .modal-contents2 .card ul>li>.tit {position: relative;}
#modal-detail .modal-contents2 .card ul>li>.tit>span {display: block; font-weight: 500; font-size: 12px; color: #2B394F; padding-right:20px;}
#modal-detail .modal-contents2 .card ul>li>.cont {display: none; margin-top: 8px; padding: 12px; background: #fff; border-radius: 8px; font-size: 11px; color: #505F77;}
#modal-detail .modal-contents2 .card ul>li.on>.cont {display: block;}
#modal-detail .modal-contents2 .card ul>li .btn-toggle {position: absolute; right: 0; top: 10px; width: 16px; height: 16px; padding: 4px; background: url('/images/icn_select_arrow.png') no-repeat; background-size: 100%;}
#modal-detail .modal-contents2 .card ul>li.on .btn-toggle {transform: rotate(180deg);}
#modal-detail .modal-contents2 .card.no-data {min-height: 400px; text-align: center; justify-content: center; color: #505F77;}
#modal-detail .modal-contents2 .table th,
#modal-detail .modal-contents2 .table td {padding: .45rem; font-weight: normal !important; font-size: 12px;}
#modal-detail .modal-contents2 .table td {}
#modal-detail .modal-contents2 .table td.td-title span {max-width: 340px;}

#contents #modal-detail .table-wrap {min-height: 118px;}
#contents #modal-detail .modal-contents2 h5 {font-size: 14px; margin-bottom: 4px;}
#contents #modal-detail .modal-contents2 h5 + span {color: #667792;}
#contents #modal-detail .modal-contents2 .citation-box>.tit-box {display: flex; justify-content: space-between; align-items: center;}
#contents #modal-detail .modal-contents2 .citation-box>.tit-box>div {color: #2A384E;}
#contents #modal-detail .modal-contents2 .citation-box>.tit-box>div .rate {margin-left: 2px; font-weight: bold; font-size: 22px;}
#contents #modal-detail .modal-contents2 .citation-box>.chart-box {margin-top: 5px;}
#contents #modal-detail .modal-contents2 .citation-box>.chart-box span {display: inline-block; height: 8px; border-radius: 100px; box-shadow: inset 0 0 0 1px #fff; font-size: 0; box-sizing: border-box;}
.modal-contents2 .citation-box>.chart-box span:nth-child(1) {background: #76B2FD;}
.modal-contents2 .citation-box>.chart-box span:nth-child(2) {background: #F3C476;}
.modal-contents2 .citation-box>.chart-box span:nth-child(3) {background: #FF9696;}
/* citation-box chart-box 툴팁 */
.citation-box>.chart-box span {cursor: pointer;}
.citation-chart-tooltip {position: fixed; display: flex; align-items: center; gap: 6px; background: #fff;
  border-radius: 6px; padding: 4px 8px; font-size: 12px; color: #2B394F; white-space: nowrap; pointer-events: none;
  z-index: 9999; box-shadow: 0 2px 6px rgba(0,0,0,0.1),  0 1px 1px rgba(0,0,0,.04);
}
.citation-chart-tooltip .dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%;}


/* dropzone */
.dropzone {min-height: auto; padding: 16px; border: 1px dashed #DAE1ED;}
.dropzone.on {background: #EBF0FA;}
.dropzone .dz-message {margin: 0; text-align: center; font-size: 14px; color: #667792;}
.dropzone .dz-message i {margin-bottom: 6px;}
.dropzone_list li {position: relative; width: 80px; height: 80px; background: #fff; border-radius: 8px; box-shadow: 0 2px 2px 0 rgba(95,111,151,.05), 0 2px 6px 0 rgba(116,145,217,0.16);}
.dropzone_list li>p {overflow: hidden; width: 100%; height: 100%; align-content: center; text-align: center;}
.dropzone_list li>p>img {width: auto; height: auto; max-width: 100%; max-height: 100%;}
.dropzone_list li>a.close {position: absolute; right: -4px; top: -4px; font-size: 18px; opacity: 1;}

/* advertiser */
.content-page#advertiser .content-row>div {margin-bottom: 16px;}
.content-page#advertiser .content-row>div .card {height: 100%; margin-bottom: 0; cursor: pointer;}
  .content-row>div .card .card-tit {display: flex; gap: 8px; align-items: center; justify-content: space-between;}
  .content-row>div .card .card-tit>h3 {display: flex; gap: 8px; align-items: center; font-weight: bold; font-size: 16px;}
  .content-row>div .card .card-tit>h3 .thumbnail {overflow: hidden; width: 40px; height: 40px; align-content: center; border-radius: 8px; text-align: center; box-shadow: 0 2px 2px 0 rgba(95,111,151,.05), 0 2px 6px 0 rgba(116,145,217,.16);}
  .content-row>div .card .card-tit>h3 .thumbnail img {max-width: 100%;}
  .content-row>div .card .card-chip {margin: 7px 0 16px;}
  .content-row>div .card .card-chip a {display: inline-block; margin-right: 4px; margin-top: 4px; padding: 2px 8px; background: #EBF0FA; border-radius: 4px; border: 1px solid #DAE1ED; font-size: 12px; color: #505F77;}
  .content-row>div .card .card-chip a:last-child {margin-right: 0;}
  .content-row>div .card .card-chip a>i {margin-left: 3px; font-size: 10px;}
  .content-row>div .card>.row {gap: 8px;}
  .content-row>div .card>.row>div {flex: 0 0 calc(33.333% - 5.4px); max-width: calc(33.333% - 5.4px); padding: 12px 12px 10px; background: #F5F7FC; border-radius: 12px; border: 1px solid #EBF0FA;}
  .content-row>div .card>.row>div>h4 {margin-bottom: 4px; font-size: 12px; color: #505F77;}
  .content-row>div .card>.row>div>p>span {font-weight: bold; font-size: 24px; color: #18263F;}
  .content-row>div .card>.row>div>p>span.unit {margin-left: 2px; font-weight: normal; font-size: 14px; color: #2B394F;}
  .content-row>div .card>.row>div:last-child>p>span {color: #22A5BF;}
  .content-row>div .card.disabled>div.card-tit h3,
  .content-row>div .card.disabled>div.card-chip,
  .content-row>div .card.disabled>div.row {opacity: .5; pointer-events: none;}

  .input-domain-list>li {display: flex; gap: 8px; margin-bottom: 4px;}
  .input-domain-list>li:last-child {margin-bottom: 0;}
  .input-user-list {overflow-y: auto; max-height: 190px; margin-top: 4px; font-size: 0;}
  .input-user-list>li {display: inline-block; margin-right: 8px; margin-top: 8px; padding: 2px 4px 2px 6px; border-radius: 4px; border: 1px solid #DAE1ED; background: #EBF0FA; font-size: 14px; color: #2B394F;}
  .input-user-list>li:last-child {margin-right: 0;}
  .input-user-list>li a {display: inline-block; font-size: 16px; color: #2B394F; vertical-align: middle;}
  .input-user-list>li.inactive {border-color: #F5C2C7; background: #FDEDEE; color: #B42318;}
  .input-user-list>li.inactive a {color: #B42318;}
  .input-user-list>li .tag-inactive {margin-left: 2px; padding: 0 4px; border-radius: 3px; background: #B42318; font-size: 11px; color: #fff; vertical-align: middle;}
  .input-user-list::-webkit-scrollbar {width: 7px; height: 7px;}
  .input-user-list::-webkit-scrollbar-track {background: #fff;}
  .input-user-list::-webkit-scrollbar-thumb {background: #ddd; border-radius: 10px;}
  .input-user-list::-webkit-scrollbar-thumb:hover {background: #888;}

/* contents */
#contents .summarybox .card {height: calc(100% - 16px);}
#contents .summarybox .text {position: relative; width: 100%;}
#contents .summarybox .text-box {}
#contents .summarybox .text-box>div:nth-child(1) {width: 70%; padding-left: 22px; font-weight: bold; color: rgba(51,65,85,.5); line-height: 20px;}
#contents .summarybox .text-box>div:nth-child(1)::before {position: absolute; left: 0; top: 4px; content: ''; width: 18px; height: 18px; background: url('/images/icn_contents_most.png') no-repeat;}
#contents .summarybox .text-box>div:nth-child(2) {width: 30%; text-align: right; font-weight: bold;}
#contents .summarybox .text-box>div:nth-child(2) * {color: #0069EB;}
#contents .summarybox .text-box span.title {font-size: 14px;}
#contents .summarybox .text-box span.count {font-size: 24px;}
#contents .summarybox .no-data {margin-top: 10px; font-weight: 600; font-size: 14px; color: rgba(51,65,85,.5);}
#contents .searchbox {position: relative;}
/* 우측 액션 버튼 그룹 — 엑셀 다운로드 / 콘텐츠 등록을 가로로 나란히 배치 */
#contents .searchbox .contents-top-actions {position: absolute; right: 8px; bottom: 2px; display: flex; flex-direction: row; align-items: center; gap: 6px;}
#contents .searchbox .contents-top-actions .btn {width: auto; justify-content: center; margin: 0; white-space: nowrap;}
#contents .searchbox .btn-submit i {font-size: 14px; color: #fff; vertical-align: middle;}
#contents .table-wrap {min-height: calc(100vh - 354px);}
#contents .list-loading {top: calc(50vh - 240px);}
#contents .table {table-layout: fixed;}
/* 정렬 가능한 헤더 (공통: 콘텐츠 관리 / 인사이트 상세) — 한 줄 유지 + 정렬버튼 상태 표시.
   비활성 흐림, 활성 강조, 오름차순이면 아이콘 회전. (th.th-sort 가 붙은 헤더만 — 모달 영향 없음) */
.table thead th.th-sort {white-space: nowrap;}
.table thead th.th-sort .btn-table-sort {opacity: .75; cursor: pointer; vertical-align: middle; margin-left: 3px; transition: opacity .15s, transform .15s;}
.table thead th.th-sort .btn-table-sort:hover {opacity: .9;}
.table thead th.th-sort .btn-table-sort.active {opacity: 1;}
.table thead th.th-sort .btn-table-sort.asc {transform: rotate(180deg);}
/* 콘텐츠 관리 — 좁은 플랫폼 컬럼: 칩 축소 + 헤더 패딩 축소 */
#contents .table thead th.th-sort {padding-left: 6px; padding-right: 6px;}
#contents .table thead th.th-sort span[class*="platform-chip"] {padding: 2px 6px; font-size: 11px;}
#contents .table col:nth-child(n+4):nth-child(-n+8) {min-width: 100px;}
#contents .table td:nth-child(n+4):nth-child(-n+7) {font-weight: bold;}
#contents .table td.td-title span,
#contents .table td.td-url a {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%;}

/* setting */
.content-page#setting .content {max-width: 680px; margin: 0 auto;}
.content-page#setting .card {padding: 0;}
.content-page#setting .card .setting-tit {padding: 16px;}
.content-page#setting .card .setting-tit h3 {font-weight: bold; font-size: 14px; margin-bottom: 4px; color: #18263F;}
.content-page#setting .card .setting-tit p {font-size: 12px; color: #505F77;}
.content-page#setting .card .setting-row {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid #EBF0FA;}
.content-page#setting .card .setting-row .tit {margin-bottom: 2px; font-weight: 600; color: #2B394F;}
.content-page#setting .card .setting-row .desc {font-size: 10px; color: #505F77;}
.content-page#setting .card .setting-row .custom_select.disabled .selected {width: 80px; height: 30px; padding: 5px 29px 5px 9px; font-size: 12px; opacity: 1;}


@media (max-width: 1400px) {
  #insight .row-chart-box .col-4 {flex: 0 0 50%; max-width: 50%;}
  #insight .row-chart-box .col-4:last-child {flex: 0 0 100%; max-width: 100%;}
}
@media (max-width: 1300px) {
  #contents .searchbox .contents-top-actions {position: static; margin-left: auto; margin-top: 5px;}
  #contents .table {table-layout: auto;}
  #contents .table td.td-title span,
  #contents .table td.td-url a {max-width: 150px;}
}
@media (max-width: 1080px) {
  #insight .row-chart-box .col-4 {flex: 0 0 100%; max-width: 100%;}
  #insight .row-chart-box .col-5 {flex: 0 0 100% !important; max-width: 100% !important;}
  #insight .row-chart-box .col-2 {flex: 0 0 100%; max-width: 100%;}
  #insight .row-chart-box .col-7 {flex: 0 0 100%; max-width: 100%;}
  #insight .row-chart-box .col-9 {flex: 0 0 100%; max-width: 100%;}

  #contents .table td.td-title span {max-width: 200px;}
  #contents .table td.td-url a {max-width: 180px;}
}
@media (max-width: 776px) {
  /* 콘텐츠 상세 모달(720px)이 화면 폭보다 커지는 구간 — 좌우 여백 유지하며 화면에 맞춤 */
  #contents #modal-detail .modal-dialog {max-width: calc(100% - 3.5rem);}
}
@media (max-width: 767px) {
  .modal {padding-left: 15px !important;}
}
@media (max-width: 540px) {
  .page-title-box .page-title-right {margin-top: -3px;}
  #modal-detail .modal-contents2 .input-group.datepicker_wrap {max-width: none;}
  #modal-detail .modal-contents2 .btn-reset-modal {position: static;}
}