/* ============================================================
   SONA LIVE AI — 매출종합분석 (Sales Overview) 전용 스타일
   ------------------------------------------------------------
   app.css 의 디자인 토큰만 사용한다 (hex 직접 사용 금지).
   모든 셀렉터는 #screen-sales 하위 또는 sv- 접두사로 스코프되어
   기존 상품분석 화면에 영향을 주지 않는다.
   모바일 우선: 기본 = 1~2열, ≥761px 에서 확장.
   ============================================================ */

/* 매출종합분석 활성 시 상품분석 전용 서브탭 숨김 (헤더의 SONA/경쟁사) */
body.view-sales .subtabs, body.view-sales .vdiv{ display:none }

/* ---- 헤더 실시간 시계 — 매출종합분석에서만 표시. 초만 빨간색 ---- */
.sv-clock{ display:none; margin-left:auto; white-space:nowrap;
  font:600 12.5px/1 'Sora','Noto Sans KR',sans-serif; color:var(--ink-2);
  letter-spacing:.02em; font-variant-numeric:tabular-nums }
body.view-sales .sv-clock{ display:block }
.sv-clock .sec{ color:var(--down) }
@media (max-width:760px){ .sv-clock{ font-size:11px; width:100%; margin-left:0 } }

/* LIVE 숫자 — 고정폭 숫자로 매초 갱신 시 레이아웃 흔들림 방지 */
#screen-sales .num{ font-variant-numeric:tabular-nums }

/* ---- 운영 상태 시맨틱 컬러 (매출종합분석 전용 토큰) ----
   매우 좋음=초록 / 좋음=연초록 / 평균=회색 / 미달·부족=주황 / 미달 심각=빨강 */
#screen-sales{
  --ops-good: color-mix(in srgb, var(--up) 62%, var(--card));
  --ops-low:  #e0862e;
  --warn:     #EB0038;   /* 경고 카드 테두리·펄스·점검요망 전용 */
}

/* 손익 KPI 카드 상태 칩 — 제목 행 우측 */
.sv-pk .t{ display:flex; align-items:center; gap:6px }
/* 제목+? 그룹 — 제목이 글자 단위로 꺾이지 않도록 한 덩어리 유지 */
.sv-pk .t .tg{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.sv-pk .t .sv-status{ margin-left:auto; font-size:10px; font-weight:700; white-space:nowrap }

/* ---- 최협폭 모바일 (≤500px): 카드 내부 재구성 ----
   1행: 제목+? (좌) / 🚨 점검요망 (우, 컴팩트) · 2행: 상태 · 이하: 값·증감.
   2열 그리드 유지 (minmax(0,1fr) 로 nowrap 제목이 그리드를 밀어내지 않게),
   데스크톱·태블릿 무영향 */
@media (max-width:500px){
  .sv-pkpis{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .sv-pk .t{ flex-wrap:wrap; row-gap:3px; gap:4px }
  .sv-pk .t .tg{ order:0; gap:4px }
  .sv-pk .t .sv-alert-tag{ order:1; font-size:8.5px; letter-spacing:-.02em; word-spacing:-2px }
  .sv-pk .t .sv-status{ order:2; flex:1 0 100%; margin-left:0 }
}

/* ---- 문제 지표 경고 카드 (부족/미달/미달 심각) ----
   #EB0038 펄스 테두리 + 아주 옅은 빨강 배경(기존 유지) + 우상단 🚨 점검요망.
   건강/중립 카드는 정적 유지. 모션 축소 설정 시 전역 규칙이 애니메이션 차단. */
.sv-pk{ position:relative }
/* 경고와 선택은 서로 다른 채널로 표현한다 — 겹쳐도 구분되게.
     경고(점검요망·미달 심각) → 아주 연한 로즈 배경 + 경고 텍스트
     선택                     → 핑크 테두리 (.sv-pk.on)
   예전에는 경고가 테두리를 붉게 칠하고 그 위에 pulse 애니메이션까지 걸어서,
   테두리를 쓰는 선택 상태와 신호가 충돌했다(애니메이션이 선택 테두리를 덮어씀).
   이제 경고는 테두리를 건드리지 않으므로 두 상태가 동시에 보인다. */
.sv-pk.sv-alert{
  background:var(--warn-bg);
  /* border-color 는 건드리지 않는다 — 다른 카드와 같은 연회색 유지.
     선택 시에는 아래 .sv-pk.on 의 핑크 테두리가 그대로 살아난다. */
}
.sv-pk.sv-alert.on{ background:var(--warn-bg-on) }
/* 경고 텍스트·아이콘 — 배경이 옅으므로 글자에서 대비를 준다.
   상태 칩은 renderProfit() 이 SEV_COLOR 를 인라인 style 로 찍기 때문에
   !important 가 아니면 덮이지 않는다. 경고 카드 안에서만 통일하고,
   경고가 아닌 카드('좋음' 그린 등)의 SEV_COLOR 는 그대로 둔다.
   ※ 색만 통일하는 것이며 등급 판정 기준(opsTier)은 건드리지 않는다. */
.sv-pk.sv-alert .sv-alert-tag{ color:var(--warn-ink) }
.sv-pk.sv-alert .t .sv-status{ color:var(--warn-ink) !important }
/* 🚨 점검요망 — 제목 행의 flex 아이템으로 우측 정렬(margin-left:auto).
   공간이 부족하면 겹치지 않고 자연스럽게 줄바꿈된다.
   경고 카드에서는 상태 칩이 제목 옆(inline)으로 와서 태그와 충돌하지 않는다 */
.sv-alert-tag{ margin-left:auto; font-size:10.5px; font-weight:700;
  color:var(--warn-ink); white-space:nowrap }
.sv-pk.sv-alert .t .sv-status{ margin-left:0 }

/* ---- '?' 평가 기준 툴팁 ---- */
.sv-help{ flex:none; width:16px; height:16px; border-radius:50%; border:1px solid var(--border);
  background:var(--card-soft); color:var(--ink-3); font:700 10px/1 'Sora',sans-serif;
  display:inline-flex; align-items:center; justify-content:center; cursor:help; padding:0 }
.sv-help:hover{ color:var(--pink-text); border-color:var(--pink-line) }
.sv-tipbox{ position:absolute; z-index:30; top:34px; left:10px; right:10px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:10px 12px; cursor:default }
.sv-tipbox .tt{ font-size:10.5px; font-weight:700; color:var(--ink-3); margin-bottom:6px }
.sv-tipbox .row{ display:flex; justify-content:space-between; gap:10px;
  font-size:11px; line-height:1.8; color:var(--ink-2) }
.sv-tipbox .row b{ font-weight:700 }
.sv-tipbox .row span{ font-variant-numeric:tabular-nums }

/* AI 운영 인사이트 — 문제 지표 강조 (부족/미달 = 굵게+밑줄, 미달 심각 = +빨강) */
.sv-ai .sv-ai-low{ font-weight:700; color:var(--ink); text-decoration:underline;
  text-underline-offset:2.5px; text-decoration-color:var(--ops-low) }
.sv-ai .sv-ai-crit{ font-weight:700; color:var(--down); text-decoration:underline;
  text-underline-offset:2.5px; text-decoration-thickness:1.6px }

#screen-sales{ display:flex; flex-direction:column; gap:26px; margin-top:14px }
/* display:flex 가 UA 의 [hidden]{display:none} 보다 우선되므로 반드시 재선언 —
   이게 없으면 상품분석 화면 위에 매출 섹션이 함께 렌더된다 */
#screen-sales[hidden]{ display:none }
#screen-product[hidden]{ display:none }

/* ---- 섹션 공통 ---- */
.sv-sec{ display:flex; flex-direction:column; gap:12px }
.sv-sech{ display:flex; align-items:baseline; gap:8px }
.sv-secno{ font:700 11px/1 'Sora',sans-serif; color:var(--pink-text); letter-spacing:.08em }
.sv-sech h2{ font-size:15px; font-weight:700; letter-spacing:-.01em }
.sv-sech .hint{ font-size:11.5px; color:var(--ink-3); margin-left:2px }
.sv-sech .spacer{ flex:1 }

/* ---- 카드 공통 (app.css .card 와 동일 어휘) ---- */
.sv-card{ background:var(--card); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); padding:16px 18px }

/* ============================================================
   01. TODAY — KPI (모바일 우선)
   기본(모바일): 2열 그리드, hero 는 2열 전체
   ============================================================ */
.sv-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sv-hero{ grid-column:1 / -1 }
.sv-kpi{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.sv-kpi .t{ font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:6px }
.sv-kpi .v{ font-family:'Sora','Noto Sans KR',sans-serif; font-weight:700; font-size:clamp(19px,4.6vw,24px);
  letter-spacing:-.02em; line-height:1.1; white-space:nowrap }
.sv-kpi .v small{ font-size:.62em; font-weight:600; color:var(--ink-2); margin-left:1px }
.sv-kpi .d{ font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.sv-kpi .d .note{ font-weight:500; color:var(--ink-3) }
.sv-up{ color:var(--up) } .sv-down{ color:var(--down) } .sv-flat{ color:var(--ink-3) }

/* Hero — 실시간 매출
   내용(제목/금액/증감/목표)을 간격이 촘촘한 하나의 세로 그룹으로 묶고,
   그 그룹을 카드 세로 중앙에 배치한다 (분산 배치 금지). 정렬은 좌측 유지. */
.sv-hero{ position:relative; padding:18px; justify-content:center; gap:5px;
  background:linear-gradient(135deg, var(--pink-soft), var(--card) 55%) }
.sv-hero .t{ font-size:12.5px; color:var(--ink) }
.sv-hero .v{ font-size:clamp(30px,8vw,44px); color:var(--ink) }
.sv-hero .d{ font-size:13px }
.sv-hero .goal{ margin-top:11px; display:flex; flex-direction:column; gap:7px }
.sv-hero .goal .gt{ font-size:12px; color:var(--ink-2) }
.sv-hero .goal .gt b{ color:var(--pink-text) }
.sv-goalbar{ height:12px; border-radius:99px; background:var(--grid); overflow:hidden }
.sv-goalbar i{ display:block; height:100%; border-radius:99px; background:var(--pink) }

/* 위시리스트·장바구니 — 실시간/어제 2행. 라벨 고정폭으로 세로 정렬 유지,
   좁은 화면에서도 행 단위 스택이라 겹침이 없다. */
.sv-two{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.sv-two .row{ display:flex; align-items:baseline; gap:8px; min-width:0 }
.sv-two .rl{ flex:none; width:38px; font-size:11px; font-weight:600; color:var(--ink-3) }
.sv-two .rv{ font-family:'Sora','Noto Sans KR',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:14px; color:var(--ink-2); white-space:nowrap }
.sv-two .rv small{ font-size:.72em; font-weight:600; color:var(--ink-3); margin-left:1px }
.sv-two .rv.main{ font-size:clamp(19px,4.6vw,24px); color:var(--ink) }

/* 라이브 인디케이터 — 빨간 점멸 */
.sv-livedot{ width:7px; height:7px; border-radius:50%; background:var(--down);
  animation:sv-blink 1.5s ease-in-out infinite }
@keyframes sv-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.sv-asof{ font-size:11px; color:var(--ink-3); font-weight:500 }

/* 목데이터 배지 — 실데이터 연동 전임을 화면에서 명시 */
.sv-mock{ font-size:10px; font-weight:700; color:var(--ink-3); border:1px solid var(--border);
  border-radius:99px; padding:2.5px 8px; letter-spacing:.04em }

/* ---- AI 운영 인사이트 (상품분석 AI 카드 어휘 축약 재사용) ----
   AI 아이콘은 제목 앞 inline — 아이콘+제목이 하나의 헤더 그룹으로 좌측 정렬.
   배경: 상품분석 AI 카드와 같은 계열의 홀로그래픽 틴트를 훨씬 옅게 —
   흰 바탕 유지, 핑크(6%)+퍼플(6%) 저채도. TODAY Hero(핑크 10%)보다 확실히 약하게. */
.sv-ai{ display:block }
.sv-card.sv-ai{
  padding-top:13px;   /* 카드 상단 여백 축소 (데스크톱 패딩 규칙보다 우선) */
  border-color:color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(120% 90% at 0% 0%,   color-mix(in srgb, var(--primary) 6%, transparent), transparent 55%),
    radial-gradient(115% 85% at 100% 6%, color-mix(in srgb, var(--s2) 6%, transparent),      transparent 58%),
    var(--card);
}
.sv-ai h3{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  margin:0 0 6px }
.sv-ai .ai-tag{ flex:none; font:700 10px/1 'Sora',sans-serif; color:var(--pink-text);
  background:var(--pink-soft); border-radius:7px; padding:5px 7px }
.sv-ai p{ font-size:13px; line-height:1.65; color:var(--ink-2) }
.sv-ai p b{ color:var(--ink) }

/* ============================================================
   02. 매출 추이 / 공용 차트
   ============================================================ */
.sv-tabs{ display:flex; gap:4px; background:var(--card-soft); border:1px solid var(--border-soft);
  border-radius:11px; padding:3px; width:max-content }
.sv-tabs button{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:var(--ink-2); min-height:32px }
.sv-tabs button.on{ background:var(--ink); color:var(--card) }
.sv-chart{ width:100%; overflow:hidden }
.sv-chart svg{ display:block; width:100% }

/* 오늘 LIVE 포인트 펄스 — 부드럽게 퍼졌다 사라지는 링 (과한 번쩍임 금지, 2.2s 주기).
   prefers-reduced-motion 이면 app.css 전역 규칙이 애니메이션을 끈다. */
.sv-chart .sv-pulse{ opacity:.3; transform-box:fill-box; transform-origin:center;
  animation:sv-pulse 2.2s ease-out infinite }
@keyframes sv-pulse{
  0%{ transform:scale(.55); opacity:.4 }
  70%{ transform:scale(1.7); opacity:0 }
  100%{ transform:scale(1.7); opacity:0 }
}
.sv-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px }
.sv-legend .li{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2) }
.sv-legend .sw{ width:14px; height:3px; border-radius:2px }

/* ============================================================
   03. 손익·운영 — KPI 4장 + 공용 차트 1개
   기본(모바일): 2열
   ============================================================ */
.sv-pkpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sv-pk{ cursor:pointer; transition:border-color .15s, background .15s; -webkit-tap-highlight-color:transparent }
.sv-pk:hover{ border-color:var(--pink-line) }
.sv-pk.on{ border-color:var(--pink); background:color-mix(in srgb, var(--primary) 4%, var(--card)) }
.sv-pk .t{ font-size:11.5px; font-weight:600; color:var(--ink-2) }
.sv-pk .v{ font-family:'Sora','Noto Sans KR',sans-serif; font-weight:700; font-size:clamp(19px,4.4vw,23px);
  letter-spacing:-.02em; margin-top:4px }
.sv-pk .v small{ font-size:.6em; font-weight:600; color:var(--ink-2) }
.sv-pk .d{ font-size:11.5px; font-weight:700; margin-top:3px }
.sv-pk .d .note{ font-weight:500; color:var(--ink-3) }

/* ============================================================
   04. 채널 / 05. 브랜드 — KPI 2장 + 공용 차트
   ============================================================ */
.sv-duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sv-duo .name{ font-size:12px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:6px }
.sv-duo .name .dot{ width:8px; height:8px; border-radius:50% }
.sv-duo .v{ font-family:'Sora','Noto Sans KR',sans-serif; font-weight:700; font-size:clamp(17px,4.2vw,22px);
  letter-spacing:-.02em; margin-top:5px; white-space:nowrap }
.sv-duo .sub{ font-size:11.5px; color:var(--ink-2); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap }
.sv-duo .sub b.pos{ color:var(--up) } .sv-duo .sub b.neg{ color:var(--down) }

/* ============================================================
   데스크톱 확장 (≥761px)
   ============================================================ */
@media (min-width:761px){
  #screen-sales{ gap:32px }
  /* TODAY: hero 좌측 대형(2행 스팬) + 우측 2×2 */
  .sv-kpis{ grid-template-columns:minmax(340px,1.5fr) 1fr 1fr; grid-auto-rows:1fr; gap:12px }
  .sv-hero{ grid-column:1; grid-row:1 / span 2; padding:22px 24px }
  .sv-pkpis{ grid-template-columns:repeat(4,1fr); gap:12px }
  .sv-duo{ grid-template-columns:1fr 1fr; gap:12px }
  .sv-card{ padding:18px 20px }
}
@media (min-width:1280px){
  .sv-kpis{ grid-template-columns:minmax(420px,1.35fr) 1fr 1fr }
}

/* 초소형(≤370px) 안전장치 — 숫자 줄바꿈 방지 완화 */
@media (max-width:370px){
  .sv-kpi .v, .sv-duo .v{ white-space:normal }
}

/* TODAY 배지 — 실데이터 연결 시 LIVE (핑크 포인트) */
.sv-mock.live{ color:var(--pink-text); border-color:var(--pink-line); background:var(--pink-soft) }
/* 카드 내부 미니 태그 (장바구니 '정의 확인 중') */
.sv-kpi .t .sv-mock{ font-size:9px; padding:2px 6px; margin-left:2px }

/* ---- [미반영] 상태 — 실데이터 미연결 표기 (중립 그레이, 경고 아님) ---- */
.sv-na{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-3); background:var(--card-soft);
  border:1px solid var(--border); border-radius:999px; padding:4px 12px;
}
.sv-na-v{ display:flex; align-items:center; min-height:29px }
.sv-na-block{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; min-height:190px;
}
.sv-na-block p{ margin:0; font-size:12px; color:var(--ink-3) }
.sv-ai .sv-na-note{ color:var(--ink-3); font-size:12px }