/* 페이스튜디오 모바일 — 매출 통계 (월 캘린더 + 총매출/전월 + 수단별 + 상품 TOP10) */
.pm-stats { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

/* 월 선택 */
.pm-month { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pm-month__nav { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--pm-card); color: var(--pm-sub); font-size: 20px; box-shadow: 0 2px 8px rgba(31, 41, 51, .05); }
.pm-month__label { font-size: 17px; font-weight: 700; }

/* ── 총매출 헤더카드 ── */
.pm-sum {
    position: relative;
    background: linear-gradient(140deg, #13a87b 0%, #0a5740 100%);
    color: #fff;
    border-radius: 18px;
    padding: 16px 18px 14px;
    box-shadow: 0 10px 24px -8px rgba(10, 87, 64, .35);
    overflow: hidden;
}
.pm-sum__bg {
    position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pm-sum__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; }
.pm-sum__label { font-size: 13px; opacity: .9; font-weight: 500; }
.pm-sum__pill {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11.5px; font-weight: 700;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px);
}
.pm-sum__pill i { font-size: 12px; }
.pm-sum__pill.is-up { background: rgba(220, 252, 231, .25); }
.pm-sum__pill.is-down { background: rgba(254, 202, 202, .25); }
.pm-sum__amount { font-size: 30px; font-weight: 800; letter-spacing: -1.2px; margin: 6px 0 4px; position: relative; }
.pm-sum__amount span { font-size: 17px; font-weight: 600; margin-left: 1px; opacity: .9; }
.pm-sum__diff { font-size: 12px; opacity: .9; position: relative; }
.pm-sum__diff b { font-weight: 700; margin-left: 2px; }
.pm-sum__kpi {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: relative;
}
.pm-sum__kpi-i { text-align: center; }
.pm-sum__kpi-i + .pm-sum__kpi-i { border-left: 1px solid rgba(255, 255, 255, .15); }
.pm-sum__kpi-i span { display: block; font-size: 11px; opacity: .75; margin-bottom: 3px; }
.pm-sum__kpi-i b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.3px; }

/* ── 캘린더 ── */
.pm-cal { background: var(--pm-card); border-radius: 16px; padding: 14px 10px 10px; box-shadow: 0 2px 10px rgba(31, 41, 51, .05); }
.pm-cal__head, .pm-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.pm-cal__wd { text-align: center; font-size: 11px; color: var(--pm-muted); padding: 4px 0 8px; }
.pm-cal__wd--sun { color: var(--pm-danger); }
.pm-cal__wd--sat { color: #2563eb; }
.pm-cal__cell {
    min-height: 54px;
    margin: 2px;
    padding: 5px 5px 4px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    border-radius: 9px;
    transition: background .15s ease;
}
.pm-cal__cell--empty { background: transparent; min-height: 0; padding: 0; }
.pm-cal__day { font-size: 11px; color: var(--pm-text); font-weight: 600; }
.pm-cal__inc { font-size: 10px; font-weight: 700; color: var(--pm-green); line-height: 1.3; letter-spacing: -.3px; }
.pm-cal__exp { font-size: 10px; font-weight: 700; color: var(--pm-danger); line-height: 1.3; letter-spacing: -.3px; }

/* 매출 강도 4단계 — 초록 hue */
.pm-cal__cell.is-heat-1 { background: rgba(15, 157, 110, .07); }
.pm-cal__cell.is-heat-2 { background: rgba(15, 157, 110, .15); }
.pm-cal__cell.is-heat-3 { background: rgba(15, 157, 110, .26); }
.pm-cal__cell.is-heat-3 .pm-cal__inc { color: #0a5740; }

/* 오늘 — 외곽 링 */
.pm-cal__cell.is-today {
    box-shadow: inset 0 0 0 2px var(--pm-green);
    background: rgba(15, 157, 110, .08);
}
.pm-cal__cell.is-today .pm-cal__day {
    color: var(--pm-green);
    font-weight: 800;
}

/* 미래 셀 — 흐리게 */
.pm-cal__cell.is-future .pm-cal__day { color: var(--pm-muted); opacity: .45; font-weight: 500; }

/* 미래 달 — 헤더카드 톤 다운 */
.pm-sum.pm-sum--future {
    background: linear-gradient(140deg, #94a3b8 0%, #475569 100%);
    box-shadow: 0 10px 24px -8px rgba(71, 85, 105, .3);
}
.pm-sum.pm-sum--future .pm-sum__amount { font-size: 24px; font-weight: 700; opacity: .95; }

/* 강도 범례 */
.pm-cal__legend {
    margin-top: 8px;
    padding: 7px 6px 2px;
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--pm-muted);
}
.pm-cal__leg-lbl { margin-right: 4px; }
.pm-cal__leg-end { margin-left: 4px; }
.pm-cal__leg { width: 13px; height: 13px; border-radius: 4px; }
.pm-cal__leg--0 { background: var(--pm-line2); }
.pm-cal__leg--1 { background: rgba(15, 157, 110, .15); }
.pm-cal__leg--2 { background: rgba(15, 157, 110, .35); }
.pm-cal__leg--3 { background: rgba(15, 157, 110, .6); }

/* ── 블록(수단별 · 상품) ── */
.pm-block { background: var(--pm-card); border-radius: 16px; padding: 15px 17px; box-shadow: 0 2px 10px rgba(31, 41, 51, .05); }
.pm-block__head { margin-bottom: 10px; }
.pm-block__head strong { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.pm-stats-empty { text-align: center; color: var(--pm-muted); font-size: 13px; padding: 20px 0; }

/* ── 결제수단별 ── */
.pm-tlist { display: flex; flex-direction: column; gap: 4px; }
.pm-trow {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pm-line2);
}
.pm-trow:last-child { border-bottom: none; }
.pm-trow__ic {
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--pm-soft); color: var(--pm-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex: none;
}
.pm-trow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 1px; }
.pm-trow__line { display: flex; align-items: center; gap: 8px; }
.pm-trow__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--pm-text); }
.pm-trow__cnt { font-size: 11.5px; color: var(--pm-muted); flex: none; }
.pm-trow__total { font-size: 14px; font-weight: 800; flex: none; letter-spacing: -.3px; }
.pm-trow__bar {
    height: 5px; background: var(--pm-line2); border-radius: 3px; overflow: hidden;
}
.pm-trow__bar span {
    display: block; height: 100%; border-radius: 3px;
    background: var(--pm-green);
    transition: width .35s ease;
}

/* 결제수단 tone — 아이콘/막대 색 분기 */
.pm-trow--platform .pm-trow__ic { background: rgba(15, 157, 110, .12); color: #0f9d6e; }
.pm-trow--platform .pm-trow__bar span { background: linear-gradient(90deg, #13a87b, #0a5740); }

.pm-trow--nfc .pm-trow__ic { background: rgba(37, 99, 235, .12); color: #2563eb; }
.pm-trow--nfc .pm-trow__bar span { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }

.pm-trow--camera .pm-trow__ic { background: rgba(168, 85, 247, .12); color: #a855f7; }
.pm-trow--camera .pm-trow__bar span { background: linear-gradient(90deg, #c084fc, #7c3aed); }

.pm-trow--manual .pm-trow__ic { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.pm-trow--manual .pm-trow__bar span { background: linear-gradient(90deg, #fbbf24, #d97706); }

.pm-trow--link .pm-trow__ic { background: rgba(20, 184, 166, .12); color: #14b8a6; }
.pm-trow--link .pm-trow__bar span { background: linear-gradient(90deg, #2dd4bf, #0d9488); }

.pm-trow--billing .pm-trow__ic { background: rgba(236, 72, 153, .12); color: #ec4899; }
.pm-trow--billing .pm-trow__bar span { background: linear-gradient(90deg, #f472b6, #db2777); }

/* ── 인기 상품 TOP10 ── */
.pm-plist { display: flex; flex-direction: column; gap: 4px; }
.pm-prow {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pm-line2);
}
.pm-prow:last-child { border-bottom: none; }
.pm-prow__rank {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--pm-bg); color: var(--pm-sub);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.pm-prow__rank i { font-size: 14px; }
.pm-prow--gold .pm-prow__rank {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, .35);
}
.pm-prow--silver .pm-prow__rank {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #fff;
    box-shadow: 0 2px 6px rgba(100, 116, 139, .3);
}
.pm-prow--bronze .pm-prow__rank {
    background: linear-gradient(135deg, #d6a373, #a16a3f);
    color: #fff;
    box-shadow: 0 2px 6px rgba(161, 106, 63, .3);
}
.pm-prow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 1px; }
.pm-prow__line { display: flex; align-items: center; gap: 8px; }
.pm-prow__name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600; color: var(--pm-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-prow__cnt { font-size: 11.5px; color: var(--pm-muted); flex: none; }
.pm-prow__total { font-size: 13.5px; font-weight: 800; flex: none; letter-spacing: -.3px; }
.pm-prow__bar {
    height: 5px; background: var(--pm-line2); border-radius: 3px; overflow: hidden;
}
.pm-prow__bar span {
    display: block; height: 100%; border-radius: 3px;
    background: var(--pm-green);
    transition: width .35s ease;
}
.pm-prow--gold .pm-prow__bar span { background: linear-gradient(90deg, #fbbf24, #d97706); }
.pm-prow--silver .pm-prow__bar span { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.pm-prow--bronze .pm-prow__bar span { background: linear-gradient(90deg, #d6a373, #a16a3f); }