/* ---------- 区切り2：オプチャ一覧・投稿・シナリオ・チャレンジローンチ ---------- */
.row.space { justify-content: space-between; }
.stack.tight { gap: 2px; }
.stack.wide-gap { gap: 18px; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.block { display: block; }
.pad { padding: 8px; }
.pre { white-space: pre-wrap; }
.warn-text { color: var(--amber); font-weight: 700; }
.late { color: var(--rose); font-weight: 700; }
.empty-card { align-items: flex-start; padding: 28px; }
dialog.wide-dlg { width: min(860px, calc(100vw - 32px)); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 14px; color: var(--muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tab.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 700; }
.tab-n { font-size: 11.5px; background: var(--ground); border-radius: 99px; padding: 0 7px; color: var(--muted); }
.tab.on .tab-n { background: var(--teal-soft); color: var(--teal); }
.filters select, .filters input[type="search"] { width: auto; min-width: 200px; flex: 1 1 200px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { background: var(--paper); border: 0; padding: 8px 14px; cursor: pointer; font-size: 13.5px; color: var(--muted); }
.seg button.on { background: var(--teal-soft); color: var(--teal); font-weight: 700; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--ground); }
.warn-chip { margin-left: 6px; }

.bubble-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bubble { background: #E7F6EF; color: #172D3C; border-radius: 4px 16px 16px 16px; padding: 10px 14px; max-width: 560px; width: fit-content; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bubble b { font-size: 12px; color: #4D6670; font-weight: 700; }
.bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.65; }
.bubble.done { opacity: .75; }
.bubble-meta { color: var(--muted); font-size: 12px; }
.preview-box { background: #8CABD8; border-radius: 12px; padding: 14px; }
.warns { margin: 0; padding: 10px 14px 10px 30px; background: var(--amber-soft); border-radius: 10px; font-size: 13px; color: var(--ink); }
.gen-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.gen-row > .field { flex: 1 1 260px; }
.line-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.line-steps li.done { color: var(--muted); text-decoration: line-through; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; background: var(--ground); border-radius: 10px; padding: 10px 12px; }
.pick-list { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.pick-body { white-space: pre-wrap; font-size: 13.5px; background: var(--ground); border-radius: 8px; padding: 8px 10px; max-height: 160px; overflow: auto; }
.days { display: grid; gap: 14px; }
.day { display: grid; gap: 6px; }
.day-post { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.day-post:hover { border-color: var(--teal); }

/* オプチャ一覧（3列） */
.hub { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.hub-left { gap: 10px; position: sticky; top: 16px; max-height: calc(100vh - 32px); }
.hub-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; margin: 0 -8px; }
.hub-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.hub-item:hover { background: var(--ground); }
.hub-item.on { background: var(--teal-soft); }
.hub-item-text { display: flex; flex-direction: column; min-width: 0; }
.hub-item-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-item-text small { font-size: 11.5px; color: var(--muted); }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--teal); color: var(--teal-ink); display: grid; place-items: center; font-weight: 900; font-family: var(--display); }
.avatar.big { width: 44px; height: 44px; font-size: 18px; }
.hub-center { gap: 12px; min-height: 60vh; }
.hub-title { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hub-title > .stack { flex: 1 1 200px; min-width: 0; }
.feed { background: #8CABD8; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 18px; min-height: 300px; max-height: 70vh; overflow-y: auto; }
.feed-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.feed-time { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .22); border-radius: 99px; padding: 1px 10px; }
.feed-item .row .chip, .preview-row .chip { background: rgba(255, 255, 255, .88); color: #172D3C; }
.feed-empty { margin: auto; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.compose { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hub-right { display: flex; flex-direction: column; gap: 14px; }
.hub-right .card { padding: 16px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--ground); border: 1px solid transparent; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.tile:hover { border-color: var(--teal); }
.tile b { font-size: 13.5px; }
.tile small { font-size: 11.5px; color: var(--muted); }
.next-post { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 6px 0; cursor: pointer; font: inherit; color: var(--ink); }
.steps.compact { gap: 6px; margin: 0; }
.steps.compact .step { padding: 10px 12px; }
.client-row { border-bottom: 1px solid var(--line); padding-bottom: 8px; }

/* シナリオ */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card.scenario { gap: 10px; }
.mini-steps { margin: 0; padding-left: 20px; font-size: 13.5px; display: grid; gap: 2px; }
.preview-list { display: grid; gap: 14px; background: #8CABD8; border-radius: 12px; padding: 14px; max-height: 50vh; overflow-y: auto; }
.preview-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.step-edit-list { display: grid; gap: 10px; }
.step-edit { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }

/* チャレンジローンチ */
.flow-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--teal); }
.flow-strip span:not(.arrow) { background: var(--teal-soft); border-radius: 99px; padding: 2px 12px; }
.flow-strip .arrow { color: var(--muted); }
.toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; position: sticky; top: 8px; z-index: 5; }
.toolbar > span:first-child { margin-right: auto; }
.launch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.launch-side .sticky { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
details.session { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
details.session > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
details.session[open] > summary { margin-bottom: 12px; }
.score { display: flex; align-items: baseline; gap: 8px; }
.score strong { font-family: var(--display); font-size: 30px; font-weight: 900; color: var(--teal); }
ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 13px; color: var(--muted); }
ul.checks li.ok { color: var(--ink); }
ul.checks li.ok .mark { color: var(--teal); font-weight: 900; }
ul.checks small { display: block; font-size: 11.5px; color: var(--muted); }
.tl-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; font-size: 13px; }
.tl-row small { grid-column: 2; }

@media (prefers-color-scheme: dark) {
  .bubble { background: #22423A; color: #E4ECEA; }
  .bubble b { color: #A9C2BD; }
  .preview-box, .feed, .preview-list { background: #2B3E57; }
}
@media (max-width: 1180px) {
  .hub { grid-template-columns: 220px minmax(0, 1fr); }
  .hub-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 820px) {
  .hub, .launch-layout { grid-template-columns: minmax(0, 1fr); }
  .hub-left { position: static; max-height: 320px; }
  .launch-side .sticky { position: static; max-height: none; }
  .toolbar { position: static; }
  .day-post { grid-template-columns: 48px minmax(0, 1fr); }
  .filters select, .filters input[type="search"] { min-width: 0; }
}

.launch-layout textarea, .step-edit textarea, dialog textarea[rows="2"] { min-height: 64px; }

/* ---------- 区切り3：ナレッジ・AIとつなぐ・AIに頼む ---------- */
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kn-card { text-align: left; cursor: pointer; font: inherit; color: inherit; gap: 6px; }
.kn-card:hover { border-color: var(--teal); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
pre.prompt.tall { max-height: 420px; }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; background: var(--ground); }
.drop.on, .drop:hover { border-color: var(--teal); }
.diff { white-space: pre-wrap; font-size: 13px; max-height: 200px; overflow: auto; border-radius: 8px; padding: 6px 8px; }
.diff.old { background: var(--rose-soft); }
.diff.new { background: var(--teal-soft); }
.status-card { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; border-left: 6px solid var(--amber); }
.status-card.ok { border-left-color: var(--teal); }
.key-card { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.code-step { display: grid; gap: 6px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 760px; display: flex; flex-direction: column; gap: 4px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg-body { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14.5px; }
.msg.user .msg-body { background: var(--teal-soft); border-color: transparent; }
.plan { display: grid; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }

/* ---------- 区切り4：参加ページ ---------- */
.meter-op { height: 10px; background: var(--ground); border-radius: 99px; overflow: hidden; flex: 1; min-width: 80px; }
.bar-op { height: 100%; width: 0; background: var(--teal); }
.bar-row { display: grid; grid-template-columns: minmax(80px, 200px) minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 14px; }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 区切り4c：LINE・Google でログイン ---------- */
.providers .btn { width: 100%; padding: 11px 16px; }
.line-btn { background: #06C755; border-color: #06C755; color: #fff; }
.google-btn { background: var(--paper); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 4px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.who-name { color: var(--ink); text-decoration: none; }
.who-name:hover { color: var(--teal); }

/* ---------- 区切り5：マーケティング（流れの図） ---------- */
.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.flow-editor { position: sticky; top: 80px; }
.flow { display: flex; flex-direction: column; align-items: stretch; max-width: 560px; }
.flow-step { display: flex; flex-direction: column; align-items: stretch; }
.flow-arrow { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.4; }
.flow-node { display: grid; gap: 4px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: 12px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.flow-node.on { box-shadow: 0 0 0 3px var(--teal-soft); border-color: var(--teal); }
.flow-node small { color: var(--muted); font-size: 12px; }
.flow-node.k-wait { border-left-color: var(--muted); }
.flow-node.k-branch, .flow-node.k-split { border-left-color: var(--amber); }
.flow-node.k-tag, .flow-node.k-task { border-left-color: #6C7FD8; }
.flow-node.k-end { border-left-color: var(--rose); }
.flow-add { margin-top: 12px; }
@media (max-width: 1000px) { .flow-layout { grid-template-columns: minmax(0, 1fr); } .flow-editor { position: static; } }

/* ---------- 区切り6：数字・改善・使い方・画面を探す ---------- */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.funnel-step { display: grid; gap: 4px; background: var(--ground); border-radius: 12px; padding: 12px; }
.funnel-step strong { font-family: var(--display); font-size: 24px; font-weight: 900; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; }
.kanban-col { background: var(--ground); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.kanban-card { display: grid; gap: 4px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.kanban-card:hover { border-color: var(--teal); }
.kanban-card small { color: var(--muted); font-size: 12px; }
details.guide { background: var(--teal-soft); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; }
details.guide summary { cursor: pointer; font-weight: 700; color: var(--teal); }
details.guide ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.finder-list { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.finder-item { display: flex; justify-content: space-between; align-items: center; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); }
.finder-item:hover, .finder-item:focus { border-color: var(--teal); }
.finder-item small { color: var(--muted); }
.who .linkish { font-size: 12px; text-align: left; }
html.compact body { font-size: 14px; }
html.compact main.page { gap: 14px; padding-top: 18px; }
html.compact .card { padding: 12px 14px; gap: 8px; }
html.compact th, html.compact td { padding: 6px 10px; }
html.compact .nav a { padding: 5px 12px; }