/* ============================================================
   SONA Ranking Monitor — design tokens
   테마 구조: :root = light / media(dark) + [data-theme] = dark
   모든 색은 반드시 토큰으로만 사용 (컴포넌트에 hex 직접 금지)
   ============================================================ */
:root{
  color-scheme: light;
  /* ==== SONA 브랜드 컬러 (전 플랫폼 공통 디자인 시스템) ==== */
  --primary: #FF46AA;   /* Flamingo Pink — brand / highlight / action */
  --dark:    #141414;   /* Covert Slander — primary text / dark UI */
  /* ground — neutral, bright */
  --page:        #f7f7f7;
  --card:        #ffffff;
  --card-soft:   #fafafa;
  --border:      rgba(20,20,20,.09);
  --border-soft: rgba(20,20,20,.055);
  /* ink */
  --ink:       var(--dark);
  --ink-2:     #5f5f5f;   /* secondary info */
  --ink-3:     #9a9a9a;   /* muted / disabled */
  /* primary 파생 — 별도 핑크 HEX 없이 primary + 투명도/혼합 변형만 사용 */
  --pink:       var(--primary);                 /* fills, marks */
  --pink-text:  var(--primary);                 /* accent text (bold 사용 전제) */
  --pink-soft:  rgba(255,70,170,.10);           /* washes, chips */
  --pink-line:  rgba(255,70,170,.35);           /* accent hairline */
  /* charts — categorical: slot1 = primary (validated: light, surface #fff) */
  --s1: var(--primary); --s2: #8a63d2; --s3: #1baf7a; --s4: #eda100; --s5: #4d7fc4;
  /* status (semantic only — up/down) */
  --up:   #0c8a4c;
  --down: #d03b3b;
  --grid: #ececec;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px -12px rgba(255,70,170,.10);
  --thumb-ink-mix: 78%;   /* glyph strength inside thumbnails */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:        #101010;
    --card:        #1c1c1c;
    --card-soft:   #232323;
    --border:      rgba(245,245,245,.10);
    --border-soft: rgba(245,245,245,.06);
    --ink:   #f5f5f5;
    --ink-2: #b3b3b3;
    --ink-3: #808080;
    --pink:      var(--primary);
    --pink-text: color-mix(in srgb, var(--primary) 78%, #fff);  /* 다크 표면 가독용 밝은 변형 */
    --pink-soft: rgba(255,70,170,.16);
    --pink-line: rgba(255,70,170,.40);
    /* categorical: slot1 = primary의 다크 스텝 (validated: dark, surface #1c1c1c) */
    --s1:#ee3d9e; --s2:#9a75dd; --s3:#1baf7a; --s4:#c28400; --s5:#5d8fd4;
    --up:   #34c183;
    --down: #e66767;
    --grid: #303030;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.5);
    --thumb-ink-mix: 88%;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#101010; --card:#1c1c1c; --card-soft:#232323;
  --border:rgba(245,245,245,.10); --border-soft:rgba(245,245,245,.06);
  --ink:#f5f5f5; --ink-2:#b3b3b3; --ink-3:#808080;
  --pink:var(--primary); --pink-text:color-mix(in srgb, var(--primary) 78%, #fff);
  --pink-soft:rgba(255,70,170,.16); --pink-line:rgba(255,70,170,.40);
  --s1:#ee3d9e; --s2:#9a75dd; --s3:#1baf7a; --s4:#c28400; --s5:#5d8fd4;
  --up:#34c183; --down:#e66767; --grid:#303030;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.5);
  --thumb-ink-mix: 88%;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font:400 14px/1.55 "Noto Sans KR","Noto Sans JP","Sora",system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.008em;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--pink); outline-offset:2px; border-radius:8px}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none!important; animation:none!important} }

/* 와이드 레이아웃: 데스크톱에서 화면을 넓게 사용, 랭킹 영역이 주인공 */
.shell{max-width:1840px; margin:0 auto; padding:22px clamp(16px, 2.2vw, 40px) 48px}

/* ============================================================
   1. GLOBAL NAV (SONA Live AI) + 서브탭 + 컨트롤 헤더
   ============================================================ */
.gnav{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:6px 2px 14px; border-bottom:1px solid var(--border); margin-bottom:14px}
.gbrand{display:flex; align-items:center; gap:10px}
/* 브랜드 로고 (첨부 로고 이미지, data URI 임베드) */
.brand-logo{width:36px; height:36px; border-radius:11px; display:block; flex:none;
  box-shadow:0 4px 12px -4px rgba(255,70,170,.45)}
/* 서비스 타이틀 — Sora ExtraBold (영문 전용 디스플레이용, 이미 로드된 웨이트).
   네비게이션 라벨(13px/600)보다 확실히 굵고 크게 잡아 계층을 분리한다. */
.gbrand h1{font:800 19px/1.2 "Sora","Noto Sans KR",sans-serif; margin:0; letter-spacing:-.005em}
/* 메인 메뉴 — 활성 = 다크 필 */
.gmenu{display:flex; gap:4px; flex-wrap:wrap}
.gmenu button{padding:8px 15px; border-radius:10px; font-size:13px; font-weight:600; color:var(--ink-2); transition:background .15s,color .15s}
.gmenu button:hover{background:var(--pink-soft); color:var(--pink-text)}
.gmenu button.on{background:var(--ink); color:var(--card)}
/* 서브탭 (Product Analysis 내부) — 활성 = 핑크 필 */
.subtabs{display:flex; gap:2px; padding:3px; background:var(--card); border:1px solid var(--border); border-radius:12px}
.subtabs button{padding:6px 16px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.subtabs button:hover{color:var(--pink-text)}
.subtabs button.on{background:var(--pink); color:#fff}
.ctx{font-size:11.5px; color:var(--ink-3)}
.vdiv{width:1px; height:22px; background:var(--border); flex:none}

.topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px}

/* platform switcher — 플랫폼 추가 시 DB에 항목만 추가하면 자동 렌더 */
.platforms{display:flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.platforms button{
  padding:7px 15px; border-radius:10px; font-weight:600; font-size:13px; color:var(--ink-2);
  transition:background .15s,color .15s;
}
.platforms button:hover{background:var(--pink-soft); color:var(--pink-text)}
.platforms button.on{background:var(--pink); color:#fff}
.platforms button .soon{font-size:10px; font-weight:500; opacity:.65; margin-left:4px}

.topbar .right{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.asof{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); background:var(--card); border:1px solid var(--border); padding:8px 13px; border-radius:12px}
/* LIVE 수집 상태 — 붉은 점 + 은은한 펄스/글로우 (크기·위치·레이아웃은 그대로 7×7)
   box-shadow 만 사용하므로 주변 텍스트 배치에 영향을 주지 않는다.
   prefers-reduced-motion 환경에서는 상단 공통 규칙이 애니메이션을 끈다. */
.asof .live{
  width:7px; height:7px; border-radius:50%; background:var(--down);
  animation:livePulse 1.3s ease-in-out infinite;
}
@keyframes livePulse{
  0%{   opacity:1;   box-shadow:0 0 5px color-mix(in srgb, var(--down) 55%, transparent),
                                 0 0 0 0 color-mix(in srgb, var(--down) 40%, transparent) }
  70%{  opacity:.55; box-shadow:0 0 9px color-mix(in srgb, var(--down) 28%, transparent),
                                 0 0 0 5px color-mix(in srgb, var(--down) 0%,  transparent) }
  100%{ opacity:1;   box-shadow:0 0 5px color-mix(in srgb, var(--down) 55%, transparent),
                                 0 0 0 0 color-mix(in srgb, var(--down) 0%,  transparent) }
}

/* period segmented control */
.periods{display:flex; gap:2px; padding:3px; background:var(--card); border:1px solid var(--border); border-radius:12px}
.periods button{padding:6px 14px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.periods button.on{background:var(--ink); color:var(--card)}

/* 기간 직접 선택 — 저장된 일별 스냅샷이 있는 날짜만 선택 가능 */
.rangepick{position:relative}
.rangebtn{display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px;
  border:1px solid var(--border); background:var(--card); font-size:12.5px; font-weight:600; color:var(--ink-2);
  transition:border-color .15s, color .15s}
.rangebtn svg{width:14px; height:14px}
.rangebtn:hover{border-color:var(--pink-line); color:var(--pink-text)}
.rangebtn.on{background:var(--pink); border-color:var(--pink); color:#fff}
.rangepop{position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:268px; padding:12px;
  background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.rangepop[hidden]{display:none}
.rp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.rp-head b{font-size:12.5px; font-weight:700}
.rp-nav{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; color:var(--ink-2)}
.rp-nav:hover:not(:disabled){background:var(--pink-soft); color:var(--pink-text)}
.rp-nav:disabled{opacity:.3; cursor:default}
.rp-nav svg{width:12px; height:12px}
.rp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.rp-grid .dow{font-size:10px; color:var(--ink-3); text-align:center; padding:3px 0; font-weight:600}
.rp-day{height:30px; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--ink-2)}
.rp-day:disabled{color:var(--ink-3); opacity:.35; cursor:default}
.rp-day.has:not(:disabled):hover{background:var(--pink-soft); color:var(--pink-text)}
.rp-day.sel{background:var(--pink); color:#fff}
.rp-day.inrange{background:var(--pink-soft); color:var(--pink-text)}
.rp-day.blank{visibility:hidden}
.rp-foot{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft)}
.rp-hint{flex:1; font-size:11px; color:var(--ink-3); line-height:1.45}
.rp-btn{padding:6px 12px; border-radius:9px; font-size:11.5px; font-weight:600; border:1px solid var(--border); color:var(--ink-2)}
.rp-btn.primary{background:var(--pink); border-color:var(--pink); color:#fff}
.rp-btn:disabled{opacity:.4; cursor:default}

/* ============================================================
   2. KPI CARDS
   ============================================================ */
/* KPI 열은 아래 본문(.grid)과 동일한 컬럼 체계를 쓴다.
   앞 4장 = 랭킹 상세 컬럼 폭 / 마지막 1장 = 우측 사이드바 폭, 거터도 동일(14px).
   → 당일배송 카드 오른쪽 끝 = 랭킹 상세 오른쪽 끝, 브랜드 수 = 사이드바와 정확히 일치 */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 330px; gap:14px; margin:18px 0 14px}
@media (min-width:1600px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr)) 360px; gap:16px} }
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(3,1fr); gap:12px} }
@media (max-width:640px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:15px 16px 13px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi .lbl{font-size:12px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.kpi .ico{width:22px;height:22px;border-radius:7px;background:var(--pink-soft);color:var(--pink-text);display:grid;place-items:center;flex:none}
.kpi .ico svg{width:13px;height:13px}
.kpi .val{font:700 27px/1.1 "Sora",sans-serif; letter-spacing:-.02em; margin-top:9px}
.kpi .val small{font:600 13px/1 "Sora",sans-serif; color:var(--ink-3); margin-left:2px}
.kpi.hero{background:linear-gradient(140deg, color-mix(in srgb,var(--pink) 9%, var(--card)), var(--card) 55%)}
.kpi.hero .val{color:var(--pink-text)}
/* 증감 표기 — 메인 숫자 오른쪽 인라인 (예: 100개 ▲2) */
.kpi .val .chg{font:600 12.5px/1 "Sora",sans-serif; letter-spacing:0; margin-left:8px; white-space:nowrap}
.kpi .val .chg.u{color:var(--up)} .kpi .val .chg.d{color:var(--down)} .kpi .val .chg.s{color:var(--ink-3)}

/* ============================================================
   3. MAIN GRID  (table + right rail + bottom widgets)
   ============================================================ */
.grid{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px}
@media (min-width:1600px){ .grid{grid-template-columns:minmax(0,1fr) 360px; gap:16px} }
@media (max-width:1100px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:10px; padding:15px 18px 0}
.card-h h2{font:700 14.5px/1.3 "Noto Sans KR","Noto Sans JP",sans-serif; margin:0}
.card-h .hint{font-size:11.5px; color:var(--ink-3)}
.card-h .spacer{margin-left:auto}

/* --- ranking table --- */
.toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px 12px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:5px 12px; border-radius:999px; border:1px solid var(--border); font-size:12px; font-weight:500; color:var(--ink-2); background:var(--card)}
.chip:hover{border-color:var(--pink-line); color:var(--pink-text)}
.chip.on{background:var(--pink-soft); border-color:var(--pink-line); color:var(--pink-text); font-weight:600}
.search{margin-left:auto; position:relative}
.search input{
  width:190px; padding:7px 12px 7px 30px; border-radius:10px; border:1px solid var(--border);
  background:var(--card-soft); color:var(--ink); font:inherit; font-size:12.5px;
}
.search input::placeholder{color:var(--ink-3)}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--ink-3)}

.table-wrap{overflow:auto; max-height:min(74vh, 980px); border-top:1px solid var(--border-soft)}
table{width:100%; border-collapse:collapse; min-width:760px}
thead th{
  position:sticky; top:0; z-index:2; background:var(--card);
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase;
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--border);
  white-space:nowrap; cursor:pointer; user-select:none;
}
thead th:hover{color:var(--pink-text)}
thead th .arr{font-size:9px; margin-left:3px}
tbody td{padding:8px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; white-space:nowrap}
tbody tr{transition:background .12s}
tbody tr:hover{background:color-mix(in srgb, var(--pink-soft) 45%, transparent)}
td.rank{font:700 14px/1 "Sora",sans-serif; color:var(--ink-2); width:34px; text-align:center}
tr.top3 td.rank{color:var(--pink-text)}
/* productUrl 이 있는 썸네일은 <a> 로 렌더된다 — 링크 기본 스타일만 무력화 (레이아웃 동일) */
a.thumb, a.aimg{text-decoration:none; color:inherit}
.thumb{
  width:80px;height:80px;border-radius:14px; display:grid; place-items:center; flex:none;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--s1)) 20%, var(--card)), color-mix(in srgb, var(--tc, var(--s1)) 7%, var(--card)));
}
.thumb svg{width:30px;height:30px; color:color-mix(in srgb, var(--tc, var(--s1)) var(--thumb-ink-mix), var(--ink))}
/* real product image — sits above the glyph; on load error it is removed and the glyph shows */
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pcell{display:flex; align-items:center; gap:11px; min-width:210px}
.pcell .brand{font-size:11px; font-weight:600; color:var(--pink-text); letter-spacing:.01em}
.pcell .name{font-size:13px; font-weight:500; margin-top:1px}
.pcell .cat{font-size:10.5px; color:var(--ink-3)}
td .price{font-weight:600}
.off{color:var(--pink-text); font-weight:600; font-size:12px}
.off.zero{color:var(--ink-3); font-weight:400}
td .likes,td .rev{color:var(--ink-2); font-size:12.5px}
.stars{color:var(--ink-2); font-size:12.5px}
.stars b{color:var(--ink); font-weight:600}
.tag-sd{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--up);
  background:color-mix(in srgb, var(--up) 11%, transparent); padding:3px 8px; border-radius:999px}
.tag-no{color:var(--ink-3); font-size:12px}
.mv{display:inline-flex; align-items:center; gap:3px; font:600 12px/1 "Sora",sans-serif}
.mv.u{color:var(--up)} .mv.d{color:var(--down)} .mv.s{color:var(--ink-3); font-weight:400}
.mv.new{font-size:10.5px; letter-spacing:.05em; color:var(--pink-text); background:var(--pink-soft); padding:3px 7px; border-radius:999px}
.tfoot{display:flex; justify-content:space-between; align-items:center; padding:11px 18px; font-size:12px; color:var(--ink-3)}

/* --- view toggle (앨범 / 리스트) --- */
.viewtoggle{display:flex; gap:2px; padding:3px; background:var(--card-soft); border:1px solid var(--border); border-radius:11px}
.viewtoggle button{display:flex; align-items:center; gap:5px; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:600; color:var(--ink-2)}
.viewtoggle button:hover{color:var(--pink-text)}
.viewtoggle button.on{background:var(--pink); color:#fff}
.viewtoggle svg{width:13px;height:13px}

/* --- album (gallery) view --- */
/* 랭킹 카드는 .grid 의 stretch 로 오른쪽 rail 높이까지 늘어난다.
   앨범 영역이 78vh 로 고정되어 있으면 그 차이만큼 카드 하단에 빈 공간이 남았다.
   → 카드를 세로 flex 로 만들고 앨범이 남은 높이를 채우게 해서, 빈 공간을
     상품 카드 줄로 자연스럽게 메운다. (카드 크기·간격·열 수는 그대로) */
.grid > .card{display:flex; flex-direction:column}
.album{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
  padding:14px 18px 18px; min-height:min(78vh, 1080px); flex:1 1 0;
  align-content:start; grid-auto-rows:max-content;   /* 행 높이는 항상 카드 원래 크기 — 영역이 남아도 카드를 늘리지 않는다 */
  overflow:auto; border-top:1px solid var(--border-soft);
}
.album[hidden]{display:none}   /* display:grid 가 hidden 속성을 이기지 않도록 */
.acard{border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; background:var(--card); transition:box-shadow .15s, transform .15s}
/* 급상승 상품 강조 — 테두리 색 + 아주 옅은 핑크 틴트 (크기·반경·타이포 그대로) */
.acard.rise{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent)}
.aimg .arise{
  position:absolute; top:8px; right:8px; z-index:1; padding:4px 8px; border-radius:9px;
  background:var(--pink); color:#fff; font:700 10.5px/1 "Noto Sans KR","Sora",sans-serif; letter-spacing:.01em;
}
.acard:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.aimg{
  position:relative; aspect-ratio:4/5; display:grid; place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--s1)) 20%, var(--card)), color-mix(in srgb, var(--tc, var(--s1)) 7%, var(--card)));
}
.aimg > svg{width:46px;height:46px; color:color-mix(in srgb, var(--tc, var(--s1)) var(--thumb-ink-mix), var(--ink))}
.aimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.aimg .arank{
  position:absolute; top:8px; left:8px; z-index:1; min-width:27px; padding:4px 8px; border-radius:9px;
  background:color-mix(in srgb, var(--ink) 78%, transparent); color:var(--page); text-align:center;
  font:700 12px/1 "Sora",sans-serif;
}
.acard.top3 .arank{background:var(--pink); color:#fff}
.aimg .asd{
  position:absolute; bottom:8px; left:8px; z-index:1; padding:3px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; color:#fff; background:color-mix(in srgb, var(--up) 88%, #000);
}
.abody{padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px}
.abody .b{font-size:10.5px; font-weight:700; color:var(--pink-text); letter-spacing:.01em}
.abody .n{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.abody .pr{display:flex; align-items:baseline; gap:6px; margin-top:3px}
.abody .pr .p{font-weight:700; font-size:13.5px}
.abody .st{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:4px; font-size:11.5px; color:var(--ink-2)}
.abody .st .m{display:flex; gap:8px; min-width:0; white-space:nowrap; overflow:hidden}

/* --- album: 최소 폭 모바일 전용 (데스크톱·태블릿·리스트뷰 영향 없음) ---
   기본 minmax(200px,1fr) 은 482px 미만에서 1열로 떨어져 카드가 과도하게 커진다.
   482px 부근에서 기본 규칙이 다시 2열을 만들므로, 그 아래 구간만 2열로 고정하고
   간격·글자 크기를 줄인다. (500px 초과는 기본 auto-fill 이 그대로 3·4열로 증가)
   이미지 비율(4/5)·카드 구조는 그대로 유지. */
@media (max-width:500px){
  .album{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px 12px 14px}
  .abody{padding:8px 9px 10px}
  .abody .b{font-size:9.5px}
  .abody .n{font-size:11.5px; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .abody .pr{gap:5px; margin-top:2px}
  .abody .pr .p{font-size:12px}
  .abody .pr .off{font-size:10.5px}
  .abody .st{gap:4px; margin-top:3px; font-size:10.5px}
  .abody .st .m{gap:6px}
  .abody .st .mv{font-size:10.5px}
  .abody .st .mv.new{font-size:9.5px; padding:2px 5px}
  .aimg .arank{top:6px; left:6px; min-width:22px; padding:3px 6px; font-size:10.5px}
  .aimg .arise{top:6px; right:6px; padding:3px 6px; font-size:9.5px}
  .aimg .asd{bottom:6px; left:6px; padding:2px 6px; font-size:9px}
}

/* --- right rail widgets --- */
.rail{display:flex; flex-direction:column; gap:14px; min-width:0}
.wg{padding-bottom:14px}
.wl{display:flex; flex-direction:column; padding:10px 12px 0}
.wl .row{display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:12px}
.wl .row:hover{background:color-mix(in srgb, var(--pink-soft) 45%, transparent)}
.wl .rk{font:700 12px/1 "Sora",sans-serif; color:var(--ink-3); width:20px; text-align:center; flex:none}
.wl .thumb{width:56px;height:56px;border-radius:12px}
.wl .thumb svg{width:22px;height:22px}
.wl .meta{min-width:0; flex:1}
.wl .meta .b{font-size:10.5px; font-weight:600; color:var(--pink-text)}
.wl .meta .n{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wl .meta .cur{color:var(--ink-3); font-size:11px; font-weight:400; margin-left:4px}
.wl .mv{flex:none}

/* --- AI 인사이트 카드 — 은은한 홀로그래픽 표면 (CSS 그라디언트만 사용) --- */
.ai{
  position:relative; overflow:hidden;
  border-color:color-mix(in srgb, var(--primary) 20%, var(--border));
  background:
    radial-gradient(118% 88% at 0% 0%,   color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%),
    radial-gradient(112% 86% at 100% 4%, color-mix(in srgb, #8a63d2 12%, transparent),        transparent 60%),
    radial-gradient(130% 96% at 72% 108%, color-mix(in srgb, #4d7fc4 10%, transparent),       transparent 58%),
    var(--card);
}
/* 대각선 실크 광택 — 아주 옅게만 (가독성 우선) */
.ai::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(114deg, transparent 26%, color-mix(in srgb, var(--card) 60%, transparent) 45%, transparent 64%);
}
.ai > *{position:relative}
.ai-tag{
  font:700 9.5px/1 "Sora",sans-serif; letter-spacing:.09em; padding:4px 7px; border-radius:6px; color:#fff;
  background:linear-gradient(118deg, var(--primary), #8a63d2);
}
.ai-body{padding:11px 18px 16px}
.ai-lead{margin:0; font-size:12.5px; line-height:1.68; color:var(--ink-2)}
.ai-lead b{color:var(--ink); font-weight:600}
.ai-lead.clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ai-more{margin-top:11px; padding-top:11px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:10px}
.ai-more[hidden]{display:none}   /* display:flex 가 hidden 속성을 이기지 않도록 */
/* 접힘 상태 — 전체 높이의 40~50% 수준까지 보여준다.
   실제 max-height 는 콘텐츠 길이에 따라 renderAI() 가 계산해 인라인으로 넣는다
   (기간·카테고리에 따라 문장 길이가 달라지므로 고정값을 쓰지 않는다). */
.ai-more.peek{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
}
.ai-more section{margin:0}
.ai-more h3{margin:0 0 3px; font-size:11px; font-weight:700; color:var(--pink-text); letter-spacing:.01em}
.ai-more p{margin:0; font-size:12px; line-height:1.62; color:var(--ink-2)}
.ai-more b{color:var(--ink); font-weight:600}
.ai-toggle{
  margin-top:11px; padding:6px 12px; border-radius:9px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 70%, transparent);
  font-size:11.5px; font-weight:600; color:var(--ink-2); transition:border-color .15s, color .15s;
}
.ai-toggle:hover{border-color:var(--pink-line); color:var(--pink-text)}

/* donut — 당일배송 비중 */
.donut-box{display:flex; align-items:center; justify-content:flex-start; gap:20px; flex-wrap:wrap; padding:16px 20px 6px}
.donut{position:relative; width:116px; height:116px; flex:none}
.donut svg{display:block; width:116px; height:116px; transform:rotate(-90deg)}
.donut .c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none}
.donut .c b{font:700 22px/1.05 "Sora",sans-serif; color:var(--pink-text); letter-spacing:-.01em}
.donut .c span{font-size:10.5px; line-height:1.2; color:var(--ink-3); margin-top:3px}
.dlegend{display:flex; flex-direction:column; gap:10px; min-width:130px; flex:1}
.dlegend .lr{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.dlegend .sw{width:10px;height:10px;border-radius:3.5px;flex:none}
.dlegend .lv{margin-left:auto; font-weight:700; color:var(--ink)}
.dlegend .lp{color:var(--ink-3); font-size:11.5px; width:34px; text-align:right}

/* ============================================================
   4. BOTTOM INSIGHT WIDGETS
   ============================================================ */
.bottom{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
@media (max-width:1100px){ .bottom{grid-template-columns:1fr} }
/* stacked share bar */
.stack{display:flex; height:14px; border-radius:999px; overflow:hidden; gap:2px; margin:14px 18px 6px}
.stack i{display:block; height:100%}
.share-rows{padding:4px 12px 0}
.share-rows .row{display:flex; align-items:center; gap:9px; padding:6px; font-size:12.5px; border-radius:10px}
.share-rows .sw{width:9px;height:9px;border-radius:3px;flex:none}
.share-rows .nm{color:var(--ink-2)}
.share-rows .val{margin-left:auto; font-weight:600}
.share-rows .cnt{color:var(--ink-3); font-size:11.5px; width:34px; text-align:right}
/* brand bars */
.bars{padding:12px 18px 2px; display:flex; flex-direction:column; gap:10px}
.bar-row .t{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px}
.bar-row .t .nm{font-weight:600}
.bar-row .t .v{color:var(--ink-2)}
.bar-row .tr{height:8px; border-radius:999px; background:color-mix(in srgb, var(--grid) 60%, transparent)}
.bar-row .fl{height:100%; border-radius:999px; background:var(--primary)}
/* discount histogram */
.hist{display:flex; align-items:flex-end; gap:10px; height:130px; padding:16px 20px 0}
.hist .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.hist .bar{width:100%; max-width:44px; border-radius:8px 8px 4px 4px; background:color-mix(in srgb, var(--primary) 88%, var(--card)); min-height:3px; transition:filter .12s}
.hist .col:hover .bar{filter:brightness(1.08)}
.hist .n{font:600 11.5px/1 "Sora",sans-serif; color:var(--ink-2)}
.hist-x{display:flex; gap:10px; padding:7px 20px 2px}
.hist-x span{flex:1; text-align:center; font-size:10.5px; color:var(--ink-3)}

/* tooltip (chart hover) */
#tip{
  position:fixed; z-index:50; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--page); font-size:11.5px; line-height:1.4;
  padding:6px 9px; border-radius:8px; max-width:220px; box-shadow:0 6px 20px -6px rgba(0,0,0,.35);
}
#tip b{font-weight:600}

footer{margin-top:22px; text-align:center; font-size:11.5px; color:var(--ink-3)}

/* ============================================================
   5. PRODUCT DETAIL DRAWER — 우측 슬라이드 (대시보드 위에 겹침)
   position:fixed 라 기존 레이아웃 흐름에 영향 없음. 색은 전부 기존 토큰 사용.
   ============================================================ */
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:clamp(340px, 33vw, 560px); max-width:100%;
  display:flex; flex-direction:column;
  background:var(--card); border-left:1px solid var(--border);
  box-shadow:-18px 0 48px -24px rgba(20,20,20,.28);
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
}
.drawer.on{transform:none; visibility:visible}
/* 접힌 상태 — 본체만 오른쪽으로 밀고 손잡이는 화면에 남는다 */
.drawer.on.collapsed{transform:translateX(100%)}
.drawer-grip{
  position:absolute; left:-26px; top:50%; margin-top:-28px; z-index:1;
  width:26px; height:56px; border-radius:12px 0 0 12px;
  background:var(--card); border:1px solid var(--border); border-right:0;
  box-shadow:-7px 0 18px -10px rgba(20,20,20,.30);
  display:grid; place-items:center; color:var(--ink-2);
  transition:color .15s, background .15s;
}
.drawer-grip:hover{background:var(--pink-soft); color:var(--pink-text)}
.drawer-grip svg{width:13px; height:13px; transition:transform .28s cubic-bezier(.32,.72,0,1)}
.drawer.collapsed .drawer-grip svg{transform:rotate(180deg)}
/* 접힌 상태에서는 화면 가장자리에 손잡이만 남으므로 눈에 띄게 */
.drawer.collapsed .drawer-grip{
  background:var(--pink); border-color:var(--pink); color:#fff; height:64px;
  box-shadow:-8px 0 20px -10px rgba(255,70,170,.55);
}
.drawer.collapsed .drawer-grip:hover{background:color-mix(in srgb, var(--pink) 88%, #000)}
.drawer-h{display:flex; align-items:center; gap:12px; flex:none; padding:13px 16px; border-bottom:1px solid var(--border)}
.drawer-t{min-width:0; flex:1}
.drawer-t .b{display:block; font-size:11px; font-weight:700; color:var(--pink-text); letter-spacing:.01em}
.drawer-t .n{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drawer-ext{
  flex:none; padding:7px 13px; border-radius:10px; border:1px solid var(--border); background:var(--card);
  font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.drawer-ext:hover{border-color:var(--pink-line); color:var(--pink-text)}
.drawer-x{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--ink-2); transition:background .15s, color .15s}
.drawer-x:hover{background:var(--pink-soft); color:var(--pink-text)}
.drawer-x svg{width:15px; height:15px}
/* 상품 페이지 영역 — 내부 세로 스크롤 */
.drawer-body{flex:1 1 0; min-height:0; overflow:auto; background:var(--card-soft)}
/* iframe 은 로딩 애니메이션이 끝난 뒤에만 노출된다 (로더가 위를 덮고 있다) */
.drawer-body{position:relative}
.drawer-body iframe{position:absolute; inset:0; width:100%; height:100%; border:0;
  background:var(--card); opacity:0; transition:opacity .3s ease}
.drawer-body iframe.ready{opacity:1}

/* 로딩 상태 — 심플 텍스트 + 점 3개 펄스 (밝은 배경, 과한 연출 없음) */
.dload{
  position:absolute; inset:0; z-index:2; background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  transition:opacity .3s ease;
}
.dload.done{opacity:0; pointer-events:none}
.dload p{margin:0; font-size:13px; font-weight:500; color:var(--ink-2)}
.dload .dots{display:flex; gap:7px}
.dload .dots i{
  width:6px; height:6px; border-radius:50%; background:var(--pink);
  animation:dloadPulse 1.2s ease-in-out infinite;
}
.dload .dots i:nth-child(2){animation-delay:.18s}
.dload .dots i:nth-child(3){animation-delay:.36s}
@keyframes dloadPulse{
  0%, 70%, 100%{opacity:.25; transform:scale(.85)}
  35%{opacity:1; transform:scale(1)}
}

/* 임베드 불가 안내 — 사이트 정책으로 원본을 표시할 수 없을 때만 노출 */
.dblk{padding:40px 26px; text-align:center}
.dblk-msg{margin:0; font-size:13px; line-height:1.75; color:var(--ink-2)}
.dblk-btn{display:inline-block; margin-top:16px; padding:10px 18px; border-radius:12px;
  background:var(--pink); color:#fff; font-size:13px; font-weight:600; text-decoration:none}

@media (max-width:700px){
  .drawer{width:100%}
  /* 전체 폭이라 손잡이를 바깥에 두면 화면 밖으로 나간다 → 안쪽 가장자리에 붙인다 */
  .drawer:not(.collapsed) .drawer-grip{left:0; border-radius:0 12px 12px 0; border-left:0; border-right:1px solid var(--border)}
}