:root {
  --primary: #2563eb;
  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #1f2937;
  --error: #dc2626;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* ログイン */
.login-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box {
  background: var(--card); padding: 2.5rem; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08); width: 100%; max-width: 380px;
}
.login-box h1 { font-size: 1.2rem; margin-bottom: 1.5rem; text-align: center; }
.login-box label { display: block; margin-bottom: 1rem; font-size: .9rem; }
.login-box input {
  width: 100%; padding: .6rem .8rem; margin-top: .3rem;
  border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem;
}
.login-box button {
  width: 100%; padding: .7rem; margin-top: .5rem; border: none; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 1rem; cursor: pointer;
}
.login-box button:hover { opacity: .9; }
.error { color: var(--error); font-size: .9rem; margin-bottom: 1rem; }

/* ダッシュボード */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); padding: .8rem 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.brand { font-weight: 700; }
.topbar .user { margin-right: 1rem; font-size: .9rem; color: #6b7280; }
.btn-logout { color: var(--primary); text-decoration: none; font-size: .9rem; }
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.container h1 { margin-bottom: .5rem; }
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.card {
  background: var(--card); padding: 1.5rem; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.card h2 { font-size: 1rem; margin-bottom: .5rem; color: var(--primary); }

/* ---- 追加: ダッシュボード強化 ---- */
.brand a { color: inherit; text-decoration: none; }
.topbar nav a { color: var(--primary); text-decoration: none; font-size: .9rem; margin-left: 1rem; }
.muted { color: #6b7280; font-size: .9rem; }
a.card.link { text-decoration: none; color: inherit; display: block; transition: transform .1s, box-shadow .1s; }
a.card.link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.card-action { display: inline-block; margin-top: .8rem; color: var(--primary); font-size: .85rem; font-weight: 600; }
.card.disabled { opacity: .55; }
.card.stat .num { font-size: 1.8rem; font-weight: 700; margin-top: .3rem; }
.chart-title { font-size: .95rem; margin-bottom: 1rem; color: var(--text); }
.notice { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; font-size: .9rem; }
.notice.success { background: #ecfdf5; color: #065f46; }
.notice.error { background: #fef2f2; color: #991b1b; }
.form-card { max-width: 520px; }
.form-card label { display: block; margin-bottom: 1rem; font-size: .9rem; }
.form-card input[type=text], .form-card input[type=file] {
  width: 100%; padding: .55rem .7rem; margin-top: .3rem;
  border: 1px solid #d1d5db; border-radius: 8px; font-size: .95rem;
}
.form-card button {
  padding: .6rem 1.4rem; border: none; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 1rem; cursor: pointer;
}
.inline-form { margin: 1rem 0; }
.inline-form select { padding: .45rem .7rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: .95rem; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .5rem .7rem; border-bottom: 1px solid #eef0f3; text-align: left; }
table.data thead th { background: #f9fafb; font-weight: 600; }
table.data td.r, table.data th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot th { background: #f9fafb; }

/* ---- 追加: アップロード日付検出 ---- */
.detected { background:#eff6ff; color:#1e40af; padding:.6rem .9rem; border-radius:8px; font-size:.9rem; margin:0 0 1rem; }
.detected strong { font-size:1rem; }
.manual-date { margin-bottom:1rem; }
.manual-date summary { cursor:pointer; font-size:.85rem; color:#6b7280; }
.manual-date label { margin-top:.6rem; }

/* ---- 追加: ドラッグ&ドロップ ---- */
.dropzone {
  border: 2px dashed #cbd5e1; border-radius: 12px; padding: 2.2rem 1rem;
  text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
  margin-bottom: 1.2rem; background: #fafbfc;
}
.dropzone:hover { border-color: var(--primary); background: #f5f8ff; }
.dropzone.drag { border-color: var(--primary); background: #eff6ff; }
.dropzone .dz-icon { font-size: 1.8rem; margin-bottom: .3rem; }
.dropzone .dz-main { font-weight: 600; }
.dropzone .dz-sub { font-size: .85rem; color: #6b7280; margin-top: .2rem; }
.dropzone .dz-file { margin-top: .9rem; font-size: .9rem; color: var(--text); }
.dropzone .detected { display: inline-block; margin-top: .8rem; }
#submitBtn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 追加: ドロップゾーン強調 ---- */
.dropzone { padding: 2.8rem 1rem; }
.dropzone .dz-icon { font-size: 2.4rem; }
.dropzone .dz-main { font-size: 1.15rem; }
.dropzone .dz-here {
  color: #fff; background: var(--primary); padding: .1rem .6rem;
  border-radius: 6px; font-weight: 700;
}
.dropzone .dz-sub2 { font-weight: 600; color: var(--primary); margin-top: .2rem; }

/* ---- 追加: 月別フィルタ ---- */
.filters { display:flex; gap:1.2rem; flex-wrap:wrap; align-items:flex-end; }
.filters label { font-size:.85rem; color:#374151; }
.filters select { display:block; margin-top:.3rem; }
.card.stat .sub { font-size:.8rem; color:#6b7280; }

/* ---- 追加: ソート可能な明細表 ---- */
table.data tbody tr:nth-child(even) { background:#fafbfc; }
table.data tbody tr:hover { background:#eff6ff; }
table.sortable thead th.sort { cursor:pointer; user-select:none; white-space:nowrap; }
table.sortable thead th.sort:hover { background:#eef2ff; color:var(--primary); }
table.sortable thead th .arr { color:var(--primary); font-size:.75rem; }
table.data th, table.data td { vertical-align:middle; }
table.data td:first-child { font-weight:500; }

/* ---- 追加: 区分バッジ ---- */
.badge { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
.badge-ad { background:#dbeafe; color:#1e40af; }
.badge-organic { background:#dcfce7; color:#166534; }

/* ---- 追加: 媒体別バッジ ---- */
.badge-gsearch { background:#dbeafe; color:#1d4ed8; }   /* Google検索 */
.badge-gdg     { background:#e0f2fe; color:#0369a1; }   /* Google DG */
.badge-meta    { background:#ede9fe; color:#6d28d9; }   /* Meta */
.badge-tiktok  { background:#fae8ff; color:#a21caf; }   /* TikTok */
.badge-urd     { background:#fff7ed; color:#c2410c; }   /* ウリドキ */
.badge-organic { background:#dcfce7; color:#166534; }   /* 自然流入 */
.badge-other   { background:#f1f5f9; color:#475569; }   /* その他 */

/* ---- 追加: 大区分バッジ ---- */
.maj-ad       { background:#1d4ed8; color:#fff; }
.maj-organic  { background:#16a34a; color:#fff; }
.maj-referral { background:#0d9488; color:#fff; }
.maj-direct   { background:#64748b; color:#fff; }
.maj-unknown  { background:#9ca3af; color:#fff; }

/* ---- 追加: 日次取込状況カレンダー ---- */
.day-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:6px; }
.day { display:flex; align-items:center; justify-content:center; height:34px; border-radius:6px; font-size:.8rem; font-weight:600; }
.day.ok { background:#dcfce7; color:#166534; }
.day.miss { background:#fee2e2; color:#991b1b; }
.day.future { background:#f1f5f9; color:#cbd5e1; }
.day-legend { display:flex; gap:1.2rem; margin-top:.7rem; font-size:.78rem; color:#6b7280; }
.day-legend .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.3rem; vertical-align:middle; }
.day-legend .dot.ok{background:#86efac;} .day-legend .dot.miss{background:#fca5a5;} .day-legend .dot.future{background:#e2e8f0;}

/* ---- 追加: 複数ファイル一覧 ---- */
.file-list { list-style:none; padding:0; margin:0 0 1rem; }
.file-item { display:flex; align-items:center; gap:.8rem; padding:.5rem .7rem; border:1px solid #eef0f3; border-radius:8px; margin-bottom:.4rem; font-size:.9rem; }
.file-item .fi-name { flex:1; word-break:break-all; }
.file-item .fi-date { color:var(--primary); font-weight:600; white-space:nowrap; }
.file-item .fi-del { border:none; background:#f1f5f9; color:#64748b; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; }
.file-item .fi-del:hover { background:#fee2e2; color:#991b1b; }

/* ---- 追加: 要因分析（期間比較）---- */
.cmp-periods { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.cmp-period { display:flex; gap:.4rem; align-items:center; }
.cmp-period select { padding:.35rem .5rem; border:1px solid #d1d5db; border-radius:8px; font-size:.85rem; }
.cmp-label { font-size:.8rem; font-weight:600; padding:.2rem .6rem; border-radius:6px; }
.cmp-label.base { background:#e5e7eb; color:#374151; }
.cmp-label.comp { background:#dbeafe; color:#1e40af; }
.cmp-form button { padding:.45rem 1.2rem; border:none; border-radius:8px; background:var(--primary); color:#fff; cursor:pointer; }
.cmp-h { font-size:.92rem; margin:.3rem 0; }
.cmp-table th, .cmp-table td { white-space:nowrap; }
.up { color:#16a34a; font-weight:700; }
.down { color:#dc2626; font-weight:700; }
.zero { color:#9ca3af; }

/* ================= POLISH-V2 装飾強化 ================= */
body { background:#f1f5f9; color:#0f172a; -webkit-font-smoothing:antialiased; }
.container { max-width:1120px; }

/* トップバー */
.topbar { padding:1rem 1.6rem; box-shadow:0 1px 3px rgba(15,23,42,.08); position:sticky; top:0; z-index:10; }
.brand { font-size:1.05rem; letter-spacing:.01em; }
.brand a { background:linear-gradient(90deg,#2563eb,#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* 見出し */
.container h1 {
  font-size:1.5rem; font-weight:800; letter-spacing:.01em; margin-bottom:.4rem;
  display:flex; align-items:center; gap:.6rem;
}
.container h1::before {
  content:""; width:6px; height:1.4rem; border-radius:3px;
  background:linear-gradient(180deg,#2563eb,#7c3aed);
}

/* セクションタイトル */
.chart-title {
  font-size:1rem; font-weight:700; color:#1e293b; margin-bottom:1rem;
  padding-left:.7rem; border-left:4px solid var(--primary); line-height:1.3;
}
.cmp-h { font-weight:700; color:#334155; padding-left:.5rem; border-left:3px solid #94a3b8; }

/* カード */
.card { border:1px solid #eef2f7; box-shadow:0 1px 3px rgba(15,23,42,.06); border-radius:14px; }

/* 統計カード */
.cards { gap:1.1rem; }
.card.stat { position:relative; overflow:hidden; padding:1.3rem 1.4rem; }
.card.stat::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#2563eb,#7c3aed); }
.card.stat h2 { font-size:.78rem; color:#64748b; font-weight:600; letter-spacing:.02em; margin-bottom:.2rem; }
.card.stat .num { font-size:2rem; font-weight:800; color:#0f172a; letter-spacing:-.01em; }
.card.stat .sub { display:inline-block; margin-top:.3rem; background:#f1f5f9; color:#475569; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; font-weight:600; }

/* フィルタ */
.inline-form.filters { background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:1rem 1.2rem; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.filters select, .cmp-period select { border:1px solid #cbd5e1; border-radius:9px; padding:.45rem .7rem; font-size:.9rem; background:#fff; }
.filters select:focus, .cmp-period select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* テーブル */
table.data { font-size:.9rem; }
table.data thead th { background:#f8fafc; color:#475569; font-size:.82rem; letter-spacing:.02em; border-bottom:2px solid #e2e8f0; padding:.65rem .8rem; }
table.data td { padding:.6rem .8rem; border-bottom:1px solid #f1f5f9; }
table.data tbody tr:hover { background:#f5f8ff; }
table.data tfoot th { background:#eef2ff; color:#1e293b; border-top:2px solid #c7d2fe; }

/* 要因分析 期間ラベル */
.cmp-arrow { font-size:1.2rem; color:#94a3b8; font-weight:700; }
.cmp-label { font-size:.82rem; }
.cmp-label.base { background:#e2e8f0; color:#334155; }
.cmp-label.comp { background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; }
.cmp-form button { box-shadow:0 2px 6px rgba(37,99,235,.3); font-weight:600; }
.up { color:#15803d; } .down { color:#dc2626; }

/* バッジ角丸・余白 */
.badge { letter-spacing:.01em; box-shadow:0 1px 2px rgba(15,23,42,.06); }

/* リンクカード */
a.card.link h2 { color:#1e293b; }
.card-action { background:#eff6ff; padding:.25rem .7rem; border-radius:999px; }

/* ---- 追加: 比較表のグループ見出し ---- */
.cmp-table .grp { text-align:center; border-bottom:1px solid #e2e8f0; border-left:1px solid #eef2f7; background:#eef2ff; color:#1e293b; }
.cmp-table .sub-th { font-weight:600; color:#64748b; font-size:.78rem; }
.cmp-table th, .cmp-table td { text-align:right; }
.cmp-table th:first-child, .cmp-table td:first-child { text-align:left; }
.cmp-table thead tr:first-child th { white-space:nowrap; }

/* ---- 追加: ファイル件数カウンタ ---- */
.file-count { font-size:.85rem; color:#475569; margin:.2rem 0 1rem; }
.file-count.warn { color:#b91c1c; font-weight:600; background:#fef2f2; padding:.5rem .7rem; border-radius:8px; }

/* ================= CMP-NOWRAP 期間ピッカー横並び ================= */
.cmp-periods { flex-wrap:nowrap; align-items:center; gap:.8rem; }
.cmp-period { flex-wrap:nowrap; white-space:nowrap; }
.cmp-period select { min-width:140px; }
@media (max-width:640px){
  .cmp-periods { flex-wrap:wrap; }
}

/* ---- 追加: セクションラベル（1日平均など）---- */
.section-label { font-size:1.05rem; font-weight:700; color:#1e293b; margin:1.8rem 0 .8rem; padding-left:.7rem; border-left:4px solid #7c3aed; }

/* ---- 追加: 推移モード切替トグル ---- */
.trend-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:.6rem; }
.trend-toggle { display:inline-flex; border:1px solid #d1d5db; border-radius:9px; overflow:hidden; }
.trend-toggle a { padding:.4rem 1rem; font-size:.85rem; color:#475569; text-decoration:none; background:#fff; transition:background .1s; }
.trend-toggle a + a { border-left:1px solid #e5e7eb; }
.trend-toggle a:hover { background:#f1f5f9; }
.trend-toggle a.on { background:var(--primary); color:#fff; font-weight:700; }

/* ---- 追加: モード切替（タイトル直下）---- */
.mode-toggle { display:inline-flex; border:1px solid #d1d5db; border-radius:10px; overflow:hidden; margin:.2rem 0 1.2rem; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.mode-toggle a { padding:.5rem 1.3rem; font-size:.92rem; color:#475569; text-decoration:none; background:#fff; transition:background .1s; }
.mode-toggle a + a { border-left:1px solid #e5e7eb; }
.mode-toggle a:hover { background:#f1f5f9; }
.mode-toggle a.on { background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; font-weight:700; }

/* ---- 追加: GSCクエリ区分バッジ ---- */
.gsck-brand   { background:#ede9fe; color:#6d28d9; }  /* 指名検索 */
.gsck-kaitori { background:#dcfce7; color:#166534; }  /* 買取 */
.gsck-data    { background:#dbeafe; color:#1d4ed8; }  /* データ移行 */
.gsck-other   { background:#f1f5f9; color:#475569; }  /* その他 */

/* ---- 追加: 買取 対策キーワード ---- */
.kw-ops { margin:.2rem 0 0; padding-left:1.4rem; }
.kw-ops li { margin-bottom:.9rem; }
.kw-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; }
.kw-q { font-weight:700; font-size:1rem; color:#0f172a; }
.kw-metrics { font-size:.8rem; color:#64748b; }
.kw-reason { margin:.2rem 0 0; font-size:.9rem; color:#334155; }

/* ---- 追加: 買取対策キーワード 表 ---- */
.kw-table th, .kw-table td { vertical-align:top; }
.kw-table .kw-rank { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#16a34a; color:#fff; font-size:.8rem; font-weight:700; }
.kw-reason-cell { font-size:.85rem; color:#334155; max-width:420px; white-space:normal; line-height:1.5; }
.pos-bad { color:#dc2626; font-weight:700; }
.pos-mid { color:#d97706; font-weight:700; }
.pos-good { color:#16a34a; font-weight:700; }

/* ---- 追加: キャンペーン別 月次ピボット ---- */
.pivot-table th, .pivot-table td { white-space:nowrap; }
.pivot-table thead th .yr { font-weight:400; color:#94a3b8; font-size:.72rem; }
.pivot-table td.up { color:#15803d; }
.pivot-table td.down { color:#dc2626; }
.pivot-table tbody tr:hover { background:#f5f8ff; }

/* ---- 追加: ピボットセル（セッション/CV/CV率）---- */
.pv-cell { white-space:nowrap; line-height:1.3; }
.pv-s { display:block; font-weight:600; }
.pv-s.up { color:#15803d; } .pv-s.down { color:#dc2626; }
.pv-sub { display:block; font-size:.72rem; color:#64748b; }

/* ---- 追加: 折りたたみ明細 ---- */
details.detail-card > summary { cursor:pointer; list-style:none; user-select:none; display:flex; align-items:center; gap:.5rem; }
details.detail-card > summary::-webkit-details-marker { display:none; }
details.detail-card > summary::before { content:'▶'; color:var(--primary); font-size:.8rem; transition:transform .15s; }
details.detail-card[open] > summary::before { transform:rotate(90deg); }
details.detail-card > summary:hover { color:var(--primary); }

/* ---- 追加: GA4 ビュータブ（キャンペーン/メディア）---- */
.view-tabs { display:inline-flex; gap:.3rem; margin:.2rem 0 1rem; border-bottom:2px solid #e2e8f0; }
.view-tabs a { padding:.55rem 1.1rem; font-size:.95rem; font-weight:600; color:#64748b; text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-2px; }
.view-tabs a:hover { color:var(--primary); }
.view-tabs a.on { color:var(--primary); border-bottom-color:var(--primary); }

/* ================= STICKY-THEAD テーブル見出し固定 ================= */
table.data thead th { background:#eef2ff; box-shadow:0 1px 0 #c7d2fe; } /* ヘッダー固定(sticky)は行が隠れて紛らわしいため解除 */

/* ================= ROUNDED-V1 角丸を強化 ================= */
.card { border-radius: 18px; }
.card.stat { border-radius: 16px; }
.notice { border-radius: 12px; }
.inline-form.filters { border-radius: 14px; }
.dropzone { border-radius: 16px; }
.mode-toggle, .trend-toggle, .view-tabs { border-radius: 12px; }
.filters select, .cmp-period select, .form-card input, .cmp-form button, .form-card button { border-radius: 10px; }
.table-scroll { border:1px solid #eef2f7; border-radius: 14px; }
table.data { border-radius: 12px; overflow: hidden; }
.badge { border-radius: 999px; }

.badge-social { background:#ede9fe; color:#6d28d9; }

.maj-social { background:#7c3aed; color:#fff; }