/* 광고 수익성 모델 (/admin/ads-profit/) 전용
   공통: style.css → components.css → admin.css → 이 파일 */

.ap-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.ap-card-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ap-card-title { font-size: 15px; color: var(--text); }
.ap-card-sub, .ap-muted { font-size: 12px; color: var(--text-mid); }
.ap-card-title .ap-muted { font-size: 12px; }
.ap-resync-btn { margin-left: auto; }

/* 입력 그리드 */
.ap-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.ap-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-mid);
    min-width: 120px;
}
.ap-field-wide { min-width: 320px; flex: 1; }
.ap-hint { color: var(--text-dim); font-size: 10px; }
.ap-field input,
.ap-inline-field input {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
.ap-field input:focus,
.ap-inline-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.ap-inline-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-mid);
}
.ap-inline-field input { width: 70px; padding: 6px 8px; }
/* 날짜 입력은 YYYY-MM-DD 전체가 보이도록 넓게 */
.ap-inline-field input.ap-date { width: auto; min-width: 140px; }

/* 설정 행 (계산 입력만, 콤팩트) */
.ap-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* 지표 카드들 */
.ap-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ap-metric {
    flex: 1;
    min-width: 128px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.ap-metric-val { font-size: 17px; color: var(--text); line-height: 1.2; }
.ap-metric-label { font-size: 12px; color: var(--text-mid); margin-top: 5px; }
.ap-metric-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ap-metric.ap-good .ap-metric-val { color: var(--ok); }
.ap-metric.ap-mid .ap-metric-val { color: var(--warn); }
.ap-metric.ap-bad .ap-metric-val { color: var(--error); }
.ap-metric.ap-muted-m .ap-metric-val { color: var(--text-mid); }

/* 순이익 패널(②) 첫 카드(순이익)만 살짝 강조 */
#ap-profit-metrics .ap-metric:first-child { border-color: var(--ok); background: var(--ok-bg); }
#ap-profit-metrics .ap-metric:first-child .ap-metric-val { font-size: 20px; }

/* 표 */
.ap-table-wrap { overflow-x: auto; }
.ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-font-size, 12px);
}
.ap-table th {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.ap-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-table tbody tr:hover td { background: var(--surface2); }
.ap-table th, .ap-table td { text-align: center; white-space: nowrap; }
.ap-table th.ap-l, .ap-table td.ap-l { text-align: left; }
.ap-table td.ap-l {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-krw {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
}
.ap-dim { color: var(--text-dim); }
.ap-empty { color: var(--text-mid); padding: 16px 0; }
.ap-inactive { opacity: 0.55; }

/* 판정 색 */
.ap-good { color: var(--ok); }
.ap-mid  { color: var(--warn); }
.ap-bad  { color: var(--error); }

/* 뱃지 */
.ap-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.ap-badge.ap-good { background: var(--ok-bg); color: var(--ok); }
.ap-badge.ap-mid  { background: var(--warn-bg); color: var(--warn); }
.ap-badge.ap-bad  { background: var(--error-bg); color: var(--error); }
.ap-badge.ap-dim-badge { background: var(--surface2); color: var(--text-mid); }

/* 시나리오 강조행 */
.ap-row-good td { background: var(--ok-bg); }
.ap-row-mid td  { background: var(--warn-bg); }
.ap-note {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 12px;
    line-height: 1.6;
}

/* 공급가 누락 팝업 */
.ap-miss-btn {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
}
.ap-miss-btn:hover { border-color: var(--warn); }
.ap-dl-btn {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
}
.ap-dl-btn:hover { border-color: var(--accent); }
.ap-dl-btn:disabled { opacity: 0.5; cursor: default; }
.ap-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.ap-modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: min(680px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.ap-modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ap-modal-x {
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-mid);
    font-size: 14px;
}
.ap-modal-body {
    padding: 8px 18px 18px;
    overflow-y: auto;
}

/* ── 기간 조회 액션 바 (.ap-range-bar) ────────────────────────────
   이 바 하나에 날짜 입력 2개(YYYY-MM-DD 라 각 140px+)와 버튼 4개가 들어 있어
   한 줄 자연폭이 670px 다 — 375px 에서 페이지가 통째로 가로 스크롤됐다.
   ★ 공통 `.lgm-actions-btns`(nowrap + flex-shrink:0 + margin-left:auto)는
     "오른쪽에 버튼 몇 개"를 전제로 한 규칙이고 다른 화면 액션 바가 전부 그걸
     쓰므로 전역에서 풀지 않는다. 이 바에서만 줄바꿈을 허용한다.
   ★ 폭 조건 없이 상시 허용하는 이유 = 넘치는 폭이 뷰포트 하나로 안 정해진다.
     사이드바가 있는 900px↑ 와 없는 900px↓ 에서 본문 폭이 다르게 잡혀,
     브레이크포인트로 끊으면 그 사이 어딘가(예: 900~950)가 또 넘친다.
     자리가 있으면 한 줄 그대로, 모자라면 알아서 나뉜다. */
.ap-range-bar .lgm-actions-btns {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-end;
}

/* 좁은 화면에서는 날짜·버튼이 남는 폭을 나눠 갖게 해 2줄로 정리 */
@media (max-width: 640px) {
    .ap-range-bar .lgm-actions-btns {
        margin-left: 0;
        width: 100%;
    }
    .ap-range-bar .ap-inline-field {
        flex: 1 1 150px;
        min-width: 0;
    }
    .ap-range-bar .ap-inline-field input.ap-date {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .ap-range-bar .lgm-action-btn { flex: 1 1 auto; }
}