/* SNSAgent 색 체계 v6 (기록 23) · 색 아이콘 칸 · 채널 표 · 도넛
   base.css 가 불러오고, base.css 를 쓰지 않는 화면(상품 고르기)은 직접 불러온다. */

:root {
  /* 색 체계 v6 (기록 23): 회사 바탕은 남색·파랑 그대로, 상품·채널·인포그래픽에는 정해진 색만 쓴다 */
  --c-ad: #EF6A3E;   --c-ad-deep: #C24A20;   --c-ad-tint: #FFF1EA;      /* 광고 = 코랄 (눈에 띄는 것) */
  --c-page: #0E9F7E; --c-page-deep: #0B7A61; --c-page-tint: #E6F7F1;    /* 신청 페이지 = 에메랄드 (남기는 곳) */
  --c-report: #2F6BEA; --c-report-deep: #1A4FBA; --c-report-tint: #EBF1FE; /* 결과 보고 = 블루 (보여 주는 것) */
  --c-gold: #C8973A; --c-gold-deep: #9A7024; --c-gold-tint: #FBF4E6;    /* 추천 · 프리미엄 = 샴페인 골드 (작게만) */
  --c-sky: #0EA5E9;  --c-sky-tint: #E6F6FD;
  /* 채널 색 (각 회사 대표색) */
  --ch-insta: #E1306C; --ch-insta-grad: linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
  --ch-kakao: #FEE500; --ch-kakao-ink: #3A1D1D;
  --ch-naver: #03C75A; --ch-youtube: #FF0033; --ch-facebook: #1877F2; --ch-local: #0891B2; --ch-direct: #64748B;
}

/* ---------- 색 아이콘 칸 (v6: 상품 · 상태 색) ---------- */
.ic { display: inline-grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; font-size: 1.45rem; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -10px var(--icsh, rgba(26, 79, 186, .6)); }
.ic.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 1.1rem; }
.ic.lg { width: 60px; height: 60px; border-radius: 18px; font-size: 1.8rem; }
.ic-ad { background: linear-gradient(145deg, #FF9466 0%, var(--c-ad) 50%, var(--c-ad-deep) 100%); --icsh: rgba(239, 106, 62, .7); }
.ic-page { background: linear-gradient(145deg, #3DD2A8 0%, var(--c-page) 50%, var(--c-page-deep) 100%); --icsh: rgba(14, 159, 126, .65); }
.ic-report { background: linear-gradient(145deg, #6E98FF 0%, var(--c-report) 50%, var(--c-report-deep) 100%); --icsh: rgba(47, 107, 234, .65); }
.ic-gold { background: linear-gradient(145deg, #EBCB8B 0%, var(--c-gold) 50%, var(--c-gold-deep) 100%); --icsh: rgba(200, 151, 58, .65); }
.ic-sky { background: linear-gradient(145deg, #67D2F8 0%, var(--c-sky) 50%, #0B7FB5 100%); --icsh: rgba(14, 165, 233, .6); }
.ic-ink { background: linear-gradient(145deg, #34467A 0%, #1A2747 55%, #0A1226 100%); --icsh: rgba(10, 18, 38, .55); }

/* ---------- 채널 표 (각 회사 대표색) ---------- */
.chn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 1.3rem; box-shadow: 0 8px 18px -10px rgba(2, 6, 23, .55); }
.chn.sm { width: 28px; height: 28px; border-radius: 8px; font-size: .95rem; }
.chn.xs { width: 20px; height: 20px; border-radius: 6px; font-size: .72rem; box-shadow: none; }
.chn-insta { background: var(--ch-insta-grad); }
.chn-facebook { background: var(--ch-facebook); }
.chn-youtube { background: var(--ch-youtube); }
.chn-kakao { background: var(--ch-kakao); color: var(--ch-kakao-ink); }
.chn-naver { background: var(--ch-naver); font: 900 1.05em/1 Arial, "Pretendard Variable", sans-serif; }
.chn-local { background: #0891B2; }
.chn-daangn { background: #FF6F0F; }   /* 당근 (기록 31: 광고 채널 문서) */
.chn-press { background: #9A4A00; }    /* 언론 보도 기사 (기록 34: utm_source=press) */
.chn-direct { background: var(--ch-direct); }

/* ---------- 인포그래픽: 도넛 (SVG: circle pathLength=100) ---------- */
.donut { position: relative; width: var(--size, 120px); aspect-ratio: 1; flex: 0 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; }
.donut .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.donut .center b { font-size: 1.1em; letter-spacing: -.03em; }
.donut .center small { font-size: .62em; color: var(--slate); font-weight: 700; }
.motion .donut .seg { stroke-dasharray: 0 100; animation: vx-donut 1.4s var(--ease) var(--sd, .3s) forwards; }
@keyframes vx-donut { to { stroke-dasharray: var(--len) 100; } }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .78rem; }
.legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.legend b { font-variant-numeric: tabular-nums; }

/* 점수 고리 (검색 점수 · 관리자와 설계사 화면 공통, 기록 27) */
.sring { position: relative; display: inline-grid; place-items: center; width: var(--sz, 52px); height: var(--sz, 52px); flex: 0 0 auto; --rc: var(--teal); }
.sring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sring circle { fill: none; stroke-width: 4.2; }
.sring .bg { stroke: #E7EBF2; }
.sring .fg { stroke: var(--rc); stroke-linecap: round; }
.sring b { position: relative; font-size: calc(var(--sz, 52px) * .32); font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
.sring.g-good { --rc: #0E9F7E; } .sring.g-fair { --rc: #E0A100; } .sring.g-poor { --rc: #E5484D; }
.motion .sring .fg { animation: seo-ring 1.1s var(--ease) both; }
.motion .sring.grow .fg { animation-name: seo-ring-from; }
@keyframes seo-ring { from { stroke-dasharray: 0 100; } }
@keyframes seo-ring-from { from { stroke-dasharray: var(--from) calc(100 - var(--from)); } }