:root{
  --bg:#F4F5F7; --card:#FFFFFF; --ink:#16181D; --sub:#5A606B; --line:#E1E4E9; --line2:#EDEFF2; --head:#F7F8FA;
  --nav:#16181D; --nav-on:#2A2E37; --nav-ink:#B9BEC8;
  --accent:#1D4BC4; --accent-ink:#143585;
  --red-bg:#FDF1EF; --red:#A2281A; --red-bar:#C4321F;
  --yel-bg:#FFF6D6; --yel:#7A5600; --yel-bar:#D9A400;
  --tt-bg:#E7ECFB; --tt:#1D3F9E; --yt-bg:#FDEBDD; --yt:#8A3B0A;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--accent)}a:hover{color:var(--accent-ink)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.layout{display:flex;min-height:100vh}
nav.side{width:220px;flex-shrink:0;background:var(--nav);color:#E6E8EC;padding:24px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
nav.side .brand{font-size:15px;font-weight:700;padding:0 12px 20px;letter-spacing:.03em;line-height:1.4}
nav.side a{display:block;padding:12px;border-radius:6px;color:var(--nav-ink);text-decoration:none}
nav.side a.on{background:var(--nav-on);color:#fff;font-weight:600}
nav.side .foot{margin-top:auto;padding:12px;font-size:12px;color:#8A909C;line-height:1.7}
nav.side .foot button{margin-top:8px;background:none;border:1px solid #3A3F49;color:#B9BEC8;border-radius:6px;padding:6px 10px;cursor:pointer;font:inherit}
main{flex:1;min-width:0;padding:28px 36px 60px;display:flex;flex-direction:column;gap:20px}
h1{margin:0;font-size:24px}
.desc{margin:4px 0 0;font-size:13px;color:var(--sub)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.bar label.lb{font-size:12px;color:var(--sub)}
select,input[type=date],input[type=text],input[type=number],input[type=email],input[type=password]{height:40px;padding:0 10px;border:1px solid #CDD2DA;border-radius:6px;background:#fff;font:inherit;color:var(--ink)}
button{font:inherit;cursor:pointer}
.btn{height:40px;padding:0 16px;border:1px solid #CDD2DA;border-radius:6px;background:#fff;color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.seg{display:inline-flex;border:1px solid #CDD2DA;border-radius:6px;overflow:hidden;background:#fff}
.seg button{height:38px;min-width:70px;padding:0 12px;border:0;background:#fff;color:#2F343D}
.seg button.on{background:var(--ink);color:#fff}
.chk{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;white-space:nowrap}
.chk input{width:16px;height:16px}
details.excl{width:100%;font-size:13px}
details.excl summary{cursor:pointer;color:var(--sub);padding:4px 0}
.excl-list{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 0 2px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.kpi .k{font-size:12px;color:var(--sub)}
.kpi .v{font-size:22px;font-weight:700;margin-top:4px}
.kpi .s{font-size:12px;color:var(--sub);margin-top:2px}
.kpi.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.kpi.dark .k,.kpi.dark .s{color:#B9BEC8}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px}
.card-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-h h2{margin:0;font-size:15px}
.card-h .note{font-size:12px;color:var(--sub)}
.card-b{padding:16px 18px}
.scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{background:var(--head);color:var(--sub);font-weight:500;padding:9px 10px;text-align:right;white-space:nowrap;position:sticky;top:0}
table.t th.l,table.t td.l{text-align:left}
table.t th.sort{cursor:pointer;user-select:none}
table.t th.sort:hover{color:var(--ink)}
table.t th .arrow{display:inline-block;width:10px;color:var(--accent)}
table.t th.key{color:var(--ink);font-weight:700}
table.t td{padding:9px 10px;text-align:right;border-top:1px solid var(--line2);white-space:nowrap}
table.t td.name{white-space:normal;min-width:180px;max-width:320px}
table.t td.hl{background:var(--head);font-weight:700}
table.t tfoot td{font-weight:700;border-top:2px solid var(--line);background:#FAFBFC}
table.t tr.red td{background:var(--red-bg)}
table.t tr.yel td{background:var(--yel-bg)}
.rate{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.rate b{min-width:52px;text-align:right}
.rate .track{width:120px;height:8px;border-radius:4px;background:#E6E8EC;position:relative;overflow:hidden}
.rate .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.c-red{color:var(--red)} .c-yel{color:var(--yel)}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.tag.TikTok{background:var(--tt-bg);color:var(--tt)} .tag.YouTube{background:var(--yt-bg);color:var(--yt)}
.muted{color:#8A909C}
.chart{width:100%;height:170px;display:block}
.legend{display:flex;gap:16px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.msg{padding:10px 14px;border-radius:6px;font-size:13px}
.msg.warn{background:#FFF4CC;color:#6B4B00}
.msg.err{background:var(--red-bg);color:var(--red)}
.msg.ok{background:#E8F5EC;color:#1E6B3A}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.drop{border:2px dashed #C2C7D0;border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:#fff}
.drop .ttl{font-weight:700}
.status-ok{color:#1E6B3A;font-weight:700} .status-ng{color:var(--red);font-weight:700}
.empty{padding:28px;text-align:center;color:var(--sub)}
.loading{opacity:.55;pointer-events:none}
@media (max-width:1100px){.kpis,.kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
  .layout{flex-direction:column}
  nav.side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:10px 12px;gap:2px}
  nav.side .brand{width:100%;padding:4px 8px 8px}
  nav.side a{padding:8px 10px;font-size:13px}
  nav.side .foot{display:none}
  main{padding:16px}
  .kpis,.kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
}