/* =====================================================================
   ABI 광고주 대시보드 전용 CSS
   - 포인트 컬러: #FDD100 (기존 프로젝트 브랜드 옐로우), 다크: #221815
   - CM theme.css와 독립 (본 파일만 로드)
   - 옐로우는 "주의를 끌어야 하는 곳"에만 사용: 선택 상태/광고비/클릭 유도/구분선
   ===================================================================== */

:root {
    --abi-accent: #FDD100;
    --abi-accent-soft: #FFF8D6;
    --abi-dark: #221815;
    --abi-text: #2b2b2b;
    --abi-text-sub: #8a8a8a;
    --abi-border: #ececec;
    --abi-bg: #f7f7f5;
    --abi-white: #ffffff;
    --abi-danger: #ff253a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: "Pretendard", "Pretendard Variable", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    font-size: 14px;
    color: var(--abi-text);
    background: var(--abi-bg);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* 공통 로고 마크 (노란 사각 포인트) */
.abi-logo-mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--abi-accent);
    border-radius: 3px;
}

/* ---------------------------------------------------------------------
   로그인 페이지
   --------------------------------------------------------------------- */
.abi-login-body {
    background: var(--abi-dark);
}

.abi-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.abi-login-box {
    width: 100%;
    max-width: 380px;
    background: var(--abi-white);
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.abi-login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.abi-login-logo h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--abi-dark);
}

.abi-form-group {
    margin-bottom: 16px;
}

.abi-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--abi-text-sub);
    margin-bottom: 6px;
}

.abi-form-group input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid var(--abi-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
}

.abi-form-group input:focus {
    border-color: var(--abi-accent);
    box-shadow: 0 0 0 3px var(--abi-accent-soft);
}

.abi-login-msg {
    color: var(--abi-danger);
    font-size: 13px;
    margin: 4px 0 12px;
}

.abi-btn-login {
    width: 100%;
    height: 46px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--abi-dark);
    background: var(--abi-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s;
}

.abi-btn-login:hover {
    filter: brightness(0.95);
}

/* ---------------------------------------------------------------------
   ① 대시보드 헤더
   --------------------------------------------------------------------- */
.abi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 28px;
    background: var(--abi-dark);
    color: var(--abi-white);
    position: sticky;
    top: 0;
    z-index: 100;
}

.abi-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.abi-header-title {
    font-size: 16px;
    font-weight: 800;
}

.abi-header-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.abi-advertiser-chip {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 3px 10px;
}

.abi-user-chip {
    font-size: 13px;
    color: var(--abi-accent);
    font-weight: 700;
}

.abi-btn-logout {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 5px 12px;
    transition: all 0.15s;
}

.abi-btn-logout:hover {
    color: var(--abi-dark);
    background: var(--abi-accent);
    border-color: var(--abi-accent);
}

.abi-main {
    /* 고정 최대폭 없이 좌우 40px 여백으로 화면 전체 활용 */
    max-width: none;
    margin: 0;
    padding: 24px 40px 60px;
}

/* ---------------------------------------------------------------------
   ② 조회 조건 바 (기간 프리셋 + 직접 입력 + 캠페인 검색)
   --------------------------------------------------------------------- */
.abi-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--abi-white);
    border: 1px solid var(--abi-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.abi-period-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.abi-presets {
    display: flex;
    gap: 4px;
    background: var(--abi-bg);
    border-radius: 8px;
    padding: 3px;
}

.abi-presets button {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--abi-text-sub);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.abi-presets button.on {
    background: var(--abi-dark);
    color: var(--abi-accent);
}

.abi-presets button:not(.on):hover {
    color: var(--abi-text);
}

.abi-date-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.abi-date-inputs input {
    height: 36px;
    border: 1px solid var(--abi-border);
    border-radius: 8px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--abi-text);
    background: var(--abi-white);
}

.abi-tilde {
    color: var(--abi-text-sub);
}

.abi-search-group {
    display: flex;
    gap: 8px;
}

.abi-search-box {
    position: relative;
}

.abi-search-box input {
    height: 38px;
    width: 250px;
    border: 1px solid var(--abi-border);
    border-radius: 8px;
    padding: 0 12px 0 34px;
    font-family: inherit;
    font-size: 13.5px;
}

.abi-search-box input:disabled {
    background: var(--abi-bg);
    color: var(--abi-text-sub);
    cursor: not-allowed;
}

.abi-search-box input:focus,
.abi-date-inputs input:focus {
    outline: none;
    border-color: var(--abi-accent);
    box-shadow: 0 0 0 3px var(--abi-accent-soft);
}

/* 돋보기 아이콘 (이미지 없이 CSS로) */
.abi-search-box::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 11px;
    width: 14px;
    height: 14px;
    border: 2px solid #bbb;
    border-radius: 50%;
    box-sizing: border-box;
}

.abi-search-box::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 24px;
    width: 7px;
    height: 2px;
    background: #bbb;
    transform: rotate(45deg);
    border-radius: 2px;
}

.abi-btn-search {
    height: 38px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--abi-dark);
    background: var(--abi-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s;
}

.abi-btn-search:hover {
    filter: brightness(0.95);
}

/* ---------------------------------------------------------------------
   뷰 탭 (일자별 리포트 / 요약 리포트)
   --------------------------------------------------------------------- */
.abi-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.abi-tabs button {
    height: 40px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--abi-text-sub);
    background: var(--abi-white);
    border: 1px solid var(--abi-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
}

.abi-tabs button:not(.on):hover {
    border-color: var(--abi-accent);
    color: var(--abi-text);
}

.abi-tabs button.on {
    background: var(--abi-dark);
    color: var(--abi-accent);
    border-color: var(--abi-dark);
}

/* ---------------------------------------------------------------------
   ③ 컨텍스트 영역 (Breadcrumb + 레벨 타이틀 + 상위로)
   --------------------------------------------------------------------- */
.abi-context {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.abi-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 12.5px;
    margin-bottom: 6px;
    min-height: 20px;
}

.abi-breadcrumb .crumb {
    color: var(--abi-text-sub);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    transition: all 0.12s;
}

.abi-breadcrumb .crumb:hover {
    background: var(--abi-accent-soft);
    color: var(--abi-dark);
}

.abi-breadcrumb .crumb.current {
    color: var(--abi-dark);
    font-weight: 700;
    cursor: default;
}

.abi-breadcrumb .crumb.current:hover {
    background: none;
}

.abi-breadcrumb .sep {
    color: #ccc;
    font-size: 11px;
    padding: 0 1px;
}

.abi-level-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--abi-dark);
}

.abi-level-title em {
    font-style: normal;
    border-bottom: 3px solid var(--abi-accent);
    padding-bottom: 1px;
}

.abi-btn-up {
    display: none;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--abi-text);
    background: var(--abi-white);
    border: 1px solid var(--abi-border);
    border-radius: 8px;
    cursor: pointer;
}

.abi-btn-up:hover {
    border-color: var(--abi-accent);
    background: var(--abi-accent-soft);
}

.abi-btn-up.show {
    display: inline-flex;
}

/* ---------------------------------------------------------------------
   ④ KPI 카드 (총합계)
   --------------------------------------------------------------------- */
.abi-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.abi-kpi {
    background: var(--abi-white);
    border: 1px solid var(--abi-border);
    border-radius: 12px;
    padding: 18px 20px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.abi-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--abi-accent);
}

.abi-kpi .label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--abi-text-sub);
    margin-bottom: 8px;
}

.abi-kpi .value {
    font-size: 26px;
    font-weight: 800;
    color: var(--abi-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.abi-kpi .unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--abi-text-sub);
    margin-left: 2px;
}

.abi-kpi .sub {
    font-size: 11.5px;
    color: var(--abi-text-sub);
    margin-top: 6px;
}

/* 광고비 카드는 가장 중요한 숫자 - 옐로우 그라데이션 강조 */
.abi-kpi.cost::before {
    background: var(--abi-dark);
}

.abi-kpi.cost {
    background: linear-gradient(135deg, #fffef5 0%, var(--abi-accent-soft) 100%);
}

.abi-kpi.cost .value {
    color: #7a6400;
}

.abi-kpi .badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #7a6400;
    background: var(--abi-accent-soft);
    border: 1px solid var(--abi-accent);
    border-radius: 10px;
    padding: 1px 8px;
    vertical-align: 2px;
}

/* ---------------------------------------------------------------------
   ⑤ 리포트 테이블 (3레벨 공용)
   --------------------------------------------------------------------- */
.abi-table-card {
    background: var(--abi-white);
    border: 1px solid var(--abi-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.abi-table-scroll {
    overflow: auto;
    max-height: 520px;
}

.abi-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 680px;
}

.abi-table th,
.abi-table td {
    padding: 12px 18px;
    white-space: nowrap;
    border-bottom: 1px solid var(--abi-border);
}

.abi-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--abi-dark);
    color: var(--abi-white);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;    /* 헤더 컬럼명 가운데 정렬 (본문 셀 정렬은 유지) */
    user-select: none;
}

.abi-sort-arrow {
    font-size: 10px;
    color: var(--abi-accent);
    margin-left: 3px;
}

/* 총합계 행 - 헤더 바로 아래 고정 */
.abi-table tr.total-row td {
    position: sticky;
    top: 43px;    /* thead 높이 */
    z-index: 2;
    background: var(--abi-accent-soft);
    font-weight: 800;
    color: var(--abi-dark);
    border-bottom: 2px solid var(--abi-accent);
}

.abi-table td.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.abi-table td.col-name {
    text-align: left;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 데이터 행 - 클릭 가능 어포던스 */
.abi-table tr.data-row.clickable {
    cursor: pointer;
}

.abi-table tr.data-row.clickable:hover td {
    background: #fffdf0;
}

.abi-table tr.data-row.clickable td.col-name .nm {
    color: var(--abi-dark);
    font-weight: 700;
}

.abi-table tr.data-row td.col-name .chev {
    color: #c9b400;
    font-weight: 800;
    margin-left: 6px;
    font-size: 12px;
}

.abi-table tr.data-row:not(.clickable) td.col-name .nm {
    font-weight: 600;
}

/* 광고비 비중 바 (현재 비활성 - abi-dashboard.js의 SHOW_COST_SHARE 플래그로 표시 전환 가능) */
.abi-table td.cost-cell {
    position: relative;
}

.abi-cost-bar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--abi-accent-soft);
    z-index: 0;
    border-left: 2px solid var(--abi-accent);
}

.abi-cost-val {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.abi-cost-share {
    font-size: 11px;
    color: var(--abi-text-sub);
    margin-left: 6px;
    position: relative;
    z-index: 1;
}

.abi-table tr.empty-row td {
    text-align: center;
    color: var(--abi-text-sub);
    padding: 48px 16px;
}

/* 일자별 리포트 테이블 (고밀도: 11px + 축소 패딩) */
.abi-table-daily {
    min-width: 960px;
    font-size: 11px;
}

.abi-table-daily th,
.abi-table-daily td {
    padding: 8px 10px;
}

.abi-table-daily thead th {
    font-size: 11.5px;
    line-height: 15px;
}

/* 총합계 행 sticky 오프셋: 축소된 thead 높이(패딩 8*2 + 라인 15 + 보더 1 = 32px)에 맞춤 */
.abi-table-daily tr.total-row td {
    top: 32px;
    font-size: 11.5px;
}

.abi-table-daily td.col-name {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abi-table-daily .col-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.abi-table-daily td.col-num {
    font-weight: 600;
}

/* rowspan 병합 셀 (일자/캠페인명/애드그룹명) */
.abi-table-daily td.cell-group {
    vertical-align: top;
    background: var(--abi-white);
    border-right: 1px solid var(--abi-border);
}

/* 일자 경계 구분선 (내림차순 리스트에서 날짜가 바뀌는 지점) */
.abi-table-daily tr.day-break td {
    border-top: 2px solid #ddd;
}

.abi-loading {
    text-align: center;
    color: var(--abi-text-sub);
    padding: 32px;
}

/* 일자별 카드: 테이블 높이를 뷰포트 잔여 영역 전체로 활용
   (헤더 56 + 상단 패딩/조회영역/탭/툴바/하단 안내 여백 합산 오프셋) */
#dailyCard .abi-table-scroll {
    max-height: calc(100vh - 340px);
    min-height: 320px;
}

/* 카드 상단 툴바 (엑셀 다운로드 등) */
.abi-card-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    background: #fcfcfa;
    border-bottom: 1px solid var(--abi-border);
}

.abi-btn-excel {
    height: 32px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--abi-dark);
    background: var(--abi-accent);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: filter 0.15s;
}

.abi-btn-excel:hover {
    filter: brightness(0.95);
}

/* 하단 안내 문구 (행 클릭 유도) */
.abi-hint {
    text-align: center;
    font-size: 12px;
    color: var(--abi-text-sub);
    padding: 14px;
    background: #fcfcfa;
    border-top: 1px solid var(--abi-border);
}

/* ---------------------------------------------------------------------
   반응형
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .abi-main {
        padding: 16px 12px 32px;
    }

    .abi-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .abi-search-box input {
        width: 100%;
        flex: 1;
    }

    .abi-kpi-row {
        grid-template-columns: 1fr;
    }
}