/* ============================================================
   UB-Iダッシュボード CSS (TOPの s04 セクションを流用)
   下層 ubi.html で「多店舗管理の限界」＋ 5タブダッシュ を再利用。
   dark section 前提の色遣い。ubi.html 側で背景を明示（.section-dark）。
============================================================ */

.s04 {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--sp-16) 0;
  overflow: hidden;
}
.s04::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 16% 10%, rgba(168, 110, 224, 0.26) 0%, rgba(168, 110, 224, 0) 62%);
  pointer-events: none;
}
.s04::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 86% 92%, rgba(76, 95, 227, 0.20) 0%, rgba(76, 95, 227, 0) 62%);
  pointer-events: none;
}
.s04 > .container { position: relative; z-index: 2; }

.s04-head {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-12);
}
.s04-mark {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1.04;
  box-shadow:
    0 28px 80px rgba(76, 95, 227, 0.45),
    0 0 0 1px rgba(255,255,255,0.10);
}
.s04-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s04-mark::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--r-lg) + 16px);
  background: linear-gradient(135deg, rgba(76, 95, 227, 0.35) 0%, rgba(168, 110, 224, 0.20) 100%);
  z-index: -1;
  filter: blur(30px);
}

.s04-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand-purple-light);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.s04-eyebrow .live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(110, 231, 183, 0.15);
  border-radius: 4px;
  font-size: 9px;
  color: #6EE7B7;
}
.s04-eyebrow .live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6EE7B7;
  box-shadow: 0 0 8px #6EE7B7;
}

.s04-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #fff;
}
.s04-title .grad {
  background: linear-gradient(120deg, #DDD6FE 0%, #A78BFA 50%, #93C5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.s04-lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-on-dark-muted);
  line-height: 1.9;
}
.s04-lead strong { color: #fff; font-weight: 700; }

/* 4ステップフロー */
.s04-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  position: relative;
  margin-bottom: var(--sp-12);
}
.s04-step {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 260px;
  overflow: hidden;
}
.s04-step::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 0 0 2px 2px;
  opacity: 0.85;
}
.s04-step::after {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(168, 110, 224, 0.18) 0%, rgba(168, 110, 224, 0) 60%);
  pointer-events: none;
}
.s04-step-num {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--brand-purple-light);
  position: relative;
}
.s04-step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(168, 110, 224, 0.20), rgba(76, 95, 227, 0.20));
  border: 1px solid rgba(168, 110, 224, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #DDD6FE;
  font-size: 24px;
  font-weight: 800;
  position: relative;
}
.s04-step-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.02em;
  position: relative;
}
.s04-step-body {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
  line-height: 1.75;
  margin-top: auto;
  position: relative;
}

/* 代行業務チップ */
.s04-tasks-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
}
.s04-tasks-label {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--brand-purple-light);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.s04-tasks-label::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
}
.s04-tasks {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.s04-task {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: #fff;
  font-weight: 600;
}
.s04-task-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* 課題ブロック（多店舗運用の限界・PAS型／左大見出し+右縦ログ・非カードグリッド） */
.s04-issues { display: grid; grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.6fr); gap: var(--sp-8) var(--sp-10); align-items: start; margin-bottom: var(--sp-8); }
.s04-issues-title { font-size: clamp(28px, 3.7vw, 46px); font-weight: 900; color: #fff; line-height: 1.4; letter-spacing: -0.02em; margin-top: var(--sp-2); }
.s04-issues-lead { margin-top: var(--sp-4); color: var(--text-on-dark-muted); font-size: var(--fs-md); line-height: 1.8; }
.s04-issue-log { list-style: none; display: grid; }
.s04-issue { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: var(--sp-5); align-items: center; padding: var(--sp-6) 0; border-top: 1px solid rgba(255,255,255,0.12); }
.s04-issue:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.s04-issue-num { font-family: "Inter", sans-serif; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.s04-issue-num .lbl { font-size: 24px; font-weight: 800; letter-spacing: 0.12em; color: var(--brand-purple-light); margin-bottom: 4px; }
.s04-issue-num .no { font-size: 40px; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,0.5); }
.s04-issue-body h4 { font-size: clamp(18px, 2.1vw, 25px); font-weight: 800; color: #fff; line-height: 1.5; letter-spacing: -0.01em; }
.s04-issue-body p { margin-top: 8px; color: var(--text-on-dark-muted); font-size: var(--fs-md); line-height: 1.8; }
.s04-issue-tag { justify-self: end; white-space: nowrap; font-size: var(--fs-xs); font-weight: 800; color: var(--brand-purple-light); padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid rgba(167,139,250,0.35); background: rgba(167,139,250,0.10); }
.s04-bridge { max-width: 840px; margin: var(--sp-8) 0 var(--sp-12); color: var(--text-on-dark-muted); font-size: var(--fs-md); line-height: 1.9; }
.s04-bridge strong { color: #fff; font-weight: 800; }
.s04-closer { margin-top: var(--sp-12); text-align: center; font-size: clamp(22px, 2.4vw, 26px); font-weight: 800; color: var(--text-on-dark-muted); letter-spacing: -0.01em; line-height: 1.55; }
.s04-closer strong { color: #fff; }
/* STEP: 縦の業務ログ（エディトリアル・等幅4カード廃止） */
.s04-worklog { list-style: none; display: grid; gap: var(--sp-4); max-width: 940px; margin: 0 0 var(--sp-12); }
.s04-log-item { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--sp-5); align-items: center; }
.s04-log-item:nth-child(2) { transform: translateX(36px); }
.s04-log-item:nth-child(3) { transform: translateX(72px); }
.s04-log-item:nth-child(4) { transform: translateX(108px); }
.s04-log-num { font-family: "Inter", sans-serif; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.s04-log-num .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--brand-purple-light); margin-bottom: 4px; }
.s04-log-num .no { font-size: clamp(46px, 6.5vw, 82px); font-weight: 900; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,0.5); }
.s04-log-card { padding: var(--sp-5) var(--sp-6); border-left: 2px solid rgba(167,139,250,0.7); background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.012)); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.s04-log-label { font-family: "Inter", sans-serif; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; color: var(--brand-purple-light); }
.s04-log-title { margin-top: 5px; font-size: var(--fs-xl); font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.s04-log-body { margin-top: var(--sp-2); color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.75; }

/* 3本柱 + 比較表（参考資料はコンテンツのみ流用・既存ダークテイスト維持） */
.s04-value { margin-top: var(--sp-12); }
.s04-subhead { max-width: 760px; margin-bottom: var(--sp-6); }
.s04-kicker { display: inline-block; margin-bottom: var(--sp-2); font-family: "Inter", sans-serif; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.15em; color: var(--brand-purple-light); text-transform: uppercase; }
.s04-subhead-title { font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.35; color: #fff; letter-spacing: -0.02em; }
.s04-subhead-lead { margin-top: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.85; }
.s04-pillars { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); gap: var(--sp-5); align-items: stretch; }
.s04-pillar-main { padding: var(--sp-8); border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 82% 16%, rgba(134,14,255,0.20), transparent 42%), linear-gradient(135deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.015) 100%); display: flex; flex-direction: column; }
.s04-pillar-main .s04-pillar-title { font-size: clamp(38px, 5vw, 64px); margin-top: 4px; }
.s04-pillar-main .s04-pillar-desc { font-size: var(--fs-md); }
.s04-pillar-stack { display: grid; gap: 0; align-content: start; }
.s04-pillar-line { padding: var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,0.16); }
.s04-pillar-line:first-child { padding-top: 0; border-top: 0; }
.s04-ui-note { margin-top: var(--sp-8); align-self: flex-start; min-width: 230px; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: rgba(13,13,18,0.66); border: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 3px; }
.s04-ui-note-label { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #FCA5A5; }
.s04-ui-note-title { font-size: var(--fs-md); font-weight: 800; color: #fff; }
.s04-ui-note-meta { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.s04-pillar-en { font-family: "Inter", sans-serif; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-purple-light); }
.s04-pillar-title { margin-top: var(--sp-2); font-size: var(--fs-xl); font-weight: 900; color: #fff; letter-spacing: -0.01em; }
.s04-pillar-desc { margin-top: var(--sp-2); color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.7; }
.s04-pillar-list { margin-top: var(--sp-4); padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.s04-pillar-list li { position: relative; padding-left: 18px; color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.6; }
.s04-pillar-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gradient); }
.s04-compare { margin-top: var(--sp-10); }
.s04-subhead-compact { margin-bottom: var(--sp-5); }
.s04-compare-table { border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,0.03); }
.s04-compare-row { display: grid; grid-template-columns: 1fr 1.5fr 1.7fr; }
.s04-compare-row > div { padding: 15px 18px; border-top: 1px solid rgba(255,255,255,0.08); color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.6; }
.s04-compare-head > div { border-top: 0; color: #fff; font-weight: 800; background: rgba(255,255,255,0.06); font-size: var(--fs-xs); letter-spacing: 0.04em; }
.s04-compare-row > div:first-child { color: #fff; font-weight: 700; }
.s04-compare .bad { color: #FCA5A5; font-weight: 900; margin-right: 4px; }
.s04-compare .good { color: #6EE7B7; font-weight: 900; margin-right: 4px; }

/* 解決の主役: 実管理画面コンソール（ダッシュボード枠＋注釈／スクショ差し替え前提・260624 FB） */
.s04-console { margin-top: var(--sp-12); }
.s04-console-head { max-width: 760px; margin-bottom: var(--sp-6); }
.s04-console-title { font-size: clamp(24px, 3.2vw, 38px); font-weight: 900; line-height: 1.32; color: #fff; letter-spacing: -0.02em; margin-top: var(--sp-2); }
.s04-console-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1.05fr); gap: var(--sp-9, 48px); align-items: start; }
.s04-dash { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: rgba(13,13,18,0.72); box-shadow: 0 30px 70px rgba(0,0,0,0.42); }
.s04-dash-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.10); }
.s04-dash-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.s04-dash-bar .dot:nth-child(1) { background: #FF6058; }
.s04-dash-bar .dot:nth-child(2) { background: #FFBD2E; }
.s04-dash-bar .dot:nth-child(3) { background: #28C840; }
.s04-dash-url { margin-left: 12px; font-family: "Inter", sans-serif; font-size: var(--fs-xs); color: var(--text-on-dark-muted); letter-spacing: 0.02em; }
.s04-dash-body { display: grid; grid-template-columns: 168px minmax(0,1fr); min-height: 360px; }
.s04-dash-side { padding: var(--sp-5) var(--sp-4); border-right: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); }
.s04-dash-logo { font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: 0.04em; font-size: var(--fs-md); background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* タブ切替ヒント */
.s04-dash-hint {
  margin-top: var(--sp-4);
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(76,95,227,0.14));
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  display: flex; align-items: center; gap: 6px;
}
.s04-dash-hint::before {
  content: "▼";
  font-size: 10px;
  color: #a78bfa;
  animation: s04-hint-bounce 1.4s ease-in-out infinite;
}
.s04-dash-hint.is-off::before { animation: none; opacity: 0.5; }
@keyframes s04-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.s04-dash-nav { list-style: none; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 4px; position: relative; }
.s04-dash-tab {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  padding: 10px 12px 10px 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
  position: relative;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.s04-dash-tab::before {
  content: "";
  position: absolute; left: 10px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transform: translateY(-50%);
  transition: background .2s, box-shadow .2s;
}
.s04-dash-tab:hover {
  color: #fff;
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.30);
  transform: translateX(2px);
}
.s04-dash-tab.is-on {
  color: #fff; font-weight: 800;
  background: rgba(167,139,250,0.22);
  border-color: rgba(167,139,250,0.55);
  box-shadow: inset 3px 0 0 #a78bfa;
}
.s04-dash-tab.is-on::before {
  background: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.30);
}
/* オートツアー中の未選択タブに軽くパルス */
.s04-dash-nav.is-tour .s04-dash-tab:not(.is-on)::before {
  animation: s04-tab-pulse 1.8s ease-in-out infinite;
}
@keyframes s04-tab-pulse {
  0%, 100% { background: rgba(255,255,255,0.22); box-shadow: 0 0 0 0 rgba(167,139,250,0); }
  50%      { background: rgba(167,139,250,0.80); box-shadow: 0 0 0 4px rgba(167,139,250,0.15); }
}
.s04-dash-main { padding: var(--sp-5); display: grid; }
.s04-dash-shot { grid-area: 1 / 1; height: 100%; min-height: 300px; border-radius: var(--r-md); border: 1px dashed rgba(255,255,255,0.22); background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.05) 14px 28px); display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.s04-dash-shot.is-on { opacity: 1; visibility: visible; }
.s04-dash-shot-note { font-size: var(--fs-sm); font-weight: 700; color: var(--text-on-dark-muted); line-height: 1.7; }
.s04-dash-shot-note small { display: block; margin-top: 4px; font-weight: 600; color: var(--text-on-dark-faint); }

/* ダッシュボード内の自作UIモック（実データ非使用の"絵"＝管理画面イメージ） */
.s04-dash-shot--ui { border: 0; background: none; padding: 0; display: block; text-align: left; overflow: hidden; }
.s04-ui { padding: var(--sp-5); color: #eef0f6; font-size: var(--fs-sm); height: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.s04-ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.s04-ui-eyebrow { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; }
.s04-ui-title { font-size: var(--fs-md); font-weight: 800; color: #fff; margin-top: 3px; }
.s04-ui-period { font-size: var(--fs-xs); color: var(--text-on-dark-muted); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.s04-ui-period .caret { opacity: .6; }
.s04-ui-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-md); padding: var(--sp-4); }
.s04-ui-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-on-dark-muted); margin-bottom: 8px; }
/* 主役+補助の非対称グリッド */
.s04-ui-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--sp-4); align-items: stretch; }
.s04-ui-senti-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.s04-ui-big { font-size: 44px; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.02em; }
.s04-ui-pill { font-size: var(--fs-xs); font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.s04-ui-pill--pos { color: #6ee7a0; background: rgba(52,199,89,0.14); border: 1px solid rgba(52,199,89,0.32); }
.s04-ui-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); margin: var(--sp-3) 0; overflow: hidden; }
.s04-ui-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#34C759,#a3e635); }
.s04-ui-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-on-dark-muted); }
.s04-ui-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.s04-ui-legend .dot.pos { background: #34C759; } .s04-ui-legend .dot.neu { background: #FBBF24; } .s04-ui-legend .dot.neg { background: #F87171; }
.s04-ui-mini { display: flex; flex-direction: column; gap: var(--sp-4); }
.s04-ui-stat { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.s04-ui-stat-num { font-size: 22px; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 6px; }
.s04-ui-stat-num .star { color: #F5A623; }
.s04-ui-stat-num em { font-size: 11px; font-weight: 800; font-style: normal; }
.s04-ui-stat-num .up { color: #6ee7a0; }
/* テーマゲージ */
.s04-ui-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.s04-ui-theme { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px var(--sp-3); display: flex; align-items: center; gap: 8px; }
.s04-ui-theme .t { font-size: var(--fs-xs); font-weight: 700; color: #d7d9e3; white-space: nowrap; }
.s04-ui-theme .g { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.10); overflow: hidden; }
.s04-ui-theme .g > i { display: block; height: 100%; background: #a78bfa; border-radius: 99px; }
.s04-ui-theme .g--warn > i { background: #FBBF24; }
.s04-ui-theme .v { font-size: var(--fs-xs); font-weight: 900; color: #fff; }
/* 背景ノイズ: 推移グラフ + ランキング */
.s04-ui-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); }
.s04-ui-spark { width: 100%; height: 56px; display: block; }
.s04-ui-rank ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.s04-ui-rank li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: #d7d9e3; }
.s04-ui-rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s04-ui-rank b { font-weight: 900; }
.s04-ui-rank .hi { color: #6ee7a0; } .s04-ui-rank .lo { color: #FBBF24; }
/* 共通の追加部品 */
.s04-ui-label--mt { margin-top: 16px; }
.s04-ui-period--ok { color: #6ee7a0; display: inline-flex; align-items: center; gap: 6px; }
.s04-ui-period--ok .dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; }
.s04-ui-bar--lg { height: 10px; margin: 10px 0 4px; }
.s04-ui-bar--lg > i { background: linear-gradient(90deg,#a78bfa,#6ee7a0); }
/* ダッシュボード: 平均評価＋星分布 */
.s04-ui-rating-row { display: flex; align-items: center; gap: var(--sp-4); }
.s04-ui-rating-meta { display: flex; flex-direction: column; gap: 2px; }
.s04-ui-rating-meta .star { color: #F5A623; font-size: 14px; letter-spacing: 1px; }
.s04-ui-rating-meta small { color: var(--text-on-dark-muted); font-size: 11px; }
.s04-ui-dist { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-4); }
.s04-ui-dist span { display: grid; grid-template-columns: 12px 1fr 34px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-on-dark-muted); }
.s04-ui-dist i { font-style: normal; font-weight: 700; }
.s04-ui-dist b { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.s04-ui-dist u { display: block; height: 100%; background: #a78bfa; border-radius: 99px; }
.s04-ui-dist em { font-style: normal; font-weight: 700; color: #d7d9e3; text-align: right; }
.s04-ui-donutcard { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.s04-ui-donut-row { display: flex; align-items: center; gap: var(--sp-4); }
.s04-ui-donut { position: relative; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#34C759 calc(var(--p,80)*1%), rgba(255,255,255,0.10) 0); display: flex; align-items: center; justify-content: center; }
.s04-ui-donut::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #14141b; }
.s04-ui-donut b { position: relative; font-size: 18px; font-weight: 900; color: #fff; }
.s04-ui-donut-meta { display: flex; flex-direction: column; }
.s04-ui-donut-meta span { font-size: 11px; color: var(--text-on-dark-muted); }
.s04-ui-donut-meta strong { font-size: 20px; font-weight: 900; color: #fff; }
/* 店舗情報 */
.s04-ui-store-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-4); }
.s04-ui-store-name { font-size: 17px; font-weight: 800; color: #fff; }
.s04-ui-store-addr { font-size: 11px; color: var(--text-on-dark-muted); margin-top: 5px; }
.s04-ui-pct { font-size: 20px; font-weight: 900; color: #6ee7a0; }
.s04-ui-pct span { font-size: 12px; margin-left: 2px; }
.s04-ui-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s04-ui-chips span { font-size: 11px; font-weight: 700; color: #d7d9e3; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 99px; padding: 4px 10px; }
.s04-ui-chips .more { color: #a78bfa; }
.s04-ui-gpreview { display: flex; flex-direction: column; }
.s04-ui-gmap { position: relative; flex: 1; min-height: 110px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,#1b2430,#222e3a); margin-bottom: 10px; }
.s04-ui-gmap .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px); background-size: 26px 26px; }
.s04-ui-gmap .pin { position: absolute; left: 50%; top: 46%; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: #EA4335; transform: translate(-50%,-50%) rotate(-45deg); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.s04-ui-gcard strong { display: block; font-size: 13px; color: #fff; font-weight: 800; }
.s04-ui-grate { font-size: 11px; color: var(--text-on-dark-muted); margin: 4px 0 8px; }
.s04-ui-grate .star { color: #F5A623; font-weight: 800; }
.s04-ui-gbtns { display: flex; gap: 6px; }
.s04-ui-gbtns span { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; text-align: center; font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 99px; background: #1a73e8; color: #fff; line-height: 1; box-sizing: border-box; }
.s04-ui-gbtns .ghost { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #d7d9e3; }
/* レビュー */
.s04-ui-review-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-4); }
.s04-ui-revlist { display: flex; flex-direction: column; gap: 8px; }
.s04-ui-revsearch { font-size: 11px; color: var(--text-on-dark-faint); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; padding: 8px 12px; }
.s04-ui-revitem { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; }
.s04-ui-revitem.is-sel { border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.08); }
.s04-ui-revtop { display: flex; align-items: center; gap: 8px; }
.s04-ui-revtop .ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#6B4FBB,#a78bfa); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.s04-ui-revtop .ava.g2 { background: linear-gradient(135deg,#0a7,#5cc); }
.s04-ui-revtop .m { display: flex; flex-direction: column; gap: 1px; }
.s04-ui-revtop b { font-size: 12px; color: #fff; }
.s04-ui-revtop .star { color: #F5A623; font-size: 11px; letter-spacing: .5px; }
.s04-ui-revtop .star i { color: rgba(255,255,255,0.2); font-style: normal; }
.s04-ui-revtop small { color: var(--text-on-dark-faint); font-size: 10px; }
.s04-ui-revitem p { font-size: 11px; color: var(--text-on-dark-muted); margin-top: 7px; line-height: 1.5; }
.s04-ui-revdetail { display: flex; flex-direction: column; }
.s04-ui-revbody { font-size: 12px; color: #d7d9e3; margin: 10px 0 12px; line-height: 1.6; }
.s04-ui-airep { margin-top: auto; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.28); border-radius: 10px; padding: 12px; }
.s04-ui-ai-label { font-size: 11px; font-weight: 800; color: #c4b3ff; }
.s04-ui-airep p { font-size: 11px; color: #e7e3f5; margin: 7px 0 10px; line-height: 1.6; }
.s04-ui-ai-actions { display: flex; gap: 8px; }
.s04-ui-ai-actions span { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.18); color: #d7d9e3; }
.s04-ui-ai-actions .send { background: var(--brand-gradient); border: 0; color: #fff; }
/* ソーシャル */
.s04-ui-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.s04-ui-channels { display: flex; gap: 8px; }
.s04-ui-channels .ch { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(255,255,255,0.12); padding: 5px; overflow: hidden; filter: grayscale(1) opacity(0.55); transition: filter .2s; }
.s04-ui-channels .ch.on { filter: none; border-color: rgba(167,139,250,0.7); box-shadow: 0 0 0 2px rgba(167,139,250,0.25); }
.s04-ui-channels .ch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s04-ui-textarea { font-size: 12px; color: #d7d9e3; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 12px; line-height: 1.6; margin-top: 8px; min-height: 70px; }
.s04-ui-loc { font-size: 11px; color: var(--text-on-dark-muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.s04-ui-loc .pin { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: #a78bfa; transform: rotate(-45deg); display: inline-block; }
.s04-ui-post { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); }
.s04-ui-post-img { height: 96px; background: linear-gradient(135deg,#c0392b,#e67e22); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 900; font-size: 15px; line-height: 1.3; letter-spacing: .04em; }
.s04-ui-post-body { padding: 10px 12px; }
.s04-ui-post-body b { font-size: 12px; color: #fff; }
.s04-ui-post-body p { font-size: 11px; color: var(--text-on-dark-muted); margin: 5px 0 7px; line-height: 1.5; }
.s04-ui-post-date { font-size: 10px; color: #a78bfa; font-weight: 700; }
/* === 高密度版（スクショ忠実・情報量多め）=== */
.s04-ui--dense { gap: var(--sp-3); }
.s04-ui--dense .s04-ui-label { font-size: 10px; margin-bottom: 6px; }
.s04-ui--dense .s04-ui-card { padding: 11px 12px; }
.s04-ui-ring { position: relative; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#34C759 calc(var(--p,90)*1%), rgba(255,255,255,0.10) 0); display: inline-flex; align-items: center; justify-content: center; }
.s04-ui-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #15151c; }
.s04-ui-ring b { position: relative; font-size: 17px; font-weight: 900; color: #fff; }
.s04-ui-ring.warn { background: conic-gradient(#FBBF24 calc(var(--p,80)*1%), rgba(255,255,255,0.10) 0); }
.s04-ui-a-top { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr; gap: var(--sp-3); align-items: stretch; }
.s04-ui-a-top > * { min-width: 0; }
.s04-ui-a-top .s04-ui-senti-row { display: flex; align-items: center; gap: 12px; }
.s04-ui-a-top .s04-ui-pill { white-space: nowrap; }
.s04-ui-senti-detail { flex: 1; min-width: 0; }
.s04-ui--dense .s04-ui-pill { font-size: 10px; padding: 2px 8px; }
.s04-ui--dense .s04-ui-bar { margin: 8px 0; }
.s04-ui--dense .s04-ui-legend { gap: 9px; font-size: 10px; }
.s04-ui-a-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.s04-ui-a-side .s04-ui-stat-num { font-size: 18px; }
.s04-ui-a-side .s04-ui-stat-num em { font-size: 10px; }
.s04-ui-src-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #d7d9e3; margin-bottom: 6px; }
.s04-ui-src-row span { display: flex; align-items: center; gap: 6px; }
.s04-ui-src-row .src-ic { width: 14px; height: 14px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; font-family: "Inter",sans-serif; }
.s04-ui-src-row .src-ic.g { background: #fff; color: #4285F4; }
.s04-ui-src-row .src-ic.o { background: rgba(255,255,255,0.1); color: #aaa; }
.s04-ui-src-row b { font-weight: 900; color: #fff; }
.s04-ui-src-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 4px; }
.s04-ui-src-bar > i { display: block; height: 100%; background: linear-gradient(90deg,#4285F4,#6ee7a0); }
.s04-ui-spots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.s04-ui-spot { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.s04-ui-spot .ring { position: relative; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(#a78bfa calc(var(--p,90)*1%), rgba(255,255,255,0.10) 0); display: inline-flex; align-items: center; justify-content: center; }
.s04-ui-spot .ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #17151f; }
.s04-ui-spot .ring b { position: relative; font-size: 11px; font-weight: 900; color: #fff; }
.s04-ui-spot .ring.warn { background: conic-gradient(#FBBF24 calc(var(--p,80)*1%), rgba(255,255,255,0.10) 0); }
.s04-ui-spot .t { font-size: 10px; font-weight: 700; color: #d7d9e3; white-space: nowrap; }
.s04-ui-spot .tag { font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.s04-ui-spot .tag.pos { color: #6ee7a0; background: rgba(52,199,89,0.12); }
.s04-ui-spot .tag.warn { color: #FBBF24; background: rgba(251,191,36,0.12); }
.s04-ui-a-foot { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-3); }
.s04-ui-spark--axis { height: 72px; }
.s04-ui-rank2 .s04-ui-rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s04-ui-rank-col small { display: block; font-size: 9px; font-weight: 700; color: var(--text-on-dark-faint); margin-bottom: 6px; }
.s04-ui-rank-col ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.s04-ui-rank-col li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: #d7d9e3; }
.s04-ui-rank-col li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s04-ui-rank-col b { font-weight: 900; font-size: 11px; }
.s04-ui-rank-col .hi { color: #6ee7a0; } .s04-ui-rank-col .lo { color: #FBBF24; }
/* ダッシュボード(高密度)追加 */
.s04-ui-subtabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.s04-ui-subtabs span { font-size: 10px; font-weight: 700; color: var(--text-on-dark-muted); padding: 6px 10px; border-bottom: 2px solid transparent; }
.s04-ui-subtabs span.on { color: #fff; border-color: #a78bfa; }
.s04-ui-dash-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.s04-ui-dash-top > * { min-width: 0; }
.s04-ui-dashboard .s04-ui-dist span { grid-template-columns: 24px 1fr 34px; }
.s04-ui-dist--mini { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); gap: 4px; }
.s04-ui-dash-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.s04-ui-foot-num { display: block; font-size: 22px; font-weight: 900; color: #fff; margin: 2px 0 6px; }
/* 店舗情報(高密度)追加 */
.s04-ui-store-head { display: flex; align-items: center; gap: 10px; }
.s04-ui-store-logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg,#8a5a38,#c0392b); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0; }
.s04-ui-perf { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.s04-ui-perf-bars { flex: 1; min-width: 0; }
.s04-ui-perf-bars .row { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-on-dark-muted); margin-bottom: 4px; }
.s04-ui-perf-bars .row b { color: #fff; }
.s04-ui-perf-bars .s04-ui-bar { margin: 0 0 10px; }
.s04-ui-perf-bars .s04-ui-bar:last-child { margin-bottom: 0; }
.s04-ui-ghours { font-size: 10px; color: var(--text-on-dark-muted); margin: 6px 0 8px; }
/* レビュー(高密度)追加 */
.s04-ui-revfilter { display: flex; gap: 6px; align-items: center; }
.s04-ui-revfilter .search { flex: 1; font-size: 10px; color: var(--text-on-dark-faint); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; padding: 6px 10px; }
.s04-ui-revfilter .f { font-size: 10px; font-weight: 700; color: var(--text-on-dark-muted); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; padding: 6px 9px; white-space: nowrap; }
.s04-ui-revtop .m { flex: 1; }
.s04-ui-revtop .src { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; font-family: "Inter",sans-serif; flex-shrink: 0; }
.s04-ui-revtop .src.g { background: #fff; color: #4285F4; }
.s04-ui-revtop .src.f { background: #1877F2; color: #fff; }
.s04-ui-revtop .ava.g3 { background: linear-gradient(135deg,#d35400,#e67e22); }
/* ソーシャル(高密度)追加 */
.s04-ui-segs { display: flex; gap: 6px; }
.s04-ui-segs span { font-size: 10px; font-weight: 700; color: var(--text-on-dark-muted); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; padding: 5px 11px; }
.s04-ui-segs span.on { color: #fff; background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.4); }
.s04-ui-loc a { color: #a78bfa; }
/* 店舗情報 下段(営業時間/同期アクティビティ) */
.s04-ui-store-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.s04-ui-hours div { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-on-dark-muted); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.s04-ui-hours div:last-child { border-bottom: 0; }
.s04-ui-hours b { color: #fff; font-weight: 700; }
.s04-ui-activity { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.s04-ui-activity li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #d7d9e3; }
.s04-ui-activity i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.s04-ui-activity i.ok { background: #34C759; } .s04-ui-activity i.add { background: #a78bfa; }
.s04-ui-activity span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s04-ui-activity em { font-style: normal; color: var(--text-on-dark-faint); font-size: 10px; white-space: nowrap; }
/* レビュー 検出トピック */
.s04-ui-revtop .ava.g4 { background: linear-gradient(135deg,#6B4FBB,#c0392b); }
.s04-ui-revtags { margin-top: 12px; }
.s04-ui-revtags .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s04-ui-revtags .tags span { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.s04-ui-revtags .tags .pos { color: #6ee7a0; background: rgba(52,199,89,0.12); }
.s04-ui-revtags .tags .neu { color: #FBBF24; background: rgba(251,191,36,0.12); }
/* ソーシャル 画像/予約/予約済み投稿 */
.s04-ui-attach { display: flex; align-items: center; gap: 8px; }
.s04-ui-attach .thumb { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg,#c0392b,#e67e22); flex-shrink: 0; }
.s04-ui-attach .add { font-size: 10px; font-weight: 700; color: var(--text-on-dark-muted); border: 1px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 12px 14px; }
.s04-ui-schedule { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 9px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; font-size: 11px; color: var(--text-on-dark-muted); }
.s04-ui-schedule span { display: flex; align-items: center; gap: 6px; }
.s04-ui-schedule .cal { width: 8px; height: 8px; border-radius: 2px; background: #a78bfa; display: inline-block; }
.s04-ui-schedule b { color: #fff; }
.s04-ui-scheduled .s04-ui-sched-list { display: flex; flex-direction: column; gap: 9px; }
.s04-ui-sched-list .row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #d7d9e3; }
.s04-ui-sched-list .ic { width: 22px; height: 22px; border-radius: 50%; background: #fff; padding: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.s04-ui-sched-list .ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s04-ui-sched-list .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s04-ui-sched-list em { font-style: normal; color: var(--text-on-dark-faint); font-size: 10px; white-space: nowrap; }
.s04-ui-sched-list .st { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.s04-ui-sched-list .st.ok { color: #6ee7a0; background: rgba(52,199,89,0.12); }
.s04-ui-sched-list .st.draft { color: var(--text-on-dark-muted); background: rgba(255,255,255,0.07); }
/* ダッシュボード 主要指標 */
.s04-ui-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.s04-ui-metrics .m { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.s04-ui-metrics .l { font-size: 10px; color: var(--text-on-dark-muted); }
.s04-ui-metrics b { font-size: 19px; font-weight: 900; color: #fff; }
.s04-ui-metrics .up { font-size: 10px; font-weight: 800; font-style: normal; color: #6ee7a0; }
/* 口コミ分析 頻出キーワード */
.s04-ui-keywords .kw { display: flex; flex-wrap: wrap; gap: 7px; }
.s04-ui-keywords .kw span { font-size: 11px; font-weight: 700; color: #d7d9e3; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 99px; padding: 5px 11px; }
.s04-ui-keywords .kw em { font-style: normal; color: #a78bfa; font-weight: 800; margin-left: 2px; }
@media (max-width: 600px) {
  .s04-ui-grid, .s04-ui-foot, .s04-ui-store-grid, .s04-ui-review-grid, .s04-ui-social-grid, .s04-ui-a-top, .s04-ui-a-foot, .s04-ui-store-foot { grid-template-columns: 1fr; }
  .s04-ui-themes { grid-template-columns: repeat(2, 1fr); }
  .s04-ui-spots { grid-template-columns: repeat(3, 1fr); }
  .s04-ui-metrics { grid-template-columns: repeat(2, 1fr); }
  .s04-ui-big { font-size: 36px; }
}
.s04-reads { list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); }
.s04-reads li { padding: var(--sp-5) 0 var(--sp-5) var(--sp-6); border-left: 3px solid rgba(167,139,250,0.55); }
.s04-read-en { display: block; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-purple-light); }
.s04-reads li strong { display: block; margin-top: 5px; font-size: 24px; font-weight: 900; color: #fff; }
.s04-reads li span:last-child { display: block; margin-top: 6px; font-size: 15px; color: var(--text-on-dark-muted); line-height: 1.7; }

@media (max-width: 980px) {
  .s04-pillars { grid-template-columns: 1fr; }
  .s04-console-stage { grid-template-columns: 1fr; gap: var(--sp-6); }
  .s04-issues { grid-template-columns: 1fr; gap: var(--sp-6); }
  .s04-head { grid-template-columns: 1fr; gap: var(--sp-6); }
  .s04-mark { max-width: 360px; margin: 0 auto; }
  /* SP時: 見出し(eyebrow+title) → ロゴ画像 → 説明文(lead) の順に並び替え
     display: contents で s04-head-text を透明化し、子を s04-head の直接子扱いに */
  .s04-head-text { display: contents; }
  .s04-eyebrow { order: 1; }
  .s04-title { order: 2; }
  .s04-mark { order: 3; }
  .s04-lead { order: 4; }
  .s04-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .s04-flow { grid-template-columns: 1fr; }
  .s04-step { min-height: auto; }
  .s04-tasks-wrap { padding: var(--sp-5); }
  .s04-compare-row { grid-template-columns: 1fr; padding: var(--sp-4) var(--sp-5); border-top: 1px solid rgba(255,255,255,0.08); }
  .s04-compare-head { display: none; }
  .s04-compare-row > div { padding: 4px 0; border-top: 0; }
  .s04-compare-row > div:first-child { margin-bottom: 2px; }
  .s04-compare-row > div:nth-child(2)::before { content: "従来: "; color: var(--text-on-dark-faint); font-weight: 700; }
  .s04-compare-row > div:nth-child(3)::before { content: "UB-I: "; color: var(--text-on-dark-faint); font-weight: 700; }
  .s04-issue { grid-template-columns: 52px 1fr; }
  .s04-issue-num .lbl { font-size: 18px; }
  .s04-issue-tag { grid-column: 2; justify-self: start; margin-top: 6px; }
  .s04-log-item { grid-template-columns: 50px 1fr; gap: var(--sp-3); transform: none; }
  .s04-log-item:nth-child(2), .s04-log-item:nth-child(3), .s04-log-item:nth-child(4) { transform: none; }
  .s04-dash-body { grid-template-columns: 1fr; min-height: 0; }
  /* SP時: サイドバーを非表示ではなく、上部に横並び+横スクロール表示 */
  .s04-dash-side {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .s04-dash-side::-webkit-scrollbar { display: none; }
  .s04-dash-logo { display: none; }
  .s04-dash-nav {
    flex-direction: row;
    gap: 4px;
    margin-top: 0;
    width: max-content;
  }
  .s04-dash-nav li { flex-shrink: 0; }
  .s04-dash-tab { padding: 6px 12px; font-size: var(--fs-xs); white-space: nowrap; }
  /* PC見え方をSPでも保つため、ダッシュ内部を一括縮小 */
  .s04-dash-main { display: block; zoom: 0.6; }
  /* 高さを active shot に合わせて可変にする(非activeを layout から外す) */
  .s04-dash-shot { position: static; grid-area: auto; height: auto; min-height: 0; display: none; }
  .s04-dash-shot.is-on { display: block; }
}