:root{
  /* 밝은 US / TikTok Shop 톤 */
  --bg:#eef1f7; --bg2:#e7ebf3;
  --panel:#ffffff; --panel2:#f4f6fb; --panel3:#eaeef6;
  --line:#e1e6f0; --line2:#cfd6e4;
  --txt:#14171d; --mut:#5d6878; --mut2:#8a94a6;
  --ink:#16181d;                 /* TikTok 블랙 */
  --cyan:#06b6c4; --cyanL:#25F4EE;
  --red:#fe2c55;                  /* TikTok 레드 */
  --good:#10b981; --warn:#f59e0b; --bad:#ef4444; --info:#6366f1; --purple:#8b5cf6;
  --seed:#7c5cff;                 /* 시딩 표시색 */
  --grad:linear-gradient(135deg,#25F4EE,#06b6c4);
  --gradInk:linear-gradient(135deg,#1b1e25,#363b46);
  --gGood:linear-gradient(90deg,#0caa6e,#23c98a);
  --gWarn:linear-gradient(90deg,#e8870b,#ffb13d);
  --gBad:linear-gradient(90deg,#fe2c55,#ff6a86);
  --gCyan:linear-gradient(90deg,#06b6c4,#25F4EE);
  --r:16px; --r2:12px; --sh:0 2px 8px rgba(20,30,60,.06),0 8px 24px rgba(20,30,60,.06);
  --shHover:0 4px 14px rgba(20,30,60,.10),0 12px 30px rgba(20,30,60,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(900px 480px at 88% -8%,rgba(37,244,238,.16),transparent 60%),
  radial-gradient(800px 460px at -6% 4%,rgba(254,44,85,.07),transparent 55%),var(--bg);
  color:var(--txt);font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Segoe UI',system-ui,sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1{font-size:18px;margin:0;letter-spacing:-.3px}
.hidden{display:none!important}
.muted,.sub{color:var(--mut)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}

/* 헤더 */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 26px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:15px}
.logo{background:var(--ink);color:#fff;font-weight:800;padding:10px 12px;border-radius:13px;
  font-size:13px;letter-spacing:.4px;position:relative}
.logo::after{content:"";position:absolute;inset:0;border-radius:13px;
  box-shadow:2px 0 0 var(--cyanL),-2px 0 0 var(--red);opacity:.0}
.logo{box-shadow:0 0 0 2px #fff, 3px 3px 0 var(--cyanL), -3px -3px 0 rgba(254,44,85,.6)}
.sub{font-size:12px;margin:3px 0 0}
.actions{display:flex;gap:9px;flex-wrap:wrap}

.btn{background:var(--ink);color:#fff;border:0;border-radius:11px;padding:10px 16px;
  font-size:13px;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,30,60,.18)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--txt)}
.btn.ghost:hover{border-color:var(--cyan);background:var(--panel2)}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:9px}

/* 드롭존 */
.dropzone{margin:22px 26px;border:2px dashed var(--line2);border-radius:var(--r);
  background:#fff;padding:42px;text-align:center;cursor:pointer;transition:.18s}
.dropzone:hover{border-color:var(--cyan)}
.dropzone.drag{border-color:var(--cyan);background:var(--panel2)}
.dz-title{font-size:16px;font-weight:800;margin:0 0 10px;color:var(--ink)}
.dz-title::before{content:"⬆";display:block;font-size:28px;margin-bottom:8px;color:var(--cyan)}
.dz-hint{font-size:12px;color:var(--mut);margin:0;line-height:1.7}
.filelist{margin-top:18px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--panel2);border:1px solid var(--line2);border-radius:30px;padding:6px 14px;
  font-size:12px;display:inline-flex;gap:7px;align-items:center;font-weight:600;color:var(--txt)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.chip.cur::before{background:var(--cyan)} .chip.cur{border-color:var(--cyan)}
.chip.prev::before{background:var(--warn)} .chip.prev{border-color:var(--warn)}
.chip.map::before{background:var(--good)} .chip.map{border-color:var(--good)}
.chip.seed::before{background:var(--seed)} .chip.seed{border-color:var(--seed)}
.chip.ugc::before{background:var(--red)} .chip.ugc{border-color:var(--red)}

main{padding:0 26px 48px;max-width:1500px;margin:0 auto}

/* 필터 */
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;margin:10px 0 4px;box-shadow:var(--sh)}
.filters label{display:flex;flex-direction:column;font-size:11px;color:var(--mut);gap:5px;font-weight:700}
.filters select,.filters input{background:#fff;color:var(--txt);border:1px solid var(--line2);
  border-radius:9px;padding:8px 11px;font-size:13px;min-width:130px;transition:border .12s}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--cyan)}
.searchbox input{min-width:190px}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--txt);cursor:pointer;user-select:none;font-weight:600}
.toggle input{appearance:none;width:38px;height:21px;background:var(--line2);border-radius:20px;position:relative;cursor:pointer;transition:.2s}
.toggle input:checked{background:var(--cyan)}
.toggle input::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle input:checked::after{left:20px}

/* 탭 내비게이션 */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px;border-bottom:2px solid var(--line);padding-bottom:0}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--mut);cursor:pointer;
  border-radius:10px 10px 0 0;transition:.14s;white-space:nowrap}
.tab:hover{color:var(--txt);background:var(--panel2)}
.tab.active{color:var(--ink);border-bottom-color:var(--cyan);background:var(--panel)}
.tabpane{display:none;animation:fade .2s ease}
.tabpane.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 섹션 타이틀 */
h2.sectitle{font-size:15px;margin:28px 2px 12px;display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
h2.sectitle .num{background:var(--ink);color:#fff;width:23px;height:23px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto}
h2.sectitle small{font-size:12px;color:var(--mut);font-weight:500}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;
  position:relative;overflow:hidden;box-shadow:var(--sh);transition:transform .14s,box-shadow .14s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shHover)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gCyan)}
.kpi.sig-good::before{background:var(--gGood)} .kpi.sig-warn::before{background:var(--gWarn)} .kpi.sig-bad::before{background:var(--gBad)}
.kpi.sig-seed::before{background:linear-gradient(90deg,#7c5cff,#a98bff)}
.kpi .k-label{font-size:12px;color:var(--mut);font-weight:700;display:flex;align-items:center;gap:6px}
.kpi .k-val{font-size:29px;font-weight:800;margin:6px 0 2px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .k-delta{font-size:11px;font-weight:800;display:inline-block;padding:2px 8px;border-radius:20px;margin-top:2px}
.kpi .k-interp{font-size:11.5px;color:var(--mut);margin-top:9px;line-height:1.5}
.k-delta.up{background:rgba(254,44,85,.12);color:var(--bad)}
.k-delta.down{background:rgba(12,170,110,.14);color:var(--good)}
.k-delta.flat{background:var(--panel3);color:var(--mut)}
.sig-good .k-val,.t-good{color:var(--good)} .sig-warn .k-val,.t-warn{color:var(--warn)}
.sig-bad .k-val,.t-bad{color:var(--bad)} .sig-seed .k-val{color:var(--seed)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.d-good{background:var(--good)} .d-warn{background:var(--warn)} .d-bad{background:var(--bad)}

/* 카드 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
.note{font-size:12px;color:var(--mut);background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:8px;padding:10px 13px;margin:8px 0 14px;line-height:1.6}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--red)} .note.warn b{color:var(--red)}
.note.seed{border-left-color:var(--seed)}

/* 막대 */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:minmax(240px,270px) 1fr 140px;gap:12px;align-items:center;font-size:12.5px}
@media(max-width:680px){.bar-row{grid-template-columns:1fr}.bar-track{display:none}}
.bar-row .lab{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:600;line-height:1.35}
.bar-track{background:var(--panel3);border-radius:8px;height:22px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:8px;background:var(--gCyan);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar-fill.b-good{background:var(--gGood)} .bar-fill.b-warn{background:var(--gWarn)} .bar-fill.b-bad{background:var(--gBad)}
.bars.pos .bar-fill{background:var(--gGood)}
.bar-meta{font-size:11.5px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.bar-meta b{color:var(--ink)}
.tag{font-size:10px;padding:2px 7px;border-radius:6px;border:1px solid var(--line2);color:var(--mut);font-weight:700}
.tag.qc{color:var(--bad);border-color:rgba(254,44,85,.4);background:rgba(254,44,85,.07)}
.tag.exp{color:var(--warn);border-color:rgba(232,135,11,.4);background:rgba(232,135,11,.08)}

/* 세그먼트 */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px}
.seg-group{margin-top:16px}
.seg-group h3{font-size:13px;margin:0 0 10px;color:var(--ink);font-weight:800}
.seg-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:13px}
.seg-card h4{margin:0 0 4px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.seg-card .scount{font-size:11px;color:var(--mut);font-weight:600}
.seg-card .smetrics{font-size:12px;margin-top:6px;display:flex;gap:14px}
.seg-card .smini{margin-top:9px}
.minibar{background:var(--panel3);border-radius:6px;height:7px;overflow:hidden}
.minibar>div{height:100%;background:var(--gCyan)}

/* 추이 / 차트 */
#trend svg,#timeline svg{width:100%;height:240px;display:block}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--mut);margin-bottom:8px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:14px;height:4px;border-radius:2px;display:inline-block}
.legend .dotm{width:9px;height:9px;border-radius:50%;display:inline-block}

/* 테이블 */
.table-tools{display:flex;gap:14px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.table-wrap{overflow:auto;max-height:620px;border:1px solid var(--line);border-radius:var(--r2)}
table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tbody tr:nth-child(even){background:var(--panel2)}
tbody tr:hover{background:rgba(6,182,196,.07)}
th{position:sticky;top:0;background:var(--ink);color:#fff;z-index:1;white-space:nowrap;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700}
td.r{font-weight:800;text-align:center;font-size:13px}
.r5,.r4{color:var(--good)} .r3{color:var(--warn)} .r2,.r1{color:var(--bad)}
.lang-pill{font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;border:1px solid var(--line2);color:var(--mut)}
.lang-pill.es{color:var(--info);border-color:rgba(47,127,240,.4);background:rgba(47,127,240,.07)}
.type-pill{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px}
.type-pill.seed{color:#fff;background:var(--seed)}
.type-pill.org{color:var(--mut);border:1px solid var(--line2)}
.txt-cell{max-width:470px}
.txt-ko{display:block;margin-top:5px;padding-top:5px;border-top:1px dotted var(--line2);color:var(--cyan);font-size:12px;font-weight:600}
.txt-ko::before{content:"🇰🇷 "}

/* 액션 보드 */
.actions-list{display:flex;flex-direction:column;gap:10px}
.action{display:flex;gap:13px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-left:4px solid var(--mut2);border-radius:var(--r2);padding:13px 15px}
.action.a-bad{border-left-color:var(--bad);background:rgba(254,44,85,.04)}
.action.a-warn{border-left-color:var(--warn);background:rgba(232,135,11,.04)}
.action.a-good{border-left-color:var(--good);background:rgba(12,170,110,.04)}
.a-sev{font-size:16px;line-height:1.3}
.a-title{font-weight:800;color:var(--ink);font-size:13.5px}
.a-ev{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.evchip{font-size:11px;font-weight:700;background:#fff;border:1px solid var(--line2);border-radius:20px;padding:2px 9px;color:var(--mut);font-variant-numeric:tabular-nums}
.a-act{font-size:12.5px;color:var(--txt);line-height:1.55}

/* 한눈에 요약 — 파스텔 인사이트 카드 (JP 참고) */
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.insight{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;box-shadow:var(--sh)}
.insight.g-green{background:linear-gradient(135deg,#ecfdf5,#f0fdfa);border-color:#bbf7d0}
.insight.g-red{background:linear-gradient(135deg,#fef2f2,#fff1f2);border-color:#fecaca}
.insight.g-amber{background:linear-gradient(135deg,#fffbeb,#fff7ed);border-color:#fde68a}
.insight.g-indigo{background:linear-gradient(135deg,#eef2ff,#faf5ff);border-color:#c7d2fe}
.insight .i-h{font-size:13px;font-weight:800;color:var(--ink)}
.insight .i-b{font-size:13px;margin:8px 0 10px;line-height:1.5}
.insight .i-b b{font-size:15px}
.insight .i-a{font-size:12px;font-weight:700;color:var(--info)}
.g-green .i-a{color:#059669}.g-red .i-a{color:#dc2626}.g-amber .i-a{color:#b45309}.g-indigo .i-a{color:#4f46e5}

/* 평점 도넛 */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-leg{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.donut-leg span{display:flex;align-items:center;gap:8px}
.donut-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* 제품별 리뷰 분석 카드 */
.prodcard{border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;margin-bottom:12px;background:var(--panel)}
.pc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.pc-head b{font-size:14px;color:var(--ink)}
.pc-meta{font-size:12px;color:var(--mut)}
.pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.pc-cols{grid-template-columns:1fr}}
.pc-lab{font-size:12.5px;font-weight:800;margin-bottom:6px}
.pc-th{display:inline-block;font-size:11.5px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin:0 5px 5px 0}
.pc-th b{font-variant-numeric:tabular-nums}
.pc-act{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--info)}
.rep{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:12px;line-height:1.5;
  border-left:3px solid var(--line2);padding:6px 10px;margin-top:8px;background:var(--panel2);border-radius:0 8px 8px 0;color:#374151}
.rep.pos{border-left-color:var(--good)} .rep.neg{border-left-color:var(--bad)}
.rep-ko{display:block;margin-top:4px;font-family:inherit;font-style:normal;color:var(--info);font-size:11.5px}
.rep-ko::before{content:"🇰🇷 "}

/* 워드클라우드 */
.wordcloud{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 4px;line-height:1.2}
.wc{font-weight:800;cursor:default;transition:transform .1s}
.wc:hover{transform:scale(1.12)}

/* 배경 워터마크 */
.watermark{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.watermark span{font-weight:900;font-size:7vw;letter-spacing:.06em;white-space:nowrap;
  transform:rotate(-18deg);color:transparent;
  background:linear-gradient(135deg,rgba(254,44,85,.10),rgba(6,182,196,.12));
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;-webkit-text-stroke:1.5px rgba(22,24,29,.05);user-select:none}
.topbar,main,.foot,.dropzone,.guide{position:relative;z-index:1}

/* 사용 설명서 */
.guide{margin:22px 26px 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px}
.guide-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.guide-head h2{margin:0;font-size:16px;color:var(--ink)}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.guide-step{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 14px 14px 44px;position:relative;font-size:12.5px}
.guide-step b{color:var(--ink);font-size:13px}
.guide-step p{margin:5px 0 0;color:var(--mut);line-height:1.55}
.guide-step code{background:#fff;border:1px solid var(--line2);border-radius:5px;padding:1px 5px;font-size:11px;color:var(--cyan)}
.gs-num{position:absolute;left:12px;top:13px;width:24px;height:24px;border-radius:8px;
  background:var(--ink);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.gs-tip .gs-num{background:linear-gradient(135deg,var(--cyanL),var(--cyan))}
.gs-tip{border-color:var(--cyan)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:20px 26px;border-top:1px solid var(--line);color:var(--mut2);font-size:12px;margin-top:20px}