/* ============================================================
   sales.css — 판매 데이터 SoT (Phase M6.2)
   - 책 모달 [💰 판매] 탭 + 사이드바 [매출/ROI] 도구 공용
   - 모든 색상/폰트 token 은 styles.css 의 :root 변수 사용 (하드코딩 X)
   - 모바일 = PC 동일 동작 (768px 이하 단일 컬럼 / 카드 전환)
   ============================================================ */

/* ─── 공용 컨테이너 ─── */
.sl,
.sl-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 4px;
}

.sl--loading,
.sl-overview--loading {
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.sl__loader {
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px;
}

.sl-error {
    padding: 24px;
    text-align: center;
    color: var(--red);
    background: var(--red-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--red);
}

.sl-error p { margin-bottom: 12px; }

/* ─── 헤더 + 기간 필터 ─── */
.sl__head,
.sl-overview__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sl__title,
.sl-overview__title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.sl-overview__title-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sl-overview__hint {
    font-size: 11px;
    color: var(--text-muted);
}

.sl-period__select,
.sl-overview__filters select {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    cursor: pointer;
}

.sl-period__select:focus,
.sl-overview__filters select:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(111, 143, 114, 0.15);
}

/* ─── 요약 카드 4개 ─── */
.sl-summary,
.sl-overview__totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sl-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-height: 78px;
}

.sl-card--rev { border-left: 3px solid var(--sage); }
.sl-card--spd { border-left: 3px solid var(--amber); }
.sl-card--pos { border-left: 3px solid var(--blue); }
.sl-card--neg { border-left: 3px solid var(--red); }
.sl-card--na  { border-left: 3px solid var(--border-medium); }

.sl-card__icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.sl-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sl-card__label {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.sl-card__value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-card--neg .sl-card__value { color: var(--red); }
.sl-card--pos .sl-card__value { color: var(--blue); }

.sl-card__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* ─── 차트 영역 ─── */
.sl-charts {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}

.sl-chart {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.sl-chart__title {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}

.sl-chart__canvas-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}

.sl-chart__canvas-wrap--donut {
    height: 220px;
}

.sl-chart__canvas-wrap canvas {
    max-width: 100%;
}

.sl-chart__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

/* ─── 매출/광고 블록 ─── */
.sl-block {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.sl-block__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.sl-block__title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.sl-block__count {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ─── 입력 폼 (인라인 그리드) ─── */
.sl-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
    align-items: end;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-light);
}

.sl-form__row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sl-form__row--note,
.sl-form__row--full {
    grid-column: span 4;
}

.sl-form__label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.sl-form__input {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
}

.sl-form__input[type="number"],
.sl-form__row--num .sl-form__input {
    font-family: var(--font-mono);
}

.sl-form__input:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(111, 143, 114, 0.15);
}

.sl-form__actions {
    grid-column: span 4;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.sl-form__submit {
    padding: 7px 16px;
    font-size: 13px;
}

/* ─── 리스트 테이블 ─── */
.sl-list {
    margin-top: 6px;
}

.sl-list--empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.sl-table,
.sl-overview__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sl-table th,
.sl-table td,
.sl-overview__table th,
.sl-overview__table td {
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.sl-table th,
.sl-overview__table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-medium);
    user-select: none;
}

.sl-list__num,
.sl-overview__table .sl-list__num {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.sl-list__date {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    white-space: nowrap;
}

.sl-list__note {
    color: var(--text-secondary);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-list__utm {
    display: block;
    font-size: 10px;
    color: var(--sage-dark);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.sl-list__delete {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    padding: 0;
}

.sl-list__delete:hover {
    background: var(--red-light);
    border-color: var(--red);
    color: var(--red);
}

.sl-list__more {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
    padding: 4px;
}

/* ─── 채널/플랫폼 칩 ─── */
.sl-channel,
.sl-platform {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    white-space: nowrap;
}

.sl-channel--aladin     { background: rgba(74, 127, 191, 0.12);  color: var(--blue); }
.sl-channel--yes24      { background: rgba(111, 143, 114, 0.12); color: var(--sage-dark); }
.sl-channel--kyobo      { background: rgba(139, 111, 192, 0.12); color: var(--purple); }
.sl-channel--interpark  { background: rgba(242, 166, 90, 0.16);  color: #B8702E; }
.sl-channel--ridi       { background: rgba(74, 127, 191, 0.12);  color: var(--blue); }
.sl-channel--millie     { background: rgba(139, 111, 192, 0.10); color: var(--purple); }
.sl-channel--smartstore { background: rgba(111, 143, 114, 0.10); color: var(--sage-dark); }
.sl-channel--self       { background: var(--sage-light);          color: var(--sage-dark); }
.sl-channel--wadiz      { background: rgba(224, 82, 82, 0.10);    color: var(--red); }
.sl-channel--tumblbug   { background: rgba(242, 166, 90, 0.12);   color: #B8702E; }
.sl-channel--bookstore  { background: rgba(139, 111, 192, 0.10);  color: var(--purple); }
.sl-channel--event      { background: rgba(242, 166, 90, 0.18);   color: #B8702E; }

.sl-platform--meta         { background: rgba(74, 127, 191, 0.12);  color: var(--blue); }
.sl-platform--google       { background: rgba(224, 82, 82, 0.10);   color: var(--red); }
.sl-platform--naver_search,
.sl-platform--naver_ad     { background: rgba(111, 143, 114, 0.14); color: var(--sage-dark); }
.sl-platform--kakao        { background: rgba(242, 166, 90, 0.16);  color: #B8702E; }
.sl-platform--youtube      { background: rgba(224, 82, 82, 0.12);   color: var(--red); }
.sl-platform--influencer   { background: rgba(139, 111, 192, 0.12); color: var(--purple); }
.sl-platform--print        { background: var(--bg-tertiary); }
.sl-platform--event        { background: rgba(242, 166, 90, 0.18);  color: #B8702E; }

/* ─── 사이드바 도구 [매출/ROI] ─── */
.sl-overview {
    padding: 24px 24px 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.sl-overview__totals {
    /* sl-summary 와 동일 그리드 — 위에서 정의됨 */
}

.sl-overview__table-wrap {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: auto;
}

.sl-overview__table {
    min-width: 720px;
}

.sl-overview__table tr[data-book-id] {
    cursor: pointer;
    transition: background 0.12s;
}

.sl-overview__table tr[data-book-id]:hover,
.sl-overview__table tr[data-book-id]:focus {
    background: var(--sage-light);
    outline: none;
}

.sl-overview__title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 320px;
}

.sl-overview__cover {
    width: 32px;
    height: 44px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.sl-overview__cover--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.sl-overview__title-text {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sl-overview__author {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sl-overview__empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
}

.sl-overview__table .is-pos { color: var(--blue); font-weight: 600; }
.sl-overview__table .is-neg { color: var(--red); font-weight: 600; }
.sl-overview__table .is-na  { color: var(--text-muted); }

/* ─── 모바일 (768px 이하) ─── */
@media (max-width: 768px) {
    .sl,
    .sl-overview {
        gap: 14px;
        padding: 12px 4px;
    }

    .sl-overview {
        padding: 16px 12px 40px;
    }

    .sl__head,
    .sl-overview__head {
        flex-direction: column;
        align-items: stretch;
    }

    /* 요약 카드: 4 → 2열 */
    .sl-summary,
    .sl-overview__totals {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .sl-card {
        padding: 10px;
        min-height: 64px;
        gap: 8px;
    }

    .sl-card__icon { font-size: 22px; }
    .sl-card__value { font-size: 15px; }

    /* 차트: 1열 */
    .sl-charts {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sl-chart__canvas-wrap,
    .sl-chart__canvas-wrap--donut {
        height: 200px;
    }

    /* 폼: 2열 → note/full 은 2열 차지 */
    .sl-form {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 8px;
    }

    .sl-form__row--note,
    .sl-form__row--full,
    .sl-form__actions {
        grid-column: span 2;
    }

    .sl-form__submit {
        width: 100%;
    }

    /* 매출/광고 리스트 테이블: 컴팩트 */
    .sl-table th,
    .sl-table td {
        padding: 6px 4px;
        font-size: 11px;
    }

    .sl-list__note {
        max-width: 100px;
    }

    /* 사이드바 매출/ROI: 가로 스크롤 */
    .sl-overview__table {
        min-width: 600px;
    }

    .sl-overview__title-cell {
        min-width: 160px;
    }
}

@media (max-width: 480px) {
    /* 매우 좁은 화면: 요약 카드 1열 */
    .sl-summary,
    .sl-overview__totals {
        grid-template-columns: 1fr;
    }

    .sl-card__value { font-size: 16px; }

    /* 폼: 1열 */
    .sl-form {
        grid-template-columns: 1fr;
    }

    .sl-form__row--note,
    .sl-form__row--full,
    .sl-form__actions {
        grid-column: span 1;
    }
}